@0xsequence/connect 5.4.8 → 6.0.0-beta.0

package/README.md

@@ -1,241 +1,158 @@
-# Sequence Web SDK 🧰
+# Sequence Connect SDK
 
-Sequence 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.
+[@0xsequence/connect](https://www.npmjs.com/package/@0xsequence/connect/v/0.0.0-20250924112110) is the React Hooks SDK powering the Sequence wallet experiences. It supports both the Ecosystem (v3) wallet connector and the WaaS connector—configure which one you want per app. Highlights:
 
-- 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 💵 💶 💴 💷
-- Inline connect UI for custom layouts and embedded experiences 🎨
+- Social logins plus passkeys with Sequence wallets
+- Works with Sequence wallets or external web3 wallets (WalletConnect, MetaMask, etc.)
+- Inline or modal UI, customizable themes
+- Checkout and fiat on-ramp support
 
-View the [demo](https://0xsequence.github.io/web-sdk)! 👀
+## Key Features
 
-## Quick Start
+- Social auth (Email, Google, Apple)
+- Passkeys
+- Smart sessions management
+- Customizable theming
+- Built in UI components
 
-### Installing the Library
+# Quickstart
 
-`@0xsequence/connect` is the core package. Any extra modules require this package to be installed first.
-To install this package:
+1. Install the package:
 
 ```bash
-npm install @0xsequence/connect @0xsequence/hooks wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query
+npm install @0xsequence/connect
 # or
-pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query
+pnpm install @0xsequence/connect
 # or
-yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query
+yarn add @0xsequence/connect
 ```
 
-### Setting up the Library
+2. Create the wallet configuration
 
-#### The 'easy' way
+```typescript [config.ts]
+import { createConfig, createContractPermission } from '@0xsequence/connect'
+import { parseEther, parseUnits } from 'viem'
 
-- `createConfig(walletType, options)` method is used to create your initial config and prepare sensible defaults that can be overridden
+export const USDC_ADDRESS_ARBITRUM = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831'
+export const AAVE_V3_POOL_ADDRESS_ARBITRUM = '0x794a61358D6845594F94dc1DB02A252b5b4814aD'
 
-`walletType` is either 'waas' or 'universal'
-
-```ts
-interface CreateConfigOptions {
-  appName: string
-  projectAccessKey: string
-  chainIds?: number[]
-  defaultChainId?: number
-  disableAnalytics?: boolean
-  defaultTheme?: Theme
-  position?: ModalPosition
-  customCSS?: string // Injected into shadow dom
-  signIn?: {
-    logoUrl?: string
-    projectName?: string
-    useMock?: boolean
+export const config: any = createConfig({
+  projectAccessKey: 'AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8',
+  signIn: {
+    projectName: 'Sequence Web SDK Demo'
+  },
+  walletUrl: 'https://next-acme-wallet.sequence-dev.app/',
+  dappOrigin: window.location.origin,
+  appName: 'Sequence Web SDK Demo',
+  chainIds: [42161],
+  defaultChainId: 42161,
+  google: true,
+  apple: true,
+  email: true,
+  explicitSessionParams: {
+    chainId: 42161,
+    nativeTokenSpending: {
+      valueLimit: parseEther('0.01') // Allow spending up to 0.01 ETH for gas fees
+    },
+    expiresIn: {
+      hours: 24 // Session lasts for 24 hours
+    },
+    permissions: [
+      createContractPermission({
+        address: AAVE_V3_POOL_ADDRESS_ARBITRUM,
+        functionSignature: 'function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)',
+        rules: [
+          {
+            param: 'asset',
+            type: 'address',
+            condition: 'EQUAL',
+            value: USDC_ADDRESS_ARBITRUM
+          },
+          {
+            param: 'amount',
+            type: 'uint256',
+            condition: 'LESS_THAN_OR_EQUAL',
+            value: parseUnits('100', 6), // Max cumulative amount of 100 USDC
+            cumulative: true
+          }
+        ]
+      })
+    ]
   }
-  displayedAssets?: Array<{
-    contractAddress: string
-    chainId: number
-  }>
-  ethAuth?: EthAuthSettings
-  onConnectSuccess?: (address: string) => void // callback fired when wallet connects
-
-  wagmiConfig?: WagmiConfig // optional wagmiConfig overrides
-
-  waasConfigKey: string
-  enableConfirmationModal?: boolean
-
-  walletConnect?:
-    | boolean
-    | {
-        projectId: string
-      }
-
-  guest?: boolean
-
-  google?:
-    | boolean
-    | {
-        clientId: string
-      }
-
-  apple?:
-    | boolean
-    | {
-        clientId: string
-        redirectURI: string
-      }
-
-  X?:
-    | boolean
-    | {
-        clientId: string
-        redirectURI: string
-      }
-
-  email?:
-    | boolean
-    | {
-        legacyEmailAuth?: boolean
-      }
-}
+})
 ```
 
-```js
-import { SequenceConnect, createConfig } from '@0xsequence/connect'
-
-import Content from './components/Content'
+For WaaS, use `createConfig('waas', { ... })` and include WaaS-specific options such as:
 
-const config = createConfig('waas', {
-  projectAccessKey: '<your-project-access-key>',
-  chainIds: [1, 137],
-  defaultChainId: 1,
-  appName: 'Demo Dapp',
-  waasConfigKey: '<your-waas-config-key>',
-
-  guest: true,
-
-  google: {
-    clientId: '<your-google-client-id>'
-  },
+- `waasConfigKey`
+- social auth providers (google/email/apple/X)
+- `walletConnect` projectId
+- `enableConfirmationModal`
+- `additionalWallets` (e.g., Immutable passport)
 
-  apple: {
-    clientId: '<your-apple-client-id>',
-    redirectURI: '...'
-  },
+3. Wrap your app with the SequenceConnect provider.
 
-  X: {
-    clientId: '<your-X-client-id>',
-    redirectURI: '...'
-  },
+```typescript [main.tsx]
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
 
-  walletConnect: {
-    projectId: '<your-wallet-connect-id>'
-  },
+import App from "./App";
+import { config } from "./config";
+import { SequenceConnect } from "@0xsequence/connect";
 
-  email: true
-})
-
-function App() {
+function Dapp() {
   return (
     <SequenceConnect config={config}>
-      <Content />
+      <App />
     </SequenceConnect>
-  )
+  );
 }
-```
 
-#### 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:
-Please ensure that the redirect uri and the callback page route is identical or X will refuse the authentication
-
-```js
-export function XAuthCallback() {
-  useEffect(() => {
-    const query = new URLSearchParams(window.location.search)
-
-    const payload = {
-      code: query.get('code'),
-      state: query.get('state')
-    }
-
-    if (window.opener) {
-      window.opener.postMessage({ type: 'OAUTH_RETURN', data: payload }, '*')
-    }
-
-    window.close()
-  }, [])
-
-  return (
-    <h3>
-      you may now close this window.
-    </h3>
-  )
-}
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <Dapp />
+  </React.StrictMode>
+);
 ```
 
-#### Need more customization?
-
-React 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.
-
-```js
-import Content from './components/Content'
-import { SequenceConnectProvider, getDefaultConnectors, getDefaultChains } from '@0xsequence/connect'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { createConfig, http, WagmiProvider } from 'wagmi'
-import { mainnet, polygon, Chain } from 'wagmi/chains'
-
-const projectAccessKey = 'xyz'
-
-const chains = getDefaultChains(/* optional array of chain ids to filter */)
-
-const transports = {}
-
-chains.forEach(chain => {
-  transports[chain.id] = http()
-})
+4. Trigger the connection modal
 
-const connectors = getDefaultConnectors('universal', {
-  projectAccessKey,
-  appName: 'demo app',
-  defaultChainId: 137,
-
-  walletConnect: {
-    projectId: '<your-wallet-connect-project-id>'
-  }
-})
-
-const config = createConfig({
-  chains,
-  transports,
-  connectors
-})
-
-const queryClient = new QueryClient()
+```typescript [App.tsx]
+import './App.css'
+import { useOpenConnectModal } from '@0xsequence/connect'
 
 function App() {
+  const {setOpenConnectModal} = useOpenConnectModal()
+
   return (
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        <SequenceConnectProvider>
-          <Content />
-        </SequenceConnectProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+    <>
+      <button onClick={() => setOpenConnectModal(true)}>Connect</button>
+    </>
   )
 }
-```
 
-### Opening the Sign in Modal
+export default App
+```
 
-<div align="center">
-  <img src="public/docs/sign-in-modal.png">
+<div align="center" style="width: 50%; height: 50%;">
+  <img src="../../public/docs/connect-modal.png">
 </div>
 
+### Learn more
+
+For more information, please visit the [Connect SDK documentation](https://docs.sequence.xyz/sdk/web/wallet-sdk/ecosystem/getting-started). Wallet selection is done through a modal by default; the inline examples below show how to embed it when preferred.
+
 Wallet selection is done through a modal which can be called programmatically.
 
 ```js
 import { useOpenConnectModal } from '@0xsequence/connect'
-import { useDisconnect, useAccount } from 'wagmi'
+import { useConnection } from 'wagmi'
 
 const MyReactComponent = () => {
   const { setOpenConnectModal } = useOpenConnectModal()
 
-  const { isConnected } = useAccount()
+  const { isConnected } = useConnection()
 
   const onClick = () => {
     setOpenConnectModal(true)
@@ -265,7 +182,7 @@ const config = createConfig('waas', {
   waasConfigKey: '<your-waas-config-key>',
 
   // Optional: callback fired when wallet connects successfully
-  onConnectSuccess: (address) => {
+  onConnectSuccess: address => {
     console.log('Connected wallet:', address)
     // Redirect or perform other actions
   },

package/dist/cjs/components/Connect/Banner.js

@@ -6,7 +6,7 @@ const design_system_1 = require("@0xsequence/design-system");
 const Banner = ({ config = {} }) => {
     const { signIn = {} } = config;
     const { logoUrl } = signIn;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: "flex mt-5 justify-center items-center", children: (0, jsx_runtime_1.jsx)(design_system_1.Image, { src: logoUrl, style: { height: '110px' } }) })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: "flex mt-5 mb-6 justify-center items-center", children: (0, jsx_runtime_1.jsx)(design_system_1.Image, { src: logoUrl, style: { height: '110px' } }) })) }));
 };
 exports.Banner = Banner;
 //# sourceMappingURL=Banner.js.map

package/dist/cjs/components/Connect/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../src/components/Connect/Banner.tsx"],"names":[],"mappings":";;;;AAAA,6DAAiD;AAQ1C,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,EAAmB,EAAe,EAAE,EAAE;IACtE,MAAM,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,MAAM,CAAA;IAC9B,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAAA;IAE1B,OAAO,CACL,2DACG,OAAO,IAAI,CACV,gCAAK,SAAS,EAAC,uCAAuC,YACpD,uBAAC,qBAAK,IAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,GAC/C,CACP,GACA,CACJ,CAAA;AACH,CAAC,CAAA;AAbY,QAAA,MAAM,UAalB"}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../src/components/Connect/Banner.tsx"],"names":[],"mappings":";;;;AAAA,6DAAiD;AAQ1C,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,EAAmB,EAAe,EAAE,EAAE;IACtE,MAAM,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,MAAM,CAAA;IAC9B,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAAA;IAE1B,OAAO,CACL,2DACG,OAAO,IAAI,CACV,gCAAK,SAAS,EAAC,4CAA4C,YACzD,uBAAC,qBAAK,IAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,GAC/C,CACP,GACA,CACJ,CAAA;AACH,CAAC,CAAA;AAbY,QAAA,MAAM,UAalB"}

package/dist/cjs/components/Connect/Connect.d.ts

@@ -1,10 +1,16 @@
 import type { FormattedEmailConflictInfo } from '../../hooks/useWaasEmailConflict.js';
+import type { ConnectConfig } from '../../types.js';
+import type { WalletConfigurationOverrides, WalletConfigurationProvider } from '../../utils/walletConfiguration.js';
 import type { SequenceConnectProviderProps } from '../SequenceConnectProvider/index.js';
-export declare const SEQUENCE_UNIVERSAL_CONNECTOR_NAME = "Sequence";
 interface ConnectProps extends SequenceConnectProviderProps {
     emailConflictInfo?: FormattedEmailConflictInfo | null;
     onClose: () => void;
     isInline?: boolean;
+    enabledProviders?: WalletConfigurationProvider[];
+    isV3WalletSignedIn?: boolean | null;
+    isAuthStatusLoading?: boolean;
+    resolvedConfig?: ConnectConfig;
+    walletConfigurationSignIn?: WalletConfigurationOverrides['signIn'];
 }
 export declare const Connect: (props: ConnectProps) => import("react/jsx-runtime.js").JSX.Element;
 export {};

package/dist/cjs/components/Connect/Connect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Connect.d.ts","sourceRoot":"","sources":["../../../../src/components/Connect/Connect.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAA;AAcrF,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAA;AASvF,eAAO,MAAM,iCAAiC,aAAa,CAAA;AAE3D,UAAU,YAAa,SAAQ,4BAA4B;IACzD,iBAAiB,CAAC,EAAE,0BAA0B,GAAG,IAAI,CAAA;IACrD,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,+CAokB1C,CAAA"}
+{"version":3,"file":"Connect.d.ts","sourceRoot":"","sources":["../../../../src/components/Connect/Connect.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAA;AAIrF,OAAO,KAAK,EAAE,aAAa,EAAgC,MAAM,gBAAgB,CAAA;AAEjF,OAAO,KAAK,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAA;AAWnH,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAA;AAoCvF,UAAU,YAAa,SAAQ,4BAA4B;IACzD,iBAAiB,CAAC,EAAE,0BAA0B,GAAG,IAAI,CAAA;IACrD,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,2BAA2B,EAAE,CAAA;IAChD,kBAAkB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACnC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B,yBAAyB,CAAC,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAA;CACnE;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,+CA49B1C,CAAA"}