{"id":28380705,"url":"https://github.com/0xsequence/web-sdk","last_synced_at":"2025-10-29T08:07:09.844Z","repository":{"id":193367153,"uuid":"567056631","full_name":"0xsequence/web-sdk","owner":"0xsequence","description":"Sequence Web SDK – easily connect to web3 with any wallet, with built-in support for Sequence Embedded Wallet for web2 users signing in with Email, Google, Apple, and more","archived":false,"fork":false,"pushed_at":"2025-10-25T01:18:12.000Z","size":74085,"stargazers_count":19,"open_issues_count":10,"forks_count":9,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-10-25T03:14:16.222Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://web-sdk.sequence-demos.xyz/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0xsequence.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-11-17T01:13:38.000Z","updated_at":"2025-10-23T15:15:21.000Z","dependencies_parsed_at":"2023-10-12T01:30:54.128Z","dependency_job_id":"18d895ee-c1f4-4502-a16e-534a72f5a0c7","html_url":"https://github.com/0xsequence/web-sdk","commit_stats":{"total_commits":625,"total_committers":14,"mean_commits":"44.642857142857146","dds":"0.29279999999999995","last_synced_commit":"9ad2c9076503843023b39558cb969c172a146f79"},"previous_names":["0xsequence/kit","0xsequence/web-sdk"],"tags_count":448,"template":false,"template_full_name":null,"purl":"pkg:github/0xsequence/web-sdk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xsequence%2Fweb-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xsequence%2Fweb-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xsequence%2Fweb-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xsequence%2Fweb-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xsequence","download_url":"https://codeload.github.com/0xsequence/web-sdk/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xsequence%2Fweb-sdk/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281059632,"owners_count":26437061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-26T02:00:06.575Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-30T03:09:04.458Z","updated_at":"2025-10-29T08:07:09.838Z","avatar_url":"https://github.com/0xsequence.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sequence Web SDK 🧰\n\n[![npm version](https://badge.fury.io/js/@0xsequence%2Fconnect.svg)](https://badge.fury.io/js/@0xsequence%2Fconnect)\n\nEasily integrate web3 wallets in your app with Sequence Web SDK 🧰. Based on [wagmi](https://wagmi.sh/), and supporting 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\nView the [demo](https://web-sdk.sequence-demos.xyz/)! 👀\n\n## [Migration Guide from kit v4 to web-sdk v5](MIGRATION.md)\n\n## Quick Start\n\n### Installing the Library\n\n`@0xsequence/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/connect @0xsequence/hooks 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  customCSS?: string // Injected into shadow dom\n  signIn?: {\n    logoUrl?: string\n    projectName?: string\n    useMock?: boolean\n  }\n  displayedAssets?: Array\u003c{\n    contractAddress: string\n    chainId: number\n  }\u003e\n  ethAuth?: EthAuthSettings\n\n  wagmiConfig?: WagmiConfig // optional wagmiConfig overrides\n\n  waasConfigKey?: string\n  enableConfirmationModal?: boolean\n\n  walletConnect?:\n    | false\n    | {\n        projectId: string\n      }\n\n  guest?: boolean\n\n  google?:\n    | false\n    | {\n        clientId: string\n      }\n\n  apple?:\n    | false\n    | {\n        clientId: string\n        redirectURI: string\n      }\n\n  X?:\n    | boolean\n    | {\n        clientId: string\n        redirectURI: string\n      }\n      \n  email?:\n    | boolean\n    | {\n        legacyEmailAuth?: boolean\n      }\n}\n```\n\n```js\nimport { SequenceConnect, createConfig } from '@0xsequence/connect'\n\nimport Content from './components/Content'\n\nconst config = createConfig('waas', {\n  projectAccessKey: '\u003cyour-project-access-key\u003e',\n  chainIds: [1, 137],\n  defaultChainId: 1,\n  appName: 'Demo Dapp',\n  waasConfigKey: '\u003cyour-waas-config-key\u003e',\n\n  guest: true,\n\n  google: {\n    clientId: '\u003cyour-google-client-id\u003e'\n  },\n\n  apple: {\n    clientId: '\u003cyour-apple-client-id\u003e',\n    redirectURI: '...'\n  },\n\n  X: {\n    clientId: '\u003cyour-X-client-id\u003e',\n    redirectURI: '...'\n  },\n\n\n  walletConnect: {\n    projectId: '\u003cyour-wallet-connect-id\u003e'\n  },\n\n  email: true\n})\n\nfunction App() {\n  return (\n    \u003cSequenceConnect config={config}\u003e\n      \u003cContent /\u003e\n    \u003c/SequenceConnect\u003e\n  )\n}\n```\n\n#### Note about X (formerly Twitter) authentication. X authentication specifically needs a callback route; either a frontend page or a backend endpoint. An frontend example callback page is below:\nPlease ensure that the redirect uri and the callback page route is identical or X will refuse the authentication\n\n```js\nexport function XAuthCallback() {\n  useEffect(() =\u003e {\n    const query = new URLSearchParams(window.location.search)\n\n    const payload = {\n      code: query.get('code'),\n      state: query.get('state')\n    }\n\n    if (window.opener) {\n      window.opener.postMessage({ type: 'OAUTH_RETURN', data: payload }, '*')\n    }\n\n    window.close()\n  }, [])\n\n  return (\n    \u003ch3\u003e\n      you may now close this window.\n    \u003c/h3\u003e\n  )\n}\n```\n\n#### Need more customization?\n\nReact apps must be wrapped by a WagmiProvider and the SequenceConnectProvider components. It is important that the Wagmi wrapper comes before the SequenceConnectProvider wrapper.\n\n```js\nimport Content from './components/Content'\nimport { SequenceConnectProvider, getDefaultConnectors, getDefaultChains } from '@0xsequence/connect'\nimport { SequenceWalletProvider } from '@0xsequence/wallet-widget'\nimport { SequenceCheckoutProvider } from '@0xsequence/checkout'\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query'\nimport { createConfig, http, WagmiProvider } from 'wagmi'\nimport { mainnet, polygon, Chain } from 'wagmi/chains'\n\nconst projectAccessKey = '\u003cyour-project-access-key\u003e'\n\nconst chains = getDefaultChains(/* optional array of chain ids to filter */)\n\nconst transports = {}\n\nchains.forEach(chain =\u003e {\n  transports[chain.id] = http()\n})\n\n// Universal wallet configuration\nconst connectors = getDefaultConnectors('universal', {\n  projectAccessKey,\n  appName: 'Demo Dapp',\n  defaultChainId: 137,\n\n  walletConnect: {\n    projectId: '\u003cyour-wallet-connect-id\u003e'\n  }\n})\n\n/*\n  const connectors = getDefaultWaasConnectors('{\n    projectAccessKey,\n    defaultChainId: 137,\n    appName: 'Demo Dapp',\n\n    waasConfigKey: '\u003cyour-waas-config-key\u003e',\n\n    guest: true\n\n    google: {\n      clientId\n    },\n\n    apple: {\n      clientId,\n      redirectUrl\n    },\n\n    walletConnect: {\n      projectId: '\u003cyour-wallet-connect-id\u003e'\n    }\n\n    email: true\n  })\n  */\n\nconst wagmiConfig = createConfig({\n  chains,\n  transports,\n  connectors\n})\n\nconst connectConfig = {\n  projectAccessKey: '...'\n}\n\nconst queryClient = new QueryClient()\n\nfunction App() {\n  return (\n    \u003cWagmiProvider config={wagmiConfig}\u003e\n      \u003cQueryClientProvider client={queryClient}\u003e\n        \u003cSequenceConnectProvider config={connectConfig}\u003e\n          {/* If you want to use wallet modal to show assets etc. */}\n          \u003cSequenceWalletProvider\u003e\n            {/* If you want to use checkout functionalities */}\n            \u003cSequenceCheckoutProvider\u003e\n              \u003cContent /\u003e\n            \u003c/SequenceCheckoutProvider\u003e\n          \u003c/SequenceWalletProvider\u003e\n        \u003c/SequenceConnectProvider\u003e\n      \u003c/QueryClientProvider\u003e\n    \u003c/WagmiProvider\u003e\n  )\n}\n```\n\n### Opening the Sign in Modal\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"public/docs/sign-in-modal.png\"\u003e\n\u003c/div\u003e\n\nWallet selection is done through a modal which can be called programmatically. Kit allows multiple connection, so it can be called again to connect more wallets.\n\n```js\nimport { useOpenConnectModal } from '@0xsequence/connect'\nimport { useDisconnect, useAccount } from 'wagmi'\n\nconst MyReactComponent = () =\u003e {\n  const { setOpenConnectModal } = useOpenConnectModal()\n\n  const { wallets } = useWallets()\n\n  const onClick = () =\u003e {\n    setOpenConnectModal(true)\n  }\n\n  return \u003c\u003e{!wallets.length \u0026\u0026 \u003cbutton onClick={onClick}\u003eSign in\u003c/button\u003e}\u003c/\u003e\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/connect'\n// ...\nconst { setOpenConnectModal } = useOpenConnectModal()\nsetOpenConnectModal(true)\n```\n\n### useWallets\n\nUse the `useWallets` hook to manage multiple connected wallets in your application and see linked wallets of the connected embedded wallet. This hook is particularly useful when working with a combination of embedded and external wallets.\n\n```js\nimport { useWallets } from '@0xsequence/connect'\n\nconst {\n  wallets, // Array of connected wallets\n  linkedWallets, // Array of linked wallets (for embedded wallets)\n  setActiveWallet, // Function to set a wallet as active\n  disconnectWallet // Function to disconnect a wallet\n} = useWallets()\n\n/**\n * Interface representing a connected wallet\n */\ninterface ConnectedWallet {\n  /** Unique identifier */\n  id: string\n  /** Display name of the wallet */\n  name: string\n  /** Wallet address */\n  address: string\n  /** Whether this is the currently active wallet */\n  isActive: boolean\n  /** Whether this is an embedded wallet */\n  isEmbedded: boolean\n}\n\n// Switch to a different connected wallet\nawait setActiveWallet(walletAddress)\n\n// Disconnect a specific wallet\nawait disconnectWallet(walletAddress)\n```\n\n### useTheme\n\nUse the `useTheme` hook to get information about the current theme, such as light or dark.\n\n```js\nimport { useTheme } from '@0xsequence/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: zeroAddress,\n        chainId: 137,\n      },\n      {\n        contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',\n        chainId: 137\n      }\n    ],\n    readOnlyNetworks: [10], // Display assets in wallet from Optimism (chain ID 10) in addition to the networks specified in chainIds\n  }\n\n  \u003cSequenceConnectProvider config={connectConfig}\u003e\n    \u003cApp /\u003e\n  \u003cSequenceConnectProvider\u003e\n```\n\n## Packages\n\n| Package                                                                                               | Description                                                     | Docs                                                                                            |\n| ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |\n| [@0xsequence/connect](https://github.com/0xsequence/web-sdk/tree/master/packages/connect)             | Core package for Sequence Web SDK                               | [Read more](https://github.com/0xsequence/web-sdk/blob/master/packages/connect/README.md)       |\n| [@0xsequence/wallet-widget](https://github.com/0xsequence/web-sdk/tree/master/packages/wallet-widget) | Embedded wallets for viewing and sending coins and collectibles | [Read more](https://github.com/0xsequence/web-sdk/blob/master/packages/wallet-widget/README.md) |\n| [@0xsequence/checkout](https://github.com/0xsequence/web-sdk/tree/master/packages/checkout)           | Checkout modal with fiat onramp                                 | [Read more](https://github.com/0xsequence/web-sdk/blob/master/packages/checkout/README.md)      |\n\n## Examples\n\n| Application                                                                       | Description                                                            | Docs                                                                                    |\n| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |\n| [example-react](https://github.com/0xsequence/web-sdk/tree/master/examples/react) | React example application showing sign in, wallet and checkout         | [Read more](https://github.com/0xsequence/web-sdk/blob/master/examples/react/README.md) |\n| [example-next](https://github.com/0xsequence/web-sdk/tree/master/examples/next)   | Next example application showing sign in, wallet and checkout with SSR | [Read more](https://github.com/0xsequence/web-sdk/blob/master/examples/next/README.md)  |\n\n## Local Development\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"public/docs/web-sdk-demo.png\"\u003e\n\u003c/div\u003e\n\nThe React example can be used to test the library locally.\n\n1. Replace the web-sdk dependencies to the ones of the workspace in order to use hot reload.:\n\n```js\n\"@0xsequence/connect\": \"workspace:*\",\n\"@0xsequence/checkout\": \"workspace:*\",\n\"@0xsequence/wallet-widget\": \"workspace:*\",\n```\n\n2. `pnpm install`\n3. From the root folder, run `pnpm build` to build the packages OR optionally run `pnpm dev` in a separate terminal to develop in watch mode.\n4. From the root folder, run `pnpm dev:react` or `pnpm dev:next` to run the examples. If you want to run the examples in debug mode, run `pnpm debug:react`\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/wallet-widget) or take a look at the [checkout](https://github.com/0xsequence/web-sdk/tree/master/packages/checkout).\n\n## LICENSE\n\nApache-2.0\n\nCopyright (c) 2017-present Horizon Blockchain Games Inc. / https://horizon.io\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xsequence%2Fweb-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xsequence%2Fweb-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xsequence%2Fweb-sdk/lists"}