feat: add inscription id and symbol to send rune and psbt screen (#271)

secretkeylabs · May 17, 2024 · a941037 · a941037
1 parent f27341f
commit a941037
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "@playwright/test": "^1.43.1",
     "@react-spring/web": "^9.6.1",
     "@scure/btc-signer": "1.2.1",
-    "@secretkeylabs/xverse-core": "13.6.7",
+    "@secretkeylabs/xverse-core": "13.6.7-60156af",
     "@stacks/connect": "7.4.1",
     "@stacks/stacks-blockchain-api-types": "6.1.1",
     "@stacks/transactions": "6.13.1",

diff --git a/src/app/components/confirmBtcTransaction/burnSection.tsx b/src/app/components/confirmBtcTransaction/burnSection.tsx
@@ -46,11 +46,7 @@ function BurnSection({ burns }: Props) {
       </Header>
       {burns.map((burn) => (
         <RowContainer key={burn.runeName}>
-          <RuneAmount
-            tokenName={burn.runeName}
-            amount={String(burn.amount)}
-            divisibility={burn.divisibility}
-          />
+          <RuneAmount rune={burn} />
         </RowContainer>
       ))}
     </Container>

diff --git a/src/app/components/confirmBtcTransaction/delegateSection.tsx b/src/app/components/confirmBtcTransaction/delegateSection.tsx
@@ -86,11 +86,7 @@ function DelegateSection({ delegations }: Props) {
       </Header>
       {delegations.map((delegation) => (
         <RowContainer key={delegation.runeName}>
-          <RuneAmount
-            tokenName={delegation.runeName}
-            amount={String(delegation.amount)}
-            divisibility={delegation.divisibility}
-          />
+          <RuneAmount rune={delegation} />
         </RowContainer>
       ))}
       <WarningButton type="button" onClick={() => setShowDelegationInfo((prevState) => !prevState)}>

diff --git a/src/app/components/confirmBtcTransaction/itemRow/runeAmount.tsx b/src/app/components/confirmBtcTransaction/itemRow/runeAmount.tsx
@@ -1,5 +1,6 @@
 import { mapRuneNameToPlaceholder } from '@components/confirmBtcTransaction/utils';
 import TokenImage from '@components/tokenImage';
+import { RuneBase } from '@secretkeylabs/xverse-core';
 import Avatar from '@ui-library/avatar';
 import { StyledP } from '@ui-library/common.styled';
 import { ftDecimals, getTicker } from '@utils/helper';
@@ -40,28 +41,22 @@ const StyledPRight = styled(StyledP)`
 `;
 
 type Props = {
-  tokenName: string;
-  amount: string;
-  divisibility: number;
+  rune: RuneBase;
   hasSufficientBalance?: boolean;
 };
 
-export default function RuneAmount({
-  tokenName,
-  amount,
-  divisibility,
-  hasSufficientBalance = true,
-}: Props) {
+export default function RuneAmount({ rune, hasSufficientBalance = true }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
-  const amountWithDecimals = ftDecimals(amount, divisibility);
+  const { runeName, amount, divisibility, symbol, inscriptionId } = rune;
+  const amountWithDecimals = ftDecimals(String(amount), divisibility);
   return (
     <Container>
       <AvatarContainer>
         <Avatar
           src={
             <TokenImage
               currency="FT"
-              fungibleToken={mapRuneNameToPlaceholder(tokenName)}
+              fungibleToken={mapRuneNameToPlaceholder(runeName, symbol, inscriptionId)}
               showProtocolIcon={false}
               loading={false}
               size={32}
@@ -78,7 +73,7 @@ export default function RuneAmount({
             value={amountWithDecimals}
             displayType="text"
             thousandSeparator
-            suffix={` ${getTicker(tokenName)}`}
+            suffix={` ${symbol}`}
             renderText={(value: string) => (
               <StyledPRight
                 typography="body_medium_m"
@@ -90,7 +85,7 @@ export default function RuneAmount({
           />
         </Row>
         <StyledP typography="body_medium_s" color="white_400">
-          {tokenName}
+          {runeName}
         </StyledP>
       </Column>
     </Container>

diff --git a/src/app/components/confirmBtcTransaction/receiveSection.tsx b/src/app/components/confirmBtcTransaction/receiveSection.tsx
@@ -116,11 +116,7 @@ function ReceiveSection({
           {showOrdinalRunes &&
             ordinalRuneReceipts.map((receipt) => (
               <RowContainer key={receipt.runeName}>
-                <RuneAmount
-                  tokenName={receipt.runeName}
-                  amount={String(receipt.amount)}
-                  divisibility={receipt.divisibility}
-                />
+                <RuneAmount rune={receipt} />
               </RowContainer>
             ))}
           {areInscriptionRareSatsInOrdinal && (
@@ -157,11 +153,7 @@ function ReceiveSection({
           {showPaymentRunes &&
             paymentRuneReceipts.map((receipt) => (
               <RowContainer key={receipt.runeName}>
-                <RuneAmount
-                  tokenName={receipt.runeName}
-                  amount={String(receipt.amount)}
-                  divisibility={receipt.divisibility}
-                />
+                <RuneAmount rune={receipt} />
               </RowContainer>
             ))}
           {amountIsBiggerThanZero && (

diff --git a/src/app/components/confirmBtcTransaction/transferSection.tsx b/src/app/components/confirmBtcTransaction/transferSection.tsx
@@ -96,12 +96,7 @@ function TransferSection({
         transactionIsFinal &&
           runeTransfers?.map((transfer) => (
             <RowContainer key={transfer.runeName}>
-              <RuneAmount
-                tokenName={transfer.runeName}
-                amount={String(transfer.amount)}
-                divisibility={transfer.divisibility}
-                hasSufficientBalance={transfer.hasSufficientBalance}
-              />
+              <RuneAmount rune={transfer} hasSufficientBalance={transfer.hasSufficientBalance} />
             </RowContainer>
           ))
       }

diff --git a/src/app/components/confirmBtcTransaction/utils.ts b/src/app/components/confirmBtcTransaction/utils.ts
@@ -268,12 +268,18 @@ export const getSatRangesWithInscriptions = ({
   return { satRanges: satRangesArray, totalExoticSats };
 };
 
-export const mapRuneNameToPlaceholder = (runeName: string): FungibleToken => ({
+export const mapRuneNameToPlaceholder = (
+  runeName: string,
+  symbol: string,
+  inscriptionId: string,
+): FungibleToken => ({
   protocol: 'runes',
   name: runeName,
   assetName: '',
   balance: '',
   principal: '',
   total_received: '',
   total_sent: '',
+  runeSymbol: symbol,
+  runeInscriptionId: inscriptionId,
 });
diff --git a/src/app/components/tokenImage/index.tsx b/src/app/components/tokenImage/index.tsx
@@ -5,8 +5,7 @@ import RunesIcon from '@assets/img/transactions/runes.svg';
 import { StyledBarLoader } from '@components/tilesSkeletonLoader';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { FungibleToken } from '@secretkeylabs/xverse-core';
-import { ORDINALS_URL } from '@secretkeylabs/xverse-core/constant';
-import { CurrencyTypes } from '@utils/constants';
+import { CurrencyTypes, XVERSE_ORDIVIEW_URL } from '@utils/constants';
 import { getTicker } from '@utils/helper';
 import { useCallback } from 'react';
 import styled from 'styled-components';
@@ -118,17 +117,13 @@ export default function TokenImage({
       return <TickerImage data-testid="token-image" size={size} src={fungibleToken.image} />;
     }
     if (fungibleToken.runeInscriptionId) {
-      const img = new Image(); // determine if valid image
-      img.src = ORDINALS_URL(network.type, fungibleToken.runeInscriptionId);
-      if (img.complete) {
-        return (
-          <TickerImage
-            data-testid="token-image"
-            size={size}
-            src={ORDINALS_URL(network.type, fungibleToken.runeInscriptionId)}
-          />
-        );
-      }
+      return (
+        <TickerImage
+          data-testid="token-image"
+          size={size}
+          src={`${XVERSE_ORDIVIEW_URL(network.type)}/thumbnail/${fungibleToken.runeInscriptionId}`}
+        />
+      );
     }
     if (fungibleToken.runeSymbol) {
       return (

diff --git a/src/app/screens/restoreFunds/recoverRunes/index.tsx b/src/app/screens/restoreFunds/recoverRunes/index.tsx
@@ -156,12 +156,7 @@ function RecoverRunes() {
         <ScrollContainer>
           {(runeSummary?.transfers ?? []).map((transfer) => (
             <RowContainer key={transfer.runeName}>
-              <RuneAmount
-                tokenName={transfer.runeName}
-                amount={String(transfer.amount)}
-                divisibility={transfer.divisibility}
-                hasSufficientBalance={transfer.hasSufficientBalance}
-              />
+              <RuneAmount rune={transfer} hasSufficientBalance={transfer.hasSufficientBalance} />
             </RowContainer>
           ))}
         </ScrollContainer>