From a9410379d63f501e609bc01e0c328891a13978cb Mon Sep 17 00:00:00 2001 From: fede erbes Date: Fri, 17 May 2024 11:04:52 +0200 Subject: [PATCH] feat: add inscription id and symbol to send rune and psbt screen (#271) --- package-lock.json | 14 ++++++------- package.json | 2 +- .../confirmBtcTransaction/burnSection.tsx | 6 +----- .../confirmBtcTransaction/delegateSection.tsx | 6 +----- .../itemRow/runeAmount.tsx | 21 +++++++------------ .../confirmBtcTransaction/receiveSection.tsx | 12 ++--------- .../confirmBtcTransaction/transferSection.tsx | 7 +------ .../components/confirmBtcTransaction/utils.ts | 8 ++++++- src/app/components/tokenImage/index.tsx | 21 +++++++------------ .../restoreFunds/recoverRunes/index.tsx | 7 +------ 10 files changed, 37 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index a9b5b020f..ee03dc8aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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", @@ -1383,9 +1383,9 @@ } }, "node_modules/@secretkeylabs/xverse-core": { - "version": "13.6.7", - "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/13.6.7/0f39eead8e8603e7a0fb1b0740881064b7885b6c", - "integrity": "sha512-q9IrwImnEHURBBfNCsBuuZM2lQ7zuNPXMA9ShYbHKhjJKfUv/SGBJOpUOE2KdvE5NyJqmaDaWp9fEZU9aFbc8w==", + "version": "13.6.7-60156af", + "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/13.6.7-60156af/acb5be97745ac4cd1d8941a6974d37457c10e90d", + "integrity": "sha512-BjSCdGUanu09eDF0fUIEbkvXAUaqHPmJ5bxmlWys9Wp12RuDiB/9R0YcvPmUrB7pnd6PhZ7C9srpr8bfdygT6Q==", "license": "ISC", "dependencies": { "@bitcoinerlab/secp256k1": "^1.0.2", @@ -17578,9 +17578,9 @@ } }, "@secretkeylabs/xverse-core": { - "version": "13.6.7", - "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/13.6.7/0f39eead8e8603e7a0fb1b0740881064b7885b6c", - "integrity": "sha512-q9IrwImnEHURBBfNCsBuuZM2lQ7zuNPXMA9ShYbHKhjJKfUv/SGBJOpUOE2KdvE5NyJqmaDaWp9fEZU9aFbc8w==", + "version": "13.6.7-60156af", + "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/13.6.7-60156af/acb5be97745ac4cd1d8941a6974d37457c10e90d", + "integrity": "sha512-BjSCdGUanu09eDF0fUIEbkvXAUaqHPmJ5bxmlWys9Wp12RuDiB/9R0YcvPmUrB7pnd6PhZ7C9srpr8bfdygT6Q==", "requires": { "@bitcoinerlab/secp256k1": "^1.0.2", "@noble/curves": "^1.2.0", diff --git a/package.json b/package.json index 344130c3c..7a1a6adf2 100644 --- 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 index 70ac3437f..a56f46c4c 100644 --- a/src/app/components/confirmBtcTransaction/burnSection.tsx +++ b/src/app/components/confirmBtcTransaction/burnSection.tsx @@ -46,11 +46,7 @@ function BurnSection({ burns }: Props) { {burns.map((burn) => ( - + ))} diff --git a/src/app/components/confirmBtcTransaction/delegateSection.tsx b/src/app/components/confirmBtcTransaction/delegateSection.tsx index c5703b771..c2b29e9f3 100644 --- a/src/app/components/confirmBtcTransaction/delegateSection.tsx +++ b/src/app/components/confirmBtcTransaction/delegateSection.tsx @@ -86,11 +86,7 @@ function DelegateSection({ delegations }: Props) { {delegations.map((delegation) => ( - + ))} setShowDelegationInfo((prevState) => !prevState)}> diff --git a/src/app/components/confirmBtcTransaction/itemRow/runeAmount.tsx b/src/app/components/confirmBtcTransaction/itemRow/runeAmount.tsx index 75e315477..ff9c391b8 100644 --- 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,20 +41,14 @@ 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 ( @@ -61,7 +56,7 @@ export default function RuneAmount({ src={ ( - {tokenName} + {runeName} diff --git a/src/app/components/confirmBtcTransaction/receiveSection.tsx b/src/app/components/confirmBtcTransaction/receiveSection.tsx index 4eb37245a..8558d6d0d 100644 --- a/src/app/components/confirmBtcTransaction/receiveSection.tsx +++ b/src/app/components/confirmBtcTransaction/receiveSection.tsx @@ -116,11 +116,7 @@ function ReceiveSection({ {showOrdinalRunes && ordinalRuneReceipts.map((receipt) => ( - + ))} {areInscriptionRareSatsInOrdinal && ( @@ -157,11 +153,7 @@ function ReceiveSection({ {showPaymentRunes && paymentRuneReceipts.map((receipt) => ( - + ))} {amountIsBiggerThanZero && ( diff --git a/src/app/components/confirmBtcTransaction/transferSection.tsx b/src/app/components/confirmBtcTransaction/transferSection.tsx index cac937ee8..20f4b71ac 100644 --- a/src/app/components/confirmBtcTransaction/transferSection.tsx +++ b/src/app/components/confirmBtcTransaction/transferSection.tsx @@ -96,12 +96,7 @@ function TransferSection({ transactionIsFinal && runeTransfers?.map((transfer) => ( - + )) } diff --git a/src/app/components/confirmBtcTransaction/utils.ts b/src/app/components/confirmBtcTransaction/utils.ts index 0e6668a74..fc2805338 100644 --- a/src/app/components/confirmBtcTransaction/utils.ts +++ b/src/app/components/confirmBtcTransaction/utils.ts @@ -268,7 +268,11 @@ 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: '', @@ -276,4 +280,6 @@ export const mapRuneNameToPlaceholder = (runeName: string): FungibleToken => ({ 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 index e8a60d92a..e56c0f463 100644 --- 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 ; } if (fungibleToken.runeInscriptionId) { - const img = new Image(); // determine if valid image - img.src = ORDINALS_URL(network.type, fungibleToken.runeInscriptionId); - if (img.complete) { - return ( - - ); - } + return ( + + ); } if (fungibleToken.runeSymbol) { return ( diff --git a/src/app/screens/restoreFunds/recoverRunes/index.tsx b/src/app/screens/restoreFunds/recoverRunes/index.tsx index cb7997505..b0fbabb04 100644 --- a/src/app/screens/restoreFunds/recoverRunes/index.tsx +++ b/src/app/screens/restoreFunds/recoverRunes/index.tsx @@ -156,12 +156,7 @@ function RecoverRunes() { {(runeSummary?.transfers ?? []).map((transfer) => ( - + ))}