fix: resolve safe wallet integration pitfalls

lifinance · Jul 4, 2023 · 6851f29 · 6851f29
1 parent 57ea843
commit 6851f29
Show file tree

Hide file tree

Showing 6 changed files with 395 additions and 441 deletions.
diff --git a/packages/wallet-management/package.json b/packages/wallet-management/package.json
@@ -53,8 +53,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^2.1.2",
-    "@safe-global/safe-apps-provider": "^0.17.0",
-    "@safe-global/safe-apps-sdk": "^7.11.0",
+    "@safe-global/safe-apps-provider": "^0.17.1",
+    "@safe-global/safe-apps-sdk": "^8.0.0",
     "@walletconnect/ethereum-provider": "^2.8.6",
     "@walletconnect/modal": "^2.5.9",
     "events": "^3.3.0",

diff --git a/packages/wallet-management/src/connectors/safeWalletConnector.ts b/packages/wallet-management/src/connectors/safeWalletConnector.ts
@@ -1,14 +1,9 @@
-import { ethers } from 'ethers';
-import events from 'events';
-import type {
-  AccountData,
-  InjectedConnectorConstructorArgs,
-  Wallet,
-} from '../types';
-
-import type { SafeInfo } from '@safe-global/safe-apps-sdk';
 import { SafeAppProvider } from '@safe-global/safe-apps-provider';
+import type { SafeInfo } from '@safe-global/safe-apps-sdk';
 import SafeAppsSDK from '@safe-global/safe-apps-sdk/dist/src/sdk';
+import { ethers } from 'ethers';
+import events from 'events';
+import type { AccountData, InjectedConnectorArgs, Wallet } from '../types';
 
 export class SafeWalletConnector extends events.EventEmitter implements Wallet {
   public provider: ethers.providers.Web3Provider | undefined;
@@ -19,7 +14,7 @@ export class SafeWalletConnector extends events.EventEmitter implements Wallet {
   public name: string;
   public icon: string;
 
-  constructor(args: InjectedConnectorConstructorArgs) {
+  constructor(args: InjectedConnectorArgs) {
     super();
     this.name = args.name;
     this.icon = args.icon;

diff --git a/packages/wallet-management/src/types/index.ts b/packages/wallet-management/src/types/index.ts
@@ -29,7 +29,7 @@ export interface AccountData {
   chainId: number;
   address: string;
   signer: Signer;
-  provider: ethers.providers.Web3Provider;
+  provider: Web3Provider;
   isMultisigWallet?: boolean;
 }
 
@@ -42,7 +42,7 @@ export interface InjectedConnectorArgs {
 export interface WalletConnectConnectorArgs {
   name: string;
   icon: string;
-  installed: () => boolean;
+  installed: () => Promise<boolean>;
   options: EthereumProviderOptions;
 }
 

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -61,7 +61,7 @@
     "@tanstack/react-query": "^4.29.19",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
-    "i18next": "^23.2.6",
+    "i18next": "^23.2.7",
     "i18next-browser-languagedetector": "^7.1.0",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.0",

diff --git a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx
@@ -1,5 +1,5 @@
-import { supportedWallets } from '@lifi/wallet-management';
 import type { Wallet } from '@lifi/wallet-management';
+import { supportedWallets } from '@lifi/wallet-management';
 import {
   Avatar,
   Button,
@@ -10,7 +10,7 @@ import {
   List,
   ListItemAvatar,
 } from '@mui/material';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
 import { ListItemButton } from '../../components/ListItemButton';
@@ -26,15 +26,7 @@ export const SelectWalletPage = () => {
     show: boolean;
     wallet?: Wallet;
   }>({ show: false });
-
-  // separate into installed and not installed wallets
-  const installedWallets = supportedWallets.filter((wallet) =>
-    wallet.installed(),
-  );
-
-  const notInstalledWallets = supportedWallets.filter(
-    (wallet) => !wallet.installed() && wallet.name !== 'Default Wallet', // always remove Default Wallet from not installed Wallets
-  );
+  const [wallets, setWallets] = useState<Wallet[]>();
 
   const closeDialog = () => {
     setWalletIdentity((state) => ({
@@ -45,7 +37,7 @@ export const SelectWalletPage = () => {
 
   const handleConnect = useCallback(
     async (wallet: Wallet) => {
-      const identityCheckPassed = wallet.installed();
+      const identityCheckPassed = await wallet.installed();
       if (!identityCheckPassed) {
         setWalletIdentity({
           show: true,
@@ -59,6 +51,23 @@ export const SelectWalletPage = () => {
     [connect, navigateBack],
   );
 
+  useEffect(() => {
+    Promise.all(supportedWallets.map((wallet) => wallet.installed())).then(
+      (installed) => {
+        // separate into installed and not installed wallets
+        const installedWallets = supportedWallets.filter(
+          (_, index) => installed[index],
+        );
+        // always remove Default Wallet from not installed Wallets
+        const notInstalledWallets = supportedWallets.filter(
+          (wallet, index) =>
+            !installed[index] && wallet.name !== 'Default Wallet',
+        );
+        setWallets([...installedWallets, ...notInstalledWallets]);
+      },
+    );
+  }, []);
+
   return (
     <Container disableGutters>
       <List
@@ -67,7 +76,7 @@ export const SelectWalletPage = () => {
           paddingRight: 1.5,
         }}
       >
-        {[...installedWallets, ...notInstalledWallets].map((wallet: Wallet) => (
+        {wallets?.map((wallet: Wallet) => (
           <ListItemButton
             key={wallet.name}
             onClick={() => handleConnect(wallet)}