Skip to main content

Connect Button

The OneConnectButton component provides a drop-in wallet connection UI with support for email, social login, and passkey authentication. It creates a smart wallet with account abstraction for every user.

Web Only

OneConnectButton and its presets are available only on web. They are not exported from the React Native entry point. See Mobile & Desktop for platform details.

Quick Start​

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

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

OneConnectButtonProps​

interface OneConnectButtonProps {
  /** Authentication methods to display. Defaults to all available methods. */
  authMethods?: AuthMethod[];

  /** Callback fired when the user successfully connects a wallet. */
  onConnect?: (wallet: ConnectedWallet) => void;

  /** Callback fired when the user disconnects. */
  onDisconnect?: () => void;

  /** Callback fired on authentication or connection error. */
  onError?: (error: OneSDKError) => void;

  /** Chain ID for the smart wallet. Defaults to CHAIN_IDS.BASE. */
  chainId?: number;

  /** Custom label for the button. Defaults to "Connect Wallet". */
  label?: string;

  /** Visual theme variant. */
  theme?: 'light' | 'dark' | 'auto';

  /** Additional CSS class name applied to the root element. */
  className?: string;

  /** Inline styles applied to the root element. */
  style?: React.CSSProperties;
}

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

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

Authentication Methods​

The authMethods prop controls which sign-in options appear. By default, all methods are shown.

All Methods (Default)​

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

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

Email Only​

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

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

Social Login Only​

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 Authentication​

Passkeys provide passwordless authentication using biometrics or device PIN. This method creates a smart wallet bound to the user's device credential.

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'
      }}
    />
  );
}

Presets​

The SDK ships two preset variants for common use cases.

OneConnectButtonSimple​

A minimal connect button that shows only the primary auth method (email by default) with a compact layout.

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

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

OneConnectButtonFull​

A full-featured connect button that displays all authentication methods in an expanded modal with wallet details after connection.

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);
      }}
    />
  );
}

Account Abstraction​

Every wallet created through OneConnectButton is a smart wallet with account abstraction (ERC-4337). This means:

  • Users do not need to manage private keys or seed phrases.
  • Gas fees can be sponsored by your project (see Wallet Overview).
  • Batch transactions are supported natively.
  • Social recovery is available if configured.
import { OneConnectButton, useOneClient } from '@one_deploy/sdk';

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

  const handleConnect = async (wallet: ConnectedWallet) => {
    // The smart wallet is ready for gasless transactions
    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} />;
}

Handling Connection State​

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)}
    />
  );
}

Customizing Appearance​

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)}
    />
  );
}

Next Steps​