Getting Started

Welcome to Sophon Account SDK

The Sophon Account SDK is a comprehensive SDK built on top of dynamic, designed to provide a seamless and secure way to manage user accounts and authentication in your Web3 applications.

Receiving a Partner ID

Local development does not require a separate partner ID, you can use the default one 123b216c-678e-4611-af9a-2d5b7b061258. For production, you will need to receive a partner ID from us. Please reach out to us to get a partner ID via dropping a mail to product@sophon.xyz.

Key Features

  • Smart Wallet Management: Advanced wallet management with embedded and external wallet support
  • Unified Authentication: Seamless integration of Web2 and Web3 authentication methods
  • Developer-Friendly: Simple API and comprehensive documentation
  • Customizable UI: Flexible UI components that can be styled to match your application, when using the complete SDK

We offer two ways of integration with the Sophon Account:

  • EIP6963 - Simple integration with a single button to connect a wallet with your current system, no complexities, just import the connector and use it in your application.
  • ReactSDK - A complete SDK with possibility to customize the UI and add more features to your application. Requires a Partner ID to be set up.

Sophon Account via EIP6963

Quick Start

  1. Install the required packages:
pnpm add @sophon-labs/account-eip6963
  1. Import the connector and use it in your application:
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import "@sophon-labs/account-eip6963";

import { config } from "../wagmi";

export default function AppProviders({
  children,
}: {
  children: React.ReactNode;
}) {
  const client = new QueryClient();

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider
          appInfo={{
            appName: "Rainbowkit Demo",
            learnMoreUrl: "https://learnaboutcryptowallets.example",
          }}
        >
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Sophon Account via React SDK

Quick Start

  1. Install the required packages:
pnpm add @sophon-labs/account-react
  1. Set up the providers in your application:
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "@/lib/wagmi";
import { SophonContextProvider } from "@sophon-labs/account-react";
import { SophonWagmiConnector } from "@sophon-labs/account-wagmi";

export default function Providers({ children }: { children: React.ReactNode }) {
  const queryClient = new QueryClient();

  return (
    <SophonContextProvider partnerId="YOUR_PARTNER_ID">
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <SophonWagmiConnector>{children}</SophonWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </SophonContextProvider>
  );
}
  1. Use the Sophon Widget in your application:
import { SophonWidget } from "@sophon-labs/account-react";

export default function Home() {
  return (
    <div>
      <SophonWidget />
    </div>
  );
}

UI Components

The SDK provides several UI components that you can use individually or together:

  • SophonWidget: All-in-one component for authentication and wallet management
  • SophonConnectButton: Standalone button for connecting wallets
  • SophonUserProfile: Component for displaying user profile information
  • SophonWidgetNav: Navigation component with network picker and account field
  • SophonEmbeddedWidget: Signup/login flow and user profile component
  • SophonBridgeWidget: Bridge UI for cross-chain transactions

Next Steps