added transaction searching and filtering

andrewlee348 · andrewlee348 · commit 4c290f3b028d · 2025-04-01T18:08:29.000-04:00
diff --git a/packages/hooks/src/hooks/Indexer/useGetTransactionHistorySummary.ts b/packages/hooks/src/hooks/Indexer/useGetTransactionHistorySummary.ts
@@ -6,20 +6,19 @@ import { HooksOptions } from '../../types'
 
 import { useIndexerClients } from './useIndexerClient'
 
-export interface GetTransactionHistorySummaryArgs {
-  accountAddress: string
-  chainIds: number[]
-}
+export type GetTransactionHistorySummaryArgs =
+  | { accountAddress: string; accountAddresses?: never; chainIds: number[] }
+  | { accountAddress?: never; accountAddresses: string[]; chainIds: number[] }
 
 const getTransactionHistorySummary = async (
   indexerClients: Map<number, SequenceIndexer>,
-  { accountAddress }: GetTransactionHistorySummaryArgs
+  { accountAddress, accountAddresses }: GetTransactionHistorySummaryArgs
 ): Promise<Transaction[]> => {
   const histories = await Promise.all(
     Array.from(indexerClients.values()).map(indexerClient =>
       indexerClient.getTransactionHistory({
         filter: {
-          accountAddress
+          accountAddresses: accountAddresses || [accountAddress]
         },
         includeMetadata: true
       })
@@ -55,7 +54,7 @@ export const useGetTransactionHistorySummary = (
     refetchOnMount: true,
     enabled:
       getTransactionHistorySummaryArgs.chainIds.length > 0 &&
-      !!getTransactionHistorySummaryArgs.accountAddress &&
+      !!(getTransactionHistorySummaryArgs.accountAddress || (getTransactionHistorySummaryArgs.accountAddresses?.length ?? 0)) &&
       !options?.disabled
   })
 }
diff --git a/packages/wallet-widget/src/components/ListCard/ListCardNav.tsx b/packages/wallet-widget/src/components/ListCard/ListCardNav.tsx
@@ -18,18 +18,21 @@ export const ListCardNav = ({
   return (
     <div
       className={cn(
-        'flex flex-row justify-between items-center p-4 bg-background-secondary cursor-pointer hover:opacity-80 w-full',
+        'flex flex-row justify-between items-center bg-background-secondary cursor-pointer hover:opacity-80 w-full p-4',
         shape === 'rounded' ? 'rounded-lg' : 'rounded-none'
       )}
       style={{ height: '52px', ...style }}
       onClick={onClick}
     >
-      <div className="flex flex-row gap-2 items-center">{children}</div>
+      <div className="flex flex-row gap-2 items-center w-full">{children}</div>
 
-      <div className="flex flex-row gap-1 items-center">
-        {rightChildren}
-        {type === 'chevron' && <ChevronRightIcon color="white" />}
-      </div>
+      {rightChildren ||
+        (type === 'chevron' && (
+          <div className="flex flex-row gap-1 items-center">
+            {rightChildren}
+            {type === 'chevron' && <ChevronRightIcon color="white" />}
+          </div>
+        ))}
     </div>
   )
 }
diff --git a/packages/wallet-widget/src/components/SearchLists/CollectiblesList.tsx b/packages/wallet-widget/src/components/SearchLists/CollectiblesList.tsx
@@ -43,6 +43,8 @@ export const CollectiblesList = ({
   const isPending = isPendingTokenBalances
 
   const fuseOptions = {
+    threshold: 0.1,
+    ignoreLocation: true,
     keys: [
       {
         name: 'name',
@@ -56,8 +58,7 @@ export const CollectiblesList = ({
           return token.contractInfo?.name || ''
         }
       }
-    ],
-    ignoreLocation: true
+    ]
   }
 
   const fuse = useMemo(() => {
@@ -89,6 +90,10 @@ export const CollectiblesList = ({
     setIsFilterOpen(true)
   }
 
+  const onShowCollectibles = () => {
+    setIsFilterOpen(false)
+  }
+
   return (
     <div className="flex flex-col gap-4 items-center justify-center">
       <div className="flex flex-row justify-between items-center w-full gap-2">
@@ -127,7 +132,7 @@ export const CollectiblesList = ({
             label="Collectible Filters"
             buttonLabel="Show Collectibles"
             type="collectibles"
-            handleButtonPress={() => {}}
+            handleButtonPress={onShowCollectibles}
           />
         )}
       </AnimatePresence>
diff --git a/packages/wallet-widget/src/components/SearchLists/TokenList.tsx b/packages/wallet-widget/src/components/SearchLists/TokenList.tsx
@@ -85,6 +85,8 @@ export const TokenList = ({
   const isPending = isPendingTokenBalances || isPendingCoinPrices || isPendingConversionRate
 
   const fuseOptions = {
+    threshold: 0.1,
+    ignoreLocation: true,
     keys: [
       {
         name: 'name',
@@ -96,8 +98,7 @@ export const TokenList = ({
           return token.contractInfo?.name || 'Unknown'
         }
       }
-    ],
-    ignoreLocation: true
+    ]
   }
 
   const fuse = useMemo(() => {
@@ -129,6 +130,10 @@ export const TokenList = ({
     setIsFilterOpen(true)
   }
 
+  const onShowTokens = () => {
+    setIsFilterOpen(false)
+  }
+
   return (
     <div className="flex flex-col gap-4 items-center justify-center">
       <div className="flex flex-row justify-between items-center w-full gap-2">
@@ -166,7 +171,7 @@ export const TokenList = ({
             label="Token Filters"
             buttonLabel="Show Tokens"
             type="tokens"
-            handleButtonPress={() => {}}
+            handleButtonPress={onShowTokens}
           />
         )}
       </AnimatePresence>
diff --git a/packages/wallet-widget/src/components/SearchLists/TokenList/CoinRow.tsx b/packages/wallet-widget/src/components/SearchLists/TokenList/CoinRow.tsx
@@ -22,44 +22,47 @@ export const CoinRow = ({ balance, onTokenClick }: BalanceItemProps) => {
   const tokenName = isNativeToken ? nativeTokenInfo.name : balance?.contractInfo?.name || 'Unknown'
   const symbol = isNativeToken ? nativeTokenInfo.symbol : balance?.contractInfo?.symbol
 
-  const getQuantity = () => {
+  const quantity = useMemo(() => {
     const decimals = isNativeToken ? nativeTokenInfo.decimals : balance?.contractInfo?.decimals
     const bal = formatUnits(BigInt(balance.balance), decimals || 0)
     const displayBalance = formatDisplay(bal)
     const symbol = isNativeToken ? nativeTokenInfo.symbol : balance?.contractInfo?.symbol
 
     return `${displayBalance} ${symbol}`
-  }
+  }, [balance])
 
-  const getValue = () => {
+  const value = useMemo(() => {
     const decimals = isNativeToken ? nativeTokenInfo.decimals : balance?.contractInfo?.decimals
     const bal = formatUnits(BigInt(balance.balance), decimals || 0)
     return `${fiatCurrency.sign}${(balance.price.value * Number(bal)).toFixed(2)}`
-  }
+  }, [balance, fiatCurrency])
 
   const onClick = () => {
     onTokenClick(balance)
   }
 
-  const balanceAndValue = useMemo(() => {
-    return (
-      <div className="flex flex-col items-end">
-        <Text variant="normal" color="primary" fontWeight="bold" ellipsis>
-          {getQuantity()}
-        </Text>
-        <Text variant="normal" color="muted" fontWeight="bold" ellipsis>
-          {getValue()}
-        </Text>
-      </div>
-    )
-  }, [balance])
-
   return (
-    <ListCardNav rightChildren={balanceAndValue} type="custom" onClick={onClick} style={{ height: '60px' }}>
-      <TokenImage src={logoURI} symbol={symbol} size="md" withNetwork={balance.chainId} style={{ zIndex: '0' }} />
-      <Text className="overflow-hidden whitespace-nowrap" variant="normal" color="primary" fontWeight="bold" ellipsis>
-        {tokenName}
-      </Text>
+    <ListCardNav type="custom" onClick={onClick} style={{ height: '60px' }}>
+      <div className="flex flex-row justify-between w-full gap-2">
+        <TokenImage src={logoURI} symbol={symbol} size="md" withNetwork={balance.chainId} />
+        <div className="flex flex-row gap-2 items-center" style={{ flex: '1 1 0', width: 0 }}>
+          <Text className="overflow-hidden" variant="normal" color="primary" fontWeight="bold" ellipsis>
+            {tokenName}
+          </Text>
+        </div>
+        <div className="flex flex-row justify-end items-center" style={{ flex: '1 1 0', width: 0 }}>
+          <div className="flex flex-col items-end w-full">
+            <div className="flex flex-row justify-end w-full">
+              <Text className="overflow-hidden" variant="normal" color="primary" fontWeight="bold" ellipsis>
+                {quantity}
+              </Text>
+            </div>
+            <Text variant="normal" color="muted" fontWeight="bold">
+              {value}
+            </Text>
+          </div>
+        </div>
+      </div>
     </ListCardNav>
   )
 }
diff --git a/packages/wallet-widget/src/components/SelectWalletRow.tsx b/packages/wallet-widget/src/components/SelectWalletRow.tsx
@@ -16,7 +16,6 @@ export const SelectWalletRow = ({
   onClose: () => void
 }) => {
   const onSelectWallet = () => {
-    console.log(wallet.address)
     setActiveWallet(wallet.address)
     onClose()
   }
diff --git a/packages/wallet-widget/src/components/SlideupDrawer.tsx b/packages/wallet-widget/src/components/SlideupDrawer.tsx
@@ -34,7 +34,8 @@ export const SlideupDrawer = ({
           left: 0,
           width: '100%',
           height: '100%',
-          backgroundColor: 'black'
+          backgroundColor: 'black',
+          zIndex: 30
         }}
         onClick={onClose}
       />
@@ -51,7 +52,8 @@ export const SlideupDrawer = ({
           left: 0,
           width: '100%',
           display: 'flex',
-          flexDirection: 'column'
+          flexDirection: 'column',
+          zIndex: 30
         }}
         onClick={e => e.stopPropagation()}
       >
diff --git a/packages/wallet-widget/src/components/TransactionHistoryList/TransactionHistoryItem.tsx b/packages/wallet-widget/src/components/TransactionHistoryList/TransactionHistoryItem.tsx
@@ -1,10 +1,9 @@
 import { TokenPrice } from '@0xsequence/api'
 import { compareAddress, formatDisplay, getNativeTokenInfoByChainId } from '@0xsequence/connect'
-import { ArrowRightIcon, Text, Image, TransactionIcon, Skeleton, NetworkImage } from '@0xsequence/design-system'
+import { ArrowRightIcon, Text, TransactionIcon, Skeleton, NetworkImage, TokenImage } from '@0xsequence/design-system'
 import { useGetCoinPrices, useGetExchangeRate } from '@0xsequence/hooks'
 import { Transaction, TxnTransfer, TxnTransferType } from '@0xsequence/indexer'
 import dayjs from 'dayjs'
-import React from 'react'
 import { formatUnits, zeroAddress } from 'viem'
 import { useConfig } from 'wagmi'
 
@@ -103,7 +102,15 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
       textColor = 'positive'
     }
 
-    return <Text variant="normal" fontWeight="bold" color={textColor}>{`${sign}${amount} ${symbol}`}</Text>
+    return (
+      <Text
+        className="overflow-hidden"
+        variant="normal"
+        fontWeight="bold"
+        color={textColor}
+        ellipsis
+      >{`${sign}${amount} ${symbol}`}</Text>
+    )
   }
 
   interface GetTransfer {
@@ -144,7 +151,11 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
             decimals = isNativeToken ? nativeTokenInfo.decimals : transfer.contractInfo?.decimals
           }
           const amountValue = formatUnits(BigInt(amount), decimals || 18)
-          const symbol = isNativeToken ? nativeTokenInfo.symbol : transfer.contractInfo?.symbol || ''
+          const symbol = isNativeToken
+            ? nativeTokenInfo.symbol
+            : isCollectible
+              ? transfer.contractInfo?.name || ''
+              : transfer.contractInfo?.symbol || ''
           const tokenLogoUri = isNativeToken ? nativeTokenInfo.logoURI : transfer.contractInfo?.logoURI
 
           const fiatConversionRate = coinPrices.find((coinPrice: TokenPrice) =>
@@ -153,8 +164,8 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
 
           return (
             <div className="flex flex-row justify-between" key={index}>
-              <div className="flex flex-row gap-2 justify-center items-center">
-                {tokenLogoUri && <Image className="w-5" src={tokenLogoUri} alt="token logo" />}
+              <div className="flex flex-row gap-2 justify-start items-center w-full">
+                {(tokenLogoUri || symbol) && <TokenImage src={tokenLogoUri} symbol={symbol} size="sm" />}
                 {getTransferAmountLabel(decimals === 0 ? amount : formatDisplay(amountValue), symbol, transfer.transferType)}
               </div>
               {isPending && <Skeleton style={{ width: '35px', height: '20px' }} />}
diff --git a/packages/wallet-widget/src/views/History.tsx b/packages/wallet-widget/src/views/History.tsx
diff --git a/packages/wallet-widget/src/views/TransactionDetails/index.tsx b/packages/wallet-widget/src/views/TransactionDetails/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,6 @@ export const SelectWalletRow = ({`
`16`	`16`	`onClose: () => void`
`17`	`17`	`}) => {`
`18`	`18`	`const onSelectWallet = () => {`
`19`		`- console.log(wallet.address)`
`20`	`19`	`setActiveWallet(wallet.address)`
`21`	`20`	`onClose()`
`22`	`21`	`}`