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

package/src/components/TransactionHistoryList/TransactionHistorySkeleton.tsx

@@ -1,36 +0,0 @@
-import { Skeleton } from '@0xsequence/design-system'
-import React from 'react'
-
-export const TransactionHistorySkeleton = () => {
-  const getTransactionItem = () => {
-    return (
-      <div className="flex flex-col gap-2 w-full justify-between">
-        <div className="flex flex-row justify-between">
-          <Skeleton style={{ width: '65px', height: '20px' }} />
-          <Skeleton style={{ width: '75px', height: '17px' }} />
-        </div>
-        <div className="flex flex-row justify-between">
-          <Skeleton style={{ width: '120px', height: '20px' }} />
-          <Skeleton style={{ width: '35px', height: '17px' }} />
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col gap-3">
-      <Skeleton style={{ width: '70px', height: '17px' }} />
-      <div className="flex flex-col gap-2">
-        {Array(8)
-          .fill(null)
-          .map((_, index) => {
-            return (
-              <div className="flex rounded-xl p-4 gap-2 items-center justify-center flex-col bg-background-secondary" key={index}>
-                {getTransactionItem()}
-              </div>
-            )
-          })}
-      </div>
-    </div>
-  )
-}

package/src/components/TransactionHistoryList/index.tsx

@@ -1,160 +0,0 @@
-import { Spinner, Text } from '@0xsequence/design-system'
-import { Transaction } from '@0xsequence/indexer'
-import { useMemo } from 'react'
-
-import { TransactionHistoryItem } from './TransactionHistoryItem'
-import { TransactionHistorySkeleton } from './TransactionHistorySkeleton'
-
-interface TransactionHistoryListProps {
-  transactions: Transaction[]
-  isPending: boolean
-  isFetchingNextPage: boolean
-}
-
-export const TransactionHistoryList = ({ transactions, isPending, isFetchingNextPage }: TransactionHistoryListProps) => {
-  type TransactionPeriodId = 'today' | 'yesterday' | 'week' | 'month' | 'year' | 'past'
-
-  interface TransactionPeriods {
-    id: TransactionPeriodId
-    label: string
-  }
-
-  const transactionPeriods: TransactionPeriods[] = [
-    {
-      id: 'today',
-      label: 'Today'
-    },
-    {
-      id: 'yesterday',
-      label: 'Yesterday'
-    },
-    {
-      id: 'week',
-      label: 'This Week'
-    },
-    {
-      id: 'month',
-      label: 'This Month'
-    },
-    {
-      id: 'year',
-      label: 'This Year'
-    },
-    {
-      id: 'past',
-      label: 'Past'
-    }
-  ]
-
-  const transactionsByTime = useMemo(() => {
-    const todayThreshold = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
-    const yesterdayThreshold = new Date(new Date().setDate(new Date(todayThreshold).getDate() - 1)).getTime()
-
-    const currentDate = new Date(new Date().setHours(0, 0, 0, 0))
-    const firstDayOfWeek = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay()))
-    const firstDayOfMonth = new Date(currentDate.setDate(1))
-    const firstDayOfYear = new Date(currentDate.setMonth(0, 1))
-
-    const weekThreshold = firstDayOfWeek.getTime()
-    const monthThreshold = firstDayOfMonth.getTime()
-    const yearThreshold = firstDayOfYear.getTime()
-
-    const transactionsByTime: {
-      [key in TransactionPeriodId]: Transaction[]
-    } = {
-      today: [],
-      yesterday: [],
-      week: [],
-      month: [],
-      year: [],
-      past: []
-    }
-
-    transactions.forEach(transaction => {
-      const transactionTime = new Date(transaction.timestamp).getTime()
-      if (transactionTime >= todayThreshold) {
-        transactionsByTime.today.push(transaction)
-      } else if (transactionTime >= yesterdayThreshold) {
-        transactionsByTime.yesterday.push(transaction)
-      } else if (transactionTime >= weekThreshold) {
-        transactionsByTime.week.push(transaction)
-      } else if (transactionTime >= monthThreshold) {
-        transactionsByTime.month.push(transaction)
-      } else if (transactionTime >= yearThreshold) {
-        transactionsByTime.year.push(transaction)
-      } else {
-        transactionsByTime.past.push(transaction)
-      }
-    })
-
-    return transactionsByTime
-  }, [transactions])
-
-  if (isPending) {
-    return (
-      <div className="flex flex-col gap-2">
-        <TransactionHistorySkeleton />
-      </div>
-    )
-  }
-
-  interface TimeLabelProps {
-    label: string
-  }
-
-  const TimeLabel = ({ label }: TimeLabelProps) => {
-    return (
-      <div>
-        <Text variant="normal" color="muted" fontWeight="medium">
-          {label}
-        </Text>
-      </div>
-    )
-  }
-
-  interface TransactionsListProps {
-    transactions: Transaction[]
-  }
-
-  const TransactionsList = ({ transactions }: TransactionsListProps) => {
-    return (
-      <div className="flex flex-col gap-2">
-        {transactions.map((transaction, index) => {
-          return (
-            <div className="flex flex-col gap-2" key={`${transaction.txnHash}-${index}`}>
-              <TransactionHistoryItem transaction={transaction} />
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col gap-5">
-      {transactionPeriods.map(period => {
-        const txs = transactionsByTime[period.id]
-        if (txs.length === 0) {
-          return null
-        }
-        return (
-          <div className="flex flex-col gap-3" key={period.id}>
-            <TimeLabel label={period.label} />
-            <TransactionsList transactions={txs} />
-          </div>
-        )
-      })}
-      {transactions.length === 0 && (
-        <div className="flex flex-col gap-3">
-          <TimeLabel label={'History'} />
-          <Text color="primary">No Recent Transaction History Found</Text>
-        </div>
-      )}
-      {isFetchingNextPage && (
-        <div className="flex m-4 items-center justify-center">
-          <Spinner />
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/WalletHeader/components/AccountInformation.tsx

@@ -1,31 +0,0 @@
-import { formatAddress } from '@0xsequence/connect'
-import { Text, GradientAvatar, ChevronDownIcon } from '@0xsequence/design-system'
-import React, { forwardRef } from 'react'
-import { useAccount } from 'wagmi'
-
-interface AccountInformationProps {
-  onClickAccount: () => void
-}
-
-export const AccountInformation = forwardRef(({ onClickAccount }: AccountInformationProps, ref) => {
-  const { address } = useAccount()
-
-  return (
-    <div className="flex gap-2 items-center">
-      <div className="flex w-full flex-col items-center justify-center">
-        <div
-          className="flex gap-2 items-center justify-center relative select-none cursor-pointer"
-          onClick={onClickAccount}
-          // @ts-ignore-next-line
-          ref={ref}
-        >
-          <GradientAvatar size="sm" address={address || ''} />
-          <Text color="primary" fontWeight="medium" variant="normal">
-            {formatAddress(address || '')}
-          </Text>
-          <ChevronDownIcon className="text-primary" />
-        </div>
-      </div>
-    </div>
-  )
-})

package/src/components/WalletHeader/components/WalletDropdownContent.tsx

@@ -1,96 +0,0 @@
-import { formatAddress, useTheme } from '@0xsequence/connect'
-import {
-  Button,
-  IconButton,
-  CloseIcon,
-  GradientAvatar,
-  Text,
-  QrCodeIcon,
-  SettingsIcon,
-  SignoutIcon,
-  TransactionIcon
-} from '@0xsequence/design-system'
-import React, { forwardRef } from 'react'
-import { useDisconnect, useAccount } from 'wagmi'
-
-import { useNavigation } from '../../../hooks'
-import { useOpenWalletModal } from '../../../hooks/useOpenWalletModal'
-import { CopyButton } from '../../CopyButton'
-
-interface WalletDropdownContentProps {
-  setOpenWalletDropdown: React.Dispatch<React.SetStateAction<boolean>>
-}
-
-export const WalletDropdownContent = forwardRef(({ setOpenWalletDropdown }: WalletDropdownContentProps, ref: any) => {
-  const { setNavigation } = useNavigation()
-  const { setOpenWalletModal } = useOpenWalletModal()
-  const { address } = useAccount()
-  const { disconnect } = useDisconnect()
-  const { theme } = useTheme()
-  const onClickReceive = () => {
-    setOpenWalletDropdown(false)
-    setNavigation({
-      location: 'receive'
-    })
-  }
-
-  const onClickHistory = () => {
-    setOpenWalletDropdown(false)
-    setNavigation({
-      location: 'history'
-    })
-  }
-
-  const onClickSettings = () => {
-    setOpenWalletDropdown(false)
-    setNavigation({
-      location: 'settings'
-    })
-  }
-
-  const onClickSignout = () => {
-    setOpenWalletModal(false)
-    setOpenWalletDropdown(false)
-    disconnect()
-  }
-
-  const getDropdownBackgroundColor = () => {
-    switch (theme) {
-      case 'dark':
-        return 'rgba(38, 38, 38, 0.85)'
-      case 'light':
-        return 'rgba(217, 217, 217, 0.85)'
-      default:
-        return 'transparent'
-    }
-  }
-
-  return (
-    <div
-      className="relative pointer-events-auto backdrop-blur-md p-3 z-30 top-4 left-4 rounded-xl"
-      ref={ref}
-      style={{
-        width: 'calc(100vw - 30px)',
-        maxWidth: '370px',
-        background: getDropdownBackgroundColor()
-      }}
-    >
-      <div className="flex flex-row justify-between items-start">
-        <div className="flex flex-row justify-center items-center gap-3 ml-2 text-primary">
-          <GradientAvatar size="md" address={address || ''} />
-          <Text variant="large" fontWeight="bold" color="primary">
-            {formatAddress(address || '')}
-          </Text>
-          <CopyButton className="ml-[-16px]" buttonVariant="icon" size="md" text={address || ''} />
-        </div>
-        <IconButton className="bg-button-glass" onClick={() => setOpenWalletDropdown(false)} size="xs" icon={CloseIcon} />
-      </div>
-      <div className="flex gap-2 mt-3 flex-col">
-        <Button className="w-full rounded-xl" variant="glass" leftIcon={QrCodeIcon} label="Receive" onClick={onClickReceive} />
-        <Button className="w-full rounded-xl" leftIcon={TransactionIcon} label="History" onClick={onClickHistory} />
-        <Button className="w-full rounded-xl" leftIcon={SettingsIcon} label="Settings" onClick={onClickSettings} />
-        <Button className="w-full rounded-xl" label="Sign Out" leftIcon={SignoutIcon} onClick={onClickSignout} />
-      </div>
-    </div>
-  )
-})

package/src/components/WalletHeader/index.tsx

@@ -1,84 +0,0 @@
-import { ChevronLeftIcon, IconButton, SearchIcon } from '@0xsequence/design-system'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-import { AnimatePresence, motion } from 'motion/react'
-import React, { useState, useRef, useEffect } from 'react'
-
-import { HEADER_HEIGHT } from '../../constants'
-import { useNavigation, useOpenWalletModal } from '../../hooks'
-
-import { AccountInformation } from './components/AccountInformation'
-import { WalletDropdownContent } from './components/WalletDropdownContent'
-
-export const WalletHeader = () => {
-  const { openWalletModalState } = useOpenWalletModal()
-
-  const [openWalletDropdown, setOpenWalletDropdown] = useState<boolean>(false)
-  const { goBack, history, setNavigation } = useNavigation()
-  const hasDropdownOpened = useRef<boolean>(false)
-
-  useEffect(() => {
-    if (!openWalletModalState) {
-      setOpenWalletDropdown(false)
-    }
-  }, [openWalletModalState])
-
-  // Close dropdown when navigating to a new page
-  useEffect(() => {
-    if (openWalletDropdown) {
-      if (!hasDropdownOpened.current) {
-        hasDropdownOpened.current = true
-      } else {
-        setOpenWalletDropdown(false)
-      }
-    } else {
-      hasDropdownOpened.current = false
-    }
-  }, [history.length, openWalletDropdown])
-
-  const onClickAccount = () => {
-    setOpenWalletDropdown(true)
-  }
-
-  const onClickBack = () => {
-    goBack()
-  }
-
-  const onClickSearch = () => {
-    setNavigation({
-      location: 'search'
-    })
-  }
-
-  return (
-    <motion.div>
-      <PopoverPrimitive.Root open={openWalletDropdown}>
-        <PopoverPrimitive.Anchor />
-        <div
-          className="flex bg-background-primary z-20 fixed flex-row items-center justify-between w-full px-4"
-          style={{
-            height: HEADER_HEIGHT,
-            paddingTop: '6px'
-          }}
-        >
-          {history.length > 0 ? (
-            <IconButton onClick={onClickBack} icon={ChevronLeftIcon} size="xs" />
-          ) : (
-            <IconButton onClick={onClickSearch} icon={SearchIcon} size="xs" />
-          )}
-          <PopoverPrimitive.Trigger asChild>
-            <AccountInformation onClickAccount={onClickAccount} />
-          </PopoverPrimitive.Trigger>
-          <div style={{ width: '44px' }} />
-        </div>
-
-        <AnimatePresence>
-          {openWalletDropdown && (
-            <PopoverPrimitive.Content asChild side="bottom" align="start">
-              <WalletDropdownContent setOpenWalletDropdown={setOpenWalletDropdown} />
-            </PopoverPrimitive.Content>
-          )}
-        </AnimatePresence>
-      </PopoverPrimitive.Root>
-    </motion.div>
-  )
-}

package/src/constants/abi.ts

@@ -1,90 +0,0 @@
-export const ERC_1155_ABI = [
-  {
-    inputs: [
-      {
-        internalType: 'address',
-        name: '_from',
-        type: 'address'
-      },
-      {
-        internalType: 'address',
-        name: '_to',
-        type: 'address'
-      },
-      {
-        internalType: 'uint256[]',
-        name: '_ids',
-        type: 'uint256[]'
-      },
-      {
-        internalType: 'uint256[]',
-        name: '_amounts',
-        type: 'uint256[]'
-      },
-      {
-        internalType: 'bytes',
-        name: '_data',
-        type: 'bytes'
-      }
-    ],
-    name: 'safeBatchTransferFrom',
-    outputs: [],
-    stateMutability: 'nonpayable',
-    type: 'function'
-  }
-]
-
-export const ERC_20_ABI = [
-  {
-    constant: false,
-    inputs: [
-      {
-        internalType: 'address',
-        name: 'recipient',
-        type: 'address'
-      },
-      {
-        internalType: 'uint256',
-        name: 'amount',
-        type: 'uint256'
-      }
-    ],
-    name: 'transfer',
-    outputs: [
-      {
-        internalType: 'bool',
-        name: '',
-        type: 'bool'
-      }
-    ],
-    payable: false,
-    stateMutability: 'nonpayable',
-    type: 'function'
-  }
-]
-
-export const ERC_721_ABI = [
-  {
-    inputs: [
-      {
-        internalType: 'address',
-        name: 'from',
-        type: 'address'
-      },
-      {
-        internalType: 'address',
-        name: 'to',
-        type: 'address'
-      },
-      {
-        internalType: 'uint256',
-        name: 'tokenId',
-        type: 'uint256'
-      }
-    ],
-    name: 'safeTransferFrom',
-    outputs: [],
-    stateMutability: 'nonpayable',
-    type: 'function'
-  }
-]

package/src/constants/currency.ts

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

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

package/src/constants/sizing.ts

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

package/src/contexts/Navigation.ts

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

@@ -1,15 +0,0 @@
-'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>()