React SDK

The React SDK makes it easy to integrate cede.store into your dApps. You can easily find it on npm: @cedelabs/react-sdk (opens in a new tab).

Install

npm install @cedelabs/react-sdk

Featured

The @cedelabs/react-sdk is a comprehensive React SDK designed to streamline the integration of cede.store into your decentralized applications (dApps). With a range of powerful features and hooks, this SDK simplifies the process of interacting with the cede.store extension.

Getting Started

The CedeProviders provider is an essential component that ensures the smooth functioning of the SDK. It acts as the core provider for the cede.store extension, enabling the SDK's features to operate cohesively.

import { CedeProviders } from "@cedelabs/react-sdk";
 
function App() {
  return <CedeProviders>{/* Your dApp */}</CedeProviders>;
}

Authentication

Effortlessly handle user authentication within your dApp using the useLogin hook.

import { useLogin } from "@cedelabs/react-sdk";
 
function Header() {}
  const { handleLogin, isLoggedIn } = useLogin()
 
  return (
    <>
      {/* We use `onboard` so if the user hasn't configured the extension yet, we open the onboarding page */}
      {!isLoggedIn && <button onClick={() => handleLogin({onboard: true})}>Login</button>}
    </>
  )
}

hook: useLogin
properties:

{
  onSuccess?: () => void;
}

return:

{
  handleLogin: (options: { onboard: boolean; silent?: boolean; callbackUrl?: string; }) => VaultItem[],
  isLoading: boolean,
  isError: boolean,
  checkAutoLogin: () => boolean,
  isLoggedIn: boolean,
}

see VaultItem and Fast onboarding for details.

Vault Operations

Simplify vault-related operations in your dApp using the useVaults hook.

import { useVaults } from "@cedelabs/react-sdk";
 
function Header() {}
  const {
    refetchVaults,
    areVaultsLoading,
    activeVault,
    vaults,
    vaultsById
  } = useVaults()
 
  ...
}

hook: useVaults
return:

{
  refetchVaults: () => void,
  areVaultsLoading: boolean,
  activeVault: VaultItem,
  vaults: VaultItems[],
  vaultsById: Record<string, VaultItem>,
}

Background Handling

This SDK has hooks for basic methods, but some methods in the Provider API which don't have their own hooks are available through the backgroundHandler object.

import { useBackgroundHandler, useVaults } from "@cedelabs/react-sdk";
 
function Header() {}
  const { backgroundHandler } = useBackgroundHandler();
  const { activeVault } = useVaults()
 
  useEffect(() => {
    (async () => {
      const balances = await backgroundHandler.balances({ vaultId: activeVault.id });
      console.log(balances);
    })();
  }, [backgroundHandler]);
 
  ...
}

hook: useBackgroundHandler
properties:

{
  onProviderNotFound?: () => void;
}

return:

{
  backgroundHandler: Proxy<CedeProvider>,
}

Provider Events

Utilize the useProviderEvents hook to subscribe to essential events and updates from the cede.store extension, ensuring your dApp stays synchronized with changes.

import { useProviderEvents } from "@cedelabs/react-sdk";
 
function Header() {}
  useProviderEvents({
    onUnlock: () => {
      console.log('Unlocked');
    },
    onLock: () => {
      console.log('Locked');
    },
    onAccountsChanged: (vaultsPreview) => {
      console.log(vaultsPreview);
    },
  })
 
  ...
}

hook: useProviderEvents
properties:

{
  onUnlock?: () => void;
  onLock?: () => void;
  onAccountsChanged?: (vaultsPreview: VaultItem[]) => void;
}

return void.

Account Management

Efficiently manage user accounts with the useAccounts hook, providing access to account-related information and functionalities.

import { useAccounts } from "@cedelabs/react-sdk";
 
function Header() {}
  const {
    accounts,
    droplistAccounts,
    accountsByIds,
    accountsIds,
    areAccountsLoading
  } = useAccounts();
 
  ...
}

hook: useAccounts
return:

{
  accounts: {
    id: AccountId;
    status: ConnectionStatus;
    accountName: string;
    exchangeId: string;
    permissions: ApiPermissions[];
    settings?: AccountSettings;
    isOauth?: boolean;
    isFastApi?: boolean;
  }[],
  droplistAccounts: {
    label: string,
    value: string,
    img: string,
    cexValue: string,
    permissions: ApiPermissions[],
    isDisabled: boolean,
  }[],
  accountsByIds: Record<string, PublicAccount>,
  accountsIds: string[],
  areAccountsLoading: boolean
}

see ConnectionStatus, ApiPermissions, PublicAccount for details.

Prices

Access real-time price data effortlessly with the usePrices hook. Integrate live pricing information into your dApp.

import { usePrices } from "@cedelabs/react-sdk";
 
function Header() {}
  const prices = usePrices()
  console.log(prices['ETH'])
 
  ...
}

hook: usePrices
return:

Record<TokenSymbol, number>

Fast Integration Introduction