Sequence Kit 🧰 is a library enabling developers to easily integrate web3 wallets in their app. It is based on wagmi and supports all wagmi features.
- Connect via social logins eg: facebook, google, discord, etc...! 🔐🪪
- Connect to popular web3 wallets eg: walletConnect, metamask ! 🦊 ⛓️
- Full-fledged embedded wallet for coins and collectibles 👛 🖼️ 🪙
View the demo! 👀
@0xsequence/kit is the core package. Any extra modules require this package to be installed first.
To install this package:
npm install @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
# or
pnpm install @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
# or
yarn add @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-queryReact apps must be wrapped by a Wagmi client and the KitWalletProvider components. It is important that the Wagmi wrapper comes before the Sequence Kit wrapper.
import MyPage from './components/MyPage'
import { KitProvider } from '@0xsequence/kit'
import { getDefaultConnectors } from '@0xsequence/kit-connectors'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createConfig, http, WagmiProvider } from 'wagmi'
import { mainnet, polygon, Chain } from 'wagmi/chains'
const queryClient = new QueryClient()
function App() {
const chains = [mainnet, polygon] as [Chain, ...Chain[]]
const projectAccessKey = 'xyz'
const connectors = getDefaultConnectors({
walletConnectProjectId: 'wallet-connect-id',
defaultChainId: 137,
appName: 'demo app',
projectAccessKey
})
const transports = {}
chains.forEach(chain => {
transports[chain.id] = http()
})
const config = createConfig({
transports,
connectors,
chains
})
return (
<WagmiConfig config={config}>
<QueryClientProvider client={queryClient}>
<KitProvider>
<MyPage />
</KitProvider>
</QueryClientProvider>
</WagmiConfig>
);
}
Wallet selection is done through a modal which can be called programmatically.
import { useOpenConnectModal } from '@0xsequence/kit'
import { useDisconnect, useAccount } from 'wagmi'
const MyReactComponent = () => {
const { setOpenConnectModal } = useOpenConnectModal()
const { isConnected } = useAccount()
const onClick = () => {
setOpenConnectModal(true)
}
return (
<>
{!isConnected && (
<button onClick={onClick}>
Sign in
</button>
)}
</>
)
}Use the useOpenConnectModal to change to open or close the connection modal.
import { useOpenConnectModal } from '@0xsequence/kit'
// ...
const { setOpenConnectModal } = useOpenConnectModal()
setOpenConnectModal(true)Use the useTheme hook to get information about the current theme, such as light or dark.
import { useTheme } from '@0xsequence/kit'
const { theme, setTheme } = useTheme()
setTheme('light')The KitProvider wrapper can accept an optional config object.
The settings are described in more detailed in the Sequence Kit documentation.
const kitConfig = {
defaultTheme: 'light',
position: 'top-left',
signIn: {
logoUrl: 'https://logo-dark-mode.svg',
projectName: 'my app',
showEmailInput: true,
socialAuthOptions: ['google', 'facebook', 'twitch', 'apple'],
walletAuthOptions: ['sequence', 'metamask', 'wallet-connect', 'coinbase-wallet'],
};
// limits the digital assets displayed on the assets summary screen
displayedAssets: [
{
contractAddress: ethers.constants.AddressZero,
chainId: 137,
},
{
contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
chainId: 137
}
],
}
<KitProvider config={kitConfig}>
<App />
<KitProvider>| Package | Description | Docs |
|---|---|---|
| @0xsequence/kit | Core package for Sequence Kit | Read more |
| @0xsequence/kit-connectors | Connectors for sequence kit including popular web3 wallets and social logins | Read more |
| @0xsequence/kit-wallet | Embedded wallets for viewing and sending coins and collectibles | Read more |
| @0xsequence/kit-checkout | Checkout modal with fiat onramp | Read more |
| @0xsequence/kit-example-react | Example application showing sign in, wallet and checkout | Read more |
The React example can be used to test the library locally.
- Replace the kit dependencies to the ones of the workspace in order to use hot reload.:
"@0xsequence/kit": "workspace:*",
"@0xsequence/kit-checkout": "workspace:*",
"@0xsequence/kit-connectors": "workspace:*",
"@0xsequence/kit-wallet": "workspace:*",pnpm install- From the root folder, run
pnpm watchto build the package in watch mode in one console. - From the root folder, run
pnpm start:reactto run the react example in another console.
Now that the core package is installed, you can install the embedded wallet or take a look at the checkout.
Apache-2.0
Copyright (c) 2017-present Horizon Blockchain Games Inc. / https://horizon.io