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!

There are various ways to earn rewards while working within the GoodDollar Ecosystem. Scoutgame: Scoutgame rewards builders who take up pre-defined tasks. Contribute to GoodDollar repositories and earn bounty rewards! More information about the program can be found on our ScoutGame page. GoodDollar OpenSource Contributors Pool: The GoodDollar OpenSource Contributors pool is for anyone who wants to contribute more autonomously. Maybe you have ideas of your own to build into GoodDapp or GoodCollective? Maybe you have ideas for expanding the core protocol? Please read up on our GoodDollar OpenSource Contributors covenant on how to participate and apply. GoodBuilders program: Be sure to check out the GoodBuilders Program! offering mentorship and funding to support promising projects in their growth. Any project that demonstrates meaningful new integrations with the GoodDollar Protocol is eligible to apply! Share your ideas, or ask for development support: For discussion on Discord or various program events: GoodDollar Builders We are also on Discord: GoodDollar Discord Development