Feat: rm WC/TxB from dashboard - make space for recent Safe Apps (#4248)

* Feat: rm WC/TxB from dashboard - make space for recent Safe Apps

* Rm unused import

* Fix test

* Rm e2e test

cypress/e2e/pages/dashboard.pages.js

@@ -4,20 +4,16 @@ import * as main from './main.page.js'
 import * as createtx from './create_tx.pages.js'
 import staticSafes from '../../fixtures/safes/static.json'
 
-const connectAndTransactStr = 'Connect & transact'
 const transactionQueueStr = 'Pending transactions'
 const noTransactionStr = 'This Safe has no queued transactions'
 const overviewStr = 'Total asset value'
 const sendStr = 'Send'
 const receiveStr = 'Receive'
 const viewAllStr = 'View all'
-const transactionBuilderStr = 'Use Transaction Builder'
 const safeAppStr = 'Safe Apps'
 const exploreSafeApps = 'Explore Safe Apps'
 export const copiedAppUrl = 'share/safe-app?appUrl'
 
-const txBuilder = 'a[href*="tx-builder"]'
-const safeSpecificLink = 'a[href*="&appUrl=http"]'
 const copyShareBtn = '[data-testid="copy-btn-icon"]'
 const exploreAppsBtn = '[data-testid="explore-apps-btn"]'
 const viewAllLink = '[data-testid="view-all-link"][href^="/transactions/queue"]'
@@ -108,10 +104,6 @@ export function verifyShareBtnWorks(index, data) {
     )
 }
 
-export function verifyConnectTransactStrIsVisible() {
-  cy.contains(connectAndTransactStr).should('be.visible')
-}
-
 export function verifyOverviewWidgetData() {
   // Alias for the Overview section
   cy.contains('div', overviewStr).parents('section').as('overviewSection')
@@ -144,21 +136,6 @@ export function verifyTxQueueWidget() {
   })
 }
 
-export function verifyFeaturedAppsSection() {
-  // Alias for the featured Safe Apps section
-  cy.contains('h2', connectAndTransactStr).parents('section').as('featuredSafeAppsSection')
-
-  // Tx Builder app
-  cy.get('@featuredSafeAppsSection').within(() => {
-    // Transaction Builder
-    cy.contains(transactionBuilderStr)
-    cy.get(txBuilder).should('exist')
-
-    // Featured apps have a Safe-specific link
-    cy.get(safeSpecificLink).should('have.length', 1)
-  })
-}
-
 export function verifySafeAppsSection() {
   cy.contains('h2', safeAppStr).parents('section').as('safeAppsSection')
   cy.get('@safeAppsSection').contains(exploreSafeApps)

cypress/e2e/smoke/dashboard.cy.js

@@ -21,7 +21,6 @@ describe('[SMOKE] Dashboard tests', { defaultCommandTimeout: 20000 }, () => {
     cy.clearLocalStorage()
     cy.visit(constants.homeUrl + staticSafes.SEP_STATIC_SAFE_2)
     main.acceptCookies()
-    dashboard.verifyConnectTransactStrIsVisible()
   })
 
   it('[SMOKE] Verify the overview widget is displayed', () => {
@@ -32,10 +31,6 @@ describe('[SMOKE] Dashboard tests', { defaultCommandTimeout: 20000 }, () => {
     dashboard.verifyTxQueueWidget()
   })
 
-  it('[SMOKE] Verify the featured Safe Apps are displayed', () => {
-    dashboard.verifyFeaturedAppsSection()
-  })
-
   it('[SMOKE] Verify the Safe Apps Section is displayed', () => {
     dashboard.verifySafeAppsSection()
   })

cypress/support/localstorage_data.js

@@ -7,7 +7,7 @@ const cookieState = {
   updates: true,
   analytics: true,
   terms: true,
-  termsVersion: CURRENT_COOKIE_TERMS_VERSION
+  termsVersion: CURRENT_COOKIE_TERMS_VERSION,
 }
 
 export const batchData = {

src/components/dashboard/index.tsx

@@ -6,10 +6,8 @@ import { Grid } from '@mui/material'
 import PendingTxsList from '@/components/dashboard/PendingTxs/PendingTxsList'
 import AssetsWidget from '@/components/dashboard/Assets'
 import Overview from '@/components/dashboard/Overview/Overview'
-import { FeaturedApps } from '@/components/dashboard/FeaturedApps/FeaturedApps'
 import SafeAppsDashboardSection from '@/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection'
 import GovernanceSection from '@/components/dashboard/GovernanceSection/GovernanceSection'
-import useRecovery from '@/features/recovery/hooks/useRecovery'
 import { useIsRecoverySupported } from '@/features/recovery/hooks/useIsRecoverySupported'
 import ActivityRewardsSection from '@/components/dashboard/ActivityRewardsSection'
 import { useHasFeature } from '@/hooks/useChains'
@@ -28,8 +26,6 @@ const Dashboard = (): ReactElement => {
   const isSwapFeatureEnabled = useIsSwapFeatureEnabled()
   const isSAPBannerEnabled = useHasFeature(FEATURES.SAP_BANNER) && isSafeTokenEnabled
   const supportsRecovery = useIsRecoverySupported()
-  const [recovery] = useRecovery()
-  const showRecoveryWidget = supportsRecovery && !recovery
 
   return (
     <>
@@ -68,12 +64,6 @@ const Dashboard = (): ReactElement => {
               <PendingTxsList />
             </Grid>
 
-            {showSafeApps && (
-              <Grid item xs={12} lg={showRecoveryWidget ? 12 : 6}>
-                <FeaturedApps stackedLayout={!showRecoveryWidget} />
-              </Grid>
-            )}
-
             {showSafeApps && (
               <Grid item xs={12}>
                 <SafeAppsDashboardSection />

src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx

@@ -1,48 +1,18 @@
-import React, { useMemo } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
-import type { LinkProps } from 'next/link'
-
 import PagePlaceholder from '@/components/common/PagePlaceholder'
 import AddCustomAppIcon from '@/public/images/apps/add-custom-app.svg'
-import { AppRoutes } from '@/config/routes'
-import { SafeAppsTag } from '@/config/constants'
-import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
-
-const useWCAppLink = (): LinkProps['href'] => {
-  const router = useRouter()
-  const [matchingApps] = useRemoteSafeApps(SafeAppsTag.WALLET_CONNECT)
-  const app = matchingApps?.[0]
-
-  return useMemo(
-    () => ({
-      pathname: AppRoutes.apps.open,
-      query: { safe: router.query.safe, appUrl: app?.url },
-    }),
-    [app?.url, router.query.safe],
-  )
-}
 
 const SafeAppsZeroResultsPlaceholder = ({ searchQuery }: { searchQuery: string }) => {
-  const wcLink = useWCAppLink()
   return (
     <PagePlaceholder
       img={<AddCustomAppIcon />}
       text={
         <Typography variant="body1" color="primary.light" m={2} maxWidth="600px">
           No Safe Apps found matching <strong>{searchQuery}</strong>. Connect to dApps that haven&apos;t yet been
-          integrated with the {'Safe{Wallet}'} using the WalletConnect Safe App.
+          integrated with the {'Safe{Wallet}'} using WalletConnect.
         </Typography>
       }
-    >
-      <Link href={wcLink} passHref legacyBehavior>
-        <Button variant="contained" disableElevation size="small">
-          Use WalletConnect
-        </Button>
-      </Link>
-    </PagePlaceholder>
+    />
   )
 }
 

src/config/constants.ts

@@ -59,9 +59,7 @@ export const TENDERLY_ORG_NAME = process.env.NEXT_PUBLIC_TENDERLY_ORG_NAME || ''
 export enum SafeAppsTag {
   NFT = 'nft',
   TX_BUILDER = 'transaction-builder',
-  DASHBOARD_FEATURED = 'dashboard-widgets',
   SAFE_GOVERNANCE_APP = 'safe-governance-app',
-  WALLET_CONNECT = 'wallet-connect',
   ONRAMP = 'onramp',
   RECOVERY_SYGNUM = 'recovery-sygnum',
 }

src/hooks/__tests__/useRankedSafeApps.test.ts

@@ -1,7 +1,6 @@
 import { renderHook } from '@/tests/test-utils'
 import { useRankedSafeApps } from '@/hooks/safe-apps/useRankedSafeApps'
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
-import { SafeAppsTag } from '@/config/constants'
 
 const getMockSafeApp = (props: Partial<SafeAppData>) => {
   return {
@@ -32,20 +31,6 @@ describe('useRankedSafeApps', () => {
     expect(result.current.length).toEqual(5)
   })
 
-  it('excludes featured safe apps', () => {
-    const mockSafeApp1 = getMockSafeApp({ id: 1, tags: [SafeAppsTag.DASHBOARD_FEATURED] })
-    const mockSafeApp2 = getMockSafeApp({ id: 2, tags: [SafeAppsTag.DASHBOARD_FEATURED] })
-    const mockSafeApp3 = getMockSafeApp({ id: 3 })
-    const mockSafeApp4 = getMockSafeApp({ id: 4 })
-    const mockSafeApp5 = getMockSafeApp({ id: 5 })
-
-    const { result } = renderHook(() =>
-      useRankedSafeApps([mockSafeApp1, mockSafeApp2, mockSafeApp3, mockSafeApp4, mockSafeApp5], []),
-    )
-
-    expect(result.current.length).toEqual(3)
-  })
-
   it('returns pinned apps first', () => {
     const mockSafeApp1 = getMockSafeApp({ id: 1 })
     const mockSafeApp2 = getMockSafeApp({ id: 2 })

src/hooks/safe-apps/useRankedSafeApps.ts

@@ -1,7 +1,6 @@
 import { useMemo } from 'react'
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 import { rankSafeApps } from '@/services/safe-apps/track-app-usage-count'
-import { SafeAppsTag } from '@/config/constants'
 
 // number of ranked Safe Apps that we want to display
 const NUMBER_OF_SAFE_APPS = 5
@@ -14,10 +13,7 @@ const useRankedSafeApps = (safeApps: SafeAppData[], pinnedSafeApps: SafeAppData[
     const rankedPinnedApps = rankSafeApps(pinnedSafeApps)
     const randomApps = safeApps.slice().sort(() => Math.random() - 0.5)
 
-    const allRankedApps = rankedPinnedApps
-      .concat(pinnedSafeApps, mostUsedApps, randomApps)
-      // Filter out Featured Apps because they are in their own section
-      .filter((app) => !app.tags.includes(SafeAppsTag.DASHBOARD_FEATURED))
+    const allRankedApps = rankedPinnedApps.concat(pinnedSafeApps, mostUsedApps, randomApps)
 
     // Use a Set to remove duplicates
     return [...new Set(allRankedApps)].slice(0, NUMBER_OF_SAFE_APPS)

src/tests/pages/apps.test.tsx

@@ -520,7 +520,6 @@ describe('AppsPage', () => {
 
           // zero results component
           expect(screen.getByText('No Safe Apps found', { exact: false })).toBeInTheDocument()
-          expect(screen.queryByText('Use WalletConnect')).toBeInTheDocument()
         })
       })
     })