From 64c8c2e4b04e683e1c04eab6f6a6d5ceb5ff3abc Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 2 Nov 2023 17:57:50 +0700 Subject: [PATCH 1/3] fix: single delegation zero state --- CHANGELOG.md | 1 + .../delegations/total-card/SingleBondCard.tsx | 45 ---------------- .../delegations/total-card/index.tsx | 24 ++------- .../single-bond-card/SingleBondCardBody.tsx | 52 +++++++++++++++++++ .../SingleBondCardBodyMulti.tsx} | 20 ++++--- .../SingleBondCardBodySingle.tsx | 43 +++++++++++++++ .../total-card/single-bond-card/index.tsx | 40 ++++++++++++++ src/lib/pages/account-details/data.ts | 7 +-- src/lib/pages/account-details/types.ts | 1 + 9 files changed, 155 insertions(+), 78 deletions(-) delete mode 100644 src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx create mode 100644 src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx rename src/lib/pages/account-details/components/delegations/total-card/{SingleBondMultiAssetsCard.tsx => single-bond-card/SingleBondCardBodyMulti.tsx} (73%) create mode 100644 src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx create mode 100644 src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx 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/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..243b64ef1 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 @@ -5,8 +5,7 @@ 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; @@ -23,7 +22,7 @@ export const TotalCard = ({ message, address, bondDenoms, - tokens = {}, + tokens, isLoading, isViewMore, }: TotalCardProps) => { @@ -37,29 +36,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)) + ) { + const bondToken = tokens[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..f69885f07 --- /dev/null +++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx @@ -0,0 +1,43 @@ +import { Flex, Heading, Text } from "@chakra-ui/react"; +import type Big from "big.js"; + +import { TokenImageRender } from "lib/components/token"; +import type { Option, Token, U, USD } from "lib/types"; +import { + formatPrice, + formatUTokenWithPrecision, + getTokenLabel, +} from "lib/utils"; + +interface SingleBondCardBodySingleProps { + denom: string; + amount: U>; + symbol: Option; + logo: Option; + precision: Option; + value: Option>; +} + +export const SingleBondCardBodySingle = ({ + denom, + amount, + symbol, + logo, + precision, + value, +}: SingleBondCardBodySingleProps) => ( + <> + + + {formatUTokenWithPrecision(amount, precision ?? 0)} + + + {getTokenLabel(denom, symbol)} + + + + + ({value ? formatPrice(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..9302b8e20 --- /dev/null +++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx @@ -0,0 +1,40 @@ +import { Flex, Heading } from "@chakra-ui/react"; + +import { TotalCardTop } from "../TotalCardTop"; +import type { DenomInfo } from "lib/pages/account-details/types"; +import type { Addr, Option, TokenWithValue } from "lib/types"; + +import { SingleBondCardBody } from "./SingleBondCardBody"; + +interface SingleBondCardProps { + title: string; + message: string; + address: Addr; + bondDenom: DenomInfo; + 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..9bf70a2cd 100644 --- a/src/lib/pages/account-details/data.ts +++ b/src/lib/pages/account-details/data.ts @@ -296,9 +296,10 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => { ...rawStakingParams, bondDenoms: rawStakingParams.bondDenoms.map((denom) => ({ denom, - symbol: assetInfos[denom]?.symbol, - logo: assetInfos[denom]?.logo, - precision: assetInfos[denom]?.precision, + symbol: assetInfos[denom]?.symbol ?? lpMap?.[denom].symbol, + logo: assetInfos[denom]?.logo ?? lpMap?.[denom].image, + precision: assetInfos[denom]?.precision ?? lpMap?.[denom].precision, + price: assetInfos[denom]?.price ?? lpMap?.[denom].lpPricePerShare, })), }; diff --git a/src/lib/pages/account-details/types.ts b/src/lib/pages/account-details/types.ts index 53623466e..0cd7d971d 100644 --- a/src/lib/pages/account-details/types.ts +++ b/src/lib/pages/account-details/types.ts @@ -12,6 +12,7 @@ export interface DenomInfo { symbol?: string; logo?: string | string[]; precision?: number; + price?: number; } export interface NonRedelegatable { From c4149571cb205c3419afdf0d62d2c490d6c092c5 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 2 Nov 2023 18:16:50 +0700 Subject: [PATCH 2/3] fix: remove denom info --- .../delegations/DelegationsBody.tsx | 3 +-- .../delegations/radio-card/index.tsx | 15 +++-------- .../delegations/total-card/index.tsx | 3 +-- .../single-bond-card/SingleBondCardBody.tsx | 20 +++------------ .../SingleBondCardBodySingle.tsx | 25 ++++++------------- .../total-card/single-bond-card/index.tsx | 3 +-- src/lib/pages/account-details/data.ts | 14 ++++------- src/lib/pages/account-details/types.ts | 8 ------ 8 files changed, 21 insertions(+), 70 deletions(-) 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/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/index.tsx index 243b64ef1..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,6 +1,5 @@ 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"; @@ -11,7 +10,7 @@ export interface TotalCardProps { title: string; message: string; address: Addr; - bondDenoms: DenomInfo[]; + bondDenoms: TokenWithValue[]; tokens: Option>; isLoading: boolean; isViewMore: boolean; diff --git a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx index 1166a5faf..dced70c8b 100644 --- a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx +++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx @@ -1,6 +1,3 @@ -import big from "big.js"; - -import type { DenomInfo } from "lib/pages/account-details/types"; import type { Addr, TokenWithValue } from "lib/types"; import { SingleBondCardBodyMulti } from "./SingleBondCardBodyMulti"; @@ -10,7 +7,7 @@ interface SingleBondCardBodyProps { title: string; message: string; address: Addr; - bondDenom: DenomInfo; + bondDenom: TokenWithValue; tokens: Record; } @@ -25,21 +22,10 @@ export const SingleBondCardBody = ({ if ( denoms.length === 0 || (denoms.length === 1 && denoms.includes(bondDenom.denom)) - ) { - const bondToken = tokens[bondDenom.denom]; + ) return ( - + ); - } return ( >; - symbol: Option; - logo: Option; - precision: Option; - value: Option>; + token: TokenWithValue; } export const SingleBondCardBodySingle = ({ - denom, - amount, - symbol, - logo, - precision, - value, + token, }: SingleBondCardBodySingleProps) => ( <> - {formatUTokenWithPrecision(amount, precision ?? 0)} + {formatUTokenWithPrecision(token.amount, token.precision ?? 0)} - {getTokenLabel(denom, symbol)} + {getTokenLabel(token.denom, token.symbol)} - + - ({value ? formatPrice(value) : "-"}) + ({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 index 9302b8e20..087f9467d 100644 --- 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 @@ -1,7 +1,6 @@ import { Flex, Heading } from "@chakra-ui/react"; import { TotalCardTop } from "../TotalCardTop"; -import type { DenomInfo } from "lib/pages/account-details/types"; import type { Addr, Option, TokenWithValue } from "lib/types"; import { SingleBondCardBody } from "./SingleBondCardBody"; @@ -10,7 +9,7 @@ interface SingleBondCardProps { title: string; message: string; address: Addr; - bondDenom: DenomInfo; + bondDenom: TokenWithValue; tokens: Option>; } diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts index 9bf70a2cd..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,13 +294,9 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => { if (rawStakingParams && assetInfos && validators) { data.stakingParams = { ...rawStakingParams, - bondDenoms: rawStakingParams.bondDenoms.map((denom) => ({ - denom, - symbol: assetInfos[denom]?.symbol ?? lpMap?.[denom].symbol, - logo: assetInfos[denom]?.logo ?? lpMap?.[denom].image, - precision: assetInfos[denom]?.precision ?? lpMap?.[denom].precision, - price: assetInfos[denom]?.price ?? lpMap?.[denom].lpPricePerShare, - })), + 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 0cd7d971d..b6256a87f 100644 --- a/src/lib/pages/account-details/types.ts +++ b/src/lib/pages/account-details/types.ts @@ -7,14 +7,6 @@ import type { Unbonding, } from "./data"; -export interface DenomInfo { - denom: string; - symbol?: string; - logo?: string | string[]; - precision?: number; - price?: number; -} - export interface NonRedelegatable { dstValidator: ValidatorInfo; completionTime: Date; From d61e8aaec61b7dabf652268c94ffa356f49b41b6 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 2 Nov 2023 18:39:55 +0700 Subject: [PATCH 3/3] fix: refactor tokenwithvalue --- src/lib/types/asset.ts | 43 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 22 deletions(-) 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; + } + );