From 1094e1c75e8472bcad386b52d7b2a38a2df5cd16 Mon Sep 17 00:00:00 2001
From: Denys Hriaznov <hriaznov.dev@gmail.com>
Date: Fri, 2 Jun 2023 16:40:12 +0200
Subject: [PATCH 1/4] Detect invalid brc20 tokens

---
 src/app/screens/ordinalDetail/index.tsx   | 135 +++++++++++-----------
 src/app/screens/ordinals/brc20Tile.tsx    |  31 +++--
 src/app/screens/ordinals/ordinalImage.tsx |  33 ++++--
 3 files changed, 102 insertions(+), 97 deletions(-)

diff --git a/src/app/screens/ordinalDetail/index.tsx b/src/app/screens/ordinalDetail/index.tsx
index 686339040..487f0c85d 100644
--- a/src/app/screens/ordinalDetail/index.tsx
+++ b/src/app/screens/ordinalDetail/index.tsx
@@ -288,10 +288,8 @@ function OrdinalDetailScreen() {
   }, [selectedOrdinal?.content_type]);
 
   useEffect(() => {
-    if (textContent) {
-      if (textContent.includes('brc-20')) {
-        setIsBrc20Ordinal(true);
-      }
+    if (textContent?.includes('brc-20')) {
+      setIsBrc20Ordinal(true);
     }
   }, [textContent]);
 
@@ -305,6 +303,7 @@ function OrdinalDetailScreen() {
       url: chrome.runtime.getURL('options.html#/nft-dashboard/ordinal-detail'),
     });
   };
+
   const showAlert = () => {
     setshowSendOridnalsAlert(true);
   };
@@ -331,72 +330,74 @@ function OrdinalDetailScreen() {
     const regex = /”/g;
     const validBrcContentValue = textContent.replace(regex, '"');
     const content = JSON.parse(validBrcContentValue);
-    if (content.op === 'mint') {
-      return (
-        <ColumnContainer>
-          <OrdinalAttributeComponent title={t('AMOUNT_TO_MINT')} value={content.amt} />
-          {!isGallery && (
-          <OrdinalAttributeComponent
-            title={t('OWNED_BY')}
-            value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
-              ordinalsAddress.length - 4,
-              ordinalsAddress.length,
-            )}`}
-            showOridnalTag
-            isAddress
-          />
-          )}
-        </ColumnContainer>
-      );
-    }
-    if (content.op === 'transfer') {
-      return (
-        <ColumnContainer>
-          <DetailSection isGallery={isGalleryOpen}>
-            <OrdinalAttributeComponent title={t('AMOUNT_TO_TRANSFER')} value={content.amt} />
+
+    switch (content.op) {
+      case 'mint':
+        return (
+          <ColumnContainer>
+            <OrdinalAttributeComponent title={t('AMOUNT_TO_MINT')} value={content.amt} />
+            {!isGallery && (
             <OrdinalAttributeComponent
-              title={t('BRC20_TRANSFER_STATUS')}
-              value={isTransferValid}
-              valueColor={isBrcTransferValid(selectedOrdinal!) ? theme.colors.feedback.success : theme.colors.feedback.error}
+              title={t('OWNED_BY')}
+              value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
+                ordinalsAddress.length - 4,
+                ordinalsAddress.length,
+              )}`}
+              showOridnalTag
               isAddress
             />
-          </DetailSection>
-          {!isGallery && (
-          <OrdinalAttributeComponent
-            title={t('OWNED_BY')}
-            value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
-              ordinalsAddress.length - 4,
-              ordinalsAddress.length,
-            )}`}
-            showOridnalTag
-            isAddress
-          />
-          )}
-        </ColumnContainer>
-      );
-    }
-    if (content.op === 'deploy') {
-      return (
-        <ColumnContainer>
-          <Row>
-            <OrdinalAttributeComponent title={t('TOTAL_SUPPLY')} value={content.max} />
-            <MintLimitContainer>
-              <OrdinalAttributeComponent title={t('MINT_LIMIT')} value={content.lim} />
-            </MintLimitContainer>
-          </Row>
-          {!isGallery && (
-          <OrdinalAttributeComponent
-            title={t('OWNED_BY')}
-            value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
-              ordinalsAddress.length - 4,
-              ordinalsAddress.length,
-            )}`}
-            showOridnalTag
-            isAddress
-          />
-          )}
-        </ColumnContainer>
-      );
+            )}
+          </ColumnContainer>
+        );
+      case 'transfer':
+        return (
+          <ColumnContainer>
+            <DetailSection isGallery={isGalleryOpen}>
+              <OrdinalAttributeComponent title={t('AMOUNT_TO_TRANSFER')} value={content.amt} />
+              <OrdinalAttributeComponent
+                title={t('BRC20_TRANSFER_STATUS')}
+                value={isTransferValid}
+                valueColor={isBrcTransferValid(selectedOrdinal!) ? theme.colors.feedback.success : theme.colors.feedback.error}
+                isAddress
+              />
+            </DetailSection>
+            {!isGallery && (
+            <OrdinalAttributeComponent
+              title={t('OWNED_BY')}
+              value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
+                ordinalsAddress.length - 4,
+                ordinalsAddress.length,
+              )}`}
+              showOridnalTag
+              isAddress
+            />
+            )}
+          </ColumnContainer>
+        );
+      case 'deploy':
+        return (
+          <ColumnContainer>
+            <Row>
+              <OrdinalAttributeComponent title={t('TOTAL_SUPPLY')} value={content.max} />
+              <MintLimitContainer>
+                <OrdinalAttributeComponent title={t('MINT_LIMIT')} value={content.lim} />
+              </MintLimitContainer>
+            </Row>
+            {!isGallery && (
+            <OrdinalAttributeComponent
+              title={t('OWNED_BY')}
+              value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
+                ordinalsAddress.length - 4,
+                ordinalsAddress.length,
+              )}`}
+              showOridnalTag
+              isAddress
+            />
+            )}
+          </ColumnContainer>
+        );
+      default:
+        return null;
     }
   };
 
diff --git a/src/app/screens/ordinals/brc20Tile.tsx b/src/app/screens/ordinals/brc20Tile.tsx
index 97d3bcfc4..6a2923c0e 100644
--- a/src/app/screens/ordinals/brc20Tile.tsx
+++ b/src/app/screens/ordinals/brc20Tile.tsx
@@ -117,7 +117,7 @@ const Text = styled.h1((props) => ({
 }));
 
 interface Brc20TileProps {
-  brcContent: string;
+  brcContent: { tick: string, amt: string, op: string };
   isNftDashboard?: boolean;
   inNftDetail?: boolean;
   isSmallImage?: boolean;
@@ -126,7 +126,7 @@ interface Brc20TileProps {
 
 export default function Brc20Tile(props: Brc20TileProps) {
   const {
-    brcContent, isSmallImage, isNftDashboard, inNftDetail, isGalleryOpen,
+    brcContent: content, isSmallImage, isNftDashboard, inNftDetail, isGalleryOpen,
   } = props;
   const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
   function renderFTIcon(ticker: string) {
@@ -138,11 +138,9 @@ export default function Brc20Tile(props: Brc20TileProps) {
       </TickerIconContainer>
     );
   }
-  try {
-    const regex = /”/g;
-    const validBrcContentValue = brcContent.replace(regex, '"');
-    const content = JSON.parse(validBrcContentValue);
-    if (content?.op === 'mint') {
+
+  switch (content?.op) {
+    case 'mint':
       return (
         <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
           <BRC20Container>
@@ -163,8 +161,7 @@ export default function Brc20Tile(props: Brc20TileProps) {
           </BRC20Container>
         </ImageContainer>
       );
-    }
-    if (content?.op === 'transfer') {
+    case 'transfer':
       return (
         <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
           <BRC20Container>
@@ -185,8 +182,7 @@ export default function Brc20Tile(props: Brc20TileProps) {
           </BRC20Container>
         </ImageContainer>
       );
-    }
-    if (content?.op === 'deploy') {
+    case 'deploy':
       return (
         <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
           <BRC20Container>
@@ -201,12 +197,11 @@ export default function Brc20Tile(props: Brc20TileProps) {
           </BRC20Container>
         </ImageContainer>
       );
-    }
-  } catch (error) {
-    return (
-      <PlaceholderImageContainer isSmallImage={isSmallImage} isGalleryOpen={isGalleryOpen}>
-        <img src={PlaceholderImage} alt="ordinal" />
-      </PlaceholderImageContainer>
-    );
+    default:
+      return (
+        <PlaceholderImageContainer isSmallImage={isSmallImage} isGalleryOpen={isGalleryOpen}>
+          <img src={PlaceholderImage} alt="ordinal" />
+        </PlaceholderImageContainer>
+      );
   }
 }
diff --git a/src/app/screens/ordinals/ordinalImage.tsx b/src/app/screens/ordinals/ordinalImage.tsx
index 9b878cb3d..8c561d386 100644
--- a/src/app/screens/ordinals/ordinalImage.tsx
+++ b/src/app/screens/ordinals/ordinalImage.tsx
@@ -148,18 +148,7 @@ function OrdinalImage({
       );
     }
 
-    if (textContent.includes('brc-20')) {
-      return (
-        <Brc20Tile
-          brcContent={textContent}
-          isGalleryOpen={isGalleryOpen}
-          isNftDashboard={isNftDashboard}
-          inNftDetail={inNftDetail}
-          isSmallImage={isSmallImage}
-        />
-      );
-    }
-    return (
+    const textInscription = (
       <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
         <OrdinalContentText inNftSend={inNftSend}>{textContent}</OrdinalContentText>
         {isNftDashboard && (
@@ -170,6 +159,26 @@ function OrdinalImage({
         )}
       </ImageContainer>
     );
+
+    if (textContent.includes('brc-20')) {
+      try {
+        const brcContent = JSON.parse(textContent);
+
+        return (
+          <Brc20Tile
+            brcContent={brcContent}
+            isGalleryOpen={isGalleryOpen}
+            isNftDashboard={isNftDashboard}
+            inNftDetail={inNftDetail}
+            isSmallImage={isSmallImage}
+          />
+        );
+      } catch (e) {
+        return textInscription;
+      }
+    }
+
+    return textInscription;
   }
 
   return (

From 8b658e0cc4377e0bf7977e2ffdafb7e4042096b0 Mon Sep 17 00:00:00 2001
From: Denys Hriaznov <hriaznov.dev@gmail.com>
Date: Fri, 2 Jun 2023 16:45:32 +0200
Subject: [PATCH 2/4] Change brc20 parsing logic

---
 src/app/screens/ordinals/brc20Tile.tsx    | 6 ++++--
 src/app/screens/ordinals/ordinalImage.tsx | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/screens/ordinals/brc20Tile.tsx b/src/app/screens/ordinals/brc20Tile.tsx
index 6a2923c0e..0a98962aa 100644
--- a/src/app/screens/ordinals/brc20Tile.tsx
+++ b/src/app/screens/ordinals/brc20Tile.tsx
@@ -117,7 +117,7 @@ const Text = styled.h1((props) => ({
 }));
 
 interface Brc20TileProps {
-  brcContent: { tick: string, amt: string, op: string };
+  brcContent: string;
   isNftDashboard?: boolean;
   inNftDetail?: boolean;
   isSmallImage?: boolean;
@@ -126,7 +126,7 @@ interface Brc20TileProps {
 
 export default function Brc20Tile(props: Brc20TileProps) {
   const {
-    brcContent: content, isSmallImage, isNftDashboard, inNftDetail, isGalleryOpen,
+    brcContent, isSmallImage, isNftDashboard, inNftDetail, isGalleryOpen,
   } = props;
   const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
   function renderFTIcon(ticker: string) {
@@ -139,6 +139,8 @@ export default function Brc20Tile(props: Brc20TileProps) {
     );
   }
 
+  const content = JSON.parse(brcContent);
+
   switch (content?.op) {
     case 'mint':
       return (
diff --git a/src/app/screens/ordinals/ordinalImage.tsx b/src/app/screens/ordinals/ordinalImage.tsx
index 8c561d386..658ae1fc4 100644
--- a/src/app/screens/ordinals/ordinalImage.tsx
+++ b/src/app/screens/ordinals/ordinalImage.tsx
@@ -162,11 +162,11 @@ function OrdinalImage({
 
     if (textContent.includes('brc-20')) {
       try {
-        const brcContent = JSON.parse(textContent);
+        JSON.parse(textContent);
 
         return (
           <Brc20Tile
-            brcContent={brcContent}
+            brcContent={textContent}
             isGalleryOpen={isGalleryOpen}
             isNftDashboard={isNftDashboard}
             inNftDetail={inNftDetail}

From 983819586abcafcc10beeb89bcd6e2be372112b8 Mon Sep 17 00:00:00 2001
From: Denys Hriaznov <hriaznov.dev@gmail.com>
Date: Fri, 2 Jun 2023 16:59:18 +0200
Subject: [PATCH 3/4] Change brc20 parsing logic

---
 src/app/screens/ordinals/brc20Tile.tsx    | 154 ++++++++++++----------
 src/app/screens/ordinals/ordinalImage.tsx |  34 ++---
 2 files changed, 101 insertions(+), 87 deletions(-)

diff --git a/src/app/screens/ordinals/brc20Tile.tsx b/src/app/screens/ordinals/brc20Tile.tsx
index 0a98962aa..9876a0a16 100644
--- a/src/app/screens/ordinals/brc20Tile.tsx
+++ b/src/app/screens/ordinals/brc20Tile.tsx
@@ -53,6 +53,14 @@ const PlaceholderImageContainer = styled.div<ContainerProps>(({
   maxHeight: isGalleryOpen ? (inNftDetail ? 450 : 300) : isSmallImage ? 50 : 150,
 }));
 
+const OrdinalContentText = styled.h1<TextProps>((props) => ({
+  ...props.theme.body_medium_m,
+  color: props.theme.colors.white[0],
+  fontSize: props.inNftSend ? 15 : 'calc(0.8vw + 2vh)',
+  overflow: 'hidden',
+  textAlign: 'center',
+}));
+
 interface TextProps {
   inNftSend?: boolean;
 }
@@ -139,71 +147,85 @@ export default function Brc20Tile(props: Brc20TileProps) {
     );
   }
 
-  const content = JSON.parse(brcContent);
-
-  switch (content?.op) {
-    case 'mint':
-      return (
-        <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
-          <BRC20Container>
-            <BRC20Text>{t('MINT')}</BRC20Text>
-            {renderFTIcon(content?.tick)}
-            <NumericFormat
-              value={content?.amt}
-              displayType="text"
-              thousandSeparator
-              renderText={(text) => <BRC20Text>{text}</BRC20Text>}
-            />
-            {isNftDashboard && (
-              <OrdinalsTag>
-                <ButtonIcon src={OrdinalsIcon} />
-                <Text>{t('ORDINAL')}</Text>
-              </OrdinalsTag>
-            )}
-          </BRC20Container>
-        </ImageContainer>
-      );
-    case 'transfer':
-      return (
-        <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
-          <BRC20Container>
-            <BRC20Text>{t('TRANSFER')}</BRC20Text>
-            {renderFTIcon(content?.tick)}
-            <NumericFormat
-              value={content?.amt}
-              displayType="text"
-              thousandSeparator
-              renderText={(text) => <BRC20Text>{text}</BRC20Text>}
-            />
-            {isNftDashboard && (
-              <OrdinalsTag>
-                <ButtonIcon src={OrdinalsIcon} />
-                <Text>{t('ORDINAL')}</Text>
-              </OrdinalsTag>
-            )}
-          </BRC20Container>
-        </ImageContainer>
-      );
-    case 'deploy':
-      return (
-        <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
-          <BRC20Container>
-            <BRC20Text>{t('DEPLOY')}</BRC20Text>
-            {renderFTIcon(content?.tick)}
-            {isNftDashboard && (
-              <OrdinalsTag>
-                <ButtonIcon src={OrdinalsIcon} />
-                <Text>{t('ORDINAL')}</Text>
-              </OrdinalsTag>
-            )}
-          </BRC20Container>
-        </ImageContainer>
-      );
-    default:
-      return (
-        <PlaceholderImageContainer isSmallImage={isSmallImage} isGalleryOpen={isGalleryOpen}>
-          <img src={PlaceholderImage} alt="ordinal" />
-        </PlaceholderImageContainer>
-      );
+  try {
+    const content = JSON.parse(brcContent);
+
+    switch (content?.op) {
+      case 'mint':
+        return (
+          <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
+            <BRC20Container>
+              <BRC20Text>{t('MINT')}</BRC20Text>
+              {renderFTIcon(content?.tick)}
+              <NumericFormat
+                value={content?.amt}
+                displayType="text"
+                thousandSeparator
+                renderText={(text) => <BRC20Text>{text}</BRC20Text>}
+              />
+              {isNftDashboard && (
+                <OrdinalsTag>
+                  <ButtonIcon src={OrdinalsIcon} />
+                  <Text>{t('ORDINAL')}</Text>
+                </OrdinalsTag>
+              )}
+            </BRC20Container>
+          </ImageContainer>
+        );
+      case 'transfer':
+        return (
+          <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
+            <BRC20Container>
+              <BRC20Text>{t('TRANSFER')}</BRC20Text>
+              {renderFTIcon(content?.tick)}
+              <NumericFormat
+                value={content?.amt}
+                displayType="text"
+                thousandSeparator
+                renderText={(text) => <BRC20Text>{text}</BRC20Text>}
+              />
+              {isNftDashboard && (
+                <OrdinalsTag>
+                  <ButtonIcon src={OrdinalsIcon} />
+                  <Text>{t('ORDINAL')}</Text>
+                </OrdinalsTag>
+              )}
+            </BRC20Container>
+          </ImageContainer>
+        );
+      case 'deploy':
+        return (
+          <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
+            <BRC20Container>
+              <BRC20Text>{t('DEPLOY')}</BRC20Text>
+              {renderFTIcon(content?.tick)}
+              {isNftDashboard && (
+                <OrdinalsTag>
+                  <ButtonIcon src={OrdinalsIcon} />
+                  <Text>{t('ORDINAL')}</Text>
+                </OrdinalsTag>
+              )}
+            </BRC20Container>
+          </ImageContainer>
+        );
+      default:
+        return (
+          <PlaceholderImageContainer isSmallImage={isSmallImage} isGalleryOpen={isGalleryOpen}>
+            <img src={PlaceholderImage} alt="ordinal" />
+          </PlaceholderImageContainer>
+        );
+    }
+  } catch (e) {
+    return (
+      <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
+        <OrdinalContentText inNftSend={false}>{brcContent}</OrdinalContentText>
+        {isNftDashboard && (
+        <OrdinalsTag>
+          <ButtonIcon src={OrdinalsIcon} />
+          <Text>{t('ORDINAL')}</Text>
+        </OrdinalsTag>
+        )}
+      </ImageContainer>
+    );
   }
 }
diff --git a/src/app/screens/ordinals/ordinalImage.tsx b/src/app/screens/ordinals/ordinalImage.tsx
index 658ae1fc4..8f6ce312d 100644
--- a/src/app/screens/ordinals/ordinalImage.tsx
+++ b/src/app/screens/ordinals/ordinalImage.tsx
@@ -148,7 +148,19 @@ function OrdinalImage({
       );
     }
 
-    const textInscription = (
+    if (textContent.includes('brc-20')) {
+      return (
+        <Brc20Tile
+          brcContent={textContent}
+          isGalleryOpen={isGalleryOpen}
+          isNftDashboard={isNftDashboard}
+          inNftDetail={inNftDetail}
+          isSmallImage={isSmallImage}
+        />
+      );
+    }
+
+    return (
       <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
         <OrdinalContentText inNftSend={inNftSend}>{textContent}</OrdinalContentText>
         {isNftDashboard && (
@@ -159,26 +171,6 @@ function OrdinalImage({
         )}
       </ImageContainer>
     );
-
-    if (textContent.includes('brc-20')) {
-      try {
-        JSON.parse(textContent);
-
-        return (
-          <Brc20Tile
-            brcContent={textContent}
-            isGalleryOpen={isGalleryOpen}
-            isNftDashboard={isNftDashboard}
-            inNftDetail={inNftDetail}
-            isSmallImage={isSmallImage}
-          />
-        );
-      } catch (e) {
-        return textInscription;
-      }
-    }
-
-    return textInscription;
   }
 
   return (

From c02b6392f5de91e81e8c086d78f2e0ba72992865 Mon Sep 17 00:00:00 2001
From: Denys Hriaznov <hriaznov.dev@gmail.com>
Date: Fri, 2 Jun 2023 21:21:11 +0200
Subject: [PATCH 4/4] Change brc20 parsing logic

---
 src/app/screens/ordinalDetail/index.tsx | 209 ++++++++++++------------
 src/app/screens/ordinals/brc20Tile.tsx  |   4 +-
 2 files changed, 110 insertions(+), 103 deletions(-)

diff --git a/src/app/screens/ordinalDetail/index.tsx b/src/app/screens/ordinalDetail/index.tsx
index 487f0c85d..72c90a75c 100644
--- a/src/app/screens/ordinalDetail/index.tsx
+++ b/src/app/screens/ordinalDetail/index.tsx
@@ -129,18 +129,18 @@ const RowContainer = styled.div((props) => ({
   flexDirection: 'row',
 }));
 
-const ColumnContainer = styled.div((props) => ({
+const ColumnContainer = styled.div({
   display: 'flex',
   alignItems: 'flex-start',
   flexDirection: 'column',
   width: '100%',
-}));
+});
 
-const Row = styled.div((props) => ({
+const Row = styled.div({
   display: 'flex',
   justifyContent: 'space-between',
   flexDirection: 'row',
-}));
+});
 
 const MintLimitContainer = styled.div((props) => ({
   marginLeft: props.theme.spacing(30),
@@ -326,81 +326,6 @@ function OrdinalDetailScreen() {
     }
   };
 
-  const showBrc20OrdinalDetail = (isGallery: boolean) => {
-    const regex = /”/g;
-    const validBrcContentValue = textContent.replace(regex, '"');
-    const content = JSON.parse(validBrcContentValue);
-
-    switch (content.op) {
-      case 'mint':
-        return (
-          <ColumnContainer>
-            <OrdinalAttributeComponent title={t('AMOUNT_TO_MINT')} value={content.amt} />
-            {!isGallery && (
-            <OrdinalAttributeComponent
-              title={t('OWNED_BY')}
-              value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
-                ordinalsAddress.length - 4,
-                ordinalsAddress.length,
-              )}`}
-              showOridnalTag
-              isAddress
-            />
-            )}
-          </ColumnContainer>
-        );
-      case 'transfer':
-        return (
-          <ColumnContainer>
-            <DetailSection isGallery={isGalleryOpen}>
-              <OrdinalAttributeComponent title={t('AMOUNT_TO_TRANSFER')} value={content.amt} />
-              <OrdinalAttributeComponent
-                title={t('BRC20_TRANSFER_STATUS')}
-                value={isTransferValid}
-                valueColor={isBrcTransferValid(selectedOrdinal!) ? theme.colors.feedback.success : theme.colors.feedback.error}
-                isAddress
-              />
-            </DetailSection>
-            {!isGallery && (
-            <OrdinalAttributeComponent
-              title={t('OWNED_BY')}
-              value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
-                ordinalsAddress.length - 4,
-                ordinalsAddress.length,
-              )}`}
-              showOridnalTag
-              isAddress
-            />
-            )}
-          </ColumnContainer>
-        );
-      case 'deploy':
-        return (
-          <ColumnContainer>
-            <Row>
-              <OrdinalAttributeComponent title={t('TOTAL_SUPPLY')} value={content.max} />
-              <MintLimitContainer>
-                <OrdinalAttributeComponent title={t('MINT_LIMIT')} value={content.lim} />
-              </MintLimitContainer>
-            </Row>
-            {!isGallery && (
-            <OrdinalAttributeComponent
-              title={t('OWNED_BY')}
-              value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
-                ordinalsAddress.length - 4,
-                ordinalsAddress.length,
-              )}`}
-              showOridnalTag
-              isAddress
-            />
-            )}
-          </ColumnContainer>
-        );
-      default:
-        return null;
-    }
-  };
-
   const ownedByView = (
     <RowContainer>
       <NftOwnedByText>{t('OWNED_BY')}</NftOwnedByText>
@@ -416,29 +341,6 @@ function OrdinalDetailScreen() {
       </OrdinalsTag>
     </RowContainer>
   );
-  const extensionView = (
-    <ExtensionContainer>
-      <CollectibleText>{isBrc20Ordinal ? t('BRC20_INSCRIPTION') : t('COLLECTIBLE')}</CollectibleText>
-      <OrdinalTitleText>{`${t('INSCRIPTION')} ${selectedOrdinal?.number}`}</OrdinalTitleText>
-      <WebGalleryButton onClick={openInGalleryView}>
-        <>
-          <ButtonImage src={SquaresFour} />
-          <WebGalleryButtonText>{t('WEB_GALLERY')}</WebGalleryButtonText>
-        </>
-      </WebGalleryButton>
-      <ExtensionOrdinalsContainer>
-        <OrdinalImage ordinal={selectedOrdinal!} />
-      </ExtensionOrdinalsContainer>
-      {notSupportedOrdinal && <InfoContainer bodyText={t('ORDINAL_NOT_DISPLAYED')} />}
-      <ButtonContainer>
-        <SendButton onClick={handleSendOrdinal}>
-          <img src={ArrowUp} alt="arrow" />
-          <h1>{t('SEND')}</h1>
-        </SendButton>
-      </ButtonContainer>
-      {isBrc20Ordinal ? showBrc20OrdinalDetail(false) : ownedByView}
-    </ExtensionContainer>
-  );
 
   const ordinalDescriptionData = (
     <>
@@ -470,6 +372,109 @@ function OrdinalDetailScreen() {
     </>
   );
 
+  const showBrc20OrdinalDetail = (isGallery: boolean) => {
+    try {
+      const regex = /”/g;
+      const validBrcContentValue = textContent.replace(regex, '"');
+      const content = JSON.parse(validBrcContentValue);
+
+      switch (content.op) {
+        case 'mint':
+          return (
+            <ColumnContainer>
+              <OrdinalAttributeComponent title={t('AMOUNT_TO_MINT')} value={content.amt} />
+              {!isGallery && (
+              <OrdinalAttributeComponent
+                title={t('OWNED_BY')}
+                value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
+                  ordinalsAddress.length - 4,
+                  ordinalsAddress.length,
+                )}`}
+                showOridnalTag
+                isAddress
+              />
+              )}
+            </ColumnContainer>
+          );
+        case 'transfer':
+          return (
+            <ColumnContainer>
+              <DetailSection isGallery={isGalleryOpen}>
+                <OrdinalAttributeComponent title={t('AMOUNT_TO_TRANSFER')} value={content.amt} />
+                <OrdinalAttributeComponent
+                  title={t('BRC20_TRANSFER_STATUS')}
+                  value={isTransferValid}
+                  valueColor={isBrcTransferValid(selectedOrdinal!) ? theme.colors.feedback.success : theme.colors.feedback.error}
+                  isAddress
+                />
+              </DetailSection>
+              {!isGallery && (
+              <OrdinalAttributeComponent
+                title={t('OWNED_BY')}
+                value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
+                  ordinalsAddress.length - 4,
+                  ordinalsAddress.length,
+                )}`}
+                showOridnalTag
+                isAddress
+              />
+              )}
+            </ColumnContainer>
+          );
+        case 'deploy':
+          return (
+            <ColumnContainer>
+              <Row>
+                <OrdinalAttributeComponent title={t('TOTAL_SUPPLY')} value={content.max} />
+                <MintLimitContainer>
+                  <OrdinalAttributeComponent title={t('MINT_LIMIT')} value={content.lim} />
+                </MintLimitContainer>
+              </Row>
+              {!isGallery && (
+              <OrdinalAttributeComponent
+                title={t('OWNED_BY')}
+                value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
+                  ordinalsAddress.length - 4,
+                  ordinalsAddress.length,
+                )}`}
+                showOridnalTag
+                isAddress
+              />
+              )}
+            </ColumnContainer>
+          );
+        default:
+          return null;
+      }
+    } catch (error) {
+      return isGallery ? ordinalDescriptionData : ownedByView;
+    }
+  };
+
+  const extensionView = (
+    <ExtensionContainer>
+      <CollectibleText>{isBrc20Ordinal ? t('BRC20_INSCRIPTION') : t('COLLECTIBLE')}</CollectibleText>
+      <OrdinalTitleText>{`${t('INSCRIPTION')} ${selectedOrdinal?.number}`}</OrdinalTitleText>
+      <WebGalleryButton onClick={openInGalleryView}>
+        <>
+          <ButtonImage src={SquaresFour} />
+          <WebGalleryButtonText>{t('WEB_GALLERY')}</WebGalleryButtonText>
+        </>
+      </WebGalleryButton>
+      <ExtensionOrdinalsContainer>
+        <OrdinalImage ordinal={selectedOrdinal!} />
+      </ExtensionOrdinalsContainer>
+      {notSupportedOrdinal && <InfoContainer bodyText={t('ORDINAL_NOT_DISPLAYED')} />}
+      <ButtonContainer>
+        <SendButton onClick={handleSendOrdinal}>
+          <img src={ArrowUp} alt="arrow" />
+          <h1>{t('SEND')}</h1>
+        </SendButton>
+      </ButtonContainer>
+      {isBrc20Ordinal ? showBrc20OrdinalDetail(false) : ownedByView}
+    </ExtensionContainer>
+  );
+
   const galleryView = (
     <Container>
       <BackButtonContainer>
diff --git a/src/app/screens/ordinals/brc20Tile.tsx b/src/app/screens/ordinals/brc20Tile.tsx
index 9876a0a16..171f77964 100644
--- a/src/app/screens/ordinals/brc20Tile.tsx
+++ b/src/app/screens/ordinals/brc20Tile.tsx
@@ -148,7 +148,9 @@ export default function Brc20Tile(props: Brc20TileProps) {
   }
 
   try {
-    const content = JSON.parse(brcContent);
+    const regex = /”/g;
+    const validBrcContentValue = brcContent.replace(regex, '"');
+    const content = JSON.parse(validBrcContentValue);
 
     switch (content?.op) {
       case 'mint':