diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e0c619fa..a36d651f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -83,6 +83,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Bug fixes +- [#604](https://github.com/alleslabs/celatone-frontend/pull/604) Fix single delegation total card zero state - [#603](https://github.com/alleslabs/celatone-frontend/pull/603) Dynamically change returned data by isWasm, isMove - [#602](https://github.com/alleslabs/celatone-frontend/pull/602) Fix package version client error - [#599](https://github.com/alleslabs/celatone-frontend/pull/599) Fix getNavigationUrl to support move diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx index cf1a17fa4..01c616e7f 100644 --- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx +++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx @@ -2,7 +2,6 @@ import { Flex, RadioGroup, Stack } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; -import type { DenomInfo } from "../../types"; import { DelegationsTable, UnbondingsTable } from "../tables"; import { useTrack } from "lib/amplitude"; import type { Delegation, Unbonding } from "lib/pages/account-details/data"; @@ -18,7 +17,7 @@ interface DelegationsBodyProps { rewards: Option>; isLoadingDelegations: boolean; isLoadingUnbondings: boolean; - bondDenoms: DenomInfo[]; + bondDenoms: TokenWithValue[]; } export const DelegationsBody = ({ diff --git a/src/lib/pages/account-details/components/delegations/radio-card/index.tsx b/src/lib/pages/account-details/components/delegations/radio-card/index.tsx index 2ef492985..c63dbcbef 100644 --- a/src/lib/pages/account-details/components/delegations/radio-card/index.tsx +++ b/src/lib/pages/account-details/components/delegations/radio-card/index.tsx @@ -1,9 +1,6 @@ import { Radio } from "@chakra-ui/react"; -import type { Big } from "big.js"; -import big from "big.js"; -import type { DenomInfo } from "lib/pages/account-details/types"; -import type { Option, TokenWithValue, USD } from "lib/types"; +import type { Option, TokenWithValue } from "lib/types"; import { MultiBondsRadioCard } from "./MultiBondsRadioCard"; import { SingleBondRadioCard } from "./SingleBondRadioCard"; @@ -12,7 +9,7 @@ interface RadioCardProps { value: string; tokens: Option>; isLoading: boolean; - bondDenoms: DenomInfo[]; + bondDenoms: TokenWithValue[]; } export const RadioCard = ({ @@ -26,13 +23,7 @@ export const RadioCard = ({ , - } - : undefined + tokens ? tokens[bondDenoms[0].denom] ?? bondDenoms[0] : undefined } isLoading={isLoading} /> diff --git a/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx deleted file mode 100644 index 79941bf9c..000000000 --- a/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Flex, Heading, Text } from "@chakra-ui/react"; - -import { TokenImageRender } from "lib/components/token"; -import type { Option, TokenWithValue } from "lib/types"; -import { - formatPrice, - formatUTokenWithPrecision, - getTokenLabel, -} from "lib/utils"; - -import { TotalCardTop } from "./TotalCardTop"; - -interface SingleBondCardProps { - title: string; - message: string; - token: Option; -} - -export const SingleBondCard = ({ - title, - message, - token, -}: SingleBondCardProps) => ( - - - {!token ? ( - - N/A - - ) : ( - - - {formatUTokenWithPrecision(token.amount, token.precision ?? 0)} - - - {getTokenLabel(token.denom, token.symbol)} - - - - )} - - ({token?.value ? formatPrice(token.value) : "-"}) - - -); diff --git a/src/lib/pages/account-details/components/delegations/total-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/index.tsx index 8b360dcb0..ced0b9631 100644 --- a/src/lib/pages/account-details/components/delegations/total-card/index.tsx +++ b/src/lib/pages/account-details/components/delegations/total-card/index.tsx @@ -1,18 +1,16 @@ import { Box, Spinner } from "@chakra-ui/react"; -import type { DenomInfo } from "lib/pages/account-details/types"; import type { Addr, Option, TokenWithValue } from "lib/types"; import { MultiBondsCard } from "./MultiBondsCard"; import { OverviewCard } from "./OverviewCard"; -import { SingleBondCard } from "./SingleBondCard"; -import { SingleBondMultiAssetsCard } from "./SingleBondMultiAssetsCard"; +import { SingleBondCard } from "./single-bond-card"; export interface TotalCardProps { title: string; message: string; address: Addr; - bondDenoms: DenomInfo[]; + bondDenoms: TokenWithValue[]; tokens: Option>; isLoading: boolean; isViewMore: boolean; @@ -23,7 +21,7 @@ export const TotalCard = ({ message, address, bondDenoms, - tokens = {}, + tokens, isLoading, isViewMore, }: TotalCardProps) => { @@ -37,29 +35,16 @@ export const TotalCard = ({ if (isViewMore) return ; - if (bondDenoms.length === 1) { - const denoms = Object.keys(tokens); - const bondDenom = bondDenoms[0].denom; - if ( - denoms.length === 0 || - (denoms.length === 1 && denoms.includes(bondDenom)) - ) - return ( - - ); + if (bondDenoms.length === 1) return ( - ); - } return ( ; +} + +export const SingleBondCardBody = ({ + title, + message, + address, + bondDenom, + tokens, +}: SingleBondCardBodyProps) => { + const denoms = Object.keys(tokens); + if ( + denoms.length === 0 || + (denoms.length === 1 && denoms.includes(bondDenom.denom)) + ) + return ( + + ); + + return ( + + ); +}; diff --git a/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodyMulti.tsx similarity index 73% rename from src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx rename to src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodyMulti.tsx index 2b5ce4796..2815afde9 100644 --- a/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx +++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodyMulti.tsx @@ -1,32 +1,30 @@ import { Flex, Heading, Text, useDisclosure } from "@chakra-ui/react"; -import { Big } from "big.js"; +import big, { type Big } from "big.js"; +import { TotalCardModal } from "../TotalCardModal"; import { CustomIcon } from "lib/components/icon"; import type { Addr, TokenWithValue, USD } from "lib/types"; import { formatPrice, totalValueTokenWithValue } from "lib/utils"; -import { TotalCardModal } from "./TotalCardModal"; -import { TotalCardTop } from "./TotalCardTop"; - -interface SingleBondMultiAssetsCardProps { +interface SingleBondCardBodyMultiProps { title: string; message: string; address: Addr; tokens: Record; } -export const SingleBondMultiAssetsCard = ({ +export const SingleBondCardBodyMulti = ({ title, message, address, tokens, -}: SingleBondMultiAssetsCardProps) => { +}: SingleBondCardBodyMultiProps) => { const { isOpen, onOpen, onClose } = useDisclosure(); + return ( - - + <> - {formatPrice(totalValueTokenWithValue(tokens, Big(0) as USD))} + {formatPrice(totalValueTokenWithValue(tokens, big(0) as USD))} - + ); }; diff --git a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx new file mode 100644 index 000000000..46eee06f0 --- /dev/null +++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx @@ -0,0 +1,32 @@ +import { Flex, Heading, Text } from "@chakra-ui/react"; + +import { TokenImageRender } from "lib/components/token"; +import type { TokenWithValue } from "lib/types"; +import { + formatPrice, + formatUTokenWithPrecision, + getTokenLabel, +} from "lib/utils"; + +interface SingleBondCardBodySingleProps { + token: TokenWithValue; +} + +export const SingleBondCardBodySingle = ({ + token, +}: SingleBondCardBodySingleProps) => ( + <> + + + {formatUTokenWithPrecision(token.amount, token.precision ?? 0)} + + + {getTokenLabel(token.denom, token.symbol)} + + + + + ({token?.value ? formatPrice(token.value) : "-"}) + + +); diff --git a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx new file mode 100644 index 000000000..087f9467d --- /dev/null +++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx @@ -0,0 +1,39 @@ +import { Flex, Heading } from "@chakra-ui/react"; + +import { TotalCardTop } from "../TotalCardTop"; +import type { Addr, Option, TokenWithValue } from "lib/types"; + +import { SingleBondCardBody } from "./SingleBondCardBody"; + +interface SingleBondCardProps { + title: string; + message: string; + address: Addr; + bondDenom: TokenWithValue; + tokens: Option>; +} + +export const SingleBondCard = ({ + title, + message, + address, + bondDenom, + tokens, +}: SingleBondCardProps) => ( + + + {!tokens ? ( + + N/A + + ) : ( + + )} + +); diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts index 08dbbe515..ec96f3e4b 100644 --- a/src/lib/pages/account-details/data.ts +++ b/src/lib/pages/account-details/data.ts @@ -41,7 +41,7 @@ import { compareTokenWithValues, } from "lib/utils"; -import type { DenomInfo, UserDelegationsData } from "./types"; +import type { UserDelegationsData } from "./types"; interface AccountContracts { contracts: Option; @@ -62,7 +62,7 @@ interface AccountAssetInfos { } export interface StakingParams extends Omit { - bondDenoms: DenomInfo[]; + bondDenoms: TokenWithValue[]; } export interface Delegation { @@ -294,12 +294,9 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => { if (rawStakingParams && assetInfos && validators) { data.stakingParams = { ...rawStakingParams, - bondDenoms: rawStakingParams.bondDenoms.map((denom) => ({ - denom, - symbol: assetInfos[denom]?.symbol, - logo: assetInfos[denom]?.logo, - precision: assetInfos[denom]?.precision, - })), + bondDenoms: rawStakingParams.bondDenoms.map((denom) => + coinToTokenWithValue(denom, "0", assetInfos, lpMap) + ), }; data.isValidator = Object.keys(validators).includes( diff --git a/src/lib/pages/account-details/types.ts b/src/lib/pages/account-details/types.ts index 53623466e..b6256a87f 100644 --- a/src/lib/pages/account-details/types.ts +++ b/src/lib/pages/account-details/types.ts @@ -7,13 +7,6 @@ import type { Unbonding, } from "./data"; -export interface DenomInfo { - denom: string; - symbol?: string; - logo?: string | string[]; - precision?: number; -} - export interface NonRedelegatable { dstValidator: ValidatorInfo; completionTime: Date; diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts index b5b38bad9..e69a68f05 100644 --- a/src/lib/types/asset.ts +++ b/src/lib/types/asset.ts @@ -2,25 +2,24 @@ import type Big from "big.js"; import type { LPDetails, Option, Token, U, USD } from "lib/types"; -export type TokenWithValue = - | { - isLPToken: false; - denom: string; - amount: U>; - symbol: Option; - logo: Option; - precision: Option; - price: Option>; - value: Option>; - } - | { - isLPToken: true; - denom: string; - amount: U>; - symbol: Option; - logo: Option; - precision: Option; - price: Option>; - value: Option>; - lpDetails: LPDetails; - }; +interface BaseTokenWithValue { + denom: string; + amount: U>; + symbol: Option; + precision: Option; + price: Option>; + value: Option>; +} + +export type TokenWithValue = BaseTokenWithValue & + ( + | { + isLPToken: false; + logo: Option; + } + | { + isLPToken: true; + logo: Option; + lpDetails: LPDetails; + } + );