跳至主要内容

连接按钮

OneConnectButton 组件提供了一个即插即用的钱包连接 UI，支持邮箱、社交登录和 passkey 认证。它会为每位用户创建一个带有账户抽象的智能钱包。

仅限 Web

OneConnectButton 及其预设变体仅在 Web 端可用。它们不会从 React Native 入口导出。详见移动端与桌面端了解平台详情。

快速开始​

import { OneConnectButton } from '@one_deploy/sdk';

function App() {
  return (
    <OneConnectButton
      onConnect={(wallet) => {
        console.log('Connected:', wallet.address);
      }}
    />
  );
}

OneConnectButtonProps​

interface OneConnectButtonProps {
  /** 要显示的认证方式。默认显示所有可用方式。 */
  authMethods?: AuthMethod[];

  /** 用户成功连接钱包时触发的回调。 */
  onConnect?: (wallet: ConnectedWallet) => void;

  /** 用户断开连接时触发的回调。 */
  onDisconnect?: () => void;

  /** 认证或连接出错时触发的回调。 */
  onError?: (error: OneSDKError) => void;

  /** 智能钱包的链 ID。默认为 CHAIN_IDS.BASE。 */
  chainId?: number;

  /** 按钮的自定义标签文本。默认为 "Connect Wallet"。 */
  label?: string;

  /** 视觉主题变体。 */
  theme?: 'light' | 'dark' | 'auto';

  /** 应用于根元素的额外 CSS 类名。 */
  className?: string;

  /** 应用于根元素的内联样式。 */
  style?: React.CSSProperties;
}

type AuthMethod = 'email' | 'google' | 'apple' | 'discord' | 'passkey';

interface ConnectedWallet {
  address: string;
  type: 'smart';
  chainId: number;
  authMethod: AuthMethod;
}

认证方式​

authMethods 属性控制显示哪些登录选项。默认情况下会显示所有方式。

所有方式（默认）​

import { OneConnectButton } from '@one_deploy/sdk';

function ConnectAll() {
  return (
    <OneConnectButton
      authMethods={['email', 'google', 'apple', 'discord', 'passkey']}
      onConnect={(wallet) => console.log(wallet.address)}
    />
  );
}

仅邮箱​

import { OneConnectButton } from '@one_deploy/sdk';

function ConnectEmailOnly() {
  return (
    <OneConnectButton
      authMethods={['email']}
      label="Sign in with Email"
      onConnect={(wallet) => console.log(wallet.address)}
    />
  );
}

仅社交登录​

import { OneConnectButton } from '@one_deploy/sdk';

function ConnectSocial() {
  return (
    <OneConnectButton
      authMethods={['google', 'apple', 'discord']}
      label="Continue with Social"
      onConnect={(wallet) => console.log(wallet.address)}
    />
  );
}

Passkey 认证​

Passkey 使用生物识别或设备 PIN 提供无密码认证。此方式会创建一个绑定到用户设备凭据的智能钱包。

import { OneConnectButton } from '@one_deploy/sdk';

function ConnectPasskey() {
  return (
    <OneConnectButton
      authMethods={['passkey']}
      label="Sign in with Passkey"
      onConnect={(wallet) => {
        console.log('Passkey wallet:', wallet.address);
        console.log('Auth method:', wallet.authMethod); // 'passkey'
      }}
    />
  );
}

预设变体​

SDK 为常见用例提供了两种预设变体。

OneConnectButtonSimple​

一个极简的连接按钮，仅显示主要认证方式（默认为邮箱），布局紧凑。

import { OneConnectButtonSimple } from '@one_deploy/sdk';

function SimpleConnect() {
  return (
    <OneConnectButtonSimple
      onConnect={(wallet) => console.log('Connected:', wallet.address)}
      onDisconnect={() => console.log('Disconnected')}
    />
  );
}

OneConnectButtonFull​

一个功能完整的连接按钮，在展开的弹窗中显示所有认证方式，连接后展示钱包详情。

import { OneConnectButtonFull } from '@one_deploy/sdk';

function FullConnect() {
  return (
    <OneConnectButtonFull
      chainId={CHAIN_IDS.BASE}
      theme="dark"
      onConnect={(wallet) => {
        console.log('Address:', wallet.address);
        console.log('Chain:', wallet.chainId);
        console.log('Method:', wallet.authMethod);
      }}
      onError={(error) => {
        console.error('Connect failed:', error.message);
      }}
    />
  );
}

账户抽象​

通过 OneConnectButton 创建的每个钱包都是带有账户抽象 (ERC-4337) 的智能钱包。这意味着：

  • 用户无需管理私钥或助记词。
  • Gas 费用可以由你的项目赞助（参见钱包概览）。
  • 原生支持批量交易。
  • 如已配置，可使用社交恢复功能。
import { OneConnectButton, useOneClient } from '@one_deploy/sdk';

function AppWithConnect() {
  const { engineClient } = useOneClient();

  const handleConnect = async (wallet: ConnectedWallet) => {
    // 智能钱包已准备好进行无 Gas 交易
    const tx = await engineClient.sendTransaction({
      fromAddress: wallet.address,
      toAddress: '0xRecipient...',
      chainId: wallet.chainId,
      value: '0.01',
      currency: 'ETH',
    });

    console.log('Gasless tx:', tx.transactionHash);
  };

  return <OneConnectButton onConnect={handleConnect} />;
}

处理连接状态​

import { useState } from 'react';
import { OneConnectButton } from '@one_deploy/sdk';
import type { ConnectedWallet } from '@one_deploy/sdk';

function WalletStatus() {
  const [wallet, setWallet] = useState<ConnectedWallet | null>(null);

  if (wallet) {
    return (
      <div>
        <p>Connected: {wallet.address}</p>
        <p>Chain: {wallet.chainId}</p>
        <p>Auth: {wallet.authMethod}</p>
      </div>
    );
  }

  return (
    <OneConnectButton
      onConnect={(w) => setWallet(w)}
      onDisconnect={() => setWallet(null)}
      onError={(err) => console.error(err.code, err.message)}
    />
  );
}

自定义外观​

import { OneConnectButton } from '@one_deploy/sdk';

function StyledConnect() {
  return (
    <OneConnectButton
      label="Get Started"
      theme="dark"
      className="my-connect-btn"
      style={{
        borderRadius: '12px',
        fontWeight: 600,
      }}
      authMethods={['email', 'google', 'passkey']}
      onConnect={(wallet) => console.log(wallet)}
    />
  );
}

下一步​