fix: fixed sbtc page

hirosystems · Dec 17, 2024 · e4a68bb · e4a68bb
1 parent 67e9a23
commit e4a68bb
Show file tree

Hide file tree

Showing 25 changed files with 367 additions and 86 deletions.
diff --git a/src/__tests__/pages/token/[tokenId].test.tsx b/src/__tests__/pages/token/[tokenId].test.tsx
@@ -68,6 +68,7 @@ describe('getTokenInfo', () => {
         name: 'NAME',
         symbol: 'SYMBOL',
         totalSupply: null,
+        circulatingSupply: null,
       },
       extended: {
         categories: [],

diff --git a/src/app/_components/PageTitle.tsx b/src/app/_components/PageTitle.tsx
@@ -6,15 +6,7 @@ import { Heading, HeadingProps } from '../../ui/Heading';
 
 export function PageTitle({ children, ...props }: { children: ReactNode } & HeadingProps) {
   return (
-    <Heading
-      as="h1"
-      fontWeight={'medium'}
-      fontSize="4xl"
-      mt={20}
-      mb="0"
-      color={'slate.50'}
-      {...props}
-    >
+    <Heading as="h1" fontWeight={'medium'} fontSize="4xl" mb={0} color={'slate.50'} {...props}>
       {children}
     </Heading>
   );

diff --git a/src/app/_components/PageWrapper.tsx b/src/app/_components/PageWrapper.tsx
@@ -88,7 +88,7 @@ export function PageWrapper({
           minHeight={'100vh'}
         >
           <NavBar tokenPrice={tokenPrice} />
-          <Flex direction={'column'} mt={10} mb={8} gap={7}>
+          <Flex direction={'column'} mt={30} mb={8} gap={7}>
             {children}
           </Flex>
           <Footer />

diff --git a/src/app/_components/Stats/StackingCycle.tsx b/src/app/_components/Stats/StackingCycle.tsx
@@ -1,7 +1,6 @@
 import { FC, ReactNode } from 'react';
-import * as React from 'react';
 
-import { numberToString } from '../../../common/utils/utils';
+import { abbreviateNumber } from '../../../common/utils/utils';
 import { Box } from '../../../ui/Box';
 import { GridProps } from '../../../ui/Grid';
 import { StatSection } from './StatSection';
@@ -16,7 +15,7 @@ export const StackingCycle: FC<
   return (
     <StatSection
       title={title}
-      bodyMainText={stackedSTX ? numberToString(stackedSTX) : '0'}
+      bodyMainText={stackedSTX ? abbreviateNumber(stackedSTX) : '0'}
       bodySecondaryText={<Box ml={1}>STX stacked</Box>}
       caption={caption}
       {...rest}

diff --git a/src/app/_components/Stats/StxSupply/index.tsx b/src/app/_components/Stats/StxSupply/index.tsx
@@ -4,7 +4,7 @@ import { Info } from '@phosphor-icons/react';
 
 import { useGlobalContext } from '../../../../common/context/useGlobalContext';
 import { useSuspenseStxSupply } from '../../../../common/queries/useStxSupply';
-import { numberToString } from '../../../../common/utils/utils';
+import { abbreviateNumber } from '../../../../common/utils/utils';
 import { Box } from '../../../../ui/Box';
 import { Flex } from '../../../../ui/Flex';
 import { GridProps } from '../../../../ui/Grid';
@@ -18,11 +18,11 @@ function StxSupplyBase(props: GridProps) {
     data: { total_stx, unlocked_stx, total_stx_year_2050 },
   } = useSuspenseStxSupply();
   const circulatingSupplyNumber = unlocked_stx ? Number(unlocked_stx) : 0;
-  const circulatingSupplyFormatted = numberToString(circulatingSupplyNumber);
+  const circulatingSupplyFormatted = abbreviateNumber(circulatingSupplyNumber);
   const totalSupplyNumber = total_stx ? Number(total_stx) : 0;
-  const totalSupplyFormatted = numberToString(totalSupplyNumber);
+  const totalSupplyFormatted = abbreviateNumber(totalSupplyNumber);
   const maxSupplyBy2050Number = total_stx_year_2050 ? Number(total_stx_year_2050) : 0;
-  const maxSupplyBy2050Formatted = numberToString(maxSupplyBy2050Number);
+  const maxSupplyBy2050Formatted = abbreviateNumber(maxSupplyBy2050Number);
   const percentageUnlocked = ((circulatingSupplyNumber / totalSupplyNumber) * 100).toFixed(1);
   const isMainnet = useGlobalContext().activeNetwork.mode === 'mainnet';
 

diff --git a/src/app/signer/[signerKey]/PageClient.tsx b/src/app/signer/[signerKey]/PageClient.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { useBreakpointValue } from '@/ui/hooks/useBreakpointValue';
 import { useParams } from 'next/navigation';
 import { ReactNode } from 'react';
 
 import { Grid } from '../../../ui/Grid';
 import { Stack } from '../../../ui/Stack';
+import { useBreakpointValue } from '../../../ui/hooks/useBreakpointValue';
 import { PageTitle } from '../../_components/PageTitle';
 import { AssociatedAddressesTable } from './AssociatedAddressesTable';
 import { SignerStats } from './SignerStats';

diff --git a/src/app/signer/[signerKey]/StackingHistoryTable.tsx b/src/app/signer/[signerKey]/StackingHistoryTable.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { formatSignerLatency } from '@/app/signers/SignersTable';
 import { useColorModeValue } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { ReactNode, Suspense, useCallback, useMemo, useState } from 'react';
 
+import { formatSignerLatency } from '../../../app/signers/SignersTable';
 import { StackingHistoryInfo, useSignerStackingHistory } from '../../../app/signers/data/UseSigner';
 import { ListFooter } from '../../../common/components/ListFooter';
 import { Section } from '../../../common/components/Section';

diff --git a/src/app/signers/StxStackedCard.tsx b/src/app/signers/StxStackedCard.tsx
@@ -2,7 +2,7 @@ import { Suspense } from 'react';
 
 import { Card } from '../../common/components/Card';
 import { TokenPrice } from '../../common/types/tokenPrice';
-import { numberToString } from '../../common/utils/utils';
+import { abbreviateNumber } from '../../common/utils/utils';
 import { Text } from '../../ui/Text';
 import { ExplorerErrorBoundary } from '../_components/ErrorBoundary';
 import { StatCardBase } from './StatsCardBase';
@@ -31,7 +31,7 @@ export function StxStackedCardBase({ tokenPrice }: { tokenPrice: TokenPrice }) {
   return (
     <StatCardBase
       statTitle="STX stacked"
-      statValue={numberToString(stackedSupply)}
+      statValue={abbreviateNumber(stackedSupply)}
       moreInfo={
         moreInfo ? (
           <Text

diff --git a/src/app/signers/TotalStackedCard.tsx b/src/app/signers/TotalStackedCard.tsx
@@ -1,7 +1,7 @@
 import { Suspense } from 'react';
 
 import { Card } from '../../common/components/Card';
-import { numberToString } from '../../common/utils/utils';
+import { abbreviateNumber } from '../../common/utils/utils';
 import { ExplorerErrorBoundary } from '../_components/ErrorBoundary';
 import { StatCardBase } from './StatsCardBase';
 import { useStxSupply } from './data/useStxSupply';
@@ -18,7 +18,7 @@ export function TotalStackedCardBase() {
     <StatCardBase
       statTitle="Total stacked"
       statValue={stxStackedPercentageFormatted}
-      moreInfo={`of ${numberToString(circulatingSupply)} circulating supply`}
+      moreInfo={`of ${abbreviateNumber(circulatingSupply)} circulating supply`}
     />
   );
 }

diff --git a/src/app/token/[tokenId]/PageClient.tsx b/src/app/token/[tokenId]/PageClient.tsx
@@ -1,10 +1,14 @@
 'use client';
 
+import { getHasSBTCInName, getIsSBTC } from '@/app/tokens/utils';
+import { Box, Icon, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { SealCheck, Warning } from '@phosphor-icons/react';
+
 import { Sip10Disclaimer } from '../../../common/components/Sip10Disclaimer';
 import { Flex } from '../../../ui/Flex';
 import { Tag } from '../../../ui/Tag';
 import { TagLabel } from '../../../ui/TagLabel';
-import { PageTitle, PageTitleWithTags } from '../../_components/PageTitle';
+import { PageTitle } from '../../_components/PageTitle';
 import { Tabs } from './Tabs';
 import { TokenInfo } from './TokenInfo';
 import { TokenInfoProps } from './types';
@@ -17,29 +21,77 @@ export default function PageClient({
   tokenInfo: TokenInfoProps;
 }) {
   if (!tokenInfo.basic) throw new Error('Could not find token info');
-  const { name, symbol } = tokenInfo.basic;
+  const { name, symbol, imageUri } = tokenInfo.basic;
   const categories = tokenInfo.extended?.categories || [];
-
+  const hasSBTCInName = getHasSBTCInName(name ?? '', symbol ?? '');
+  const isSBTC = getIsSBTC(tokenId);
   return (
     <>
-      <Flex justifyContent={'space-between'} alignItems={'flex-end'}>
-        {!!categories.length ? (
-          <PageTitleWithTags
-            tags={categories.map(category => (
+      <Stack gap={2}>
+        {!!categories.length && (
+          <Flex gap={2}>
+            {categories.map(category => (
               <Tag key={category}>
                 <TagLabel>{category}</TagLabel>
               </Tag>
             ))}
-          >
-            {name} ({symbol})
-          </PageTitleWithTags>
-        ) : (
+          </Flex>
+        )}
+        <Flex alignItems={'center'} gap={2} flexWrap="wrap">
+          <Image src={imageUri} alt={name ?? ''} h={10} w={10} />
           <PageTitle>
             {name} ({symbol})
           </PageTitle>
-        )}
-        {/*{!!tokenInfo.extended?.links && <LinksMenu links={tokenInfo.extended.links} />}*/}
-      </Flex>
+          {isSBTC && (
+            <Tag
+              color="green.600"
+              bg="green.300"
+              border="1px solid var(--stacks-colors-green-500)"
+              pt={1}
+              py={2.5}
+            >
+              <Flex alignItems={'center'} gap={1}>
+                <Icon as={SealCheck} h={4} w={4} color="green.600" />
+                <Text fontSize={'md'}>Verified</Text>
+              </Flex>
+            </Tag>
+          )}
+          {hasSBTCInName && !isSBTC && (
+            <Tag
+              color="red.600"
+              bg="red.200"
+              border="1px solid var(--stacks-colors-red-500)"
+              pt={1}
+              py={2.5}
+            >
+              <Flex alignItems={'center'} gap={1}>
+                <Icon as={Warning} h={4} w={4} color="red.600" />
+                <Text fontSize={'md'}>Unverified</Text>
+              </Flex>
+            </Tag>
+          )}
+        </Flex>
+      </Stack>
+      {hasSBTCInName && !isSBTC && (
+        <Box borderRadius="xl" bg="red.200" p={4}>
+          <Flex gap={2}>
+            <Icon as={Warning} h={4} w={4} color="red.600" />
+            <Text fontSize="sm" display="inline">
+              <Text as="span" fontWeight="bold">
+                Warning:&nbsp;
+              </Text>
+              This is not{' '}
+              <Link
+                href="https://explorer.hiro.so/token/SM3VDXK3WZZSA84XXFKAFAF15NNZX32CTSG82JFQ4.sbtc-token?chain=mainnet"
+                isExternal
+              >
+                the official sBTC token
+              </Link>{' '}
+              and may be a scam. Engaging with unverified tokens could result in loss of funds.
+            </Text>
+          </Flex>
+        </Box>
+      )}
       <TokenInfo tokenInfo={tokenInfo} txId={tokenId} />
       <Tabs
         tokenId={tokenId}

diff --git a/src/app/token/[tokenId]/Tabs/holders/Holders.tsx b/src/app/token/[tokenId]/Tabs/holders/Holders.tsx
@@ -1,13 +1,14 @@
 import { useColorModeValue } from '@chakra-ui/react';
 import styled from '@emotion/styled';
-import { ReactNode, Suspense } from 'react';
+import { ReactNode, Suspense, useMemo } from 'react';
 
 import { AddressLink } from '../../../../../common/components/ExplorerLinks';
 import { ListFooter } from '../../../../../common/components/ListFooter';
 import { Section } from '../../../../../common/components/Section';
 import { useSuspenseInfiniteQueryResult } from '../../../../../common/hooks/useInfiniteQueryResult';
 import { useContractById } from '../../../../../common/queries/useContractById';
-import { truncateMiddle } from '../../../../../common/utils/utils';
+import { useFtMetadata } from '../../../../../common/queries/useFtMetadata';
+import { ftDecimals, truncateMiddle } from '../../../../../common/utils/utils';
 import { Flex } from '../../../../../ui/Flex';
 import { Table } from '../../../../../ui/Table';
 import { Tbody } from '../../../../../ui/Tbody';
@@ -98,11 +99,12 @@ function generateHolderRowInfo(
   address: string,
   balance: number,
   totalSupply: number,
-  tokenPrice: number | null | undefined
+  tokenPrice: number | null | undefined,
+  decimals: number | undefined
 ): HolderRowInfo {
   return {
     address,
-    balance: balance.toLocaleString(),
+    balance: ftDecimals(balance, decimals || 0).toLocaleString(),
     percentage: `${((balance / totalSupply) * 100).toFixed(2).toLocaleString()}%`,
     value:
       typeof tokenPrice === 'number' ? (balance * tokenPrice).toFixed(2).toLocaleString() : 'N/A',
@@ -199,6 +201,9 @@ const HoldersTableBase = ({
   const { isFetchingNextPage, fetchNextPage, hasNextPage } = response;
   const { total: totalNumHolders, total_supply: totalSupply } = response.data.pages[0];
   const holderBalances = useSuspenseInfiniteQueryResult<HolderInfo, HolderResponseType>(response);
+  const filteredHolderBalances = holderBalances.filter(holder => holder.balance !== '0');
+  const { data: tokenMetadata } = useFtMetadata(contract?.contract_id);
+  const decimals = useMemo(() => tokenMetadata?.decimals, [tokenMetadata]);
 
   if (!holderBalances || !totalNumHolders || !totalSupply) {
     throw new Error('Holders data is not available');
@@ -209,7 +214,7 @@ const HoldersTableBase = ({
       <HoldersTableLayout
         numHolders={<Text fontWeight="medium">{totalNumHolders.toLocaleString()} Holders</Text>}
         holdersTableHeaders={<HoldersTableHeaders hasPrice={!!tokenPrice} />}
-        holdersTableRows={holderBalances.map((holder, i) => {
+        holdersTableRows={filteredHolderBalances.map((holder, i) => {
           const { address, balance } = holder;
           return (
             <HolderTableRow
@@ -219,7 +224,8 @@ const HoldersTableBase = ({
                 address,
                 parseInt(balance),
                 parseInt(totalSupply),
-                tokenPrice
+                tokenPrice,
+                decimals
               )}
               isFirst={i === 0}
               isLast={i === holderBalances.length - 1}

diff --git a/src/app/token/[tokenId]/TokenInfo/MarketCap.tsx b/src/app/token/[tokenId]/TokenInfo/MarketCap.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import { numberToString } from '../../../../common/utils/utils';
+import { abbreviateNumber } from '../../../../common/utils/utils';
 import { Flex } from '../../../../ui/Flex';
 import { GridProps } from '../../../../ui/Grid';
 import { StatSection } from '../../../_components/Stats/StatSection';
@@ -16,11 +16,11 @@ export const MarketCap: FC<
   return (
     <StatSection
       title="Market Cap"
-      bodyMainText={marketCap ? `$${numberToString(marketCap)}` : 'N/A'}
+      bodyMainText={marketCap ? `$${abbreviateNumber(marketCap)}` : 'N/A'}
       bodySecondaryText={null}
       caption={
         <Flex fontSize={'12px'} fontWeight="500" alignItems={'center'} gap={'6px'}>
-          Trading Volume: ${tradingVolume24h ? numberToString(tradingVolume24h) : 'N/A'}
+          Trading Volume: ${tradingVolume24h ? abbreviateNumber(tradingVolume24h) : 'N/A'}
           {tradingVolumeChangePercentage24h ? (
             <TrendArrow change={tradingVolumeChangePercentage24h} size={'11px'} />
           ) : null}

diff --git a/src/app/token/[tokenId]/TokenInfo/Supply.tsx b/src/app/token/[tokenId]/TokenInfo/Supply.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import { numberToString } from '../../../../common/utils/utils';
+import { abbreviateNumber } from '../../../../common/utils/utils';
 import { Flex } from '../../../../ui/Flex';
 import { GridProps } from '../../../../ui/Grid';
 import { StatSection } from '../../../_components/Stats/StatSection';
@@ -14,11 +14,11 @@ export const Supply: FC<
   return (
     <StatSection
       title="Circulating Supply"
-      bodyMainText={circulatingSupply ? numberToString(circulatingSupply) : <>N/A</>}
+      bodyMainText={circulatingSupply ? abbreviateNumber(circulatingSupply) : <>N/A</>}
       bodySecondaryText={null}
       caption={
         <Flex fontSize={'12px'} color={'textTitle'} fontWeight="500" alignItems={'center'}>
-          Total Supply: {totalSupply ? numberToString(totalSupply) : 'N/A'}
+          Total Supply: {totalSupply ? abbreviateNumber(totalSupply) : 'N/A'}
         </Flex>
       }
       {...gridProps}

diff --git a/src/app/token/[tokenId]/TokenInfo/Transaction.tsx b/src/app/token/[tokenId]/TokenInfo/Transaction.tsx
@@ -2,7 +2,6 @@ import { useColorMode } from '@chakra-ui/react';
 import { FC } from 'react';
 
 import { TxLink } from '../../../../common/components/ExplorerLinks';
-import { numberToString } from '../../../../common/utils/utils';
 import { Box } from '../../../../ui/Box';
 import { Flex } from '../../../../ui/Flex';
 import { GridProps } from '../../../../ui/Grid';

diff --git a/src/app/token/[tokenId]/TokenInfo/index.tsx b/src/app/token/[tokenId]/TokenInfo/index.tsx
@@ -14,7 +14,10 @@ export const TokenInfo: FC<{ tokenInfo: TokenInfoProps; txId: string }> = ({ tok
       <Wrapper>
         <Supply
           borderRightWidth={['0px', '0px', '1px', '1px']}
-          circulatingSupply={tokenInfo.extended?.circulatingSupply}
+          circulatingSupply={
+            tokenInfo.basic?.circulatingSupply || tokenInfo.extended?.circulatingSupply
+            // tokenInfo.extended?.circulatingSupply
+          }
           totalSupply={tokenInfo.basic?.totalSupply}
         />
         <Price