# @cardano-foundation/cardano-connect-with-wallet 中文文档 规范地址：https://npmcn.com/package/%40cardano-foundation/cardano-connect-with-wallet/ 版本：0\.2\.22 npm 元数据更新时间：2026-05-16T12:45:45.161Z 中文译文更新时间：2026-11-09T07:46:26.228Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cardano-foundation/cardano-connect-with-wallet 原文对照：https://npmcn.com/package/%40cardano-foundation/cardano-connect-with-wallet/?lang=original 项目主页：https://github.com/cardano-foundation/cardano-connect-with-wallet#readme 源码仓库：https://github.com/cardano-foundation/cardano-connect-with-wallet ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.1 MB，23 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：8 个 - peer 依赖：react \>=18\.2\.0，react-dom \>=18\.2\.0，styled-components \>=6\.3\.12 - 首次发布：2022-09-20T07:08:35.750Z - 最新版本发布：2026-05-16T12:45:44.763Z - 近 30 天下载量：3874（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：59（近 12 个月 5 个） ## 中文简介 此套件旨在提供有用的钩子和回放组件来简化卡通 Dapp集成 ## 安装 ```sh npm install @cardano-foundation/cardano-connect-with-wallet ``` 也可以使用：`pnpm add @cardano-foundation/cardano-connect-with-wallet`、`yarn add @cardano-foundation/cardano-connect-with-wallet`、`bun add @cardano-foundation/cardano-connect-with-wallet` ## README # Cardano 与钱包连接 - 反应 ![Tests](https://img.shields.io/github/actions/workflow/status/cardano-foundation/cardano-connect-with-wallet/test.yml?label=Tests&style=for-the-badge) ![Release](https://img.shields.io/github/actions/workflow/status/cardano-foundation/cardano-connect-with-wallet/release.yml?label=Release&style=for-the-badge) [![conventionalcommits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&style=for-the-badge)](https://conventionalcommits.org/) [![Discord](https://img.shields.io/discord/1022471509173882950?style=for-the-badge)](https://discord.gg/4WVNHgQ7bP) 用于连接卡达诺钱包到dApps的回放钩和组件. 支持带有内置的桌面浏览器扩展和移动本地钱包 [CIP-8 (中文(简体) )](https://cips.cardano.org/cip/CIP-0008), (中文(简体) ), [CIP-30 (中文(简体) )](https://cips.cardano.org/cip/CIP-0030), (中文(简体) ), [CIP-45 (中文(简体) )](https://github.com/cardano-foundation/CIPs/pull/395),以及 [CIP-158 (中文(简体) )](https://github.com/cardano-foundation/CIPs/pull/1058) 支助. ![](https://user-images.githubusercontent.com/1525818/192223749-205be194-7707-4726-9ef1-72d0c2c7f903.gif) ## 开始 ```zsh npm i @cardano-foundation/cardano-connect-with-wallet ``` 活生生的例子见 [故事书游乐场](https://cardano-foundation.github.io/cardano-connect-with-wallet/react-storybook)。 。 。 . ## 组件 ### 连接Wallet 按钮 一个打开一个下拉式列表可使用钱包的按钮 。 在移动上,它处理深层链接,应用商店自动重定向. ```tsx import { ConnectWalletButton } from '@cardano-foundation/cardano-connect-with-wallet'; 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` | 连接失败时调用 | ### 连接钱包列表 钱包按钮的平面列表, 当您想要嵌入钱包拾取器时有用, 而不是在下拉中 . ```tsx import { ConnectWalletList } from '@cardano-foundation/cardano-connect-with-wallet'; span { padding: 5px 16px; } `} /> ``` 接受与 `ConnectWalletButton` 减 `label`, (中文(简体) ), `showAccountBalance`, (中文(简体) ), `hideActionMenu`, (中文(简体) ), `message`, (中文(简体) ), `customActions`, (中文(简体) ), `beforeComponent`,以及 `afterComponent`。 。 。 . ## 使用卡尔德诺虎克 `useCardano` 是两个组件使用的低级钩子。 当您需要直接访问钱包状态或想要构建一个完全自定义的UI时使用. ```tsx 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 (中文(简体) )](https://github.com/cardano-foundation/CIPs/pull/1058) 支助** (埃特恩,维斯普): 盗取钱包射击 a `web+cardano://browse/v1?uri=` 深关相通. 如果钱包应用程序被安装,它会打开其已注入的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码的模式,用户用他们的移动钱包扫描. ```tsx ``` ## iQSSR 与 Next.js 组合 此库访问 `window` 财务报告和审定财务报表 `localStorage` 在服务器侧渲染时不可用。 使用 [动态导入](https://nextjs.org/learn/seo/dynamic-import-components) 与 `ssr: false` 用于组件和钩子. ```tsx const ConnectWalletButton = dynamic( () => import('@cardano-foundation/cardano-connect-with-wallet').then( (mod) => mod.ConnectWalletButton ), { ssr: false } ); ``` ## 捐款 请看看我们 [提供信息](https://npmcn.com/package/%40cardano-foundation/cardano-connect-with-wallet/CONTRIBUTING.md) 熟悉我们的准则。 也有一个简短的描述 我们的发展设置 当我们使用 [故事书](https://storybook.js.org/) 用于测试、玩弄和支持发展进程. ## 常见问题 ### @cardano-foundation/cardano-connect-with-wallet 是什么？ 此套件旨在提供有用的钩子和回放组件来简化卡通 Dapp集成 ### 如何安装 @cardano-foundation/cardano-connect-with-wallet？ 在项目目录运行 npm install @cardano-foundation/cardano-connect-with-wallet，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.2\.0）、react-dom（\>=18\.2\.0）、styled-components（\>=6\.3\.12）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @cardano-foundation/cardano-connect-with-wallet 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cardano-foundation/cardano-connect-with-wallet 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @cardano-foundation/cardano-connect-with-wallet 可以商用吗？ @cardano-foundation/cardano-connect-with-wallet 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @cardano-foundation/cardano-connect-with-wallet 的下载量有多少？ 根据 npm 官方下载统计，@cardano-foundation/cardano-connect-with-wallet 在 2026/10/09 – 2026/11/07 这 30 天内被下载 3,874 次，日均约 129 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cardano-foundation/cardano-connect-with-wallet 还在维护吗？ 最新版本 0\.2\.22 发布于 2026/05/16（5 个月前）；至今共发布 59 个版本，其中过去 12 个月发布了 5 个；首次发布于 2022/09/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。