@0xsequence/connect 5.0.0-ecosystem-beta → 5.0.0

package/src/components/Connect/EmailWaasVerify.tsx

@@ -1,118 +0,0 @@
-import { Button, CheckmarkIcon, PINCodeInput, Spinner, Text } from '@0xsequence/design-system'
-import { useState, useEffect, useRef } from 'react'
-
-interface EmailWaasVerifyProps {
-  isLoading: boolean
-  error?: Error
-  onConfirm: (answer: string) => void
-  resetError: () => void
-  sendEmailCode: () => Promise<void>
-}
-
-const PIN_CODE_LENGTH = 6
-
-export const EmailWaasVerify = (props: EmailWaasVerifyProps) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-  const { isLoading, error, onConfirm } = props
-  const [isLoadingSendCode, setIsLoadingSendCode] = useState(false)
-  const [isErrorSendCode, setIsErrorSendCode] = useState(false)
-  const [waasEmailPinCode, setWaasEmailPinCode] = useState<string[]>([])
-  const [showSentEmail, setShowSentEmail] = useState(false)
-
-  const isPinCodeValid = !waasEmailPinCode.includes('') && waasEmailPinCode.length === PIN_CODE_LENGTH
-
-  useEffect(() => {
-    props.resetError()
-    if (isPinCodeValid) {
-      onConfirm(waasEmailPinCode.join(''))
-    }
-  }, [waasEmailPinCode])
-
-  useEffect(() => {
-    if (inputRef.current) {
-      const firstInput = inputRef.current?.childNodes?.[0]?.childNodes?.[0]
-
-      if (firstInput) {
-        ;(firstInput as HTMLInputElement)?.focus()
-      }
-    }
-  }, [inputRef])
-
-  const onClickResend = async () => {
-    props.resetError()
-    setIsErrorSendCode(false)
-    setIsLoadingSendCode(true)
-    try {
-      await props.sendEmailCode()
-      setShowSentEmail(true)
-      setTimeout(() => {
-        setShowSentEmail(false)
-      }, 3000)
-    } catch (e) {
-      setIsErrorSendCode(true)
-    }
-    setIsLoadingSendCode(false)
-  }
-
-  return (
-    <>
-      <div className="flex py-6 gap-4 items-center justify-center flex-col">
-        <Text className="mt-5" variant="normal" color="secondary">
-          Enter code received in email.
-        </Text>
-        <div ref={inputRef}>
-          <PINCodeInput value={waasEmailPinCode} digits={6} group={3} onChange={setWaasEmailPinCode} disabled={isLoading} />
-        </div>
-
-        <div className="flex justify-center items-center relative w-full gap-1">
-          <Text variant="small" color="secondary">
-            Didn't receive an email?{' '}
-          </Text>
-          {showSentEmail && (
-            <div className="flex flex-row items-center justify-center gap-2">
-              <Text variant="small" fontWeight="bold" color="muted">
-                Email sent!
-              </Text>
-              <CheckmarkIcon className="text-positive" size="sm" style={{ marginLeft: '-4px' }} />
-            </div>
-          )}
-          {!showSentEmail && (
-            <div className="flex relative flex-row items-center justify-center gap-2">
-              <Button
-                variant="text"
-                onClick={onClickResend}
-                disabled={isLoadingSendCode}
-                label="Resend email"
-                style={{ marginLeft: '-6px' }}
-              />
-              {isLoadingSendCode && <Spinner className="absolute top-0 right-[-18px]" size="sm" />}
-            </div>
-          )}
-        </div>
-        {isErrorSendCode && (
-          <Text className="text-center" variant="small" color="negative">
-            An error occurred while sending the email
-          </Text>
-        )}
-
-        <div className="flex gap-4 items-center justify-center flex-col">
-          <Button
-            variant="primary"
-            disabled={!isPinCodeValid || isLoading || isLoadingSendCode}
-            label="Confirm"
-            onClick={() => onConfirm(waasEmailPinCode.join(''))}
-            data-id="verifyButton"
-          />
-
-          {isLoading && <Spinner />}
-
-          {error && (
-            <Text className="text-center" variant="small" color="negative">
-              {error.message}
-            </Text>
-          )}
-        </div>
-      </div>
-    </>
-  )
-}

package/src/components/Connect/ExtendedWalletList.tsx

@@ -1,122 +0,0 @@
-import {
-  ArrowRightIcon,
-  Card,
-  IconButton,
-  ModalPrimitive,
-  Scroll,
-  SearchIcon,
-  SearchInput,
-  Text,
-  useTheme
-} from '@0xsequence/design-system'
-import Fuse from 'fuse.js'
-import { useState } from 'react'
-
-import { ExtendedConnector } from '../../types'
-import { getLogo } from '../ConnectButton'
-
-interface ExtendedWalletListProps {
-  onConnect: (connector: ExtendedConnector) => void
-  title: string
-  connectors: ExtendedConnector[]
-  onGoBack: () => void
-  searchable: boolean
-}
-
-export const ExtendedWalletList = ({ onConnect, connectors, title, onGoBack, searchable }: ExtendedWalletListProps) => {
-  const { theme } = useTheme()
-  const [search, setSearch] = useState('')
-
-  const fuzzyConnectors = new Fuse(connectors, {
-    keys: ['_wallet.name']
-  })
-
-  const foundConnectors = fuzzyConnectors.search(search)
-
-  const displayedConnectors = search === '' ? connectors : foundConnectors.map(connector => connector.item)
-
-  const maxConnectorsInView = searchable ? 6 : 8
-  const gutterHeight = 8
-  const optionHeight = 48
-  const displayedOptionsAmount = Math.min(displayedConnectors.length, maxConnectorsInView)
-  const displayedGuttersAmount = displayedOptionsAmount - 1
-
-  const searchableAreaHeight = `${optionHeight * maxConnectorsInView + gutterHeight * (maxConnectorsInView - 1)}px`
-  const viewheight = `${optionHeight * displayedOptionsAmount + gutterHeight * displayedGuttersAmount}px`
-
-  const ConditionalScrollbar = ({ children }: { children: React.ReactNode }) => {
-    if (displayedConnectors.length > maxConnectorsInView || searchable) {
-      return (
-        <Scroll
-          shadows={false}
-          style={{
-            height: searchable ? searchableAreaHeight : viewheight,
-            scrollbarColor: 'gray black',
-            scrollbarWidth: 'thin'
-          }}
-        >
-          {children}
-        </Scroll>
-      )
-    }
-
-    return children
-  }
-
-  return (
-    <div className="p-4">
-      <div className="absolute top-4 left-4">
-        <IconButton
-          className="bg-button-glass"
-          onClick={onGoBack}
-          size="xs"
-          icon={() => <ArrowRightIcon style={{ transform: 'rotate(180deg)' }} />}
-        />
-      </div>
-      <div className="flex justify-center text-primary items-center font-medium mt-2 mb-4">
-        <ModalPrimitive.Title asChild>
-          <Text>{title}</Text>
-        </ModalPrimitive.Title>
-      </div>
-      {searchable && (
-        <div className="w-full mb-4">
-          <SearchInput
-            autoFocus
-            name="search"
-            leftIcon={SearchIcon}
-            value={search}
-            onChange={ev => setSearch(ev.target.value)}
-            placeholder="Search"
-            data-1p-ignore
-          />
-        </div>
-      )}
-      <ConditionalScrollbar>
-        <div className="flex flex-col gap-2">
-          {displayedConnectors.map(connector => {
-            const walletName = connector._wallet.name
-            const connectorId = connector._wallet.id
-
-            const walletProps = connector._wallet
-
-            const Logo = getLogo(theme, walletProps)
-
-            return (
-              <Card
-                className="flex gap-2 items-center justify-start w-full h-12 px-4"
-                clickable
-                key={connectorId}
-                onClick={() => onConnect(connector)}
-              >
-                <Logo className="w-5 h-5" />
-                <Text variant="normal" fontWeight="bold" color="primary">
-                  {walletName}
-                </Text>
-              </Card>
-            )
-          })}
-        </div>
-      </ConditionalScrollbar>
-    </div>
-  )
-}

package/src/components/Connect/WalletListItem.tsx

@@ -1,93 +0,0 @@
-import {
-  Button,
-  Card,
-  CheckmarkIcon,
-  CloseIcon,
-  cn,
-  IconButton,
-  LinkIcon,
-  Spinner,
-  Text,
-  Tooltip,
-  truncateAddress
-} from '@0xsequence/design-system'
-import React, { useState } from 'react'
-
-export interface WalletListItemProps {
-  name: string
-  address: string
-  isEmbedded: boolean
-  isActive: boolean
-  isLinked: boolean
-  isReadOnly: boolean
-  onDisconnect: () => void
-  onUnlink?: () => void
-}
-
-export const WalletListItem: React.FC<WalletListItemProps> = ({
-  name,
-  address,
-  isEmbedded,
-  isActive,
-  isLinked,
-  isReadOnly,
-  onDisconnect,
-  onUnlink
-}) => {
-  const [showUnlinkConfirm, setShowUnlinkConfirm] = useState(false)
-  const [isUnlinking, setIsUnlinking] = useState(false)
-
-  const handleUnlink = () => {
-    setIsUnlinking(true)
-    onUnlink?.()
-  }
-
-  return (
-    <Card
-      className={cn('flex flex-row items-center justify-between', isActive ? 'bg-background-secondary' : 'bg-background-muted')}
-    >
-      <div className="flex flex-row items-center gap-2">
-        <div className="flex flex-col gap-1">
-          <div className="flex flex-row items-center gap-1">
-            <Text variant="normal" color="primary">
-              {isEmbedded ? 'Embedded - ' : ''}
-              {name}
-            </Text>
-            {isLinked && (
-              <Tooltip message="Linked to embedded wallet">
-                <div className="relative">
-                  <LinkIcon className="text-muted" size="xs" />
-                </div>
-              </Tooltip>
-            )}
-            {isReadOnly && (
-              <Text variant="small" color="muted">
-                (read-only)
-              </Text>
-            )}
-          </div>
-          <Text variant="normal" fontWeight="bold" color="primary">
-            {truncateAddress(address, 8, 5)}
-          </Text>
-        </div>
-      </div>
-
-      {!isReadOnly && <Button size="xs" variant="glass" label="Disconnect" onClick={onDisconnect} />}
-
-      {isReadOnly && isLinked && (
-        <div className="flex relative items-center gap-2">
-          {isUnlinking ? (
-            <Spinner />
-          ) : showUnlinkConfirm ? (
-            <div className="flex gap-3">
-              <IconButton size="xs" variant="danger" icon={CheckmarkIcon} onClick={handleUnlink} />
-              <IconButton size="xs" variant="glass" icon={CloseIcon} onClick={() => setShowUnlinkConfirm(false)} />
-            </div>
-          ) : (
-            <Button size="xs" variant="glass" label="Unlink" onClick={() => setShowUnlinkConfirm(true)} />
-          )}
-        </div>
-      )}
-    </Card>
-  )
-}

package/src/components/Connect/index.ts

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

package/src/components/ConnectButton/ConnectButton.tsx

@@ -1,197 +0,0 @@
-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} side="bottom">
-        <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} side="bottom">
-      <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} side="bottom">
-      <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

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

package/src/components/CryptoOption.tsx

@@ -1,80 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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>
-  )
-}