fix: enable swap app card only on supported networks

safe-global · Jun 3, 2024 · 11a347c · 11a347c
1 parent ae9d480
commit 11a347c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/src/components/safe-apps/SafeAppList/index.tsx b/src/components/safe-apps/SafeAppList/index.tsx
@@ -13,6 +13,7 @@ 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[]
@@ -86,7 +87,7 @@ const SafeAppList = ({
 
         {/* Flat list filtered by search query */}
         {safeAppsList.map((safeApp) => {
-          return !safeApp.isNativeFeature ? (
+          return safeApp.id !== NATIVE_SWAPS_APP_ID ? (
             <li key={safeApp.id}>
               <SafeAppCard
                 safeApp={safeApp}

diff --git a/src/components/safe-apps/hooks/useNativeSwapsAppCard.ts b/src/components/safe-apps/hooks/useNativeSwapsAppCard.ts
@@ -3,15 +3,23 @@ import useChainId from '@/hooks/useChainId'
 import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 import { SafeAppAccessPolicyTypes } 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()
-  const [isVisible = true, setIsVisible] = useLocalStorage<boolean>(SWAPS_APP_CARD_STORAGE_KEY)
+  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: 100_000,
+    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.',
@@ -22,7 +30,6 @@ export function useNativeSwapsAppCard() {
     developerWebsite: '',
     chainIds: [chainId],
     iconUrl: '/images/common/swap.svg',
-    isNativeFeature: true,
   }
 
   return {

diff --git a/src/features/swap/config/constants.ts b/src/features/swap/config/constants.ts
@@ -0,0 +1 @@
+export const NATIVE_SWAPS_APP_ID = 100_000
diff --git a/src/features/swap/index.tsx b/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 : ''
 
@@ -67,7 +68,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',