@0xsequence/wallet-widget 0.0.0-20250314205219

package/src/constants/currency.ts

@@ -0,0 +1,35 @@
+export interface FiatCurrency {
+  decimals: number
+  name: {
+    message: string
+  }
+  sign: string
+  symbol: string
+}
+
+export const supportedFiatCurrencies: FiatCurrency[] = [
+  { symbol: 'USD', sign: '$', name: { message: 'US Dollar' }, decimals: 2 },
+  { symbol: 'CAD', sign: '$', name: { message: 'Canadian Dollar' }, decimals: 2 },
+  { symbol: 'GBP', sign: '£', name: { message: 'British Pound Sterling' }, decimals: 2 },
+  { symbol: 'EUR', sign: '€', name: { message: 'Euro' }, decimals: 2 },
+  { symbol: 'CNY', sign: '¥', name: { message: 'Chinese Yuan' }, decimals: 2 },
+  { symbol: 'JPY', sign: '¥', name: { message: 'Japanese Yen' }, decimals: 2 },
+  { symbol: 'KRW', sign: '₩', name: { message: 'South Korean Won' }, decimals: 2 },
+  { symbol: 'SGD', sign: '$', name: { message: 'Singapore Dollar' }, decimals: 2 },
+  { symbol: 'CHF', sign: 'CHF ', name: { message: 'Swiss Franc' }, decimals: 2 },
+  { symbol: 'AUD', sign: '$', name: { message: 'Australian Dollar' }, decimals: 2 },
+  { symbol: 'NZD', sign: '$', name: { message: 'New Zealand Dollar' }, decimals: 2 },
+  { symbol: 'SEK', sign: 'kr ', name: { message: 'Swedish Krona' }, decimals: 2 },
+  { symbol: 'NOK', sign: 'kr ', name: { message: 'Norwegian Krone' }, decimals: 2 },
+  { symbol: 'MXN', sign: '$', name: { message: 'Mexican Peso' }, decimals: 2 },
+  { symbol: 'INR', sign: '₹', name: { message: 'Indian Rupee' }, decimals: 2 },
+  { symbol: 'ZAR', sign: 'R ', name: { message: 'South African Rand' }, decimals: 2 },
+  { symbol: 'TRY', sign: '₺', name: { message: 'Turkish Lira' }, decimals: 2 },
+  { symbol: 'BRL', sign: 'R$', name: { message: 'Brazilian Real' }, decimals: 2 },
+  { symbol: 'DKK', sign: 'kr ', name: { message: 'Danish Krone' }, decimals: 2 },
+  { symbol: 'PLN', sign: 'zł ', name: { message: 'Polish Zloty' }, decimals: 2 },
+  { symbol: 'THB', sign: '฿', name: { message: 'Thai Baht' }, decimals: 2 },
+  { symbol: 'IDR', sign: 'Rp', name: { message: 'Indonesian Rupiah' }, decimals: 2 }
+]
+
+export const defaultFiatCurrency = supportedFiatCurrencies[0]

package/src/constants/index.ts

@@ -0,0 +1,3 @@
+export * from './abi'
+export * from './currency'
+export * from './sizing'

package/src/constants/sizing.ts

@@ -0,0 +1 @@
+export const HEADER_HEIGHT = '54px'

package/src/contexts/Navigation.ts

@@ -0,0 +1,132 @@
+'use client'
+
+import { Transaction } from '@0xsequence/indexer'
+
+import { createGenericContext } from './genericContext'
+
+export interface CollectionDetailsParams {
+  contractAddress: string
+  chainId: number
+}
+
+export interface CollectionDetailsNavigation {
+  location: 'collection-details'
+  params: CollectionDetailsParams
+}
+
+export interface CoinDetailsParams {
+  contractAddress: string
+  chainId: number
+}
+
+export interface CoinDetailsNavigation {
+  location: 'coin-details'
+  params: CoinDetailsParams
+}
+
+export interface CollectibleDetailsParams {
+  contractAddress: string
+  chainId: number
+  tokenId: string
+}
+
+export interface CollectibleDetailsNavigation {
+  location: 'collectible-details'
+  params: CollectibleDetailsParams
+}
+
+export interface TransactionDetailsParams {
+  transaction: Transaction
+}
+
+export interface TransactionDetailsNavigation {
+  location: 'transaction-details'
+  params: TransactionDetailsParams
+}
+
+export interface SearchViewAllParams {
+  defaultTab: 'coins' | 'collections'
+}
+
+export interface SearchViewAllNavigation {
+  location: 'search-view-all'
+  params: SearchViewAllParams
+}
+
+export interface SendCoinParams {
+  chainId: number
+  contractAddress: string
+}
+
+export interface SwapCoinParams {
+  chainId: number
+  contractAddress: string
+}
+
+export interface SwapCoinListParams {
+  chainId: number
+  contractAddress: string
+  amount: string
+}
+
+export interface SendCoinNavigation {
+  location: 'send-coin'
+  params: SendCoinParams
+}
+
+export interface SwapCoinNavigation {
+  location: 'swap-coin'
+  params: SwapCoinParams
+}
+
+export interface SwapCoinListNavigation {
+  location: 'swap-coin-list'
+  params: SwapCoinListParams
+}
+
+export interface SendCollectibleParams {
+  chainId: number
+  contractAddress: string
+  tokenId: string
+}
+
+export interface SendCollectibleNavigation {
+  location: 'send-collectible'
+  params: SendCollectibleParams
+}
+
+export interface BasicNavigation {
+  location:
+    | 'home'
+    | 'receive'
+    | 'history'
+    | 'receive'
+    | 'settings'
+    | 'settings-general'
+    | 'settings-currency'
+    | 'settings-networks'
+    | 'search'
+}
+
+export type Navigation =
+  | BasicNavigation
+  | CoinDetailsNavigation
+  | CollectibleDetailsNavigation
+  | CollectionDetailsNavigation
+  | TransactionDetailsNavigation
+  | SearchViewAllNavigation
+  | SendCoinNavigation
+  | SendCollectibleNavigation
+  | SwapCoinNavigation
+  | SwapCoinListNavigation
+
+export type History = Navigation[]
+
+type NavigationContext = {
+  setHistory: (history: History) => void
+  history: History
+  isBackButtonEnabled: boolean
+  setIsBackButtonEnabled: (enabled: boolean) => void
+}
+
+export const [useNavigationContext, NavigationContextProvider] = createGenericContext<NavigationContext>()

package/src/contexts/WalletModal.ts

@@ -0,0 +1,15 @@
+'use client'
+
+import { createGenericContext } from './genericContext'
+import { Navigation } from './Navigation'
+
+export interface WalletOptions {
+  defaultNavigation?: Navigation
+}
+
+type WalletModalContext = {
+  setOpenWalletModal: (open: boolean, options?: WalletOptions) => void
+  openWalletModalState: boolean
+}
+
+export const [useWalletModalContext, WalletModalContextProvider] = createGenericContext<WalletModalContext>()

package/src/contexts/genericContext.ts

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

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

package/src/hooks/index.ts

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

package/src/hooks/useNavigation.ts

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

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

package/src/hooks/useScrollbarWidth.ts

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

@@ -0,0 +1,121 @@
+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/index.ts

@@ -0,0 +1,6 @@
+// Provider
+export { SequenceWalletProvider } from './components/SequenceWalletProvider'
+
+// Hooks
+export { useOpenWalletModal } from './hooks/useOpenWalletModal'
+export { useNavigation as useWalletNavigation } from './hooks/useNavigation'

package/src/utils/helpers.ts

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

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

package/src/utils/tokens.ts

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

@@ -0,0 +1,46 @@
+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>
+  )
+}