From 45ae8e83bdbef4920f50b2072827ee9f55e3e765 Mon Sep 17 00:00:00 2001
From: Alessandro Candeago <54709706+alecande11@users.noreply.github.com>
Date: Thu, 8 Jun 2023 11:05:21 +0200
Subject: [PATCH] fix copy token denom in dev mode

---
 src/components/general/CopyIcon.tsx     |  7 ++++---
 src/pages/wallet/AssetChain.module.scss | 12 ++++++++++++
 src/pages/wallet/AssetChain.tsx         | 17 +++++++++++++++--
 src/pages/wallet/AssetPage.tsx          |  2 ++
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/general/CopyIcon.tsx b/src/components/general/CopyIcon.tsx
index 113491572..8eda28370 100644
--- a/src/components/general/CopyIcon.tsx
+++ b/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>
   )
diff --git a/src/pages/wallet/AssetChain.module.scss b/src/pages/wallet/AssetChain.module.scss
index a80f85c82..5b0827bd2 100644
--- a/src/pages/wallet/AssetChain.module.scss
+++ b/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 {
diff --git a/src/pages/wallet/AssetChain.tsx b/src/pages/wallet/AssetChain.tsx
index 7750188c6..b77815f36 100644
--- a/src/pages/wallet/AssetChain.tsx
+++ b/src/pages/wallet/AssetChain.tsx
@@ -6,8 +6,10 @@ 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
@@ -15,17 +17,20 @@ export interface Props {
   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}{" "}
diff --git a/src/pages/wallet/AssetPage.tsx b/src/pages/wallet/AssetPage.tsx
index 62440fbde..7a82ffe3d 100644
--- a/src/pages/wallet/AssetPage.tsx
+++ b/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}