feat: hide safe interaction for mode

frontend/components/MainPage/sections/AlertSections/index.tsx

@@ -1,4 +1,5 @@
 import { CardSection } from '@/components/styled/CardSection';
+import { useFeatureFlag } from '@/hooks/useFeatureFlag';
 
 import { AddBackupWalletAlert } from './AddBackupWalletAlert';
 import { AvoidSuspensionAlert } from './AvoidSuspensionAlert';
@@ -8,10 +9,11 @@ import { NoAvailableSlotsOnTheContract } from './NoAvailableSlotsOnTheContract';
 import { UpdateAvailableAlert } from './UpdateAvailableAlert';
 
 export const AlertSections = () => {
+  const isBackupViaSafeEnabled = useFeatureFlag('backup-via-safe');
   return (
     <CardSection vertical>
       <UpdateAvailableAlert />
-      <AddBackupWalletAlert />
+      {isBackupViaSafeEnabled && <AddBackupWalletAlert />}
       <NewStakingProgramAlert />
       <AvoidSuspensionAlert />
       <LowFunds />

frontend/components/Pages/AddBackupWalletViaSafePage/index.tsx

@@ -19,7 +19,7 @@ const safeChainPrefix = {
   [EvmChainId.Base]: 'base',
   [EvmChainId.Optimism]: 'oeth',
   [EvmChainId.Gnosis]: 'gno',
-  [EvmChainId.Mode]: 'mode', // TODO: Modius - the above link doesn't have Mode, so the prefix is a guess
+  [EvmChainId.Mode]: '', // TODO: provide correct prefix once mode is supported on safe
 };
 
 export const AddBackupWalletViaSafePage = () => {

frontend/components/SettingsPage/index.tsx

@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 
 import { Pages } from '@/enums/Pages';
 import { SettingsScreen } from '@/enums/SettingsScreen';
+import { useFeatureFlag } from '@/hooks/useFeatureFlag';
 import { useMultisig } from '@/hooks/useMultisig';
 import { usePageState } from '@/hooks/usePageState';
 import { useServices } from '@/hooks/useServices';
@@ -83,6 +84,8 @@ export const Settings = () => {
 };
 
 const SettingsMain = () => {
+  const isBackupViaSafeEnabled = useFeatureFlag('backup-via-safe');
+
   const { selectedService } = useServices();
   const { masterEoa, masterSafes } = useMasterWalletContext();
 
@@ -148,16 +151,21 @@ const SettingsMain = () => {
         </Flex>
       </CardSection>
 
-      {/* Wallet backup */}
-      <CardSection
-        padding="24px"
-        borderbottom={masterSafeBackupAddress ? 'true' : 'false'}
-        vertical
-        gap={8}
-      >
-        <Text strong>Backup wallet</Text>
-        {walletBackup}
-      </CardSection>
+      {/* Wallet backup 
+        If there's no backup address and adding it
+        via safe is disabled - hide the section
+      */}
+      {!isBackupViaSafeEnabled && !masterSafeBackupAddress ? null : (
+        <CardSection
+          padding="24px"
+          borderbottom={masterSafeBackupAddress ? 'true' : 'false'}
+          vertical
+          gap={8}
+        >
+          <Text strong>Backup wallet</Text>
+          {walletBackup}
+        </CardSection>
+      )}
 
       {/* Debug info */}
       <DebugInfoSection />

frontend/hooks/useFeatureFlag.ts

@@ -10,6 +10,7 @@ const FeatureFlagsSchema = z.enum([
   'manage-wallet',
   'rewards-streak',
   'staking-contract-section',
+  'backup-via-safe',
 ]);
 type FeatureFlags = z.infer<typeof FeatureFlagsSchema>;
 
@@ -29,18 +30,22 @@ const FEATURES_CONFIG = FeaturesConfigSchema.parse({
     'last-transactions': true,
     'rewards-streak': true,
     'staking-contract-section': true,
+    'backup-via-safe': true,
   },
   [AgentType.Memeooorr]: {
     'manage-wallet': false,
     'last-transactions': false,
     'rewards-streak': false,
     'staking-contract-section': false,
+    'backup-via-safe': true,
   },
   [AgentType.Modius]: {
     'manage-wallet': false,
     'last-transactions': false,
     'rewards-streak': false,
     'staking-contract-section': false,
+    // temporarily hidden until mode is available on safe https://app.safe.global/new-safe/create
+    'backup-via-safe': false,
   },
 });