OnchainKit

React组件和TypeScript实用工具，帮助您构建顶级的链上应用。 <a href="https://www.npmjs.com/package/@coinbase/onchainkit" target="_blank" rel="noopener noreferrer"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/@coinbase/onchainkit?colorA=21262d&colorB=21262d&style=flat"> <img src="https://img.shields.io/npm/v/@coinbase/onchainkit?colorA=f6f8fa&colorB=f6f8fa&style=flat" alt="版本"> </picture> </a> <a href="https://github.com/coinbase/onchainkit/blob/main/LICENSE.md" target="_blank" rel="noopener noreferrer"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/l/@coinbase/onchainkit?colorA=21262d&colorB=21262d&style=flat"> <img src="https://img.shields.io/npm/l/@coinbase/onchainkit?colorA=f6f8fa&colorB=f6f8fa&style=flat" alt="MIT许可证"> </picture> </a> <a href="https://www.npmjs.com/package/@coinbase/onchainkit" target="_blank" rel="noopener noreferrer"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/@coinbase/onchainkit?colorA=21262d&colorB=21262d&style=flat"> <img src="https://img.shields.io/npm/dm/@coinbase/onchainkit?colorA=f6f8fa&colorB=f6f8fa&style=flat" alt="每月下载量"> </picture> </a>

文档

访问onchainkit.xyz查看文档和指南。

快速开始

您可以通过将OnchainKit作为依赖项安装到现有项目中来使用它。

安装

让我们将OnchainKit及其依赖项作为依赖项安装。

# Yarn: 添加库
yarn add @coinbase/onchainkit

# 或

# 使用NPM
npm install @coinbase/onchainkit

# 使用PNPM
pnpm add @coinbase/onchainkit

# 使用BUN
bun add @coinbase/onchainkit

配置OnchainKitProvider

<OnchainKitProvider />组件为您的应用提供了与OnchainKit组件和实用工具交互所需的基本上下文。

将chain属性设置为您的目标链，并提供API密钥以访问嵌入式API。

'use client';
import { ReactNode } from 'react';
import { base } from 'viem/chains';
import { OnchainKitProvider } from '@coinbase/onchainkit';

type Props = { children: ReactNode };

function OnchainProviders({ children }: Props) {
  return (
    <OnchainKitProvider apiKey="YOUR_PUBLIC_API_KEY" chain={base}>
      <YourKit />
    </OnchainKitProvider>
  );
};

export default OnchainProviders;

从Coinbase开发者平台API获取API密钥。

配置WagmiProvider

OnchainKit的许多组件需要WagmiProvider来访问Wagmi实用工具。

如果您的应用程序已经包含了这些设置，可以跳过此步骤。

OnchainProviders.tsx

'use client';
import { ReactNode } from 'react';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; // [!code focus]
import { base } from 'viem/chains';
import { WagmiProvider } from 'wagmi'; // [!code focus]
import { wagmiConfig } from './wagmi'; // [!code focus]

type Props = { children: ReactNode };

const queryClient = new QueryClient(); // [!code focus]

function OnchainProviders({ children }: Props) {
  return (
    <WagmiProvider config={wagmiConfig}> // [!code focus]
      <QueryClientProvider client={queryClient}> // [!code focus]
        <OnchainKitProvider
          apiKey={YOUR_PUBLIC_API_KEY}
          chain={base}
        >
          {children} // [!code focus]
        </OnchainKitProvider>
      </QueryClientProvider> // [!code focus]
    </WagmiProvider> // [!code focus]
  );
}

export default OnchainProviders;

wagmi.ts

import { http, createConfig } from 'wagmi';
import { base } from 'wagmi/chains';
import { coinbaseWallet } from 'wagmi/connectors';

export const wagmiConfig = createConfig({
  chains: [base],
  multiInjectedProviderDiscovery: false,
  connectors: [
    coinbaseWallet({
      appName: 'yourAppName',
      preference: 'all',
      version: '4',
    }),
  ],
  ssr: true,
  transports: {
    [base.id]: http(),
  },
});

为组件添加样式

所有OnchainKit组件都预先配置了样式。

只需将以下代码放在应用程序入口点的顶部，即可使组件开箱即用。

import '@coinbase/onchainkit/styles.css';

对于tailwindcss用户，请参考Tailwindcss集成指南。

组件

显示ENS头像、认证徽章、ENS名称和账户地址。

<Identity
  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
>
  <Avatar>
    <Badge />
  </Avatar>
  <Name />
  <Address />
</Identity>

将您的网页转换为Frame

import { FrameMetadata } from '@coinbase/onchainkit/frame';

export default function HomePage() {
  return (
    ...
    <FrameMetadata
      buttons={[
        {
          label: '讲述故事',
        },
        {
          action: 'link',
          label: '链接到Google',
          target: 'https://www.google.com'
        },
        {
          action: 'post_redirect',
          label: '重定向到可爱的图片',
        },
      ]}
      image={{
       src: 'https://zizzamia.xyz/park-3.png',
       aspectRatio: '1:1'
      }}
      input={{
        text: '讲一个关于船的故事',
      }}
      postUrl="https://zizzamia.xyz/api/frame"
    />
    ...
  );
}

使用Connect Wallet创建或连接您的钱包，由Smart Wallet提供支持。

<Wallet>
  <ConnectWallet>
    <Avatar className="h-6 w-6" />
    <Name />
  </ConnectWallet>
  <WalletDropdown>
    <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
      <Avatar />
      <Name>
        <Badge />
      </Name>
      <Address />
      <EthBalance />
    </Identity>
    <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
      前往钱包仪表板
    </WalletDropdownLink>
    <WalletDropdownDisconnect />
  </WalletDropdown>
</Wallet>

使用getTokens搜索代币，并使用TokenSearch、TokenChip、TokenImage和TokenRow显示它们

const [filteredTokens, setFilteredTokens] = useState<Token[]>([]);

const handleChange = useCallback((value) => {
async function getData(value) {
const tokens: Token[] = await getTokens({ search: value }); // [!code focus]
setFilteredTokens(filteredTokens);
}
getData(value);
}, []);
...

<div className="flex flex-col gap-4 rounded-3xl bg-white p-4">
  <TokenSearch onChange={handleChange} delayMs={200} /> // [!code focus]
  {filteredTokens.length > 0 && (
    <div className="flex gap-2">
      {filteredTokens.map((token) => (
        <TokenChip key={token.name} token={token} onClick={handleSelect} /> // [!code focus]
      ))}
    </div>
  )}
  {filteredTokens.length > 0 ? (
    <div>
      <div className="text-body text-black">代币</div>
      <div>
        {filteredTokens.map((token) => (
          <TokenRow key={token.name} token={token} onClick={handleSelect} /> // [!code focus]
        ))}
      </div>
    </div>
  ) : (
    <div className="text-body text-black">未找到代币</div>
  )}
</div>

实用工具

如果你正在寻找基本的TypeScript实用工具，我们有许多现成的选项可供使用。

配置

isBase

框架

身份

交换

代币

钱包

Farcaster

getFarcasterUserAddress

XMTP

设计

我们所有的组件设计都是开源的。你可以访问Figma文件，将其用于你的链上项目。

<a href="https://www.figma.com/community/file/1370194397345450683"> Figma - 使用方法 <picture> <source media="(prefers-color-scheme: dark)" srcset="./site/docs/public/assets/onchainkit-figma-design-how-to-use.png"> <img alt="OnchainKit标志氛围" src="https://yellow-cdn.veclightyear.com/835a84d5/af8bcee4-0fdb-4353-b32a-d302cde47473.png" width="auto"> </picture> Figma - 组件 <picture> <source media="(prefers-color-scheme: dark)" srcset="./site/docs/public/assets/onchainkit-figma-design-components.png"> <img alt="OnchainKit标志氛围" src="https://yellow-cdn.veclightyear.com/835a84d5/4c0cc4f3-1276-4b11-baa1-9e4d0b3baa8b.png" width="auto"> </picture> </a>