# Ethers V5/useDapp Context Setup

{% hint style="warning" %}
This setup is required when using the ethers-v5 compatible SDK's from the [GoodWeb3-Mono Repo.](https://github.com/GoodDollar/GoodWeb3-Mono)

For ethers-v6 sdk's, see the viem/wagmi sdk's documentation for [Identity](/for-developers/apis-and-sdks/sybil-resistance/identity-viem-wagmi.md) or [Claiming](/for-developers/apis-and-sdks/ubi/claim-ubi-viem-wagmi.md). Or take a look at the [GoodSdks Repository](https://github.com/GoodDollar/GoodSdks) 
{% endhint %}

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](https://github.com/GoodDollar/GoodWeb3-Mono)), you'll need to make sure you have the following installed:

```sh
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](https://usedapp-docs.netlify.app/docs/api%20reference/providers/#dappprovider):

```jsx
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.

```javascript
** @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:

```jsx
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.\
\
\&#xNAN;*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.](https://scoutgame.xyz/info/partner-rewards/gooddollar)\
\
\&#xNAN;*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](https://app.gardens.fund/gardens/42220/0x62b8b11039fcfe5ab0c56e502b1c372a3d2a9c7a/0xf42c9ca2b10010142e2bac34ebdddb0b82177684/94) covenant on how to participate and apply.\
\
\&#xNAN;*GoodBuilders program:*\
Be sure to check out the [GoodBuilders Program!](https://ubi.gd/goodbuilders) 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](https://t.me/gooddollarbounties)\
We are also on Discord:  [GoodDollar Discord Development](https://discord.gg/B4bj9eXuWU)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gooddollar.org/for-developers/developer-guides/ethers-v5-usedapp-context-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.