# Wagmi Integration (/docs/rise-wallet/wagmi)
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
This guide covers integrating RISE Wallet with [Wagmi](https://wagmi.sh/), the popular collection of React Hooks for Ethereum.
## Overview
RISE Wallet implements a Wagmi connector and provides custom React hooks that map directly to the wallet's capabilities. The integration is designed to feel natural to developers already familiar with Wagmi.
## Installation
```bash
npm i rise-wallet wagmi viem @tanstack/react-query
```
```bash
pnpm add rise-wallet wagmi viem @tanstack/react-query
```
```bash
yarn add rise-wallet wagmi viem @tanstack/react-query
```
```bash
bun add rise-wallet wagmi viem @tanstack/react-query
```
## Basic Setup
### 1. Configure the RISE Wallet Connector
```ts title="config/wagmi.ts"
import { Chains, RiseWallet } from "rise-wallet";
import { riseWallet } from "rise-wallet/wagmi";
import { createConfig, http } from "wagmi";
// Export the connector for advanced usage
export const rwConnector = riseWallet(RiseWallet.defaultConfig);
// Create wagmi config
export const config = createConfig({
chains: [Chains.riseTestnet],
connectors: [rwConnector],
transports: {
[Chains.riseTestnet.id]: http("https://testnet.riselabs.xyz"),
},
});
```
### 2. Set Up Providers
```tsx title="app/providers.tsx"
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { config } from "@/config/wagmi";
import { useState } from "react";
export function Providers({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(() => new QueryClient());
return (
{children}
);
}
```
### 3. Wrap Your App in the Provider
Add the `Providers` component to your root layout:
```tsx title="app/layout.tsx"
import { Providers } from "./providers";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
## Standard Wagmi Hooks
All standard Wagmi hooks work seamlessly with RISE Wallet:
### Connection Management
```tsx title="components/WalletButton.tsx"
import { useConnect, useConnection, useDisconnect, useConnectors } from "wagmi";
export function WalletButton() {
const { address, isConnected } = useConnection();
const connect = useConnect();
const disconnect = useDisconnect();
const connectors = useConnectors();
if (isConnected) {
return (
{address}
);
}
const rwConnector = connectors.find(c => c.id === "com.risechain.wallet");
if (!rwConnector) return null;
return (
);
}
```
### Sending Transactions
```tsx title="components/SendTransaction.tsx"
import { useSendCalls } from "wagmi";
import { parseEther } from "viem";
export function SendTransaction() {
const sendCalls = useSendCalls();
//for sending 0.001 ETH to some address
const handleSend = async () => {
const result = await sendCalls.mutateAsync({
calls: [{
to: "0x...",
value: parseEther("0.001"),
}],
});
console.log("Transaction sent:", result);
};
return (
);
}
```
## RISE Wallet Specific Hooks
Import custom hooks via the `Hooks` namespace:
```tsx
import { Hooks } from "rise-wallet/wagmi";
```
or individually:
```tsx
import { useGrantPermissions } from "rise-wallet/wagmi/Hooks";
```
### useGrantPermissions
Create session keys with specific permissions:
```tsx
import { parseEther } from "viem";
import { P256, PublicKey } from "ox";
const grantPermissions = Hooks.useGrantPermissions();
const createSession = async () => {
// 1. Generate a local key pair
const privateKey = P256.randomPrivateKey();
const publicKey = PublicKey.toHex(P256.getPublicKey({ privateKey }), {
includePrefix: false,
});
// 2. Grant permissions to the session key
await grantPermissions.mutateAsync({
key: { publicKey, type: "p256" },
expiry: Math.floor(Date.now() / 1000) + 3600, // 1 hour
feeToken: null, // use native token for fees, or { limit: "0.01", symbol: "ETH" }
// the permissions you want the session key to have
permissions: {
calls: [{ // function calls
to: "0x...", // address of the contract on which the function is being called
signature: "0x...", // function signature. you can get this via: cast sig "transfer(address,uint256)"
}],
// token spend limits
spend: [{
token: "0x...", // token contract address
limit: parseEther("50"), // max amount (bigint)
period: "minute", // time window (eg. "minute", "hour", "day")
}],
},
});
// 3. Store the private key to sign future transactions without popup
localStorage.setItem("session_key", privateKey);
};
```
### usePermissions
View current permissions for the connected account:
```tsx
const { data: permissions } = Hooks.usePermissions();
if (permissions) {
console.log("Active permissions:", permissions);
}
```
### useRevokePermissions
Revoke previously granted permissions:
```tsx
const revokePermissions = Hooks.useRevokePermissions();
const revokeSession = async (keyId: string) => {
await revokePermissions.mutateAsync({
keyId,
});
};
```
### useAssets
Get user's token balances and assets:
```tsx
const { data: assets } = Hooks.useAssets();
return (
{assets?.map(asset => (
{asset.symbol}: {asset.balance}
))}