@embarky/react

@embarky/react

@embarky/react is a React library designed to facilitate interactions with the Embarky platform, providing a simple API for user authentication and data management.,

Check out our demo!

Installation

You can install the package using npm or yarn:

npm install @embarky/react

or

yarn add @embarky/react

Usage

1. Setup

To use @embarky/react, wrap your application in the EmbarkyProvider component. This component requires a config.

import React from 'react';
import { EmbarkyProvider } from '@embarky/react';
import {embarkyConfig } from './embarky.config.ts'
const App = () => {
  return (
    <EmbarkyProvider config={embarkyConfig}>
      {/* Your application components go here */}
    </EmbarkyProvider>
  );
};

export default App;

// embarky.config.ts

import { bsc, mainnet } from 'viem/chains'

const config = {
  appId: <YOUR_APP_ID>
  theme: 'dark'
  appName:  <YOUR_APP_NAME>
  appLogo: <YOUR_APP_LOGO>
  supportedChains: [bsc, mainnet],
  allowMethods: ['farcaster', 'twitter', 'google'],
  allowWallets: [
    'metaMask',
    'tomo',
    'coinbase',
  ],
}

export default config

more details please read 'src/config/types'

// src/config/types
import { Chain } from 'viem/chains';
import { Account } from '@embarky/core-sdk';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { PresetWallet } from '@suiet/wallet-kit';

export interface EmbarkyConfig {
  appId: string;
  theme: 'dark' | 'light';
  supportedChains: Chain[];
  allowMethods: AllowMethods[];
  allowWallets: AllowWallet[];
  farcaster?: AuthKitConfig;
  appName?: string;
  appLogo?: string;
  solanaConfig?: {
    network?: WalletAdapterNetwork;
  };
  errorHandler?: ({ type, code, message }: ErrorHandlerParams) => void;
}

export interface EmbarkyContextType {
  userAccount: Account | null;
  setUserAccount: (account: Account | null) => void;
  updateUserAccount: () => Promise<any>;
  deleteAccount: () => void;
  linkWallet: () => void;
  getEmbeddedWallet: () => Promise<any>;
  connectWallet: () => void;
  exportWallet: () => Promise<any>;
  login: () => void;
  logout: () => void;
}

export interface Account {
  did: string;
  auth_secret_share: string;
  backup_secret_share: string;
  wallets: Wallet[];
  socials: Social[];
}

export interface Social {
  social_subject: string;
  social_name: string;
  email?: string;
  social_type: 'google' | 'warpcast' | 'twitter';
  social_username: string;
}

export interface Wallet {
  wallet_address: string;
  chain_id: string;
  wallet_client: string;
  is_linked: boolean;
  is_active: boolean;
  verified_at?: number;
}


export interface AuthKitConfig {
  relay?: string;
  domain?: string;
  siweUri?: string;
  rpcUrl?: string;
  redirectUrl?: string;
  version?: string;
}
export type AllowMethods =
  | 'google'
  | 'twitter'
  | 'farcaster'

export type AllowNetworks = 'evm' | 'aptos' | 'solana' | 'sui';

export type AllowWallet =
  | 'metaMask'
  | 'walletConnect'
  | 'tomo'
  | 'coin98'
  | 'okx'
  | 'aptos-petra'
  | 'aptos-nightly'
  | 'solana-phantom'
  | PresetWallet[keyof PresetWallet];

export interface ErrorHandlerParams {
  type: string;
  code: number;
  message: string;
}

2. Login with Embarky

You can use the useEmbarky hook to manage authentication. This hook provides methods for logging in and accessing user information.

import React from 'react';
import { useEmbarky } from '@embarky/react';

const App = () => {
  const { login, userAccount, authenticated, Logout } = useEmbarky();
  const handleLogin = async () => {
    try {
      await login();
      console.log('Login successful');
    } catch (error) {
      console.error('Login failed', error);
    }
  };
  const handleLogout = async () => {
    try {
      await Logout();
      console.log('Logout successful');
    } catch (error) {
      console.error('Login failed', error);
    }
  };

  return <div>
       {authenticated ? <button onClick={handleLogout}>Logout</button> : <button onClick={handleLogin}>Login</button>} 
       { authenticated ? <div>userAccount: {{ JSON.string(userAccount) }}</div> : null}
  </div>;
};

userAccount will be like:

{
  "did": "did:embarky:mvSGfOk24qN2yjLqAbQLj3tP4Txxxxxxxxxxxxxx=",
  "wallets": [
    {
      "wallet_address": "0x411a78fA2Ad444357E631cA589E1967cxxxxxxx",
      "chain_name": "",
      "chain_id": "1",
      "chain_network": "",
      "wallet_client": "embarky",
      "is_linked": false,
      "is_active": true,
      "verified_at": 1736160642,
      "message": ""
    }
  ],
  "socials": [
    {
      "social_type": "google",
      "social_subject": "7umbRQiloNQQh4ANcumiCxxxxx",
      "social_name": "GOOGLE NAME",
      "social_username": "GOOGLE USERNAME ",
      "email": "[e-mail]",
      "phone_number": "",
      "verified_at": 1736160642
    }
  ]
}

The did is the only key for identifying a user. One did can be bound to multiple wallet addresses and social accounts, such as Google, Twitter, and Farcaster.

Connect with Aptos wallet and use the useAptos hook

// embarky.config.ts

const config = {
  allowWallets: [
    'aptos-petra', 'aptos-nightly'
  ],
  // ...other options
}

export default config

import { useAptos } from '@embarky/react'

const {
    network,
    client,
    account,
    wallet,
    connected,
    isSendableNetwork,
    isMainnet,
    signTransaction,
    signMessage,
    signMessageAndVerify,
    submitTransaction,
    signAndSubmitTransaction,
    generateTransaction,
    generateMultiAgentTransaction,
    simulateTransaction,
    batchSubmitTransaction,
    simulateMultiAgentTransaction,
 } = useAptos()

Using with Solana wallet and useAptos usehooks

// embarky.config.ts

const config = {
  allowWallets: [
    'aptos-petra', 'aptos-nightly'
  ],
  // ...other options
}

export default config

import { useSolana } from '@embarky/react'

const {
    wallet,
    wallets,
    standardWallets,
    address,
    publicKey,
    connection,
    signTransaction,
    sendTransaction,
    signMessage,
    signAllTransactions,
    signIn,
 } = useSolana()