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

package/src/contexts/genericContext.ts

@@ -1,19 +0,0 @@
-import { createContext, useContext } from 'react'
-
-// https://medium.com/@rivoltafilippo/typing-react-context-to-avoid-an-undefined-default-value-2c7c5a7d5947
-
-export const createGenericContext = <T>() => {
-  // Create a context with a generic parameter or undefined
-  const genericContext = createContext<T | undefined>(undefined)
-
-  // Check if the value provided to the context is defined or throw an error
-  const useGenericContext = () => {
-    const contextIsDefined = useContext(genericContext)
-    if (!contextIsDefined) {
-      throw new Error('useGenericContext must be used within a Provider')
-    }
-    return contextIsDefined
-  }
-
-  return [useGenericContext, genericContext.Provider] as const
-}

package/src/contexts/index.ts

@@ -1,2 +0,0 @@
-export * from './WalletModal'
-export * from './Navigation'

package/src/hooks/index.ts

@@ -1,3 +0,0 @@
-export * from './useOpenWalletModal'
-export * from './useNavigation'
-export * from './useSettings'

package/src/hooks/useNavigation.ts

@@ -1,30 +0,0 @@
-import { useNavigationContext, Navigation, History } from '../contexts/Navigation'
-
-interface UseNavigation {
-  setNavigation: (navigation: Navigation) => void
-  setHistory?: (history: History) => void
-  history: History
-  goBack: () => void
-}
-
-export const useNavigation = (): UseNavigation => {
-  const { setHistory, history } = useNavigationContext()
-
-  const setNavigation = (navigation: Navigation) => {
-    // Scroll to top of page when navigating to a new page
-    const childElement = document.getElementById('sequence-kit-wallet-content')
-    const parentElement = childElement?.parentElement
-    parentElement?.scrollTo(0, 0)
-
-    const newHistory = navigation.location === 'home' ? [] : [...history, navigation]
-    setHistory(newHistory)
-  }
-
-  const goBack = () => {
-    const newHistory = [...history]
-    newHistory.pop()
-    setHistory(newHistory)
-  }
-
-  return { setNavigation, history, setHistory, goBack }
-}

package/src/hooks/useOpenWalletModal.ts

@@ -1,7 +0,0 @@
-import { useWalletModalContext } from '../contexts/WalletModal'
-
-export const useOpenWalletModal = () => {
-  const { setOpenWalletModal, openWalletModalState } = useWalletModalContext()
-
-  return { setOpenWalletModal, openWalletModalState }
-}

package/src/hooks/useScrollbarWidth.ts

@@ -1,11 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export const useScrollbarWidth = () => {
-  const [scrollbarWidth, setScrollbarWidth] = useState<string>('0px')
-
-  useEffect(() => {
-    setScrollbarWidth(navigator.userAgent.match(/chrome|chromium|crios/i) ? '13px' : '0px')
-  }, [])
-
-  return scrollbarWidth
-}

package/src/hooks/useSettings.ts

@@ -1,121 +0,0 @@
-import { LocalStorageKey, useWalletSettings } from '@0xsequence/connect'
-import { useState } from 'react'
-import { useConfig } from 'wagmi'
-
-import { FiatCurrency, defaultFiatCurrency } from '../constants'
-
-interface Settings {
-  hideCollectibles: boolean
-  hideUnlistedTokens: boolean
-  fiatCurrency: FiatCurrency
-  selectedNetworks: number[]
-  setFiatCurrency: (newFiatCurrency: FiatCurrency) => void
-  setHideCollectibles: (newState: boolean) => void
-  setHideUnlistedTokens: (newState: boolean) => void
-  setSelectedNetworks: (newNetworks: number[]) => void
-}
-
-type SettingsItems = Pick<Settings, 'hideCollectibles' | 'hideUnlistedTokens' | 'fiatCurrency' | 'selectedNetworks'>
-
-export const useSettings = (): Settings => {
-  const { readOnlyNetworks, displayedAssets } = useWalletSettings()
-  const { chains } = useConfig()
-
-  const allChains = [
-    ...new Set([...chains.map(chain => chain.id), ...(readOnlyNetworks || []), ...displayedAssets.map(asset => asset.chainId)])
-  ]
-
-  const getSettingsFromStorage = (): SettingsItems => {
-    let hideUnlistedTokens = true
-    let hideCollectibles = false
-    let fiatCurrency = defaultFiatCurrency
-    let selectedNetworks = allChains
-
-    try {
-      const settingsStorage = localStorage.getItem(LocalStorageKey.Settings)
-
-      const settings = JSON.parse(settingsStorage || '{}')
-      if (settings?.hideUnlistedTokens !== undefined) {
-        hideUnlistedTokens = settings?.hideUnlistedTokens
-      }
-      if (settings?.hideCollectibles !== undefined) {
-        hideCollectibles = settings?.hideCollectibles
-      }
-      if (settings?.fiatCurrency !== undefined) {
-        fiatCurrency = settings?.fiatCurrency as FiatCurrency
-      }
-
-      if (settings?.selectedNetworks !== undefined) {
-        let areSelectedNetworksValid = true
-        settings.selectedNetworks.forEach((chainId: number) => {
-          if (allChains.find(chain => chain === chainId) === undefined) {
-            areSelectedNetworksValid = false
-          }
-        })
-        if (areSelectedNetworksValid) {
-          selectedNetworks = settings?.selectedNetworks as number[]
-        }
-      }
-    } catch (e) {
-      console.error(e, 'Failed to fetch settings')
-    }
-
-    return {
-      hideUnlistedTokens,
-      hideCollectibles,
-      fiatCurrency,
-      selectedNetworks
-    }
-  }
-  const defaultSettings = getSettingsFromStorage()
-
-  const [settings, setSettings] = useState(defaultSettings)
-
-  const setHideUnlistedTokens = (newState: boolean) => {
-    const oldSettings = getSettingsFromStorage()
-    const newSettings = {
-      ...oldSettings,
-      hideUnlistedTokens: newState
-    }
-    localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
-    setSettings(newSettings)
-  }
-
-  const setHideCollectibles = (newState: boolean) => {
-    const oldSettings = getSettingsFromStorage()
-    const newSettings = {
-      ...oldSettings,
-      hideCollectibles: newState
-    }
-    localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
-    setSettings(newSettings)
-  }
-
-  const setFiatCurrency = (newFiatCurrency: FiatCurrency) => {
-    const oldSettings = getSettingsFromStorage()
-    const newSettings = {
-      ...oldSettings,
-      fiatCurrency: newFiatCurrency
-    }
-    localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
-    setSettings(newSettings)
-  }
-
-  const setSelectedNetworks = (newSelectedNetworks: number[]) => {
-    const oldSettings = getSettingsFromStorage()
-    const newSettings = {
-      ...oldSettings,
-      selectedNetworks: newSelectedNetworks
-    }
-    localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
-    setSettings(newSettings)
-  }
-
-  return {
-    ...settings,
-    setFiatCurrency,
-    setHideCollectibles,
-    setHideUnlistedTokens,
-    setSelectedNetworks
-  }
-}

package/src/utils/helpers.ts

@@ -1,51 +0,0 @@
-export const limitDecimals = (value: string, decimals: number) => {
-  const splitValue = value.split('.')
-  if (splitValue.length === 1) {
-    return value
-  }
-  return `${splitValue[0]}.${splitValue[1].slice(0, decimals)}`
-}
-
-export const isEthAddress = (value: string) => {
-  const ethAddressRegEx = /0x[a-fA-F0-9]{40}/
-  const isEthAddress = ethAddressRegEx.test(value)
-
-  return isEthAddress
-}
-
-// Gets n random elements at unique keys from collection up to the size of collection.
-export const sampleSize = <T>(collection: T[], n: number): T[] => {
-  const random = seededRandom(1)
-  const length = collection.length
-
-  if (!length || n < 1) {
-    return []
-  }
-
-  // Limit n to the size of the collection
-  n = n > length ? length : n
-
-  const sampled = new Array(n)
-  const indexes = new Set<number>()
-
-  // Find n unique indexes
-  while (indexes.size < n) {
-    indexes.add(Math.floor(random() * length))
-  }
-
-  for (const [idx, value] of Array.from(indexes).entries()) {
-    sampled[idx] = collection[value]
-  }
-
-  return sampled
-}
-
-export const isTruthy = <T>(value: T | undefined | null): value is T => Boolean(value)
-
-// Deterministic random function
-export const seededRandom = (seed: number) => {
-  return () => {
-    const x = Math.sin(seed++) * 10000
-    return x - Math.floor(x)
-  }
-}

package/src/utils/index.ts

@@ -1,2 +0,0 @@
-export * from './helpers'
-export * from './tokens'

package/src/utils/tokens.ts

@@ -1,98 +0,0 @@
-import { TokenPrice } from '@0xsequence/api'
-import { compareAddress } from '@0xsequence/connect'
-import { TokenBalance, GetTransactionHistoryReturn, Transaction } from '@0xsequence/indexer'
-import { InfiniteData } from '@tanstack/react-query'
-import { formatUnits, zeroAddress } from 'viem'
-
-export const getPercentageColor = (value: number) => {
-  if (value > 0) {
-    return 'positive'
-  } else if (value < 0) {
-    return 'negative'
-  } else {
-    return 'muted'
-  }
-}
-
-export const getPercentagePriceChange = (balance: TokenBalance, prices: TokenPrice[]) => {
-  const priceForToken = prices.find(p => compareAddress(p.token.contractAddress, balance.contractAddress))
-  if (!priceForToken) {
-    return 0
-  }
-
-  const price24HourChange = priceForToken?.price24hChange?.value || 0
-  return price24HourChange
-}
-
-interface ComputeBalanceFiat {
-  balance: TokenBalance
-  prices: TokenPrice[]
-  decimals: number
-  conversionRate: number
-}
-
-export const computeBalanceFiat = ({ balance, prices, decimals, conversionRate }: ComputeBalanceFiat): string => {
-  let totalUsd = 0
-
-  const priceForToken = prices.find(p => compareAddress(p.token.contractAddress, balance.contractAddress))
-  if (!priceForToken) {
-    return '0.00'
-  }
-  const priceFiat = priceForToken.price?.value || 0
-  const valueFormatted = formatUnits(BigInt(balance.balance), decimals)
-  const usdValue = parseFloat(valueFormatted) * priceFiat
-  totalUsd += usdValue
-
-  const fiatValue = totalUsd * conversionRate
-
-  return `${fiatValue.toFixed(2)}`
-}
-
-interface SortBalancesByTypeReturn {
-  nativeTokens: TokenBalance[]
-  erc20Tokens: TokenBalance[]
-  collectibles: TokenBalance[]
-}
-
-const compareTokenBalanceIds = (a: TokenBalance, b: TokenBalance) => {
-  return (a.tokenID || '').localeCompare(b.tokenID || '')
-}
-
-export const sortBalancesByType = (balances: TokenBalance[]): SortBalancesByTypeReturn => {
-  const nativeTokens: TokenBalance[] = []
-  const erc20Tokens: TokenBalance[] = []
-  const collectibles: TokenBalance[] = []
-
-  balances.forEach(balance => {
-    // Note: contractType for the native token should be "UNKNOWN"
-    if (balance.contractAddress === zeroAddress) {
-      nativeTokens.push(balance)
-    } else if (balance.contractType === 'ERC20') {
-      erc20Tokens.push(balance)
-    } else if (balance.contractType === 'ERC721' || balance.contractType === 'ERC1155') {
-      collectibles.push(balance)
-    }
-  })
-
-  const sortedNativeTokens = nativeTokens.sort(compareTokenBalanceIds)
-  const sortedErc20Tokens = erc20Tokens.sort(compareTokenBalanceIds)
-  const sortedCollectibles = collectibles.sort(compareTokenBalanceIds)
-
-  return {
-    nativeTokens: sortedNativeTokens,
-    erc20Tokens: sortedErc20Tokens,
-    collectibles: sortedCollectibles
-  }
-}
-
-export const flattenPaginatedTransactionHistory = (
-  transactionHistoryData: InfiniteData<GetTransactionHistoryReturn> | undefined
-) => {
-  const transactionHistory: Transaction[] = []
-
-  transactionHistoryData?.pages.forEach(page => {
-    transactionHistory.push(...page.transactions)
-  })
-
-  return transactionHistory
-}

package/src/views/CoinDetails/Skeleton.tsx

@@ -1,46 +0,0 @@
-import { Button, SendIcon, Skeleton, Text } from '@0xsequence/design-system'
-
-import { NetworkBadge } from '../../components/NetworkBadge'
-import { TransactionHistorySkeleton } from '../../components/TransactionHistoryList/TransactionHistorySkeleton'
-import { HEADER_HEIGHT } from '../../constants'
-
-interface CoinDetailsSkeletonProps {
-  chainId: number
-  isReadOnly: boolean
-}
-
-export const CoinDetailsSkeleton = ({ chainId, isReadOnly }: CoinDetailsSkeletonProps) => {
-  return (
-    <div style={{ paddingTop: HEADER_HEIGHT }}>
-      <div className="flex flex-col gap-10 pb-5 px-4 pt-0" style={{ marginTop: '-20px' }}>
-        <div className="flex mb-10 gap-2 items-center justify-center flex-col">
-          <Skeleton style={{ width: '64px', height: '64px' }} />
-          <Skeleton style={{ height: '28px', width: '70px' }} />
-          <NetworkBadge chainId={chainId} />
-        </div>
-        <div>
-          <Text variant="normal" fontWeight="medium" color="muted">
-            Balance
-          </Text>
-          <div className="flex flex-row items-end justify-between">
-            <Skeleton style={{ width: '150px', height: '36px' }} />
-            <Skeleton style={{ width: '33px', height: '17px' }} />
-          </div>
-        </div>
-        {!isReadOnly && (
-          <Button
-            className="w-full text-primary"
-            variant="primary"
-            leftIcon={SendIcon}
-            label="Send"
-            disabled
-            onClick={() => {}}
-          />
-        )}
-        <div>
-          <TransactionHistorySkeleton />
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/views/CoinDetails/index.tsx

@@ -1,153 +0,0 @@
-import { compareAddress, formatDisplay, getNativeTokenInfoByChainId, ContractVerificationStatus } from '@0xsequence/connect'
-import { Button, SendIcon, SwapIcon, Text, TokenImage } from '@0xsequence/design-system'
-import {
-  useGetTokenBalancesSummary,
-  useGetCoinPrices,
-  useGetExchangeRate,
-  useGetTransactionHistory
-} from '@0xsequence/react-hooks'
-import { formatUnits, zeroAddress } from 'viem'
-import { useAccount, useConfig } from 'wagmi'
-
-import { InfiniteScroll } from '../../components/InfiniteScroll'
-import { NetworkBadge } from '../../components/NetworkBadge'
-import { TransactionHistoryList } from '../../components/TransactionHistoryList'
-import { HEADER_HEIGHT } from '../../constants'
-import { useSettings, useNavigation } from '../../hooks'
-import { computeBalanceFiat, flattenPaginatedTransactionHistory } from '../../utils'
-
-import { CoinDetailsSkeleton } from './Skeleton'
-
-export interface CoinDetailsProps {
-  contractAddress: string
-  chainId: number
-}
-
-export const CoinDetails = ({ contractAddress, chainId }: CoinDetailsProps) => {
-  const { chains } = useConfig()
-  const { setNavigation } = useNavigation()
-  const { fiatCurrency, hideUnlistedTokens } = useSettings()
-  const { address: accountAddress } = useAccount()
-
-  const isReadOnly = !chains.map(chain => chain.id).includes(chainId)
-
-  const {
-    data: dataTransactionHistory,
-    isPending: isPendingTransactionHistory,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage
-  } = useGetTransactionHistory({
-    chainId,
-    accountAddress: accountAddress || '',
-    contractAddress
-  })
-
-  const transactionHistory = flattenPaginatedTransactionHistory(dataTransactionHistory)
-
-  const { data: tokenBalance, isPending: isPendingCoinBalance } = useGetTokenBalancesSummary({
-    chainIds: [chainId],
-    filter: {
-      accountAddresses: [accountAddress || ''],
-      contractWhitelist: [contractAddress],
-      contractStatus: hideUnlistedTokens ? ContractVerificationStatus.VERIFIED : ContractVerificationStatus.ALL,
-      omitNativeBalances: false
-    }
-  })
-
-  const dataCoinBalance =
-    tokenBalance && tokenBalance.length > 0
-      ? compareAddress(contractAddress, zeroAddress)
-        ? tokenBalance?.[0]
-        : tokenBalance?.[1]
-      : undefined
-
-  const { data: dataCoinPrices, isPending: isPendingCoinPrices } = useGetCoinPrices([
-    {
-      chainId,
-      contractAddress
-    }
-  ])
-
-  const { data: conversionRate = 1, isPending: isPendingConversionRate } = useGetExchangeRate(fiatCurrency.symbol)
-
-  const isPending = isPendingCoinBalance || isPendingCoinPrices || isPendingConversionRate
-
-  if (isPending) {
-    return <CoinDetailsSkeleton chainId={chainId} isReadOnly={isReadOnly} />
-  }
-
-  const isNativeToken = compareAddress(contractAddress, zeroAddress)
-  const logo = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).logoURI : dataCoinBalance?.contractInfo?.logoURI
-  const symbol = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).symbol : dataCoinBalance?.contractInfo?.symbol
-  const name = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).name : dataCoinBalance?.contractInfo?.name
-  const decimals = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).decimals : dataCoinBalance?.contractInfo?.decimals
-  const formattedBalance = formatUnits(BigInt(dataCoinBalance?.balance || '0'), decimals || 18)
-  const balanceDisplayed = formatDisplay(formattedBalance)
-
-  const coinBalanceFiat = dataCoinBalance
-    ? computeBalanceFiat({
-        balance: dataCoinBalance,
-        prices: dataCoinPrices || [],
-        conversionRate,
-        decimals: decimals || 0
-      })
-    : '0'
-
-  const onClickSend = () => {
-    setNavigation({
-      location: 'send-coin',
-      params: {
-        chainId,
-        contractAddress
-      }
-    })
-  }
-
-  const onClickSwap = () => {
-    setNavigation({
-      location: 'swap-coin',
-      params: {
-        chainId,
-        contractAddress
-      }
-    })
-  }
-  return (
-    <div style={{ paddingTop: HEADER_HEIGHT }}>
-      <div className="flex flex-col gap-10 pb-5 px-4 pt-0" style={{ marginTop: '-20px' }}>
-        <div className="flex mb-10 gap-2 items-center justify-center flex-col">
-          <TokenImage src={logo} size="xl" />
-          <Text variant="large" color="primary" fontWeight="bold">
-            {name}
-          </Text>
-          <NetworkBadge chainId={chainId} />
-        </div>
-        <div>
-          <Text variant="normal" fontWeight="medium" color="muted">
-            Balance
-          </Text>
-          <div className="flex flex-row items-end justify-between">
-            <Text variant="xlarge" fontWeight="bold" color="primary">{`${balanceDisplayed} ${symbol}`}</Text>
-            <Text variant="normal" fontWeight="medium" color="muted">{`${fiatCurrency.sign}${coinBalanceFiat}`}</Text>
-          </div>
-        </div>
-        {!isReadOnly && (
-          <div className="flex gap-2">
-            <Button className="w-full text-primary" variant="primary" leftIcon={SendIcon} label="Send" onClick={onClickSend} />
-            <Button className="w-full text-primary" variant="primary" leftIcon={SwapIcon} label="Buy" onClick={onClickSwap} />
-          </div>
-        )}
-        <div>
-          <InfiniteScroll onLoad={() => fetchNextPage()} hasMore={hasNextPage}>
-            <TransactionHistoryList
-              transactions={transactionHistory}
-              isPending={isPendingTransactionHistory}
-              isFetchingNextPage={isFetchingNextPage}
-            />
-          </InfiniteScroll>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/views/CollectibleDetails/Skeleton.tsx

@@ -1,50 +0,0 @@
-import { Button, SendIcon, Skeleton, Text } from '@0xsequence/design-system'
-
-import { TransactionHistorySkeleton } from '../../components/TransactionHistoryList/TransactionHistorySkeleton'
-import { HEADER_HEIGHT } from '../../constants'
-
-interface CollectibleDetailsSkeletonProps {
-  isReadOnly: boolean
-}
-
-export const CollectibleDetailsSkeleton = ({ isReadOnly }: CollectibleDetailsSkeletonProps) => {
-  return (
-    <div style={{ paddingTop: HEADER_HEIGHT }}>
-      <div
-        className="flex flex-col gap-10 pb-5 px-4 pt-0"
-        style={{
-          marginTop: '-20px'
-        }}
-      >
-        <div className="flex gap-3 items-center justify-center flex-col">
-          <Skeleton style={{ width: '120px', height: '16px' }} />
-          <Skeleton style={{ width: '140px', height: '44px' }} />
-        </div>
-        <div>
-          <Skeleton style={{ width: '100%', aspectRatio: '1/1' }} />
-        </div>
-        <div>
-          {/* balance */}
-          <div>
-            <Text variant="normal" fontWeight="medium" color="muted">
-              Balance
-            </Text>
-            <div className="flex flex-row items-end justify-between">
-              <Skeleton style={{ width: '44px', height: '36px' }} />
-              <Skeleton style={{ width: '34px', height: '17px' }} />
-            </div>
-          </div>
-          {!isReadOnly && (
-            <Button className="text-primary mt-4 w-full" variant="primary" leftIcon={SendIcon} label="Send" onClick={() => {}} />
-          )}
-        </div>
-        <div>
-          <Text variant="normal" color="muted" fontWeight="medium">
-            This week
-          </Text>
-          <TransactionHistorySkeleton />
-        </div>
-      </div>
-    </div>
-  )
-}