# @coinbase/cdp-react 中文文档

规范地址：https://npmcn.com/package/%40coinbase/cdp-react/

版本：0\.0\.130
npm 元数据更新时间：2026-11-09T23:37:10.351Z
中文译文更新时间：2026-11-10T10:30:06.068Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40coinbase/cdp-react
原文对照：https://npmcn.com/package/%40coinbase/cdp-react/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.1 MB，527 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：10 个
- peer 依赖：react \>=18\.2\.0，@base-org/account ^2\.5\.6，@coinbase/cdp-core ^0\.0\.130，@coinbase/cdp-hooks ^0\.0\.130
- 首次发布：2025-07-11T19:30:51.867Z
- 最新版本发布：2026-11-09T23:37:10.109Z
- 近 30 天下载量：13073（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：129（近 12 个月 71 个）

## 中文简介

这个软件包包含现成的,可自定义的React UI组件来包裹CDP前端SDK.

## 安装

```sh
npm install @coinbase/cdp-react
```

也可以使用：`pnpm add @coinbase/cdp-react`、`yarn add @coinbase/cdp-react`、`bun add @coinbase/cdp-react`

## README

此套件包含现成的,自定义的 Resact UI 组件来包接 cDP前端的SDK.

## 构成部分

-   QQlink Sign InModal QQ Sign InModal } - 触发与登录流动模式的按钮
-   QQlink SignIn QX SignIn} - 流中标志、标志、标题和描述文本的表格
-   QQlink 符号出键 QX 符号出键 – 一个符号出键
-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} `SignOutButton` 当登录时 `SignInModal` 当登出时
-   QQLink 发送Evm 交易按钮 发送Evm 交易 按钮} - 一个签名和发送 EVM 交易的按钮
-   链接 SendsSolana 交易按钮 发送Solana 交易 按钮 } - 一个签名并发送索拉纳交易的按钮
-   \- 资金流
-   QQLink Fund Modal – Fund Modal – 触发与资金流量模式的按钮
-   QQlink LinkAuth QLinkAuth} - 链接或解链接认证方法的组件
-   QQlink LinkAuth Modal QQ LinkAuth Modal } - 触发链接/ 解链接流模式的按钮
-   QQLink CopyAddress QCopyAddress} - 一个使用复制按钮使地址缩短的组件
-   – 链接 CopyEvmKeyButton – CopyEvmKeyButton – 复制用户EVM EOA地址的私钥的按钮
-   QQlink CopySolanaKeyButton QQ CopySolanaKeyButton – 一个用于复制用户索拉纳地址私钥的按钮
-   QQLink ExportWallet QX ExportWallet} - 钱包出口控制并带有安全警告和复制按钮. 设定 `exportFormat="mnemonic"` 其账户 `availableExportFormats` 包含 `mnemonic`。当账户或格式发生变化时,导出会话会自动重排.
-   QQLink ExportWallet Modal QQ ExportWallet Modal} - 触发带有ExportWallet组件的模式的按钮
-   QQLink EnrollMfa QQ EnrollMfa – MFA 入学的组件; 通过 TOTP 设置两个要素认证来引导用户
-   QQLink EnrollMfa Modal QQ EnrollMfa Modal – 触发与外交部入学流量模式的按钮
-   QQlink 校验Mfa – 校验Mfa} — MFA 校验的一个组件; 提示已注册的用户输入其认证码
-   QQlink 校验Mfa Modal QQ 校验Mfa Modal – 触发与 MFA 校验流模式的按钮
-   QQlink 校验MfaInline QQ 校验MfaInline} - 用于嵌入 MFA 校验在现有UI 流中的包件组件

## 快速启动

这个向导会帮助您开始 `@coinbase/cdp-react`。你会学会如何安装软件包, 设置提供者, 并制作您的第一个组件.

### 安装

首先,使用您首选的软件包管理器将软件包添加到您的项目中 .

```bash
# With pnpm
pnpm add @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks

# With yarn
yarn add @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks

# With npm
npm install @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks
```

### 收集您的 CDP 项目信息

1.  在此处签名或创建账户 [CDP 门户](https://portal.cdp.coinbase.com/)
2.  在您的仪表板上,从最上方的下拉位置选择一个项目,并复制项目ID

### 允许列出本地应用程序

1.  导航到 [嵌入式钱包配置](https://portal.cdp.coinbase.com/products/embedded-wallets/cors) 在 CDP 门户网站中,单击添加来源以包含本地应用程序
2.  输入本地运行的应用程序的出处 - 例如 , `http://localhost:3000`
3.  点击 重新添加来源以保存您的更改

### 设置提供者

接下来,您需要用 `CDPReactProvider`。 。 。 .

`CDPReactProvider` 为钩子和部件正确工作提供必要的环境。 它还提供访问配置数据和主题.

更新您的主应用程序文件( 例如 ), `main.tsx` 或者说 `App.tsx`(a) 包括提供者:

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App'; // Your main App component
import { CDPReactProvider, type Config, type Theme } from '@coinbase/cdp-react';

// Config for your dapp
const config: Config = {
  projectId: "your-project-id", // Copy your Project ID here.
  appName: "My app", // the name of your application
  appLogoUrl: "https://picsum.photos/64", // logo will be displayed in select components
}

// You can customize the theme by overriding theme variables
const themeOverrides: Partial<Theme> = {
  "colors-bg-default": "black",
  "colors-bg-alternate": "#121212",
  "colors-fg-default": "white",
  "colors-fg-muted": "#999999",
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <CDPReactProvider config={config} theme={themeOverrides}>
      <App />
    </CDPReactProvider>
  </React.StrictMode>,
);
```

#### 分析

默认SDK会释放出使用分析器来帮助我们改进SDK. 如果您想选择退出,您可以通过设置 `disableAnalytics` 配置选项到 `true`。 。 。 .

```tsx
<CDPReactProvider
  config={{
    projectId: "your-project-id",
    disableAnalytics: true,
  }}
>
  <App />
</CDPReactProvider>
```

### 设定组件

现在可以使用库中的组件. 我们再加一个 `AuthButton` 组件。 此组件既处理登录功能,也处理退出功能.

```tsx
// In your App.tsx or any other component
import { AuthButton } from '@coinbase/cdp-react/components/AuthButton';

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <AuthButton />
    </div>
  );
}

export default App;

```

就这样! 你安装成功 `@coinbase/cdp-react`,设置提供者, 并完成您的第一个组件.

## 常见问题

### @coinbase/cdp-react 是什么？

这个软件包包含现成的,可自定义的React UI组件来包裹CDP前端SDK\.

### 如何安装 @coinbase/cdp-react？

在项目目录运行 npm install @coinbase/cdp-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.2\.0）、@coinbase/cdp-core（^0\.0\.130）、@coinbase/cdp-hooks（^0\.0\.130）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @coinbase/cdp-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @coinbase/cdp-react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @coinbase/cdp-react 可以商用吗？

@coinbase/cdp-react 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @coinbase/cdp-react 的下载量有多少？

根据 npm 官方下载统计，@coinbase/cdp-react 在 2026/10/11 – 2026/11/09 这 30 天内被下载 13,073 次，日均约 436 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @coinbase/cdp-react 还在维护吗？

最新版本 0\.0\.130 发布于 2026/11/10（今天）；至今共发布 129 个版本，其中过去 12 个月发布了 71 个；首次发布于 2025/07/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。