From 3de33af424b08ba4171aaeb630e4f5ab04deec90 Mon Sep 17 00:00:00 2001
From: David Totrashvili <8580261+totraev@users.noreply.github.com>
Date: Thu, 23 Jan 2025 18:15:15 +0500
Subject: [PATCH] feat: tomo revamp (#640)

---
 src/app/components/Modals/ErrorModal.tsx      |  7 +-
 src/app/context/tomo/ConnectButton.tsx        | 38 ----------
 src/app/context/tomo/TomoWidget.tsx           | 74 +++++++++++++++++++
 .../wallet/WalletConnectionProvider.tsx       | 30 ++++----
 4 files changed, 97 insertions(+), 52 deletions(-)
 delete mode 100644 src/app/context/tomo/ConnectButton.tsx
 create mode 100644 src/app/context/tomo/TomoWidget.tsx

diff --git a/src/app/components/Modals/ErrorModal.tsx b/src/app/components/Modals/ErrorModal.tsx
index 0e05f6e7..8cbed141 100644
--- 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
deleted file mode 100644
index 8660a726..00000000
--- a/src/app/context/tomo/ConnectButton.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Text } from "@babylonlabs-io/bbn-core-ui";
-import {
-  useWidgetState,
-  WalletButton,
-} from "@babylonlabs-io/bbn-wallet-connect";
-import { useTomoModalControl } from "@tomo-inc/wallet-connect-sdk";
-import { useCallback } from "react";
-
-import logo from "./tomo.png";
-
-const CHAINS = {
-  bitcoin: "BTC",
-  cosmos: "BBN",
-};
-
-export const ConnectButton = ({
-  chainName,
-}: {
-  chainName: "bitcoin" | "cosmos";
-}) => {
-  const tomoModal = useTomoModalControl();
-  const { displayWallets } = useWidgetState();
-
-  const open = useCallback(async () => {
-    const result = await tomoModal.open(chainName);
-
-    if (!result) {
-      displayWallets?.(CHAINS[chainName]);
-    }
-  }, [tomoModal, chainName, displayWallets]);
-
-  return (
-    <div className="sticky inset-x-0 bottom-0 bg-[#ffffff] pt-10">
-      <Text className="mb-4">More wallets with Tomo Connect</Text>
-      <WalletButton logo={logo.src} name="Tomo Connect" onClick={open} />
-    </div>
-  );
-};
diff --git a/src/app/context/tomo/TomoWidget.tsx b/src/app/context/tomo/TomoWidget.tsx
new file mode 100644
index 00000000..39f65097
--- /dev/null
+++ 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
index e5ce8f78..cf1484c3 100644
--- 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>