专业的比特币钱包连接技能，支持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>
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Testing patterns for PHPUnit and Playwright E2E tests. Use when writing tests, debugging test failures, setting up test coverage, or implementing test patterns for ActivityPub features.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Cloud laboratory platform for automated protein testing and validation. Use when designing proteins and needing experimental validation including binding assays, expression testing, thermostability measurements, enzyme activity assays, or protein sequence optimization. Also use for submitting experiments via API, tracking experiment status, downloading results, optimizing protein sequences for better expression using computational tools (NetSolP, SoluProt, SolubleMPNN, ESM), or managing protein design workflows with wet-lab validation.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Add unsigned integer (uint) type support to PyTorch operators by updating AT_DISPATCH macros. Use when adding support for uint16, uint32, uint64 types to operators, kernels, or when user mentions enabling unsigned types, barebones unsigned types, or uint support.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Master advanced AgentDB features including QUIC synchronization, multi-database management, custom distance metrics, hybrid search, and distributed systems integration. Use when building distributed AI systems, multi-agent coordination, or advanced vector search applications.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Create and train AI learning plugins with AgentDB's 9 reinforcement learning algorithms. Includes Decision Transformer, Q-Learning, SARSA, Actor-Critic, and more. Use when building self-learning agents, implementing RL, or optimizing agent behavior through experience.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.