From 7f14c9e7e5ca30990f5517989ccb009103de3a48 Mon Sep 17 00:00:00 2001 From: Terence Ng Date: Wed, 15 May 2024 12:33:01 +0800 Subject: [PATCH] runes - add image and symbol icon (#253) * initial commit * fix issue with non-image inscriptionId's * use latest core * update --- package-lock.json | 14 +++++------ package.json | 2 +- src/app/components/tokenImage/index.tsx | 24 +++++++++++++++++++ .../screens/manageTokens/coinItem/index.tsx | 22 +++++++++++++++-- src/app/screens/manageTokens/index.tsx | 2 ++ 5 files changed, 54 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5cdab6485..1da5f73b6 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.5", + "@secretkeylabs/xverse-core": "13.6.6", "@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.5", - "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/13.6.5/d040738bda961a6881aafc5b48cd3e5cee27b4f2", - "integrity": "sha512-dh1zjApZMzLcNbCNXgwEfZvlgnYcRDJUJzRelDSj/wmg7fCESsct0ANa3DQonNYi27T8XokCufeu0JMX3Pvj9g==", + "version": "13.6.6", + "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/13.6.6/03fd02e846aae0249f935539d3de5f55712f5889", + "integrity": "sha512-xC4bxxtCEesyQGxiEYBvASrKg5DQ1ARw1jEPz/8x5gVFkMJxK0+7xWx5SVKDQsRCNMIDdxW/WMJf1QoD47MCHw==", "license": "ISC", "dependencies": { "@bitcoinerlab/secp256k1": "^1.0.2", @@ -17578,9 +17578,9 @@ } }, "@secretkeylabs/xverse-core": { - "version": "13.6.5", - "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/13.6.5/d040738bda961a6881aafc5b48cd3e5cee27b4f2", - "integrity": "sha512-dh1zjApZMzLcNbCNXgwEfZvlgnYcRDJUJzRelDSj/wmg7fCESsct0ANa3DQonNYi27T8XokCufeu0JMX3Pvj9g==", + "version": "13.6.6", + "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/13.6.6/03fd02e846aae0249f935539d3de5f55712f5889", + "integrity": "sha512-xC4bxxtCEesyQGxiEYBvASrKg5DQ1ARw1jEPz/8x5gVFkMJxK0+7xWx5SVKDQsRCNMIDdxW/WMJf1QoD47MCHw==", "requires": { "@bitcoinerlab/secp256k1": "^1.0.2", "@noble/curves": "^1.2.0", diff --git a/package.json b/package.json index 031b91f29..20281da42 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.5", + "@secretkeylabs/xverse-core": "13.6.6", "@stacks/connect": "7.4.1", "@stacks/stacks-blockchain-api-types": "6.1.1", "@stacks/transactions": "6.13.1", diff --git a/src/app/components/tokenImage/index.tsx b/src/app/components/tokenImage/index.tsx index aaa665447..e8a60d92a 100644 --- a/src/app/components/tokenImage/index.tsx +++ b/src/app/components/tokenImage/index.tsx @@ -3,7 +3,9 @@ import IconStacks from '@assets/img/dashboard/stx_icon.svg'; import OrdinalIcon from '@assets/img/transactions/ordinal.svg'; 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 { getTicker } from '@utils/helper'; import { useCallback } from 'react'; @@ -80,6 +82,7 @@ export default function TokenImage({ round, showProtocolIcon = true, }: TokenImageProps) { + const { network } = useWalletSelector(); const ftProtocol = fungibleToken?.protocol; const getCurrencyIcon = useCallback(() => { @@ -114,6 +117,27 @@ export default function TokenImage({ if (fungibleToken?.image) { return ; } + if (fungibleToken.runeInscriptionId) { + const img = new Image(); // determine if valid image + img.src = ORDINALS_URL(network.type, fungibleToken.runeInscriptionId); + if (img.complete) { + return ( + + ); + } + } + if (fungibleToken.runeSymbol) { + return ( + + {fungibleToken.runeSymbol} + + ); + } + const ticker = fungibleToken?.name ? getTicker(fungibleToken.name) : fungibleToken?.ticker || fungibleToken?.assetName || ''; diff --git a/src/app/screens/manageTokens/coinItem/index.tsx b/src/app/screens/manageTokens/coinItem/index.tsx index 5286f66b1..9a50f0bb7 100644 --- a/src/app/screens/manageTokens/coinItem/index.tsx +++ b/src/app/screens/manageTokens/coinItem/index.tsx @@ -45,13 +45,26 @@ interface Props { name: string; image?: string; ticker?: string; + runeSymbol?: string | null; + runeInscriptionId?: string | null; protocol?: string; disabled: boolean; toggled(enabled: boolean, coinName: string, coinKey: string): void; enabled?: boolean; } -function CoinItem({ id, name, image, ticker, protocol, disabled, toggled, enabled }: Props) { +function CoinItem({ + id, + name, + image, + ticker, + runeInscriptionId, + runeSymbol, + protocol, + disabled, + toggled, + enabled, +}: Props) { const [isEnabled, setIsEnabled] = useState(enabled); const toggleSwitch = () => { setIsEnabled((previousState) => !previousState); @@ -61,7 +74,12 @@ function CoinItem({ id, name, image, ticker, protocol, disabled, toggled, enable return ( - + {name} diff --git a/src/app/screens/manageTokens/index.tsx b/src/app/screens/manageTokens/index.tsx index 306e21f03..c96c83a14 100644 --- a/src/app/screens/manageTokens/index.tsx +++ b/src/app/screens/manageTokens/index.tsx @@ -197,6 +197,8 @@ function ManageTokens() { name={coin.name} image={coin.image} ticker={coin.ticker} + runeInscriptionId={coin.runeInscriptionId} + runeSymbol={coin.runeSymbol} disabled={false} toggled={toggled} enabled={coin.visible}