feat: added X waas auth support,

README.md

@@ -78,6 +78,13 @@ interface CreateConfigOptions {
         redirectURI: string
       }
 
+  X?:
+    | boolean
+    | {
+        clientId: string
+        redirectURI: string
+      }
+
   email?:
     | boolean
     | {
@@ -109,6 +116,12 @@ const config = createConfig('waas', {
     redirectURI: '...'
   },
 
+  X: {
+    clientId: '<your-X-client-id>',
+    redirectURI: '...'
+  },
+
+
   walletConnect: {
     projectId: '<your-wallet-connect-id>'
   },
@@ -125,6 +138,34 @@ function App() {
 }
 ```
 
+#### 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>
+  )
+}
+```
+
 #### Need more customization?
 
 React apps must be wrapped by a WagmiProvider and the SequenceConnectProvider components. It is important that the Wagmi wrapper comes before the SequenceConnectProvider wrapper.

examples/next/package.json

@@ -14,8 +14,8 @@
     "@0xsequence/connect": "workspace:*",
     "@0xsequence/design-system": "2.1.11",
     "@0xsequence/hooks": "workspace:*",
-    "@0xsequence/network": "^2.3.10",
-    "@0xsequence/waas": "^2.3.10",
+    "@0xsequence/network": "^2.3.23",
+    "@0xsequence/waas": "^2.3.23",
     "@0xsequence/wallet-widget": "workspace:*",
     "@tailwindcss/postcss": "^4.1.4",
     "@tanstack/react-query": "^5.74.11",

examples/react/package.json

@@ -16,8 +16,8 @@
     "@0xsequence/design-system": "2.1.11",
     "@0xsequence/hooks": "workspace:*",
     "@0xsequence/immutable-connector": "workspace:*",
-    "@0xsequence/network": "^2.3.10",
-    "@0xsequence/waas": "^2.3.10",
+    "@0xsequence/network": "^2.3.23",
+    "@0xsequence/waas": "^2.3.23",
     "@0xsequence/wallet-widget": "workspace:*",
     "@imtbl/config": "^2.2.0",
     "@imtbl/sdk": "^2.2.0",

examples/react/src/App.tsx

@@ -5,6 +5,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'
 
 import { Homepage } from './components/Homepage'
 import { ImmutableCallback } from './components/ImmutableCallback'
+import { XAuthCallback } from './components/XAuthCallback'
 import { checkoutConfig, config } from './config'
 
 export const App = () => {
@@ -16,6 +17,7 @@ export const App = () => {
             <Routes>
               <Route path="/" element={<Homepage />} />
               <Route path="/auth-callback" element={<ImmutableCallback />} />
+              <Route path="/auth-callback-X" element={<XAuthCallback />} />
             </Routes>
           </BrowserRouter>
         </SequenceCheckoutProvider>

examples/react/src/components/XAuthCallback.tsx

@@ -0,0 +1,27 @@
+import { Text } from '@0xsequence/design-system'
+import { useEffect } from 'react'
+
+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 (
+    <div className="flex justify-center items-center w-full pt-10">
+      <Text variant="large" color="primary">
+        You may now close this window.
+      </Text>
+    </div>
+  )
+}

examples/react/src/config.ts

@@ -117,6 +117,10 @@ export const config =
           clientId: 'com.horizon.sequence.waas',
           redirectURI: window.location.origin + window.location.pathname
         },
+        X: {
+          clientId: 'MVZ6aHMyNmMtSF9mNHVldFR6TV86MTpjaQ',
+          redirectURI: window.location.origin + '/auth-callback-X'
+        },
         walletConnect: {
           projectId: walletConnectProjectId
         },

packages/checkout/package.json

@@ -31,22 +31,22 @@
   },
   "dependencies": {
     "@0xsequence/design-system": "2.1.11",
-    "@0xsequence/marketplace": "^2.3.10",
+    "@0xsequence/marketplace": "^2.3.23",
     "date-fns": "^4.1.0",
     "fuse.js": "^7.1.0",
     "motion": "^12.9.2",
     "pako": "^2.1.0",
     "qrcode.react": "^4.2.0"
   },
   "peerDependencies": {
-    "0xsequence": ">= 2.3.7",
-    "@0xsequence/api": ">=2.3.11",
+    "0xsequence": ">= 2.3.23",
+    "@0xsequence/api": ">=2.3.23",
     "@0xsequence/connect": "workspace:*",
     "@0xsequence/hooks": "workspace:*",
-    "@0xsequence/indexer": ">= 2.3.7",
-    "@0xsequence/metadata": ">= 2.3.7",
-    "@0xsequence/network": ">= 2.3.7",
-    "@0xsequence/waas": ">= 2.3.7",
+    "@0xsequence/indexer": ">= 2.3.23",
+    "@0xsequence/metadata": ">= 2.3.23",
+    "@0xsequence/network": ">= 2.3.23",
+    "@0xsequence/waas": ">= 2.3.23",
     "@tanstack/react-query": ">= 5",
     "ethers": ">= 6.13.0",
     "react": ">= 17",

packages/checkout/src/hooks/useERC1155SaleContractCheckout.ts

@@ -142,6 +142,7 @@ export const useERC1155SaleContractCheckout = ({
     isLoading: isLoadingCheckoutOptions,
     isError: isErrorCheckoutOptions
   } = useCheckoutOptionsSalesContract(chain, {
+    chainId: chain.toString(),
     contractAddress,
     wallet,
     collectionAddress,

packages/connect/README.md

@@ -76,7 +76,14 @@ interface CreateConfigOptions {
     | boolean
     | {
         clientId: string
-        rediretURI: string
+        redirectURI: string
+      }
+
+  X?:
+    | boolean
+    | {
+        clientId: string
+        redirectURI: string
       }
 
   email?:
@@ -107,7 +114,12 @@ const config = createConfig('waas', {
 
   apple: {
     clientId: '<your-apple-client-id>',
-    redirectUrl: '...'
+    redirectURI: '...'
+  },
+
+  X: {
+    clientId: '<your-X-client-id>',
+    redirectURI: '...'
   },
 
   walletConnect: {
@@ -126,6 +138,34 @@ function App() {
 }
 ```
 
+#### 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>
+  )
+}
+```
+
 #### 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.

packages/connect/package.json

@@ -39,17 +39,17 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@0xsequence/api": ">=2.3.11",
-    "@0xsequence/auth": "^2.3.10",
-    "@0xsequence/core": "^2.3.10",
+    "@0xsequence/api": ">=2.3.23",
+    "@0xsequence/auth": "^2.3.23",
+    "@0xsequence/core": "^2.3.23",
     "@0xsequence/design-system": "2.1.11",
     "@0xsequence/ethauth": "^1.0.0",
-    "@0xsequence/indexer": "^2.3.10",
-    "@0xsequence/metadata": "^2.3.10",
-    "@0xsequence/network": "^2.3.10",
-    "@0xsequence/provider": "^2.3.10",
-    "@0xsequence/utils": "^2.3.10",
-    "@0xsequence/waas": "^2.3.10",
+    "@0xsequence/indexer": "^2.3.23",
+    "@0xsequence/metadata": "^2.3.23",
+    "@0xsequence/network": "^2.3.23",
+    "@0xsequence/provider": "^2.3.23",
+    "@0xsequence/utils": "^2.3.23",
+    "@0xsequence/waas": "^2.3.23",
     "@tailwindcss/cli": "^4.1.11",
     "clsx": "^2.1.1",
     "fuse.js": "^7.1.0",
@@ -58,7 +58,7 @@
     "uuid": "^10.0.0"
   },
   "peerDependencies": {
-    "0xsequence": ">= 2.3.7",
+    "0xsequence": ">= 2.3.23",
     "@0xsequence/hooks": "workspace:*",
     "@databeat/tracker": "^0.9.3",
     "@react-oauth/google": "^0.11.1",
@@ -71,7 +71,7 @@
     "wagmi": ">= 2.15.0"
   },
   "devDependencies": {
-    "0xsequence": "^2.3.10",
+    "0xsequence": "^2.3.23",
     "@0xsequence/hooks": "workspace:*",
     "@tanstack/react-query": "^5.74.11",
     "@types/uuid": "^9.0.8",

packages/connect/src/components/Connect/Connect.tsx

@@ -21,7 +21,7 @@ import { useWallets } from '../../hooks/useWallets.js'
 import { useWalletSettings } from '../../hooks/useWalletSettings.js'
 import type { ConnectConfig, ExtendedConnector, LogoProps } from '../../types.js'
 import { isEmailValid } from '../../utils/helpers.js'
-import { GuestWaasConnectButton } from '../ConnectButton/ConnectButton.js'
+import { GuestWaasConnectButton, XWaasConnectButton } from '../ConnectButton/ConnectButton.js'
 import {
   AppleWaasConnectButton,
   ConnectButton,
@@ -506,6 +506,12 @@ export const Connect = (props: ConnectProps) => {
                                     connector={connector}
                                     onConnect={onConnect}
                                   />
+                                ) : connector._wallet.id === 'X-waas' ? (
+                                  <XWaasConnectButton
+                                    isDescriptive={descriptiveSocials}
+                                    connector={connector}
+                                    onConnect={onConnect}
+                                  />
                                 ) : (
                                   <ConnectButton
                                     disableTooltip={config?.signIn?.disableTooltipForDescriptiveSocials}

packages/connect/src/components/ConnectButton/ConnectButton.tsx

@@ -1,7 +1,9 @@
 import { Card, ContextMenuIcon, Text, Tooltip, useTheme } from '@0xsequence/design-system'
 import { GoogleLogin } from '@react-oauth/google'
+import { useEffect, useState } from 'react'
 import { appleAuthHelpers } from 'react-apple-signin-auth'
 
+import { getXIdToken } from '../../connectors/X/XAuth.js'
 import { LocalStorageKey } from '../../constants/localStorage.js'
 import { useStorage, useStorageItem } from '../../hooks/useStorage.js'
 import type { ExtendedConnector, WalletProperties } from '../../types.js'
@@ -222,3 +224,64 @@ export const EpicWaasConnectButton = (props: ConnectButtonProps) => {
     />
   ) : null
 }
+
+export const XWaasConnectButton = (props: ConnectButtonProps) => {
+  const { connector, onConnect } = props
+  const storage = useStorage()
+
+  const [XCodeVerifier, setXCodeVerifier] = useState<string>('')
+  const [XClientId, setXClientId] = useState<string>('')
+  const [XRedirectURI, setXRedirectURI] = useState<string>('')
+
+  const { data: authUrl } = useStorageItem(LocalStorageKey.WaasXAuthUrl)
+
+  useEffect(() => {
+    const getStorageItems = async () => {
+      const codeVerifier = await storage?.getItem(LocalStorageKey.WaasXCodeVerifier)
+      const XClientId = await storage?.getItem(LocalStorageKey.WaasXClientID)
+      const XRedirectURI = await storage?.getItem(LocalStorageKey.WaasXRedirectURI)
+      setXCodeVerifier(codeVerifier ?? '')
+      setXClientId(XClientId ?? '')
+      setXRedirectURI(XRedirectURI ?? '')
+    }
+    getStorageItems()
+  }, [])
+
+  return (
+    <ConnectButton
+      {...props}
+      connector={connector}
+      onConnect={() => {
+        const popup = window.open(authUrl as string, 'XAuthPopup', 'width=700,height=700')
+
+        const handleMessage = async (event: MessageEvent) => {
+          if (event.data?.type !== 'OAUTH_RETURN') {
+            return
+          }
+
+          if (event.source !== popup) {
+            return
+          }
+
+          window.removeEventListener('message', handleMessage)
+          popup?.close()
+
+          const { code } = event.data.data || {}
+
+          if (code && XCodeVerifier) {
+            try {
+              const idToken = await getXIdToken(code, XCodeVerifier, XClientId, XRedirectURI)
+              storage?.setItem(LocalStorageKey.WaasXIdToken, idToken)
+              onConnect(connector)
+            } catch (error) {
+              console.log('X login error', error)
+            }
+          }
+        }
+
+        window.addEventListener('message', handleMessage)
+      }}
+      disableTooltip
+    />
+  )
+}