fix: refactor asset infos

CHANGELOG.md

@@ -39,9 +39,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#711](https://github.com/alleslabs/celatone-frontend/pull/711) Refactor assetInfos and add movePoolInfos to tx details
+
 ### Improvements
 
-- [#709](https://github.com/alleslabs/celatone-frontend/pull/709) refactor all address types
+- [#710](https://github.com/alleslabs/celatone-frontend/pull/710) Refactor all address types
 
 ### Bug fixes
 

src/lib/components/EstimatedFeeRender.tsx

@@ -2,7 +2,7 @@ import { Spinner } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
 
 import { useAssetInfos } from "lib/services/assetService";
-import { formatBalanceWithDenom } from "lib/utils";
+import { coinToTokenWithValue, formatTokenWithValue } from "lib/utils";
 
 export const EstimatedFeeRender = ({
   estimatedFee,
@@ -23,17 +23,9 @@ export const EstimatedFeeRender = ({
       </>
     );
 
-  const coin = estimatedFee?.amount[0];
-  if (!coin) return <>--</>;
+  const fee = estimatedFee?.amount[0];
+  if (!fee) return <>--</>;
 
-  const chainAssetInfo = assetInfos?.[coin.denom];
-  return (
-    <>
-      {formatBalanceWithDenom({
-        coin,
-        precision: chainAssetInfo?.precision,
-        symbol: chainAssetInfo?.symbol,
-      })}
-    </>
-  );
+  const feeToken = coinToTokenWithValue(fee.denom, fee.amount, assetInfos);
+  return <>{formatTokenWithValue(feeToken)}</>;
 };

src/lib/components/action-msg/MsgToken.tsx

@@ -1,41 +1,33 @@
 import { Flex, Text } from "@chakra-ui/react";
-import type { Coin } from "@cosmjs/stargate";
 
 import { Copier } from "../copy";
 import { TooltipInfo } from "../Tooltip";
-import { formatBalanceWithDenom } from "lib/utils";
+import type { TokenWithValue } from "lib/types";
+import { formatTokenWithValue, isSupportedToken } from "lib/utils";
 
 interface MsgTokenProps {
-  coin: Coin;
-  symbol?: string;
-  precision?: number;
+  token: TokenWithValue;
   fontWeight?: number;
   ampCopierSection?: string;
 }
 
 export const MsgToken = ({
-  coin,
-  symbol,
-  precision,
+  token,
   fontWeight = 600,
   ampCopierSection,
 }: MsgTokenProps) => (
   <Flex role="group" align="center" gap={1}>
     <Text fontWeight={fontWeight} variant="body2">
-      {formatBalanceWithDenom({
-        coin,
-        symbol,
-        precision,
-      })}
+      {formatTokenWithValue(token)}
     </Text>
     <TooltipInfo
-      label={`Token ID: ${coin.denom}`}
+      label={`Token ID: ${token.denom}`}
       maxW="240px"
       textAlign="center"
     />
     <Copier
-      type={symbol ? "supported_asset" : "unsupported_asset"}
-      value={coin.denom}
+      type={isSupportedToken(token) ? "supported_asset" : "unsupported_asset"}
+      value={token.denom}
       copyLabel="Token ID Copied!"
       display="none"
       ml={1}

src/lib/components/action-msg/SingleMsg.tsx

@@ -1,10 +1,9 @@
 import { Tag, Text, Flex } from "@chakra-ui/react";
-import type { Coin } from "@cosmjs/stargate";
 import { snakeCase } from "snake-case";
 
 import type { LinkType } from "lib/components/ExplorerLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
-import type { Option } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
 
 import { MsgToken } from "./MsgToken";
 
@@ -14,16 +13,10 @@ interface LinkElement {
   copyValue?: string;
 }
 
-interface Token {
-  id: string;
-  amount: string;
-  symbol: Option<string>;
-  precision: Option<number>;
-}
 export interface SingleMsgProps {
   type: string;
   text1?: string;
-  tokens?: Token[];
+  tokens?: TokenWithValue[];
   tags?: Option<string>[];
   length?: number;
   text2?: string;
@@ -49,17 +42,10 @@ export const SingleMsg = ({
       <Text variant="body2">
         {type} {text1}
       </Text>
-      {tokens?.map((token: Token, index: number) => (
+      {tokens?.map((token: TokenWithValue, index: number) => (
         <MsgToken
-          key={index.toString() + token}
-          coin={
-            {
-              denom: token.id,
-              amount: token.amount,
-            } as Coin
-          }
-          symbol={token.symbol}
-          precision={token.precision}
+          key={index.toString() + token.denom}
+          token={token}
           // TODO: add `ampCopierSection` later
         />
       ))}

src/lib/components/token/TokenCard.tsx

@@ -9,6 +9,7 @@ import {
   formatPrice,
   formatUTokenWithPrecision,
   getTokenLabel,
+  isSupportedToken,
 } from "lib/utils";
 
 import { TokenImageRender } from "./TokenImageRender";
@@ -54,7 +55,7 @@ export const TokenCard = ({
         </Badge>
         <Copier
           type={
-            !isUndefined(token.price) ? "supported_asset" : "unsupported_asset"
+            isSupportedToken(token) ? "supported_asset" : "unsupported_asset"
           }
           value={token.denom}
           copyLabel="Token ID Copied!"

src/lib/hooks/useSingleMessageProps.ts

@@ -6,6 +6,7 @@ import type { SingleMsgProps } from "lib/components/action-msg/SingleMsg";
 import type { LinkType } from "lib/components/ExplorerLink";
 import { useContractStore } from "lib/providers/store";
 import { useAssetInfos } from "lib/services/assetService";
+import { useMovePoolInfos } from "lib/services/move";
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type {
   DetailExecute,
@@ -17,10 +18,15 @@ import type {
   Option,
   DetailMigrate,
   DetailClearAdmin,
-  AssetInfo,
   BechAddr32,
+  AssetInfos,
+  MovePoolInfos,
 } from "lib/types";
-import { getFirstQueryParam, getExecuteMsgTags } from "lib/utils";
+import {
+  getFirstQueryParam,
+  getExecuteMsgTags,
+  coinToTokenWithValue,
+} from "lib/utils";
 
 /**
  * Returns messages variations for MsgInstantiateContract and MsgInstantiateContract2.
@@ -222,7 +228,8 @@ const executeSingleMsgProps = (
 const sendSingleMsgProps = (
   isSuccess: boolean,
   messages: Message[],
-  assetInfos: Option<Record<string, AssetInfo>>,
+  assetInfos: Option<AssetInfos>,
+  movePoolInfos: Option<MovePoolInfos>,
   getContractLocalInfo: (
     contractAddress: BechAddr32
   ) => Option<ContractLocalInfo>,
@@ -233,12 +240,9 @@ const sendSingleMsgProps = (
     detail.toAddress as BechAddr32
   );
 
-  const tokens = detail.amount.map((coin) => ({
-    symbol: assetInfos?.[coin.denom]?.symbol,
-    amount: coin.amount,
-    id: coin.denom,
-    precision: assetInfos?.[coin.denom]?.precision,
-  }));
+  const tokens = detail.amount.map((coin) =>
+    coinToTokenWithValue(coin.denom, coin.amount, assetInfos, movePoolInfos)
+  );
 
   const uniqueAddressLength = new Set(
     messages.map((msg) => {
@@ -594,6 +598,7 @@ export const useSingleActionMsgProps = (
 ): SingleMsgProps => {
   const { getContractLocalInfo } = useContractStore();
   const { data: assetInfos } = useAssetInfos({ withPrices: false });
+  const { data: movePoolInfos } = useMovePoolInfos({ withPrices: false });
   const getAddressTypeByLength = useGetAddressTypeByLength();
 
   switch (type) {
@@ -610,6 +615,7 @@ export const useSingleActionMsgProps = (
         isSuccess,
         messages,
         assetInfos,
+        movePoolInfos,
         getContractLocalInfo,
         getAddressTypeByLength
       );

src/lib/pages/account-details/data.ts

@@ -215,13 +215,18 @@ export const useUserDelegationInfos = (address: BechAddr) => {
   const { data: assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos({
     withPrices: true,
   });
-  const { data: lpMap, isLoading: isLpMapLoading } = useMovePoolInfos();
+  const { data: movePoolInfos, isLoading: isLoadingMovePoolInfos } =
+    useMovePoolInfos({
+      withPrices: true,
+    });
 
   const { data: accountDelegations, isLoading: isLoadingAccountDelegations } =
     useDelegationsByAddress(address);
 
   const isLoading =
-    isLoadingAccountDelegations || isLoadingAssetInfos || isLpMapLoading;
+    isLoadingAccountDelegations ||
+    isLoadingAssetInfos ||
+    isLoadingMovePoolInfos;
 
   const data: UserDelegationsData = {
     isLoading,
@@ -242,7 +247,7 @@ export const useUserDelegationInfos = (address: BechAddr) => {
     data.stakingParams = {
       ...accountDelegations.stakingParams,
       bondDenoms: accountDelegations.stakingParams.bondDenoms.map((denom) =>
-        coinToTokenWithValue(denom, "0", assetInfos, lpMap)
+        coinToTokenWithValue(denom, "0", assetInfos, movePoolInfos)
       ),
     };
 
@@ -253,7 +258,12 @@ export const useUserDelegationInfos = (address: BechAddr) => {
         validator: raw.validator,
         balances: raw.balance
           .map((coin) =>
-            coinToTokenWithValue(coin.denom, coin.amount, assetInfos, lpMap)
+            coinToTokenWithValue(
+              coin.denom,
+              coin.amount,
+              assetInfos,
+              movePoolInfos
+            )
           )
           .sort(compareTokenWithValues),
       })
@@ -277,7 +287,12 @@ export const useUserDelegationInfos = (address: BechAddr) => {
       completionTime: raw.completionTime,
       balances: raw.balance
         .map((coin) =>
-          coinToTokenWithValue(coin.denom, coin.amount, assetInfos, lpMap)
+          coinToTokenWithValue(
+            coin.denom,
+            coin.amount,
+            assetInfos,
+            movePoolInfos
+          )
         )
         .sort(compareTokenWithValues),
     }));
@@ -302,7 +317,12 @@ export const useUserDelegationInfos = (address: BechAddr) => {
         ...prev,
         [raw.validator.validatorAddress]: raw.reward
           .map<TokenWithValue>((coin) =>
-            coinToTokenWithValue(coin.denom, coin.amount, assetInfos, lpMap)
+            coinToTokenWithValue(
+              coin.denom,
+              coin.amount,
+              assetInfos,
+              movePoolInfos
+            )
           )
           .sort(compareTokenWithValues),
       }),
@@ -317,7 +337,7 @@ export const useUserDelegationInfos = (address: BechAddr) => {
           raw.denom,
           raw.amount,
           assetInfos,
-          lpMap
+          movePoolInfos
         ),
       }),
       {}
@@ -330,7 +350,12 @@ export const useUserDelegationInfos = (address: BechAddr) => {
         completionTime: raw.completionTime,
         balances: raw.balance
           .map((coin) =>
-            coinToTokenWithValue(coin.denom, coin.amount, assetInfos, lpMap)
+            coinToTokenWithValue(
+              coin.denom,
+              coin.amount,
+              assetInfos,
+              movePoolInfos
+            )
           )
           .sort(compareTokenWithValues),
       })
@@ -345,7 +370,7 @@ export const useUserDelegationInfos = (address: BechAddr) => {
           raw.denom,
           raw.amount,
           assetInfos,
-          lpMap
+          movePoolInfos
         ),
       }),
       {}

src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx

@@ -5,8 +5,13 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TableNoBorderRow } from "lib/components/table";
 import { Tooltip } from "lib/components/Tooltip";
-import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Message, Option, PoolDetail, Transaction } from "lib/types";
+import type {
+  AssetInfos,
+  Message,
+  Option,
+  PoolDetail,
+  Transaction,
+} from "lib/types";
 import { dateFromNow, extractMsgType, formatUTC } from "lib/utils";
 
 import { PoolMsgAction, PoolMsgDetail } from "./messages";
@@ -19,7 +24,7 @@ interface PoolTxsMsgProps {
   otherMsgs: { [key: string]: number };
   pool: PoolDetail;
   transaction: Transaction;
-  assetInfos: AssetInfosOpt;
+  assetInfos: Option<AssetInfos>;
   templateColumns: string;
 }
 

src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx

@@ -1,8 +1,7 @@
 import { TableContainer } from "@chakra-ui/react";
 
 import { Loading } from "lib/components/Loading";
-import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Option, PoolDetail, Transaction } from "lib/types";
+import type { AssetInfos, Option, PoolDetail, Transaction } from "lib/types";
 
 import { PoolTxsTableHeader } from "./PoolTxsTableHeader";
 import { PoolTxsTableRow } from "./PoolTxsTableRow";
@@ -13,7 +12,7 @@ const TEMPLATE_COLUMNS =
 interface PoolTxsTableProps {
   pool: PoolDetail;
   transactions: Option<Transaction[]>;
-  assetInfos: AssetInfosOpt;
+  assetInfos: Option<AssetInfos>;
   isLoading: boolean;
   emptyState: JSX.Element;
 }

src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx

@@ -1,13 +1,12 @@
-import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, Transaction } from "lib/types";
+import type { AssetInfos, Option, PoolDetail, Transaction } from "lib/types";
 
 import { extractPoolMsgs } from "./messages/utils";
 import { PoolTxsMsg } from "./PoolTxsMsg";
 
 interface PoolTxsTableRowProps {
   pool: PoolDetail;
   transaction: Transaction;
-  assetInfos: AssetInfosOpt;
+  assetInfos: Option<AssetInfos>;
   templateColumns: string;
 }