Disable the Sygnum option if app is not enabled

safe-global · Sep 16, 2024 · 4be6d0f · 4be6d0f
1 parent ba6a42e
commit 4be6d0f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -63,6 +63,7 @@ export enum SafeAppsTag {
   SAFE_GOVERNANCE_APP = 'safe-governance-app',
   WALLET_CONNECT = 'wallet-connect',
   ONRAMP = 'onramp',
+  RECOVERY_SYGNUM = 'recovery-sygnum',
 }
 
 // Help Center

diff --git a/src/features/recovery/components/RecoverySettings/ChooseRecoveryMethodModal.tsx b/src/features/recovery/components/RecoverySettings/ChooseRecoveryMethodModal.tsx
@@ -1,5 +1,5 @@
 import Track from '@/components/common/Track'
-import { RECOVERY_FEEDBACK_FORM, HelpCenterArticle } from '@/config/constants'
+import { RECOVERY_FEEDBACK_FORM, HelpCenterArticle, SafeAppsTag } from '@/config/constants'
 import { trackEvent } from '@/services/analytics'
 import { RECOVERY_EVENTS } from '@/services/analytics/events/recovery'
 import { type ChangeEvent, type ReactElement, useContext } from 'react'
@@ -31,8 +31,7 @@ import css from './styles.module.css'
 import CheckIcon from '@/public/images/common/check.svg'
 import { AppRoutes } from '@/config/routes'
 import { useSearchParams } from 'next/navigation'
-
-const SYGNUM_APP_URL = 'https://web3.sygnum.com'
+import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 
 enum RecoveryMethod {
   SelfCustody = 'SelfCustody',
@@ -50,6 +49,7 @@ type Fields = {
 export function ChooseRecoveryMethodModal({ open, onClose }: { open: boolean; onClose: () => void }): ReactElement {
   const { setTxFlow } = useContext(TxModalContext)
   const querySafe = useSearchParams().get('safe')
+  const [matchingApps] = useRemoteSafeApps(SafeAppsTag.RECOVERY_SYGNUM)
 
   const methods = useForm<Fields>({
     defaultValues: {
@@ -124,9 +124,19 @@ export function ChooseRecoveryMethodModal({ open, onClose }: { open: boolean; on
                 <FormControlLabel
                   value={RecoveryMethod.Sygnum}
                   control={<Radio />}
+                  disabled={!matchingApps?.length}
                   label={
                     <div className={css.method}>
-                      <RecoverySygnumIcon style={{ display: 'block' }} />
+                      <Box display="flex" alignItems="center">
+                        <RecoverySygnumIcon style={{ display: 'block' }} />
+
+                        {!matchingApps?.length && (
+                          <Typography color="primary" variant="caption" flex={1} textAlign="right">
+                            not available on this network
+                          </Typography>
+                        )}
+                      </Box>
+
                       <Typography fontWeight="bold" mb={1} mt={2}>
                         Sygnum Web3 Recovery
                       </Typography>
@@ -178,7 +188,7 @@ export function ChooseRecoveryMethodModal({ open, onClose }: { open: boolean; on
                   pathname: AppRoutes.apps.open,
                   query: {
                     safe: querySafe,
-                    appUrl: SYGNUM_APP_URL,
+                    appUrl: matchingApps?.[0]?.url,
                   },
                 }}
                 passHref