@0xsequence/wallet-widget 0.0.0-20250314205219

package/src/views/SendCollectible.tsx

@@ -0,0 +1,447 @@
+import {
+  getNativeTokenInfoByChainId,
+  useAnalyticsContext,
+  ExtendedConnector,
+  truncateAtMiddle,
+  useCheckWaasFeeOptions,
+  useWaasFeeOptions
+} from '@0xsequence/connect'
+import {
+  Button,
+  ChevronRightIcon,
+  CopyIcon,
+  CloseIcon,
+  GradientAvatar,
+  AddIcon,
+  SubtractIcon,
+  Text,
+  NumericInput,
+  TextInput,
+  Spinner,
+  Card
+} from '@0xsequence/design-system'
+import { ContractType, ContractVerificationStatus, TokenBalance } from '@0xsequence/indexer'
+import { useGetTokenBalancesDetails } from '@0xsequence/react-hooks'
+import { useRef, useState, ChangeEvent, useEffect } from 'react'
+import { encodeFunctionData, formatUnits, parseUnits, toHex } from 'viem'
+import { useAccount, useChainId, useSwitchChain, useConfig, useSendTransaction } from 'wagmi'
+
+import { SendItemInfo } from '../components/SendItemInfo'
+import { TransactionConfirmation } from '../components/TransactionConfirmation'
+import { ERC_1155_ABI, ERC_721_ABI, HEADER_HEIGHT } from '../constants'
+import { useNavigationContext } from '../contexts/Navigation'
+import { useNavigation } from '../hooks'
+import { limitDecimals, isEthAddress } from '../utils'
+
+interface SendCollectibleProps {
+  chainId: number
+  contractAddress: string
+  tokenId: string
+}
+
+export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendCollectibleProps) => {
+  const { setNavigation } = useNavigation()
+  const { setIsBackButtonEnabled } = useNavigationContext()
+  const { analytics } = useAnalyticsContext()
+  const { chains } = useConfig()
+  const connectedChainId = useChainId()
+  const { address: accountAddress = '', connector } = useAccount()
+  const isConnectorSequenceBased = !!(connector as ExtendedConnector)?._wallet?.isSequenceBased
+  const isCorrectChainId = connectedChainId === chainId
+  const showSwitchNetwork = !isCorrectChainId && !isConnectorSequenceBased
+  const { switchChain } = useSwitchChain()
+  const amountInputRef = useRef<HTMLInputElement>(null)
+  const [amount, setAmount] = useState<string>('0')
+  const [toAddress, setToAddress] = useState<string>('')
+  const [showAmountControls, setShowAmountControls] = useState<boolean>(false)
+  const { sendTransaction } = useSendTransaction()
+  const [isSendTxnPending, setIsSendTxnPending] = useState(false)
+  const [showConfirmation, setShowConfirmation] = useState(false)
+  const [feeOptions, setFeeOptions] = useState<
+    | {
+        options: any[]
+        chainId: number
+      }
+    | undefined
+  >()
+  const [isCheckingFeeOptions, setIsCheckingFeeOptions] = useState(false)
+  const [selectedFeeTokenAddress, setSelectedFeeTokenAddress] = useState<string | null>(null)
+  const checkFeeOptions = useCheckWaasFeeOptions()
+  const [pendingFeeOption, confirmFeeOption, _rejectFeeOption] = useWaasFeeOptions()
+
+  const { data: dataTokens, isPending: isPendingBalances } = useGetTokenBalancesDetails({
+    filter: {
+      accountAddresses: [accountAddress],
+      contractStatus: ContractVerificationStatus.ALL,
+      contractWhitelist: [contractAddress],
+      omitNativeBalances: false
+    },
+    chainIds: [chainId]
+  })
+
+  const tokenBalance = dataTokens && dataTokens.length > 0 ? dataTokens.find(balance => balance.tokenID === tokenId) : undefined
+
+  let contractType: ContractType | undefined
+  if (tokenBalance) {
+    contractType = tokenBalance.contractType
+  }
+
+  useEffect(() => {
+    if (tokenBalance) {
+      if (contractType === 'ERC721') {
+        setAmount('1')
+        setShowAmountControls(false)
+      } else if (contractType === 'ERC1155') {
+        if (Number(formatUnits(BigInt(tokenBalance?.balance || 0), decimals)) >= 1) {
+          setAmount('1')
+        }
+        setShowAmountControls(true)
+      }
+    }
+  }, [tokenBalance])
+
+  useEffect(() => {
+    if (pendingFeeOption && selectedFeeTokenAddress !== null) {
+      confirmFeeOption(pendingFeeOption.id, selectedFeeTokenAddress)
+    }
+  }, [pendingFeeOption, selectedFeeTokenAddress])
+
+  useEffect(() => {
+    setIsBackButtonEnabled(!showConfirmation)
+  }, [showConfirmation, setIsBackButtonEnabled])
+
+  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
+
+  const isPending = isPendingBalances
+
+  if (isPending) {
+    return null
+  }
+
+  const decimals = tokenBalance?.tokenMetadata?.decimals || 0
+  const name = tokenBalance?.tokenMetadata?.name || 'Unknown'
+  const imageUrl = tokenBalance?.tokenMetadata?.image || tokenBalance?.contractInfo?.logoURI || ''
+  const amountToSendFormatted = amount === '' ? '0' : amount
+  const amountRaw = parseUnits(amountToSendFormatted, decimals)
+
+  const insufficientFunds = amountRaw > BigInt(tokenBalance?.balance || '0')
+  const isNonZeroAmount = amountRaw > 0n
+
+  const handleChangeAmount = (ev: ChangeEvent<HTMLInputElement>) => {
+    const { value } = ev.target
+
+    // Prevent value from having more decimals than the token supports
+    const formattedValue = limitDecimals(value, decimals)
+
+    setAmount(formattedValue)
+  }
+
+  const handleSubtractOne = () => {
+    amountInputRef.current?.focus()
+    const decrementedAmount = Number(amount) - 1
+
+    const newAmount = Math.max(decrementedAmount, 0).toString()
+    setAmount(newAmount)
+  }
+
+  const handleAddOne = () => {
+    amountInputRef.current?.focus()
+    const incrementedAmount = Number(amount) + 1
+    const maxAmount = Number(formatUnits(BigInt(tokenBalance?.balance || 0), decimals))
+
+    const newAmount = Math.min(incrementedAmount, maxAmount).toString()
+
+    setAmount(newAmount)
+  }
+
+  const handleMax = () => {
+    amountInputRef.current?.focus()
+    const maxAmount = formatUnits(BigInt(tokenBalance?.balance || 0), decimals).toString()
+
+    setAmount(maxAmount)
+  }
+
+  const handlePaste = async () => {
+    const result = await navigator.clipboard.readText()
+    setToAddress(result)
+  }
+
+  const handleToAddressClear = () => {
+    setToAddress('')
+  }
+
+  const handleSendClick = async (e: ChangeEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    setIsCheckingFeeOptions(true)
+
+    const sendAmount = parseUnits(amountToSendFormatted, decimals)
+    let transaction
+
+    switch (contractType) {
+      case 'ERC721':
+        transaction = {
+          to: (tokenBalance as TokenBalance).contractAddress as `0x${string}`,
+          data: encodeFunctionData({
+            abi: ERC_721_ABI,
+            functionName: 'safeTransferFrom',
+            args: [accountAddress, toAddress, tokenId]
+          })
+        }
+        break
+      case 'ERC1155':
+      default:
+        transaction = {
+          to: (tokenBalance as TokenBalance).contractAddress as `0x${string}`,
+          data: encodeFunctionData({
+            abi: ERC_1155_ABI,
+            functionName: 'safeBatchTransferFrom',
+            args: [accountAddress, toAddress, [tokenId], [toHex(sendAmount)], new Uint8Array()]
+          })
+        }
+    }
+
+    // Check fee options before showing confirmation
+    const feeOptionsResult = await checkFeeOptions({
+      transactions: [transaction],
+      chainId
+    })
+
+    setFeeOptions(
+      feeOptionsResult?.feeOptions
+        ? {
+            options: feeOptionsResult.feeOptions,
+            chainId
+          }
+        : undefined
+    )
+
+    setShowConfirmation(true)
+
+    setIsCheckingFeeOptions(false)
+  }
+
+  const executeTransaction = async () => {
+    if (!isCorrectChainId && isConnectorSequenceBased) {
+      switchChain({ chainId })
+    }
+
+    const sendAmount = parseUnits(amountToSendFormatted, decimals)
+
+    const txOptions = {
+      onSettled: (result: any) => {
+        setIsBackButtonEnabled(true)
+
+        if (result) {
+          setNavigation({
+            location: 'home'
+          })
+        }
+        setIsSendTxnPending(false)
+      }
+    }
+
+    switch (contractType) {
+      case 'ERC721':
+        analytics?.track({
+          event: 'SEND_TRANSACTION_REQUEST',
+          props: {
+            walletClient: (connector as ExtendedConnector | undefined)?._wallet?.id || 'unknown',
+            source: 'sequence-kit/wallet'
+          }
+        })
+        setIsSendTxnPending(true)
+        // _from, _to, _id
+        sendTransaction(
+          {
+            to: (tokenBalance as TokenBalance).contractAddress as `0x${string}`,
+            data: encodeFunctionData({
+              abi: ERC_721_ABI,
+              functionName: 'safeTransferFrom',
+              args: [accountAddress, toAddress, tokenId]
+            }),
+            gas: null
+          },
+          txOptions
+        )
+        break
+      case 'ERC1155':
+      default:
+        analytics?.track({
+          event: 'SEND_TRANSACTION_REQUEST',
+          props: {
+            walletClient: (connector as ExtendedConnector | undefined)?._wallet?.id || 'unknown',
+            source: 'sequence-kit/wallet'
+          }
+        })
+        setIsSendTxnPending(true)
+        // _from, _to, _ids, _amounts, _data
+        sendTransaction(
+          {
+            to: (tokenBalance as TokenBalance).contractAddress as `0x${string}`,
+            data: encodeFunctionData({
+              abi: ERC_1155_ABI,
+              functionName: 'safeBatchTransferFrom',
+              args: [accountAddress, toAddress, [tokenId], [toHex(sendAmount)], new Uint8Array()]
+            }),
+            gas: null
+          },
+          txOptions
+        )
+    }
+  }
+
+  const maxAmount = formatUnits(BigInt(tokenBalance?.balance || 0), decimals).toString()
+
+  const isMinimum = Number(amount) === 0
+  const isMaximum = Number(amount) >= Number(maxAmount)
+
+  return (
+    <form
+      className="flex p-5 pt-3 gap-2 flex-col"
+      style={{
+        marginTop: HEADER_HEIGHT
+      }}
+      onSubmit={handleSendClick}
+    >
+      {!showConfirmation && (
+        <>
+          <div className="flex bg-background-secondary rounded-xl p-4 gap-2 flex-col">
+            <SendItemInfo
+              imageUrl={imageUrl}
+              showSquareImage
+              decimals={decimals}
+              name={name}
+              symbol={''}
+              balance={tokenBalance?.balance || '0'}
+              chainId={chainId}
+            />
+            <NumericInput
+              ref={amountInputRef}
+              name="amount"
+              value={amount}
+              onChange={handleChangeAmount}
+              disabled={!showAmountControls}
+              controls={
+                <>
+                  {showAmountControls && (
+                    <div className="flex gap-2">
+                      <Button disabled={isMinimum} size="xs" onClick={handleSubtractOne} leftIcon={SubtractIcon} />
+                      <Button disabled={isMaximum} size="xs" onClick={handleAddOne} leftIcon={AddIcon} />
+                      <Button className="shrink-0" size="xs" shape="square" label="Max" onClick={handleMax} data-id="maxCoin" />
+                    </div>
+                  )}
+                </>
+              }
+            />
+            {insufficientFunds && (
+              <Text className="mt-2" variant="normal" color="negative" asChild>
+                <div>Insufficient Balance</div>
+              </Text>
+            )}
+          </div>
+          <div className="flex bg-background-secondary rounded-xl p-4 gap-2 flex-col">
+            <Text variant="normal" color="muted">
+              To
+            </Text>
+            {isEthAddress(toAddress) ? (
+              <Card
+                className="flex w-full flex-row justify-between items-center"
+                clickable
+                onClick={handleToAddressClear}
+                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>
+                <CloseIcon className="text-white" size="sm" />
+              </Card>
+            ) : (
+              <TextInput
+                value={toAddress}
+                onChange={ev => setToAddress(ev.target.value)}
+                placeholder={`${nativeTokenInfo.name} Address (0x...)`}
+                name="to-address"
+                data-1p-ignore
+                controls={
+                  <Button
+                    className="shrink-0"
+                    size="xs"
+                    shape="square"
+                    label="Paste"
+                    onClick={handlePaste}
+                    data-id="to-address"
+                    leftIcon={CopyIcon}
+                  />
+                }
+              />
+            )}
+          </div>
+
+          {showSwitchNetwork && (
+            <div className="mt-3">
+              <Text className="mb-2" variant="small" color="negative">
+                The wallet is connected to the wrong network. Please switch network before proceeding
+              </Text>
+              <Button
+                className="mt-2 w-full"
+                variant="primary"
+                size="lg"
+                type="button"
+                label="Switch Network"
+                onClick={() => switchChain({ chainId })}
+                disabled={isCorrectChainId}
+              />
+            </div>
+          )}
+
+          <div className="flex items-center justify-center" style={{ height: '52px' }}>
+            {isCheckingFeeOptions ? (
+              <Spinner />
+            ) : (
+              <Button
+                className="text-primary mt-3 w-full"
+                variant="primary"
+                size="lg"
+                type="submit"
+                disabled={
+                  !isNonZeroAmount ||
+                  !isEthAddress(toAddress) ||
+                  insufficientFunds ||
+                  (!isCorrectChainId && !isConnectorSequenceBased)
+                }
+                label="Send"
+                rightIcon={ChevronRightIcon}
+              />
+            )}
+          </div>
+        </>
+      )}
+      {showConfirmation && (
+        <TransactionConfirmation
+          name={name}
+          symbol=""
+          imageUrl={imageUrl}
+          amount={amountToSendFormatted}
+          toAddress={toAddress}
+          showSquareImage={true}
+          chainId={chainId}
+          balance={tokenBalance?.balance || '0'}
+          decimals={decimals}
+          feeOptions={feeOptions}
+          onSelectFeeOption={feeTokenAddress => {
+            setSelectedFeeTokenAddress(feeTokenAddress)
+          }}
+          isLoading={isSendTxnPending}
+          onConfirm={() => {
+            executeTransaction()
+          }}
+          onCancel={() => {
+            setShowConfirmation(false)
+          }}
+        />
+      )}
+    </form>
+  )
+}

package/src/views/Settings/Currency.tsx

@@ -0,0 +1,34 @@
+import { Text } from '@0xsequence/design-system'
+import React from 'react'
+
+import { SelectButton } from '../../components/SelectButton'
+import { supportedFiatCurrencies } from '../../constants'
+import { useSettings } from '../../hooks'
+
+export const SettingsCurrency = () => {
+  const { fiatCurrency, setFiatCurrency } = useSettings()
+
+  return (
+    <div className="pb-5 px-4 pt-3">
+      <div className="flex flex-col gap-2">
+        {supportedFiatCurrencies.map(currency => {
+          return (
+            <SelectButton
+              key={currency.symbol}
+              value={currency.symbol}
+              selected={currency.symbol === fiatCurrency.symbol}
+              onClick={() => setFiatCurrency && setFiatCurrency(currency)}
+            >
+              <div className="flex gap-2 justify-start items-center">
+                <Text color="primary" fontWeight="bold">
+                  {currency.symbol}
+                </Text>
+                <Text color="muted">{currency.name.message}</Text>
+              </div>
+            </SelectButton>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/views/Settings/General.tsx

@@ -0,0 +1,55 @@
+import { Card, Switch, Text } from '@0xsequence/design-system'
+// import { useTheme } from '@0xsequence/connect'
+import React from 'react'
+
+import { HEADER_HEIGHT } from '../../constants'
+import { useSettings } from '../../hooks'
+
+export const SettingsGeneral = () => {
+  // const { theme, setTheme } = useTheme()
+  const { hideUnlistedTokens, setHideUnlistedTokens, hideCollectibles, setHideCollectibles } = useSettings()
+
+  // const onChangeTheme = () => {
+  //   setTheme && setTheme(theme === 'light' ? 'dark' : 'light')
+  // }
+
+  const onChangeHideUnlistedTokens = () => {
+    setHideUnlistedTokens(!hideUnlistedTokens)
+  }
+
+  const onChangeHideCollectibles = () => {
+    setHideCollectibles(!hideCollectibles)
+  }
+
+  return (
+    <div style={{ paddingTop: HEADER_HEIGHT }}>
+      <div className="flex gap-2 p-5 pt-3 flex-col">
+        {/* <Card
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="primary" fontWeight="bold">
+            Dark mode
+          </Text>
+          <Switch
+            checked={theme === 'dark'}
+            onCheckedChange={onChangeTheme}
+          />
+        </Card> */}
+        <Card className="flex flex-row justify-between items-center">
+          <Text color="primary" fontWeight="bold">
+            Hide unlisted tokens
+          </Text>
+          <Switch checked={hideUnlistedTokens} onCheckedChange={onChangeHideUnlistedTokens} />
+        </Card>
+        <Card className="flex flex-row justify-between items-center">
+          <Text color="primary" fontWeight="bold">
+            Hide collectibles
+          </Text>
+          <Switch checked={hideCollectibles} onCheckedChange={onChangeHideCollectibles} />
+        </Card>
+      </div>
+    </div>
+  )
+}

package/src/views/Settings/Menu.tsx

@@ -0,0 +1,60 @@
+import { Button, SettingsIcon, ChevronRightIcon, CurrencyIcon, NetworkIcon } from '@0xsequence/design-system'
+import React from 'react'
+
+import { HEADER_HEIGHT } from '../../constants'
+import { useNavigation } from '../../hooks'
+
+export const SettingsMenu = () => {
+  const { setNavigation } = useNavigation()
+
+  const onClickGeneral = () => {
+    setNavigation({
+      location: 'settings-general'
+    })
+  }
+
+  const onClickCurrency = () => {
+    setNavigation({
+      location: 'settings-currency'
+    })
+  }
+
+  const onClickNetworks = () => {
+    setNavigation({
+      location: 'settings-networks'
+    })
+  }
+
+  return (
+    <div style={{ paddingTop: HEADER_HEIGHT }}>
+      <div className="p-5 pt-3">
+        <div className="flex flex-col gap-2">
+          <Button
+            className="w-full rounded-xl"
+            size="lg"
+            onClick={onClickGeneral}
+            leftIcon={SettingsIcon}
+            rightIcon={ChevronRightIcon}
+            label="General"
+          />
+          <Button
+            className="w-full rounded-xl"
+            size="lg"
+            onClick={onClickCurrency}
+            leftIcon={CurrencyIcon}
+            rightIcon={ChevronRightIcon}
+            label="Currency"
+          />
+          <Button
+            className="w-full rounded-xl"
+            size="lg"
+            onClick={onClickNetworks}
+            leftIcon={NetworkIcon}
+            rightIcon={ChevronRightIcon}
+            label="Networks"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/views/Settings/Network.tsx

@@ -0,0 +1,60 @@
+import { useWalletSettings } from '@0xsequence/connect'
+import { Text, TokenImage } from '@0xsequence/design-system'
+import { ChainId } from '@0xsequence/network'
+import { useConfig } from 'wagmi'
+
+import { SelectButton } from '../../components/SelectButton'
+import { HEADER_HEIGHT } from '../../constants'
+import { useSettings } from '../../hooks'
+
+export const SettingsNetwork = () => {
+  const { readOnlyNetworks, displayedAssets } = useWalletSettings()
+  const { selectedNetworks, setSelectedNetworks } = useSettings()
+  const { chains } = useConfig()
+
+  const allChains = [
+    ...new Set([...chains.map(chain => chain.id), ...(readOnlyNetworks || []), ...displayedAssets.map(asset => asset.chainId)])
+  ]
+
+  const onClickNetwork = (chainId: number) => {
+    if (selectedNetworks.includes(chainId)) {
+      if (selectedNetworks.length === 1) {
+        return
+      }
+      setSelectedNetworks(selectedNetworks.filter(id => id !== chainId))
+    } else {
+      setSelectedNetworks([...selectedNetworks, chainId])
+    }
+  }
+
+  return (
+    <div style={{ paddingTop: HEADER_HEIGHT }}>
+      <div className="p-5 pt-3">
+        <Text variant="small" fontWeight="bold" color="muted">
+          Networks
+        </Text>
+        <div className="flex flex-col gap-2 mt-4">
+          {allChains.map(chain => {
+            return (
+              <SelectButton
+                disabled={selectedNetworks.length === 1 && selectedNetworks.includes(chain)}
+                key={chain}
+                selected={selectedNetworks.includes(chain)}
+                onClick={() => onClickNetwork(chain)}
+                value={chain}
+                squareIndicator
+              >
+                <div className="flex gap-2 justify-center items-center">
+                  <TokenImage src={`https://assets.sequence.info/images/networks/medium/${chain}.webp`} />
+                  <Text color="primary" variant="normal" fontWeight="bold">
+                    {ChainId[chain]}
+                  </Text>
+                </div>
+              </SelectButton>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/views/Settings/index.ts

@@ -0,0 +1,4 @@
+export * from './Menu'
+export * from './General'
+export * from './Currency'
+export * from './Network'