@0xsequence/connect 0.0.0-20250314205219

package/src/components/Connect/ConnectedWallets.tsx

@@ -0,0 +1,179 @@
+import { LinkedWallet } from '@0xsequence/api'
+import { motion, AnimatePresence } from 'motion/react'
+import React, { useMemo, useEffect, useRef, JSX } from 'react'
+
+import { ConnectedWallet } from '../../hooks/useWallets'
+
+import { WalletListItem, WalletListItemProps } from './WalletListItem'
+
+interface ConnectedWalletsProps {
+  wallets: ConnectedWallet[]
+  linkedWallets?: LinkedWallet[]
+  disconnectWallet: (address: string) => void
+  unlinkWallet: (address: string) => void
+}
+
+const MAX_HEIGHT = 240
+
+export const ConnectedWallets = ({
+  wallets,
+  linkedWallets,
+  disconnectWallet,
+  unlinkWallet
+}: ConnectedWalletsProps): JSX.Element | null => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+  const updateScrollFades = (target: HTMLElement) => {
+    const isScrollable = target.scrollHeight > MAX_HEIGHT
+    const isAtBottom = target.scrollHeight - target.scrollTop <= MAX_HEIGHT
+    const isAtTop = target.scrollTop === 0
+
+    const bottomFadeElement = target.parentElement?.querySelector('.scroll-fade') as HTMLElement
+    const topFadeElement = target.parentElement?.querySelector('.scroll-fade-top') as HTMLElement
+
+    if (bottomFadeElement) {
+      bottomFadeElement.style.opacity = isScrollable && !isAtBottom ? '1' : '0'
+    }
+    if (topFadeElement) {
+      topFadeElement.style.opacity = isScrollable && !isAtTop ? '1' : '0'
+    }
+  }
+
+  const allWallets = useMemo<WalletListItemProps[]>(() => {
+    // Get read-only linked wallets that aren't connected
+    const readOnlyLinkedWallets = (linkedWallets ?? [])
+      .filter(lw => !wallets.some(w => w.address.toLowerCase() === lw.linkedWalletAddress.toLowerCase()))
+      .map(lw => ({
+        name: lw.walletType || 'Linked Wallet',
+        address: lw.linkedWalletAddress,
+        isEmbedded: false,
+        isActive: false,
+        isLinked: true,
+        isReadOnly: true,
+        onDisconnect: () => {}, // No-op for read-only wallets
+        onUnlink: () => {
+          unlinkWallet(lw.linkedWalletAddress)
+        }
+      }))
+
+    // Transform ConnectedWallet to WalletListItemProps
+    const connectedWallets = wallets.map(wallet => ({
+      name: wallet.name,
+      address: wallet.address,
+      isEmbedded: wallet.isEmbedded,
+      isActive: wallet.isActive,
+      isLinked: linkedWallets?.some(lw => lw.linkedWalletAddress.toLowerCase() === wallet.address.toLowerCase()) ?? false,
+      isReadOnly: false,
+      onDisconnect: () => disconnectWallet(wallet.address),
+      onUnlink: () => {} // No-op for connected wallets
+    }))
+
+    // Sort wallets: embedded first, then by name and address
+    const sortedConnectedWallets = [...connectedWallets].sort((a, b) => {
+      if (a.isEmbedded && !b.isEmbedded) {
+        return -1
+      }
+      if (!a.isEmbedded && b.isEmbedded) {
+        return 1
+      }
+      return (
+        a.name.toLowerCase().localeCompare(b.name.toLowerCase()) || a.address.toLowerCase().localeCompare(b.address.toLowerCase())
+      )
+    })
+
+    // Sort read-only linked wallets by name and address
+    const sortedReadOnlyWallets = [...readOnlyLinkedWallets].sort(
+      (a, b) =>
+        a.name.toLowerCase().localeCompare(b.name.toLowerCase()) || a.address.toLowerCase().localeCompare(b.address.toLowerCase())
+    )
+
+    // Combine all wallets
+    return [...sortedConnectedWallets, ...sortedReadOnlyWallets]
+  }, [wallets, linkedWallets, disconnectWallet])
+
+  useEffect(() => {
+    const container = scrollContainerRef.current
+    if (container) {
+      // Initial check
+      updateScrollFades(container)
+
+      // Check again after animations complete (approximately)
+      const timeout = setTimeout(() => {
+        updateScrollFades(container)
+      }, 500) // Half second delay to allow animations to settle
+
+      return () => clearTimeout(timeout)
+    }
+  }, [allWallets]) // Re-run when wallets change as it affects content height
+
+  if (wallets.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="flex mt-4 flex-col">
+      <div className="relative">
+        <motion.div
+          className="flex py-1 gap-2 flex-col overflow-y-auto"
+          ref={scrollContainerRef}
+          onScroll={(e: React.UIEvent<HTMLDivElement>) => {
+            updateScrollFades(e.currentTarget)
+          }}
+          style={{
+            maxHeight: `${MAX_HEIGHT}px`,
+            scrollbarWidth: 'none',
+            borderRadius: '8px',
+            position: 'relative'
+          }}
+        >
+          <AnimatePresence mode="popLayout" initial={false}>
+            {allWallets.map((wallet, index) => (
+              <motion.div
+                key={wallet.address}
+                custom={index}
+                initial="hidden"
+                animate="visible"
+                variants={{
+                  hidden: { opacity: 0, y: 20 },
+                  visible: (i: number) => ({
+                    opacity: 1,
+                    y: 0,
+                    transition: {
+                      type: 'spring',
+                      stiffness: 400,
+                      damping: 30,
+                      delay: i * 0.1
+                    }
+                  })
+                }}
+                style={{ willChange: 'transform, opacity', transformOrigin: 'center' }}
+              >
+                <WalletListItem {...wallet} />
+              </motion.div>
+            ))}
+          </AnimatePresence>
+        </motion.div>
+        <div
+          className="scroll-fade-top absolute top-0 left-0 right-0"
+          style={{
+            height: '30px',
+            background: 'linear-gradient(to top, rgba(0, 0, 0, 0), var(--color-background-primary))',
+            pointerEvents: 'none',
+            opacity: 0,
+            transition: 'opacity 0.2s'
+          }}
+        />
+        <div
+          className="scroll-fade absolute bottom-0 left-0 right-0"
+          style={{
+            height: '40px',
+            background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-background-primary))',
+            pointerEvents: 'none',
+            opacity: 0,
+            transition: 'opacity 0.2s'
+          }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/Connect/EmailWaasVerify.tsx

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

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

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

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