Feat/sbtc token id page

next.config.js

@@ -29,6 +29,11 @@ const nextConfig = {
         destination: '/',
         permanent: true,
       },
+      {
+        source: '/sbtc',
+        destination: '/token/SM3VDXK3WZZSA84XXFKAFAF15NNZX32CTSG82JFQ4.sbtc-token?chain=mainnet',
+        permanent: true,
+      },
     ];
   },
   experimental: {

src/api/data-fetchers.ts

@@ -174,6 +174,7 @@ export async function fetchTokenDataFromLunarCrush(
     if (!response || response?.error) {
       throw new Error('Error fetching token data from Lunar Crush');
     }
+    return response;
   } catch (error) {
     logError(
       new Error('Error fetching token data from Lunar Crush'),

src/app/address/[principal]/redesign/TokenImage.tsx

@@ -38,12 +38,14 @@ export const TokenImage = ({
   height,
   width,
   addGlow,
+  borderRadius,
 }: {
   url: string;
   alt: string;
   height: number;
   width: number;
   addGlow?: boolean;
+  borderRadius?: string;
 }) => {
   const [imageUrl, setImageUrl] = useState<string>(encodeURI(decodeURI(url)));
   const [badImage, setBadImage] = useState<boolean>(false);
@@ -69,7 +71,7 @@ export const TokenImage = ({
         alt={alt}
         style={{
           filter: 'blur(9px)',
-          borderRadius: '16px',
+          borderRadius: borderRadius || '16px',
           objectFit: 'cover', // ensures the image maintains its aspect ratio while covering the entire container, cropping if necessary to maintain the 1:1 ratio
         }}
       />
@@ -96,7 +98,7 @@ export const TokenImage = ({
           }}
           alt={alt}
           style={{
-            borderRadius: '16px',
+            borderRadius: borderRadius || '16px',
           }}
         />
       </Box>

src/app/token/[tokenId]/PageClient.tsx

@@ -1,159 +1,29 @@
 'use client';
 
-import { TokenInfoProps } from '@/app/token/[tokenId]/types';
-import { getHasSBTCInName, getIsSBTC } from '@/app/tokens/utils';
-import { useIsRedesignUrl } from '@/common/utils/url-utils';
-import { Link } from '@/ui/Link';
-import { Box, Flex, Icon, Image, Stack } from '@chakra-ui/react';
-import { SealCheck, Warning } from '@phosphor-icons/react';
-import { ReactNode, useMemo } from 'react';
-
-import { Sip10Disclaimer } from '../../../common/components/Sip10Disclaimer';
-import { Tag } from '../../../components/ui/tag';
-import { TagLabel } from '../../../ui/TagLabel';
-import { Text } from '../../../ui/Text';
-import { PageTitle } from '../../_components/PageTitle';
-import TokenIdPageRedesign from './PageClientRedesign';
-import { TokenTabs } from './Tabs';
-import { TokenInfo } from './TokenInfo';
-import { RISKY_TOKENS, VERIFIED_TOKENS, legitsBTCDerivatives } from './consts';
-
-const WarningMessage = ({ text }: { text: string | ReactNode }) => {
-  return (
-    <Box borderRadius="xl" bg="red.200" p={4}>
-      <Flex gap={2} alignItems="center">
-        <Icon h={4} w={4} color="red.600">
-          <Warning />
-        </Icon>
-        <Text fontWeight="bold" color="black">
-          Warning:
-        </Text>
-      </Flex>
-      <Box pl={4 + 2}>
-        <Text fontSize="sm" color="black">
-          {text}
-        </Text>
-      </Box>
-    </Box>
-  );
-};
-
-export default function TokenIdPage({
-  tokenId,
-  tokenInfo,
-}: {
-  tokenId: string;
-  tokenInfo: TokenInfoProps;
-}) {
-  const isRedesignUrl = useIsRedesignUrl();
-
-  if (!tokenInfo?.basic) throw new Error('Could not find token info');
-
-  const { name, symbol, imageUri } = tokenInfo.basic || {};
-  const categories = tokenInfo?.extended?.categories || [];
-  const hasSBTCInName = getHasSBTCInName(name ?? '', symbol ?? '');
-  const isSBTC = getIsSBTC(tokenId);
-  const isRisky = RISKY_TOKENS.includes(tokenId);
-
-  const warningMessage = useMemo(() => {
-    if (isRisky) {
-      return (
-        <WarningMessage
-          text=" This token may be a scam. Engaging with unverified tokens could result in loss of
-              funds."
-        />
-      );
-    }
-
-    if (hasSBTCInName && !isSBTC && !legitsBTCDerivatives.includes(tokenId)) {
-      return (
-        <WarningMessage
-          text={
-            <Text>
-              This is not{' '}
-              <Link
-                href="https://explorer.hiro.so/token/SM3VDXK3WZZSA84XXFKAFAF15NNZX32CTSG82JFQ4.sbtc-token?chain=mainnet"
-                color="black"
-              >
-                the official sBTC token
-              </Link>{' '}
-              and may be a scam. Engaging with unverified tokens could result in loss of funds.
-            </Text>
-          }
-        />
-      );
-    }
-
-    return null;
-  }, [hasSBTCInName, isRisky, isSBTC, tokenId]);
-
-  if (isRedesignUrl) {
-    return <TokenIdPageRedesign />;
+import { useTokenIdPageData } from '@/app/token/[tokenId]/redesign/context/TokenIdPageContext';
+import { isSBTC } from '@/app/tokens/utils';
+import { Sip10Alert } from '@/app/txid/[txId]/redesign/Alert';
+import { Stack } from '@chakra-ui/react';
+
+import { SbtcTokenIdPage } from './redesign/SbtcTokenIdPage';
+import { TokenAlert } from './redesign/TokenAlert';
+import { TokenIdHeader } from './redesign/TokenIdHeader';
+import { TokenIdTabs } from './redesign/TokenIdTabs';
+
+export default function TokenIdPageRedesign() {
+  const { tokenId } = useTokenIdPageData();
+  const isSbtc = isSBTC(tokenId);
+
+  if (isSbtc) {
+    return <SbtcTokenIdPage />;
   }
 
   return (
-    <>
-      <Stack gap={2}>
-        {!!categories.length && (
-          <Flex gap={2}>
-            {categories.map(category => (
-              <Tag key={category}>
-                <TagLabel>{category}</TagLabel>
-              </Tag>
-            ))}
-          </Flex>
-        )}
-        <Flex alignItems={'center'} gap={2} flexWrap="wrap">
-          {imageUri && <Image src={imageUri} alt={name ?? ''} h={10} w={10} />}
-          <PageTitle>
-            {name} ({symbol})
-          </PageTitle>
-          {(isSBTC || VERIFIED_TOKENS.includes(tokenId)) && (
-            <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 h={4} w={4} color="green.600">
-                  <SealCheck />
-                </Icon>
-                <Text fontSize={'md'}>Verified</Text>
-              </Flex>
-            </Tag>
-          )}
-          {!!warningMessage && (
-            <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 h={4} w={4} color="red.600">
-                  <Warning />
-                </Icon>
-                <Text fontSize={'md'}>Unverified</Text>
-              </Flex>
-            </Tag>
-          )}
-        </Flex>
-      </Stack>
-      {warningMessage}
-      <TokenInfo tokenInfo={tokenInfo} tokenId={tokenId} />
-      <TokenTabs
-        tokenId={tokenId}
-        developerData={
-          !!tokenInfo?.extended?.links?.repos?.length
-            ? tokenInfo.extended?.developerData
-            : undefined
-        }
-        tokenInfo={tokenInfo}
-      />
-      <Sip10Disclaimer />
-    </>
+    <Stack gap={8}>
+      <TokenIdHeader />
+      <TokenAlert />
+      <TokenIdTabs />
+      <Sip10Alert />
+    </Stack>
   );
 }