runes - add image and symbol icon (#253)

* initial commit

* fix issue with non-image inscriptionId's

* use latest core

* update

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",

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 <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)}
+          />
+        );
+      }
+    }
+    if (fungibleToken.runeSymbol) {
+      return (
+        <TickerIconContainer size={size} round={round}>
+          <TickerIconText>{fungibleToken.runeSymbol}</TickerIconText>
+        </TickerIconContainer>
+      );
+    }
+
     const ticker = fungibleToken?.name
       ? getTicker(fungibleToken.name)
       : fungibleToken?.ticker || fungibleToken?.assetName || '';

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 (
     <RowContainer aria-label="Token Row" data-testid={name}>
       <CoinContainer>
-        <TokenImage fungibleToken={{ name, ticker, image, protocol } as FungibleToken} size={32} />
+        <TokenImage
+          fungibleToken={
+            { name, ticker, image, runeInscriptionId, runeSymbol, protocol } as FungibleToken
+          }
+          size={32}
+        />
         <CoinTitleText aria-label="Coin Title" isEnabled={isEnabled}>
           {name}
         </CoinTitleText>

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}