feat: Safe Wallet improvements (#1457)

.vscode/settings.json

@@ -1,3 +1,21 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

package.json

@@ -10,50 +10,50 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@fingerprintjs/fingerprintjs": "^3.4.2",
-    "@headlessui/react": "^2.1.10",
+    "@headlessui/react": "^2.2.0",
     "@lifi/explorer": "^0.0.2",
-    "@lifi/sdk": "^3.4.0",
-    "@lifi/wallet-management": "^3.4.0",
-    "@lifi/widget": "^3.9.0",
+    "@lifi/sdk": "^3.4.1",
+    "@lifi/wallet-management": "^3.4.3",
+    "@lifi/widget": "^3.12.0",
     "@metaplex-foundation/mpl-core": "^1.1.1",
     "@metaplex-foundation/umi": "^0.9.2",
     "@metaplex-foundation/umi-bundle-defaults": "^0.9.2",
     "@metaplex-foundation/umi-signer-wallet-adapters": "^0.9.2",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "@mui/material-nextjs": "^5.16.6",
-    "@next/third-parties": "^14.2.16",
-    "@rive-app/react-canvas": "^4.14.5",
+    "@next/third-parties": "^14.2.17",
+    "@rive-app/react-canvas": "^4.16.1",
     "@safe-global/safe-apps-sdk": "^9.1.0",
-    "@sentry/browser": "^8.35.0",
-    "@sentry/nextjs": "^8.35.0",
-    "@sentry/react": "^8.35.0",
+    "@sentry/browser": "^8.37.1",
+    "@sentry/nextjs": "^8.37.1",
+    "@sentry/react": "^8.37.1",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-solflare": "^0.6.28",
     "@solana/web3.js": "^1.95.4",
     "@strapi/blocks-react-renderer": "^1.0.1",
-    "@tanstack/react-query": "^5.59.16",
+    "@tanstack/react-query": "^5.59.20",
     "@widgetbot/react-embed": "^1.9.0",
     "accept-language": "^3.0.20",
     "axios": "^1.7.7",
     "dotenv-cli": "^7.4.2",
     "ethers": "^6.13.4",
     "fontaine": "^0.5.0",
     "graphql": "^16.9.0",
-    "graphql-request": "^7.1.0",
+    "graphql-request": "^7.1.2",
     "i18next": "^23.16.4",
     "i18next-resources-for-ts": "^1.5.0",
     "i18next-resources-to-backend": "^1.2.1",
-    "next": "^14.2.16",
+    "next": "^14.2.17",
     "next-i18n-router": "^5.5.1",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-animated-counter": "^1.7.9",
-    "react-cookie": "^7.2.1",
+    "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
-    "react-i18next": "^15.1.0",
+    "react-i18next": "^15.1.1",
     "shallow-equal": "^3.1.0",
     "sharp": "^0.33.5",
     "siwe": "^2.3.2",
@@ -63,10 +63,10 @@
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@eslint/eslintrc": "^3.1.0",
-    "@next/eslint-plugin-next": "^14.2.16",
+    "@next/eslint-plugin-next": "^14.2.17",
     "@playwright/test": "^1.48.2",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^22.8.1",
+    "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/uuid": "^10.0.0",
@@ -79,7 +79,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "globals": "^15.11.0",
+    "globals": "^15.12.0",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",

src/components/Widgets/Widget.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { ClientOnly } from '@/components/ClientOnly';
-import { MultisigWalletHeaderAlert } from '@/components/MultisigWalletHeaderAlert';
 import { TabsMap } from '@/const/tabsMap';
 import { useMultisig } from '@/hooks/useMultisig';
 import { useThemeStore } from '@/stores/theme';
@@ -36,6 +35,7 @@ import { useConfig } from 'wagmi';
 import { WidgetWrapper } from '.';
 import type { WidgetProps } from './Widget.types';
 import { refuelAllowChains, themeAllowChains } from './Widget.types';
+import { isIframeEnvironment } from 'src/utils/iframe';
 
 export function Widget({
   starterVariant,
@@ -176,31 +176,31 @@ export function Widget({
           maxPriceImpact: 0.4,
           allowSwitchChain: !isMultisigSigner, // avoid routes requiring chain switch for multisig wallets
         },
-        providers: isMultisigSigner
-          ? ([
-              EVM({
-                getWalletClient: () => getWalletClient(wagmiConfig),
-                switchChain: async (chainId) => {
-                  const chain = await switchChain(wagmiConfig, { chainId });
-                  trackEvent({
-                    category: TrackingCategory.Widget,
-                    action: TrackingAction.SwitchChain,
-                    label: 'switch-chain',
-                    data: {
-                      [TrackingEventParameter.ChainId]: chainId,
-                    },
-                  });
-                  return getWalletClient(wagmiConfig, { chainId: chain.id });
-                },
-                multisig: multisigSdkConfig,
-              }),
-            ] as any) // TODO: fix typing Eugene :pray:
-          : undefined,
+        providers:
+          isMultisigSigner && isIframeEnvironment()
+            ? [
+                EVM({
+                  getWalletClient: () => getWalletClient(wagmiConfig),
+                  switchChain: async (chainId) => {
+                    const chain = await switchChain(wagmiConfig, { chainId });
+                    trackEvent({
+                      category: TrackingCategory.Widget,
+                      action: TrackingAction.SwitchChain,
+                      label: 'switch-chain',
+                      data: {
+                        [TrackingEventParameter.ChainId]: chainId,
+                      },
+                    });
+                    return getWalletClient(wagmiConfig, { chainId: chain.id });
+                  },
+                  multisig: multisigSdkConfig,
+                }),
+              ]
+            : undefined,
       },
       buildUrl: true,
-      // insurance: true,
       integrator: integratorStringByType,
-      tokens: tokens as any, // TODO: fix typing Eugene :pray:
+      tokens: tokens,
     };
   }, [
     fromChain,
@@ -236,7 +236,6 @@ export function Widget({
       welcomeScreenClosed={welcomeScreenClosed || !enabled}
     >
       {welcomeScreenClosed && <WashProgressAlert />}
-      {isMultisigSigner && <MultisigWalletHeaderAlert />}
       <ClientOnly fallback={<LifiWidgetSkeleton config={config} />}>
         <LiFiWidget
           integrator={config.integrator}

src/hooks/useMultisig.ts

@@ -7,17 +7,34 @@ import type {
 } from '@lifi/sdk';
 import { type Process, type Route } from '@lifi/sdk';
 import { useAccount } from '@lifi/wallet-management';
+import type { Connector } from 'wagmi';
 import type { GatewayTransactionDetails } from '@safe-global/safe-apps-sdk';
 import SafeAppsSDK, { TransactionStatus } from '@safe-global/safe-apps-sdk';
+import { useEffect, useState } from 'react';
+import { isIframeEnvironment } from 'src/utils/iframe';
+
+const getIsSafeConnector = async (connector?: Connector): Promise<boolean> => {
+  let isSafeConnector = connector?.id === 'safe';
+  if (isSafeConnector) {
+    return isSafeConnector;
+  }
+  const isWalletConnect = connector?.id === 'walletConnect';
+  if (!isWalletConnect) {
+    return false;
+  }
+  const provider = (await connector?.getProvider()) as any;
+  isSafeConnector = provider?.signer?.session?.peer?.metadata?.name
+    ?.toLowerCase?.()
+    ?.includes?.('safe');
+  return isSafeConnector;
+};
 
 export const useMultisig = () => {
   const { account } = useAccount();
+  const [isSafeConnector, setIsSafeConnector] = useState(false);
 
   const checkMultisigEnvironment = async () => {
-    // in Multisig env, window.parent is not equal to window
-    const isIframeEnvironment = window.parent !== window;
-
-    if (!isIframeEnvironment) {
+    if (!isIframeEnvironment()) {
       return false;
     }
 
@@ -30,8 +47,6 @@ export const useMultisig = () => {
     return !!accountInfo?.safeAddress;
   };
 
-  const isSafeConnector = Boolean(account?.connector?.name === 'Safe');
-
   const handleMultiSigTransactionDetails = async (
     txHash: string,
     chainId: number,
@@ -197,6 +212,17 @@ export const useMultisig = () => {
     return !isRouteDone && !isRouteFailed && multisigRouteStarted;
   };
 
+  useEffect(() => {
+    (async () => {
+      const isSafeConnector = await getIsSafeConnector(
+        account.connector as Connector,
+      );
+      if (isSafeConnector) {
+        setIsSafeConnector(isSafeConnector);
+      }
+    })();
+  }, [account.connector]);
+
   return {
     isMultisigSigner: isSafeConnector,
     getMultisigWidgetConfig,

src/i18n/resources.d.ts

@@ -120,10 +120,6 @@ interface Resources {
         title: 'Multiple signatures required';
         description: 'Please notify other multisig wallet participants to sign before the transaction expires.';
       };
-      alert: {
-        title: 'Multisig wallet connected';
-        description: 'Destination wallet address is required to complete the exchange.';
-      };
     };
     questCard: {
       completed: 'Completed';

src/i18n/translations/en/translation.json

@@ -112,10 +112,6 @@
     "transactionInitiated": {
       "title": "Multiple signatures required",
       "description": "Please notify other multisig wallet participants to sign before the transaction expires."
-    },
-    "alert": {
-      "title": "Multisig wallet connected",
-      "description": "Destination wallet address is required to complete the exchange."
     }
   },
   "questCard": {

src/utils/iframe.ts

@@ -0,0 +1,6 @@
+export const isIframeEnvironment = () => {
+  // in iframe env, window.parent is not equal to window
+  const anyWindow = typeof window !== 'undefined' ? (window as any) : undefined;
+  const isIframeEnvironment = anyWindow && anyWindow.parent !== anyWindow;
+  return isIframeEnvironment;
+};