Feat: add swaps card to safe apps list

src/components/safe-apps/NativeSwapsCard/index.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import NativeSwapsCard from './index'
+import { Box } from '@mui/material'
+
+const meta = {
+  component: NativeSwapsCard,
+  parameters: {
+    componentSubtitle: 'Renders an order id with an external link and a copy button',
+  },
+
+  decorators: [
+    (Story) => {
+      return (
+        <Box sx={{ maxWidth: '500px' }}>
+          <Story />
+        </Box>
+      )
+    },
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof NativeSwapsCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { onDismiss: () => {} },
+}

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

@@ -0,0 +1,53 @@
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import { Button, Paper, Stack } from '@mui/material'
+import SafeAppIconCard from '../SafeAppIconCard'
+import css from './styles.module.css'
+import { SWAP_EVENTS, SWAP_LABELS } from '@/services/analytics/events/swaps'
+import Track from '@/components/common/Track'
+import Link from 'next/link'
+import { AppRoutes } from '@/config/routes'
+import { useRouter } from 'next/router'
+
+const NativeSwapsCard = ({ onDismiss }: { onDismiss: () => void }) => {
+  const router = useRouter()
+
+  return (
+    <Paper className={css.container}>
+      <CardHeader
+        className={css.header}
+        avatar={
+          <div className={css.iconContainer}>
+            <SafeAppIconCard src="/images/common/swap.svg" alt="Swap Icon" width={24} height={24} />
+          </div>
+        }
+      />
+
+      <CardContent className={css.content}>
+        <Typography className={css.title} variant="h5">
+          Native swaps are here!
+        </Typography>
+
+        <Typography className={css.description} variant="body2" color="text.secondary">
+          Experience seamless trading with better decoding and security in native swaps.
+        </Typography>
+
+        <Stack direction="row" gap={2} className={css.buttons}>
+          <Track {...SWAP_EVENTS.OPEN_SWAPS} label={SWAP_LABELS.safeAppsPromoWidget}>
+            <Link href={{ pathname: AppRoutes.swap, query: { safe: router.query.safe } }} passHref legacyBehavior>
+              <Button variant="contained" size="small">
+                Try now
+              </Button>
+            </Link>
+          </Track>
+          <Button onClick={onDismiss} size="small" variant="text" sx={{ px: '16px' }}>
+            Don&apos;t show
+          </Button>
+        </Stack>
+      </CardContent>
+    </Paper>
+  )
+}
+
+export default NativeSwapsCard

src/components/safe-apps/NativeSwapsCard/styles.module.css

@@ -0,0 +1,49 @@
+.container {
+  transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
+  border: 1px solid transparent;
+  height: 100%;
+}
+
+.container:hover {
+  background-color: var(--color-background-light);
+  border: 1px solid var(--color-secondary-light);
+}
+
+.header {
+  padding: var(--space-3) var(--space-2) var(--space-1) var(--space-2);
+}
+
+.content {
+  padding: var(--space-2);
+}
+
+.iconContainer {
+  position: relative;
+  background: var(--color-secondary-light);
+  border-radius: 50%;
+  display: flex;
+  padding: var(--space-1);
+}
+
+.title {
+  line-height: 175%;
+  margin: 0;
+
+  flex-grow: 1;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description {
+  /* Truncate Safe App Description (3 lines) */
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.buttons {
+  padding-top: var(--space-2);
+}

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

@@ -10,6 +10,10 @@ import useSafeAppPreviewDrawer from '@/hooks/safe-apps/useSafeAppPreviewDrawer'
 import css from './styles.module.css'
 import { Skeleton } from '@mui/material'
 import { useOpenedSafeApps } from '@/hooks/safe-apps/useOpenedSafeApps'
+import NativeSwapsCard from '@/components/safe-apps/NativeSwapsCard'
+import useLocalStorage from '@/services/local-storage/useLocalStorage'
+import { useHasFeature } from '@/hooks/useChains'
+import { FEATURES } from '@/utils/chains'
 
 type SafeAppListProps = {
   safeAppsList: SafeAppData[]
@@ -20,8 +24,11 @@ type SafeAppListProps = {
   removeCustomApp?: (safeApp: SafeAppData) => void
   title: string
   query?: string
+  isFiltered?: boolean
 }
 
+const SWAPS_APP_CARD_STORAGE_KEY = 'showSwapsAppCard'
+
 const SafeAppList = ({
   safeAppsList,
   safeAppsListLoading,
@@ -31,9 +38,12 @@ const SafeAppList = ({
   removeCustomApp,
   title,
   query,
+  isFiltered = false,
 }: SafeAppListProps) => {
   const { isPreviewDrawerOpen, previewDrawerApp, openPreviewDrawer, closePreviewDrawer } = useSafeAppPreviewDrawer()
   const { openedSafeAppIds } = useOpenedSafeApps()
+  let [isSwapsCardVisible = true, setIsSwapsCardVisible] = useLocalStorage<boolean>(SWAPS_APP_CARD_STORAGE_KEY)
+  const isSwapFeatureEnabled = useHasFeature(FEATURES.NATIVE_SWAPS)
 
   const showZeroResultsPlaceholder = query && safeAppsList.length === 0
 
@@ -69,6 +79,10 @@ const SafeAppList = ({
             </li>
           ))}
 
+        {!isFiltered && isSwapsCardVisible && isSwapFeatureEnabled && (
+          <NativeSwapsCard onDismiss={() => setIsSwapsCardVisible(false)} />
+        )}
+
         {/* Flat list filtered by search query */}
         {safeAppsList.map((safeApp) => (
           <li key={safeApp.id}>

src/features/swap/config/constants.ts

@@ -0,0 +1 @@
+export const NATIVE_SWAPS_APP_ID = 100_000

src/features/swap/index.tsx

@@ -27,6 +27,7 @@ import { isBlockedAddress } from '@/services/ofac'
 import { selectSwapParams, setSwapParams, type SwapState } from './store/swapParamsSlice'
 import { setSwapOrder } from '@/store/swapOrderSlice'
 import useChainId from '@/hooks/useChainId'
+import { NATIVE_SWAPS_APP_ID } from '@/features/swap/config/constants'
 import { type BaseTransaction } from '@safe-global/safe-apps-sdk'
 import { APPROVAL_SIGNATURE_HASH } from '@/components/tx/ApprovalEditor/utils/approvals'
 import { id } from 'ethers'
@@ -94,7 +95,7 @@ const SwapWidget = ({ sell }: Params) => {
 
   const appData: SafeAppData = useMemo(
     () => ({
-      id: 1,
+      id: NATIVE_SWAPS_APP_ID,
       url: 'https://app.safe.global',
       name: SWAP_TITLE,
       iconUrl: darkMode ? './images/common/safe-swap-dark.svg' : './images/common/safe-swap.svg',

src/pages/apps/index.tsx

@@ -24,7 +24,7 @@ const SafeApps: NextPage = () => {
 
   const nonPinnedApps = useMemo(
     () => remoteSafeApps.filter((app) => !pinnedSafeAppIds.has(app.id)),
-    [remoteSafeApps, pinnedSafeAppIds],
+    [pinnedSafeAppIds, remoteSafeApps],
   )
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -73,6 +73,7 @@ const SafeApps: NextPage = () => {
         {/* All apps */}
         <SafeAppList
           title="All apps"
+          isFiltered={isFiltered}
           safeAppsList={isFiltered ? filteredApps : nonPinnedApps}
           safeAppsListLoading={remoteSafeAppsLoading}
           bookmarkedSafeAppsId={pinnedSafeAppIds}

src/services/analytics/events/swaps.ts

@@ -13,4 +13,5 @@ export enum SWAP_LABELS {
   asset = 'asset',
   dashboard_assets = 'dashboard_assets',
   promoWidget = 'promoWidget',
+  safeAppsPromoWidget = 'safeAppsPromoWidget',
 }