fix: single delegation zero state

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

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<Record<string, TokenWithValue[]>>;
   isLoadingDelegations: boolean;
   isLoadingUnbondings: boolean;
-  bondDenoms: DenomInfo[];
+  bondDenoms: TokenWithValue[];
 }
 
 export const DelegationsBody = ({

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<Record<string, TokenWithValue>>;
   isLoading: boolean;
-  bondDenoms: DenomInfo[];
+  bondDenoms: TokenWithValue[];
 }
 
 export const RadioCard = ({
@@ -26,13 +23,7 @@ export const RadioCard = ({
       <SingleBondRadioCard
         value={value}
         token={
-          tokens
-            ? Object.values(tokens)[0] ?? {
-                ...bondDenoms[0],
-                amount: 0,
-                value: big(0) as USD<Big>,
-              }
-            : undefined
+          tokens ? tokens[bondDenoms[0].denom] ?? bondDenoms[0] : undefined
         }
         isLoading={isLoading}
       />

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<Record<string, TokenWithValue>>;
   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 <OverviewCard title={title} message={message} tokens={tokens} />;
 
-  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 (
-        <SingleBondCard
-          title={title}
-          message={message}
-          token={tokens[bondDenom]}
-        />
-      );
+  if (bondDenoms.length === 1)
     return (
-      <SingleBondMultiAssetsCard
+      <SingleBondCard
         title={title}
         message={message}
         address={address}
+        bondDenom={bondDenoms[0]}
         tokens={tokens}
       />
     );
-  }
 
   return (
     <MultiBondsCard

src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx

@@ -0,0 +1,38 @@
+import type { Addr, TokenWithValue } from "lib/types";
+
+import { SingleBondCardBodyMulti } from "./SingleBondCardBodyMulti";
+import { SingleBondCardBodySingle } from "./SingleBondCardBodySingle";
+
+interface SingleBondCardBodyProps {
+  title: string;
+  message: string;
+  address: Addr;
+  bondDenom: TokenWithValue;
+  tokens: Record<string, TokenWithValue>;
+}
+
+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 (
+      <SingleBondCardBodySingle token={tokens[bondDenom.denom] ?? bondDenom} />
+    );
+
+  return (
+    <SingleBondCardBodyMulti
+      title={title}
+      message={message}
+      address={address}
+      tokens={tokens}
+    />
+  );
+};

src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx → 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<string, TokenWithValue>;
 }
 
-export const SingleBondMultiAssetsCard = ({
+export const SingleBondCardBodyMulti = ({
   title,
   message,
   address,
   tokens,
-}: SingleBondMultiAssetsCardProps) => {
+}: SingleBondCardBodyMultiProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
+
   return (
-    <Flex direction="column" minW="233px" gap={1}>
-      <TotalCardTop title={title} message={message} fontWeight={600} />
+    <>
       <Heading variant="h6" as="h6">
-        {formatPrice(totalValueTokenWithValue(tokens, Big(0) as USD<Big>))}
+        {formatPrice(totalValueTokenWithValue(tokens, big(0) as USD<Big>))}
       </Heading>
       <Flex
         gap={1}
@@ -56,6 +54,6 @@ export const SingleBondMultiAssetsCard = ({
         isOpen={isOpen}
         onClose={onClose}
       />
-    </Flex>
+    </>
   );
 };

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) => (
+  <>
+    <Flex alignItems="center" gap={1}>
+      <Heading variant="h6" as="h6">
+        {formatUTokenWithPrecision(token.amount, token.precision ?? 0)}
+      </Heading>
+      <Text variant="body1" textColor="text.main">
+        {getTokenLabel(token.denom, token.symbol)}
+      </Text>
+      <TokenImageRender logo={token.logo} boxSize={6} />
+    </Flex>
+    <Text variant="body2" textColor="text.dark">
+      ({token?.value ? formatPrice(token.value) : "-"})
+    </Text>
+  </>
+);

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<Record<string, TokenWithValue>>;
+}
+
+export const SingleBondCard = ({
+  title,
+  message,
+  address,
+  bondDenom,
+  tokens,
+}: SingleBondCardProps) => (
+  <Flex direction="column" minW="233px" gap={1}>
+    <TotalCardTop title={title} message={message} fontWeight={600} />
+    {!tokens ? (
+      <Heading variant="h6" as="h6">
+        N/A
+      </Heading>
+    ) : (
+      <SingleBondCardBody
+        title={title}
+        message={message}
+        address={address}
+        bondDenom={bondDenom}
+        tokens={tokens}
+      />
+    )}
+  </Flex>
+);

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<ContractInfo[]>;
@@ -62,7 +62,7 @@ interface AccountAssetInfos {
 }
 
 export interface StakingParams extends Omit<RawStakingParams, "bondDenoms"> {
-  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(

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;