Feature toggle

src/components/common/Header/index.tsx

@@ -17,6 +17,8 @@ import useSafeAddress from '@/hooks/useSafeAddress'
 import BatchIndicator from '@/components/batch/BatchIndicator'
 import WalletConnectUi from '@/components/walletconnect'
 import { PushNotificationsBanner } from '@/components/settings/PushNotifications/PushNotificationsBanner'
+import { useCurrentChain } from '@/hooks/useChains'
+import { hasFeature, FEATURES } from '@/utils/chains'
 
 type HeaderProps = {
   onMenuToggle?: Dispatch<SetStateAction<boolean>>
@@ -28,6 +30,8 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
   const safeAddress = useSafeAddress()
   const showSafeToken = safeAddress && !!getSafeTokenAddress(chainId)
   const router = useRouter()
+  const chain = useCurrentChain()
+  const enableWc = !!chain && hasFeature(chain, FEATURES.NATIVE_WALLETCONNECT)
 
   // Logo link: if on Dashboard, link to Welcome, otherwise to the root (which redirects to either Dashboard or Welcome)
   const logoHref = router.pathname === AppRoutes.home ? AppRoutes.welcome : AppRoutes.index
@@ -78,9 +82,11 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
         </div>
       )}
 
-      <div className={classnames(css.element, css.hideMobile)}>
-        <WalletConnectUi />
-      </div>
+      {enableWc && (
+        <div className={classnames(css.element, css.hideMobile)}>
+          <WalletConnectUi />
+        </div>
+      )}
 
       <div className={classnames(css.element, css.connectWallet)}>
         <ConnectWallet />

src/utils/chains.ts

@@ -15,6 +15,7 @@ export enum FEATURES {
   EIP1271 = 'EIP1271',
   RISK_MITIGATION = 'RISK_MITIGATION',
   PUSH_NOTIFICATIONS = 'PUSH_NOTIFICATIONS',
+  NATIVE_WALLETCONNECT = 'NATIVE_WALLETCONNECT',
 }
 
 export const hasFeature = (chain: ChainInfo, feature: FEATURES): boolean => {