update website to support exchanges

0xa3k5 · Jan 11, 2025 · deb2ce0 · deb2ce0
1 parent ae6d8ce
commit deb2ce0
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 99 deletions.
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
@@ -3,7 +3,6 @@ import { ControlBar, IconCard, ActionBar } from '../components'
 import CodeBlock from '../components/CodeBlock/CodeBlock'
 import { useAppContext } from '../hooks'
 import Logo from '../components/Logo'
-import { Suspense } from 'react'
 import Tabs from '../components/Tabs'
 
 const links = [
@@ -69,13 +68,11 @@ export default function Home() {
           <div className="grid w-full grid-cols-2 sm:grid-cols-3 lg:grid-cols-5">
             {icons.map((icon) => {
               return (
-                <Suspense>
-                  <IconCard
-                    key={icon.id}
-                    metadata={icon}
-                    className="col-span-1 border border-gray-lightest "
-                  />
-                </Suspense>
+                <IconCard
+                  key={icon.id}
+                  metadata={icon}
+                  className="col-span-1 border border-gray-lightest"
+                />
               )
             })}
             <div className="col-span-full my-8 flex justify-center">

diff --git a/apps/website/src/components/IconCard.tsx b/apps/website/src/components/IconCard.tsx
@@ -13,7 +13,6 @@ interface Props {
 }
 
 export default function IconCard({ className, metadata }: Props): JSX.Element {
-  // prettier-ignore
   const { variant, selectedIcons, setSelectedIcons, type } = useAppContext()
 
   const _label =

diff --git a/apps/website/src/components/Tabs.tsx b/apps/website/src/components/Tabs.tsx
@@ -42,7 +42,7 @@ export default function Tabs({ className }: TabsProps): JSX.Element {
         'sticky top-0 z-[2] inline-flex w-full rounded-sm border-b border-gray-lightest bg-gray-darkest py-4',
       )}
     >
-      {['token', 'network', 'wallet'].map((tab) => (
+      {['token', 'network', 'wallet', 'exchange'].map((tab) => (
         <Fragment key={tab}>
           <input
             type="radio"

diff --git a/apps/website/src/components/Web3Icon.tsx b/apps/website/src/components/Web3Icon.tsx
@@ -1,13 +1,18 @@
 'use client'
-
-import { TokenIcon, NetworkIcon, WalletIcon } from '@web3icons/react'
 import { useAppContext } from '../hooks'
+import {
+  TokenIcon,
+  NetworkIcon,
+  WalletIcon,
+  ExchangeIcon,
+} from '@web3icons/react'
 import {
   TMetadata,
   TVariant,
   INetworkMetadata,
   IWalletMetadata,
   ITokenMetadata,
+  IExchangeMetadata,
 } from '@web3icons/common'
 
 export const Web3Icon = ({
@@ -20,28 +25,27 @@ export const Web3Icon = ({
   size?: number
 }): JSX.Element => {
   const { type, color, size } = useAppContext()
-  if (type === 'network') {
-    return (
-      <NetworkIcon
-        network={(metadata as INetworkMetadata).id}
-        size={passedSize ?? size}
-        {...{ variant, color }}
-      />
-    )
-  } else if (type === 'wallet') {
-    return (
-      <WalletIcon
-        id={(metadata as IWalletMetadata).id}
-        size={passedSize ?? size}
-        {...{ variant, color }}
-      />
-    )
+
+  const props = {
+    size: passedSize ?? size,
+    variant,
+    color,
+  }
+
+  console.log({ metadata })
+
+  switch (type) {
+    case 'network':
+      return (
+        <NetworkIcon network={(metadata as INetworkMetadata).id} {...props} />
+      )
+    case 'wallet':
+      return <WalletIcon id={(metadata as IWalletMetadata).id} {...props} />
+    case 'exchange':
+      return <ExchangeIcon id={(metadata as IExchangeMetadata).id} {...props} />
+    default:
+      return (
+        <TokenIcon symbol={(metadata as ITokenMetadata).symbol} {...props} />
+      )
   }
-  return (
-    <TokenIcon
-      symbol={(metadata as ITokenMetadata).symbol}
-      size={passedSize ?? size}
-      {...{ variant, color }}
-    />
-  )
 }
diff --git a/apps/website/src/utils/filter-and-sort.ts b/apps/website/src/utils/filter-and-sort.ts
@@ -7,46 +7,17 @@ import {
   wallets,
   TVariant,
   TType,
+  IExchangeMetadata,
+  exchanges,
 } from '@web3icons/common'
 
-const groupedNetworks: Record<string, INetworkMetadata[]> = {}
-
-networks.forEach((network) => {
-  network.variants.forEach((variant) => {
-    if (!groupedNetworks[variant]) {
-      groupedNetworks[variant] = []
-    }
-    groupedNetworks[variant]?.push(network)
-  })
-})
-
-const groupedTokens: Record<string, ITokenMetadata[]> = {}
-
-tokens.sort(
-  (a, b) => (a.marketCapRank || Infinity) - (b.marketCapRank || Infinity),
-)
-
-tokens.forEach((token) => {
-  token.variants.forEach((variant) => {
-    if (!groupedTokens[variant]) {
-      groupedTokens[variant] = []
-    }
-    groupedTokens[variant]?.push(token)
-  })
-})
-
-const groupedWallets: Record<string, IWalletMetadata[]> = {}
-
-wallets.forEach((wallet) => {
-  wallet.variants.forEach((variant) => {
-    if (!groupedWallets[variant]) {
-      groupedWallets[variant] = []
-    }
-    groupedWallets[variant]?.push(wallet)
-  })
-})
+const groupByVariant = <T extends { variants: TVariant[] }>(
+  arr: T[],
+  variant: TVariant,
+): T[] => {
+  return arr.filter((item) => item.variants.includes(variant))
+}
 
-// group by variants
 export const filterAndSortIcons = ({
   variant,
   searchTerm,
@@ -59,35 +30,31 @@ export const filterAndSortIcons = ({
   type: TType
   nextBatchIndex: number
   perPage: number
-}) => {
-  const filteredNetworkIcons = groupedNetworks[variant]?.filter(
-    (network) =>
-      network.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      network.id?.toLowerCase().includes(searchTerm.toLowerCase()),
-  )
-
-  const filteredTokens = groupedTokens[variant]?.filter(
-    (token) =>
-      token.symbol.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      token.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      token.id.toLowerCase().includes(searchTerm.toLowerCase()),
-  )
-
-  const filteredWalletIcons = groupedWallets[variant]?.filter(
-    (wallet) =>
-      wallet.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      wallet.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  )
-
-  if (type === 'token' && filteredTokens) {
-    return filteredTokens.slice(0, nextBatchIndex + perPage)
+}): (
+  | INetworkMetadata
+  | ITokenMetadata
+  | IWalletMetadata
+  | IExchangeMetadata
+)[] => {
+  const filterFunction = (item: any) => {
+    const searchTermLower = searchTerm.toLowerCase()
+    return (
+      item.symbol?.toLowerCase().includes(searchTermLower) ||
+      item.id?.toLowerCase().includes(searchTermLower) ||
+      item.name?.toLowerCase().includes(searchTermLower)
+    )
   }
 
-  if (type === 'network' && filteredNetworkIcons) {
-    return filteredNetworkIcons.slice(0, nextBatchIndex + perPage)
+  const filteredIcons = {
+    network: groupByVariant(networks, variant).filter(filterFunction),
+    wallet: groupByVariant(wallets, variant).filter(filterFunction),
+    exchange: groupByVariant(exchanges, variant).filter(filterFunction),
+    token: groupByVariant(tokens, variant)
+      .filter(filterFunction)
+      .sort(
+        (a, b) => (a.marketCapRank || Infinity) - (b.marketCapRank || Infinity),
+      ),
   }
 
-  if (type === 'wallet' && filteredWalletIcons) {
-    return filteredWalletIcons.slice(0, nextBatchIndex + perPage)
-  }
+  return filteredIcons[type]?.slice(0, nextBatchIndex + perPage) || []
 }