Skip to content

Commit bb3a562

Browse files
madhurMongiamadhurMongia
authored
Merge pull request #210 from Proof-Of-Humanity/refactor/wallet-connect-to-reown
chore(web) : Migrate from Web3Modal to AppKit ,Update dependencies an…
2 parents 92cc519 + 1c3c24a commit bb3a562

File tree

23 files changed

+13491
-18363
lines changed

23 files changed

+13491
-18363
lines changed

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,9 @@
3939
"@cyntler/react-doc-viewer": "^1.16.3",
4040
"@ffmpeg/ffmpeg": "^0.10.1",
4141
"@legendapp/state": "^1.11.1",
42-
"@web3modal/ethereum": "^2.7.1",
43-
"@web3modal/react": "^2.7.1",
42+
"@reown/appkit": "^1.6.9",
43+
"@reown/appkit-adapter-wagmi": "^1.6.9",
44+
"@tanstack/react-query": "^5.67.1",
4445
"autoprefixer": "^10.4.15",
4546
"axios": "^1.1.3",
4647
"base-2048": "^0.0.1",
@@ -71,8 +72,8 @@
7172
"swr": "^1.3.0",
7273
"timeago.js": "^4.0.2",
7374
"ua-parser-js": "^1.0.2",
74-
"viem": "^1.6.0",
75-
"wagmi": "^1.3.10"
75+
"viem": "^2.21.50",
76+
"wagmi": "^2.14.10"
7677
},
7778
"scripts": {
7879
"dev": "next dev",

‎src/app/Header/WalletSection.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useWeb3Modal } from "@web3modal/react";
1+
import { useAppKit } from "@reown/appkit/react";
22
import ChainLogo from "components/ChainLogo";
33
import { shortenAddress } from "utils/address";
44

@@ -15,30 +15,30 @@ const WalletSection = ({
1515
address,
1616
chain,
1717
}: WalletSectionProps) => {
18-
const modal = useWeb3Modal();
18+
const modal = useAppKit();
1919

2020
return (
2121
<div className="col-span-2 flex flex-wrap items-center gap-y-[12px] justify-self-center md:col-span-1 md:flex md:w-fit md:gap-y-0 md:justify-self-end">
2222
{web3Loaded && isConnected && address ? (
2323
<div className="flex">
2424
<button
2525
className="centered h-8 rounded-l border-2 border-r-0 border-white/20 bg-white/10 px-2 text-white hover:bg-white/40"
26-
onClick={() => modal.open({ route: "SelectNetwork" })}
26+
onClick={() => modal.open({ view: "Networks" })}
2727
>
2828
<ChainLogo chainId={chain.id} className="mr-1 h-4 w-4 fill-white" />
2929
{chain.name.split(" ").at(-1)}
3030
</button>
3131
<button
3232
className="centered mr-2 h-8 rounded-r border-2 border-white/50 bg-white/10 px-2 text-white hover:bg-white/40"
33-
onClick={() => modal.open({ route: "Account" })}
33+
onClick={() => modal.open({ view: "Account" })}
3434
>
3535
{shortenAddress(address)}
3636
</button>
3737
</div>
3838
) : (
3939
<button
4040
className="centered mr-2 h-8 rounded border-2 border-white bg-white/10 px-2 text-white"
41-
onClick={() => modal.open({ route: "ConnectWallet" })}
41+
onClick={() => modal.open({ view: "AllWallets" })}
4242
>
4343
Connect
4444
</button>

‎src/app/Header/index.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,29 @@ import Link from "next/link";
77
import { usePathname } from "next/navigation";
88
import { useEffect, useRef, useState } from "react";
99
import useSWR from "swr";
10-
import { useAccount, usePublicClient } from "wagmi";
11-
import withClientConnected from "components/HighOrder/withClientConnected";
10+
import { useAccount, useChainId, useConfig } from "wagmi";
1211
import useWeb3Loaded from "hooks/useWeb3Loaded";
1312
import DesktopNavigation from "./DesktopNavigation";
1413
import MobileMenu from "./MobileMenu";
1514
import Options from "./Options";
1615
import WalletSection from "./WalletSection";
1716

18-
interface IHeader extends JSX.IntrinsicAttributes {
17+
interface IHeader {
1918
policy: string;
2019
}
2120

22-
export default withClientConnected(function Header({ policy }: IHeader) {
21+
export default function Header({ policy }: IHeader) {
2322
const [menuOpen, setMenuOpen] = useState<boolean>(false);
2423
const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
2524
const menuRef = useRef<HTMLDivElement>(null);
2625
const pathname = usePathname();
2726
const { isConnected, address } = useAccount();
28-
const { chain } = usePublicClient();
27+
const chainId = useChainId()
28+
29+
const config = useConfig()
30+
const chains = config.chains
31+
32+
const chain = chains.find(chain => chain.id === chainId)
2933
const web3Loaded = useWeb3Loaded();
3034
const { data: me } = useSWR(address, getMyData);
3135

@@ -100,7 +104,7 @@ export default withClientConnected(function Header({ policy }: IHeader) {
100104

101105
<div className="lg:absolute lg:left-1/2 lg:-translate-x-1/2 lg:transform">
102106
<DesktopNavigation
103-
{...{ address, me, policy, pathname, chain, web3Loaded }}
107+
{...{ address, me, policy, pathname, chain: chain!, web3Loaded }}
104108
/>
105109
</div>
106110

@@ -113,12 +117,12 @@ export default withClientConnected(function Header({ policy }: IHeader) {
113117

114118
<div className="flex flex-row items-center">
115119
<div className="hidden md:block">
116-
<WalletSection {...{ chain, address, isConnected, web3Loaded }} />
120+
<WalletSection {...{ chain: chain!, address, isConnected, web3Loaded }} />
117121
</div>
118122
<div className="hidden md:block">
119123
<Options />
120124
</div>
121125
</div>
122126
</header>
123127
);
124-
});
128+
}

‎src/app/[pohid]/CrossChain.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client";
22

33
import ChainLogo from "components/ChainLogo";
4-
import withClientConnected from "components/HighOrder/withClientConnected";
54
import Modal from "components/Modal";
65
import TimeAgo from "components/TimeAgo";
76
import {
@@ -25,10 +24,10 @@ import React, { useEffect, useMemo, useState } from "react";
2524
import { toast } from "react-toastify";
2625
import { timeAgo } from "utils/time";
2726
import { Address, Hash, createPublicClient, http } from "viem";
28-
import { gnosisChiado } from "viem/chains";
29-
import { mainnet, sepolia, useAccount, useChainId } from "wagmi";
27+
import { mainnet, sepolia, gnosisChiado } from "viem/chains";
28+
import { useAccount, useChainId } from "wagmi";
3029

31-
interface CrossChainProps extends JSX.IntrinsicAttributes {
30+
interface CrossChainProps {
3231
contractData: Record<SupportedChainId, ContractData>;
3332
humanity: Record<SupportedChainId, HumanityQuery>;
3433
claimer: Address;
@@ -39,7 +38,7 @@ interface CrossChainProps extends JSX.IntrinsicAttributes {
3938
winningStatus?: string;
4039
}
4140

42-
export default withClientConnected<CrossChainProps>(function CrossChain({
41+
export default function CrossChain({
4342
pohId,
4443
contractData,
4544
humanity,
@@ -48,7 +47,7 @@ export default withClientConnected<CrossChainProps>(function CrossChain({
4847
lastTransfer,
4948
lastTransferChain,
5049
winningStatus,
51-
}) {
50+
}: CrossChainProps) {
5251
const { address } = useAccount();
5352
const loading = useLoading();
5453
const web3Loaded = useWeb3Loaded();
@@ -509,4 +508,4 @@ export default withClientConnected<CrossChainProps>(function CrossChain({
509508
: null}
510509
</div>
511510
);
512-
});
511+
}

‎src/app/[pohid]/Renew.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
"use client";
22

3-
import withClientConnected from "components/HighOrder/withClientConnected";
43
import useWeb3Loaded from "hooks/useWeb3Loaded";
54
import Link from "next/link";
65
import { prettifyId } from "utils/identifier";
76
import { Address, Hash } from "viem";
87
import { useAccount } from "wagmi";
98

10-
interface RenewProps extends JSX.IntrinsicAttributes {
9+
interface RenewProps {
1110
pohId: Hash;
1211
claimer: Address;
1312
}
1413

15-
export default withClientConnected<RenewProps>(function Renew({
14+
export default function Renew({
1615
pohId,
1716
claimer,
18-
}) {
17+
}: RenewProps) {
1918
const web3Loaded = useWeb3Loaded();
2019
const { address } = useAccount();
2120

@@ -26,4 +25,4 @@ export default withClientConnected<RenewProps>(function Renew({
2625
Renew
2726
</Link>
2827
);
29-
});
28+
}

‎src/app/[pohid]/Revoke.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { enableReactUse } from "@legendapp/state/config/enableReactUse";
44
import ALink from "components/ExternalLink";
55
import Field from "components/Field";
6-
import withClientConnected from "components/HighOrder/withClientConnected";
76
import Label from "components/Label";
87
import Modal from "components/Modal";
98
import Uploader from "components/Uploader";
@@ -18,23 +17,23 @@ import { toast } from "react-toastify";
1817
import { ipfs, uploadToIPFS } from "utils/ipfs";
1918
import { formatEth } from "utils/misc";
2019
import { Hash } from "viem";
21-
import { useChainId, useSwitchNetwork } from "wagmi";
20+
import { useChainId, useSwitchChain } from "wagmi";
2221

2322
enableReactUse();
2423

25-
interface RevokeProps extends JSX.IntrinsicAttributes {
24+
interface RevokeProps {
2625
cost: bigint;
2726
pohId: Hash;
2827
homeChain: SupportedChain;
2928
arbitrationInfo: ContractData["arbitrationInfo"];
3029
}
3130

32-
export default withClientConnected<RevokeProps>(function Revoke({
31+
export default function Revoke({
3332
pohId,
3433
cost,
3534
homeChain,
3635
arbitrationInfo,
37-
}) {
36+
}: RevokeProps) {
3837
const [title, setTitle] = useState("");
3938
const [description, setDescription] = useState("");
4039
const [file, setFile] = useState<File | null>(null);
@@ -43,7 +42,7 @@ export default withClientConnected<RevokeProps>(function Revoke({
4342
const [pending] = loading.use();
4443
const connectedChainId = useChainId() as SupportedChainId;
4544
const web3Loaded = useWeb3Loaded();
46-
const { switchNetwork } = useSwitchNetwork();
45+
const { switchChain } = useSwitchChain();
4746

4847
const [prepare] = usePoHWrite(
4948
"revokeHumanity",
@@ -83,7 +82,7 @@ export default withClientConnected<RevokeProps>(function Revoke({
8382
if (web3Loaded && homeChain.id !== connectedChainId)
8483
return (
8584
<button
86-
onClick={() => switchNetwork?.(homeChain.id)}
85+
onClick={() => switchChain?.({chainId : homeChain.id})}
8786
className="btn-sec mb-4"
8887
>
8988
Connect to {homeChain.name} to revoke
@@ -150,4 +149,4 @@ export default withClientConnected<RevokeProps>(function Revoke({
150149
</div>
151150
</Modal>
152151
);
153-
});
152+
}

‎src/app/[pohid]/[chain]/[request]/ActionBar.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { enableReactUse } from "@legendapp/state/config/enableReactUse";
44
import { useEffectOnce } from "@legendapp/state/react";
55
import ExternalLink from "components/ExternalLink";
6-
import withClientConnected from "components/HighOrder/withClientConnected";
76
import TimeAgo from "components/TimeAgo";
87
import { colorForStatus } from "config/misc";
98
import usePoHWrite from "contracts/hooks/usePoHWrite";
@@ -35,7 +34,7 @@ enableReactUse();
3534
// args: [claimer, vouchers, []],
3635
// });
3736

38-
interface ActionBarProps extends JSX.IntrinsicAttributes {
37+
interface ActionBarProps {
3938
pohId: Hash;
4039
arbitrationCost: bigint;
4140
requester: Address;
@@ -63,7 +62,7 @@ interface ActionBarProps extends JSX.IntrinsicAttributes {
6362
rejected: boolean;
6463
}
6564

66-
export default withClientConnected<ActionBarProps>(function ActionBar({
65+
export default function ActionBar({
6766
pohId,
6867
requester,
6968
index,
@@ -80,7 +79,7 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
8079
expired,
8180
arbitrationHistory,
8281
rejected,
83-
}) {
82+
}: ActionBarProps) {
8483
const chain = useChainParam()!;
8584
const { address } = useAccount();
8685
const loading = useLoading();
@@ -535,4 +534,4 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
535534
</div>
536535
</div>
537536
);
538-
});
537+
}

‎src/app/[pohid]/[chain]/[request]/Evidence.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Accordion from "components/Accordion";
66
import Attachment from "components/Attachment";
77
import ExternalLink from "components/ExternalLink";
88
import Field from "components/Field";
9-
import withClientConnected from "components/HighOrder/withClientConnected";
109
import Identicon from "components/Identicon";
1110
import Label from "components/Label";
1211
import Modal from "components/Modal";
@@ -28,7 +27,7 @@ import { shortenAddress } from "utils/address";
2827
import { ipfs, ipfsFetch, uploadToIPFS } from "utils/ipfs";
2928
import { romanize } from "utils/misc";
3029
import { Address, Hash } from "viem";
31-
import { usePublicClient } from "wagmi";
30+
import { useChainId } from "wagmi";
3231

3332
enableReactUse();
3433

@@ -79,21 +78,21 @@ function Item({ index, uri, creationTime, sender }: ItemInterface) {
7978
);
8079
}
8180

82-
interface EvidenceProps extends JSX.IntrinsicAttributes {
81+
interface EvidenceProps {
8382
pohId: Hash;
8483
requestIndex: number;
8584
arbitrationInfo: NonNullable<RequestQuery["request"]>["arbitratorHistory"];
8685
list: NonNullable<RequestQuery["request"]>["evidenceGroup"]["evidence"];
8786
}
8887

89-
export default withClientConnected<EvidenceProps>(function Evidence({
88+
export default function Evidence({
9089
pohId,
9190
requestIndex,
9291
list,
9392
arbitrationInfo,
94-
}) {
93+
}: EvidenceProps) {
9594
const chainReq = useChainParam()!;
96-
const { chain } = usePublicClient();
95+
const chainId = useChainId();
9796
const { data: policy } = useSWR(
9897
arbitrationInfo.registrationMeta,
9998
async (metaEvidenceLink) =>
@@ -151,8 +150,8 @@ export default withClientConnected<EvidenceProps>(function Evidence({
151150
const [isEvidenceDisabled, setIsEvidenceDisabled] = useState(false);
152151

153152
useEffect(() => {
154-
setIsEvidenceDisabled(chainReq.id !== chain.id);
155-
}, [chain]);
153+
setIsEvidenceDisabled(chainReq.id !== chainId);
154+
}, [chainId]);
156155

157156
return (
158157
<Accordion title="Evidence">
@@ -235,4 +234,4 @@ export default withClientConnected<EvidenceProps>(function Evidence({
235234
))}
236235
</Accordion>
237236
);
238-
});
237+
}

‎src/app/[pohid]/claim/Connect.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Web3Button, Web3NetworkSwitch } from "@web3modal/react";
21
import { SupportedChain, supportedChains } from "config/chains";
3-
import { Address, useAccount, useChainId } from "wagmi";
2+
import { Address } from "viem";
3+
import { useAccount, useChainId } from "wagmi";
44

55
type ConnectProps =
66
| { renewalAddress: undefined; renewalChain: undefined }
@@ -36,19 +36,19 @@ export default function Connect({
3636
Switch your chain to <strong>{renewalChain.name}</strong> to
3737
continue the renewal
3838
</span>
39-
<Web3NetworkSwitch />
39+
<appkit-network-button />
4040
</>
4141
)
4242
) : (
4343
!supportedChains.find((chain) => chain.id === chainId) && (
4444
<>
4545
<span className="txt">Switch to supported network</span>
46-
<Web3NetworkSwitch />
46+
<appkit-network-button />
4747
</>
4848
)
4949
)
5050
) : (
51-
<Web3Button />
51+
<appkit-button />
5252
)}
5353
</>
5454
);

0 commit comments

Comments
 (0)