此套件包含现成的,自定义的 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。你会学会如何安装软件包, 设置提供者, 并制作您的第一个组件.
安装
首先,使用您首选的软件包管理器将软件包添加到您的项目中 .
# 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 项目信息
- 在此处签名或创建账户 CDP 门户
- 在您的仪表板上,从最上方的下拉位置选择一个项目,并复制项目ID
允许列出本地应用程序
- 导航到 嵌入式钱包配置 在 CDP 门户网站中,单击添加来源以包含本地应用程序
- 输入本地运行的应用程序的出处 - 例如 ,
http://localhost:3000 - 点击 重新添加来源以保存您的更改
设置提供者
接下来,您需要用 CDPReactProvider。 。 。 .
CDPReactProvider 为钩子和部件正确工作提供必要的环境。 它还提供访问配置数据和主题.
更新您的主应用程序文件( 例如 ), main.tsx 或者说 App.tsx(a) 包括提供者:
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。 。 。 .
<CDPReactProvider
config={{
projectId: "your-project-id",
disableAnalytics: true,
}}
>
<App />
</CDPReactProvider>
设定组件
现在可以使用库中的组件. 我们再加一个 AuthButton 组件。 此组件既处理登录功能,也处理退出功能.
// 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,设置提供者, 并完成您的第一个组件.