@metavault/apps-wagmi v1.3.0

Metavault Wagmi Connector

It is the wagmi connector that allows the application to auto-connect to the Metavault Shell.

Install

Use npm to install @metavault/apps-wagmi and @metavault/apps-react-sdk

  npm install @metavault/apps-wagmi @metavault/apps-react-sdk 

Feedback

If you have any feedback, please contact us at admin@metavault.org or 0xr@metavault.org

Usage / React Sample

1. Wrap your top level component with the MetavaultProvider.

import { MetavaultProvider } from '@metavault/apps-react-sdk';

function CustomApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <MetavaultProvider> --> Metavault provider 
        <Web3Provider> --> Our Custom WagmiConfig wrapper
            ...
                <div>
                    <Component {...pageProps} />
                </div>
            ...    
        <Web3Provider>
      </MetavaultProvider>
    </>
  );
}

2. Initialize wagmi client with the Metavault Connector

import { WagmiConfig, configureChains, createClient } from 'wagmi';
import { arbitrum, polygon } from 'wagmi/chains';
import { MetavaultConnector } from '@metavault/apps-wagmi';
....

const { chains, provider } = configureChains(
  [polygon, arbitrum],
  [publicProvider()]
);

export function Web3Provider({ children }: any) {
  const client = useMemo(() => {
    return createClient({
      autoConnect: true,
      connectors: [
        new MetavaultConnector({ chains }),
        new MetaMaskConnector({ chains }),
        new InjectedConnector({
          chains,
          options: {
            name: 'Injected',
            shimDisconnect: true,
          },
        }),
      ],
      provider: provider,
    });
  }, [chains, provider]);

  return (
    <WagmiConfig client={client}>
        {children}
    </WagmiConfig>
  );
}

3. Your app should automatically connected to Metavualt Shell app if you open the app inside shell application.

4. Add manifest.json file to app's public directory to enable remote Metavault App's to load inside Metavault Shell.

Here is the minimum manifest.json file content

{
  "name": "My Metavault App",
  "description": "Apps loaded inside Metavualt Shell",
  "iconPath": "./logo.svg"
}

To test your integration, please contact us.