Display denom in transaction history #302

Display denom in transaction history

package.json

@@ -170,6 +170,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/language": "^6.6.0",
     "@cosmjs/cosmwasm-stargate": "^0.28.11",
+    "@cosmjs/encoding": "^0.31.0",
     "@cosmjs/stargate": "^0.28.11",
     "@gnosis.pm/safe-apps-sdk": "6.1.0",
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/[email protected]",

src/pages/SmartContract/ContractInteraction/Contract.tsx

@@ -41,9 +41,10 @@ function Contract({ contractData }): ReactElement {
   const [schema, setSchema] = useState<any>()
   const [loading, setLoading] = useState(false)
   const [invalidAmount, setInvalidAmount] = useState(false)
-  const tokenList = useSelector(extendedSafeTokensSelector) as unknown as Token[]
+  const tokenList = useSelector(extendedSafeTokensSelector)
 
   const defListTokens = tokenList
+    .toArray()
     .filter((t) => t.type !== 'CW20')
     .map((token) => ({
       id: token.denom,

src/pages/Transactions/History/Transaction.tsx

@@ -1,4 +1,5 @@
 import { AccordionDetails } from '@aura/safe-react-components'
+import { fromBech32 } from '@cosmjs/encoding'
 import { useEffect, useState } from 'react'
 import { getDetailToken } from 'src/services'
 import { formatTimeInWords } from 'src/utils/date'
@@ -12,8 +13,9 @@ import { NoPaddingAccordion, StyledAccordionSummary, StyledTransaction } from '.
 
 export default function Transaction({ transaction, notFirstTx, listTokens }) {
   let defToken
+  const [isAddress, setIsAddress] = useState<boolean>(false)
   const [txDetailLoaded, setTxDetailLoaded] = useState(false)
-  if (transaction.txInfo.contractAddress) {
+  if (transaction.txInfo.contractAddress && isAddress) {
     defToken = listTokens.find((t) => t.address === transaction.txInfo.contractAddress)
   } else {
     defToken = listTokens.find(
@@ -30,10 +32,23 @@ export default function Transaction({ transaction, notFirstTx, listTokens }) {
   }, [listTokens])
 
   useEffect(() => {
-    if (!token) {
+    if (transaction.txInfo.contractAddress) {
+      try {
+        const data = fromBech32(transaction.txInfo.contractAddress)
+        if (data) {
+          setIsAddress(true)
+        }
+      } catch (e) {
+        setIsAddress(false)
+      }
+    }
+  }, [transaction.txInfo.contractAddress])
+
+  useEffect(() => {
+    if (!token && isAddress && transaction.txInfo.amount) {
       getContractDetail()
     }
-  }, [token])
+  }, [token, isAddress])
 
   if (!transaction) {
     return null

src/pages/Transactions/Queue/Transaction.tsx

@@ -11,6 +11,7 @@ import TxStatus from '../components/TxStatus'
 import TxTime from '../components/TxTime'
 import TxType from '../components/TxType'
 import { NoPaddingAccordion, StyledAccordionSummary, StyledTransaction } from '../styled'
+import { fromBech32 } from '@cosmjs/encoding'
 
 export default function Transaction({
   transaction,
@@ -23,9 +24,10 @@ export default function Transaction({
   curSeq: string
   listTokens?: any
 }) {
-  const [txDetailLoaded, setTxDetailLoaded] = useState(false)
   let defToken
-  if (transaction.txInfo.contractAddress) {
+  const [txDetailLoaded, setTxDetailLoaded] = useState(false)
+  const [isAddress, setIsAddress] = useState<boolean>(false)
+  if (transaction.txInfo.contractAddress && isAddress) {
     defToken = listTokens.find((t) => t.address === transaction.txInfo.contractAddress)
   } else {
     defToken = listTokens.find(
@@ -42,10 +44,23 @@ export default function Transaction({
   }, [listTokens])
 
   useEffect(() => {
-    if (!token) {
+    if (transaction.txInfo.contractAddress) {
+      try {
+        const data = fromBech32(transaction.txInfo.contractAddress)
+        if (data) {
+          setIsAddress(true)
+        }
+      } catch (e) {
+        setIsAddress(false)
+      }
+    }
+  }, [transaction.txInfo.contractAddress])
+
+  useEffect(() => {
+    if (!token && isAddress && transaction.txInfo.amount) {
       getContractDetail()
     }
-  }, [token])
+  }, [token, isAddress])
 
   if (!transaction) {
     return null

src/pages/Transactions/components/TxDetail/Message.tsx

@@ -102,7 +102,7 @@ export default function TxMsg({ tx, txDetail, token, onImport }) {
               </div>
             </div>
           ))}
-        <div className="function-name">Transaction funds:</div>
+        {msg[0]?.value?.funds.length > 0 ? <div className="function-name">Transaction funds:</div> : <></>}
         {msg[0]?.value?.funds?.map((fund, index) => {
           const foundToken = tokenList.find((token) => token.cosmosDenom === fund.denom || token.denom === fund.denom)
           if (foundToken) {
@@ -124,7 +124,7 @@ export default function TxMsg({ tx, txDetail, token, onImport }) {
         <strong>
           Delegate{' '}
           <span className="token">
-            {amount} {isTokenNotExist ? <BtnImport onImport={onImport} /> : <></>}
+            {amount} {token?.symbol ?? token?.coinDenom} {isTokenNotExist ? <BtnImport onImport={onImport} /> : <></>}
           </span>{' '}
           to:
         </strong>
@@ -138,7 +138,7 @@ export default function TxMsg({ tx, txDetail, token, onImport }) {
         <strong>
           Undelegate{' '}
           <span className="token">
-            {amount} {isTokenNotExist ? <BtnImport onImport={onImport} /> : <></>}
+            {amount} {token?.symbol ?? token?.coinDenom} {isTokenNotExist ? <BtnImport onImport={onImport} /> : <></>}
           </span>{' '}
           from:
         </strong>

src/services/index.ts

@@ -262,8 +262,7 @@ export async function getNumberOfDelegator(validatorId: any): Promise<IResponse<
   const { chainInfo } = await getGatewayUrl()
   return axios
     .get(
-      `${
-        chainInfo.find((chain) => chain.chainId == currentChainInfo.chainId)?.rest
+      `${chainInfo.find((chain) => chain.chainId == currentChainInfo.chainId)?.rest
       }/cosmos/staking/v1beta1/validators/${validatorId}/delegations?pagination.count_total=true`,
     )
     .then((res) => res.data)
@@ -313,12 +312,8 @@ export async function getTokenDetail() {
 
 export async function getDetailToken(address: string): Promise<IResponse<any>> {
   const currentChainInfo = getChainInfo() as any
-  const { chainInfo } = await getGatewayUrl()
+
   return axios
-    .get(
-      `${
-        chainInfo.find((chain) => chain.chainId == currentChainInfo.chainId)?.rest
-      }/cosmwasm/wasm/v1/contract/${address}/smart/eyAidG9rZW5faW5mbyI6IHt9IH0%3D`,
-    )
+    .get(`${currentChainInfo.lcd}cosmwasm/wasm/v1/contract/${address}/smart/eyAidG9rZW5faW5mbyI6IHt9IH0%3D`)
     .then((res) => res.data)
 }

yarn.lock

@@ -2529,6 +2529,15 @@
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
+"@cosmjs/encoding@^0.31.0":
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.31.0.tgz#9a6fd80b59c35fc20638a6436128ad0be681eafc"
+  integrity sha512-NYGQDRxT7MIRSlcbAezwxK0FqnaSPKCH7O32cmfpHNWorFxhy9lwmBoCvoe59Kd0HmArI4h+NGzLEfX3OLnA4Q==
+  dependencies:
+    base64-js "^1.3.0"
+    bech32 "^1.1.4"
+    readonly-date "^1.0.0"
+
 "@cosmjs/[email protected]":
   version "0.28.11"
   resolved "https://registry.yarnpkg.com/@cosmjs/json-rpc/-/json-rpc-0.28.11.tgz#17b4c543d2de978b41bed973c88a2425a794af37"