feat: tomo revamp (#640)

babylonlabs-io · Jan 23, 2025 · 3de33af · 3de33af
1 parent 3739dc8
commit 3de33af
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 52 deletions.
diff --git a/src/app/components/Modals/ErrorModal.tsx b/src/app/components/Modals/ErrorModal.tsx
@@ -86,7 +86,12 @@ export const ErrorModal: React.FC<ErrorModalProps> = ({
   };
 
   return (
-    <DialogComponent open={open} onClose={onClose}>
+    <DialogComponent
+      backdropClassName="z-[100]"
+      className="z-[150]"
+      open={open}
+      onClose={onClose}
+    >
       <DialogBody className="flex flex-col pb-8 pt-4 text-primary-dark gap-4 items-center justify-center">
         <div className="bg-primary-contrast h-20 w-20 flex items-center justify-center">
           <MdOutlineSwapHoriz className="text-5xl" />

diff --git a/src/app/context/tomo/ConnectButton.tsx b/src/app/context/tomo/ConnectButton.tsx
diff --git a/src/app/context/tomo/TomoWidget.tsx b/src/app/context/tomo/TomoWidget.tsx
@@ -0,0 +1,74 @@
+import { Text } from "@babylonlabs-io/bbn-core-ui";
+import {
+  useClickWallet,
+  useWalletListWithIsInstall,
+} from "@tomo-inc/wallet-connect-sdk";
+import { useMemo } from "react";
+import { twJoin } from "tailwind-merge";
+
+import { ErrorState } from "@/app/types/errors";
+
+import { useError } from "../Error/ErrorContext";
+
+interface TomoWidgetProps {
+  chainName: "bitcoin" | "cosmos";
+}
+
+export const TomoWidget = ({ chainName }: TomoWidgetProps) => {
+  const { showError, captureError } = useError();
+  const selectWallet = useClickWallet();
+  const wallets = useWalletListWithIsInstall();
+
+  const walletList = useMemo(
+    () =>
+      (wallets ?? []).filter((wallet: any) => wallet.chainType === chainName),
+    [wallets, chainName],
+  );
+
+  const handleClick = async (wallet: any) => {
+    try {
+      await selectWallet(wallet);
+    } catch (e: any) {
+      showError({
+        error: {
+          message: e.message,
+          errorState: ErrorState.WALLET,
+        },
+      });
+      captureError(e);
+    }
+  };
+
+  return (
+    <div className="pt-10">
+      <Text className="mb-4">More wallets with Tomo Connect</Text>
+
+      <div className="grid grid-cols-7 gap-6 items-center justify-between border border-primary-light/20 rounded p-6">
+        {walletList.map((wallet: any) => (
+          <button
+            disabled={!wallet.isInstall}
+            className={twJoin(
+              "flex flex-col items-center gap-2.5",
+              wallet.isInstall ? "opacity-100" : "opacity-50",
+            )}
+            key={wallet.id}
+            onClick={() => handleClick(wallet)}
+          >
+            <img
+              className="h-10 w-10 object-contain"
+              src={wallet.img}
+              alt={wallet.name}
+            />
+
+            <Text
+              className="text-primary-dark leading-none whitespace-nowrap"
+              variant="body2"
+            >
+              {wallet.name}
+            </Text>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/src/app/context/wallet/WalletConnectionProvider.tsx b/src/app/context/wallet/WalletConnectionProvider.tsx
@@ -4,10 +4,10 @@ import {
   ChainConfigArr,
   WalletProvider,
 } from "@babylonlabs-io/bbn-wallet-connect";
-import { type PropsWithChildren } from "react";
+import { useCallback, type PropsWithChildren } from "react";
 
-import { ConnectButton } from "@/app/context/tomo/ConnectButton";
 import { TomoConnectionProvider } from "@/app/context/tomo/TomoProvider";
+import { TomoWidget } from "@/app/context/tomo/TomoWidget";
 import { ErrorState } from "@/app/types/errors";
 import { getNetworkConfigBBN } from "@/config/network/bbn";
 import { getNetworkConfigBTC } from "@/config/network/btc";
@@ -17,13 +17,14 @@ import { TomoBBNConnector } from "../tomo/BBNConnector";
 import { TomoBTCConnector } from "../tomo/BTCConnector";
 
 const context = typeof window !== "undefined" ? window : {};
+
 const config: ChainConfigArr = [
   {
     chain: "BTC",
     connectors: [
       {
         id: "tomo-btc-connector",
-        widget: () => <ConnectButton chainName="bitcoin" />,
+        widget: () => <TomoWidget chainName="bitcoin" />,
       },
     ],
     config: getNetworkConfigBTC(),
@@ -33,7 +34,7 @@ const config: ChainConfigArr = [
     connectors: [
       {
         id: "tomo-bbn-connector",
-        widget: () => <ConnectButton chainName="cosmos" />,
+        widget: () => <TomoWidget chainName="cosmos" />,
       },
     ],
     config: getNetworkConfigBBN(),
@@ -43,15 +44,18 @@ const config: ChainConfigArr = [
 export const WalletConnectionProvider = ({ children }: PropsWithChildren) => {
   const { showError, captureError } = useError();
 
-  const handleError = (e: Error) => {
-    showError({
-      error: {
-        message: e.message,
-        errorState: ErrorState.WALLET,
-      },
-    });
-    captureError(e);
-  };
+  const handleError = useCallback(
+    (e: Error) => {
+      showError({
+        error: {
+          message: e.message,
+          errorState: ErrorState.WALLET,
+        },
+      });
+      captureError(e);
+    },
+    [showError, captureError],
+  );
 
   return (
     <TomoConnectionProvider>