Cardano 与钱包连接 - 反应
用于连接卡达诺钱包到dApps的回放钩和组件. 支持带有内置的桌面浏览器扩展和移动本地钱包 CIP-8 (中文(简体) ), (中文(简体) ), CIP-30 (中文(简体) ), (中文(简体) ), CIP-45 (中文(简体) ),以及 CIP-158 (中文(简体) ) 支助.
开始
npm i @cardano-foundation/cardano-connect-with-wallet
活生生的例子见 故事书游乐场。 。 。 .
组件
连接Wallet 按钮
一个打开一个下拉式列表可使用钱包的按钮 。 在移动上,它处理深层链接,应用商店自动重定向.
import { ConnectWalletButton } from '@cardano-foundation/cardano-connect-with-wallet';
<ConnectWalletButton
supportedWallets={['Eternl', 'Nami', 'Yoroi', 'Vespr', 'Begin']}
onConnect={(walletName) => console.log('connected:', walletName)}
onDisconnect={() => console.log('disconnected')}
/>
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
label | string | ReactNode | 'Connect Wallet' | 没有连接钱包时的按钮标签 |
supportedWallets | string[] | 埃特尔,纳米,约罗伊... | 在下拉时显示钱包 |
showUnavailableWallets | UnavailableWalletVisibility | SHOW_UNAVAILABLE_ON_MOBILE | 列出钱包的控制 |
alwaysVisibleWallets | string[] | [] | 无论安装状态如何, 钱包总是显示 |
primaryColor | string | '#0538AF' | 按钮和菜单的中间颜色 |
borderRadius | number | 15 | 像素中的边框半径 |
showAccountBalance | boolean | false | 显示 ADA 平衡而不是利害关系地址 |
limitNetwork | NetworkType | —— 说 | 限于 MAINNET 或者说 TESTNET |
peerConnectEnabled | boolean | true | 显示 CIP- 45 P2P QR 选项 |
cip158Enabled | boolean | true | 对支持的移动钱包使用 CIP-158 深链接 |
dAppName | string | 'Awesome DApp' | 在 CIP- 45 QR 对话框中显示 dApp 名称 |
dAppUrl | string | —— 说 | dApp URL 用于 CIP- 45 对等身份 |
extensions | number[] | —— 说 | 连接时请求的 CIP 扩展号( 例如 ). [95](中文(简体) ) |
message | string | —— 说 | 如果设置了, 在连接时添加“ 签名消息” 动作 |
customActions | Action[] | [] | 连接时显示的额外菜单项 |
hideActionMenu | boolean | false | 连接时隐藏动作滴入 |
customCSS | string | —— 说 | 适用于外包装器的额外 CSS |
onConnect | (walletName: string) => void | —— 说 | 成功连接后调用 |
onDisconnect | () => void | —— 说 | 断开后调用 |
onSignMessage | (signature, key) => void | —— 说 | 在信件签名成功后调用 |
onConnectError | (walletName, error, level) => void | alert | 连接失败时调用 |
连接钱包列表
钱包按钮的平面列表, 当您想要嵌入钱包拾取器时有用, 而不是在下拉中 .
import { ConnectWalletList } from '@cardano-foundation/cardano-connect-with-wallet';
<ConnectWalletList
borderRadius={15}
gap={12}
primaryColor="#0538AF"
onConnect={onConnectWallet}
customCSS={`
font-family: Helvetica Light, sans-serif;
font-size: 0.875rem;
font-weight: 700;
width: 164px;
& > span { padding: 5px 16px; }
`}
/>
接受与 ConnectWalletButton 减 label, (中文(简体) ), showAccountBalance, (中文(简体) ), hideActionMenu, (中文(简体) ), message, (中文(简体) ), customActions, (中文(简体) ), beforeComponent,以及 afterComponent。 。 。 .
使用卡尔德诺虎克
useCardano 是两个组件使用的低级钩子。 当您需要直接访问钱包状态或想要构建一个完全自定义的UI时使用.
import { useCardano } from '@cardano-foundation/cardano-connect-with-wallet';
const {
isEnabled,
isConnected,
isConnecting,
enabledWallet,
stakeAddress,
usedAddresses,
unusedAddresses,
accountBalance,
installedExtensions,
connect,
disconnect,
signMessage,
} = useCardano({ limitNetwork: NetworkType.MAINNET });
// Connect by wallet name
await connect('eternl', onSuccess, onError, [{ cip: 95 }]);
// Disconnect
disconnect();
// Sign a message (CIP-8)
signMessage('Hello Cardano', (signature, key) => console.log(signature));
移动钱包
在移动设备上,库会自动调整其行为:
钱包 CIP-158 (中文(简体) ) 支助 (埃特恩,维斯普): 盗取钱包射击 a web+cardano://browse/v1?uri=<encoded_url> 深关相通. 如果钱包应用程序被安装,它会打开其已注入的CIP-30 API的内应用浏览器. 如果应用程序没有安装,则在2.5分超时后,用户会被重定向到App Store或Play Store.
其他移动钱包 (Begin, Yoroi, Flint):如果钱包还没有注入,则直接被窃听到相应的应用商店.
选择退出CIP-158深链 cip158Enabled={false} 用于两个组件.
QQ CIP-45: P2P 钱包连接
CIP-45允许移动钱包通过扫描QR代码连接到桌面dApp. 两个组件在钱包列表中显示一个“ P2P 钱包” 条目, 当 peerConnectEnabled 实值 true (默认). 点击它打开一个使用QR码的模式,用户用他们的移动钱包扫描.
<ConnectWalletButton
peerConnectEnabled={true}
dAppName="My dApp"
dAppUrl="https://my-dapp.io"
peerConnectSubtitle="Scan with a CIP-45 compatible wallet such as Eternl"
/>
iQSSR 与 Next.js 组合
此库访问 window 财务报告和审定财务报表 localStorage 在服务器侧渲染时不可用。 使用 动态导入 与 ssr: false 用于组件和钩子.
const ConnectWalletButton = dynamic(
() =>
import('@cardano-foundation/cardano-connect-with-wallet').then(
(mod) => mod.ConnectWalletButton
),
{ ssr: false }
);
捐款
请看看我们 提供信息 熟悉我们的准则。 也有一个简短的描述 我们的发展设置 当我们使用 故事书 用于测试、玩弄和支持发展进程.