Skip to content

Commit e830b02

Browse files
hamidroohi92hamidroohi92
committed
fix(wallet modal): update wallet connection modal
1 parent 56eff1e commit e830b02

File tree

3 files changed

+252
-97
lines changed

3 files changed

+252
-97
lines changed

‎src/components/header.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,6 @@ export default function Header() {
127127
</div>
128128
</div>
129129
</div>
130-
<WalletSelectionModal visible={connectModal || switchWallet} onClose={handleClose} switchWallet={switchWallet} />
131130
</section>
132131
);
133132
}

‎src/components/oldWalletSelectionModal.tsx

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
"use client";
2+
3+
import { useTalisman, useTransfer } from "@/hooks";
4+
import { WalletID } from "@/types";
5+
import { isValidAddress } from "@/utils";
6+
import { useConnectModal } from "@rainbow-me/rainbowkit";
7+
import Image from "next/image";
8+
import { useEffect, useMemo } from "react";
9+
import { useAccount } from "wagmi";
10+
11+
export default function WalletSelectionModal({
12+
visible,
13+
onClose,
14+
switchWallet,
15+
}: {
16+
visible: boolean;
17+
onClose: () => void;
18+
switchWallet?: boolean;
19+
}) {
20+
const { talismanAccounts, connectTalisman } = useTalisman();
21+
const { openConnectModal } = useConnectModal();
22+
23+
const {
24+
sender,
25+
sourceChain,
26+
targetChain,
27+
activeSenderWallet,
28+
activeRecipientWallet,
29+
setSender,
30+
setActiveSenderAccount,
31+
setActiveRecipientAccount,
32+
setActiveSenderWallet,
33+
setActiveRecipientWallet,
34+
} = useTransfer();
35+
36+
const { address } = useAccount();
37+
38+
const [supportedWalletEvm, supportedWalletTalisman] = useMemo(() => {
39+
return [
40+
sourceChain.wallets.some((id) => id === WalletID.EVM),
41+
sourceChain.wallets.some((id) => id === WalletID.TALISMAN),
42+
];
43+
}, [sourceChain.wallets]);
44+
45+
const senderOptions =
46+
activeSenderWallet === WalletID.EVM && address
47+
? [{ address }]
48+
: activeSenderWallet === WalletID.TALISMAN
49+
? talismanAccounts
50+
: [];
51+
52+
// useEffect(() => {
53+
// if (activeSenderWallet) {
54+
// const address = senderOptions[0].address;
55+
// const valid = address ? isValidAddress(address, sourceChain.addressType) : true;
56+
// setSender({ valid, address });
57+
// }
58+
// }, [activeSenderWallet]);
59+
return (
60+
<>
61+
{visible && (
62+
<div className="fixed left-0 top-0 z-50 h-[100vh] w-[100vw]">
63+
<div className="flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.3)]" onClick={onClose}>
64+
<div className="flex h-[300px] w-[80vw] flex-col items-center justify-between gap-middle rounded-[20px] bg-white p-[20px] lg:w-[500px]">
65+
<h2 className="text-[20px] font-bold">
66+
{switchWallet
67+
? "The selected source chain is not supported by current wallet, please change you wallet"
68+
: "Select a wallet Type"}
69+
</h2>
70+
<div className="flex w-full flex-col gap-middle">
71+
<button
72+
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"
73+
disabled={!supportedWalletTalisman}
74+
onClick={() => {
75+
setActiveSenderWallet(WalletID.TALISMAN);
76+
connectTalisman();
77+
onClose();
78+
}}
79+
>
80+
<Image
81+
width={20}
82+
height={20}
83+
alt="Wallet icon"
84+
src={`/images/wallet/talisman-red.svg`}
85+
className="rounded-full"
86+
/>
87+
<span>Talisman</span>
88+
</button>
89+
<button
90+
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"
91+
disabled={!supportedWalletEvm}
92+
onClick={() => {
93+
setActiveSenderWallet(WalletID.EVM);
94+
openConnectModal?.();
95+
onClose();
96+
}}
97+
>
98+
<Image
99+
width={20}
100+
height={20}
101+
alt="Wallet icon"
102+
src={`/images/wallet/evm.png`}
103+
className="rounded-full"
104+
/>
105+
<span>EVM wallets</span>
106+
</button>
107+
</div>
108+
109+
<button
110+
onClick={onClose}
111+
className="w-full flex-shrink-0 rounded-[10px] bg-[#FF0083] p-middle text-[14px] leading-[24px] text-white"
112+
>
113+
Cancel
114+
</button>
115+
</div>
116+
</div>
117+
</div>
118+
)}
119+
</>
120+
);
121+
}

‎src/components/walletSelectionModal.tsx

+131-96
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,152 @@
1-
"use client";
2-
1+
import { useCallback, useEffect, useRef, useState } from "react";
32
import { useTalisman, useTransfer } from "@/hooks";
4-
import { WalletID } from "@/types";
5-
import { isValidAddress } from "@/utils";
6-
import { useConnectModal } from "@rainbow-me/rainbowkit";
3+
import { getChainLogoSrc, parseCross } from "@/utils";
4+
import { ChainConfig, WalletID } from "@/types";
75
import Image from "next/image";
8-
import { useEffect, useMemo } from "react";
9-
import { useAccount } from "wagmi";
6+
import data from "../data/data.json";
7+
import { useConnect } from "wagmi";
8+
import { getWallets } from "@talisman-connect/wallets";
9+
10+
export default function WalletSelectionModal({ visible, onClose }: { visible: boolean; onClose: () => void }) {
11+
const [tab, setTab] = useState<string>("evm");
12+
const { sourceChain, setSourceChain, setActiveSenderWallet } = useTransfer();
13+
const { defaultSourceChainOptions } = parseCross();
14+
const [sourceChainOptions, _setSourceChainOptions] = useState<any[]>([...defaultSourceChainOptions]);
15+
const { connectTalisman } = useTalisman();
1016

11-
export default function WalletSelectionModal({
12-
visible,
13-
onClose,
14-
switchWallet,
15-
}: {
16-
visible: boolean;
17-
onClose: () => void;
18-
switchWallet?: boolean;
19-
}) {
20-
const { talismanAccounts, connectTalisman } = useTalisman();
21-
const { openConnectModal } = useConnectModal();
17+
const { connectors, connect } = useConnect();
18+
const sourceChainRef = useRef(sourceChain);
2219

23-
const {
24-
sender,
25-
sourceChain,
26-
targetChain,
27-
activeSenderWallet,
28-
activeRecipientWallet,
29-
setSender,
30-
setActiveSenderAccount,
31-
setActiveRecipientAccount,
32-
setActiveSenderWallet,
33-
setActiveRecipientWallet,
34-
} = useTransfer();
20+
console.log(connectors);
3521

36-
const { address } = useAccount();
22+
const _setSourceChain = useCallback(
23+
(chain: ChainConfig | undefined) => {
24+
setSourceChain((prev) => chain ?? prev);
25+
sourceChainRef.current = chain ?? sourceChainRef.current;
26+
},
27+
[setSourceChain],
28+
);
3729

38-
const [supportedWalletEvm, supportedWalletTalisman] = useMemo(() => {
39-
return [
40-
sourceChain.wallets.some((id) => id === WalletID.EVM),
41-
sourceChain.wallets.some((id) => id === WalletID.TALISMAN),
42-
];
43-
}, [sourceChain.wallets]);
30+
const handleConnectWallet = (walletType: string, walletName: string) => {
31+
if (walletType === "evm") {
32+
console.log("connect to an EVM wallet");
33+
console.log(`connect to ${walletName}`);
34+
const targetConnector: any = connectors.filter((x) => x.id === walletName);
35+
console.log(targetConnector);
36+
connect({ connector: targetConnector[targetConnector.length - 1] });
37+
setActiveSenderWallet(WalletID.EVM);
38+
} else {
39+
console.log("connect to a substrate wallet");
40+
console.log(`connect to ${walletName}`);
41+
const wallets = getWallets();
42+
console.log("substrate wallets", wallets);
4443

45-
const senderOptions =
46-
activeSenderWallet === WalletID.EVM && address
47-
? [{ address }]
48-
: activeSenderWallet === WalletID.TALISMAN
49-
? talismanAccounts
50-
: [];
44+
if (walletName === "Talisman") {
45+
console.log("Talisman");
46+
setActiveSenderWallet(WalletID.TALISMAN);
47+
connectTalisman();
48+
} else if (walletName === "Polkadot") {
49+
setActiveSenderWallet(WalletID.TALISMAN);
50+
wallets[1].enable("Paralink");
51+
}
52+
}
53+
onClose();
54+
};
5155

52-
// useEffect(() => {
53-
// if (activeSenderWallet) {
54-
// const address = senderOptions[0].address;
55-
// const valid = address ? isValidAddress(address, sourceChain.addressType) : true;
56-
// setSender({ valid, address });
57-
// }
58-
// }, [activeSenderWallet]);
5956
return (
6057
<>
6158
{visible && (
62-
<div className="fixed left-0 top-0 z-50 h-[100vh] w-[100vw]">
63-
<div className="flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.3)]" onClick={onClose}>
64-
<div className="flex h-[300px] w-[80vw] flex-col items-center justify-between gap-middle rounded-[20px] bg-white p-[20px] lg:w-[500px]">
65-
<h2 className="text-[20px] font-bold">
66-
{switchWallet
67-
? "The selected source chain is not supported by current wallet, please change you wallet"
68-
: "Select a wallet Type"}
69-
</h2>
70-
<div className="flex w-full flex-col gap-middle">
71-
<button
72-
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"
73-
disabled={!supportedWalletTalisman}
59+
<div
60+
onClick={onClose}
61+
className="z-100 fixed left-0 top-0 flex h-[100vh] w-[100vw] items-center justify-center bg-[rgba(0,0,0,0.12)]"
62+
>
63+
<div
64+
onClick={(e) => {
65+
e.stopPropagation();
66+
}}
67+
className="z-50 flex h-fit w-[500px] flex-col gap-[40px] overflow-hidden rounded-[10px] bg-white duration-700"
68+
>
69+
<div className=" flex w-full flex-wrap gap-[20px] bg-white p-[20px]">
70+
{sourceChainOptions.map((chain) => (
71+
<div
72+
key={chain.name}
73+
className="flex h-[40px] w-[45%] items-center justify-start gap-[10px] rounded-[10px] border-[1px] border-solid border-gray-400 p-[5px_10px]"
74+
style={{ opacity: chain.id ? 1 : 0.6, cursor: chain.id ? "pointer" : "default" }}
75+
onClick={() => {
76+
if (chain.id !== undefined) {
77+
_setSourceChain(chain);
78+
}
79+
}}
80+
>
81+
<Image src={getChainLogoSrc(chain.logo)} width={24} height={24} alt={chain.name} />
82+
<p className="flex-shrink-0 whitespace-nowrap text-[14px] leading-[24px] text-[#121619]">
83+
{chain.name.includes("Polkadot") ? chain.name.replace(" AssetHub", "") : chain.name}
84+
</p>
85+
</div>
86+
))}
87+
</div>
88+
<div className="relative flex flex-col items-center">
89+
<div className="border-b-solid flex w-full items-center justify-center border-b-[1px] border-b-[#ff0083]">
90+
<div
7491
onClick={() => {
75-
setActiveSenderWallet(WalletID.TALISMAN);
76-
connectTalisman();
77-
onClose();
92+
setTab("evm");
93+
}}
94+
className="-mb-[1px] w-[150px] cursor-pointer rounded-[10px_10px_0_0] p-[10px] text-center"
95+
style={{
96+
borderTop: tab === "evm" ? "1px solid #FF0083" : "none",
97+
borderRight: tab === "evm" ? "1px solid #FF0083" : "none",
98+
borderLeft: tab === "evm" ? "1px solid #FF0083" : "none",
99+
borderBottom: "none",
100+
backgroundColor: tab === "evm" ? "white" : "transparent",
78101
}}
79102
>
80-
<Image
81-
width={20}
82-
height={20}
83-
alt="Wallet icon"
84-
src={`/images/wallet/talisman-red.svg`}
85-
className="rounded-full"
86-
/>
87-
<span>Talisman</span>
88-
</button>
89-
<button
90-
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"
91-
disabled={!supportedWalletEvm}
103+
EVM wallet
104+
</div>
105+
<div
92106
onClick={() => {
93-
setActiveSenderWallet(WalletID.EVM);
94-
openConnectModal?.();
95-
onClose();
107+
setTab("substrate");
108+
}}
109+
className="-mb-[1px] w-[150px] cursor-pointer rounded-[10px_10px_0_0] p-[10px] text-center"
110+
style={{
111+
borderBottom: "none",
112+
borderTop: tab === "substrate" ? "1px solid #FF0083" : "none",
113+
borderRight: tab === "substrate" ? "1px solid #FF0083" : "none",
114+
borderLeft: tab === "substrate" ? "1px solid #FF0083" : "none",
115+
backgroundColor: tab === "substrate" ? "#fff" : "transparent",
96116
}}
97117
>
98-
<Image
99-
width={20}
100-
height={20}
101-
alt="Wallet icon"
102-
src={`/images/wallet/evm.png`}
103-
className="rounded-full"
104-
/>
105-
<span>EVM wallets</span>
106-
</button>
118+
Substrate wallet
119+
</div>
107120
</div>
108-
109-
<button
110-
onClick={onClose}
111-
className="w-full flex-shrink-0 rounded-[10px] bg-[#FF0083] p-middle text-[14px] leading-[24px] text-white"
112-
>
113-
Cancel
114-
</button>
121+
<div className="flex w-full flex-wrap gap-[20px] p-[20px] pt-[40px]">
122+
{data.wallets[tab === "evm" ? "evm" : "substrate"].map((item: any) => (
123+
<div
124+
onClick={() => {
125+
tab === "evm"
126+
? item.connectorId
127+
? handleConnectWallet(tab, item.connectorId)
128+
: console.log("no option")
129+
: handleConnectWallet(tab, item.name);
130+
}}
131+
key={item.name}
132+
style={{ opacity: tab === "evm" ? (item.connectorId ? 1 : 0.5) : item.active ? 1 : 0.5 }}
133+
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]"
134+
>
135+
<Image
136+
src={`/images/wallet/${item.logo}`}
137+
width={18}
138+
height={18}
139+
alt={item.name}
140+
className="rounded-full"
141+
/>
142+
<p>{item.name}</p>
143+
</div>
144+
))}
145+
</div>
146+
</div>
147+
<div className="flex flex-col gap-[5px] p-[20px]">
148+
<h4>Accounts</h4>
149+
<div className="h-[45px] w-full rounded-[10px] border-[1px] border-solid border-gray-400"></div>
115150
</div>
116151
</div>
117152
</div>

0 commit comments

Comments
 (0)