fix: logic and ui in RareSatsTabGridItem component (#692)

secretkeylabs · Nov 29, 2023 · e574270 · e574270
1 parent 13092a2
commit e574270
Show file tree

Hide file tree

Showing 9 changed files with 365 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "3.1.1-e148aa5",
+    "@secretkeylabs/xverse-core": "4.0.0",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "6.1.1",

diff --git a/src/app/components/exoticSatsRow/exoticSatsRow.tsx b/src/app/components/exoticSatsRow/exoticSatsRow.tsx
@@ -66,10 +66,12 @@ function ExoticSatsRow({
   satAmount,
   inscriptions,
   icons,
+  showNumberOfInscriptions = false,
 }: {
   title: string;
   satAmount: number;
   inscriptions: SatRangeInscription[];
+  showNumberOfInscriptions?: boolean;
   icons: ReactNode;
 }) {
   const { t } = useTranslation('translation', { keyPrefix: 'COMMON' });
@@ -90,14 +92,25 @@ function ExoticSatsRow({
             </StyledBundleSub>
           )}
         />
-        {inscriptions.map((inscription) => (
-          <Row key={inscription.id}>
+        {showNumberOfInscriptions && inscriptions.length ? (
+          <Row>
             <img src={OrdinalIcon} alt="ordinal" />
             <InscriptionText typography="body_medium_m" color="white_0">
-              {inscription.inscription_number}
+              {inscriptions.length > 1
+                ? `+${inscriptions.length}`
+                : inscriptions[0].inscription_number}
             </InscriptionText>
           </Row>
-        ))}
+        ) : (
+          inscriptions.map((inscription) => (
+            <Row key={inscription.id}>
+              <img src={OrdinalIcon} alt="ordinal" />
+              <InscriptionText typography="body_medium_m" color="white_0">
+                {inscription.inscription_number}
+              </InscriptionText>
+            </Row>
+          ))
+        )}
       </InfoContainer>
       <IconsContainer>{icons}</IconsContainer>
     </ItemContainer>