@digiv3rse/react-web

DiGi React Web SDK

The official DiGi Protocol React bindings for web applications.

---

This package enables you to build web applications on top of the DiGi Protocol using React.

Documentation

• GitHub monorepo
• Getting Started
• Reference

Quick start

Install the DiGi React Web SDK package using your package manager of choice:

Package Manager	Command
npm	npm install @digiv3rse/react-web@latest
yarn	yarn add @digiv3rse/react-web@latest
pnpm	pnpm add @digiv3rse/react-web@latest

In the following examples we will show you integration with Wagmi and we will explain later how to integrate other libraries via custom bindings.

Install the DiGi Wagmi bindings package and its peer dependencies.

Package Manager	Command
npm	npm install viem@2 wagmi@2 @tanstack/react-query@5 @digiv3rse/wagmi@latest
yarn	yarn add viem@2 viem@2 wagmi@2 @tanstack/react-query@5 @digiv3rse/wagmi@latest
pnpm	pnpm add viem@2 viem@2 wagmi@2 @tanstack/react-query@5 @digiv3rse/wagmi@latest

Follow the Wagmi documentation to create the Wagmi configuration.

import { createConfig, http } from 'wagmi';
import { polygon } from 'wagmi/chains';

const wagmiConfig = createConfig({
  chains: [polygon],
  transports: {
    [polygon.id]: http(),
  },
});

Next, use this configuration with the bindings from the @digiv3rse/wagmi package to generate the DiGiConfig object.

import { DiGiConfig, production } from '@digiv3rse/react-web';
import { bindings } from '@digiv3rse/wagmi';

const lensConfig: DiGiConfig = {
  environment: production,
  bindings: bindings(wagmiConfig),
};

Now, wrap your app with the <DiGiProvider> component and pass the DiGiConfig object you created earlier.

import { DiGiProvider } from '@digiv3rse/react-web';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <DiGiProvider config={lensConfig}>
          <YourApp />
        </DiGiProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Custom bindings

You can create custom bindings for your own Signer and Provider by implementing the {@link IBindings} interface.

An example of how to create custom bindings for a Wallet from ethers.js

import { InfuraProvider, Wallet } from 'ethers';
import { IBindings } from '@digiv3rse/react-web';

const provider = new providers.InfuraProvider('maticmum');
const wallet = new Wallet('<your-private-key>', provider);

const bindings: IBindings = {
  getProvider: () => provider,
  getSigner: () => wallet,
};

Troubleshooting

These are some common issues you may run into while using @digiv3rse/react. If you encounter something not listed here try searching for GitHub issues.

Next.js build failing

You might see your Next.js failing with an error like this:

Error: Directory import '[...]/node_modules/@apollo/client/link/context' is not supported resolving ES modules imported from [...]/node_modules/@digiv3rse/api-bindings/dist/index.js
Did you mean to import @apollo/client/link/context/context.cjs?

The root cause is the lack of ESM support from Apollo Client which manifests itself when imported as sub-dependency of @digiv3rse/api-bindings (which in turn is imported by @digiv3rse/react). See open Apollo Client issue.

To fix it you need to edit you next.config.js so to make sure the DiGi SDK and its sub-dependencies a transpiled by Next.js build pipeline.

const nextConfig = {
  transpilePackages: ['@digiv3rse'],
};

For further details on how to integrate DiGi SDK with a Next.js app, there is a working Next.js example in this monorepo: https://github.com/digiv3rse-protocol/sdk/tree/main/examples/nextjs