Skip to content

Commit

Permalink
Merge pull request #1433 from blockscout/tom2drum/issue-1314
Browse files Browse the repository at this point in the history
update `Web3Modal` to v3
  • Loading branch information
tom2drum authored Dec 21, 2023
2 parents 75e83e1 + e79a50d commit ea9e0cd
Show file tree
Hide file tree
Showing 9 changed files with 958 additions and 203 deletions.
1 change: 1 addition & 0 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const moduleExports = {
},
);
config.resolve.fallback = { fs: false, net: false, tls: false };
config.externals.push('pino-pretty', 'lokijs', 'encoding');

return config;
},
Expand Down
4 changes: 4 additions & 0 deletions nextjs/csp/policies/walletConnect.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@ import type CspDev from 'csp-dev';

import config from 'configs/app';

import { KEY_WORDS } from '../utils';

export function walletConnect(): CspDev.DirectiveDescriptor {
if (!config.features.blockchainInteraction.isEnabled) {
return {};
}

return {
'connect-src': [
'*.web3modal.com',
'*.walletconnect.com',
'wss://relay.walletconnect.com',
'wss://www.walletlink.org',
],
'img-src': [
KEY_WORDS.BLOB,
'*.walletconnect.com',
],
};
Expand Down
7 changes: 3 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,7 @@
"@tanstack/react-query-devtools": "^5.4.3",
"@types/papaparse": "^5.3.5",
"@types/react-scroll": "^1.8.4",
"@web3modal/ethereum": "^2.6.2",
"@web3modal/react": "^2.6.2",
"@web3modal/wagmi": "3.5.0",
"bignumber.js": "^9.1.0",
"blo": "^1.1.1",
"chakra-react-select": "^4.4.3",
Expand Down Expand Up @@ -92,8 +91,8 @@
"react-scroll": "^1.8.7",
"swagger-ui-react": "^5.9.0",
"use-font-face-observer": "^1.2.1",
"viem": "^1.1.8",
"wagmi": "^1.3.3",
"viem": "1.20.1",
"wagmi": "1.4.12",
"xss": "^1.0.14"
},
"devDependencies": {
Expand Down
25 changes: 13 additions & 12 deletions playwright/TestApp.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { ChakraProvider } from '@chakra-ui/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { w3mProvider } from '@web3modal/ethereum';
import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react';
import React from 'react';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { WagmiConfig } from 'wagmi';
import { mainnet } from 'wagmi/chains';

import type { Props as PageProps } from 'nextjs/getServerSideProps';
Expand Down Expand Up @@ -33,17 +33,18 @@ const defaultAppContext = {
};

// >>> Web3 stuff
const { publicClient } = configureChains(
[ mainnet ],
[
w3mProvider({ projectId: '' }),
],
);
const chains = [ mainnet ];
const WALLET_CONNECT_PROJECT_ID = 'PROJECT_ID';

const wagmiConfig = createConfig({
autoConnect: false,
connectors: [ ],
publicClient,
const wagmiConfig = defaultWagmiConfig({
chains,
projectId: WALLET_CONNECT_PROJECT_ID,
});

createWeb3Modal({
wagmiConfig,
projectId: WALLET_CONNECT_PROJECT_ID,
chains,
});
// <<<<

Expand Down
5 changes: 3 additions & 2 deletions ui/address/contract/ContractConnectWallet.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Alert, Button, Flex } from '@chakra-ui/react';
import { useWeb3Modal } from '@web3modal/react';
import { useWeb3Modal, useWeb3ModalState } from '@web3modal/wagmi/react';
import React from 'react';
import { useAccount, useDisconnect } from 'wagmi';

Expand All @@ -8,7 +8,8 @@ import * as mixpanel from 'lib/mixpanel/index';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';

const ContractConnectWallet = () => {
const { open, isOpen } = useWeb3Modal();
const { open } = useWeb3Modal();
const { open: isOpen } = useWeb3ModalState();
const { disconnect } = useDisconnect();
const isMobile = useIsMobile();
const [ isModalOpening, setIsModalOpening ] = React.useState(false);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Alert, Box, Button, chakra, Flex, Link, Radio, RadioGroup } from '@chakra-ui/react';
import { useWeb3Modal } from '@web3modal/react';
import { useWeb3Modal } from '@web3modal/wagmi/react';
import React from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
Expand Down
91 changes: 53 additions & 38 deletions ui/shared/Web3ModalProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { useColorModeValue, useToken } from '@chakra-ui/react';
import { useColorMode } from '@chakra-ui/react';
import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
import { EthereumClient, w3mConnectors } from '@web3modal/ethereum';
import { Web3Modal } from '@web3modal/react';
import { createWeb3Modal, useWeb3ModalTheme, defaultWagmiConfig } from '@web3modal/wagmi/react';
import React from 'react';
import type { Chain } from 'wagmi';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { configureChains, WagmiConfig } from 'wagmi';

import config from 'configs/app';
import colors from 'theme/foundations/colors';
import { BODY_TYPEFACE } from 'theme/foundations/typography';
import zIndices from 'theme/foundations/zIndices';

const feature = config.features.blockchainInteraction;

Expand Down Expand Up @@ -41,58 +43,71 @@ const getConfig = () => {
},
};

const chains = [ currentChain ];

const { publicClient } = configureChains(chains, [
jsonRpcProvider({
rpc: () => ({
http: config.chain.rpcUrl || '',
const { chains } = configureChains(
[ currentChain ],
[
jsonRpcProvider({
rpc: () => ({
http: config.chain.rpcUrl || '',
}),
}),
}),
]);
const wagmiConfig = createConfig({
autoConnect: true,
connectors: w3mConnectors({ projectId: feature.walletConnect.projectId, chains }),
publicClient,
],
);

const wagmiConfig = defaultWagmiConfig({
chains,
projectId: feature.walletConnect.projectId,
});

createWeb3Modal({
wagmiConfig,
projectId: feature.walletConnect.projectId,
chains,
themeVariables: {
'--w3m-font-family': `${ BODY_TYPEFACE }, sans-serif`,
'--w3m-accent': colors.blue[600],
'--w3m-border-radius-master': '2px',
'--w3m-z-index': zIndices.modal,
},
});
const ethereumClient = new EthereumClient(wagmiConfig, chains);

return { wagmiConfig, ethereumClient };
return { wagmiConfig };
} catch (error) {
return { wagmiConfig: undefined, ethereumClient: undefined };
return { };
}
};

const { wagmiConfig, ethereumClient } = getConfig();
const { wagmiConfig } = getConfig();

interface Props {
children: React.ReactNode;
fallback?: JSX.Element | (() => JSX.Element);
}

const Web3ModalProvider = ({ children, fallback }: Props) => {
const modalZIndex = useToken<string>('zIndices', 'modal');
const web3ModalTheme = useColorModeValue('light', 'dark');
const Fallback = ({ children, fallback }: Props) => {
return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
};

const Provider = ({ children, fallback }: Props) => {
const { colorMode } = useColorMode();
const { setThemeMode } = useWeb3ModalTheme();

if (!wagmiConfig || !ethereumClient || !feature.isEnabled) {
return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
React.useEffect(() => {
setThemeMode(colorMode);
}, [ colorMode, setThemeMode ]);

// not really necessary, but we have to make typescript happy
if (!wagmiConfig || !feature.isEnabled) {
return <Fallback fallback={ fallback }>{ children }</Fallback>;
}

return (
<>
<WagmiConfig config={ wagmiConfig }>
{ children }
</WagmiConfig>
<Web3Modal
projectId={ feature.walletConnect.projectId }
ethereumClient={ ethereumClient }
themeMode={ web3ModalTheme }
themeVariables={{
'--w3m-z-index': modalZIndex,
}}
/>
</>
<WagmiConfig config={ wagmiConfig }>
{ children }
</WagmiConfig>
);
};

const Web3ModalProvider = wagmiConfig && feature.isEnabled ? Provider : Fallback;

export default Web3ModalProvider;
5 changes: 3 additions & 2 deletions ui/snippets/walletMenu/useWallet.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { useWeb3Modal } from '@web3modal/react';
import { useWeb3Modal, useWeb3ModalState } from '@web3modal/wagmi/react';
import React from 'react';
import { useAccount, useDisconnect } from 'wagmi';

import * as mixpanel from 'lib/mixpanel/index';

export default function useWallet() {
const { open, isOpen } = useWeb3Modal();
const { open } = useWeb3Modal();
const { open: isOpen } = useWeb3ModalState();
const { disconnect } = useDisconnect();
const [ isModalOpening, setIsModalOpening ] = React.useState(false);
const [ isClientLoaded, setIsClientLoaded ] = React.useState(false);
Expand Down
Loading

0 comments on commit ea9e0cd

Please sign in to comment.