@sky-mavis/tanto-wagmi
v0.0.2
Published
Tanto Wagmi
Downloads
226
Readme
TantoKit Wagmi
Installation
With yarn
yarn add @sky-mavis/tanto-wagmi
With npm
npm install @sky-mavis/tanto-wagmi
Usage
Create Config
Create and export a new Wagmi config using createConfig where chains and transports are set up for the Ronin and Saigon network and roninWallet() connects to the Ronin wallet, waypoint() connect to Ronin Waypoint.
import { roninWallet, waypoint } from '@sky-mavis/tanto-wagmi';
import { ronin, saigon } from 'viem/chains';
import { createConfig, http } from 'wagmi';
export const config = createConfig({
chains: [ronin, saigon],
transports: {
[ronin.id]: http(),
[saigon.id]: http(),
},
connectors: [roninWallet(), waypoint()],
})
Using Wagmi Providers
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';
const queryClient = new QueryClient();
const App = () => (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<YourComponent />
</QueryClientProvider>
</WagmiProvider>
);
Using Wagmi Hooks
import { useAccount, useConnect, useDisconnect, useSignMessage } from 'wagmi';
import { Button } from '@nextui-org/react';
const YourComponent = () => {
const { connect, connectors } = useConnect();
return (
<div>
{connectors.map((connector) => (
<Button onClick={() => connect({ connector })} key={connector.id}>
Connect to {connector.name}
</Button>
))}
</div>
);
};