专业的比特币钱包连接技能，支持btc-connect core、react、vue包在React、Vue、Next.js、Nuxt 3项目中的完整集成，包含UniSat和OKX钱包适配、网络切换功能、SSR环境配置、统一Hook API和v0.5.0最新特性
btc-connect 是专为比特币 Web3 应用设计的钱包连接工具包，提供统一的连接接口、事件监听和适配层。此技能支持在 React、Vue、Next.js、Nuxt 3 项目中完整集成最新版本的 btc-connect (v0.5.0+)，实现 UniSat 和 OKX 钱包的连接、网络切换、状态管理，并解决 SSR 环境兼容性问题。
最新特性 (v0.5.0): 统一Hook API设计、智能主题检测系统、代码质量全面优化、完善类型安全、增强构建性能、完整测试覆盖。
在以下情况下使用此技能：
首先检查项目类型和当前环境：
根据项目类型安装相应包：
# 使用 Bun（推荐）
bun add @btc-connect/core @btc-connect/react # React 项目
bun add @btc-connect/core @btc-connect/vue # Vue 项目
# 或使用 npm
npm install @btc-connect/core @btc-connect/react
版本要求：
💡 安装策略: 安装脚本自动选择最新稳定版本，确保最低版本要求为 v0.4.0+
根据框架和环境进行配置：
React 配置：
Vue 配置：
useWallet()SSR 环境配置：
实现比特币网络切换：
// React Hook 使用
const { network, switchNetwork } = useNetwork()
await switchNetwork('testnet') // 切换到测试网
// Vue Composable 使用
const { network, switchNetwork } = useNetwork()
await switchNetwork('mainnet') // 切换到主网
支持网络：livenet（主网）、testnet（测试网）、regtest（回归测试网）
选择并集成目标钱包：
如遇问题，按以下步骤排查：
快速示例：
'use client'
import { BTCWalletProvider, useWallet } from '@btc-connect/react'
function App() {
return (
<BTCWalletProvider>
<WalletComponent />
</BTCWalletProvider>
)
}
function WalletComponent() {
const { isConnected, connect, account, network } = useWallet()
// 实现钱包连接逻辑
}
useWallet() 获取所有功能快速示例：
<template>
<div>
<ConnectButton @connect="handleConnect" />
<!-- v0.4.0+ 已集成模态框到 ConnectButton -->
</div>
</template>
<script setup>
import { ConnectButton, useWallet } from '@btc-connect/vue'
const wallet = useWallet() // 🆕 统一 API
const handleConnect = (walletId) => {
console.log('连接到钱包:', walletId)
}
</script>
关键配置：
// components/WalletConnect.tsx
'use client'
import { useWallet } from '@btc-connect/react'
export default function WalletConnect() {
const { connect, isConnected } = useWallet()
// 钱包连接逻辑
}
// pages/index.tsx
import dynamic from 'next/dynamic'
const WalletConnect = dynamic(() => import('./WalletConnect'), {
ssr: false
})
关键配置：
// plugins/btc-connect.client.ts
import { BTCWalletPlugin } from '@btc-connect/vue'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(BTCWalletPlugin)
})
<template>
<ClientOnly>
<ConnectButton />
</ClientOnly>
</template>
网络切换示例：
// 完全支持程序化切换
await switchNetwork('testnet') // 立即切换到测试网
await switchNetwork('mainnet') // 立即切换到主网
网络切换指导：
// OKX 钱包网络切换需要用户手动操作
try {
await switchNetwork('testnet')
} catch (error) {
// 提示用户在 OKX 钱包中手动切换网络
console.log('请在 OKX 钱包中手动切换到测试网')
}
import { BTCWalletManager } from '@btc-connect/core'
const manager = new BTCWalletManager()
await manager.switchNetwork('testnet')
// 监听网络变化
manager.on('networkChange', ({ walletId, network }) => {
console.log(`钱包 ${walletId} 切换到 ${network} 网络`)
})
import { useNetwork } from '@btc-connect/react'
function NetworkSwitcher() {
const { network, switchNetwork, isSwitching } = useNetwork()
const handleSwitch = async () => {
try {
await switchNetwork('mainnet')
console.log('切换到主网成功')
} catch (error) {
console.error('切换失败:', error.message)
}
}
return (
<div>
<p>当前网络: {network}</p>
<button onClick={handleSwitch} disabled={isSwitching}>
{isSwitching ? '切换中...' : '切换到主网'}
</button>
</div>
)
}
<template>
<div class="network-switcher">
<p>当前网络: {{ network.name }}</p>
<button @click="switchToTestnet" :disabled="isSwitching">
{{ isSwitching ? '切换中...' : '切换到测试网' }}
</button>
</div>
</template>
<script setup>
import { useNetwork } from '@btc-connect/vue'
const { network, switchNetwork, isSwitching } = useNetwork()
const switchToTestnet = async () => {
try {
await switchNetwork('testnet')
} catch (error) {
console.error('切换失败:', error.message)
}
}
</script>