Hidotmatrix/fix/small issues

package.json

@@ -16,14 +16,18 @@
     "@polkadot/react-identicon": "^3.6.3",
     "@rainbow-me/rainbowkit": "^1.1.3",
     "@react-spring/web": "^9.5.0",
+    "@talisman-connect/wallets": "^1.1.3",
     "@talismn/connect-wallets": "^1.2.3",
+    "coinbase-wallet-sdk": "^0.0.1-security",
+    "ethers": "^6.13.2",
     "next": "13.5.4",
     "react": "^18",
     "react-dom": "^18",
     "react-jazzicon": "^1.0.4",
     "react-transition-group": "^4.4.5",
     "viem": "^1.16.6",
-    "wagmi": "^1.4.5"
+    "wagmi": "^1.4.5",
+    "walletconnect": "^1.7.8"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/global.d.ts

@@ -0,0 +1,9 @@
+// global.d.ts
+interface Window {
+  ethereum?: {
+    isMetaMask?: boolean;
+    request: (args: { method: string; params?: Array<any> }) => Promise<any>;
+    on: (event: string, callback: (...args: any[]) => void) => void;
+    removeListener: (event: string, callback: (...args: any[]) => void) => void;
+  };
+}

src/components/appBox.tsx

@@ -25,6 +25,7 @@ export default function AppBox() {
   const [allowedChain, setAllowedChain] = useState<any>([]);
   // const [sourceAssetOptions, setSourceAssetOptions] = useState(defaultSourceAssetOptions);
   const [successModal, setSuccessModal] = useState<boolean>(false);
+  const [receipt, setReceipt] = useState<boolean | null>(false);
 
   const {
     sender,
@@ -60,6 +61,7 @@ export default function AppBox() {
   } = useTransfer();
   const handleCloseSuccessModal = useCallback(() => {
     setSuccessModal(false);
+    setReceipt(null);
     setTransferAmount({ valid: true, input: "", amount: BN_ZERO });
     updateSourceAssetBalance();
     updateTargetAssetBalance();
@@ -235,7 +237,9 @@ export default function AppBox() {
       switchNetwork?.(sourceChain.id);
     } else if (bridgeInstance && recipient) {
       const callback = {
-        successCb: () => {
+        successCb: (receipt: any) => {
+          console.log("receipt", receipt);
+          setReceipt(receipt);
           setBusy(false);
           setSuccessModal(true);
         },
@@ -495,7 +499,7 @@ export default function AppBox() {
         </animated.div>
       </animated.section>
 
-      <SuccessModal visible={successModal} onClose={handleCloseSuccessModal} />
+      <SuccessModal visible={successModal} onClose={handleCloseSuccessModal} receipt={receipt} />
       <PendingModal visible={busy} />
       <WalletSelectionModal
         visible={connectModal}

src/components/header.tsx

@@ -12,6 +12,7 @@ import { useTalisman, useTransfer } from "@/hooks";
 import { isValidAddress, parseCross } from "@/utils";
 import WalletSelectionModal from "./walletSelectionModal";
 import { WalletID } from "@/types";
+import { getWallets } from "@talisman-connect/wallets";
 
 export default function Header() {
   const [connectModal, setConnectModal] = useState(false);
@@ -21,8 +22,6 @@ export default function Header() {
   const { activeSenderWallet, setSender, sourceChain, sender } = useTransfer();
   const [switchWallet, setSwitchWallet] = useState<boolean>(false);
 
-  console.log(talismanAccounts);
-
   const handleClose = useCallback(() => {
     setConnectModal(false);
     setSwitchWallet(false);
@@ -128,7 +127,6 @@ export default function Header() {
           </div>
         </div>
       </div>
-      <WalletSelectionModal visible={connectModal || switchWallet} onClose={handleClose} switchWallet={switchWallet} />
     </section>
   );
 }

src/components/oldWalletSelectionModal.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useTalisman, useTransfer } from "@/hooks";
+import { WalletID } from "@/types";
+import { isValidAddress } from "@/utils";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
+import Image from "next/image";
+import { useEffect, useMemo } from "react";
+import { useAccount } from "wagmi";
+
+export default function WalletSelectionModal({
+  visible,
+  onClose,
+  switchWallet,
+}: {
+  visible: boolean;
+  onClose: () => void;
+  switchWallet?: boolean;
+}) {
+  const { talismanAccounts, connectTalisman } = useTalisman();
+  const { openConnectModal } = useConnectModal();
+
+  const {
+    sender,
+    sourceChain,
+    targetChain,
+    activeSenderWallet,
+    activeRecipientWallet,
+    setSender,
+    setActiveSenderAccount,
+    setActiveRecipientAccount,
+    setActiveSenderWallet,
+    setActiveRecipientWallet,
+  } = useTransfer();
+
+  const { address } = useAccount();
+
+  const [supportedWalletEvm, supportedWalletTalisman] = useMemo(() => {
+    return [
+      sourceChain.wallets.some((id) => id === WalletID.EVM),
+      sourceChain.wallets.some((id) => id === WalletID.TALISMAN),
+    ];
+  }, [sourceChain.wallets]);
+
+  const senderOptions =
+    activeSenderWallet === WalletID.EVM && address
+      ? [{ address }]
+      : activeSenderWallet === WalletID.TALISMAN
+      ? talismanAccounts
+      : [];
+
+  // useEffect(() => {
+  //   if (activeSenderWallet) {
+  //     const address = senderOptions[0].address;
+  //     const valid = address ? isValidAddress(address, sourceChain.addressType) : true;
+  //     setSender({ valid, address });
+  //   }
+  // }, [activeSenderWallet]);
+  return (
+    <>
+      {visible && (
+        <div className="fixed left-0 top-0 z-50 h-[100vh] w-[100vw]">
+          <div className="flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.3)]" onClick={onClose}>
+            <div className="flex h-[300px] w-[80vw] flex-col items-center justify-between gap-middle rounded-[20px] bg-white p-[20px] lg:w-[500px]">
+              <h2 className="text-[20px] font-bold">
+                {switchWallet
+                  ? "The selected source chain is not supported by current wallet, please change you wallet"
+                  : "Select a wallet Type"}
+              </h2>
+              <div className="flex w-full flex-col gap-middle">
+                <button
+                  className="border-radius flex w-full items-center gap-middle bg-[#F2F3F5] p-middle transition-colors duration-300 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-60"
+                  disabled={!supportedWalletTalisman}
+                  onClick={() => {
+                    setActiveSenderWallet(WalletID.TALISMAN);
+                    connectTalisman();
+                    onClose();
+                  }}
+                >
+                  <Image
+                    width={20}
+                    height={20}
+                    alt="Wallet icon"
+                    src={`/images/wallet/talisman-red.svg`}
+                    className="rounded-full"
+                  />
+                  <span>Talisman</span>
+                </button>
+                <button
+                  className="border-radius flex w-full items-center gap-middle bg-[#F2F3F5] p-middle transition-colors duration-300 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-60"
+                  disabled={!supportedWalletEvm}
+                  onClick={() => {
+                    setActiveSenderWallet(WalletID.EVM);
+                    openConnectModal?.();
+                    onClose();
+                  }}
+                >
+                  <Image
+                    width={20}
+                    height={20}
+                    alt="Wallet icon"
+                    src={`/images/wallet/evm.png`}
+                    className="rounded-full"
+                  />
+                  <span>EVM wallets</span>
+                </button>
+              </div>
+
+              <button
+                onClick={onClose}
+                className="w-full  flex-shrink-0 rounded-[10px] bg-[#FF0083] p-middle text-[14px] leading-[24px] text-white"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

src/components/successModal.tsx

@@ -2,9 +2,19 @@ import { useTransfer } from "@/hooks";
 import { formatBalance } from "@/utils";
 import Image from "next/image";
 import { useTrail, animated } from "@react-spring/web";
+import { useState } from "react";
 
-export default function SuccessModal({ visible, onClose }: { visible: boolean; onClose: () => void }) {
+export default function SuccessModal({
+  visible,
+  onClose,
+  receipt,
+}: {
+  visible: boolean;
+  onClose: () => void;
+  receipt: any;
+}) {
   const { sourceAsset, transferAmount } = useTransfer();
+  console.log("receipt", receipt);
 
   const trails = useTrail(3, {
     from: { transform: "translateX(-100%)", opacity: 0 },
@@ -32,7 +42,12 @@ export default function SuccessModal({ visible, onClose }: { visible: boolean; o
                 >
                   OK
                 </button>
-                <button className="h-[34px] w-full rounded-[10px] bg-[#FF00831A] text-[14px] font-bold text-[#FF0083]">
+                <button
+                  className="h-[34px] w-full rounded-[10px] bg-[#FF00831A] text-[14px] font-bold text-[#FF0083]"
+                  onClick={() => {
+                    window.open(`https://darwinia.subscan.io/tx/${receipt.transactionHash}`, "_blank");
+                  }}
+                >
                   Detail
                 </button>
               </animated.div>

src/components/walletButton.tsx

@@ -1,20 +1,26 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import WalletSelectionModal from "./walletSelectionModal";
-import { useTransfer } from "@/hooks";
+import { useTalisman, useTransfer } from "@/hooks";
 import { getChainLogoSrc, parseCross } from "@/utils";
-import { ChainConfig } from "@/types";
+import { ChainConfig, WalletID } from "@/types";
 import Image from "next/image";
 import data from "../data/data.json";
+import { useConnect } from "wagmi";
+import { getWallets } from "@talisman-connect/wallets";
 
 export default function WalletButton({ openModal }: { openModal: () => void }) {
   const [subMenu, setSubMenu] = useState<boolean>(false);
   const [tab, setTab] = useState<string>("evm");
-  const { sourceChain, setSourceChain } = useTransfer();
+  const { sourceChain, setSourceChain, setActiveSenderWallet } = useTransfer();
   const { defaultSourceChainOptions } = parseCross();
   const [sourceChainOptions, _setSourceChainOptions] = useState<any[]>([...defaultSourceChainOptions]);
+  const { connectTalisman } = useTalisman();
 
+  const { connectors, connect } = useConnect();
   const sourceChainRef = useRef(sourceChain);
 
+  console.log(connectors);
+
   const _setSourceChain = useCallback(
     (chain: ChainConfig | undefined) => {
       setSourceChain((prev) => chain ?? prev);
@@ -34,7 +40,31 @@ export default function WalletButton({ openModal }: { openModal: () => void }) {
     });
   }, []);
 
-  console.log(subMenu);
+  const handleConnectWallet = (walletType: string, walletName: string) => {
+    if (walletType === "evm") {
+      console.log("connect to an EVM wallet");
+      console.log(`connect to ${walletName}`);
+      const targetConnector: any = connectors.filter((x) => x.id === walletName);
+      console.log(targetConnector);
+      connect({ connector: targetConnector[targetConnector.length - 1] });
+      setActiveSenderWallet(WalletID.EVM);
+    } else {
+      console.log("connect to a substrate wallet");
+      console.log(`connect to ${walletName}`);
+      const wallets = getWallets();
+      console.log("substrate wallets", wallets);
+
+      if (walletName === "Talisman") {
+        console.log("Talisman");
+        setActiveSenderWallet(WalletID.TALISMAN);
+        connectTalisman();
+      } else if (walletName === "Polkadot") {
+        setActiveSenderWallet(WalletID.TALISMAN);
+        wallets[1].enable("Paralink");
+      }
+    }
+  };
+
   return (
     <div className="relative">
       <div
@@ -110,8 +140,16 @@ export default function WalletButton({ openModal }: { openModal: () => void }) {
           <div className="flex w-full flex-wrap gap-[20px] p-[20px] pt-[40px]">
             {data.wallets[tab === "evm" ? "evm" : "substrate"].map((item: any) => (
               <div
+                onClick={() => {
+                  tab === "evm"
+                    ? item.connectorId
+                      ? handleConnectWallet(tab, item.connectorId)
+                      : console.log("no option")
+                    : handleConnectWallet(tab, item.name);
+                }}
                 key={item.name}
-                className="flex h-[40px] w-[45%] items-center justify-start gap-[10px] rounded-[10px] border-[1px] border-solid border-gray-400 p-[5px_10px]"
+                style={{ opacity: tab === "evm" ? (item.connectorId ? 1 : 0.5) : item.active ? 1 : 0.5 }}
+                className="flex h-[40px] w-[45%] cursor-pointer items-center justify-start gap-[10px] rounded-[10px] border-[1px] border-solid border-gray-400 p-[5px_10px]"
               >
                 <Image
                   src={`/images/wallet/${item.logo}`}