Feat: add swaps card to safe apps list

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import NativeFeatureCard from './index'
+import { Box } from '@mui/material'
+import { SafeAppAccessPolicyTypes } from '@safe-global/safe-gateway-typescript-sdk'
+import { AppRoutes } from '@/config/routes'
+
+const meta = {
+  component: NativeFeatureCard,
+  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 NativeFeatureCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    details: {
+      id: 100_000,
+      url: AppRoutes.swap,
+      name: 'Native swaps are here!',
+      description: 'Experience seamless trading with better decoding and security in native swaps.',
+      accessControl: { type: SafeAppAccessPolicyTypes.NoRestrictions },
+      tags: ['DeFi'],
+      features: [],
+      socialProfiles: [],
+      developerWebsite: '',
+      chainIds: ['11155111'],
+      iconUrl: '/images/common/swap.svg',
+    },
+    onClick: () => {},
+    onDismiss: () => {},
+  },
+}

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

@@ -0,0 +1,49 @@
+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 type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
+import SafeAppIconCard from '../SafeAppIconCard'
+import css from './styles.module.css'
+
+type NativeFeatureCardProps = {
+  details: SafeAppData
+  onClick: () => void
+  onDismiss: () => void
+}
+
+const NativeFeatureCard = ({ details, onClick, onDismiss }: NativeFeatureCardProps) => {
+  return (
+    <Paper className={css.container}>
+      <CardHeader
+        className={css.header}
+        avatar={
+          <div className={css.iconContainer}>
+            <SafeAppIconCard src={details.iconUrl} alt={details.name} width={24} height={24} />
+          </div>
+        }
+      />
+
+      <CardContent className={css.content}>
+        <Typography className={css.title} variant="h5">
+          {details.name}
+        </Typography>
+
+        <Typography className={css.description} variant="body2" color="text.secondary">
+          {details.description}
+        </Typography>
+
+        <Stack direction="row" gap={2} className={css.buttons}>
+          <Button onClick={onClick} size="small" variant="contained" sx={{ px: '16px' }}>
+            Try now
+          </Button>
+          <Button onClick={onDismiss} size="small" variant="text" sx={{ px: '16px' }}>
+            Don&apos;t show
+          </Button>
+        </Stack>
+      </CardContent>
+    </Paper>
+  )
+}
+
+export default NativeFeatureCard

src/components/safe-apps/NativeFeatureCard/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 NativeFeatureCard from '../NativeFeatureCard'
+import { useNativeSwapsAppCard } from '../hooks/useNativeSwapsAppCard'
+import { useRouter } from 'next/router'
+import { NATIVE_SWAPS_APP_ID } from '@/features/swap/config/constants'
 
 type SafeAppListProps = {
   safeAppsList: SafeAppData[]
@@ -34,6 +38,8 @@ const SafeAppList = ({
 }: SafeAppListProps) => {
   const { isPreviewDrawerOpen, previewDrawerApp, openPreviewDrawer, closePreviewDrawer } = useSafeAppPreviewDrawer()
   const { openedSafeAppIds } = useOpenedSafeApps()
+  const { isVisible, setIsVisible } = useNativeSwapsAppCard()
+  const router = useRouter()
 
   const showZeroResultsPlaceholder = query && safeAppsList.length === 0
 
@@ -48,6 +54,18 @@ const SafeAppList = ({
     [openPreviewDrawer, openedSafeAppIds],
   )
 
+  const handleNativeAppClick = useCallback(
+    (route: string) => {
+      router.push({
+        pathname: route,
+        query: router.query,
+      })
+    },
+    [router],
+  )
+
+  const nativeFeatureCard = safeAppsList.find((item) => item.id === NATIVE_SWAPS_APP_ID)
+
   return (
     <>
       {/* Safe Apps List Header */}
@@ -69,19 +87,30 @@ const SafeAppList = ({
             </li>
           ))}
 
+        {nativeFeatureCard && isVisible && (
+          <NativeFeatureCard
+            details={nativeFeatureCard}
+            onClick={() => handleNativeAppClick(nativeFeatureCard.url)}
+            onDismiss={() => setIsVisible(false)}
+          />
+        )}
+
         {/* Flat list filtered by search query */}
-        {safeAppsList.map((safeApp) => (
-          <li key={safeApp.id}>
-            <SafeAppCard
-              safeApp={safeApp}
-              isBookmarked={bookmarkedSafeAppsId?.has(safeApp.id)}
-              onBookmarkSafeApp={onBookmarkSafeApp}
-              removeCustomApp={removeCustomApp}
-              onClickSafeApp={handleSafeAppClick(safeApp)}
-              openPreviewDrawer={openPreviewDrawer}
-            />
-          </li>
-        ))}
+        {safeAppsList.map((safeApp) => {
+          if (safeApp.id === NATIVE_SWAPS_APP_ID) return null
+          return (
+            <li key={safeApp.id}>
+              <SafeAppCard
+                safeApp={safeApp}
+                isBookmarked={bookmarkedSafeAppsId?.has(safeApp.id)}
+                onBookmarkSafeApp={onBookmarkSafeApp}
+                removeCustomApp={removeCustomApp}
+                onClickSafeApp={handleSafeAppClick(safeApp)}
+                openPreviewDrawer={openPreviewDrawer}
+              />
+            </li>
+          )
+        })}
       </ul>
 
       {/* Zero results placeholder */}

src/components/safe-apps/hooks/useNativeSwapsAppCard.ts

@@ -0,0 +1,40 @@
+import { AppRoutes } from '@/config/routes'
+import useChainId from '@/hooks/useChainId'
+import useLocalStorage from '@/services/local-storage/useLocalStorage'
+import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
+import { SafeAppAccessPolicyTypes, SafeAppFeatures } from '@safe-global/safe-gateway-typescript-sdk'
+import { useHasFeature } from '@/hooks/useChains'
+import { FEATURES } from '@/utils/chains'
+import { NATIVE_SWAPS_APP_ID } from '@/features/swap/config/constants'
+
+const SWAPS_APP_CARD_STORAGE_KEY = 'showSwapsAppCard'
+
+export function useNativeSwapsAppCard() {
+  const chainId = useChainId()
+  let [isVisible = true, setIsVisible] = useLocalStorage<boolean>(SWAPS_APP_CARD_STORAGE_KEY)
+  const isSwapFeatureEnabled = useHasFeature(FEATURES.NATIVE_SWAPS)
+
+  if (isVisible && !isSwapFeatureEnabled) {
+    isVisible = false
+  }
+
+  const swapsCard: SafeAppData = {
+    id: NATIVE_SWAPS_APP_ID,
+    url: AppRoutes.swap,
+    name: 'Native swaps are here!',
+    description: 'Experience seamless trading with better decoding and security in native swaps.',
+    accessControl: { type: SafeAppAccessPolicyTypes.NoRestrictions },
+    tags: ['DeFi', 'DEX'],
+    features: [SafeAppFeatures.BATCHED_TRANSACTIONS],
+    socialProfiles: [],
+    developerWebsite: '',
+    chainIds: [chainId],
+    iconUrl: '/images/common/swap.svg',
+  }
+
+  return {
+    swapsCardDetails: swapsCard,
+    isVisible,
+    setIsVisible,
+  }
+}

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'
 
 const BASE_URL = typeof window !== 'undefined' && window.location.origin ? window.location.origin : ''
 
@@ -75,7 +76,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

@@ -13,18 +13,21 @@ import useSafeAppsFilters from '@/hooks/safe-apps/useSafeAppsFilters'
 import SafeAppsFilters from '@/components/safe-apps/SafeAppsFilters'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import { useNativeSwapsAppCard } from '@/components/safe-apps/hooks/useNativeSwapsAppCard'
 
 const SafeApps: NextPage = () => {
   const router = useRouter()
+  const { swapsCardDetails } = useNativeSwapsAppCard()
   const { remoteSafeApps, remoteSafeAppsLoading, pinnedSafeApps, pinnedSafeAppIds, togglePin } = useSafeApps()
+  const allApps = useMemo(() => [swapsCardDetails, ...remoteSafeApps], [remoteSafeApps, swapsCardDetails])
   const { filteredApps, query, setQuery, setSelectedCategories, setOptimizedWithBatchFilter, selectedCategories } =
-    useSafeAppsFilters(remoteSafeApps)
-  const isFiltered = filteredApps.length !== remoteSafeApps.length
+    useSafeAppsFilters(allApps)
+  const isFiltered = filteredApps.length !== allApps.length
   const isSafeAppsEnabled = useHasFeature(FEATURES.SAFE_APPS)
 
   const nonPinnedApps = useMemo(
-    () => remoteSafeApps.filter((app) => !pinnedSafeAppIds.has(app.id)),
-    [remoteSafeApps, pinnedSafeAppIds],
+    () => allApps.filter((app) => !pinnedSafeAppIds.has(app.id)),
+    [allApps, pinnedSafeAppIds],
   )
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -57,7 +60,7 @@ const SafeApps: NextPage = () => {
           onChangeFilterCategory={setSelectedCategories}
           onChangeOptimizedWithBatch={setOptimizedWithBatchFilter}
           selectedCategories={selectedCategories}
-          safeAppsList={remoteSafeApps}
+          safeAppsList={allApps}
         />
 
         {/* Pinned apps */}