Skip to main content

Quick Start

Let's integrate Human Wallet in less than 5 minutes. You will learn how to embed Human Wallet login options like this:

No wallet connected

The login button can be styled in any way and need not even say login. All that matters is that you call the correct method on window.silk.

Getting Started​

Get started by creating a new dApp.

Or clone the Human Wallet Demo App.

To see how the demo app looks, you can visit the published demo app.

What you'll need​

  • Node.js version 18.0 or above.
  • Silk SDK: 
    npm install @silk-wallet/silk-wallet-sdk
  • A web3 provider like ethers.js: 
    npm install ethers@^5.7.2

Basic Integration​

You can easily embed Human Wallet into your site using a single, provider-agnostic approach. Human Wallet exposes an EIP-1193-compliant interface via window.silk, so you can interact with it just as you would with MetaMask or other wallets.

import { initSilk } from "@silk-wallet/silk-wallet-sdk"

const initConfig = {
  config: {
    allowedSocials: ['google', 'twitter', 'discord', 'linkedin', 'apple', 'coinbase'],
    authenticationMethods: ['email', 'phone', 'social'],
    styles: { darkMode: true }
  },
  useStaging: true
}

useEffect(() => {
  // This will automatically set window.silk with all necessary methods.
  initSilk(initConfig)
}, [])

try {
  // Open the Human Wallet login modal
  const loginType = await window.silk.login();
  // loginType: 'human' | 'walletconnect' | 'injected' | null
  
  // Get the user's wallet addresses
  const accounts = await window.silk.request({ method: 'eth_requestAccounts' })
} catch (error) {
  console.error(error)
}

Auto-Connect on Page Refresh​

Human Wallet automatically reconnects users when they return to your app. Simply call eth_requestAccounts and it will restore their previous connection seamlessly.

// This will auto-connect if user was previously logged in
const accounts = await window.silk.request({ method: 'eth_requestAccounts' })

For more details on auto-connect functionality, see Auto-Connect in Methods.

Logout​

For simple logout (Human Wallet only):

await window.silk.logout();

When external wallets are enabled, the logout behavior depends on how the user logged in. See Logout and Session Management for complete details.

Events and Advanced Usage​

You can listen for wallet events like account changes and chain changes:

window.silk.on("accountsChanged", (accounts) => {
  console.log("Active account changed:", accounts[0]);
});

For complete method documentation, see the Methods page.

Human Wallet + Next.js + Wagmi​

If your dApp uses wagmi, you can integrate Human Wallet as a custom connector. This allows you to use all wagmi hooks and utilities with Human Wallet.

A great example is the Axé DAO dApp, Quilombo.

Note: When using wagmi, don't include 'wallet' in authenticationMethods. Instead, add separate connectors for each wallet type in your wagmi config.

import { createConfig, http } from 'wagmi';
import { injected, walletConnect } from 'wagmi/connectors';
import silk from '@/utils/silk.connector';
import { mainnet, sepolia, optimism } from 'wagmi/chains';

const wagmiConfig = createConfig({
  chains: [mainnet, optimism, sepolia],
  connectors: [
    silk(initSilkOptions),
    injected(), // For MetaMask and other injected wallets
    walletConnect({ projectId: '<YOUR_WALLETCONNECT_PROJECT_ID>' }),
  ],
  transports: {
    [mainnet.id]: http('<mainnet_rpc_url>'),
    [optimism.id]: http('<optimism_rpc_url>'),
    [sepolia.id]: http('<sepolia_rpc_url>'),
  },
});

Example: ConnectButton with wagmi's useConnect hook​

"use client";

import { useAccount, useConnect } from "wagmi";
import { sepolia } from "wagmi/chains";
import { UserRejectedRequestError } from "viem";
import silk from "@/utils/silk.connector";

export default function ConnectPanel() {
  const { connect, error, isError, connectors } = useConnect();
  const account = useAccount();

  const handleConnect = async () => {
    const silkConnector = connectors.find((connector) => connector.id === "silk");
    try {
      // There should already be a Human Wallet connector in the wagmi config which also
      // enables automatic reconnect on page refresh, but just in case, we can also create
      // the connector here.
      if (!silkConnector) {
        connect({
          chainId: sepolia.id,
          connector: silk({params: initSilkOptions}),
        });
      } else {
        connect({ chainId: sepolia.id, connector: silkConnector });
      }
    } catch (error) {
      console.error("Error connecting to Human Wallet:", error);
      if (error instanceof UserRejectedRequestError) console.log("User aborted the transaction");
    }
  };

  return (
    <div className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
      {!account.address ? (
        <button onClick={handleConnect}>Connect</button>
      ) : (
        <div className="flex items-center justify-center">Connected: {account.address}</div>
      )}
      {isError && error.message && <div className="text-red-500">{error.message}</div>}
    </div>
  );
}

Examples and Templates​

Details

Questions or Trouble Integrating? Please join our Developer Discord to get in touch with a support representative.