Developer Dashboard

Wagmi

npm version

🚧

This library is in early development

Wagmi is a popular React library for interacting with Ethereum and other EVM blockchains.

Add the Embedded Wallet Service wagmi connector

Install embedded-wallet-service-wagmi and peer dependencies (wagmi and ethers):

npm install @paperxyz/embedded-wallet-service-wagmi wagmi [email protected]^5

yarn add @paperxyz/embedded-wallet-service-wagmi wagmi [email protected]^5

Add the Embedded Wallet connector to wagmi:

import { createClient, configureChains } from "wagmi";
import { polygon } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import {
  PaperEmbeddedWalletWagmiConnector,
} from "@paperxyz/embedded-wallet-service-wagmi";

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

// Create a Wagmi-compatible connector for Paper Embedded Wallet.
const paperEmbeddedWallet = new PaperEmbeddedWalletWagmiConnector({
  chains,
  options: {
    chain: 'Polygon',
    clientId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  }
});

const client = createClient({
  connectors: [ paperEmbeddedWallet ],
  provider,
});

// Wrap your application with WagmiConfig.
function App() {
  return (
    <WagmiConfig client={client}>
      // ...your app
    </WagmiConfig>
  );
}

The options argument expects the same arguments as the PaperEmbeddedWalletSdk constructor. See PaperEmbeddedWalletSdk.

Use wagmi in your app

That's it! The rest of your app will likely use hooks like useAccount, useEnsName, and useConnect.

import { useAccount, useConnect, useEnsName } from "wagmi"
import { InjectedConnector } from "wagmi/connectors/injected"
 
function Profile() {
  const { address, isConnected } = useAccount();
  const { data: ensName } = useEnsName({ address });
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  });
 
  if (isConnected) return <div>Connected to {ensName ?? address}</div>;
  return <button onClick={() => connect()}>Connect Wallet</button>;
}