Smart Accounts Quickstart

Seemlessly onboard users to their Smart Account

To use Halliday Smart Accounts, you will need to install the @halliday-sdk/accounts package. This package lists react and react-dom as peer dependencies, so make sure you have these installed in your root project:

npm install @halliday-sdk/accounts react^18 react-dom^18
yarn add @halliday-sdk/accounts react^18 react-dom^18

You will also need a Halliday API Key and a Privy API Key to enable social login to access your Halliday Smart Account. Please visit the Halliday Dashboard to generate your API key, and reach out to us at [email protected] to receive your Privy API key if you do not have one.


Step 1: Set up your Halliday Smart Account Client

Halliday has partnered with Privy to enable access to your Halliday Smart Accounts through a variety of social login methods, including email, Google/Twitter/etc., passkeys, connecting with Metamask, and more. Our smart accounts are fully non-custodial, which means that Halliday cannot directly access your users' funds in their smart account. To integrate social login, simply wrap all your components like so:

import React from "react";
import { HallidayPrivyProvider } from "@halliday-sdk/accounts";
import type { PrivyProviderConfig, HallidayConfig, BlockchainType, HallidayPrivyProviderConfig } from "@halliday-sdk/accounts";


function App() {
  const hallidayConfig: HallidayConfig = {
    hallidayPublicApiKey: "YOUR_HALLIDAY_API_KEY",
    blockchainType: BlockchainType.SEPOLIA,
    useSandbox: true
  }; 
  
  // Please refer to https://docs.privy.io/reference/sdk/react-auth/interfaces/PrivyClientConfig to configure your privy CSS!
  const authConfig: PrivyProviderConfig = {
    privyAppId: "YOUR_PRIVY_APP_ID",  // contact [email protected] to get your Privy App Id!
    privyConfig: {
      appearance: {
        theme: "light",
        accentColor: "#676FFF",
        logo: "YOUR_LOGO_URL"
      },
      loginMethods: ["email", "wallet", "google", "twitter"],
    },
  };
  
  const config: HallidayPrivyProviderConfig = {
    hallidayConfig,
    authConfig,
  };
  
  return (
    <HallidayPrivyProvider config={config}>
    	<YourChildComponent />		// wrap your components under HallidayPrivyProvider!
    </HallidayPrivyProvider>
  );
}

export default App;


Step 2: Use the useHallidaySmartAccountWithPrivySigner() Hook

In any of your child components wrapped under HallidayPrivyProvider, you will be able to access the Halliday Smart Account client and all its functions by calling the useHallidaySmartAccountWithPrivySigner() hook, as shown below:

import React, { useEffect, useState } from "react";
import { useHallidaySmartAccountWithPrivySigner, usePrivy } from "@halliday-sdk/accounts";

export default function YourChildComponent() {
  const { ready, login, authenticated, logout } = usePrivy();
  const hallidayClient = useHallidaySmartAccountWithPrivySigner();
  
  // Return a button for login and log out
  if (!hallidayClient) {
    return ready ? (
      <div>
        <button disabled={authenticated} onClick={login}>
          Log In
        </button>
        <button disabled={!authenticated} onClick={logout}
          Log Out
        </button>
      </div>
    ) : (
      <div>
        Loading Halliday and Privy ... 
      </div>
    )
  }
}

After the user is authenticated via social login, they will be able to access their smart account to send transactions. Please refer to Social Login with Privy for more details, and the Javascript SDK for all of the functions the Halliday Smart Account Client supports.