Merge pull request #2236 from zeitgeistpm/#2185-filter-evm-addresses

Filter and handle eth account connections in the wallet
zeitgeistpm · Feb 12, 2024 · bbf923d · bbf923d
2 parents c3ca957 + cebb072
commit bbf923d
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 75 deletions.
diff --git a/lib/state/notifications.ts b/lib/state/notifications.ts
@@ -45,7 +45,7 @@ export type UseNotifications = {
    * @param options - Options for the notification.
    */
   pushNotification(
-    content: string,
+    content: string | ReactNode,
     options?: {
       type?: NotificationType;
       lifetime?: number;
@@ -71,56 +71,56 @@ const notificationsAtom = atom<Notification[]>([]);
  */
 const store = getDefaultStore();
 
-/**
- * Hook to use the notification state.
- *
- * @returns UseNotifications
- */
-export const useNotifications = (): UseNotifications => {
-  const atom = useAtom(notificationsAtom);
-
-  const pushNotification: UseNotifications["pushNotification"] = (
+export const pushNotification: UseNotifications["pushNotification"] = (
+  content,
+  options,
+) => {
+  const notification: Notification = {
+    id: generateGUID(),
     content,
-    options,
-  ) => {
-    const notification: Notification = {
-      id: generateGUID(),
-      content,
-      autoRemove: options?.autoRemove ?? false,
-      lifetime: options?.lifetime ?? 100,
-      type: options?.type ?? "Info",
-    };
+    autoRemove: options?.autoRemove ?? false,
+    lifetime: options?.lifetime ?? 100,
+    type: options?.type ?? "Info",
+  };
 
-    const notifications = store.get(notificationsAtom);
+  const notifications = store.get(notificationsAtom);
 
-    let nextNotifications = [...notifications];
+  let nextNotifications = [...notifications];
 
-    const latestNotification = notifications[notifications.length - 1];
+  const latestNotification = notifications[notifications.length - 1];
 
-    if (latestNotification?.autoRemove) {
-      nextNotifications = notifications.slice(0, -1);
-    }
+  if (latestNotification?.autoRemove) {
+    nextNotifications = notifications.slice(0, -1);
+  }
 
-    nextNotifications = [...nextNotifications, notification];
+  nextNotifications = [...nextNotifications, notification];
 
-    store.set(notificationsAtom, nextNotifications);
+  store.set(notificationsAtom, nextNotifications);
 
-    return notification;
-  };
+  return notification;
+};
 
-  const removeNotification: UseNotifications["removeNotification"] = (
-    notification,
-  ) => {
-    const notifications = store.get(notificationsAtom);
-    store.set(
-      notificationsAtom,
-      notifications.filter((n) =>
-        typeof notification === "string"
-          ? n.id !== notification
-          : n.id !== notification.id,
-      ),
-    );
-  };
+export const removeNotification: UseNotifications["removeNotification"] = (
+  notification,
+) => {
+  const notifications = store.get(notificationsAtom);
+  store.set(
+    notificationsAtom,
+    notifications.filter((n) =>
+      typeof notification === "string"
+        ? n.id !== notification
+        : n.id !== notification.id,
+    ),
+  );
+};
+
+/**
+ * Hook to use the notification state.
+ *
+ * @returns UseNotifications
+ */
+export const useNotifications = (): UseNotifications => {
+  const atom = useAtom(notificationsAtom);
 
   return {
     notifications: atom[0],

diff --git a/lib/state/wallet.ts → lib/state/wallet.tsx b/lib/state/wallet.ts → lib/state/wallet.tsx
@@ -1,28 +1,32 @@
-import { encodeAddress } from "@polkadot/util-crypto";
-import { KeyringPairOrExtSigner } from "@zeitgeistpm/rpc";
-import { tryCatch } from "@zeitgeistpm/utility/dist/option";
-import { atom, getDefaultStore, useAtom } from "jotai";
-import { u8aToHex, stringToHex } from "@polkadot/util";
-import { isString } from "lodash-es";
-import { useMemo } from "react";
-import { persistentAtom } from "./util/persistent-atom";
+import { Keyring } from "@polkadot/api";
+import { InjectedAccount } from "@polkadot/extension-inject/types";
+import { KeyringPair } from "@polkadot/keyring/types";
+import { stringToHex, u8aToHex } from "@polkadot/util";
+import { cryptoWaitReady, encodeAddress } from "@polkadot/util-crypto";
 import {
   BaseDotsamaWallet,
   PolkadotjsWallet,
   SubWallet,
   TalismanWallet,
 } from "@talismn/connect-wallets";
-import { Keyring } from "@polkadot/api";
-import { cryptoWaitReady } from "@polkadot/util-crypto";
-import { InjectedAccount } from "@polkadot/extension-inject/types";
+import { IProvider } from "@web3auth/base";
+import { KeyringPairOrExtSigner } from "@zeitgeistpm/rpc";
+import { tryCatch } from "@zeitgeistpm/utility/dist/option";
+import { atom, getDefaultStore, useAtom } from "jotai";
 import { isPresent } from "lib/types";
-import { KeyringPair } from "@polkadot/keyring/types";
 import { PollingTimeout, poll } from "lib/util/poll";
-import { IProvider } from "@web3auth/base";
+import { isString } from "lodash-es";
+import { useMemo } from "react";
+import { persistentAtom } from "./util/persistent-atom";
 
 //Web3Auth
-import { web3authAtom } from "./util/web3auth-config";
-import { web3AuthWalletInstance } from "./util/web3auth-config";
+import { isNotNull } from "@zeitgeistpm/utility/dist/null";
+import {
+  Notification,
+  pushNotification,
+  removeNotification,
+} from "./notifications";
+import { web3AuthWalletInstance, web3authAtom } from "./util/web3auth-config";
 
 const DAPP_NAME = "zeitgeist";
 
@@ -227,6 +231,8 @@ export const supportedWallets = [
 
 let accountsSubscriptionUnsub: VoidFunction | undefined | null;
 
+let currentErrorNotification: Readonly<Notification> | null = null;
+
 /**
  * Enable a wallet by enabling the extension and setting the wallet atom state to connected.
  * Also starts subscribing to accounts on the extension and updates the accounts in state.
@@ -243,6 +249,7 @@ const enableWallet = async (walletId: string) => {
   if (!isPresent(wallet)) {
     return;
   }
+
   const enablePoll = async (): Promise<void> => {
     try {
       const extension = await poll(
@@ -283,25 +290,56 @@ const enableWallet = async (walletId: string) => {
 
     accountsSubscriptionUnsub = await wallet?.subscribeAccounts((accounts) => {
       store.set(walletAtom, (state) => {
+        const hasConnectedEthereumAccount = accounts?.some((account) => {
+          if ((account as any).type?.toLowerCase() === "ethereum") {
+            return true;
+          }
+        });
+
+        if (hasConnectedEthereumAccount) {
+          currentErrorNotification = pushNotification(
+            <div>
+              <div className="mb-1">Ethereum accounts are unsupported.</div>
+              <div className="text-xs text-gray-500">
+                You have a ethereum account connected in your{" "}
+                {wallet.extensionName} wallet but it will be filtered out as it
+                is not supported.
+              </div>
+            </div>,
+            {
+              autoRemove: true,
+              lifetime: 20_000,
+              type: "Error",
+            },
+          );
+        } else if (currentErrorNotification) {
+          removeNotification(currentErrorNotification);
+        }
+
         return {
           ...state,
           connected: Boolean(accounts && accounts.length > 0),
           accounts:
-            accounts?.map((account) => {
-              return {
-                ...account,
-                address: encodeAddress(account.address, 73),
-              };
-            }) ?? [],
-          errors:
+            accounts
+              ?.map((account) => {
+                try {
+                  return {
+                    ...account,
+                    address: encodeAddress(account.address, 73),
+                  };
+                } catch (error) {
+                  return null;
+                }
+              })
+              .filter(isNotNull) ?? [],
+          errors: [
             accounts?.length === 0
-              ? [
-                  {
-                    extensionName: wallet.extensionName,
-                    type: "NoAccounts",
-                  },
-                ]
-              : [],
+              ? ({
+                  extensionName: wallet.extensionName,
+                  type: "NoAccounts",
+                } satisfies WalletError)
+              : null,
+          ].filter(isNotNull),
         };
       });
     });
@@ -389,14 +427,19 @@ export const useWallet = (): UseWallet => {
     }
   };
 
-  const selectWallet = (wallet: BaseDotsamaWallet | string) => {
+  const selectWallet = async (wallet: BaseDotsamaWallet | string) => {
     setUserConfig({
       ...userConfig,
       walletId: isString(wallet) ? wallet : wallet.extensionName,
     });
-    wallet === "web3auth"
-      ? loadWeb3AuthWallet()
-      : enableWallet(isString(wallet) ? wallet : wallet.extensionName);
+
+    if (wallet === "web3auth") {
+      loadWeb3AuthWallet();
+    } else {
+      const error = await enableWallet(
+        isString(wallet) ? wallet : wallet.extensionName,
+      );
+    }
   };
 
   const disconnectWallet = async () => {