fix: when clicking on the inscription image in the details view

src/app/hooks/useWalletReducer.ts

@@ -2,16 +2,18 @@ import { getDeviceAccountIndex } from '@common/utils/ledger';
 import useBtcWalletData from '@hooks/queries/useBtcWalletData';
 import useStxWalletData from '@hooks/queries/useStxWalletData';
 import useNetworkSelector from '@hooks/useNetwork';
-import { createWalletAccount, restoreWalletWithAccounts } from '@secretkeylabs/xverse-core/account';
-import { getBnsName } from '@secretkeylabs/xverse-core/api/stacks';
-import { decryptSeedPhraseCBC } from '@secretkeylabs/xverse-core/encryption';
 import {
   Account,
   AnalyticsEvents,
+  createWalletAccount,
+  decryptSeedPhraseCBC,
+  getBnsName,
+  newWallet,
+  restoreWalletWithAccounts,
   SettingsNetwork,
   StacksNetwork,
-} from '@secretkeylabs/xverse-core/types';
-import { newWallet, walletFromSeedPhrase } from '@secretkeylabs/xverse-core/wallet';
+  walletFromSeedPhrase,
+} from '@secretkeylabs/xverse-core';
 import {
   addAccountAction,
   ChangeNetworkAction,
@@ -170,7 +172,6 @@ const useWalletReducer = () => {
       ordinalsPublicKey: wallet.ordinalsPublicKey,
       stxAddress: wallet.stxAddress,
       stxPublicKey: wallet.stxPublicKey,
-      bnsName: wallet.bnsName,
     };
     const hasSeed = await seedVault.hasSeed();
     if (hasSeed && !masterPubKey) {
@@ -230,7 +231,6 @@ const useWalletReducer = () => {
       ordinalsPublicKey: wallet.ordinalsPublicKey,
       stxAddress: wallet.stxAddress,
       stxPublicKey: wallet.stxPublicKey,
-      bnsName: wallet.bnsName,
     };
     trackMixPanel(AnalyticsEvents.CreateNewWallet);
 
@@ -297,7 +297,6 @@ const useWalletReducer = () => {
       ordinalsPublicKey: wallet.ordinalsPublicKey,
       stxAddress: wallet.stxAddress,
       stxPublicKey: wallet.stxPublicKey,
-      bnsName: wallet.bnsName,
     };
     dispatch(setWalletAction(wallet));
     try {

src/app/screens/ordinalDetail/index.tsx

@@ -1,6 +1,4 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import ArrowLeft from '@assets/img/dashboard/arrow_left.svg';
-import SquaresFour from '@assets/img/nftDashboard/squares_four.svg';
 import OrdinalsIcon from '@assets/img/nftDashboard/white_ordinals_icon.svg';
 import AccountHeaderComponent from '@components/accountHeader';
 import AlertMessage from '@components/alertMessage';
@@ -11,6 +9,7 @@ import Separator from '@components/separator';
 import SquareButton from '@components/squareButton';
 import BottomTabBar from '@components/tabBar';
 import TopRow from '@components/topRow';
+import WebGalleryButton from '@components/webGalleryButton';
 import { useResetUserFlow } from '@hooks/useResetUserFlow';
 import { ArrowRight, ArrowUp, CubeTransparent, Share } from '@phosphor-icons/react';
 import OrdinalImage from '@screens/ordinals/ordinalImage';
@@ -95,31 +94,31 @@ const ExtensionOrdinalsContainer = styled.div((props) => ({
 }));
 
 const OrdinalTitleText = styled.h1((props) => ({
-  ...props.theme.headline_m,
+  ...props.theme.typography.headline_m,
   color: props.theme.colors.white_0,
   marginTop: props.theme.spacing(1),
   textAlign: 'center',
 }));
 
 const OrdinalGalleryTitleText = styled.h1((props) => ({
-  ...props.theme.headline_l,
-  color: props.theme.colors.white['0'],
+  ...props.theme.typography.headline_l,
+  color: props.theme.colors.white_0,
 }));
 
 const DescriptionText = styled.h1((props) => ({
-  ...props.theme.headline_l,
+  ...props.theme.typography.headline_l,
   color: props.theme.colors.white_0,
   fontSize: 24,
   marginBottom: props.theme.spacing(8),
 }));
 
 const NftOwnedByText = styled.h1((props) => ({
-  ...props.theme.body_medium_m,
-  color: props.theme.colors.white['400'],
+  ...props.theme.typography.body_medium_m,
+  color: props.theme.colors.white_400,
 }));
 
 const OwnerAddressText = styled.h1((props) => ({
-  ...props.theme.body_medium_m,
+  ...props.theme.typography.body_medium_m,
   marginLeft: props.theme.spacing(3),
 }));
 
@@ -171,16 +170,9 @@ const DescriptionContainer = styled.h1((props) => ({
   marginBottom: props.theme.spacing(30),
 }));
 
-const WebGalleryButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: 'transparent',
-  width: '100%',
-  marginTop: props.theme.spacing(6),
-}));
+const StyledWebGalleryButton = styled(WebGalleryButton)`
+  margintop: ${(props) => props.theme.space.s};
+`;
 
 const ViewInExplorerButton = styled.button<DetailSectionProps>((props) => ({
   display: 'flex',
@@ -198,13 +190,13 @@ const ViewInExplorerButton = styled.button<DetailSectionProps>((props) => ({
 }));
 
 const ButtonText = styled.h1((props) => ({
-  ...props.theme.body_medium_m,
-  color: props.theme.colors.white['400'],
+  ...props.theme.typography.body_medium_m,
+  color: props.theme.colors.white_400,
 }));
 
 const ButtonHiglightedText = styled.h1((props) => ({
-  ...props.theme.body_medium_m,
-  color: props.theme.colors.white['0'],
+  ...props.theme.typography.body_medium_m,
+  color: props.theme.colors.white_0,
   marginLeft: props.theme.spacing(2),
   marginRight: props.theme.spacing(2),
 }));
@@ -219,13 +211,6 @@ const StyledTooltip = styled(Tooltip)`
   }
 `;
 
-const WebGalleryButtonText = styled.div((props) => ({
-  ...props.theme.body_m,
-  fontWeight: 700,
-  color: props.theme.colors.white_200,
-  textAlign: 'center',
-}));
-
 const ButtonImage = styled.img((props) => ({
   marginRight: props.theme.spacing(3),
   alignSelf: 'center',
@@ -242,7 +227,7 @@ const Button = styled.button((props) => ({
 }));
 
 const AssetDeatilButtonText = styled.div((props) => ({
-  ...props.theme.body_xs,
+  ...props.theme.typography.body_s,
   fontWeight: 400,
   fontSize: 14,
   color: props.theme.colors.white_0,
@@ -267,18 +252,18 @@ const OrdinalsTag = styled.div({
 });
 
 const CollectibleText = styled.h1((props) => ({
-  ...props.theme.body_bold_m,
+  ...props.theme.typography.body_bold_m,
   color: props.theme.colors.white_400,
   textAlign: 'center',
 }));
 
 const GalleryCollectibleText = styled.h1((props) => ({
-  ...props.theme.body_bold_l,
-  color: props.theme.colors.white['400'],
+  ...props.theme.typography.body_bold_l,
+  color: props.theme.colors.white_400,
 }));
 
 const Text = styled.h1((props) => ({
-  ...props.theme.body_bold_m,
+  ...props.theme.typography.body_bold_m,
   textTransform: 'uppercase',
   color: props.theme.colors.white_0,
   fontSize: 10,
@@ -299,7 +284,7 @@ const CubeTransparentIcon = styled(CubeTransparent)((props) => ({
   marginRight: props.theme.spacing(8),
 }));
 const RareSatsBundleTextDescription = styled.div((props) => ({
-  ...props.theme.body_m,
+  ...props.theme.typography.body_m,
   color: props.theme.colors.white_200,
 }));
 const BundleLinkContainer = styled.button((props) => ({
@@ -311,12 +296,11 @@ const BundleLinkContainer = styled.button((props) => ({
   color: props.theme.colors.white_0,
   transition: 'background-color 0.2s ease, opacity 0.2s ease',
   ':hover': {
-    color: props.theme.colors.action.classicLight,
-    opacity: 0.6,
+    color: props.theme.colors.white_200,
   },
 }));
 const BundleLinkText = styled.div((props) => ({
-  ...props.theme.body_medium_m,
+  ...props.theme.typography.body_medium_m,
   marginRight: props.theme.spacing(1),
 }));
 
@@ -341,6 +325,7 @@ const DetailSection = styled.div<DetailSectionProps>((props) => ({
   display: 'flex',
   flexDirection: !props.isGallery ? 'row' : 'column',
   justifyContent: 'space-between',
+  columnGap: props.theme.space.m,
   width: '100%',
 }));
 
@@ -638,12 +623,7 @@ function OrdinalDetailScreen() {
         {isBrc20Ordinal ? t('BRC20_INSCRIPTION') : ordinal?.collection_name || t('INSCRIPTION')}
       </CollectibleText>
       <OrdinalTitleText>{ordinal?.number}</OrdinalTitleText>
-      <WebGalleryButton onClick={openInGalleryView}>
-        <>
-          <ButtonImage src={SquaresFour} />
-          <WebGalleryButtonText>{t('WEB_GALLERY')}</WebGalleryButtonText>
-        </>
-      </WebGalleryButton>
+      <StyledWebGalleryButton onClick={openInGalleryView} />
       <ExtensionOrdinalsContainer>
         <OrdinalImage ordinal={ordinal!} />
       </ExtensionOrdinalsContainer>

src/app/screens/ordinals/ordinalImage.tsx

@@ -63,7 +63,7 @@ const OrdinalsTag = styled.div((props) => ({
 }));
 
 const Text = styled.h1((props) => ({
-  ...props.theme.body_bold_m,
+  ...props.theme.typography.body_bold_m,
   textTransform: 'uppercase',
   color: props.theme.colors.white_0,
   fontSize: 10,
@@ -98,8 +98,8 @@ const OrdinalContentText = styled.p<TextProps>((props) => {
     fontSize = '15px';
   }
   return {
-    ...props.theme.body_medium_m,
-    color: props.theme.colors.white[0],
+    ...props.theme.typography.body_medium_m,
+    color: props.theme.colors.white_0,
     fontSize,
     overflow: 'hidden',
     textAlign: 'center',
@@ -149,35 +149,35 @@ function OrdinalImage({
   const [brc721eImage, setBrc721eImage] = useState<string | undefined>(undefined);
   const { network } = useWalletSelector();
 
-  const fetchBrc721eMetadata = async () => {
-    if (!textContent) {
-      return;
-    }
+  useEffect(() => {
+    const fetchBrc721eMetadata = async () => {
+      if (!textContent) {
+        return;
+      }
 
-    try {
-      const parsedContent = JSON.parse(textContent);
-      const erc721Metadata = await getErc721Metadata(
-        network.type,
-        parsedContent.contract,
-        parsedContent.token_id,
-      );
+      try {
+        const parsedContent = JSON.parse(textContent);
+        const erc721Metadata = await getErc721Metadata(
+          network.type,
+          parsedContent.contract,
+          parsedContent.token_id,
+        );
 
-      const url = getFetchableUrl(erc721Metadata, 'ipfs');
+        const url = getFetchableUrl(erc721Metadata, 'ipfs');
 
-      if (url) {
-        const ipfsMetadata = await (await fetch(url)).json();
-        setBrc721eImage(getFetchableUrl(ipfsMetadata.image, 'ipfs'));
+        if (url) {
+          const ipfsMetadata = await (await fetch(url)).json();
+          setBrc721eImage(getFetchableUrl(ipfsMetadata.image, 'ipfs'));
+        }
+      } catch (e) {
+        console.error(e); // eslint-disable-line no-console
       }
-    } catch (e) {
-      console.error(e);
-    }
-  };
+    };
 
-  useEffect(() => {
     if (textContent?.includes('brc-721e')) {
       fetchBrc721eMetadata();
     }
-  }, [textContent]);
+  }, [textContent, network.type]);
 
   let loaderSize = 151;
   if (inNftDetail && isGalleryOpen) {
@@ -190,12 +190,14 @@ function OrdinalImage({
     <ImageContainer>
       <StyledImage
         width="100%"
+        height="100%"
         placeholder={
           <LoaderContainer>
             <StyledBarLoader width={loaderSize} height={loaderSize} />
           </LoaderContainer>
         }
         src={src}
+        preview={false}
       />
       {isNftDashboard && (
         <OrdinalsTag>