Quick Start
Let's integrate Human Wallet in less than 5 minutes. You will learn how to embed Human Wallet login options like this:
The login button can be styled in any way and need not even say login. All that matters is that they call the correct method on humanWallet
.
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:
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
- Silk SDK installed:
npm install @silk-wallet/silk-wallet-sdk
- A web3 provider like ethers.js:
npm install ethers@^5.7.2
Embed Human Wallet​
- For New Devs
- For Web3 Devs
Just getting started with Web3 development?​
You can easily embed Human Wallet to your site following standard practices that minimizes bugs or performance issues.
Human Wallet exposes an EIP-1193-compliant interface, so you can use it just as you would use MetaMask, one of the most common Web3 wallet services. The only difference is that Human Wallet must be initialized.
The following code initializes Human Wallet, presents the login modal to the user, and gets the user's wallet addresses.
import { initSilk } from "@silk-wallet/silk-wallet-sdk"
// Open the Human Wallet login modal. humanWallet.login() will throw if the user does not log in
try {
await humanWallet.login()
} catch (error) {
console.error(error)
}
// Optional: Get the user's wallet addresses
const accounts = await humanWallet.request({ method: 'eth_requestAccounts' })
If you want to customize this login flow with additional wallet options for web3-native users, you may choose to use the loginSelector
method instead of the login
method. This will let you set the options if a user chooses to sign in with a web3 wallet instead. See the /guides/methods.md section for more details on how to do so.
Know how to use window.ethereum and wagmi?​
If you have a codebase that already uses window.ethereum
or wagmi, you can still integrate Human Wallet in a couple lines.
First, you need to initialize Human Wallet and have the user login. Then assign silk
to window.ethereum
.
If you are using wagmi, Human Wallet will work with the injected connector. Just assign silk
to window.ethereum
, have the user log in, and then use the wagmi hooks as you would with any other wallet.
import { initSilk } from "@silk-wallet/silk-wallet-sdk"
// Initialize Human Wallet
const humanWallet = initSilk({ useStaging: false }) // set to true for the staging version of human wallet
window.ethereum = silk
// wagmi's InjectedConnector will now connect to the Human Wallet provider.
// Remember to have the user log in. If the user does not log in,
// calls to window.ethereum.request() will error out.
// silk.login() will throw if the user does not log in.
try {
await window.ethereum.login()
} catch (error) {
console.log(error)
}
If you want to give the user other wallet options in the Human Wallet signup screen, use the loginSelector
method instead of the login
method. See the /guides/methods.md section for details.
Human Wallet Demo App​
We created a demo app that showcases all of Human Wallet's functionality, so you can easily see how these methods behave. Go to our demo-app repository to see and copy the source code or clone the repo to run the app locally.
Human Wallet + Next.js + Viem​
Check out the repo below for this template app using Human Wallet and Viem: https://silk-template.vercel.app/
Human Wallet + Next.js + Wagmi​
This app created by Axé DAO is an example of using Human Wallet wrapped into a Wagmi Connector. The connector code below is going to be shipped with the Human Wallet SDK in the future.
Example wagmi config with Human Wallet Connector​
const wagmiConfig: Config = createConfig({
chains: [optimism, gnosis, sepolia, localhost],
connectors: [silk({ config: { appName: 'My App', darkMode: true } })],
transports: {
[optimism.id]: http(ENV.optimismProviderUrl),
[gnosis.id]: http(ENV.gnosisProviderUrl),
[sepolia.id]: http(ENV.sepoliaProviderUrl),
[localhost.id]: http('http://127.0.0.1:8545'),
},
ssr: true,
});
This is the preferred setup, if you want to embed Human Wallet into your app and simply rely on wagmi hooks for all blockchain interaction.
Note, however, that the connector is a standard wagmi interface and does not expose the Human Wallet instance and its added features like Request Email or Request SBT. To access these you can instantiate Human Wallet anywhere in your app as a secondary instance using the initSilk
function described above.
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({ config: { appName: "My App", darkMode: true } }),
});
} 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>
);
}
Questions or Trouble Integrating?
Please join our Developer Discord to get in touch with a support representative.