impactmarket / utils Goto Github PK

View Code? Open in Web Editor NEW

0.0 8.0 1.0 2.41 MB

impactMarket utils lib

Home Page: https://utils-ipct.vercel.app

License: Apache License 2.0

TypeScript 99.56% JavaScript 0.44%

utils's Introduction

@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

This lib was created using create-react-library. Please check documentetion here.

utils's People

Contributors

Watchers

Forkers

another-devx

Note: Due to the distributed nature of the network it might be the case that different Indexers have indexed up to different blocks. In order to only receive fresh data you can specify the minimum block an Indexer has to have indexed in order to serve your query with the block: { number_gte: $minBlock } field argument

https://github.com/impactMarket/impact-market-smart-contracts/pull/126/files#diff-559737589b443db342076a1793303db188c3c5373111b8c2cc63041c0e2ccc97R1064

But this can be abstracted to the utils also giving support to the web.

Example

// update async storage when a beneficiary or community state changes
// only after the hook data is ready
useEffect(() => {
    if (isReady) {
        import('@react-native-async-storage/async-storage').then(({ default: AsyncStorage}) => {
            AsyncStorage.setItem('@im-utils/cache', JSON.stringify({ beneficiary, community }));
        });
    }
}, [beneficiary, community, isReady]);

// initial load
useEffect(() => {

    import('@react-native-async-storage/async-storage').then(({ default: AsyncStorage}) => {
        AsyncStorage.getItem('@im-utils/cache').then(console.log);
    });

    // (...)
}, [currentBlockNumber]);