\n\n# Sequence Web SDK 🧰\n\nSequence Web SDK 🧰 is a library enabling developers to easily integrate web3 wallets in their app. It is based on [wagmi](https://wagmi.sh/) and supports all wagmi features.\n\n- Connect via social logins eg: facebook, google, discord, etc...! 🔐🪪\n- Connect to popular web3 wallets eg: walletConnect, metamask ! 🦊 ⛓️\n- Full-fledged embedded wallet for coins and collectibles 👛 🖼️ 🪙\n- Fiat onramp 💵 💶 💴 💷\n\nView the [demo](https://0xsequence.github.io/web-sdk)! 👀\n\n## Quick Start\n\n### Installing the Library\n\n`@0xsequence/react-connect` is the core package. Any extra modules require this package to be installed first.\nTo install this package:\n\n```bash\nnpm install @0xsequence/react-connect wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query\n# or\npnpm install @0xsequence/react-connect wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query\n# or\nyarn add @0xsequence/react-connect wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query\n```\n\n### Setting up the Library\n\n#### The 'easy' way\n\n- `createConfig(walletType, options)` method is used to create your initial config and prepare sensible defaults that can be overridden\n\n`walletType` is either 'waas' or 'universal'\n\n```ts\ninterface CreateConfigOptions {\n appName: string\n projectAccessKey: string\n chainIds?: number[]\n defaultChainId?: number\n disableAnalytics?: boolean\n defaultTheme?: Theme\n position?: ModalPosition\n signIn?: {\n logoUrl?: string\n projectName?: string\n useMock?: boolean\n }\n displayedAssets?: Array<{\n contractAddress: string\n chainId: number\n }>\n ethAuth?: EthAuthSettings\n\n wagmiConfig?: WagmiConfig // optional wagmiConfig overrides\n\n waasConfigKey: string\n enableConfirmationModal?: boolean\n\n walletConnect?:\n | boolean\n | {\n projectId: string\n }\n\n google?:\n | boolean\n | {\n clientId: string\n }\n\n apple?:\n | boolean\n | {\n clientId: string\n rediretURI: string\n }\n\n email?:\n | boolean\n | {\n legacyEmailAuth?: boolean\n }\n}\n```\n\n```js\nimport { SequenceConnect, createConfig } from '@0xsequence/react-connect'\n\nimport Content from './components/Content'\n\nconst config = createConfig('waas', {\n projectAccessKey: '',\n chainIds: [1, 137],\n defaultChainId: 1,\n appName: 'Demo Dapp',\n waasConfigKey: '',\n\n google: {\n clientId: ''\n },\n\n apple: {\n clientId: '',\n redirectUrl: '...'\n },\n\n walletConnect: {\n projectId: ''\n }\n})\n\nfunction App() {\n return (\n \n \n \n )\n}\n```\n\n#### Need more customization?\n\nReact apps must be wrapped by a Wagmi client and the SequenceWalletProvider components. It is important that the Wagmi wrapper comes before the Sequence Web SDK wrapper.\n\n```js\nimport Content from './components/Content'\nimport { SequenceConnectProvider, getDefaultConnectors, getDefaultChains } from '@0xsequence/react-connect'\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query'\nimport { createConfig, http, WagmiProvider } from 'wagmi'\nimport { mainnet, polygon, Chain } from 'wagmi/chains'\n\nconst projectAccessKey = 'xyz'\n\nconst chains = getDefaultChains(/* optional array of chain ids to filter */)\n\nconst transports = {}\n\nchains.forEach(chain => {\n transports[chain.id] = http()\n})\n\nconst connectors = getDefaultConnectors('universal', {\n projectAccessKey,\n appName: 'demo app',\n defaultChainId: 137,\n\n walletConnect: {\n projectId: ''\n }\n})\n\nconst config = createConfig({\n chains,\n transports,\n connectors\n})\n\nconst queryClient = new QueryClient()\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n )\n}\n```\n\n### Opening the Sign in Modal\n\n
\n \n
\n\nWallet selection is done through a modal which can be called programmatically.\n\n```js\nimport { useOpenConnectModal } from '@0xsequence/react-connect'\nimport { useDisconnect, useAccount } from 'wagmi'\n\nconst MyReactComponent = () => {\n const { setOpenConnectModal } = useOpenConnectModal()\n\n const { isConnected } = useAccount()\n\n const onClick = () => {\n setOpenConnectModal(true)\n }\n\n return <>{!isConnected && }\n}\n```\n\n## Hooks\n\n### useOpenConnectModal\n\nUse the `useOpenConnectModal` to change to open or close the connection modal.\n\n```js\nimport { useOpenConnectModal } from '@0xsequence/react-connect'\n// ...\nconst { setOpenConnectModal } = useOpenConnectModal()\nsetOpenConnectModal(true)\n```\n\n### useTheme\n\nUse the `useTheme` hook to get information about the current theme, such as light or dark, or set it to something else.\n\n```js\nimport { useTheme } from '@0xsequence/react-connect'\nconst { theme, setTheme } = useTheme()\n\nsetTheme('light')\n```\n\n## Customization\n\nThe `SequenceConnectProvider` wrapper can accept an optional config object.\n\nThe settings are described in more detailed in the Sequence Web SDK documentation.\n\n```js\n\n const connectConfig = {\n defaultTheme: 'light',\n position: 'top-left',\n signIn: {\n logoUrl: 'https://logo-dark-mode.svg',\n projectName: 'my app',\n },\n // limits the digital assets displayed on the assets summary screen\n displayedAssets: [\n {\n contractAddress: ethers.ZeroAddress,\n chainId: 137,\n },\n {\n contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',\n chainId: 137\n }\n ],\n readOnlyNetworks: [10],\n }\n\n \n \n \n```\n\n## Packages\n\n| Package | Description | Docs |\n| ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| [@0xsequence/react-connect](https://github.com/0xsequence/web-sdk/tree/master/packages/react-connect) | Core package for Sequence Web SDK | [Read more](https://github.com/0xsequence/web-sdk/blob/master/packages/react-connect/README.md) |\n| [@0xsequence/react-wallet](https://github.com/0xsequence/web-sdk/tree/master/packages/react-wallet) | Embedded wallets for viewing and sending coins and collectibles | [Read more](https://github.com/0xsequence/web-sdk/blob/master/packages/react-wallet/README.md) |\n| [@0xsequence/react-checkout](https://github.com/0xsequence/web-sdk/tree/master/packages/react-checkout) | Checkout modal with fiat onramp | [Read more](https://github.com/0xsequence/web-sdk/blob/master/packages/react-checkout/README.md) |\n| [example-react](https://github.com/0xsequence/web-sdk/tree/master/examples/react) | Example application showing sign in, wallet and checkout | [Read more](https://github.com/0xsequence/web-sdk/blob/master/examples/react/README.md) |\n\n## Local Development\n\n
\n \n
\n\nThe React example can be used to test the library locally.\n\n1. `pnpm install`\n2. From the root folder, run `pnpm build` to build the packages.\n3. From the root folder, run `pnpm dev:react` or `pnpm dev:next` to run the examples.\n\n## What to do next?\n\nNow that the core package is installed, you can install the [embedded wallet](https://github.com/0xsequence/web-sdk/tree/master/packages/react-wallet) or take a look at the [checkout](https://github.com/0xsequence/web-sdk/tree/master/packages/react-checkout).\n\n## LICENSE\n\nApache-2.0\n\nCopyright (c) 2017-present Horizon Blockchain Games Inc. / https://horizon.io\n","readmeFilename":"README.md","_rev":"1-eb8f59d335a97ef5fbe5940797bbfc7a"}
![](\"https://raw.githubusercontent.com/0xsequence/web-sdk/master/public/docs/kit-logo-in-one.png\"){kind=logo}
\n![](\"public/docs/sign-in-modal.png\")
\n![](\"public/docs/kit-demo.png\")
\n