add rest of the sections

zeriontech · Sep 6, 2024 · 36a3494 · 36a3494
1 parent 6f8ed25
commit 36a3494
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 16 deletions.
diff --git a/src/modules/zerion-api/requests/explore-info.ts b/src/modules/zerion-api/requests/explore-info.ts
@@ -60,7 +60,7 @@ export interface TopMovers {
 
 export interface TopTokens {
   id: 'top_tokens';
-  fungible: Fungible[];
+  fungibles: Fungible[];
 }
 
 interface Mint {

diff --git a/src/ui/NewTab/NewTab.tsx b/src/ui/NewTab/NewTab.tsx
@@ -8,8 +8,13 @@ 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 type {
+  MintsForYou as MintForYouType,
+  TopMovers as TopMoversType,
+  FeaturedDapps as FeaturedDappsType,
+  PopularWallets as PopularWalletsType,
+  TopTokens as TopTokensType,
+} from 'src/modules/zerion-api/requests/explore-info';
 import { UIText } from '../ui-kit/UIText';
 import { useWalletAddresses } from '../pages/Networks/shared/useWalletAddresses';
 import { VerifyUser } from '../components/VerifyUser';
@@ -27,6 +32,7 @@ import { PortfolioValue } from '../shared/requests/PortfolioValue';
 import { UnstyledAnchor } from '../ui-kit/UnstyledAnchor';
 import { useBackgroundKind } from '../components/Background';
 import { TokenIcon } from '../ui-kit/TokenIcon';
+import { middleTruncate } from '../shared/middleTruncate';
 
 function WalletItem({
   wallet,
@@ -119,7 +125,7 @@ function WalletItem({
   );
 }
 
-function FeaturedDapps({ section }: { section: FeaturedDapps }) {
+function FeaturedDapps({ section }: { section: FeaturedDappsType }) {
   return (
     <HStack gap={20} style={{ overflowX: 'scroll', paddingRight: 48 }}>
       {section.dapps.map((dapp) => (
@@ -154,7 +160,7 @@ function FeaturedDapps({ section }: { section: FeaturedDapps }) {
   );
 }
 
-function TopMovers({ section }: { section: TopMoversType }) {
+function TokenList({ section }: { section: TopMoversType | TopTokensType }) {
   return (
     <HStack gap={20} style={{ overflowX: 'scroll', paddingRight: 48 }}>
       {section.fungibles.map((token) => (
@@ -174,7 +180,7 @@ function TopMovers({ section }: { section: TopMoversType }) {
             }}
           >
             <TokenIcon src={token.iconUrl} size={24} symbol={token.symbol} />
-            <VStack gap={4}>
+            <VStack gap={0}>
               <UIText
                 kind="caption/accent"
                 color="var(--neutral-600)"
@@ -215,6 +221,80 @@ function TopMovers({ section }: { section: TopMoversType }) {
   );
 }
 
+function MintsForYou({ section }: { section: MintForYouType }) {
+  return (
+    <HStack gap={20} style={{ overflowX: 'scroll', paddingRight: 48 }}>
+      {section.mints.map((mint) => (
+        <UnstyledAnchor key={mint.id} href={mint.action}>
+          <VStack
+            gap={8}
+            style={{ width: 128, overflow: 'hidden', whiteSpace: 'nowrap' }}
+          >
+            <img
+              src={mint.imageUrl}
+              alt={mint.title}
+              style={{
+                width: 128,
+                height: 128,
+                borderRadius: 20,
+                overflow: 'hidden',
+              }}
+            />
+            <VStack gap={0}>
+              <UIText
+                kind="body/accent"
+                style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
+              >
+                {mint.title}
+              </UIText>
+              <UIText
+                kind="caption/accent"
+                color="var(--neutral-600)"
+                style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
+              >
+                {mint.reason.title}
+              </UIText>
+            </VStack>
+          </VStack>
+        </UnstyledAnchor>
+      ))}
+    </HStack>
+  );
+}
+
+function PopularWallets({ section }: { section: PopularWalletsType }) {
+  return (
+    <HStack gap={20} style={{ overflowX: 'scroll', paddingRight: 48 }}>
+      {section.wallets.map((wallet) => (
+        <UnstyledAnchor
+          key={wallet.address}
+          href={`https://app.zerion.io/${wallet.address}${
+            wallet.name !== wallet.address ? `?name=${wallet.name}` : ''
+          }`}
+        >
+          <HStack
+            gap={8}
+            style={{
+              padding: '8px 16px',
+              border: '2px solid var(--neutral-200)',
+              borderRadius: 20,
+              whiteSpace: 'nowrap',
+            }}
+            alignItems="center"
+          >
+            <WalletAvatar address={wallet.address} borderRadius={8} size={32} />
+            <UIText kind="small/accent">
+              {wallet.name === wallet.address
+                ? middleTruncate({ value: wallet.address })
+                : wallet.name}
+            </UIText>
+          </HStack>
+        </UnstyledAnchor>
+      ))}
+    </HStack>
+  );
+}
+
 function Explore({ addresses }: { addresses: string[] }) {
   const { data: exploreData } = useQuery({
     queryKey: ['getExploreSections', addresses],
@@ -254,11 +334,15 @@ function Explore({ addresses }: { addresses: string[] }) {
   const changeValue = portfolioData?.['portfolio-decomposition'].change_24h;
 
   return (
-    <HStack
-      gap={0}
-      style={{ minHeight: '100vh', gridTemplateColumns: '1fr 448px' }}
-    >
-      <div style={{ padding: '48px 0 48px 32px', position: 'relative' }}>
+    <HStack gap={0} style={{ gridTemplateColumns: '1fr 448px' }}>
+      <div
+        style={{
+          padding: '48px 0 48px 32px',
+          position: 'relative',
+          height: '100vh',
+          overflowY: 'auto',
+        }}
+      >
         <div
           style={{
             position: 'absolute',
@@ -269,14 +353,29 @@ function Explore({ addresses }: { addresses: string[] }) {
             backgroundColor: 'var(--neutral-200)',
           }}
         />
-        <VStack gap={32}>
+        <VStack gap={24}>
           {exploreData?.data.sections.map((section) => (
             <VStack gap={8} key={section.id}>
-              <UIText kind="small/accent">{section.title}</UIText>
               {section.id === 'featured_dapps' ? (
-                <FeaturedDapps section={section} />
-              ) : section.id === 'top_movers' ? (
-                <TopMovers section={section} />
+                <>
+                  <UIText kind="small/accent">{section.title}</UIText>
+                  <FeaturedDapps section={section} />
+                </>
+              ) : section.id === 'top_movers' || section.id === 'top_tokens' ? (
+                <>
+                  <UIText kind="small/accent">{section.title}</UIText>
+                  <TokenList section={section} />
+                </>
+              ) : section.id === 'mints_for_you' ? (
+                <>
+                  <UIText kind="small/accent">{section.title}</UIText>
+                  <MintsForYou section={section} />
+                </>
+              ) : section.id === 'popular_wallets' ? (
+                <>
+                  <UIText kind="small/accent">{section.title}</UIText>
+                  <PopularWallets section={section} />
+                </>
               ) : null}
             </VStack>
           ))}