fix: nft link to ft page

hirosystems · Jun 26, 2024 · bc52a7c · bc52a7c
1 parent dd8ae06
commit bc52a7c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 49 deletions.
diff --git a/src/app/_components/PageWrapper.tsx b/src/app/_components/PageWrapper.tsx
@@ -1,23 +1,18 @@
 'use client';
 
 import { useColorModeValue } from '@chakra-ui/react';
-import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
 import { ReactNode } from 'react';
 
 import { AddNetworkModal } from '../../common/components/modals/AddNetwork';
 import { NakamotoModal } from '../../common/components/modals/Nakamoto';
-import { useGlobalContext } from '../../common/context/useGlobalContext';
 import { IncidentContent } from '../../common/types/incidents';
 import { TokenPrice } from '../../common/types/tokenPrice';
-import { getRichTextRenderOptions } from '../../common/utils/getRichTextRenderOptions';
 import { Flex } from '../../ui/Flex';
-import { useColorMode } from '../../ui/hooks/useColorMode';
 import { Footer } from './Footer';
 import { NavBar } from './NavBar';
 import { NetworkModeToast } from './NetworkModeToast';
-import { IncidentsStatusBarWithErrorBoundary } from './StatusBar';
 import { CMSStatusBars } from './StatusBar/CMSStatusBars';
-import { StatusBarBase } from './StatusBar/StatusBarBase';
+import { IncidentsStatusBarWithErrorBoundary } from './StatusBar/IncidentsStatusBar';
 
 function WrapperWithBg({ children }: { children: ReactNode }) {
   return (
@@ -63,14 +58,7 @@ export function PageWrapper({
   children: ReactNode;
   statusBarContent: IncidentContent;
 }) {
-  const isTestnet = useGlobalContext().activeNetwork.mode === 'testnet';
-  const incidentsToShow = statusBarContent?.items?.filter(
-    alert => (alert.fields.showOnTestnet && isTestnet) || (alert.fields.showOnMainnet && !isTestnet)
-  );
-
   const statusBarBg = useColorModeValue('black', 'white');
-  const colorMode = useColorMode().colorMode;
-
   return (
     <>
       <Flex

diff --git a/src/app/_components/StatusBar/IncidentsStatusBar.tsx b/src/app/_components/StatusBar/IncidentsStatusBar.tsx
@@ -1,6 +1,7 @@
-import { useColorModeValue } from '@chakra-ui/react';
 import { css } from '@emotion/react';
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { useRef } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useUnresolvedIncidents } from '../../../common/queries/useUnresolvedIncidents';
@@ -11,7 +12,7 @@ import { useColorMode } from '../../../ui/hooks/useColorMode';
 import { StatusBarBase } from './StatusBarBase';
 import { getColor } from './utils';
 
-export function IncidentsStatusBar(props: FlexProps) {
+function IncidentsStatusBar(props: FlexProps) {
   const isTestnet = useGlobalContext().activeNetwork.mode === 'testnet';
   const { data: unresolvedIncidentsResponse, isFetching } = useUnresolvedIncidents();
   const incidents = unresolvedIncidentsResponse?.incidents;
@@ -57,3 +58,21 @@ export function IncidentsStatusBar(props: FlexProps) {
     </Flex>
   );
 }
+
+export function IncidentsStatusBarWithErrorBoundary(props: FlexProps) {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary
+          fallbackRender={() => null}
+          onError={error => {
+            console.log(error);
+          }}
+          onReset={reset}
+        >
+          <IncidentsStatusBar {...props} />
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+}
diff --git a/src/app/_components/StatusBar/index.tsx b/src/app/_components/StatusBar/index.tsx
diff --git a/src/app/address/[principal]/TokenBalanceCard/TokenAssetListItem.tsx b/src/app/address/[principal]/TokenBalanceCard/TokenAssetListItem.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { NonFungibleTokenHolding } from '@stacks/stacks-blockchain-api-types/generated';
 import { IntCV, hexToCV } from '@stacks/transactions';
 
-import { TokenLink } from '../../../../common/components/ExplorerLinks';
+import { AddressLink, TokenLink, TxLink } from '../../../../common/components/ExplorerLinks';
 import { TwoColsListItem } from '../../../../common/components/TwoColumnsListItem';
 import { FtTokenAmount, NftTokenAmount } from '../../../../common/components/balances/TokenAmount';
 import { FtTokenSymbol, NftTokenSymbol } from '../../../../common/components/balances/TokenSymbol';
@@ -52,7 +52,12 @@ export const TokenAssetListItem: React.FC<TokenAssetListItemProps> = ({
         )
       }
       leftContent={{
-        title: <TokenLink tokenId={`${address}.${contract}`}>{bnsName || asset}</TokenLink>,
+        title:
+          tokenType === 'non_fungible_tokens' ? (
+            <AddressLink principal={`${address}.${contract}`}>{bnsName || asset}</AddressLink>
+          ) : (
+            <TokenLink tokenId={`${address}.${contract}`}>{bnsName || asset}</TokenLink>
+          ),
         subtitle:
           tokenType === 'non_fungible_tokens' ? (
             <NftTokenSymbol asset={asset} />