Skip to main content
You can add support for Sophon Account in your React application by using the @sophon-labs/account-react package.

​
Installation

# Sophon Library
npm install @sophon-labs/account-react

​
Usage

Before anything, you need to wrap your application with SophonContextProvider, that will store context information about the account and walletClient connection. 
'use client';

import { DataScopes } from '@sophon-labs/account-core';
import {
  SophonContextProvider,
  SophonWagmiConnector,
} from '@sophon-labs/account-react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { type ReactNode, useState } from 'react';
import { type State, WagmiProvider } from 'wagmi';
import { getWagmiConfig } from '../lib/wagmi';

export default function Web3ModalProvider({
  children,
  initialState,
}: {
  children: ReactNode;
  initialState?: State;
}) {
  const [config] = useState(() => getWagmiConfig());
  const [queryClient] = useState(() => new QueryClient());
  return (
    <SophonContextProvider
      network="testnet"
      partnerId="123b216c-678e-4611-af9a-2d5b7b061258"
      dataScopes={[DataScopes.email]}
    >
      <WagmiProvider config={config} initialState={initialState}>
        <QueryClientProvider client={queryClient}>
          <SophonWagmiConnector>{children}</SophonWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </SophonContextProvider>
  );
}
With that ready, you can now use our hooks to interact with Sophon. 
import { useSophonAccount } from "@sophon-labs/account-react";

export default function YourComponent() {
  const { connect, account, disconnect } = useSophonAccount();
  // ...
}
And you can use any wagmi hook to interact with the wallet as well.

React Example

You can check an example of implementing React Native with Sophon Account.