From e4a68bb29bac9af052328aa21d937c41a65c6b93 Mon Sep 17 00:00:00 2001
From: Nicholas Barnett <n-barnett@hotmail.com>
Date: Mon, 16 Dec 2024 19:03:55 -0600
Subject: [PATCH] fix: fixed sbtc page

---
 src/__tests__/pages/token/[tokenId].test.tsx  |   1 +
 src/app/_components/PageTitle.tsx             |  10 +-
 src/app/_components/PageWrapper.tsx           |   2 +-
 src/app/_components/Stats/StackingCycle.tsx   |   5 +-
 src/app/_components/Stats/StxSupply/index.tsx |   8 +-
 src/app/signer/[signerKey]/PageClient.tsx     |   2 +-
 .../[signerKey]/StackingHistoryTable.tsx      |   2 +-
 src/app/signers/StxStackedCard.tsx            |   4 +-
 src/app/signers/TotalStackedCard.tsx          |   4 +-
 src/app/token/[tokenId]/PageClient.tsx        |  80 ++++++++++---
 .../token/[tokenId]/Tabs/holders/Holders.tsx  |  18 ++-
 .../token/[tokenId]/TokenInfo/MarketCap.tsx   |   6 +-
 src/app/token/[tokenId]/TokenInfo/Supply.tsx  |   6 +-
 .../token/[tokenId]/TokenInfo/Transaction.tsx |   1 -
 src/app/token/[tokenId]/TokenInfo/index.tsx   |   5 +-
 src/app/token/[tokenId]/getTokenInfo.ts       |  74 +++++++++---
 src/app/token/[tokenId]/types.ts              |   2 +
 src/app/tokens/TokenRow/index.tsx             |  44 ++++++-
 src/app/tokens/TokensList/TokenTable.tsx      |   3 +-
 .../__snapshots__/TokenRow.test.tsx.snap      |   2 +-
 src/app/tokens/utils.ts                       |  12 ++
 src/common/queries/useFeeTransfer.ts          |   3 +-
 src/common/utils/__tests__/utils.spec.ts      | 111 +++++++++++++++++-
 src/common/utils/utils.ts                     |  47 ++++++--
 src/ui/theme/space.ts                         |   1 +
 25 files changed, 367 insertions(+), 86 deletions(-)
 create mode 100644 src/app/tokens/utils.ts

diff --git a/src/__tests__/pages/token/[tokenId].test.tsx b/src/__tests__/pages/token/[tokenId].test.tsx
index 89e12c768..edd23ddba 100644
--- 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
index 38df323fd..b119a83df 100644
--- 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
index 68c49a13b..736b60d38 100644
--- 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
index c935799c8..14987dccf 100644
--- 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
index 243fcaf58..c93a99945 100644
--- 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
index 59e25fe74..f202e70f8 100644
--- 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
index 7e60bbe10..ceff78a5c 100644
--- 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
index 599912103..4bbb29738 100644
--- 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
index 7f4140f6f..6cb720c8c 100644
--- 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
index 9ea142a2e..70ad292b5 100644
--- 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
index c80c22949..340bf48c0 100644
--- 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
index bee89515d..197c92183 100644
--- 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
index befb6b0ef..ebc1b54ab 100644
--- 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
index 0ad00c08a..cad81e115 100644
--- 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
index f91802285..09f59ca62 100644
--- 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
diff --git a/src/app/token/[tokenId]/getTokenInfo.ts b/src/app/token/[tokenId]/getTokenInfo.ts
index 88e1f4a09..d7ddb99da 100644
--- a/src/app/token/[tokenId]/getTokenInfo.ts
+++ b/src/app/token/[tokenId]/getTokenInfo.ts
@@ -1,12 +1,15 @@
+import { ContractResponse } from '@/common/types/tx';
 import { FtMetadataResponse } from '@hirosystems/token-metadata-api-client';
 
 import { LUNAR_CRUSH_API_KEY } from '../../../common/constants/env';
 import { LunarCrushCoin } from '../../../common/types/lunarCrush';
 import { getCacheClient } from '../../../common/utils/cache-client';
 import { getApiUrl } from '../../../common/utils/network-utils';
+import { getFtDecimalAdjustedBalance } from '../../../common/utils/utils';
+import { HolderResponseType } from './Tabs/data/useHolders';
 import { BasicTokenInfo, DeveloperData, TokenInfoProps, TokenLinks } from './types';
 
-async function getToken(tokenId: string): Promise<LunarCrushCoin | undefined> {
+async function getTokenInfoFromLunarCrush(tokenId: string): Promise<LunarCrushCoin | undefined> {
   try {
     return await (
       await fetch(`https://lunarcrush.com/api4/public/coins/${tokenId}/v1`, {
@@ -31,7 +34,41 @@ async function getCachedTokenInfo(tokenId: string) {
   }
 }
 
-async function getBasicTokenInfo(
+async function getCirculatingSupplyFromHoldersEndpoint(apiUrl: string, tokenId: string) {
+  const contractInfoResponse = await fetch(`${apiUrl}/extended/v1/contract/${tokenId}`);
+  if (!contractInfoResponse.ok) {
+    console.error('Failed to fetch contract info');
+    return null;
+  }
+  const contractInfo: ContractResponse = await contractInfoResponse.json();
+  if (!contractInfo.abi) {
+    console.error('No ABI found for token');
+    return null;
+  }
+  const abi = JSON.parse(contractInfo.abi);
+  if (!abi?.fungible_tokens || abi.fungible_tokens.length === 0) {
+    console.error('No fungible tokens found in ABI');
+    return null;
+  }
+  const ftName = abi.fungible_tokens[0].name;
+  const fullyQualifiedTokenId = `${tokenId}::${ftName}`;
+  const holdersResponse = await fetch(
+    `${apiUrl}/extended/v1/tokens/ft/${fullyQualifiedTokenId}/holders`
+  );
+  if (!holdersResponse.ok) {
+    console.error('Failed to fetch holders info');
+    return null;
+  }
+  const holdersInfo: HolderResponseType = await holdersResponse.json();
+  if (!holdersInfo?.total_supply) {
+    console.error('No total supply found in holders info');
+    return null;
+  }
+  const holdersCirculatingSupply = holdersInfo.total_supply;
+  return holdersCirculatingSupply;
+}
+
+async function getBasicTokenInfoFromStacksApi(
   tokenId: string,
   chain: string,
   api?: string
@@ -44,38 +81,41 @@ async function getBasicTokenInfo(
       throw new Error('Unable to fetch token info for this request');
     }
 
-    console.log('[debug] cache miss, fetching ', `${apiUrl}/metadata/v1/ft/${tokenId}`);
-
     const tokenMetadataResponse = await fetch(`${apiUrl}/metadata/v1/ft/${tokenId}`);
-
     const tokenMetadata: FtMetadataResponse = await tokenMetadataResponse.json();
 
     const tokenName = tokenMetadata?.name;
     const tokenSymbol = tokenMetadata?.symbol;
+    const tokenDecimals = tokenMetadata?.decimals;
 
     if (!tokenName || !tokenSymbol) {
       throw new Error('token not found');
     }
 
+    const holdersCirculatingSupply = await getCirculatingSupplyFromHoldersEndpoint(apiUrl, tokenId);
+
     return {
       name: tokenMetadata?.metadata?.name || tokenName,
       symbol: tokenSymbol,
       totalSupply:
-        tokenMetadata?.total_supply && tokenMetadata?.decimals
-          ? Number(
-              BigInt(tokenMetadata?.total_supply) / BigInt(Math.pow(10, tokenMetadata?.decimals))
-            )
+        tokenMetadata?.total_supply && tokenDecimals
+          ? getFtDecimalAdjustedBalance(tokenMetadata?.total_supply, tokenDecimals)
           : null,
+      circulatingSupply: holdersCirculatingSupply
+        ? getFtDecimalAdjustedBalance(holdersCirculatingSupply, tokenDecimals || 0)
+        : null,
+      imageUri: tokenMetadata?.image_uri,
     };
   } catch (error) {
     console.error(error);
   }
 }
 
-async function getDetailedTokenInfo(tokenId: string, basicTokenInfo: BasicTokenInfo) {
+async function getDetailedTokenInfoFromLunarCrush(tokenId: string, basicTokenInfo: BasicTokenInfo) {
   try {
-    const tokenInfoResponse = await getToken(tokenId);
+    const tokenInfoResponse = await getTokenInfoFromLunarCrush(tokenId);
     if (!tokenInfoResponse || tokenInfoResponse?.error) {
+      console.error('token not found in LunarCrush');
       return {
         basic: basicTokenInfo,
       };
@@ -85,8 +125,12 @@ async function getDetailedTokenInfo(tokenId: string, basicTokenInfo: BasicTokenI
     const symbol = tokenInfoResponse?.data?.symbol || basicTokenInfo.symbol || null;
     const categories: string[] = [];
 
-    const circulatingSupply = tokenInfoResponse?.data?.circulating_supply || null;
     const totalSupply = basicTokenInfo.totalSupply || null;
+    const circulatingSupplyFromBasicTokenInfo = basicTokenInfo.circulatingSupply || null;
+    const circulatingSupply =
+      tokenInfoResponse?.data?.circulating_supply || circulatingSupplyFromBasicTokenInfo || null;
+    // const circulatingSupply = tokenInfoResponse?.data?.circulating_supply || null;
+    const imageUri = basicTokenInfo.imageUri || undefined;
 
     const currentPrice = tokenInfoResponse?.data?.price || null;
     const currentPriceInBtc = tokenInfoResponse?.data?.price_btc || null;
@@ -126,6 +170,8 @@ async function getDetailedTokenInfo(tokenId: string, basicTokenInfo: BasicTokenI
         name,
         symbol,
         totalSupply,
+        imageUri,
+        circulatingSupply,
       },
       extended: {
         categories,
@@ -177,12 +223,12 @@ export async function getTokenInfo(
       return cachedTokenInfo;
     }
 
-    const basicTokenInfo = await getBasicTokenInfo(tokenId, chain, api);
+    const basicTokenInfo = await getBasicTokenInfoFromStacksApi(tokenId, chain, api);
     if (!basicTokenInfo) {
       return {};
     }
 
-    const detailedTokenInfo = await getDetailedTokenInfo(tokenId, basicTokenInfo);
+    const detailedTokenInfo = await getDetailedTokenInfoFromLunarCrush(tokenId, basicTokenInfo);
     return detailedTokenInfo;
   } catch (error) {
     console.error(error);
diff --git a/src/app/token/[tokenId]/types.ts b/src/app/token/[tokenId]/types.ts
index c4c5b5605..57066ed31 100644
--- a/src/app/token/[tokenId]/types.ts
+++ b/src/app/token/[tokenId]/types.ts
@@ -28,6 +28,8 @@ export interface BasicTokenInfo {
   name: string | null;
   symbol: string | null;
   totalSupply: number | null;
+  circulatingSupply: number | null;
+  imageUri: string | undefined;
 }
 
 export interface TokenInfoProps {
diff --git a/src/app/tokens/TokenRow/index.tsx b/src/app/tokens/TokenRow/index.tsx
index 56f11d36c..0331f1a63 100644
--- a/src/app/tokens/TokenRow/index.tsx
+++ b/src/app/tokens/TokenRow/index.tsx
@@ -1,21 +1,25 @@
-import { useColorMode } from '@chakra-ui/react';
+import { Icon } from '@chakra-ui/react';
 import { FtBasicMetadataResponse } from '@hirosystems/token-metadata-api-client';
-import React, { FC } from 'react';
+import { SealCheck, Warning } from '@phosphor-icons/react';
+import { FC } from 'react';
 
 import { TokenLink, TxLink } from '../../../common/components/ExplorerLinks';
-import { numberToString } from '../../../common/utils/utils';
+import { abbreviateNumber, getFtDecimalAdjustedBalance } from '../../../common/utils/utils';
 import { Flex } from '../../../ui/Flex';
 import { Td } from '../../../ui/Td';
 import { Text } from '../../../ui/Text';
 import { Tr } from '../../../ui/Tr';
 import { TokenAvatar } from '../../address/[principal]/TokenBalanceCard/TokenAvatar';
+import { getHasSBTCInName, getIsSBTC } from '../utils';
 
 export const TokenRow: FC<{
   ftToken: FtBasicMetadataResponse;
 }> = ({ ftToken }) => {
-  const colorMode = useColorMode().colorMode;
   const name = ftToken.name || 'FT Token';
-  // `${ftToken.contract_principal}::${name}`
+
+  const hasSBTCInName = getHasSBTCInName(name, ftToken.symbol ?? '');
+  const isSBTC = getIsSBTC(ftToken.contract_principal);
+
   return (
     <Tr>
       <Td padding={'10px 20px 10px 16px'} width={['auto', 'auto', '30%']}>
@@ -30,6 +34,29 @@ export const TokenRow: FC<{
           >
             {name} {ftToken.symbol ? `(${ftToken.symbol})` : null}
           </TokenLink>
+          {hasSBTCInName ? (
+            isSBTC ? (
+              <Flex
+                px={1.5}
+                py={1}
+                bg="green.300"
+                borderRadius="2xl"
+                border="1px solid var(--stacks-colors-green-500)"
+              >
+                <Icon as={SealCheck} h={3} w={3} color="green.600" />
+              </Flex>
+            ) : (
+              <Flex
+                px={1.5}
+                py={1}
+                bg="red.200"
+                borderRadius="2xl"
+                border="1px solid var(--stacks-colors-red-500)"
+              >
+                <Icon as={Warning} h={3} w={3} color="red.600" />
+              </Flex>
+            )
+          ) : null}
         </Flex>
       </Td>
       <Td padding={'10px'} display={['none', 'none', 'table-cell']}>
@@ -39,7 +66,12 @@ export const TokenRow: FC<{
       </Td>
       <Td isNumeric width={'130px'} padding={'10px 16px 10px 20px'}>
         <Text whiteSpace={'nowrap'} textOverflow={'ellipsis'} overflow={'hidden'} fontSize={'15px'}>
-          {numberToString(ftToken.total_supply ? Number(ftToken.total_supply) : 0)}
+          {ftToken.total_supply
+            ? abbreviateNumber(
+                getFtDecimalAdjustedBalance(ftToken.total_supply, ftToken.decimals || 0),
+                2
+              )
+            : 'N/A'}
         </Text>
       </Td>
     </Tr>
diff --git a/src/app/tokens/TokensList/TokenTable.tsx b/src/app/tokens/TokensList/TokenTable.tsx
index 980051281..89374c47a 100644
--- a/src/app/tokens/TokensList/TokenTable.tsx
+++ b/src/app/tokens/TokensList/TokenTable.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { ListFooter } from '../../../common/components/ListFooter';
 import { Grid } from '../../../ui/Grid';
 import { Table } from '../../../ui/Table';
@@ -20,6 +18,7 @@ interface TokenTableBaseProps {
 function TokenTableBase({ debouncedSearchTerm }: TokenTableBaseProps) {
   const { allFtTokensDeduped, isLoading, hasMore, loadMore } =
     useSuspenseTokens(debouncedSearchTerm);
+
   if (!allFtTokensDeduped.length) {
     return (
       <Grid placeItems="center" px="16px" py="32px" width={'100%'} minHeight={'container.md'}>
diff --git a/src/app/tokens/__tests__/__snapshots__/TokenRow.test.tsx.snap b/src/app/tokens/__tests__/__snapshots__/TokenRow.test.tsx.snap
index 1a642e298..10c4d61ec 100644
--- a/src/app/tokens/__tests__/__snapshots__/TokenRow.test.tsx.snap
+++ b/src/app/tokens/__tests__/__snapshots__/TokenRow.test.tsx.snap
@@ -56,7 +56,7 @@ exports[`TokenRow renders correctly 1`] = `
       <span
         className="chakra-text css-ae4fie"
       >
-        1.00M
+        1M
       </span>
     </td>
   </tr>
diff --git a/src/app/tokens/utils.ts b/src/app/tokens/utils.ts
new file mode 100644
index 000000000..a938e3176
--- /dev/null
+++ b/src/app/tokens/utils.ts
@@ -0,0 +1,12 @@
+export const getHasSBTCInName = (name: string, symbol: string) => {
+  if (!name || !symbol) {
+    return false;
+  }
+  return name.toLowerCase().includes('sbtc') || symbol.toLowerCase().includes('sbtc');
+};
+export const getIsSBTC = (contractPrincipal: string) => {
+  if (!contractPrincipal) {
+    return false;
+  }
+  return contractPrincipal === 'SM3VDXK3WZZSA84XXFKAFAF15NNZX32CTSG82JFQ4.sbtc-token';
+};
diff --git a/src/common/queries/useFeeTransfer.ts b/src/common/queries/useFeeTransfer.ts
index 2cbf22c82..43108db24 100644
--- a/src/common/queries/useFeeTransfer.ts
+++ b/src/common/queries/useFeeTransfer.ts
@@ -1,6 +1,7 @@
-import { useGlobalContext } from '@/common/context/useGlobalContext';
 import { useQuery } from '@tanstack/react-query';
 
+import { useGlobalContext } from '../context/useGlobalContext';
+
 export function useFeeTransfer() {
   const { url: activeNetworkUrl } = useGlobalContext().activeNetwork;
 
diff --git a/src/common/utils/__tests__/utils.spec.ts b/src/common/utils/__tests__/utils.spec.ts
index 42a8696d3..88a9a428a 100644
--- a/src/common/utils/__tests__/utils.spec.ts
+++ b/src/common/utils/__tests__/utils.spec.ts
@@ -1,4 +1,4 @@
-import { isJSONString, removeTrailingSlash } from '../utils';
+import { abbreviateNumber, isJSONString, removeTrailingSlash } from '../utils';
 
 describe('isJSONString', () => {
   test('returns true for a valid JSON string', () => {
@@ -42,3 +42,112 @@ describe('removeTrailingSlash', () => {
     expect(removeTrailingSlash(undefined)).toBe('');
   });
 });
+
+describe('abbreviateNumber', () => {
+  // Test regular numbers (no abbreviation needed)
+  test('handles regular numbers', () => {
+    expect(abbreviateNumber(0)).toBe('0');
+    expect(abbreviateNumber(1)).toBe('1');
+    expect(abbreviateNumber(999)).toBe('999');
+    expect(abbreviateNumber(1000)).toBe('1,000');
+    expect(abbreviateNumber(9999)).toBe('9,999');
+    expect(abbreviateNumber(99999)).toBe('99,999');
+    expect(abbreviateNumber(999999)).toBe('999,999');
+  });
+
+  // // Test millions
+  test('handles millions correctly', () => {
+    expect(abbreviateNumber(1000000)).toBe('1M');
+    expect(abbreviateNumber(1100000)).toBe('1.1M');
+    expect(abbreviateNumber(1110000)).toBe('1.11M');
+    expect(abbreviateNumber(1111000)).toBe('1.11M');
+    expect(abbreviateNumber(9900000)).toBe('9.9M');
+    expect(abbreviateNumber(99900000)).toBe('99.9M');
+    expect(abbreviateNumber(999900000)).toBe('999.9M');
+  });
+
+  // // Test billions
+  test('handles billions correctly', () => {
+    expect(abbreviateNumber(1000000000)).toBe('1B');
+    expect(abbreviateNumber(1100000000)).toBe('1.1B');
+    expect(abbreviateNumber(1110000000)).toBe('1.11B');
+    expect(abbreviateNumber(9900000000)).toBe('9.9B');
+    expect(abbreviateNumber(99900000000)).toBe('99.9B');
+    expect(abbreviateNumber(999900000000)).toBe('999.9B');
+  });
+
+  // // Test trillions
+  test('handles trillions correctly', () => {
+    expect(abbreviateNumber(1000000000000)).toBe('1T');
+    expect(abbreviateNumber(1100000000000)).toBe('1.1T');
+    expect(abbreviateNumber(1110000000000)).toBe('1.11T');
+    expect(abbreviateNumber(9900000000000)).toBe('9.9T');
+  });
+
+  // Test decimal numbers
+  test('handles decimal numbers correctly', () => {
+    expect(abbreviateNumber(1.23)).toBe('1.23');
+    expect(abbreviateNumber(1.2345)).toBe('1.2345');
+    expect(abbreviateNumber(1000.23)).toBe('1,000.23');
+    expect(abbreviateNumber(1000000.23)).toBe('1M');
+  });
+
+  // Test small numbers
+  test('handles small numbers correctly', () => {
+    expect(abbreviateNumber(0.1)).toBe('0.1');
+    expect(abbreviateNumber(0.01)).toBe('0.01');
+    expect(abbreviateNumber(0.001)).toBe('0.001');
+    expect(abbreviateNumber(0.0001)).toBe('0.0001');
+  });
+
+  // Test edge cases
+  test('handles edge cases correctly', () => {
+    expect(abbreviateNumber(999999999)).toBe('1,000M'); // TODO: fix. This should round up to 1B
+    expect(abbreviateNumber(999499999)).toBe('999.5M'); // Should stay in millions
+    expect(abbreviateNumber(1000000000000000)).toBe('1Q'); // Quadrillion
+    expect(abbreviateNumber(0)).toBe('0');
+  });
+
+  // test('handles negative numbers correctly', () => {
+  //   expect(abbreviateNumber(-1000000)).toBe('-1M'); // TODO: fix. This should be -1M
+  //   expect(abbreviateNumber(-1000000000)).toBe('-1B'); // TODO: fix. This should be -1B
+  // });
+
+  // Test with specific decimal places
+  // test('handles custom decimal places correctly', () => {
+  //   expect(abbreviateNumber(1234567, 3)).toBe('1.235M'); // TODO: fix. We should be able to pass in a decimal argument that does something when the number is >= 1M
+  //   expect(abbreviateNumber(1234567, 1)).toBe('1.23M');
+  //   expect(abbreviateNumber(1234567, 0)).toBe('1M');
+  //   expect(abbreviateNumber(1234.5678, 2)).toBe('1,234.57');
+  // });
+
+  // Test number formatting
+  test('formats numbers with correct separators', () => {
+    expect(abbreviateNumber(1234567890)).toBe('1.23B');
+    expect(abbreviateNumber(1234567)).toBe('1.23M');
+    expect(abbreviateNumber(12345)).toBe('12,345');
+  });
+
+  // Test trailing zeros
+  test('handles trailing zeros correctly', () => {
+    expect(abbreviateNumber(1000000.0)).toBe('1M');
+    expect(abbreviateNumber(1100000.0)).toBe('1.1M');
+    expect(abbreviateNumber(1.0)).toBe('1');
+    expect(abbreviateNumber(1.1)).toBe('1.1');
+  });
+
+  test('For small decimal numbers, it shows the full number when there is no decimal argument', () => {
+    expect(abbreviateNumber(1.345345)).toBe('1.345345');
+    expect(abbreviateNumber(0.000234534)).toBe('0.000234534');
+  });
+
+  test('For small decimal numbers, it shows the correct number of decimal places based on the decimal argument', () => {
+    expect(abbreviateNumber(1.345345, 2)).toBe('1.35');
+    expect(abbreviateNumber(1.345345, 3)).toBe('1.345');
+    expect(abbreviateNumber(1.345345, 4)).toBe('1.3453');
+
+    expect(abbreviateNumber(0.000234534, 2)).toBe('0.00023');
+    expect(abbreviateNumber(0.000234534, 3)).toBe('0.000235');
+    expect(abbreviateNumber(0.000234534, 4)).toBe('0.0002');
+  });
+});
diff --git a/src/common/utils/utils.ts b/src/common/utils/utils.ts
index e498f7712..f01d49625 100644
--- a/src/common/utils/utils.ts
+++ b/src/common/utils/utils.ts
@@ -231,11 +231,17 @@ export function initBigNumber(num: string | number | BigNumber) {
   return BigNumber.isBigNumber(num) ? num : new BigNumber(num);
 }
 
+export const getFtDecimalAdjustedBalance = (
+  value: number | string | BigNumber,
+  decimals: number
+): number => {
+  return initBigNumber(value).shiftedBy(-decimals).toNumber();
+};
+
 export const ftDecimals = (value: number | string | BigNumber, decimals: number) => {
-  return initBigNumber(value)
-    .shiftedBy(-decimals)
-    .toNumber()
-    .toLocaleString('en-US', { maximumFractionDigits: decimals });
+  return getFtDecimalAdjustedBalance(value, decimals).toLocaleString('en-US', {
+    maximumFractionDigits: decimals,
+  });
 };
 
 export function getLocaleDecimalSeparator() {
@@ -286,25 +292,46 @@ export function getNextPageParam(lastPage?: GenericResponseType<any>) {
   return sum;
 }
 
-export const numberToString = (value: number) => {
+const maxDecimals = 20; // just some arbitrarily large number to preserve precision
+const formatNumber = (num: number, divisor: number, suffix: string, decimals?: number) => {
+  // If decimals is undefined, don't limit decimal places
+  if (decimals == null) {
+    return `${(num / divisor)
+      .toLocaleString(undefined, { maximumFractionDigits: maxDecimals })
+      .replace(/\.0+$/, '')}${suffix}`;
+  }
+
+  if (num < 1 / Math.pow(10, decimals)) {
+    const magnitude = Math.ceil(Math.abs(Math.log10(num))); // find the magnitude of the number, ie the # of decimal places needed to reach the first significant digit
+    return num.toFixed(magnitude + decimals - 1).replace(/\.0+$/, ''); // add decimals - 1 to get the correct number of decimal places
+  }
+
+  // Remove trailing zeros and decimal point if all decimals are zero
+  return `${parseFloat((num / divisor).toFixed(decimals))
+    .toLocaleString(undefined, { maximumFractionDigits: maxDecimals })
+    .replace(/\.0+$/, '')}${suffix}`;
+};
+
+export const abbreviateNumber = (value: number, decimals?: number) => {
   const mil = 1e6;
   const bil = 1e9;
   const tril = 1e12;
   const quadril = 1e15;
 
   if (value >= quadril) {
-    return `${(value / quadril).toFixed(2)}Q`;
+    return formatNumber(value, quadril, 'Q', 2);
   }
   if (value >= tril) {
-    return `${(value / tril).toFixed(2)}T`;
+    return formatNumber(value, tril, 'T', 2);
   }
   if (value >= bil) {
-    return `${(value / bil).toFixed(2)}B`;
+    return formatNumber(value, bil, 'B', 2);
   }
   if (value >= mil) {
-    return `${(value / mil).toFixed(2)}M`;
+    return formatNumber(value, mil, 'M', 2);
   }
-  return value.toLocaleString();
+
+  return formatNumber(value, 1, '', decimals);
 };
 
 export function microStxToStx(microStx: string | number): number | string {
diff --git a/src/ui/theme/space.ts b/src/ui/theme/space.ts
index 82d5b91f3..50eb679a7 100644
--- a/src/ui/theme/space.ts
+++ b/src/ui/theme/space.ts
@@ -52,6 +52,7 @@ export const NEW_SPACE = {
   12: '3rem', // 48px
   16: '4rem', // 64px
   18: '4.5rem', // 72px
+  30: '7.5rem', // 120px
 };
 
 export const SPACE = {