@embarky/react v0.0.7-28
@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/reactor
yarn add @embarky/reactUsage
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 configmore 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": "google@gmail.com",
"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 configimport { 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 configimport { useSolana } from '@embarky/react'
const {
wallet,
wallets,
standardWallets,
address,
publicKey,
connection,
signTransaction,
sendTransaction,
signMessage,
signAllTransactions,
signIn,
} = useSolana()12 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
6 months ago
6 months ago
6 months ago
8 months ago
6 months ago
8 months ago
8 months ago
9 months ago
9 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago