Add top movers

zeriontech · Sep 6, 2024 · 6f8ed25 · 6f8ed25
1 parent e5fd93d
commit 6f8ed25
Showing 1 changed file with 67 additions and 2 deletions.
diff --git a/src/ui/NewTab/NewTab.tsx b/src/ui/NewTab/NewTab.tsx
@@ -8,6 +8,7 @@ import {
 } from 'src/shared/units/formatCurrencyValue';
 import { formatPercent } from 'src/shared/units/formatPercent/formatPercent';
 import type { ExternallyOwnedAccount } from 'src/shared/types/ExternallyOwnedAccount';
+import type { TopMovers as TopMoversType } from 'src/modules/zerion-api/requests/explore-info';
 import { FeaturedDapps } from 'src/modules/zerion-api/requests/explore-info';
 import { UIText } from '../ui-kit/UIText';
 import { useWalletAddresses } from '../pages/Networks/shared/useWalletAddresses';
@@ -25,6 +26,7 @@ import { WalletDisplayName } from '../components/WalletDisplayName';
 import { PortfolioValue } from '../shared/requests/PortfolioValue';
 import { UnstyledAnchor } from '../ui-kit/UnstyledAnchor';
 import { useBackgroundKind } from '../components/Background';
+import { TokenIcon } from '../ui-kit/TokenIcon';
 
 function WalletItem({
   wallet,
@@ -118,9 +120,8 @@ function WalletItem({
 }
 
 function FeaturedDapps({ section }: { section: FeaturedDapps }) {
-  console.log(section);
   return (
-    <HStack gap={20} style={{ overflowX: 'scroll' }}>
+    <HStack gap={20} style={{ overflowX: 'scroll', paddingRight: 48 }}>
       {section.dapps.map((dapp) => (
         <UnstyledAnchor key={dapp.name} href={dapp.url}>
           <VStack gap={4} style={{ width: 52, overflow: 'hidden' }}>
@@ -153,13 +154,75 @@ function FeaturedDapps({ section }: { section: FeaturedDapps }) {
   );
 }
 
+function TopMovers({ section }: { section: TopMoversType }) {
+  return (
+    <HStack gap={20} style={{ overflowX: 'scroll', paddingRight: 48 }}>
+      {section.fungibles.map((token) => (
+        <UnstyledAnchor
+          key={token.id}
+          href={`https://app.zerion.io/tokens/${token.id}`}
+        >
+          <VStack
+            gap={12}
+            style={{
+              padding: 8,
+              border: '2px solid var(--neutral-200)',
+              borderRadius: 20,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              width: 120,
+            }}
+          >
+            <TokenIcon src={token.iconUrl} size={24} symbol={token.symbol} />
+            <VStack gap={4}>
+              <UIText
+                kind="caption/accent"
+                color="var(--neutral-600)"
+                title={token.name}
+                style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}
+              >
+                {token.name}
+              </UIText>
+              <UIText kind="small/regular">
+                <NeutralDecimals
+                  parts={formatCurrencyToParts(
+                    token.meta.price || '0',
+                    'en',
+                    'usd'
+                  )}
+                />
+              </UIText>
+              <UIText
+                kind="caption/accent"
+                color={
+                  (token.meta.relativeChange1d || 0) >= 0
+                    ? 'var(--positive-500)'
+                    : 'var(--negative-500)'
+                }
+              >
+                {(token.meta.relativeChange1d || 0) >= 0 ? '+' : minus}
+                {formatPercent(
+                  Math.abs(token.meta.relativeChange1d || 0),
+                  'en'
+                )}
+                %
+              </UIText>
+            </VStack>
+          </VStack>
+        </UnstyledAnchor>
+      ))}
+    </HStack>
+  );
+}
+
 function Explore({ addresses }: { addresses: string[] }) {
   const { data: exploreData } = useQuery({
     queryKey: ['getExploreSections', addresses],
     queryFn: () =>
       addresses
         ? ZerionAPI.getExploreSections({ addresses, currency: 'usd' })
         : null,
+    suspense: false,
   });
 
   const { data: portfolioData } = useAddressPortfolioDecomposition({
@@ -212,6 +275,8 @@ function Explore({ addresses }: { addresses: string[] }) {
               <UIText kind="small/accent">{section.title}</UIText>
               {section.id === 'featured_dapps' ? (
                 <FeaturedDapps section={section} />
+              ) : section.id === 'top_movers' ? (
+                <TopMovers section={section} />
               ) : null}
             </VStack>
           ))}