Ethers V5/useDapp Context Setup
This setup is required when using the ethers-v5 compatible SDK's from the GoodWeb3-Mono Repo.
For ethers-v6 sdk's, see the viem/wagmi sdk's documentation for Identity or Claiming. Or take a look at the GoodSdks Repository
We write our components in react-native-web to be compatible with web and mobile platforms.
We use the following packages for the web3 react experience:
native-base
react-native-web
useDapp
ethers (the web3-sdkv2 uses ethers@5)
To use the react hooks SDK (web3sdk-v2 in the mono-repo), you'll need to make sure you have the following installed:
yarn install @usedapp/core [email protected] @react-native-async-storage/async-storage react react-native react-native-web @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query viem wagmi
Then, you'll need to create a context provider which is a wrapper around useDapp context provider:
import { Celo, Fuse, Web3Provider, AsyncStorage } from '@gooddollar/web3sdk-v2'
import { Goerli, Mainnet } from '@usedapp/core'
...
...
const contractsEnv = "production"
..
return (<Web3Provider
web3Provider={webprovider}
env={contractsEnv}
config={{
pollingInterval: 15000,
networks: [Goerli, Mainnet, Fuse, Celo],
readOnlyChainId: undefined,
readOnlyUrls: {
1: 'https://rpc.ankr.com/eth',
122: 'https://rpc.fuse.io',
42220: 'https://forno.celo.org',
},
}}
>
{children}
</Web3Provider>)
NextJS configuration
This is a working configuration when using webpack.
** @type {import('next').NextConfig} */
const nodeExternals = require("webpack-node-externals");
module.exports = {
webpack: (config, { isServer }) => {
if (isServer) {
config.externals = [
nodeExternals({
allowlist: ["react-native", "@gooddollar/web3sdk-v2"],
}),
];
}
config.resolve.alias = {
...(config.resolve.alias || {}),
"react-native": "react-native-web",
};
config.externals.push({
"expo-file-system": "commonjs expo-file-system",
"react-native-navigation": "commonjs react-native-navigation",
"@react-navigation/native": "commonjs @react-navigation/native",
});
config.resolve.extensions = [
".web.js",
".web.jsx",
".web.ts",
".web.tsx",
...config.resolve.extensions,
];
return config;
},
};
Make sure the components used are not rendered on server side. this can be done by dynamic importing:
import dynamic from "next/dynamic";
const Web3SdkProvider = dynamic(() => import("./api/Web3Context"), {
ssr: false,
});
Win Rewards: Building something on GoodDollar!
Share your ideas, or ask for development support. Be sure to check out the GoodBuilders Program! For discussion on Discord or various program events: GoodDollar Discord Development We are also on Telegram: GoodDollar Builders
Last updated
Was this helpful?