Wallet Integration

Handling dual-chain connections with Wagmi and RainbowKit

Configuration

Cylend must connect to both Mantle Sepolia (for settlement) and Sapphire Testnet (for private views). We use wagmi to manage this complexity.

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { mantleSepoliaTestnet } from 'wagmi/chains';

const sapphireTestnet = {
  id: 23295,
  name: 'Oasis Sapphire Testnet',
  network: 'sapphire-testnet',
  nativeCurrency: { name: 'ROSE', symbol: 'ROSE', decimals: 18 },
  rpcUrls: { default: { http: ['https://testnet.sapphire.oasis.io'] } },
} as const;

export const config = getDefaultConfig({
  appName: 'Cylend',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mantleSepoliaTestnet, sapphireTestnet],
});

Network Switching

The frontend is "Chain Aware". When a user navigates to the Dashboard to view private data, hooks automatically prompt a network switch to Sapphire via switchNetwork(). When they go to Deposit, it switches back to Mantle.

Tip

Always use the useNetwork() hook to verify the user is on the correct chain before enabling action buttons.