From e830b02a3491d6e751f939bec424cb96a6e88e37 Mon Sep 17 00:00:00 2001 From: Hamid Roohi Date: Sun, 6 Oct 2024 14:15:59 +0330 Subject: [PATCH] fix(wallet modal): update wallet connection modal --- src/components/header.tsx | 1 - src/components/oldWalletSelectionModal.tsx | 121 +++++++++++ src/components/walletSelectionModal.tsx | 227 ++++++++++++--------- 3 files changed, 252 insertions(+), 97 deletions(-) create mode 100644 src/components/oldWalletSelectionModal.tsx diff --git a/src/components/header.tsx b/src/components/header.tsx index 8b9b73e..8c9260e 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -127,7 +127,6 @@ export default function Header() { - ); } diff --git a/src/components/oldWalletSelectionModal.tsx b/src/components/oldWalletSelectionModal.tsx new file mode 100644 index 0000000..d544d68 --- /dev/null +++ b/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 && ( +
+
+
+

+ {switchWallet + ? "The selected source chain is not supported by current wallet, please change you wallet" + : "Select a wallet Type"} +

+
+ + +
+ + +
+
+
+ )} + + ); +} diff --git a/src/components/walletSelectionModal.tsx b/src/components/walletSelectionModal.tsx index d544d68..62a923b 100644 --- a/src/components/walletSelectionModal.tsx +++ b/src/components/walletSelectionModal.tsx @@ -1,117 +1,152 @@ -"use client"; - +import { useCallback, useEffect, useRef, useState } from "react"; import { useTalisman, useTransfer } from "@/hooks"; -import { WalletID } from "@/types"; -import { isValidAddress } from "@/utils"; -import { useConnectModal } from "@rainbow-me/rainbowkit"; +import { getChainLogoSrc, parseCross } from "@/utils"; +import { ChainConfig, WalletID } from "@/types"; import Image from "next/image"; -import { useEffect, useMemo } from "react"; -import { useAccount } from "wagmi"; +import data from "../data/data.json"; +import { useConnect } from "wagmi"; +import { getWallets } from "@talisman-connect/wallets"; + +export default function WalletSelectionModal({ visible, onClose }: { visible: boolean; onClose: () => void }) { + const [tab, setTab] = useState("evm"); + const { sourceChain, setSourceChain, setActiveSenderWallet } = useTransfer(); + const { defaultSourceChainOptions } = parseCross(); + const [sourceChainOptions, _setSourceChainOptions] = useState([...defaultSourceChainOptions]); + const { connectTalisman } = useTalisman(); -export default function WalletSelectionModal({ - visible, - onClose, - switchWallet, -}: { - visible: boolean; - onClose: () => void; - switchWallet?: boolean; -}) { - const { talismanAccounts, connectTalisman } = useTalisman(); - const { openConnectModal } = useConnectModal(); + const { connectors, connect } = useConnect(); + const sourceChainRef = useRef(sourceChain); - const { - sender, - sourceChain, - targetChain, - activeSenderWallet, - activeRecipientWallet, - setSender, - setActiveSenderAccount, - setActiveRecipientAccount, - setActiveSenderWallet, - setActiveRecipientWallet, - } = useTransfer(); + console.log(connectors); - const { address } = useAccount(); + const _setSourceChain = useCallback( + (chain: ChainConfig | undefined) => { + setSourceChain((prev) => chain ?? prev); + sourceChainRef.current = chain ?? sourceChainRef.current; + }, + [setSourceChain], + ); - const [supportedWalletEvm, supportedWalletTalisman] = useMemo(() => { - return [ - sourceChain.wallets.some((id) => id === WalletID.EVM), - sourceChain.wallets.some((id) => id === WalletID.TALISMAN), - ]; - }, [sourceChain.wallets]); + 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); - const senderOptions = - activeSenderWallet === WalletID.EVM && address - ? [{ address }] - : activeSenderWallet === WalletID.TALISMAN - ? talismanAccounts - : []; + if (walletName === "Talisman") { + console.log("Talisman"); + setActiveSenderWallet(WalletID.TALISMAN); + connectTalisman(); + } else if (walletName === "Polkadot") { + setActiveSenderWallet(WalletID.TALISMAN); + wallets[1].enable("Paralink"); + } + } + onClose(); + }; - // useEffect(() => { - // if (activeSenderWallet) { - // const address = senderOptions[0].address; - // const valid = address ? isValidAddress(address, sourceChain.addressType) : true; - // setSender({ valid, address }); - // } - // }, [activeSenderWallet]); return ( <> {visible && ( -
-
-
-

- {switchWallet - ? "The selected source chain is not supported by current wallet, please change you wallet" - : "Select a wallet Type"} -

-
- - + Substrate wallet +
- - +
+ {data.wallets[tab === "evm" ? "evm" : "substrate"].map((item: any) => ( +
{ + tab === "evm" + ? item.connectorId + ? handleConnectWallet(tab, item.connectorId) + : console.log("no option") + : handleConnectWallet(tab, item.name); + }} + key={item.name} + 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]" + > + {item.name} +

{item.name}

+
+ ))} +
+
+
+

Accounts

+