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>;
}