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 ethers@5.8.0 @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