@0xsequence/connect 0.0.0-20250314205219

package/src/components/ConnectButton/ConnectButton.tsx

@@ -0,0 +1,197 @@
+import { Card, EllipsisIcon, 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 { LocalStorageKey } from '../../constants'
+import { useStorage, useStorageItem } from '../../hooks/useStorage'
+import { ExtendedConnector, WalletProperties } from '../../types'
+
+const BUTTON_HEIGHT = '52px'
+const BUTTON_HEIGHT_DESCRIPTIVE = '44px'
+const iconSizeClasses = 'w-8 h-8'
+const iconDescriptiveSizeClasses = 'w-6 h-6'
+
+export const getLogo = (theme: any, walletProps: WalletProperties) =>
+  theme === 'dark'
+    ? walletProps.logoDark || walletProps.monochromeLogoDark
+    : walletProps.logoLight || walletProps.monochromeLogoLight
+
+interface ConnectButtonProps {
+  connector: ExtendedConnector
+  label?: string
+  onConnect: (connector: ExtendedConnector) => void
+  isDescriptive?: boolean
+}
+
+export const ConnectButton = (props: ConnectButtonProps) => {
+  const { connector, label, onConnect } = props
+  const { theme } = useTheme()
+  const walletProps = connector._wallet
+  const isDescriptive = props.isDescriptive || false
+
+  const Logo = getLogo(theme, walletProps)
+
+  if (isDescriptive) {
+    return (
+      <Tooltip message={label || walletProps.name}>
+        <Card
+          className="flex gap-1 justify-center items-center w-full"
+          clickable
+          onClick={() => onConnect(connector)}
+          style={{ height: BUTTON_HEIGHT_DESCRIPTIVE }}
+        >
+          <Logo className={iconDescriptiveSizeClasses} />
+          <Text color="primary" variant="normal" fontWeight="bold">
+            Continue with {label || walletProps.name}
+          </Text>
+        </Card>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <Tooltip message={label || walletProps.name}>
+      <Card
+        className="flex justify-center items-center w-full"
+        clickable
+        onClick={() => onConnect(connector)}
+        style={{
+          height: BUTTON_HEIGHT
+        }}
+      >
+        <Logo className={iconSizeClasses} />
+      </Card>
+    </Tooltip>
+  )
+}
+
+interface ShowAllWalletsButtonProps {
+  onClick: () => void
+}
+
+export const ShowAllWalletsButton = ({ onClick }: ShowAllWalletsButtonProps) => {
+  return (
+    <Tooltip message="Show more">
+      <Card
+        className="flex justify-center items-center w-full"
+        clickable
+        onClick={onClick}
+        style={{
+          height: BUTTON_HEIGHT
+        }}
+      >
+        <EllipsisIcon className="text-primary" size="xl" />
+      </Card>
+    </Tooltip>
+  )
+}
+
+export const GoogleWaasConnectButton = (props: ConnectButtonProps) => {
+  const { connector, onConnect, isDescriptive = false } = props
+  const storage = useStorage()
+
+  const [enableGoogleTooltip, setEnableGoogleTooltip] = useState(false)
+  const { theme } = useTheme()
+  const walletProps = connector._wallet
+
+  const Logo = getLogo(theme, walletProps)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setEnableGoogleTooltip(true)
+    }, 300)
+  })
+
+  const WaasLoginContent = () => {
+    if (isDescriptive) {
+      return (
+        <div className="flex gap-1 justify-center items-center bg-background-secondary absolute pointer-events-none w-full h-full top-0 right-0">
+          <Logo className={iconDescriptiveSizeClasses} />
+          <Text color="primary" variant="normal" fontWeight="bold">
+            Continue with Google
+          </Text>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex bg-background-secondary justify-center items-center absolute pointer-events-none w-full h-full top-0 right-0">
+        <Logo className={iconSizeClasses} />
+      </div>
+    )
+  }
+
+  const buttonHeight = isDescriptive ? BUTTON_HEIGHT_DESCRIPTIVE : BUTTON_HEIGHT
+
+  return (
+    <Tooltip message="Google" disabled={!enableGoogleTooltip}>
+      <Card
+        className="bg-transparent p-0 w-full relative"
+        clickable
+        style={{
+          height: buttonHeight
+        }}
+      >
+        <div
+          className="flex flex-row h-full overflow-hidden items-center justify-center"
+          style={{
+            opacity: 0.0000001,
+            transform: 'scale(100)'
+          }}
+        >
+          <GoogleLogin
+            width="56"
+            type="icon"
+            size="large"
+            onSuccess={credentialResponse => {
+              if (credentialResponse.credential) {
+                storage?.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential)
+                onConnect(connector)
+              }
+            }}
+            onError={() => {
+              console.log('Login Failed')
+            }}
+          />
+        </div>
+
+        <WaasLoginContent />
+      </Card>
+    </Tooltip>
+  )
+}
+
+export const AppleWaasConnectButton = (props: ConnectButtonProps) => {
+  const { connector, onConnect } = props
+  const storage = useStorage()
+
+  const { data: appleClientId } = useStorageItem(LocalStorageKey.WaasAppleClientID)
+  const { data: appleRedirectUri } = useStorageItem(LocalStorageKey.WaasAppleRedirectURI)
+
+  return appleClientId && appleRedirectUri ? (
+    <ConnectButton
+      {...props}
+      connector={connector}
+      onConnect={() => {
+        appleAuthHelpers.signIn({
+          authOptions: {
+            clientId: appleClientId,
+            redirectURI: appleRedirectUri,
+            scope: 'openid email',
+            usePopup: true
+          },
+          onSuccess: (response: any) => {
+            if (response.authorization?.id_token) {
+              storage?.setItem(LocalStorageKey.WaasAppleIdToken, response.authorization.id_token)
+              onConnect(connector)
+            } else {
+              console.log('Apple login error: No id_token found')
+            }
+          },
+          onError: (error: any) => console.error(error)
+        })
+      }}
+    />
+  ) : null
+}

package/src/components/ConnectButton/index.ts

@@ -0,0 +1 @@
+export { getLogo, ConnectButton, GoogleWaasConnectButton, AppleWaasConnectButton, ShowAllWalletsButton } from './ConnectButton'

package/src/components/CryptoOption.tsx

@@ -0,0 +1,80 @@
+import { Card, Text, TokenImage } from '@0xsequence/design-system'
+
+import { SelectedIndicator } from './SelectedIndicator'
+
+interface CryptoOptionProps {
+  currencyName: string
+  chainId: number
+  iconUrl?: string
+  symbol: string
+  price: string
+  onClick: () => void
+  isSelected: boolean
+  disabled: boolean
+  isInsufficientFunds?: boolean
+}
+
+export const CryptoOption = ({
+  currencyName,
+  chainId,
+  iconUrl,
+  symbol,
+  price,
+  onClick,
+  isSelected,
+  isInsufficientFunds = false,
+  disabled
+}: CryptoOptionProps) => {
+  const onClickCard = () => {
+    if (!isInsufficientFunds && !disabled) {
+      onClick()
+    }
+  }
+
+  return (
+    <Card className="flex w-full justify-between p-4 cursor-pointer" onClick={onClickCard}>
+      <div className="flex flex-row gap-3">
+        <div className="w-fit">
+          <TokenImage src={iconUrl} size="lg" symbol={symbol} withNetwork={chainId} disableAnimation />
+        </div>
+        <div className="flex flex-col justify-between">
+          <Text
+            className="whitespace-nowrap"
+            variant="normal"
+            fontWeight="bold"
+            color="primary"
+            ellipsis
+            style={{
+              overflow: 'hidden',
+              maxWidth: '220px'
+            }}
+          >
+            {currencyName}
+          </Text>
+          <Text
+            className="whitespace-nowrap"
+            variant="normal"
+            color="muted"
+            ellipsis
+            style={{
+              overflow: 'hidden',
+              width: '220px'
+            }}
+          >
+            {`${price} ${symbol}`}
+          </Text>
+        </div>
+      </div>
+      <div className="flex flex-row justify-center items-center gap-3">
+        <div className="flex flex-col justify-between items-end">
+          {isInsufficientFunds ? (
+            <Text variant="normal" color="negative">
+              Insufficient funds
+            </Text>
+          ) : null}
+        </div>
+        <SelectedIndicator selected={isSelected} />
+      </div>
+    </Card>
+  )
+}

package/src/components/JsonTreeViewer.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react'
+
+interface TreeNodeProps {
+  data: any
+  keyName?: string
+  depth?: number
+}
+
+const TreeNode = ({ data, keyName, depth = 0 }: TreeNodeProps) => {
+  const [isExpanded, setIsExpanded] = useState(true)
+  const isObject = typeof data === 'object' && data !== null
+  const isArray = Array.isArray(data)
+
+  const toggle = () => setIsExpanded(!isExpanded)
+
+  return (
+    <div className="select-none" style={{ marginLeft: depth > 0 ? `${depth * 1}rem` : '0' }}>
+      {/* Key and Value */}
+      <div
+        onClick={isObject ? toggle : undefined}
+        className={`flex items-center gap-1 px-1 py-1 ${isObject ? 'cursor-pointer' : ''}`}
+      >
+        {isObject && <span className="w-4 h-4 flex items-center justify-center">{isExpanded ? '▼' : '▶'}</span>}
+
+        {keyName && <span className="font-medium">{keyName}:</span>}
+
+        {isArray && <span>[{!isExpanded && '...'}]</span>}
+
+        {!isObject && <span>{typeof data === 'string' ? `"${data}"` : data === null ? 'null' : data.toString()}</span>}
+
+        {isObject && !isArray && (
+          <span>
+            {'{'}
+            {!isExpanded && '...'}
+            {'}'}
+          </span>
+        )}
+      </div>
+
+      {/* Children */}
+      {isExpanded && isObject && (
+        <div className="ml-2">
+          {Object.entries(data).map(([key, value]) => (
+            <TreeNode key={key} keyName={isArray ? undefined : key} data={value} depth={depth + 1} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface JsonTreeViewerProps {
+  data: object
+  className?: string
+}
+
+export const JsonTreeViewer = ({ data }: JsonTreeViewerProps) => {
+  return (
+    <div className={'font-mono text-sm overflow-x-auto'}>
+      <TreeNode data={data} />
+    </div>
+  )
+}

package/src/components/NetworkBadge/NetworkBadge.tsx

@@ -0,0 +1,36 @@
+import { NetworkImage, Text } from '@0xsequence/design-system'
+import React from 'react'
+
+import { getNetwork, getNetworkBackgroundColor, getNetworkColor } from '../../utils/networks'
+
+interface NetworkBadgeProps {
+  chainId: number
+}
+
+export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
+  const network = getNetwork(chainId)
+  const chainColor = getNetworkColor(chainId)
+  const chainBGColor = getNetworkBackgroundColor(chainId)
+
+  return (
+    <div
+      className="flex h-6 px-2 gap-1 rounded-sm flex-row justify-center items-center w-fit"
+      style={{
+        background: chainBGColor
+      }}
+    >
+      <NetworkImage chainId={chainId} size="xs" />
+      <Text
+        variant="xsmall"
+        fontWeight="bold"
+        style={{
+          color: chainColor
+        }}
+        capitalize
+        ellipsis
+      >
+        {network.title ?? network.name}
+      </Text>
+    </div>
+  )
+}

package/src/components/NetworkBadge/index.ts

@@ -0,0 +1 @@
+export { NetworkBadge } from './NetworkBadge'

package/src/components/PageHeading/PageHeading.tsx

@@ -0,0 +1,16 @@
+import { cn, Text } from '@0xsequence/design-system'
+
+interface PageHeadingProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export const PageHeading = (props: PageHeadingProps) => {
+  const { children, className, ...rest } = props
+
+  return (
+    <Text className={cn('text-center mt-10 mb-6', className)} variant="normal" fontWeight="bold" color="primary" asChild>
+      <h1 {...rest}>{children}</h1>
+    </Text>
+  )
+}

package/src/components/PageHeading/index.tsx

@@ -0,0 +1 @@
+export { PageHeading } from './PageHeading'

package/src/components/SelectedIndicator.tsx

@@ -0,0 +1,21 @@
+import { CheckmarkIcon } from '@0xsequence/design-system'
+
+interface SelectedIndicatorProps {
+  selected: boolean
+}
+
+export const SelectedIndicator = (props: SelectedIndicatorProps) => {
+  const { selected } = props
+  const background = selected ? 'bg-white' : 'bg-transparent'
+  return (
+    <div
+      className={`flex border-solid relative items-center justify-center shrink-0 rounded-full w-7 h-7 ${background}`}
+      style={{
+        borderWidth: '2px',
+        borderColor: selected ? 'var(--seq-color-white)' : 'var(--seq-color-muted)'
+      }}
+    >
+      {selected && <CheckmarkIcon className="text-black" size="md" />}
+    </div>
+  )
+}

package/src/components/SequenceConnect/SequenceConnect.tsx

@@ -0,0 +1,42 @@
+import { SequenceHooksProvider } from '@0xsequence/react-hooks'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { State, WagmiProvider } from 'wagmi'
+
+import { SequenceConnectConfig } from '../../config/createConfig'
+import { DEBUG } from '../../env'
+import { SequenceConnectProvider } from '../SequenceConnectProvider'
+
+const defaultQueryClient = new QueryClient()
+
+interface SequenceConnectProps {
+  config: SequenceConnectConfig
+  queryClient?: QueryClient
+  initialState?: State | undefined
+  children: React.ReactNode
+}
+
+export const SequenceConnect = (props: SequenceConnectProps) => {
+  const { config, queryClient, initialState, children } = props
+  const { connectConfig, wagmiConfig } = config
+
+  return (
+    <WagmiProvider config={wagmiConfig} initialState={initialState}>
+      <QueryClientProvider client={queryClient || defaultQueryClient}>
+        <SequenceHooksProvider
+          value={{
+            projectAccessKey: connectConfig.projectAccessKey,
+            env: {
+              indexerGatewayUrl: DEBUG ? 'https://dev-indexer.sequence.app' : 'https://indexer.sequence.app',
+              metadataUrl: DEBUG ? 'https://dev-metadata.sequence.app' : 'https://metadata.sequence.app',
+              apiUrl: DEBUG ? 'https://dev-api.sequence.app' : 'https://api.sequence.app',
+              indexerUrl: DEBUG ? 'https://dev-indexer.sequence.app' : 'https://indexer.sequence.app',
+              imageProxyUrl: 'https://imgproxy.sequence.xyz/'
+            }
+          }}
+        >
+          <SequenceConnectProvider config={connectConfig}>{children}</SequenceConnectProvider>
+        </SequenceHooksProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}

package/src/components/SequenceConnect/index.ts

@@ -0,0 +1 @@
+export { SequenceConnect } from './SequenceConnect'

package/src/components/SequenceConnectPreviewProvider/SequenceConnectPreviewProvider.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import { sequence } from '0xsequence'
+import { Theme, ThemeProvider } from '@0xsequence/design-system'
+import { SequenceClient } from '@0xsequence/provider'
+import { GoogleOAuthProvider } from '@react-oauth/google'
+import React, { useState, useEffect } from 'react'
+import { useAccount, useConfig } from 'wagmi'
+
+import { DEFAULT_SESSION_EXPIRATION, LocalStorageKey } from '../../constants'
+import { AnalyticsContextProvider } from '../../contexts/Analytics'
+import { ConnectConfigContextProvider } from '../../contexts/ConnectConfig'
+import { ConnectModalContextProvider } from '../../contexts/ConnectModal'
+import { ThemeContextProvider } from '../../contexts/Theme'
+import { WalletConfigContextProvider } from '../../contexts/WalletConfig'
+import { useStorage } from '../../hooks/useStorage'
+import { useEmailConflict } from '../../hooks/useWaasEmailConflict'
+import { ExtendedConnector, DisplayedAsset, EthAuthSettings, ConnectConfig, ModalPosition } from '../../types'
+import { Connect } from '../Connect/Connect'
+
+export type SequenceConnectProviderProps = {
+  children: React.ReactNode
+  config: ConnectConfig
+}
+
+export const SequenceConnectPreviewProvider = (props: SequenceConnectProviderProps) => {
+  const { config, children } = props
+  const {
+    defaultTheme = 'dark',
+    signIn = {},
+    position = 'center',
+    displayedAssets: displayedAssetsSetting = [],
+    readOnlyNetworks,
+    ethAuth = {} as EthAuthSettings,
+    disableAnalytics = false
+  } = config
+
+  const defaultAppName = signIn.projectName || 'app'
+
+  const { expiry = DEFAULT_SESSION_EXPIRATION, app = defaultAppName, origin, nonce } = ethAuth
+
+  const [openConnectModal, setOpenConnectModal] = useState<boolean>(false)
+  const [theme, setTheme] = useState<Exclude<Theme, undefined>>(defaultTheme || 'dark')
+  const [modalPosition, setModalPosition] = useState<ModalPosition>(position)
+  const [displayedAssets, setDisplayedAssets] = useState<DisplayedAsset[]>(displayedAssetsSetting)
+  const [analytics, setAnalytics] = useState<SequenceClient['analytics']>()
+  const { address, isConnected } = useAccount()
+  const wagmiConfig = useConfig()
+  const storage = useStorage()
+
+  const googleWaasConnector = wagmiConfig.connectors.find(
+    c => c.id === 'sequence-waas' && (c as ExtendedConnector)._wallet.id === 'google-waas'
+  ) as ExtendedConnector | undefined
+  const googleClientId: string = (googleWaasConnector as any)?.params?.googleClientId || ''
+
+  const setupAnalytics = (projectAccessKey: string) => {
+    const s = sequence.initWallet(projectAccessKey)
+    const sequenceAnalytics = s.client.analytics
+    setAnalytics(sequenceAnalytics)
+  }
+
+  useEffect(() => {
+    if (!isConnected) {
+      analytics?.reset()
+
+      return
+    }
+    if (address) {
+      analytics?.identify(address.toLowerCase())
+    }
+  }, [analytics, address, isConnected])
+
+  useEffect(() => {
+    if (!disableAnalytics) {
+      setupAnalytics(config.projectAccessKey)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (theme !== defaultTheme) {
+      setTheme(defaultTheme)
+    }
+  }, [defaultTheme])
+
+  // Write data in local storage for retrieval in connectors
+  useEffect(() => {
+    // Theme
+    // TODO: set the sequence theme once it is added to connect options
+    if (typeof theme === 'object') {
+      // localStorage.setItem(LocalStorageKey.Theme, JSON.stringify(theme))
+    } else {
+      localStorage.setItem(LocalStorageKey.Theme, theme)
+    }
+    // EthAuth
+    // note: keep an eye out for potential race-conditions, though they shouldn't occur.
+    // If there are race conditions, the settings could be a function executed prior to being passed to wagmi
+    storage?.setItem(LocalStorageKey.EthAuthSettings, {
+      expiry,
+      app,
+      origin: origin || location.origin,
+      nonce
+    })
+  }, [theme, ethAuth])
+
+  useEffect(() => {
+    setDisplayedAssets(displayedAssets)
+  }, [displayedAssetsSetting])
+
+  const { emailConflictInfo } = useEmailConflict()
+
+  return (
+    <ConnectConfigContextProvider value={config}>
+      <ThemeContextProvider
+        value={{
+          theme,
+          setTheme,
+          position: modalPosition,
+          setPosition: setModalPosition
+        }}
+      >
+        <GoogleOAuthProvider clientId={googleClientId}>
+          <ConnectModalContextProvider value={{ setOpenConnectModal, openConnectModalState: openConnectModal }}>
+            <WalletConfigContextProvider value={{ setDisplayedAssets, displayedAssets, readOnlyNetworks }}>
+              <AnalyticsContextProvider value={{ setAnalytics, analytics }}>
+                <div id="kit-provider">
+                  <ThemeProvider root="#kit-provider" scope="kit" theme={theme}>
+                    <Connect
+                      onClose={() => setOpenConnectModal(false)}
+                      emailConflictInfo={emailConflictInfo}
+                      isPreview
+                      {...props}
+                    />
+                  </ThemeProvider>
+                </div>
+                {children}
+              </AnalyticsContextProvider>
+            </WalletConfigContextProvider>
+          </ConnectModalContextProvider>
+        </GoogleOAuthProvider>
+      </ThemeContextProvider>
+    </ConnectConfigContextProvider>
+  )
+}

package/src/components/SequenceConnectPreviewProvider/index.ts

@@ -0,0 +1 @@
+export * from './SequenceConnectPreviewProvider'