Wallet Buttons

<template>
  <div>
    <button @click="() => appKitWalletButton.connect('metamask')" :disabled="!isReady">
      Connect to MetaMask
    </button>
    <button @click="() => appKitWalletButton.connect('walletConnect')" :disabled="!isReady">
      Open QR modal
    </button>
    <button @click="() => appKitWalletButton.connect('google')" :disabled="!isReady">
      Connect to Google
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

const appKitWalletButton = createAppKitWalletButton()
const isReady = ref(false)

onMounted(() => {
  isReady.value = appKitWalletButton.isReady()
})
</script>

<template>
  <div>
    <!-- Connect to Ethereum/EVM chains -->
    <button @click="() => evmWalletButton.connect('metamask')" :disabled="!isEvmReady">
      Connect MetaMask (EVM)
    </button>
    
    <!-- Connect to Solana -->
    <button @click="() => solanaWalletButton.connect('phantom')" :disabled="!isSolanaReady">
      Connect Phantom (Solana)
    </button>
    
    <!-- Connect to Bitcoin -->
    <button @click="() => bitcoinWalletButton.connect('leather')" :disabled="!isBitcoinReady">
      Connect Leather (Bitcoin)
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

const evmWalletButton = createAppKitWalletButton({ namespace: 'eip155' })
const solanaWalletButton = createAppKitWalletButton({ namespace: 'solana' })
const bitcoinWalletButton = createAppKitWalletButton({ namespace: 'bip122' })

const isEvmReady = ref(false)
const isSolanaReady = ref(false)
const isBitcoinReady = ref(false)

onMounted(() => {
  isEvmReady.value = evmWalletButton.isReady()
  isSolanaReady.value = solanaWalletButton.isReady()
  isBitcoinReady.value = bitcoinWalletButton.isReady()
})
</script>