@impact-market/utils

Install

yarn add @impact-market/utils

Requirements:

use ImpactProvider in order for hooks to work.

Usage:

See docs for further details. Use yarn docs to generate docs and open index.html at docs folder.

An example using Next.js, web3modal and wagmi

// _app.tsx
import type { AppProps } from 'next/app';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
import { EthereumClient, w3mConnectors } from '@web3modal/ethereum';
import { Web3Modal } from '@web3modal/react';
import { celo } from '@wagmi/chains';

const projectId = '<walletconnect-project-id>';

const { chains, publicClient } = configureChains(
    [celo],
    [jsonRpcProvider({ rpc: chain => ({ http: chain.rpcUrls.default.http[0] }) })]
);

const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: w3mConnectors({ projectId, version: 2, chains }),
    publicClient,
});

const ethereumClient = new EthereumClient(wagmiConfig, chains);

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <>
            <WagmiConfig config={wagmiConfig}>
                <Component {...pageProps} />
            </WagmiConfig>
            <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
        </>
    );
}

export default MyApp;

// index.tsx
import React from 'react';
import { ImpactProvider } from '@impact-market/utils/ImpactProvider';
import { useAccount, useNetwork, useWalletClient } from 'wagmi';

function App() {
    const { address } = useAccount();
    const { data: signer } = useWalletClient();
    const { chain } = useNetwork();

    return (
        <ImpactProvider
            jsonRpc={chain?.rpcUrls.public.http[0] ||  'https://alfajores-forno.celo-testnet.org'}
            signer={signer ?? null}
            address={address ?? null}
            networkId={chain?.id || 44787}
        >
            {/** something */}
        </ImpactProvider>
    );
}

export default App;

If you use this within react-native, please install and add import '@ethersproject/shims'; at App.{jsx,tsx}. It is required by ethers.

Development

Local development is broken into two parts (ideally using two tabs).

First, run typescript compiler to watch your src/ module and automatically recompile it whenever you make changes.

yarn start # runs compiler with watch flag

The second part will be running the example/ create-react-app that's linked to the local version of your module.

# (in another tab)
cd example-web
yarn dev

Now, anytime you make a change to your library in src/ or to the example app's example-web/src, the wxample app will live-reload your local dev server so you can iterate on your component in real-time.

create-react-library