diff --git a/CHANGELOG.md b/CHANGELOG.md index cab5a22bb..88a322cde 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/lib/components/EstimatedFeeRender.tsx b/src/lib/components/EstimatedFeeRender.tsx index 29c4e349f..2dc0be83d 100644 --- a/src/lib/components/EstimatedFeeRender.tsx +++ b/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)}; }; diff --git a/src/lib/components/action-msg/MsgToken.tsx b/src/lib/components/action-msg/MsgToken.tsx index 8f74a50e2..40ab2e5c7 100644 --- a/src/lib/components/action-msg/MsgToken.tsx +++ b/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) => ( - {formatBalanceWithDenom({ - coin, - symbol, - precision, - })} + {formatTokenWithValue(token)} ; - precision: Option; -} export interface SingleMsgProps { type: string; text1?: string; - tokens?: Token[]; + tokens?: TokenWithValue[]; tags?: Option[]; length?: number; text2?: string; @@ -49,17 +42,10 @@ export const SingleMsg = ({ {type} {text1} - {tokens?.map((token: Token, index: number) => ( + {tokens?.map((token: TokenWithValue, index: number) => ( ))} diff --git a/src/lib/components/token/TokenCard.tsx b/src/lib/components/token/TokenCard.tsx index 32d069201..f97d24229 100644 --- a/src/lib/components/token/TokenCard.tsx +++ b/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 = ({ >, + assetInfos: Option, + movePoolInfos: Option, getContractLocalInfo: ( contractAddress: BechAddr32 ) => Option, @@ -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 ); diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts index 8ccffc675..10676e00e 100644 --- a/src/lib/pages/account-details/data.ts +++ b/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((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 ), }), {} diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx index 32a14d1de..1050eed6d 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx +++ b/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; templateColumns: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx index b74036244..51d1d36c9 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx +++ b/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; - assetInfos: AssetInfosOpt; + assetInfos: Option; isLoading: boolean; emptyState: JSX.Element; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx index b3056937e..1c030f6d7 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx @@ -1,5 +1,4 @@ -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"; @@ -7,7 +6,7 @@ import { PoolTxsMsg } from "./PoolTxsMsg"; interface PoolTxsTableRowProps { pool: PoolDetail; transaction: Transaction; - assetInfos: AssetInfosOpt; + assetInfos: Option; templateColumns: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx index 7bde41dde..ed20a6ec0 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx @@ -1,16 +1,14 @@ import { Flex, Text } from "@chakra-ui/react"; -import type { Coin } from "@cosmjs/stargate"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { Loading } from "lib/components/Loading"; import { EmptyState } from "lib/components/state"; import { PoolLogo } from "lib/pages/pools/components/PoolLogo"; -import type { AssetInfosOpt } from "lib/services/assetService"; import { usePoolAssetsbyPoolIds } from "lib/services/poolService"; -import type { AssetInfo, Option, TokenWithValue } from "lib/types"; +import type { AssetInfos, Option, TokenWithValue } from "lib/types"; import { coinToTokenWithValue, - formatBalanceWithDenom, + formatTokenWithValue, getTokenLabel, } from "lib/utils"; @@ -18,9 +16,8 @@ interface PoolAssetCardProps { poolId: number; description: string; assetText: string; - poolAsset: Coin; - poolAssetInfo: Option; - assetInfos: AssetInfosOpt; + poolToken: TokenWithValue; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } @@ -29,8 +26,7 @@ export const PoolAssetCard = ({ poolId, description, assetText, - poolAsset, - poolAssetInfo, + poolToken, assetInfos, isOpened, ampCopierSection, @@ -58,11 +54,7 @@ export const PoolAssetCard = ({ {assetText}{" "} - {formatBalanceWithDenom({ - coin: poolAsset, - symbol: poolAssetInfo?.symbol, - precision: poolAssetInfo?.precision, - })} + {formatTokenWithValue(poolToken)} diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx index 421ba9a6f..a10bb0174 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx @@ -1,7 +1,6 @@ import { Text } from "@chakra-ui/react"; -import type { AssetInfosOpt } from "lib/services/assetService"; -import type { Message, PoolDetail } from "lib/types"; +import type { AssetInfos, Message, Option, PoolDetail } from "lib/types"; import { extractTxDetails } from "lib/utils"; import { MsgLockTokensAction, MsgLockTokensDetail } from "./lockup"; @@ -38,7 +37,7 @@ export const PoolMsgAction = ({ }: { msg: Message; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; ampCopierSection?: string; }) => { const { type, detail, log } = msg; @@ -174,7 +173,7 @@ export const PoolMsgDetail = ({ msgIndex: number; msg: Message; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; }) => { diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx index 3e1b2107e..1fe369f74 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx @@ -3,15 +3,14 @@ import { Flex } from "@chakra-ui/react"; import { PoolLogoLink } from "../components"; import { getPoolDenom } from "../utils"; import { MsgToken } from "lib/components/action-msg/MsgToken"; -import type { AssetInfosOpt } from "lib/services/assetService"; -import type { PoolDetail } from "lib/types"; -import { formatDuration } from "lib/utils"; +import type { AssetInfos, Option, PoolDetail } from "lib/types"; +import { coinToTokenWithValue, formatDuration } from "lib/utils"; import type { MsgLockTokensDetails } from "lib/utils/tx/types"; interface MsgLockTokensActionProps { msg: MsgLockTokensDetails; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; ampCopierSection?: string; } @@ -26,14 +25,16 @@ export const MsgLockTokensAction = ({ amount: "0", denom: poolDenom, }; - const poolAssetInfo = assetInfos?.[poolDenom]; + const poolToken = coinToTokenWithValue( + poolAsset.denom, + poolAsset.amount, + assetInfos + ); return ( Bonded diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx index 679a2ec94..bcdfb8694 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx @@ -6,10 +6,9 @@ import { getPoolDenom } from "../utils"; import { MsgToken } from "lib/components/action-msg/MsgToken"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { Loading } from "lib/components/Loading"; -import type { AssetInfosOpt } from "lib/services/assetService"; import { useTxData } from "lib/services/txService"; -import type { PoolDetail } from "lib/types"; -import { extractMsgType } from "lib/utils"; +import type { AssetInfos, Option, PoolDetail } from "lib/types"; +import { coinToTokenWithValue, extractMsgType } from "lib/utils"; import type { MsgLockTokensDetails } from "lib/utils/tx/types"; interface MsgLockTokensDetailProps { @@ -18,7 +17,7 @@ interface MsgLockTokensDetailProps { msgIndex: number; msg: MsgLockTokensDetails; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } @@ -38,7 +37,11 @@ export const MsgLockTokensDetail = ({ amount: "0", denom: poolDenom, }; - const poolAssetInfo = assetInfos?.[poolDenom]; + const poolToken = coinToTokenWithValue( + poolAsset.denom, + poolAsset.amount, + assetInfos + ); const { data: txData, isLoading } = useTxData(txHash, isOpened); if (isLoading) return ; @@ -65,9 +68,7 @@ export const MsgLockTokensDetail = ({ {lockId} @@ -80,8 +81,7 @@ export const MsgLockTokensDetail = ({ poolId={pool.id} description="Bonded to" assetText="Bonded" - poolAsset={poolAsset} - poolAssetInfo={poolAssetInfo} + poolToken={poolToken} assetInfos={assetInfos} isOpened={isOpened} ampCopierSection={ampCopierSection} diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx index e1b3d26a8..8588eed96 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx @@ -4,14 +4,14 @@ import { PoolLogoLink } from "../components"; import { getPoolDenom } from "../utils"; import { MsgToken } from "lib/components/action-msg/MsgToken"; import { CustomIcon } from "lib/components/icon"; -import type { AssetInfosOpt } from "lib/services/assetService"; -import type { PoolDetail } from "lib/types"; +import type { AssetInfos, Option, PoolDetail } from "lib/types"; +import { coinToTokenWithValue } from "lib/utils"; import type { MsgExitPoolDetails } from "lib/utils/tx/types"; interface MsgExitPoolActionProps { msg: MsgExitPoolDetails; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; ampCopierSection?: string; } @@ -22,14 +22,16 @@ export const MsgExitPoolAction = ({ ampCopierSection, }: MsgExitPoolActionProps) => { const poolDenom = getPoolDenom(msg.pool_id); - const poolAssetInfo = assetInfos?.[poolDenom]; + const poolToken = coinToTokenWithValue( + poolDenom, + msg.share_in_amount, + assetInfos + ); return ( Burned @@ -38,18 +40,16 @@ export const MsgExitPoolAction = ({ {msg.token_out_mins && ( )} - {(msg.token_out_mins ?? []).map((asset, index) => { - const outAssetInfo = assetInfos?.[asset.denom]; + {(msg.token_out_mins ?? []).map((coin, index) => { + const token = coinToTokenWithValue(coin.denom, coin.amount, assetInfos); return ( - + {index > 0 && ( )} at least diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx index 48ff34f31..a0234c71c 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx @@ -2,7 +2,7 @@ import { Box, Flex } from "@chakra-ui/react"; import { PoolInfoText } from "../components/PoolInfoText"; import { ExplorerLink } from "lib/components/ExplorerLink"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import type { AssetInfos, Option } from "lib/types"; import { extractMsgType } from "lib/utils"; import type { MsgExitPoolDetails } from "lib/utils/tx/types"; @@ -13,7 +13,7 @@ interface MsgExitPoolDetailProps { blockHeight: number; msgIndex: number; msg: MsgExitPoolDetails; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx index c83621b1d..a5555fb2c 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx @@ -4,14 +4,14 @@ import { PoolLogoLink } from "../components"; import { getPoolDenom } from "../utils"; import { MsgToken } from "lib/components/action-msg/MsgToken"; import { CustomIcon } from "lib/components/icon"; -import type { AssetInfosOpt } from "lib/services/assetService"; -import type { PoolDetail } from "lib/types"; +import type { AssetInfos, Option, PoolDetail } from "lib/types"; +import { coinToTokenWithValue } from "lib/utils"; import type { MsgExitSwapExternAmountOutDetails } from "lib/utils/tx/types"; interface MsgExitSwapExternAmountOutActionProps { msg: MsgExitSwapExternAmountOutDetails; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; ampCopierSection?: string; } @@ -21,16 +21,22 @@ export const MsgExitSwapExternAmountOutAction = ({ assetInfos, ampCopierSection, }: MsgExitSwapExternAmountOutActionProps) => { - const outAssetInfo = assetInfos?.[msg.token_out.denom]; const poolDenom = getPoolDenom(msg.pool_id); - const poolAssetInfo = assetInfos?.[poolDenom]; + const poolToken = coinToTokenWithValue( + poolDenom, + msg.share_in_max_amount, + assetInfos + ); + const outToken = coinToTokenWithValue( + msg.token_out.denom, + msg.token_out.amount, + assetInfos + ); return ( Burned at most @@ -38,9 +44,7 @@ export const MsgExitSwapExternAmountOutAction = ({ diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx index 5b6e659c5..aa2337fb6 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx @@ -2,7 +2,7 @@ import { Box, Flex } from "@chakra-ui/react"; import { PoolInfoText } from "../components/PoolInfoText"; import { ExplorerLink } from "lib/components/ExplorerLink"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import type { AssetInfos, Option } from "lib/types"; import { extractMsgType } from "lib/utils"; import type { MsgExitSwapExternAmountOutDetails } from "lib/utils/tx/types"; @@ -13,7 +13,7 @@ interface MsgExitSwapExternAmountOutDetailProps { blockHeight: number; msgIndex: number; msg: MsgExitSwapExternAmountOutDetails; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx index 6e948ef39..d3e218e09 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx @@ -4,14 +4,14 @@ import { PoolLogoLink } from "../components"; import { getPoolDenom } from "../utils"; import { MsgToken } from "lib/components/action-msg/MsgToken"; import { CustomIcon } from "lib/components/icon"; -import type { AssetInfosOpt } from "lib/services/assetService"; -import type { PoolDetail } from "lib/types"; +import type { AssetInfos, Option, PoolDetail } from "lib/types"; +import { coinToTokenWithValue } from "lib/utils"; import type { MsgExitSwapShareAmountInDetails } from "lib/utils/tx/types"; interface MsgExitSwapShareAmountInActionProps { msg: MsgExitSwapShareAmountInDetails; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; ampCopierSection?: string; } @@ -21,16 +21,22 @@ export const MsgExitSwapShareAmountInAction = ({ assetInfos, ampCopierSection, }: MsgExitSwapShareAmountInActionProps) => { - const outAssetInfo = assetInfos?.[msg.token_out_denom]; const poolDenom = getPoolDenom(msg.pool_id); - const poolAssetInfo = assetInfos?.[poolDenom]; + const poolToken = coinToTokenWithValue( + poolDenom, + msg.share_in_amount, + assetInfos + ); + const outToken = coinToTokenWithValue( + msg.token_out_denom, + msg.token_out_min_amount, + assetInfos + ); return ( Burned @@ -39,9 +45,7 @@ export const MsgExitSwapShareAmountInAction = ({ at least diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx index 18d1b9aaf..a242a4703 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx @@ -2,7 +2,7 @@ import { Box, Flex } from "@chakra-ui/react"; import { PoolInfoText } from "../components/PoolInfoText"; import { ExplorerLink } from "lib/components/ExplorerLink"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import type { AssetInfos, Option } from "lib/types"; import { extractMsgType } from "lib/utils"; import type { MsgExitSwapShareAmountInDetails } from "lib/utils/tx/types"; @@ -13,7 +13,7 @@ interface MsgExitSwapShareAmountInDetailProps { blockHeight: number; msgIndex: number; msg: MsgExitSwapShareAmountInDetails; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx index ec403ca65..5dbd3969a 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx @@ -4,14 +4,14 @@ import { PoolLogoLink } from "../components"; import { getPoolDenom } from "../utils"; import { MsgToken } from "lib/components/action-msg/MsgToken"; import { CustomIcon } from "lib/components/icon"; -import type { AssetInfosOpt } from "lib/services/assetService"; -import type { PoolDetail } from "lib/types"; +import type { AssetInfos, Option, PoolDetail } from "lib/types"; +import { coinToTokenWithValue } from "lib/utils"; import type { MsgJoinPoolDetails } from "lib/utils/tx/types"; interface MsgJoinPoolActionProps { msg: MsgJoinPoolDetails; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; ampCopierSection?: string; } @@ -22,23 +22,24 @@ export const MsgJoinPoolAction = ({ ampCopierSection, }: MsgJoinPoolActionProps) => { const poolDenom = getPoolDenom(msg.pool_id); - const poolAssetInfo = assetInfos?.[poolDenom]; - + const poolToken = coinToTokenWithValue( + poolDenom, + msg.share_out_amount, + assetInfos + ); return ( Provided{" "} - {(msg.token_in_maxs ?? []).map((asset, index) => { - const inAssetInfo = assetInfos?.[asset.denom]; + {(msg.token_in_maxs ?? []).map((coin, index) => { + const token = coinToTokenWithValue(coin.denom, coin.amount, assetInfos); return ( - + {index > 0 && ( )} at most @@ -49,9 +50,7 @@ export const MsgJoinPoolAction = ({ diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx index 136449a1a..f482b821f 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx @@ -2,7 +2,7 @@ import { Box, Flex } from "@chakra-ui/react"; import { PoolInfoText } from "../components/PoolInfoText"; import { ExplorerLink } from "lib/components/ExplorerLink"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import type { AssetInfos, Option } from "lib/types"; import { extractMsgType } from "lib/utils"; import type { MsgJoinPoolDetails } from "lib/utils/tx/types"; @@ -13,7 +13,7 @@ interface MsgJoinPoolDetailProps { blockHeight: number; msgIndex: number; msg: MsgJoinPoolDetails; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx index c690ed641..e506136c2 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx @@ -4,14 +4,14 @@ import { PoolLogoLink } from "../components"; import { getPoolDenom } from "../utils"; import { MsgToken } from "lib/components/action-msg/MsgToken"; import { CustomIcon } from "lib/components/icon"; -import type { AssetInfosOpt } from "lib/services/assetService"; -import type { PoolDetail } from "lib/types"; +import type { AssetInfos, Option, PoolDetail } from "lib/types"; +import { coinToTokenWithValue } from "lib/utils"; import type { MsgJoinSwapExternAmountInDetails } from "lib/utils/tx/types"; interface MsgJoinSwapExternAmountInActionProps { msg: MsgJoinSwapExternAmountInDetails; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; ampCopierSection?: string; } @@ -21,16 +21,22 @@ export const MsgJoinSwapExternAmountInAction = ({ assetInfos, ampCopierSection, }: MsgJoinSwapExternAmountInActionProps) => { - const inAssetInfo = assetInfos?.[msg.token_in.denom]; const poolDenom = getPoolDenom(msg.pool_id); - const poolAssetInfo = assetInfos?.[poolDenom]; + const inToken = coinToTokenWithValue( + msg.token_in.denom, + msg.token_in.amount, + assetInfos + ); + const poolToken = coinToTokenWithValue( + poolDenom, + msg.share_out_min_amount, + assetInfos + ); return ( Provided @@ -39,9 +45,7 @@ export const MsgJoinSwapExternAmountInAction = ({ at least diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx index 9fe6458e0..752320884 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx @@ -2,7 +2,7 @@ import { Box, Flex } from "@chakra-ui/react"; import { PoolInfoText } from "../components/PoolInfoText"; import { ExplorerLink } from "lib/components/ExplorerLink"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import type { AssetInfos, Option } from "lib/types"; import { extractMsgType } from "lib/utils"; import type { MsgJoinSwapExternAmountInDetails } from "lib/utils/tx/types"; @@ -13,7 +13,7 @@ interface MsgJoinSwapExternAmountInDetailProps { blockHeight: number; msgIndex: number; msg: MsgJoinSwapExternAmountInDetails; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx index 8b3ae1601..ba9b69ea7 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx @@ -4,14 +4,14 @@ import { PoolLogoLink } from "../components"; import { getPoolDenom } from "../utils"; import { MsgToken } from "lib/components/action-msg/MsgToken"; import { CustomIcon } from "lib/components/icon"; -import type { AssetInfosOpt } from "lib/services/assetService"; -import type { PoolDetail } from "lib/types"; +import type { AssetInfos, Option, PoolDetail } from "lib/types"; +import { coinToTokenWithValue } from "lib/utils"; import type { MsgJoinSwapShareAmountOutDetails } from "lib/utils/tx/types"; interface MsgJoinSwapShareAmountOutActionProps { msg: MsgJoinSwapShareAmountOutDetails; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; ampCopierSection?: string; } @@ -21,16 +21,22 @@ export const MsgJoinSwapShareAmountOutAction = ({ assetInfos, ampCopierSection, }: MsgJoinSwapShareAmountOutActionProps) => { - const inAssetInfo = assetInfos?.[msg.token_in_denom]; const poolDenom = getPoolDenom(msg.pool_id); - const poolAssetInfo = assetInfos?.[poolDenom]; + const inToken = coinToTokenWithValue( + msg.token_in_denom, + msg.token_in_max_amount, + assetInfos + ); + const poolToken = coinToTokenWithValue( + poolDenom, + msg.share_out_amount, + assetInfos + ); return ( Provided at most @@ -38,9 +44,7 @@ export const MsgJoinSwapShareAmountOutAction = ({ diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx index 8e4087326..fbd995869 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx @@ -2,7 +2,7 @@ import { Box, Flex } from "@chakra-ui/react"; import { PoolInfoText } from "../components/PoolInfoText"; import { ExplorerLink } from "lib/components/ExplorerLink"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import type { AssetInfos, Option } from "lib/types"; import { extractMsgType } from "lib/utils"; import type { MsgJoinSwapShareAmountOutDetails } from "lib/utils/tx/types"; @@ -13,7 +13,7 @@ interface MsgJoinSwapShareAmountOutDetailProps { blockHeight: number; msgIndex: number; msg: MsgJoinSwapShareAmountOutDetails; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx index a1cfef505..e0e709da5 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx @@ -5,8 +5,8 @@ import big from "big.js"; import { AssetCard } from "../../components"; import { Loading } from "lib/components/Loading"; import { EmptyState } from "lib/components/state"; -import type { AssetInfosOpt } from "lib/services/assetService"; import { useTxData } from "lib/services/txService"; +import type { AssetInfos, Option } from "lib/types"; import { coinsFromStr } from "lib/utils"; interface PoolAssetsGridProps { @@ -15,7 +15,7 @@ interface PoolAssetsGridProps { msgAssets?: Coin[]; msgSwapDenom?: string; isJoin: boolean; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx index 6deaf4516..305e2ed09 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx @@ -4,15 +4,16 @@ import { PoolAssetCard } from "../../components"; import { getPoolDenom } from "../../utils"; import { Loading } from "lib/components/Loading"; import { EmptyState } from "lib/components/state"; -import type { AssetInfosOpt } from "lib/services/assetService"; import { useTxData } from "lib/services/txService"; +import type { AssetInfos, Option } from "lib/types"; +import { coinToTokenWithValue } from "lib/utils"; interface PoolLPCardProps { txHash?: string; msgIndex: number; poolId: string; msgShareAmount?: string; - assetInfos: AssetInfosOpt; + assetInfos: Option; isJoin: boolean; isOpened: boolean; ampCopierSection?: string; @@ -42,6 +43,7 @@ export const PoolLPCard = ({ return ( ); + const poolToken = coinToTokenWithValue(poolDenom, shareAmount, assetInfos); return ( ; ampCopierSection?: string; } @@ -25,14 +25,16 @@ export const MsgLockAndSuperfluidDelegateAction = ({ amount: "0", denom: poolDenom, }; - const poolAssetInfo = assetInfos?.[poolDenom]; + const poolToken = coinToTokenWithValue( + poolAsset.denom, + poolAsset.amount, + assetInfos + ); return ( Bonded and locked diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx index a11b56e80..6e38f4bb6 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx @@ -6,11 +6,10 @@ import { getPoolDenom } from "../utils"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { Loading } from "lib/components/Loading"; import { ValidatorBadge } from "lib/components/ValidatorBadge"; -import type { AssetInfosOpt } from "lib/services/assetService"; import { useTxData } from "lib/services/txService"; import { useValidator } from "lib/services/validatorService"; -import type { PoolDetail } from "lib/types"; -import { extractMsgType } from "lib/utils"; +import type { AssetInfos, Option, PoolDetail } from "lib/types"; +import { coinToTokenWithValue, extractMsgType } from "lib/utils"; import type { MsgLockAndSuperfluidDelegateDetails } from "lib/utils/tx/types"; interface MsgLockAndSuperfluidDelegateDetailProps { @@ -19,7 +18,7 @@ interface MsgLockAndSuperfluidDelegateDetailProps { msgIndex: number; msg: MsgLockAndSuperfluidDelegateDetails; pool: PoolDetail; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } @@ -39,7 +38,11 @@ export const MsgLockAndSuperfluidDelegateDetail = ({ amount: "0", denom: poolDenom, }; - const poolAssetInfo = assetInfos?.[poolDenom]; + const poolToken = coinToTokenWithValue( + poolAsset.denom, + poolAsset.amount, + assetInfos + ); const { data: txData, isLoading: isTxDataLoading } = useTxData( txHash, @@ -91,8 +94,7 @@ export const MsgLockAndSuperfluidDelegateDetail = ({ poolId={pool.id} description="Bonded to" assetText="Bonded" - poolAsset={poolAsset} - poolAssetInfo={poolAssetInfo} + poolToken={poolToken} assetInfos={assetInfos} isOpened={isOpened} ampCopierSection={ampCopierSection} diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx index 91837c4fc..b5e6184e3 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx @@ -2,12 +2,13 @@ import { Flex } from "@chakra-ui/react"; import { MsgToken } from "lib/components/action-msg/MsgToken"; import { CustomIcon } from "lib/components/icon"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import type { AssetInfos, Option } from "lib/types"; +import { coinToTokenWithValue } from "lib/utils"; import type { MsgSwapExactAmountInDetails } from "lib/utils/tx/types"; interface MsgSwapExactAmountInActionProps { msg: MsgSwapExactAmountInDetails; - assetInfos: AssetInfosOpt; + assetInfos: Option; ampCopierSection?: string; } @@ -16,25 +17,29 @@ export const MsgSwapExactAmountInAction = ({ assetInfos, ampCopierSection, }: MsgSwapExactAmountInActionProps) => { - const inAssetInfo = assetInfos?.[msg.token_in.denom]; const tokenOutDenom = msg.routes[msg.routes.length - 1]?.tokenOutDenom ?? ""; - const outAssetInfo = assetInfos?.[tokenOutDenom]; + const inToken = coinToTokenWithValue( + msg.token_in.denom, + msg.token_in.amount, + assetInfos + ); + const outToken = coinToTokenWithValue( + tokenOutDenom, + msg.token_out_min_amount, + assetInfos + ); return ( Swap at least diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx index 26bcf50a5..52452763c 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx @@ -2,7 +2,7 @@ import { Box, Flex } from "@chakra-ui/react"; import { PoolInfoText } from "../components/PoolInfoText"; import { ExplorerLink } from "lib/components/ExplorerLink"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import type { AssetInfos, Option } from "lib/types"; import { extractMsgType } from "lib/utils"; import type { MsgSwapExactAmountInDetails } from "lib/utils/tx/types"; @@ -13,7 +13,7 @@ interface MsgSwapExactAmountInDetailProps { blockHeight: number; msgIndex: number; msg: MsgSwapExactAmountInDetails; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx index 9a8681652..52f140be8 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx @@ -2,12 +2,13 @@ import { Flex } from "@chakra-ui/react"; import { MsgToken } from "lib/components/action-msg/MsgToken"; import { CustomIcon } from "lib/components/icon"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import type { AssetInfos, Option } from "lib/types"; +import { coinToTokenWithValue } from "lib/utils"; import type { MsgSwapExactAmountOutDetails } from "lib/utils/tx/types"; interface MsgSwapExactAmountOutActionProps { msg: MsgSwapExactAmountOutDetails; - assetInfos: AssetInfosOpt; + assetInfos: Option; ampCopierSection?: string; } @@ -17,23 +18,27 @@ export const MsgSwapExactAmountOutAction = ({ ampCopierSection, }: MsgSwapExactAmountOutActionProps) => { const tokenInDenom = msg.routes[0]?.tokenInDenom ?? ""; - const inAssetInfo = assetInfos?.[tokenInDenom]; - const outAssetInfo = assetInfos?.[msg.token_out.denom]; + const inToken = coinToTokenWithValue( + tokenInDenom, + msg.token_in_max_amount, + assetInfos + ); + const outToken = coinToTokenWithValue( + msg.token_out.denom, + msg.token_out.amount, + assetInfos + ); return ( Swap at most diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx index 1b98a0590..cfd729fa4 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx @@ -2,7 +2,7 @@ import { Box, Flex } from "@chakra-ui/react"; import { PoolInfoText } from "../components/PoolInfoText"; import { ExplorerLink } from "lib/components/ExplorerLink"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import type { AssetInfos, Option } from "lib/types"; import { extractMsgType } from "lib/utils"; import type { MsgSwapExactAmountOutDetails } from "lib/utils/tx/types"; @@ -13,7 +13,7 @@ interface MsgSwapExactAmountOutDetailProps { blockHeight: number; msgIndex: number; msg: MsgSwapExactAmountOutDetails; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx index 8b42b1c1e..23c1be5bc 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx @@ -5,15 +5,14 @@ import { ExplorerLink } from "lib/components/ExplorerLink"; import { Loading } from "lib/components/Loading"; import { EmptyState } from "lib/components/state"; import { PoolLogo } from "lib/pages/pools/components/PoolLogo"; -import type { AssetInfosOpt } from "lib/services/assetService"; import { usePoolAssetsbyPoolIds } from "lib/services/poolService"; -import type { TokenWithValue } from "lib/types"; +import type { AssetInfos, Option, TokenWithValue } from "lib/types"; import { coinToTokenWithValue, getTokenLabel } from "lib/utils"; import type { MsgSwapExactAmountInDetails } from "lib/utils/tx/types"; interface PoolRouteProps { routes: MsgSwapExactAmountInDetails["routes"]; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx index 2d1bbeddc..e5cf36dbb 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx @@ -4,14 +4,14 @@ import { AssetCard } from "../../components"; import { CustomIcon } from "lib/components/icon"; import { Loading } from "lib/components/Loading"; import { EmptyState } from "lib/components/state"; -import type { AssetInfosOpt } from "lib/services/assetService"; import { useTxData } from "lib/services/txService"; +import type { AssetInfos, Option } from "lib/types"; import { coinsFromStr } from "lib/utils"; interface PoolSwapInterface { txHash: string; msgIndex: number; - assetInfos: AssetInfosOpt; + assetInfos: Option; isOpened: boolean; ampCopierSection?: string; } diff --git a/src/lib/pages/tx-details/components/MessageSection.tsx b/src/lib/pages/tx-details/components/MessageSection.tsx index 55b1ec3ce..375f07822 100644 --- a/src/lib/pages/tx-details/components/MessageSection.tsx +++ b/src/lib/pages/tx-details/components/MessageSection.tsx @@ -7,17 +7,15 @@ import { } from "@chakra-ui/react"; import { CustomIcon } from "lib/components/icon"; -import type { AssetInfosOpt } from "lib/services/assetService"; import type { TxData } from "lib/services/txService"; import { TxMessage } from "./tx-message"; interface MessageSectionProps { txData: TxData; - assetInfos: AssetInfosOpt; } -export const MessageSection = ({ txData, assetInfos }: MessageSectionProps) => { +export const MessageSection = ({ txData }: MessageSectionProps) => { const msgs = txData.tx.body.messages; return ( @@ -49,7 +47,6 @@ export const MessageSection = ({ txData, assetInfos }: MessageSectionProps) => { msgBody={msg} log={msgLog} isSingleMsg={msgs.length === 1} - assetInfos={assetInfos} /> ); })} diff --git a/src/lib/pages/tx-details/components/TxInfo.tsx b/src/lib/pages/tx-details/components/TxInfo.tsx index 9ce4a19e0..a64b79e81 100644 --- a/src/lib/pages/tx-details/components/TxInfo.tsx +++ b/src/lib/pages/tx-details/components/TxInfo.tsx @@ -3,13 +3,17 @@ import { Text, chakra, Flex } from "@chakra-ui/react"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { LabelText } from "lib/components/LabelText"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import { useAssetInfos } from "lib/services/assetService"; +import { useMovePoolInfos } from "lib/services/move"; import type { TxData } from "lib/services/txService"; -import { formatBalanceWithDenom, formatInteger } from "lib/utils"; +import { + coinToTokenWithValue, + formatInteger, + formatTokenWithValue, +} from "lib/utils"; interface TxInfoProps extends FlexProps { txData: TxData; - assetInfos: AssetInfosOpt; } const Container = chakra(Flex, { @@ -21,9 +25,23 @@ const Container = chakra(Flex, { }, }); -export const TxInfo = ({ txData, assetInfos, ...flexProps }: TxInfoProps) => { +export const TxInfo = ({ txData, ...flexProps }: TxInfoProps) => { + const { data: assetInfos } = useAssetInfos({ + withPrices: true, + }); + const { data: movePoolInfos } = useMovePoolInfos({ + withPrices: true, + }); + const feeCoin = txData.tx.auth_info.fee?.amount[0]; - const assetInfo = feeCoin ? assetInfos?.[feeCoin.denom] : undefined; + const feeToken = feeCoin + ? coinToTokenWithValue( + feeCoin.denom, + feeCoin.amount, + assetInfos, + movePoolInfos + ) + : undefined; return ( {txData.chainId} @@ -36,12 +54,8 @@ export const TxInfo = ({ txData, assetInfos, ...flexProps }: TxInfoProps) => { /> - {feeCoin ? ( - formatBalanceWithDenom({ - coin: feeCoin, - symbol: assetInfo?.symbol, - precision: assetInfo?.precision, - }) + {feeToken ? ( + formatTokenWithValue(feeToken) ) : ( No Fee diff --git a/src/lib/pages/tx-details/components/TxInfoMobile.tsx b/src/lib/pages/tx-details/components/TxInfoMobile.tsx index 9fe4e395a..251f30f0e 100644 --- a/src/lib/pages/tx-details/components/TxInfoMobile.tsx +++ b/src/lib/pages/tx-details/components/TxInfoMobile.tsx @@ -3,13 +3,17 @@ import { Text, chakra, Flex } from "@chakra-ui/react"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { LabelText } from "lib/components/LabelText"; -import type { AssetInfosOpt } from "lib/services/assetService"; +import { useAssetInfos } from "lib/services/assetService"; +import { useMovePoolInfos } from "lib/services/move"; import type { TxData } from "lib/services/txService"; -import { formatBalanceWithDenom, formatInteger } from "lib/utils"; +import { + coinToTokenWithValue, + formatInteger, + formatTokenWithValue, +} from "lib/utils"; interface TxInfoMobileProps extends FlexProps { txData: TxData; - assetInfos: AssetInfosOpt; } const Container = chakra(Flex, { @@ -23,13 +27,23 @@ const Container = chakra(Flex, { }, }); -export const TxInfoMobile = ({ - txData, - assetInfos, - ...flexProps -}: TxInfoMobileProps) => { +export const TxInfoMobile = ({ txData, ...flexProps }: TxInfoMobileProps) => { + const { data: assetInfos } = useAssetInfos({ + withPrices: true, + }); + const { data: movePoolInfos } = useMovePoolInfos({ + withPrices: true, + }); + const feeCoin = txData.tx.auth_info.fee?.amount[0]; - const assetInfo = feeCoin ? assetInfos?.[feeCoin.denom] : undefined; + const feeToken = feeCoin + ? coinToTokenWithValue( + feeCoin.denom, + feeCoin.amount, + assetInfos, + movePoolInfos + ) + : undefined; return ( @@ -47,12 +61,8 @@ export const TxInfoMobile = ({ - {feeCoin ? ( - formatBalanceWithDenom({ - coin: feeCoin, - symbol: assetInfo?.symbol, - precision: assetInfo?.precision, - }) + {feeToken ? ( + formatTokenWithValue(feeToken) ) : ( No Fee diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx index e5dc3480e..7394a6577 100644 --- a/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx +++ b/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx @@ -13,13 +13,9 @@ interface TxMsgDetailsProps extends TxMsgData { isExpand: boolean; } -export const TxMsgDetails = ({ - isExpand, - assetInfos, - ...txMsgData -}: TxMsgDetailsProps) => { +export const TxMsgDetails = ({ isExpand, ...txMsgData }: TxMsgDetailsProps) => { const getAddressType = useGetAddressType(); - const receipts = generateReceipts(txMsgData, getAddressType, assetInfos) + const receipts = generateReceipts(txMsgData, getAddressType) .concat( txMsgData.log && { title: plur("Event Log", txMsgData.log.events.length), diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx index 782cd77c7..394a29701 100644 --- a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx +++ b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx @@ -9,9 +9,16 @@ import { useGetAddressType, useMobile } from "lib/app-provider"; import { ExplorerLink } from "lib/components/ExplorerLink"; import type { IconKeys } from "lib/components/icon"; import { CustomIcon } from "lib/components/icon"; +import { useAssetInfos } from "lib/services/assetService"; +import { useMovePoolInfos } from "lib/services/move"; import type { BechAddr } from "lib/types"; import type { VoteOption } from "lib/utils"; -import { extractMsgType, formatBalanceWithDenom, voteOption } from "lib/utils"; +import { + coinToTokenWithValue, + extractMsgType, + formatTokenWithValue, + voteOption, +} from "lib/utils"; import type { TxMsgData } from "."; @@ -25,11 +32,12 @@ export const TxMsgExpand = ({ log, isExpand, isSingleMsg, - assetInfos, onClick, }: TxMsgExpandProps) => { const isMobile = useMobile(); const getAddressType = useGetAddressType(); + const { data: assetInfos } = useAssetInfos({ withPrices: false }); + const { data: movePoolInfos } = useMovePoolInfos({ withPrices: false }); const { "@type": type, ...body } = msgBody; const isIBC = @@ -197,15 +205,14 @@ export const TxMsgExpand = ({ { const toAddress = body.to_address as BechAddr; const singleCoin = body.amount[0] as Coin; - const assetInfo = assetInfos?.[singleCoin.denom]; + const singleToken = coinToTokenWithValue( + singleCoin.denom, + singleCoin.amount, + assetInfos, + movePoolInfos + ); const assetText = - body.amount.length > 1 - ? "assets" - : formatBalanceWithDenom({ - coin: singleCoin, - symbol: assetInfo?.symbol, - precision: assetInfo?.precision, - }); + body.amount.length > 1 ? "assets" : formatTokenWithValue(singleToken); msgIcon = "send"; content = ( diff --git a/src/lib/pages/tx-details/components/tx-message/index.tsx b/src/lib/pages/tx-details/components/tx-message/index.tsx index d68294600..448c2cab5 100644 --- a/src/lib/pages/tx-details/components/tx-message/index.tsx +++ b/src/lib/pages/tx-details/components/tx-message/index.tsx @@ -2,7 +2,6 @@ import { Flex } from "@chakra-ui/react"; import type { logs } from "@cosmjs/stargate"; import { useState } from "react"; -import type { AssetInfosOpt } from "lib/services/assetService"; import type { MsgBody } from "lib/services/tx"; import type { Option } from "lib/types"; @@ -13,7 +12,6 @@ export interface TxMsgData { msgBody: MsgBody; log: Option; isSingleMsg?: boolean; - assetInfos: AssetInfosOpt; } export const TxMessage = ({ isSingleMsg, ...txMsgData }: TxMsgData) => { diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinsComponent.tsx similarity index 58% rename from src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx rename to src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinsComponent.tsx index 2436b7dac..41dfffcfd 100644 --- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx +++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinsComponent.tsx @@ -1,6 +1,5 @@ import { Flex, Grid } from "@chakra-ui/react"; import type { Coin } from "@cosmjs/stargate"; -import { isUndefined } from "lodash"; import { useState } from "react"; import { trackUseExpand } from "lib/amplitude"; @@ -8,28 +7,29 @@ import { useMobile } from "lib/app-provider"; import { ShowMoreButton } from "lib/components/button"; import { UnsupportedTokensModal } from "lib/components/modal/UnsupportedTokensModal"; import { TokenCard } from "lib/components/token/TokenCard"; -import type { AssetInfo, Option } from "lib/types"; +import { useAssetInfos } from "lib/services/assetService"; +import { useMovePoolInfos } from "lib/services/move"; import { coinToTokenWithValue, filterSupportedTokens } from "lib/utils"; -type AssetObject = { [key: string]: AssetInfo }; - -interface CoinComponentProps< - T extends Coin | Coin[], - A extends Option | AssetObject, -> { - amount: T; - assetInfos: A; +interface CoinsComponentProps { + coins: Coin[]; } -const MultiCoin = ({ - amount, - assetInfos, -}: CoinComponentProps) => { +export const CoinsComponent = ({ coins }: CoinsComponentProps) => { const isMobile = useMobile(); + const { data: assetInfos } = useAssetInfos({ + withPrices: true, + }); + const { data: movePoolInfos } = useMovePoolInfos({ + withPrices: true, + }); const [showMore, setShowMore] = useState(false); - const tokens = amount.map((coin) => - coinToTokenWithValue(coin.denom, coin.amount, assetInfos) + if (!coins.length) return <>No assets; + if (!assetInfos) return <>{JSON.stringify(coins)}; + + const tokens = coins.map((coin) => + coinToTokenWithValue(coin.denom, coin.amount, assetInfos, movePoolInfos) ); const { supportedTokens, unsupportedTokens } = filterSupportedTokens(tokens); const hasSupportedTokens = supportedTokens.length > 0; @@ -72,36 +72,3 @@ const MultiCoin = ({ ); }; - -const SingleCoin = ({ - amount, - assetInfos, -}: CoinComponentProps) => { - const token = coinToTokenWithValue(amount.denom, amount.amount, assetInfos); - return !isUndefined(token.price) ? ( - - ) : ( - - ); -}; - -export const CoinComponent = ({ - amount, - assetInfos, -}: CoinComponentProps>) => { - if (!assetInfos || (Array.isArray(amount) && !amount.length)) - return <>{JSON.stringify(amount)}; - return Array.isArray(amount) ? ( - - ) : ( - - ); -}; diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx index aee416318..371290d1b 100644 --- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx +++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx @@ -9,7 +9,6 @@ import type { AddressReturnType } from "lib/app-provider"; import { CopyButton } from "lib/components/copy"; import { PermissionChip } from "lib/components/PermissionChip"; import { ViewPermissionAddresses } from "lib/components/ViewPermissionAddresses"; -import type { AssetInfosOpt } from "lib/services/assetService"; import type { TxReceipt, Option } from "lib/types"; import type { VoteOption } from "lib/utils"; import { @@ -20,6 +19,7 @@ import { extractMsgType, } from "lib/utils"; +import { CoinsComponent } from "./CoinsComponent"; import { attachFundsReceipt, channelIdReceipt, @@ -31,13 +31,11 @@ import { proposalIdReceipt, validatorAddrReceipt, getGenericValueEntry, - getCoinComponent, } from "./renderUtils"; export const generateReceipts = ( { msgBody, log }: Omit, - getAddressType: (address: string) => AddressReturnType, - assetInfos: AssetInfosOpt + getAddressType: (address: string) => AddressReturnType // eslint-disable-next-line sonarjs/cognitive-complexity ): Option[] => { const { "@type": type, ...body } = msgBody; @@ -151,7 +149,7 @@ export const generateReceipts = ( title: "Label", value: details.label, }, - attachFundsReceipt(details.funds, assetInfos), + attachFundsReceipt(details.funds), { title: "Instantiate Message", html: getCommonReceiptHtml({ @@ -201,7 +199,7 @@ export const generateReceipts = ( title: "Label", value: details.label, }, - attachFundsReceipt(details.funds, assetInfos), + attachFundsReceipt(details.funds), { title: "Instantiate Message", html: getCommonReceiptHtml({ @@ -238,7 +236,7 @@ export const generateReceipts = ( linkType: "contract_address", }), }, - attachFundsReceipt(details.funds, assetInfos), + attachFundsReceipt(details.funds), { title: "Execute Message", html: getCommonReceiptHtml({ @@ -356,7 +354,7 @@ export const generateReceipts = ( }, { title: "Amount", - html: getCoinComponent(details.amount, assetInfos), + html: , }, ]; } @@ -509,7 +507,7 @@ export const generateReceipts = ( return [ { title: "Amount", - html: getCoinComponent(details.amount, assetInfos), + html: , }, { title: "Depositor", @@ -598,7 +596,7 @@ export const generateReceipts = ( return [ { title: "Initial Deposit", - html: getCoinComponent(details.initial_deposit, assetInfos), + html: , }, { title: "Proposer", @@ -678,7 +676,7 @@ export const generateReceipts = ( }, { title: "Amount", - html: getCoinComponent(details.amount, assetInfos), + html: , }, ]; } @@ -723,7 +721,7 @@ export const generateReceipts = ( }, { title: "Value", - html: getCoinComponent(details.value, assetInfos), + html: , }, ]; } @@ -759,7 +757,7 @@ export const generateReceipts = ( validatorAddrReceipt(details.validator_address), { title: "Amount", - html: getCoinComponent(details.amount, assetInfos), + html: , }, ]; } @@ -788,7 +786,7 @@ export const generateReceipts = ( }, { title: "Amount", - html: getCoinComponent(details.amount, assetInfos), + html: , }, ]; } @@ -806,7 +804,7 @@ export const generateReceipts = ( }, { title: "Token", - html: getCoinComponent(details.token, assetInfos), + html: , }, { title: "Sender", @@ -1434,7 +1432,7 @@ export const generateReceipts = ( }, { title: "Initial Pool Liquidity", - html: getCoinComponent(details.initial_pool_liquidity, assetInfos), + html: , }, { title: "Scaling Factors", @@ -1498,7 +1496,7 @@ export const generateReceipts = ( }, { title: "Token In Maxs", - html: getCoinComponent(details.token_in_maxs, assetInfos), + html: , }, ]; } @@ -1523,7 +1521,7 @@ export const generateReceipts = ( }, { title: "Token Out Mins", - html: getCoinComponent(details.token_out_mins, assetInfos), + html: , }, ]; } @@ -1548,7 +1546,7 @@ export const generateReceipts = ( }, { title: "Token In", - html: getCoinComponent(details.token_in, assetInfos), + html: , }, { title: "Token Out Min Amount", @@ -1581,7 +1579,7 @@ export const generateReceipts = ( }, { title: "Token Out", - html: getCoinComponent(details.token_out, assetInfos), + html: , }, ]; } @@ -1602,7 +1600,7 @@ export const generateReceipts = ( }, { title: "Token In", - html: getCoinComponent(details.token_in, assetInfos), + html: , }, { title: "Share Out Min Amount", @@ -1685,7 +1683,7 @@ export const generateReceipts = ( }, { title: "Token Out", - html: getCoinComponent(details.token_out, assetInfos), + html: , }, { title: "Share In Max Amount", @@ -1718,7 +1716,7 @@ export const generateReceipts = ( }, { title: "Coins", - html: getCoinComponent(details.coins, assetInfos), + html: , }, { title: "Start Time", @@ -1747,7 +1745,7 @@ export const generateReceipts = ( }, { title: "Rewards", - html: getCoinComponent(details.rewards, assetInfos), + html: , }, ]; } @@ -1769,7 +1767,7 @@ export const generateReceipts = ( }, { title: "Coin", - html: getCoinComponent(details.coins, assetInfos), + html: , }, ]; } @@ -1804,7 +1802,7 @@ export const generateReceipts = ( }, details.coins && { title: "Coins", - html: getCoinComponent(details.coins, assetInfos), + html: , }, ]; } @@ -1880,7 +1878,7 @@ export const generateReceipts = ( }, { title: "Coins", - html: getCoinComponent(details.coins, assetInfos), + html: , }, validatorAddrReceipt(details.val_addr), ]; @@ -1919,7 +1917,7 @@ export const generateReceipts = ( }, { title: "Coin", - html: getCoinComponent(details.coin, assetInfos), + html: , }, ]; } @@ -1955,7 +1953,7 @@ export const generateReceipts = ( }, { title: "Amount", - html: getCoinComponent(details.amount, assetInfos), + html: , }, ]; } @@ -2136,7 +2134,7 @@ export const generateReceipts = ( }, { title: "Coin", - html: getCoinComponent(details.coin, assetInfos), + html: , }, ]; } diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx index 955d12410..4c54d28ec 100644 --- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx +++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx @@ -5,7 +5,6 @@ import type { AddressReturnType } from "lib/app-provider"; import type { LinkType } from "lib/components/ExplorerLink"; import { ExplorerLink } from "lib/components/ExplorerLink"; import JsonReadOnly from "lib/components/json/JsonReadOnly"; -import type { AssetInfosOpt } from "lib/services/assetService"; import type { BechAddr, Nullable, @@ -15,7 +14,7 @@ import type { } from "lib/types"; import { convertToTitle } from "lib/utils"; -import { CoinComponent } from "./CoinComponent"; +import { CoinsComponent } from "./CoinsComponent"; type HtmlType = "json" | "explorer"; @@ -77,11 +76,6 @@ export const getCommonReceiptHtml = ({ } }; -export const getCoinComponent = ( - amount: Coin | Coin[], - assetInfos: AssetInfosOpt -) => ; - export const getGenericValueEntry = ( [title, value]: [string, string | object], getAddressType: (address: string) => AddressReturnType @@ -114,13 +108,10 @@ export const getGenericValueEntry = ( return { title: convertToTitle(title), ...valueObj }; }; -export const attachFundsReceipt = ( - value: Option, - assetInfos: AssetInfosOpt -): TxReceipt => ({ +export const attachFundsReceipt = (value: Option): TxReceipt => ({ title: "Attached Funds", html: value?.length ? ( - getCoinComponent(value, assetInfos) + ) : ( No Attached Funds diff --git a/src/lib/pages/tx-details/index.tsx b/src/lib/pages/tx-details/index.tsx index 447706eff..cd49baa3e 100644 --- a/src/lib/pages/tx-details/index.tsx +++ b/src/lib/pages/tx-details/index.tsx @@ -8,7 +8,6 @@ import { Breadcrumb } from "lib/components/Breadcrumb"; import { Loading } from "lib/components/Loading"; import PageContainer from "lib/components/PageContainer"; import { EmptyState } from "lib/components/state/EmptyState"; -import { useAssetInfos } from "lib/services/assetService"; import { useTxData } from "lib/services/txService"; import { getFirstQueryParam, truncate } from "lib/utils"; @@ -24,9 +23,6 @@ const TxDetails = () => { isLoading: txLoading, isFetching: txFetching, } = useTxData(hashParam); - const { data: assetInfos, isLoading: assetLoading } = useAssetInfos({ - withPrices: true, - }); useEffect(() => { if (router.isReady && !(txLoading && txFetching)) { @@ -42,8 +38,7 @@ const TxDetails = () => { } }, [router.isReady, txData, txLoading, txFetching]); - if ((txLoading && txFetching) || assetLoading || !hashParam) - return ; + if ((txLoading && txFetching) || !hashParam) return ; return ( @@ -56,10 +51,10 @@ const TxDetails = () => { {txData ? ( <> - {isMobile && } + {isMobile && } - {!isMobile && } - + {!isMobile && } + ) : ( diff --git a/src/lib/services/assetService.ts b/src/lib/services/assetService.ts index 9310c4bef..efcbcae1b 100644 --- a/src/lib/services/assetService.ts +++ b/src/lib/services/assetService.ts @@ -3,13 +3,11 @@ import { useQuery } from "@tanstack/react-query"; import { CELATONE_QUERY_KEYS } from "lib/app-provider/env"; import { useBaseApiRoute } from "lib/app-provider/hooks/useBaseApiRoute"; import { getAssetInfos } from "lib/services/asset"; -import type { AssetInfo, Option } from "lib/types"; - -export type AssetInfosOpt = Option>; +import type { AssetInfos } from "lib/types"; export const useAssetInfos = ({ withPrices }: { withPrices: boolean }) => { const assetsApiRoute = useBaseApiRoute("assets"); - return useQuery( + return useQuery( [CELATONE_QUERY_KEYS.ASSET_INFOS, assetsApiRoute, withPrices], async () => getAssetInfos(assetsApiRoute, withPrices).then((assets) => diff --git a/src/lib/services/balanceService.ts b/src/lib/services/balanceService.ts index cbebb538c..130209737 100644 --- a/src/lib/services/balanceService.ts +++ b/src/lib/services/balanceService.ts @@ -39,7 +39,9 @@ export const useBalanceInfos = (address: BechAddr): BalanceInfos => { const { data: assetInfos, isLoading: isAssetInfosLoading } = useAssetInfos({ withPrices: true, }); - const { data: movePoolInfos } = useMovePoolInfos(); + const { data: movePoolInfos } = useMovePoolInfos({ + withPrices: true, + }); const { data: accountBalances, isLoading, error } = useBalances(address); const balances = accountBalances diff --git a/src/lib/services/move/poolService.ts b/src/lib/services/move/poolService.ts index 02e885ca8..765b53ee2 100644 --- a/src/lib/services/move/poolService.ts +++ b/src/lib/services/move/poolService.ts @@ -37,11 +37,11 @@ const computePricePerPShare = ( return calculateAssetValue(amountBPerShare, priceB as USD) .times(totalWeight.div(weightB)) .times(multiplier) as USD; + return undefined; }; -// TODO: add withPrices option -export const useMovePoolInfos = () => { +export const useMovePoolInfos = ({ withPrices }: { withPrices: boolean }) => { const moveConfig = useMoveConfig({ shouldRedirect: false }); const moveEndpoint = useBaseApiRoute("move"); @@ -49,7 +49,7 @@ export const useMovePoolInfos = () => { data: assetInfos, isLoading: isAssetsLoading, error: assetsErrors, - } = useAssetInfos({ withPrices: true }); + } = useAssetInfos({ withPrices }); const { data: pools, isFetching: isPoolsFetching, diff --git a/src/lib/services/proposalService.ts b/src/lib/services/proposalService.ts index 07b1cc1cc..f25286085 100644 --- a/src/lib/services/proposalService.ts +++ b/src/lib/services/proposalService.ts @@ -1,5 +1,6 @@ import type { UseQueryResult } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query"; +import type { Big } from "big.js"; import big from "big.js"; import { useCallback } from "react"; @@ -28,8 +29,9 @@ import type { BechAddr, } from "lib/types"; import { + coinToTokenWithValue, deexponentify, - formatBalanceWithDenom, + formatTokenWithValue, getTokenLabel, parseDate, parseProposalStatus, @@ -37,6 +39,7 @@ import { import { useAssetInfos } from "./assetService"; import { useProposalListExpression } from "./expression"; +import { useMovePoolInfos } from "./move"; import type { DepositParamsInternal, ProposalsResponse, @@ -273,7 +276,7 @@ export const useProposalTypes = (): UseQueryResult => { }; export interface MinDeposit { - amount: U; + amount: U>; denom: string; formattedAmount: Token; formattedDenom: string; @@ -297,6 +300,8 @@ export const useGovParams = (): UseQueryResult => { const lcdEndpoint = useBaseApiRoute("rest"); const cosmwasmEndpoint = useBaseApiRoute("cosmwasm"); const { data: assetInfos } = useAssetInfos({ withPrices: false }); + const { data: movePoolInfos } = useMovePoolInfos({ withPrices: false }); + const queryFn = useCallback( () => Promise.all([ @@ -305,28 +310,30 @@ export const useGovParams = (): UseQueryResult => { fetchGovVotingParams(lcdEndpoint), ]).then((params) => { const minDepositParam = params[0].minDeposit[0]; - const assetInfo = assetInfos?.[minDepositParam.denom]; - const [minDepositAmount, minDepositDenom] = [ - deexponentify( - minDepositParam.amount as U, - assetInfo?.precision - ).toFixed(), - getTokenLabel(minDepositParam.denom, assetInfo?.symbol), - ]; + const minDepositToken = coinToTokenWithValue( + minDepositParam.denom, + minDepositParam.amount, + assetInfos, + movePoolInfos + ); + const minDepositAmount = deexponentify( + minDepositToken.amount, + minDepositToken.precision + ).toFixed() as Token; + return { depositParams: { ...params[0], minDeposit: { ...minDepositParam, - amount: minDepositParam.amount as U, - formattedAmount: minDepositAmount as Token, - formattedDenom: minDepositDenom, - formattedToken: formatBalanceWithDenom({ - coin: minDepositParam, - precision: assetInfo?.precision, - symbol: assetInfo?.symbol, - }), - precision: assetInfo?.precision ?? 0, + amount: minDepositToken.amount, + formattedAmount: minDepositAmount, + formattedDenom: getTokenLabel( + minDepositToken.denom, + minDepositToken.symbol + ), + formattedToken: formatTokenWithValue(minDepositToken), + precision: minDepositToken.precision ?? 0, }, minInitialDeposit: big(params[0].minInitialDepositRatio) .times(minDepositAmount) @@ -336,7 +343,7 @@ export const useGovParams = (): UseQueryResult => { votingParams: params[2], }; }), - [lcdEndpoint, cosmwasmEndpoint, assetInfos] + [assetInfos, cosmwasmEndpoint, lcdEndpoint, movePoolInfos] ); return useQuery( diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts index 479c65346..73a920854 100644 --- a/src/lib/types/asset.ts +++ b/src/lib/types/asset.ts @@ -16,6 +16,7 @@ export const zAssetInfo = z.object({ type: z.string(), }); export type AssetInfo = z.infer; +export type AssetInfos = Record; interface BaseTokenWithValue { denom: string; diff --git a/src/lib/utils/assetValue.test.ts b/src/lib/utils/assetValue.test.ts index f3a9e5f01..e7e84abf5 100644 --- a/src/lib/utils/assetValue.test.ts +++ b/src/lib/utils/assetValue.test.ts @@ -1,22 +1,55 @@ import big from "big.js"; import type Big from "big.js"; -import { - zHexAddr, - type AssetInfo, - type MovePoolInfos, - type Token, - type TokenWithValue, - type U, - type USD, +import { zHexAddr } from "lib/types"; +import type { + AssetInfos, + MovePoolInfos, + Token, + TokenWithValue, + U, + USD, } from "lib/types"; import { addTokenWithValue, coinToTokenWithValue, filterSupportedTokens, + isSupportedToken, } from "./assetValue"; +describe("isSupportedToken", () => { + test("supported token", () => { + expect( + isSupportedToken({ + isLPToken: false, + denom: "denom", + amount: big(100) as U>, + symbol: "", + logo: "", + precision: 6, + price: big(0) as USD, + value: big(0) as USD, + }) + ).toEqual(true); + }); + + test("unsupported token", () => { + expect( + isSupportedToken({ + isLPToken: false, + denom: "denom", + amount: big(100) as U>, + symbol: "", + logo: "", + precision: 6, + price: undefined, + value: undefined, + }) + ).toEqual(false); + }); +}); + describe("filterSupportedTokens", () => { const token1: TokenWithValue = { isLPToken: false, @@ -86,7 +119,7 @@ describe("coinToTokenWithValue", () => { amount: "100", }; - const assetInfos: Record = { + const assetInfos: AssetInfos = { uadenom: { coingecko: "", description: "", diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts index 985dc92d5..5fd89a2ee 100644 --- a/src/lib/utils/assetValue.ts +++ b/src/lib/utils/assetValue.ts @@ -2,8 +2,8 @@ import type { BigSource } from "big.js"; import big, { Big } from "big.js"; import { isUndefined } from "lodash"; -import type { AssetInfosOpt } from "lib/services/assetService"; import type { + AssetInfos, MovePoolInfos, Option, Token, @@ -19,13 +19,16 @@ export const calculateAssetValue = ( price: USD ): USD => big(amount).mul(price) as USD; +export const isSupportedToken = (token: TokenWithValue) => + !isUndefined(token.price); + export const filterSupportedTokens = (tokens: Option) => (tokens ?? []).reduce<{ supportedTokens: TokenWithValue[]; unsupportedTokens: TokenWithValue[]; }>( ({ supportedTokens, unsupportedTokens }, token) => { - if (!isUndefined(token.price)) supportedTokens.push(token); + if (isSupportedToken(token)) supportedTokens.push(token); else unsupportedTokens.push(token); return { supportedTokens, unsupportedTokens }; @@ -39,7 +42,7 @@ export const filterSupportedTokens = (tokens: Option) => export const coinToTokenWithValue = ( denom: string, amount: string, - assetInfos: AssetInfosOpt, + assetInfos: Option, poolInfos?: MovePoolInfos ): TokenWithValue => { const tokenAmount = big(amount) as U>; diff --git a/src/lib/utils/formatter/currency.format.ts b/src/lib/utils/formatter/currency.format.ts deleted file mode 100644 index 18e910938..000000000 --- a/src/lib/utils/formatter/currency.format.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { BigSource } from "big.js"; - -import type { Token, U } from "lib/types"; - -import { formatUTokenWithPrecision } from "./token"; - -export function formatToken( - amount: U>, - denom: string -): string { - if (denom[0] === "u") { - return formatUTokenWithPrecision(amount, 6); - } - return formatUTokenWithPrecision(amount, 0); -} diff --git a/src/lib/utils/formatter/formatBalanceWithDenom.ts b/src/lib/utils/formatter/formatBalanceWithDenom.ts deleted file mode 100644 index f917083dc..000000000 --- a/src/lib/utils/formatter/formatBalanceWithDenom.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { Coin } from "@cosmjs/stargate"; - -import type { Token, U } from "lib/types"; - -import { formatUTokenWithPrecision } from "./token"; -import { getTokenLabel } from "./tokenType"; - -interface FormatBalanceWithDenom { - coin: Coin; - symbol?: string; - precision?: number; - decimalPoints?: number; -} - -export const formatBalanceWithDenom = ({ - coin, - symbol, - precision, - decimalPoints, -}: FormatBalanceWithDenom) => - `${formatUTokenWithPrecision( - coin.amount as U, - precision || 0, - false, - decimalPoints - )} ${getTokenLabel(coin.denom, symbol)}`; diff --git a/src/lib/utils/formatter/formatTokenWithValue.ts b/src/lib/utils/formatter/formatTokenWithValue.ts new file mode 100644 index 000000000..d1e2980d1 --- /dev/null +++ b/src/lib/utils/formatter/formatTokenWithValue.ts @@ -0,0 +1,15 @@ +import type { TokenWithValue } from "lib/types"; + +import { formatUTokenWithPrecision } from "./token"; +import { getTokenLabel } from "./tokenType"; + +export const formatTokenWithValue = ( + token: TokenWithValue, + decimalPoints?: number +) => + `${formatUTokenWithPrecision( + token.amount, + token.precision ?? 0, + false, + decimalPoints + )} ${getTokenLabel(token.denom, token.symbol)}`; diff --git a/src/lib/utils/formatter/index.ts b/src/lib/utils/formatter/index.ts index cc5e9aa9f..6df8866f8 100644 --- a/src/lib/utils/formatter/index.ts +++ b/src/lib/utils/formatter/index.ts @@ -1,9 +1,8 @@ export * from "./currency"; -export * from "./currency.format"; export * from "./convertTitle"; export * from "./camelToSnake"; export * from "./snakeToCamel"; -export * from "./formatBalanceWithDenom"; +export * from "./formatTokenWithValue"; export * from "./percentage"; export * from "./tokenType"; export * from "./token"; diff --git a/src/lib/utils/tx/types.ts b/src/lib/utils/tx/types.ts index a28962883..9f15b437f 100644 --- a/src/lib/utils/tx/types.ts +++ b/src/lib/utils/tx/types.ts @@ -389,13 +389,13 @@ export interface MsgJoinPoolDetails extends MsgBaseDetails { sender: BechAddr; pool_id: string; share_out_amount: string; - token_in_maxs: Coin[]; + token_in_maxs: Option; } export interface MsgExitPoolDetails extends MsgBaseDetails { sender: BechAddr; pool_id: string; share_in_amount: string; - token_out_mins: Coin[]; + token_out_mins: Option; } export interface MsgSwapExactAmountInDetails extends MsgBaseDetails { sender: BechAddr;