@0xsequence/wallet-widget 0.0.0-20250314205219

package/src/components/NetworkBadge.tsx

@@ -0,0 +1,35 @@
+import { getNetwork, getNetworkColor, getNetworkBackgroundColor } from '@0xsequence/connect'
+import { NetworkImage, Text } from '@0xsequence/design-system'
+import React from 'react'
+
+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"
+        capitalize
+        ellipsis
+        style={{
+          color: chainColor
+        }}
+      >
+        {network.title ?? network.name}
+      </Text>
+    </div>
+  )
+}

package/src/components/SelectButton/SelectButton.tsx

@@ -0,0 +1,33 @@
+import { Card, cn } from '@0xsequence/design-system'
+import React, { ReactNode } from 'react'
+
+import { SelectedIndicator } from './SelectedIndicator'
+
+export interface SelectButtonProps {
+  children?: ReactNode
+  className?: string
+  onClick: (value: any) => void
+  value: any
+  selected: boolean
+  disabled?: boolean
+  hideIndicator?: boolean
+  squareIndicator?: boolean
+}
+
+export const SelectButton = (props: SelectButtonProps) => {
+  const { value, selected, children, disabled, onClick, className, hideIndicator, squareIndicator = false, ...rest } = props
+
+  return (
+    <Card
+      className={cn('flex select-none items-center justify-between text-left w-full border-none appearance-none', className)}
+      clickable
+      disabled={disabled}
+      asChild
+    >
+      <button onClick={() => onClick(value)} {...rest}>
+        {children}
+        {!hideIndicator && <SelectedIndicator selected={selected} squareIndicator={squareIndicator} />}
+      </button>
+    </Card>
+  )
+}

package/src/components/SelectButton/SelectedIndicator.tsx

@@ -0,0 +1,34 @@
+import { CheckmarkIcon, cn } from '@0xsequence/design-system'
+import { motion } from 'motion/react'
+import React from 'react'
+
+interface SelectedIndicatorProps {
+  selected: boolean
+  squareIndicator?: boolean
+  className?: string
+}
+
+export const SelectedIndicator = (props: SelectedIndicatorProps) => {
+  const { selected, className, squareIndicator = false } = props
+  return (
+    <div
+      className={cn(
+        `w-5 h-5 flex border-solid border-1 relative items-center justify-center shrink-0 border-border-normal`,
+        squareIndicator ? 'rounded-sm' : 'rounded-full',
+        className
+      )}
+    >
+      <motion.div
+        className={cn(
+          'flex absolute text-text-inverse100 justify-center items-center bg-border-normal',
+          squareIndicator ? 'rounded-sm w-5 h-5' : 'rounded-full w-[14px] h-[14px]'
+        )}
+        initial={{ opacity: selected ? 1 : 0, scale: selected ? 1 : 0.5 }}
+        animate={{ opacity: selected ? 1 : 0, scale: selected ? 1 : 0.5 }}
+        transition={{ ease: 'backOut' }}
+      >
+        {squareIndicator && <CheckmarkIcon className="text-white w-[14px] h-[14px]" />}
+      </motion.div>
+    </div>
+  )
+}

package/src/components/SelectButton/index.ts

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

package/src/components/SendItemInfo.tsx

@@ -0,0 +1,83 @@
+import { formatDisplay } from '@0xsequence/connect'
+import { NetworkImage, Skeleton, Text, TokenImage } from '@0xsequence/design-system'
+import React from 'react'
+import { formatUnits } from 'viem'
+
+import { useSettings } from '../hooks'
+
+import { CollectibleTileImage } from './CollectibleTileImage'
+
+interface SendItemInfoProps {
+  name: string
+  symbol: string
+  decimals: number
+  balance: string
+  imageUrl?: string
+  fiatValue?: string
+  chainId: number
+  showSquareImage?: boolean
+  balanceSuffix?: string
+}
+
+export const SendItemInfoSkeleton = () => {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex justify-center items-center gap-2">
+        <Skeleton className="rounded-full" style={{ width: 30, height: 30 }} />
+        <div className="flex flex-col gap-2 items-start">
+          <Skeleton style={{ width: 100, height: 14 }} />
+          <Skeleton style={{ width: 75, height: 14 }} />
+        </div>
+      </div>
+      <div className="flex flex-col gap-2 items-end">
+        <Skeleton style={{ width: 100, height: 14 }} />
+        <Skeleton style={{ width: 50, height: 12 }} />
+      </div>
+    </div>
+  )
+}
+
+export const SendItemInfo = ({
+  imageUrl,
+  name,
+  decimals,
+  balance,
+  symbol,
+  fiatValue,
+  chainId,
+  showSquareImage,
+  balanceSuffix = 'available'
+}: SendItemInfoProps) => {
+  const { fiatCurrency } = useSettings()
+  const formattedBalance = formatUnits(BigInt(balance), decimals)
+  const balanceDisplayed = formatDisplay(formattedBalance)
+
+  return (
+    <div className="flex items-end justify-between">
+      <div className="flex justify-between items-center gap-2">
+        {showSquareImage ? (
+          <div style={{ width: '40px' }}>
+            <CollectibleTileImage imageUrl={imageUrl} />
+          </div>
+        ) : (
+          <TokenImage src={imageUrl} size="lg" />
+        )}
+        <div className="flex flex-col items-start">
+          <div className="flex flex-row items-center gap-1">
+            <Text variant="medium" color="primary">
+              {name}
+            </Text>
+            <NetworkImage chainId={chainId} size="xs" />
+          </div>
+          <Text color="muted" variant="normal">
+            {' '}
+            {`${balanceDisplayed} ${symbol} ${balanceSuffix}`}
+          </Text>
+        </div>
+      </div>
+      <div className="flex flex-col items-end justify-end">
+        {fiatValue && <Text variant="normal" color="primary">{`${fiatCurrency.sign}${fiatValue}`}</Text>}
+      </div>
+    </div>
+  )
+}

package/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { getModalPositionCss, useTheme, ShadowRoot } from '@0xsequence/connect'
+import { Modal, Scroll } from '@0xsequence/design-system'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { AnimatePresence } from 'motion/react'
+import React, { useState } from 'react'
+
+import { HEADER_HEIGHT } from '../../constants'
+import { History, Navigation, NavigationContextProvider, WalletModalContextProvider, WalletOptions } from '../../contexts'
+
+import { getHeader, getContent } from './utils'
+
+export type SequenceWalletProviderProps = {
+  children: React.ReactNode
+}
+
+const DEFAULT_LOCATION: Navigation = {
+  location: 'home'
+}
+
+export const SequenceWalletProvider = (props: SequenceWalletProviderProps) => {
+  const queryClient = new QueryClient()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WalletContent {...props} />
+    </QueryClientProvider>
+  )
+}
+
+export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
+  const { theme, position } = useTheme()
+
+  // Wallet Modal Context
+  const [openWalletModal, setOpenWalletModalState] = useState<boolean>(false)
+
+  const setOpenWalletModal = (open: boolean, options?: WalletOptions) => {
+    setOpenWalletModalState(open)
+    setTimeout(() => {
+      setHistory(options?.defaultNavigation ? [options.defaultNavigation] : [])
+    }, 0)
+  }
+
+  // Navigation Context
+  const [history, setHistory] = useState<History>([])
+  const [isBackButtonEnabled, setIsBackButtonEnabled] = useState(true)
+  const navigation = history.length > 0 ? history[history.length - 1] : DEFAULT_LOCATION
+
+  const displayScrollbar =
+    navigation.location === 'home' ||
+    navigation.location === 'collection-details' ||
+    navigation.location === 'collectible-details' ||
+    navigation.location === 'coin-details' ||
+    navigation.location === 'history' ||
+    navigation.location === 'search' ||
+    navigation.location === 'search-view-all' ||
+    navigation.location === 'settings-currency'
+
+  return (
+    <WalletModalContextProvider value={{ setOpenWalletModal, openWalletModalState: openWalletModal }}>
+      <NavigationContextProvider value={{ setHistory, history, isBackButtonEnabled, setIsBackButtonEnabled }}>
+        <ShadowRoot theme={theme}>
+          <AnimatePresence>
+            {openWalletModal && (
+              <Modal
+                contentProps={{
+                  style: {
+                    maxWidth: '400px',
+                    height: 'fit-content',
+                    ...getModalPositionCss(position),
+                    scrollbarColor: 'gray black',
+                    scrollbarWidth: 'thin'
+                  }
+                }}
+                scroll={false}
+                onClose={() => setOpenWalletModal(false)}
+              >
+                <div id="sequence-kit-wallet-content">
+                  {getHeader(navigation)}
+
+                  {displayScrollbar ? (
+                    <Scroll style={{ paddingTop: HEADER_HEIGHT, height: 'min(800px, 80vh)' }}>{getContent(navigation)}</Scroll>
+                  ) : (
+                    getContent(navigation)
+                  )}
+                </div>
+              </Modal>
+            )}
+          </AnimatePresence>
+        </ShadowRoot>
+        {children}
+      </NavigationContextProvider>
+    </WalletModalContextProvider>
+  )
+}

package/src/components/SequenceWalletProvider/index.ts

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

package/src/components/SequenceWalletProvider/utils/index.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+
+import { Navigation } from '../../../contexts'
+import {
+  CoinDetails,
+  CollectibleDetails,
+  CollectionDetails,
+  Home,
+  Receive,
+  SendCoin,
+  SendCollectible,
+  History,
+  SearchWallet,
+  SearchWalletViewAll,
+  SettingsMenu,
+  SettingsCurrency,
+  SettingsNetwork,
+  SettingsGeneral,
+  TransactionDetails,
+  SwapCoin,
+  SwapList
+} from '../../../views'
+import { NavigationHeader } from '../../NavigationHeader'
+import { WalletHeader } from '../../WalletHeader'
+
+export const getContent = (navigation: Navigation) => {
+  const { location } = navigation
+
+  switch (location) {
+    case 'send-coin':
+      return <SendCoin chainId={navigation.params.chainId} contractAddress={navigation.params.contractAddress} />
+    case 'send-collectible':
+      return (
+        <SendCollectible
+          chainId={navigation.params.chainId}
+          contractAddress={navigation.params.contractAddress}
+          tokenId={navigation.params.tokenId}
+        />
+      )
+    case 'receive':
+      return <Receive />
+    case 'history':
+      return <History />
+    case 'search':
+      return <SearchWallet />
+    case 'search-view-all':
+      return <SearchWalletViewAll defaultTab={navigation.params.defaultTab} />
+    case 'settings':
+      return <SettingsMenu />
+    case 'settings-general':
+      return <SettingsGeneral />
+    case 'settings-currency':
+      return <SettingsCurrency />
+    case 'settings-networks':
+      return <SettingsNetwork />
+    case 'coin-details':
+      return <CoinDetails contractAddress={navigation.params.contractAddress} chainId={navigation.params.chainId} />
+    case 'collectible-details':
+      return (
+        <CollectibleDetails
+          contractAddress={navigation.params.contractAddress}
+          chainId={navigation.params.chainId}
+          tokenId={navigation.params.tokenId}
+        />
+      )
+    case 'collection-details':
+      return <CollectionDetails contractAddress={navigation.params.contractAddress} chainId={navigation.params.chainId} />
+    case 'transaction-details':
+      return <TransactionDetails transaction={navigation.params.transaction} />
+    case 'swap-coin':
+      return <SwapCoin contractAddress={navigation.params.contractAddress} chainId={navigation.params.chainId} />
+    case 'swap-coin-list':
+      return (
+        <SwapList
+          contractAddress={navigation.params.contractAddress}
+          chainId={navigation.params.chainId}
+          amount={navigation.params.amount}
+        />
+      )
+    default:
+      return <Home />
+  }
+}
+
+export const getHeader = (navigation: Navigation) => {
+  const { location } = navigation
+  switch (location) {
+    case 'search':
+      return <NavigationHeader primaryText="Search wallet" />
+    case 'search-view-all':
+      return <NavigationHeader secondaryText="Search wallet / " primaryText="View all" />
+    case 'settings':
+      return <NavigationHeader secondaryText="Wallet / " primaryText="Settings" />
+    case 'settings-general':
+      return <NavigationHeader secondaryText="Wallet / Settings / " primaryText="General" />
+    case 'settings-currency':
+      return <NavigationHeader secondaryText="Wallet / Settings / " primaryText="Currency" />
+    case 'settings-networks':
+      return <NavigationHeader secondaryText="Wallet / Settings / " primaryText="Networks" />
+    case 'receive':
+      return <NavigationHeader secondaryText="Wallet / " primaryText="Receive" />
+    case 'history':
+      return <NavigationHeader secondaryText="Wallet / " primaryText="History" />
+    case 'coin-details':
+      return <WalletHeader />
+    case 'collectible-details':
+      return <WalletHeader />
+    case 'transaction-details':
+      return <NavigationHeader secondaryText="" primaryText="" />
+    case 'send-collectible':
+    case 'send-coin':
+      return <NavigationHeader secondaryText="Wallet / " primaryText="Send" />
+    case 'swap-coin':
+    case 'swap-coin-list':
+      return <NavigationHeader secondaryText="Wallet / " primaryText="Buy" />
+    default:
+      return <WalletHeader />
+  }
+}

package/src/components/TransactionConfirmation.tsx

@@ -0,0 +1,183 @@
+import { truncateAtMiddle } from '@0xsequence/connect'
+import { Button, ChevronRightIcon, Text, Card, GradientAvatar, Spinner } from '@0xsequence/design-system'
+import { useIndexerClient } from '@0xsequence/react-hooks'
+import { useQuery } from '@tanstack/react-query'
+import React, { useState } from 'react'
+import { useAccount } from 'wagmi'
+
+import { FeeOption, FeeOptionSelector } from './FeeOptionSelector'
+import { SendItemInfo } from './SendItemInfo'
+
+interface TransactionConfirmationProps {
+  // Display data
+  name: string
+  symbol: string
+  imageUrl?: string
+  amount: string
+  toAddress: string
+  showSquareImage?: boolean
+  fiatValue?: string
+  chainId: number
+  balance: string
+  decimals: number
+  feeOptions?: {
+    options: FeeOption[]
+    chainId: number
+  }
+  onSelectFeeOption?: (feeTokenAddress: string | null) => void
+  isLoading?: boolean
+
+  // Callbacks
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+const useFeeOptionBalances = (feeOptions: TransactionConfirmationProps['feeOptions'], chainId: number) => {
+  const { address: accountAddress } = useAccount()
+  const indexerClient = useIndexerClient(chainId)
+
+  return useQuery({
+    queryKey: ['feeOptionBalances', chainId, accountAddress, feeOptions?.options?.length],
+    queryFn: async () => {
+      if (!feeOptions?.options || !accountAddress || !indexerClient) {
+        return []
+      }
+
+      const nativeTokenBalance = await indexerClient.getEtherBalance({
+        accountAddress
+      })
+
+      const tokenBalances = await indexerClient.getTokenBalances({
+        accountAddress
+      })
+
+      return feeOptions.options.map(option => {
+        if (option.token.contractAddress === null) {
+          return {
+            tokenName: option.token.name,
+            decimals: option.token.decimals || 0,
+            balance: nativeTokenBalance.balance.balanceWei
+          }
+        } else {
+          return {
+            tokenName: option.token.name,
+            decimals: option.token.decimals || 0,
+            balance:
+              tokenBalances.balances.find(b => b.contractAddress.toLowerCase() === option.token.contractAddress?.toLowerCase())
+                ?.balance || '0'
+          }
+        }
+      })
+    },
+    enabled: Boolean(feeOptions?.options && accountAddress && indexerClient),
+    refetchInterval: 10000,
+    staleTime: 10000
+  })
+}
+
+export const TransactionConfirmation = ({
+  name,
+  symbol,
+  imageUrl,
+  amount,
+  toAddress,
+  showSquareImage,
+  fiatValue,
+  chainId,
+  balance,
+  decimals,
+  feeOptions,
+  onSelectFeeOption,
+  isLoading,
+  onConfirm,
+  onCancel
+}: TransactionConfirmationProps) => {
+  const [selectedFeeOptionAddress, setSelectedFeeOptionAddress] = useState<string>()
+  const { data: feeOptionBalances = [] } = useFeeOptionBalances(feeOptions, chainId)
+
+  const handleFeeOptionSelect = (address: string) => {
+    setSelectedFeeOptionAddress(address)
+    onSelectFeeOption?.(address)
+  }
+
+  // If feeOptions exist and have options, a selection is required
+  // If feeOptions don't exist or have no options, no selection is required
+  const isFeeSelectionRequired = Boolean(feeOptions?.options?.length)
+  const isConfirmDisabled = isFeeSelectionRequired && !selectedFeeOptionAddress
+
+  return (
+    <div className="flex w-full h-full items-center justify-center bg-background-primary">
+      <div className="flex gap-2 flex-col bg-background-primary w-full">
+        <div className="flex bg-background-secondary rounded-xl p-4 pb-3 gap-2 flex-col">
+          <SendItemInfo
+            imageUrl={imageUrl}
+            showSquareImage={showSquareImage}
+            name={name}
+            symbol={symbol}
+            chainId={chainId}
+            balance={balance}
+            decimals={decimals}
+          />
+
+          <div className="flex mt-2 gap-1 flex-col">
+            <Text variant="small" color="muted">
+              Amount
+            </Text>
+            <div className="flex flex-row items-center gap-2">
+              <Text variant="normal" color="primary">
+                {amount} {symbol}
+              </Text>
+              {fiatValue && (
+                <Text variant="small" color="muted">
+                  ~${fiatValue}
+                </Text>
+              )}
+            </div>
+          </div>
+
+          <div className="flex mt-2 gap-1 flex-col">
+            <Text variant="small" color="muted">
+              To
+            </Text>
+            <Card className="flex w-full flex-row items-center" style={{ height: '52px' }}>
+              <div className="flex flex-row justify-center items-center gap-2">
+                <GradientAvatar size="sm" address={toAddress} />
+                <Text color="primary" variant="normal">{`0x${truncateAtMiddle(toAddress.substring(2), 10)}`}</Text>
+              </div>
+            </Card>
+          </div>
+
+          {isFeeSelectionRequired && feeOptions?.options && (
+            <FeeOptionSelector
+              txnFeeOptions={feeOptions.options}
+              feeOptionBalances={feeOptionBalances}
+              selectedFeeOptionAddress={selectedFeeOptionAddress}
+              setSelectedFeeOptionAddress={handleFeeOptionSelect}
+            />
+          )}
+        </div>
+
+        <div className="flex mt-3 gap-2">
+          {isLoading ? (
+            <div className="flex w-full items-center justify-center" style={{ height: '52px' }}>
+              <Spinner />
+            </div>
+          ) : (
+            <>
+              <Button
+                className="w-full"
+                variant="primary"
+                size="lg"
+                onClick={onConfirm}
+                label="Confirm"
+                rightIcon={ChevronRightIcon}
+                disabled={isConfirmDisabled}
+              />
+              <Button className="w-full" variant="glass" size="lg" onClick={onCancel} label="Cancel" />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}