diff --git a/src/modules/zerion-api/requests/explore-info.ts b/src/modules/zerion-api/requests/explore-info.ts index fc1129fac2..6eb2d38efd 100644 --- 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 index b14abd02f2..305a47a106 100644 --- 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 ( {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 ( {section.fungibles.map((token) => ( @@ -174,7 +180,7 @@ function TopMovers({ section }: { section: TopMoversType }) { }} > - + + {section.mints.map((mint) => ( + + + {mint.title} + + + {mint.title} + + + {mint.reason.title} + + + + + ))} + + ); +} + +function PopularWallets({ section }: { section: PopularWalletsType }) { + return ( + + {section.wallets.map((wallet) => ( + + + + + {wallet.name === wallet.address + ? middleTruncate({ value: wallet.address }) + : wallet.name} + + + + ))} + + ); +} + 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 ( - -
+ +
- + {exploreData?.data.sections.map((section) => ( - {section.title} {section.id === 'featured_dapps' ? ( - - ) : section.id === 'top_movers' ? ( - + <> + {section.title} + + + ) : section.id === 'top_movers' || section.id === 'top_tokens' ? ( + <> + {section.title} + + + ) : section.id === 'mints_for_you' ? ( + <> + {section.title} + + + ) : section.id === 'popular_wallets' ? ( + <> + {section.title} + + ) : null} ))}