WalletConnectButton

The primary component for connecting Web3 wallets with support for 15+ wallet providers.

The WalletConnectButton is the essential component for Web3 authentication, providing a seamless wallet connection experience across all major wallet providers and blockchain networks.

Features

Universal Wallet Support: MetaMask, WalletConnect, Coinbase Wallet, Rainbow, and 15+ more
Multi-Chain Compatible: Ethereum, Polygon, Arbitrum, Optimism, Solana, and others
Mobile Optimized: Deep-linking and QR codes for mobile wallet apps
Customizable UI: Multiple variants, sizes, and styling options
Connection State: Built-in loading, error, and success states

Basic Usage

<template>
  <div class="space-y-4">
    <WalletConnectButton
      @connect="handleConnect"
      @disconnect="handleDisconnect"
    />

    <div v-if="connected" class="flex items-center gap-2 text-sm font-mono">
      <span>{{ walletAddress }}</span>
    </div>
  </div>
</template>

<script setup>
const connected = ref(false)
const walletAddress = ref('')

const handleConnect = (wallet) => {
  connected.value = true
  walletAddress.value = wallet.address
  console.log('Connected to:', wallet.name)
}

const handleDisconnect = () => {
  connected.value = false
  walletAddress.value = ''
}
</script>

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'ghost' \| 'gradient'`	`'default'`	Button visual style
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Button size
`loading`	`boolean`	`false`	Show loading state
`disabled`	`boolean`	`false`	Disable the button
`supportedChains`	`string[]`	`['ethereum']`	Supported blockchain networks
`defaultChain`	`string`	`'ethereum'`	Default chain to connect to
`walletConnectProjectId`	`string`	`undefined`	WalletConnect Cloud project ID
`hideWhenConnected`	`boolean`	`false`	Hide button when wallet is connected

Events

Event	Payload	Description
`@connect`	`WalletInfo`	Fired when wallet successfully connects
`@disconnect`	`void`	Fired when wallet disconnects
`@error`	`Error`	Fired when connection fails
`@chainChanged`	`string`	Fired when user switches chains

Advanced Usage

Multi-Chain Setup

<template>
  <WalletConnectButton
    :supported-chains="chains"
    default-chain="ethereum"
    @connect="handleConnect"
    @chain-changed="handleChainChange"
  />
</template>

<script setup>
const chains = ['ethereum', 'polygon', 'arbitrum', 'optimism']

const handleConnect = (wallet) => {
  console.log(`Connected to ${wallet.name} on ${wallet.chain}`)
}

const handleChainChange = (newChain) => {
  console.log(`Switched to ${newChain}`)
}
</script>

Custom Styling

<template>
  <div class="space-y-4">
    <WalletConnectButton
      variant="gradient"
      size="lg"
      class="w-full"
    />

    <WalletConnectButton
      variant="outline"
      size="sm"
      class="border-fuchsia-500 text-fuchsia-600"
    />
  </div>
</template>

With Loading State

<template>
  <WalletConnectButton
    :loading="connecting"
    :disabled="connecting"
    @connect="handleConnect"
  />
</template>

<script setup>
const connecting = ref(false)

const handleConnect = async (wallet) => {
  connecting.value = true
  try {
    // Perform additional setup
    await setupUserProfile(wallet)
  } finally {
    connecting.value = false
  }
}
</script>

Wallet Provider Support

Provider	Type	Mobile	Desktop
MetaMask	Browser Extension	✅	✅
WalletConnect	Protocol	✅	✅
Coinbase Wallet	App/Extension	✅	✅
Rainbow	Mobile App	✅	❌
Trust Wallet	Mobile App	✅	❌
Phantom	Solana	✅	✅

Configuration

Global Setup

// plugins/supaweb3.client.ts
export default defineNuxtPlugin(() => {
  const supaweb3 = createSupaWeb3({
    walletConnect: {
      projectId: 'your-project-id',
      chains: ['ethereum', 'polygon']
    },
    defaultChain: 'ethereum'
  })

  return {
    provide: { supaweb3 }
  }
})

Environment Variables

# .env
WALLETCONNECT_PROJECT_ID=your_project_id
DEFAULT_CHAIN=ethereum

Troubleshooting

Common Issues

Connection Fails

Ensure WalletConnect project ID is set
Check that the requested chain is supported
Verify wallet app is installed on mobile

Chain Switching

Some wallets require manual chain switching
Provide clear instructions to users
Handle chain mismatch errors gracefully

Mobile Deep-linking

Test on actual devices, not simulators
Ensure proper URL schemes are configured
Provide fallback QR codes

AddressDisplay - Display connected wallet address
NetworkSwitch - Switch between networks
WalletInfo - Show wallet details

Components

Comprehensive Web3 UI components for Vue and Nuxt applications.

DeFi Components

Complete DeFi interface components for trading, staking, lending, and yield farming.