Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@0xsequence/kit

Package Overview
Dependencies
Maintainers
1
Versions
126
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@0xsequence/kit

Core package for Sequence Kit

  • 0.0.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
603
increased by21.57%
Maintainers
1
Weekly downloads
 
Created
Source

Sequence Kit 🧰

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 👛 🖼️ 🪙
  • Fiat onramp 💵 💶 💴 💷

View the demo! 👀

Quick Start

Installing the Library

@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 ethers@5.7.2 viem 0xsequence
# or
pnpm install @0xsequence/kit @0xsequence/kit-connectors wagmi ethers@5.7.2 viem 0xsequence
# or
yarn add @0xsequence/kit @0xsequence/kit-connectors wagmi ethers@5.7.2 viem 0xsequence

Setting up the Library

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 MyPage from './components/MyPage'
import { KitProvider } from '@0xsequence/kit'
import { getDefaultConnectors } from '@0xsequence/kit-connectors'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
import { mainnet, polygon } from 'wagmi/chains'

function App() {
  const { chains, publicClient, webSocketPublicClient } = configureChains(
    [polygon, mainnet],
    [publicProvider()],
  )

  const connectors = getDefaultConnectors({
    chains,
    walletConnectProjectId: 'project_id',
    defaultChainId: 137
  })

  
  const config = createConfig({
    autoConnect: true,
    publicClient,
    webSocketPublicClient,
    connectors
  })

  return (
    <WagmiConfig client={client}>
      <KitProvider>
        <MyPage />
      </KitProvider>
    </WagmiConfig>
  );
}

Opening the Sign in Modal

Wallet selection is done through a modal which can be called programmatically.

import { useOpenConnectModal } from '@0xsequence/kit'
import { useDisconnect, useAccount, useSigner, useProvider } from 'wagmi'


const MyReactComponent = () => {
  const { setOpenConnectModal } = useOpenConnectModal()

  const { isConnected } = useAccount()

  const onClick = () => {
    setOpenConnectModal(true)
  }

  return (
    <>
      {!isConnected && (
        <button onClick={onClick}>
          Sign in
        </button>
      )}
    </>
  )
}

Hooks

useOpenConnectModal

Use the useOpenConnectModal to change to open or close the connection modal.

import { useOpenConnectModal } from '@0xsequence/kit'
// ...
  const { setOpenConnectModal } = useOpenConnectModal()
  setOpenConnectModal(true)

useTheme

Use the useTheme hook to get information about the current theme, such as light or dark, or set it to something else.

import { useTheme } from '@0xsequence/kit'
  const { theme, setTheme } = useTheme()

  setTheme('light')

Customization

The KitProvider wrapper can accept an optional config object.


  const kitConfig =  {
    defaultTheme: 'light',
    position: 'top-left',
    signIn: {
      logoUrlDarkMode: 'https://logo-dark-mode.svg',
      logoUrlLightMode: 'https://logo-light-mode.svg',
      projectName: 'my app',
      showEmailInput: true,
      miniAuthOptions: ['google', 'discord', 'facebook', 'apple'],
      authOptions: ['metamask', 'wallet-connect']
    };
  }

  <KitProvider config={kitConfig}>
    <App />
  <KitProvider>

Packages

PackageDescriptionDocs
@0xsequence/kitCore package for Sequence KitRead more
@0xsequence/kit-connectorsConnectors for sequence kit including popular web3 wallets and social loginsRead more
@0xsequence/kit-walletEmbedded wallets for viewing and sending coins and collectiblesRead more
@0xsequence/kit-checkoutCheckout modal with fiat onrampRead more
@0xsequence/kit-example-reactExample application showing sign in, wallet and checkoutRead more

Local Development

The React example can be used to test the library locally.

  1. pnpm install
  2. From the root folder, run pnpm watch to build the package in watch mode in one console.
  3. From the root folder, run pnpm start:react to run the react example in another console.

What to do next?

Now that the core package is installed, you can install the embedded wallet or take a look at the checkout.

LICENSE

Apache-2.0

Copyright (c) 2017-present Horizon Blockchain Games Inc. / https://horizon.io

Keywords

FAQs

Package last updated on 13 Sep 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc