@0xsequence/wallet-widget 5.0.0-ecosystem-beta → 5.0.0

package/src/views/SendCollectible.tsx

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

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

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

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

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

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