FIX: copy token denom in dev mode

src/components/general/CopyIcon.tsx

@@ -5,8 +5,9 @@ import { useState } from "react"
 interface Props {
   text: string
   className?: string
+  size?: number
 }
-const CopyIcon = ({ text, className }: Props) => {
+const CopyIcon = ({ text, className, size }: Props) => {
   const [copied, setCopied] = useState(false)
 
   return (
@@ -19,9 +20,9 @@ const CopyIcon = ({ text, className }: Props) => {
       }}
     >
       {copied ? (
-        <Check style={{ fontSize: 18 }} />
+        <Check style={{ fontSize: size ?? 18 }} />
       ) : (
-        <ContentCopy style={{ fontSize: 18 }} />
+        <ContentCopy style={{ fontSize: size ?? 18 }} />
       )}
     </button>
   )

src/pages/wallet/AssetChain.module.scss

@@ -34,6 +34,18 @@
     font-weight: var(--normal);
     color: var(--text-muted);
     white-space: nowrap;
+
+    .copy__denom {
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 5px;
+      color: hsl(
+        var(--button-primary-bg-h),
+        var(--button-primary-bg-s),
+        var(--button-primary-bg-l)
+      );
+    }
   }
 
   h4 {

src/pages/wallet/AssetChain.tsx

@@ -6,26 +6,31 @@ import { useNetwork } from "data/wallet"
 import { useTranslation } from "react-i18next"
 import styles from "./AssetChain.module.scss"
 import IbcSendBack from "./IbcSendBack"
-import { InternalButton } from "components/general"
+import { CopyIcon, InternalButton } from "components/general"
 import { Tooltip } from "components/display"
+import { useDevMode } from "utils/localStorage"
+import { truncate } from "@terra-money/terra-utils"
 
 export interface Props {
   chain: string
   balance: string
   symbol: string
   decimals: number
   token: string
+  denom: string
   path?: string[]
   ibcDenom?: string
 }
 
 const AssetChain = (props: Props) => {
-  const { chain, symbol, balance, decimals, token, path, ibcDenom } = props
+  const { chain, symbol, balance, decimals, token, path, ibcDenom, denom } =
+    props
   const currency = useCurrency()
   const { data: prices, ...pricesState } = useExchangeRates()
   const { t } = useTranslation()
 
   const networks = useNetwork()
+  const { devMode } = useDevMode()
 
   const { icon, name } = networks[chain]
 
@@ -78,6 +83,14 @@ const AssetChain = (props: Props) => {
               ))}
           </h4>
           {path && <p>{path.map((c) => networks[c]?.name ?? c).join(" → ")}</p>}
+          {devMode && (
+            <p>
+              <span className={styles.copy__denom}>
+                {truncate(denom)}
+                <CopyIcon text={denom} size={14} />
+              </span>
+            </p>
+          )}
         </h1>
         <h1 className={styles.price}>
           {currency.symbol}{" "}

src/pages/wallet/AssetPage.tsx

@@ -96,6 +96,7 @@ const AssetPage = () => {
                       balance={b.amount}
                       chain={b.chain}
                       token={token}
+                      denom={b.denom}
                       decimals={decimals}
                     />
                     {token === "uluna" && isTerraChain(b.chain) && <Vesting />}
@@ -117,6 +118,7 @@ const AssetPage = () => {
                       balance={b.amount}
                       chain={b.chain}
                       token={token}
+                      denom={b.denom}
                       decimals={decimals}
                       path={unknownIBCDenoms[b.denom]?.chains}
                       ibcDenom={b.denom}