Skip to content

Commit b5886e3

Browse files
mpblockympblocky
authored
[Human App] fix: metamask error from walletconnect (#2794)
1 parent bc2e6a4 commit b5886e3

File tree

5 files changed

+450
-531
lines changed

5 files changed

+450
-531
lines changed

‎packages/apps/human-app/frontend/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,10 @@
2323
"@human-protocol/sdk": "*",
2424
"@mui/icons-material": "^6.1.1",
2525
"@mui/material": "^5.16.7",
26+
"@reown/appkit": "1.3.2",
27+
"@reown/appkit-adapter-wagmi": "1.3.2",
2628
"@synaps-io/verify-sdk": "^4.0.45",
27-
"@tanstack/react-query": "^5.60.5",
28-
"@walletconnect/ethereum-provider": "^2.16.1",
29-
"@walletconnect/modal": "^2.6.2",
30-
"@web3modal/ethers": "^5.1.5",
31-
"@web3modal/scaffold-utils": "^4.1.11",
29+
"@tanstack/react-query": "^5.61.0",
3230
"date-fns": "^4.1.0",
3331
"ethers": "^6.12.0",
3432
"i18next": "^23.8.2",
@@ -44,7 +42,9 @@
4442
"react-imask": "^7.4.0",
4543
"react-number-format": "^5.3.4",
4644
"react-router-dom": "^6.22.0",
45+
"viem": "^2.21.44",
4746
"vite-plugin-svgr": "^4.2.0",
47+
"wagmi": "2.12.29",
4848
"zod": "^3.22.4",
4949
"zustand": "^4.5.0"
5050
},

‎packages/apps/human-app/frontend/src/contexts/wallet-connect.tsx‎

Lines changed: 67 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
import {
2-
createWeb3Modal,
3-
defaultConfig,
4-
useWeb3Modal,
5-
useWeb3ModalAccount,
6-
} from '@web3modal/ethers/react';
71
import type { JsonRpcSigner, BrowserProvider, Eip1193Provider } from 'ethers';
82
import React, { createContext, useEffect, useState } from 'react';
9-
import type { UseMutationResult } from '@tanstack/react-query';
10-
import { useWeb3Provider } from '@/hooks/use-web3-provider';
3+
import { type UseMutationResult } from '@tanstack/react-query';
4+
import {
5+
useAppKit,
6+
useAppKitAccount,
7+
useAppKitNetwork,
8+
createAppKit,
9+
type AppKitOptions,
10+
} from '@reown/appkit/react';
11+
import { WagmiProvider } from 'wagmi';
12+
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
13+
import { polygonAmoy, polygon } from '@reown/appkit/networks';
1114
import { env } from '@/shared/env';
1215
import type { ResponseError } from '@/shared/types/global.type';
13-
import { chains } from '@/smart-contracts/chains';
16+
import { useWeb3Provider } from '@/hooks/use-web3-provider';
1417
import { JsonRpcError } from '@/smart-contracts/json-rpc-error';
1518

1619
const projectId = env.VITE_WALLET_CONNECT_PROJECT_ID;
@@ -22,15 +25,13 @@ const metadata = {
2225
icons: env.VITE_DAPP_ICONS,
2326
};
2427

25-
const ethersConfig = defaultConfig({
26-
metadata,
27-
});
28-
createWeb3Modal({
29-
ethersConfig,
30-
chains,
28+
const networks: AppKitOptions['networks'] = [polygon, polygonAmoy];
29+
30+
const wagmiAdapter = new WagmiAdapter({
31+
networks,
3132
projectId,
32-
enableAnalytics: true,
3333
});
34+
3435
export interface CommonWalletConnectContext {
3536
openModal: () => Promise<void>;
3637
web3ProviderMutation: UseMutationResult<
@@ -47,7 +48,7 @@ export interface CommonWalletConnectContext {
4748
interface ConnectedAccount {
4849
isConnected: true;
4950
chainId: number;
50-
address: `0x${string}`;
51+
address: string;
5152
signMessage: (message: string) => Promise<string | undefined>;
5253
}
5354

@@ -70,15 +71,23 @@ export const WalletConnectContext = createContext<
7071
| null
7172
>(null);
7273

74+
createAppKit({
75+
adapters: [wagmiAdapter],
76+
networks,
77+
projectId,
78+
metadata,
79+
});
80+
7381
export function WalletConnectProvider({
7482
children,
7583
}: {
7684
children: React.ReactNode;
7785
}) {
7886
const [initializing, setInitializing] = useState(true);
7987
const web3ProviderMutation = useWeb3Provider();
80-
const { open } = useWeb3Modal();
81-
const { address, chainId, isConnected } = useWeb3ModalAccount();
88+
const { open } = useAppKit();
89+
const { address, isConnected } = useAppKitAccount();
90+
const { chainId } = useAppKitNetwork();
8291

8392
const openModal = async () => {
8493
await open();
@@ -94,32 +103,17 @@ export function WalletConnectProvider({
94103
}, [web3ProviderMutation]);
95104

96105
return (
97-
<WalletConnectContext.Provider
98-
value={
99-
isConnected && address && chainId && web3ProviderMutation.data
100-
? {
101-
isConnected: true,
102-
address,
103-
chainId,
104-
web3ProviderMutation,
105-
openModal,
106-
signMessage: async (message: string) => {
107-
try {
108-
const signature =
109-
await web3ProviderMutation.data.signer.signMessage(message);
110-
return signature;
111-
} catch (error) {
112-
throw new JsonRpcError(error);
113-
}
114-
},
115-
initializing,
116-
}
117-
: {
118-
isConnected: false,
119-
web3ProviderMutation,
120-
openModal,
121-
signMessage: async (message: string) => {
122-
if (web3ProviderMutation.data) {
106+
<WagmiProvider config={wagmiAdapter.wagmiConfig}>
107+
<WalletConnectContext.Provider
108+
value={
109+
isConnected && address && chainId && web3ProviderMutation.data
110+
? {
111+
isConnected: true,
112+
address,
113+
chainId: Number(chainId),
114+
web3ProviderMutation,
115+
openModal,
116+
signMessage: async (message: string) => {
123117
try {
124118
const signature =
125119
await web3ProviderMutation.data.signer.signMessage(
@@ -129,14 +123,33 @@ export function WalletConnectProvider({
129123
} catch (error) {
130124
throw new JsonRpcError(error);
131125
}
132-
}
133-
return Promise.resolve(undefined);
134-
},
135-
initializing,
136-
}
137-
}
138-
>
139-
{children}
140-
</WalletConnectContext.Provider>
126+
},
127+
initializing,
128+
}
129+
: {
130+
isConnected: false,
131+
web3ProviderMutation,
132+
openModal,
133+
signMessage: async (message: string) => {
134+
if (web3ProviderMutation.data) {
135+
try {
136+
const signature =
137+
await web3ProviderMutation.data.signer.signMessage(
138+
message
139+
);
140+
return signature;
141+
} catch (error) {
142+
throw new JsonRpcError(error);
143+
}
144+
}
145+
return Promise.resolve(undefined);
146+
},
147+
initializing,
148+
}
149+
}
150+
>
151+
{children}
152+
</WalletConnectContext.Provider>
153+
</WagmiProvider>
141154
);
142155
}

‎packages/apps/human-app/frontend/src/hooks/use-web3-provider.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import { useMutation } from '@tanstack/react-query';
2-
import {
3-
useWeb3ModalAccount,
4-
useWeb3ModalProvider,
5-
} from '@web3modal/ethers/react';
62
import type { Eip1193Provider } from 'ethers';
73
import { BrowserProvider } from 'ethers';
84
import { useEffect } from 'react';
5+
import { useAppKitNetwork, useAppKitProvider } from '@reown/appkit/react';
96
import { checkNetwork } from '@/smart-contracts/check-network';
107

118
const getSignerAndProvider = async (walletProvider: Eip1193Provider) => {
@@ -21,16 +18,16 @@ const getSignerAndProvider = async (walletProvider: Eip1193Provider) => {
2118
};
2219

2320
export function useWeb3Provider() {
24-
const { chainId } = useWeb3ModalAccount();
25-
const { walletProvider } = useWeb3ModalProvider();
21+
const { chainId } = useAppKitNetwork();
22+
const { walletProvider } = useAppKitProvider<Eip1193Provider>('eip155');
23+
2624
const useSignerAndProviderMutation = useMutation({
2725
mutationFn: getSignerAndProvider,
2826
});
2927

3028
useEffect(() => {
31-
if (walletProvider) {
32-
useSignerAndProviderMutation.mutate(walletProvider);
33-
}
29+
useSignerAndProviderMutation.mutate(walletProvider);
30+
3431
// eslint-disable-next-line react-hooks/exhaustive-deps -- not nesseccary
3532
}, [walletProvider, chainId]);
3633

‎packages/apps/human-app/frontend/src/smart-contracts/chains.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,21 @@
44
// Thanks to that we can get addresses for selected chain with getContractAddress
55
// function
66

7-
import type { Chain } from '@web3modal/scaffold-utils/ethers';
87
import {
98
MainnetContracts,
109
TestnetContracts,
1110
type ContractsAddresses,
1211
} from '@/smart-contracts/contracts';
1312
import { env } from '@/shared/env';
1413

14+
export interface Chain {
15+
rpcUrl: string;
16+
explorerUrl: string;
17+
currency: string;
18+
name: string;
19+
chainId: number;
20+
}
21+
1522
export type ChainWithAddresses = Chain & {
1623
addresses: ContractsAddresses;
1724
};

0 commit comments

Comments
 (0)