@silentdao/wagmi-connector-v2

Silent Protocol wagmi v2 connector for integrating DApps with Silent Protocol through iframe communication.

Installation

npm install @silentdao/wagmi-connector-v2
# or
yarn add @silentdao/wagmi-connector-v2
# or
pnpm add @silentdao/wagmi-connector-v2

Usage

Basic Setup with wagmi

import { createConfig, http } from 'wagmi'
import { mainnet, polygon, arbitrum } from 'wagmi/chains'
import { silentConnector } from '@silentdao/wagmi-connector-v2'

export const config = createConfig({
  chains: [mainnet, polygon, arbitrum],
  connectors: [
    silentConnector({
      // Optional configuration
      shimDisconnect: true, // Simulate disconnect behavior
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [polygon.id]: http(),
    [arbitrum.id]: http(),
  },
})

Using with RainbowKit

import '@rainbow-me/rainbowkit/styles.css'
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { mainnet, polygon, arbitrum } from 'wagmi/chains'
import { publicProvider } from 'wagmi/providers/public'
import { silentConnector } from '@silentdao/wagmi-connector-v2'

const { chains, publicClient } = configureChains(
  [mainnet, polygon, arbitrum],
  [publicProvider()]
)

const { connectors } = getDefaultWallets({
  appName: 'My DApp',
  chains,
})

const config = createConfig({
  autoConnect: true,
  connectors: [
    ...connectors,
    silentConnector({ chains }),
  ],
  publicClient,
})

export function App() {
  return (
    <WagmiConfig config={config}>
      <RainbowKitProvider chains={chains}>
        {/* Your app */}
      </RainbowKitProvider>
    </WagmiConfig>
  )
}

Integration Example (Aave-style)

import { createConfig, http } from 'wagmi'
import { mainnet, polygon, arbitrum, optimism } from 'wagmi/chains'
import { silentConnector } from '@silentdao/wagmi-connector-v2'
import { coinbaseWallet, walletConnect, injected } from 'wagmi/connectors'

// Define your chains
const chains = [mainnet, polygon, arbitrum, optimism] as const

// Create wagmi config
export const wagmiConfig = createConfig({
  chains,
  connectors: [
    injected(),
    walletConnect({
      projectId: 'YOUR_WALLET_CONNECT_PROJECT_ID',
    }),
    coinbaseWallet({
      appName: 'My DApp',
    }),
    silentConnector({
      shimDisconnect: true,
    }),
  ],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/YOUR_API_KEY'),
    [polygon.id]: http('https://polygon-mainnet.g.alchemy.com/v2/YOUR_API_KEY'),
    [arbitrum.id]: http('https://arb-mainnet.g.alchemy.com/v2/YOUR_API_KEY'),
    [optimism.id]: http('https://opt-mainnet.g.alchemy.com/v2/YOUR_API_KEY'),
  },
})

Configuration Options

The silentConnector accepts the following options:

• shimDisconnect (boolean, default: false): Simulates disconnect behavior by tracking connection status in storage

Features

• Iframe Communication: Seamlessly connects DApps running in iframes to the Silent Protocol parent application
• wagmi v2 Compatible: Fully compatible with the latest wagmi v2 API
• Event Handling: Properly handles account and chain change events
• TypeScript Support: Full TypeScript support with proper types
• Multi-chain Support: Works with any EVM-compatible chains

Requirements

• wagmi v2.x
• viem v2.x
• Running inside an iframe context (window.parent !== window)
• ESM-only package: This package is built as ESM-only since wagmi v2 and viem are ESM-only

License

MIT