From 8f4c07cd0672080b1e59fc4d3118e5c879d0a07c Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Wed, 8 May 2024 16:44:46 +0200
Subject: [PATCH] Refactor: walletconnect card on dashboard (#3616)

---
 public/images/common/walletconnect.svg        |  4 +-
 .../dashboard/FeaturedApps/FeaturedApps.tsx   | 51 ++++++++++---------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/public/images/common/walletconnect.svg b/public/images/common/walletconnect.svg
index f2970ae478..c3d115798a 100644
--- a/public/images/common/walletconnect.svg
+++ b/public/images/common/walletconnect.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.09442 8.34459C9.35599 5.21847 14.644 5.21847 17.9056 8.34459L18.2981 8.72082C18.4612 8.87713 18.4612 9.13055 18.2981 9.28686L16.9554 10.5739C16.8738 10.652 16.7416 10.652 16.6601 10.5739L16.1199 10.0561C13.8445 7.87528 10.1555 7.87528 7.88012 10.0561L7.30164 10.6106C7.2201 10.6887 7.0879 10.6887 7.00636 10.6106L5.66357 9.32358C5.50049 9.16727 5.50049 8.91385 5.66357 8.75754L6.09442 8.34459ZM20.6826 11.0063L21.8777 12.1517C22.0408 12.308 22.0408 12.5615 21.8777 12.7178L16.489 17.8828C16.3259 18.0391 16.0615 18.0391 15.8984 17.8828C15.8984 17.8828 15.8984 17.8828 15.8984 17.8828L12.0739 14.217C12.0331 14.1779 11.967 14.1779 11.9262 14.217C11.9262 14.217 11.9262 14.217 11.9262 14.217L8.10172 17.8828C7.93865 18.0391 7.67424 18.0391 7.51116 17.8828C7.51116 17.8828 7.51117 17.8828 7.51116 17.8828L2.12231 12.7177C1.95923 12.5614 1.95923 12.308 2.12231 12.1517L3.31739 11.0062C3.48047 10.8499 3.74487 10.8499 3.90795 11.0062L7.73258 14.672C7.77335 14.7111 7.83945 14.7111 7.88022 14.672C7.88022 14.672 7.88022 14.672 7.88022 14.672L11.7047 11.0062C11.8677 10.8499 12.1321 10.8499 12.2952 11.0062C12.2952 11.0062 12.2952 11.0062 12.2952 11.0062L16.1198 14.672C16.1606 14.7111 16.2267 14.7111 16.2675 14.672L20.0921 11.0063C20.2551 10.85 20.5195 10.85 20.6826 11.0063Z" fill="currentColor"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#3a99fb">
+<path d="M6.09442 8.34459C9.35599 5.21847 14.644 5.21847 17.9056 8.34459L18.2981 8.72082C18.4612 8.87713 18.4612 9.13055 18.2981 9.28686L16.9554 10.5739C16.8738 10.652 16.7416 10.652 16.6601 10.5739L16.1199 10.0561C13.8445 7.87528 10.1555 7.87528 7.88012 10.0561L7.30164 10.6106C7.2201 10.6887 7.0879 10.6887 7.00636 10.6106L5.66357 9.32358C5.50049 9.16727 5.50049 8.91385 5.66357 8.75754L6.09442 8.34459ZM20.6826 11.0063L21.8777 12.1517C22.0408 12.308 22.0408 12.5615 21.8777 12.7178L16.489 17.8828C16.3259 18.0391 16.0615 18.0391 15.8984 17.8828C15.8984 17.8828 15.8984 17.8828 15.8984 17.8828L12.0739 14.217C12.0331 14.1779 11.967 14.1779 11.9262 14.217C11.9262 14.217 11.9262 14.217 11.9262 14.217L8.10172 17.8828C7.93865 18.0391 7.67424 18.0391 7.51116 17.8828C7.51116 17.8828 7.51117 17.8828 7.51116 17.8828L2.12231 12.7177C1.95923 12.5614 1.95923 12.308 2.12231 12.1517L3.31739 11.0062C3.48047 10.8499 3.74487 10.8499 3.90795 11.0062L7.73258 14.672C7.77335 14.7111 7.83945 14.7111 7.88022 14.672C7.88022 14.672 7.88022 14.672 7.88022 14.672L11.7047 11.0062C11.8677 10.8499 12.1321 10.8499 12.2952 11.0062C12.2952 11.0062 12.2952 11.0062 12.2952 11.0062L16.1198 14.672C16.1606 14.7111 16.2267 14.7111 16.2675 14.672L20.0921 11.0063C20.2551 10.85 20.5195 10.85 20.6826 11.0063Z" />
 </svg>
diff --git a/src/components/dashboard/FeaturedApps/FeaturedApps.tsx b/src/components/dashboard/FeaturedApps/FeaturedApps.tsx
index 1d5bed056c..fbef5f3013 100644
--- a/src/components/dashboard/FeaturedApps/FeaturedApps.tsx
+++ b/src/components/dashboard/FeaturedApps/FeaturedApps.tsx
@@ -1,32 +1,27 @@
 import type { ReactElement, SyntheticEvent } from 'react'
 import { Box, Grid, Typography, Link } from '@mui/material'
-import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 import { Card, WidgetBody, WidgetContainer } from '../styled'
-import { useRouter } from 'next/router'
 import NextLink from 'next/link'
-import { AppRoutes } from '@/config/routes'
-import { SafeAppsTag } from '@/config/constants'
-import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
-import { isWalletConnectSafeApp } from '@/utils/gateway'
 import { openWalletConnect } from '@/features/walletconnect/components'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
 
-const FeaturedAppCard = ({ app }: { app: SafeAppData }) => (
+const FeaturedAppCard = ({ name, description, iconUrl }: { name: string; description: string; iconUrl: string }) => (
   <Card>
     <Grid container alignItems="center" spacing={3}>
       <Grid item xs={12} md={3}>
-        <SafeAppIconCard src={app.iconUrl} alt={app.name} width={64} height={64} />
+        <SafeAppIconCard src={iconUrl} alt={name} width={64} height={64} />
       </Grid>
 
       <Grid item xs={12} md={9}>
         <Box mb={1.01}>
-          <Typography fontSize="lg">{app.description}</Typography>
+          <Typography fontSize="lg">{description}</Typography>
         </Box>
 
         <Link color="primary.main" fontWeight="bold" component="span">
-          Use {app.name}
+          Use {name}
         </Link>
       </Grid>
     </Grid>
@@ -39,11 +34,8 @@ const onWcWidgetClick = (e: SyntheticEvent) => {
 }
 
 export const FeaturedApps = ({ stackedLayout }: { stackedLayout: boolean }): ReactElement | null => {
-  const router = useRouter()
-  const [featuredApps, _, remoteSafeAppsLoading] = useRemoteSafeApps(SafeAppsTag.DASHBOARD_FEATURED)
-  const enableWc = useHasFeature(FEATURES.NATIVE_WALLETCONNECT)
-
-  if (!featuredApps?.length && !remoteSafeAppsLoading) return null
+  const txBuilder = useTxBuilderApp()
+  const isWcEnabled = useHasFeature(FEATURES.NATIVE_WALLETCONNECT)
 
   return (
     <Grid item xs={12} md style={{ height: '100%' }}>
@@ -53,17 +45,28 @@ export const FeaturedApps = ({ stackedLayout }: { stackedLayout: boolean }): Rea
         </Typography>
         <WidgetBody>
           <Grid container spacing={3} height={1}>
-            {featuredApps?.map((app) => (
-              <Grid item xs={12} md={stackedLayout ? 12 : 6} key={app.id}>
-                <NextLink
-                  passHref
-                  href={{ pathname: AppRoutes.apps.open, query: { ...router.query, appUrl: app.url } }}
-                  onClick={enableWc && isWalletConnectSafeApp(app.url) ? onWcWidgetClick : undefined}
-                >
-                  <FeaturedAppCard app={app} />
+            {txBuilder?.app && (
+              <Grid item xs={12} md={stackedLayout ? 12 : 6}>
+                <NextLink passHref href={txBuilder?.link}>
+                  <FeaturedAppCard
+                    name={txBuilder.app.name}
+                    description={txBuilder.app.description}
+                    iconUrl={txBuilder.app.iconUrl}
+                  />
                 </NextLink>
               </Grid>
-            ))}
+            )}
+            {isWcEnabled && (
+              <Grid item xs={12} md={stackedLayout ? 12 : 6}>
+                <a onClick={onWcWidgetClick} href="#">
+                  <FeaturedAppCard
+                    name="WalletConnect"
+                    description="Connect your Safe to any dApp that supports WalletConnect"
+                    iconUrl="/images/common/walletconnect.svg"
+                  />
+                </a>
+              </Grid>
+            )}
           </Grid>
         </WidgetBody>
       </WidgetContainer>