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 wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query @0xsequence/design-system
# or
pnpm install @0xsequence/kit wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query @0xsequence/design-system
# or
yarn add @0xsequence/kit wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query @0xsequence/design-system
React 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 Content from './components/Content'
import { KitProvider, getDefaultConnectors, getDefaultChains } from '@0xsequence/kit'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createConfig, http, WagmiProvider } from 'wagmi'
import { mainnet, polygon, Chain } from 'wagmi/chains'
import '@0xsequence/design-system/styles.css'
const projectAccessKey = '<your-project-access-key>'
const chains = getDefaultChains(/* optional array of chain ids to filter */)
const transports = {}
chains.forEach(chain => {
transports[chain.id] = http()
})
// Universal wallet configuration
const connectors = getDefaultConnectors({
projectAccessKey,
walletConnectProjectId: '<your-wallet-connect-id>',
defaultChainId: 137,
appName: 'Demo Dapp'
})
/*
// ...or for Embedded wallet configuration
const connectors = getDefaultWaasConnectors({
projectAccessKey,
walletConnectProjectId: '<your-wallet-connect-id>',
defaultChainId: 137,
appName: 'Demo Dapp',
waasConfigKey: '<your-waas-config-key>',
googleClientId,
appleClientId,
appleRedirectUrl
})
*/
const config = createConfig({
chains,
transports,
connectors
})
const queryClient = new QueryClient()
function App() {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<KitProvider>
<Content />
</KitProvider>
</QueryClientProvider>
</WagmiProvider>
)
}
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',
};
// limits the digital assets displayed on the assets summary screen
displayedAssets: [
{
contractAddress: ethers.ZeroAddress,
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-wallet | Embedded wallets for viewing and sending coins and collectibles | Read more |
@0xsequence/kit-checkout | Checkout modal with fiat onramp | Read more |
Application | Description | Docs |
---|---|---|
@0xsequence/kit-example-react | React example application showing sign in, wallet and checkout | Read more |
@0xsequence/kit-example-next | Next example application showing sign in, wallet and checkout with SSR | 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-wallet": "workspace:*",
pnpm install
- From the root folder, run
pnpm build
to build the packages OR optionally runpnpm dev
in a separate terminal to develop in watch mode. - From the root folder, run
pnpm dev:react
orpnpm dev:next
to run the examples.
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