Merge pull request #720 from alleslabs/feat/272-contract-delegation

Feat/cfe-272 contract delegation

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#720](https://github.com/alleslabs/celatone-frontend/pull/720) Add delegations for contract detail
 - [#684](https://github.com/alleslabs/celatone-frontend/pull/684) Add nft page
 - [#717](https://github.com/alleslabs/celatone-frontend/pull/717) Add total value for contract detail
 - [#711](https://github.com/alleslabs/celatone-frontend/pull/711) Refactor assetInfos and add movePoolInfos to tx details

src/lib/components/TotalValue.tsx

@@ -19,9 +19,9 @@ export const TotalValue = ({
     <Flex
       p={isCompact ? 3 : 4}
       direction="column"
-      border="2px solid"
+      border="1px solid"
       borderColor="gray.700"
-      borderRadius={4}
+      borderRadius={8}
     >
       <Text variant="body2" fontWeight={500} color="text.dark">
         {label}
@@ -36,8 +36,8 @@ export const TotalValue = ({
         />
       ) : (
         <Heading
-          as="h6"
-          variant="h6"
+          as="h5"
+          variant="h5"
           color={
             !totalAccountValue || totalAccountValue.eq(0)
               ? "text.disabled"

src/lib/components/ValidatorBadge.tsx

@@ -1,13 +1,13 @@
 import type { ImageProps } from "@chakra-ui/react";
 import { Spinner, Flex, Image, Text } from "@chakra-ui/react";
 
-import validatorDefaultImg from "../../../public/validator.svg";
 import { useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
-import { MobileLabel } from "lib/components/table";
 import { useValidatorImage } from "lib/services/validatorService";
 import type { Nullable, Validator } from "lib/types";
 
+import { MobileLabel } from "./table/MobileLabel";
+
 interface ValidatorBadgeProps {
   validator: Nullable<Validator>;
   badgeSize?: ImageProps["boxSize"];
@@ -55,7 +55,7 @@ export const ValidatorBadge = ({
               src={valImgSrc}
               alt={validator.moniker}
               borderRadius="50%"
-              fallbackSrc={validatorDefaultImg.src}
+              fallbackSrc="https://assets.alleslabs.dev/webapp-assets/placeholder/validator.svg"
               fallbackStrategy="beforeLoadOrError"
             />
           )}

src/lib/pages/account-details/components/delegations/DelegationInfo.tsx → src/lib/components/delegations/DelegationInfo.tsx

@@ -1,6 +1,7 @@
 import { Button, Flex, Heading } from "@chakra-ui/react";
 import type { MouseEventHandler } from "react";
 
+import { TableTitle } from "../table";
 import { AmpEvent, track } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
@@ -21,8 +22,8 @@ export const DelegationInfo = ({
   onViewMore,
 }: DelegationInfoProps) => {
   const isMobile = useMobile();
-
   const isMobileOverview = isMobile && !!onViewMore;
+
   return (
     <>
       {isMobileOverview ? (
@@ -43,16 +44,8 @@ export const DelegationInfo = ({
           <CustomIcon name="chevron-right" color="gray.600" />
         </Flex>
       ) : (
-        <Flex direction="column" gap={4}>
-          <Heading
-            variant="h6"
-            as="h6"
-            display="flex"
-            alignItems="center"
-            height={{ base: "29px", md: "auto" }}
-          >
-            Delegations
-          </Heading>
+        <Flex direction="column" gap={4} mt={{ base: 4, md: 0 }}>
+          <TableTitle title="Delegations" mb={0} showCount={false} />
           <Flex
             direction={{ base: "column", md: "row" }}
             alignItems={{ base: "start", md: "center" }}

src/lib/pages/account-details/components/delegations/DelegationsBody.tsx → src/lib/components/delegations/DelegationsBody.tsx

@@ -2,10 +2,9 @@ import { Flex, RadioGroup, Stack } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-import { DelegationsTable, UnbondingsTable } from "../tables";
+import { DelegationsTable, UnbondingsTable } from "../table";
 import { trackUseRadio } from "lib/amplitude";
-import type { Delegation, Unbonding } from "lib/pages/account-details/types";
-import type { Option, TokenWithValue } from "lib/types";
+import type { Delegation, Option, TokenWithValue, Unbonding } from "lib/types";
 
 import { RadioCard } from "./radio-card";
 

src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx → src/lib/components/delegations/NonRedelegatableSection.tsx

@@ -1,10 +1,7 @@
 import { Box, Text } from "@chakra-ui/react";
 
-import { NonRedelegatablesTable } from "../tables";
-import type {
-  Redelegation,
-  NonRedelegatable,
-} from "lib/pages/account-details/types";
+import { NonRedelegatablesTable } from "../table";
+import type { NonRedelegatable, Redelegation } from "lib/types";
 
 interface NonRedelegatableSectionProps {
   redelegations: Redelegation[];

src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx → src/lib/components/delegations/RedelegationsSection.tsx

@@ -1,14 +1,10 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Button, Flex } from "@chakra-ui/react";
 
-import { RedelegationsTable } from "../tables";
+import { RedelegationsTable, TableTitle } from "../table";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
-import { TableTitle } from "lib/components/table";
-import type {
-  Redelegation,
-  StakingParams,
-} from "lib/pages/account-details/types";
+import type { Redelegation, StakingParams } from "lib/types";
 
 import { NonRedelegatableSection } from "./NonRedelegatableSection";
 

src/lib/pages/account-details/components/delegations/index.tsx → src/lib/components/delegations/index.tsx

@@ -48,9 +48,9 @@ export const DelegationsSection = ({
   if (!stakingParams) return <ErrorFetching dataName="delegation data" />;
 
   const redelegationCount = redelegations?.length ?? 0;
+
   return (
     <Flex
-      mt={{ base: 4, md: 8 }}
       mb={{ base: 0, md: 8 }}
       position="relative"
       overflow="hidden"

src/lib/pages/account-details/components/tables/bonded/BondedTableHeader.tsx → src/lib/components/table/bonded/BondedTableHeader.tsx

@@ -1,7 +1,7 @@
 import type { GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
-import { TableHeader } from "lib/components/table";
+import { TableHeader } from "../tableComponents";
 
 export const BondedTableHeader = ({
   templateColumns,

src/lib/pages/account-details/components/tables/bonded/BondedTableMobileCard.tsx → src/lib/components/table/bonded/BondedTableMobileCard.tsx

@@ -1,7 +1,7 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { MobileLabel } from "lib/components/table";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import { ValidatorBadge } from "../../ValidatorBadge";
+import { MobileLabel } from "../MobileLabel";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import type { BondedInfo } from "./BondedTableRow";

src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx → src/lib/components/table/bonded/BondedTableRow.tsx

@@ -1,7 +1,7 @@
 import { Flex, Grid, Text } from "@chakra-ui/react";
 
-import { TableRow } from "lib/components/table";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import { ValidatorBadge } from "../../ValidatorBadge";
+import { TableRow } from "../tableComponents";
 import type { TokenWithValue, Validator } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 

src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx → src/lib/components/table/bonded/DelegationsTable.tsx

@@ -1,15 +1,11 @@
 import { Box } from "@chakra-ui/react";
 
+import { MobileTableContainer, TableContainer } from "../tableComponents";
+import { TableTitle } from "../TableTitle";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { ErrorFetching, EmptyState } from "lib/components/state";
-import {
-  MobileTableContainer,
-  TableContainer,
-  TableTitle,
-} from "lib/components/table";
-import type { Delegation } from "lib/pages/account-details/types";
-import type { Option, TokenWithValue } from "lib/types";
+import type { Delegation, Option, TokenWithValue } from "lib/types";
 
 import { BondedTableHeader } from "./BondedTableHeader";
 import { BondedTableMobileCard } from "./BondedTableMobileCard";

src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx → src/lib/components/table/bonded/UnbondingsTable.tsx

@@ -1,15 +1,11 @@
 import { Box } from "@chakra-ui/react";
 
+import { MobileTableContainer, TableContainer } from "../tableComponents";
+import { TableTitle } from "../TableTitle";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { EmptyState, ErrorFetching } from "lib/components/state";
-import {
-  MobileTableContainer,
-  TableContainer,
-  TableTitle,
-} from "lib/components/table";
-import type { Unbonding } from "lib/pages/account-details/types";
-import type { Option } from "lib/types";
+import type { Option, Unbonding } from "lib/types";
 
 import { BondedTableHeader } from "./BondedTableHeader";
 import { BondedTableMobileCard } from "./BondedTableMobileCard";

src/lib/components/table/index.ts

@@ -1,16 +1,20 @@
 export * from "./AccordionTx";
 export * from "./accounts";
+export * from "./bonded";
 export * from "./codes";
 export * from "./contracts";
 export * from "./mutate-events";
-export * from "./proposals";
 export * from "./transactions";
 export * from "./modules";
+export * from "./non-redelegatable";
+export * from "./proposals";
+export * from "./redelegation";
 export * from "./EditableCell";
 export * from "./MobileCardTemplate";
 export * from "./MobileLabel";
 export * from "./MobileTitle";
 export * from "./RemarkRender";
 export * from "./tableComponents";
 export * from "./TableTitle";
+export * from "./TokenCell";
 export * from "./ViewMore";

src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableHeader.tsx → src/lib/components/table/non-redelegatable/NonRedelegatableTableHeader.tsx

@@ -1,7 +1,7 @@
 import type { GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
-import { TableHeader } from "lib/components/table";
+import { TableHeader } from "../tableComponents";
 
 export const NonRedelegatableTableHeader = ({
   templateColumns,

src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx → src/lib/components/table/non-redelegatable/NonRedelegatableTableMobileCard.tsx

@@ -1,8 +1,8 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { MobileLabel } from "lib/components/table";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { NonRedelegatable } from "lib/pages/account-details/types";
+import { ValidatorBadge } from "../../ValidatorBadge";
+import { MobileLabel } from "../MobileLabel";
+import type { NonRedelegatable } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 interface NonRedelegatablesTableMobileCardProps {

src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableRow.tsx → src/lib/components/table/non-redelegatable/NonRedelegatableTableRow.tsx

@@ -1,8 +1,8 @@
 import { Flex, Grid, Text } from "@chakra-ui/react";
 
-import { TableRow } from "lib/components/table";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { NonRedelegatable } from "lib/pages/account-details/types";
+import { ValidatorBadge } from "../../ValidatorBadge";
+import { TableRow } from "../tableComponents";
+import type { NonRedelegatable } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 interface NonRedelegatableTableRowProps {

src/lib/pages/account-details/components/tables/non-redelegatable/index.tsx → src/lib/components/table/non-redelegatable/index.tsx

@@ -1,6 +1,6 @@
+import { MobileTableContainer, TableContainer } from "../tableComponents";
 import { useMobile } from "lib/app-provider";
-import { MobileTableContainer, TableContainer } from "lib/components/table";
-import type { NonRedelegatable } from "lib/pages/account-details/types";
+import type { NonRedelegatable } from "lib/types";
 
 import { NonRedelegatableTableHeader } from "./NonRedelegatableTableHeader";
 import { NonRedelegatablesTableMobileCard } from "./NonRedelegatableTableMobileCard";

src/lib/pages/account-details/components/tables/redelegation/RedelegationTableHeader.tsx → src/lib/components/table/redelegation/RedelegationTableHeader.tsx

@@ -1,7 +1,7 @@
 import type { GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
-import { TableHeader } from "lib/components/table";
+import { TableHeader } from "../tableComponents";
 
 export const RedelegationTableHeader = ({
   templateColumns,

src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx → src/lib/components/table/redelegation/RedelegationTableMobileCard.tsx

@@ -1,10 +1,10 @@
 import { Flex, Grid, Text } from "@chakra-ui/react";
 
+import { CustomIcon } from "../../icon";
+import { ValidatorBadge } from "../../ValidatorBadge";
+import { MobileLabel } from "../MobileLabel";
 import { TokenCell } from "../TokenCell";
-import { CustomIcon } from "lib/components/icon";
-import { MobileLabel } from "lib/components/table";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { Redelegation } from "lib/pages/account-details/types";
+import type { Redelegation } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 interface RedelegationTableMobileCardProps {

src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx → src/lib/components/table/redelegation/RedelegationTableRow.tsx

@@ -1,10 +1,10 @@
 import { Flex, Grid, Text } from "@chakra-ui/react";
 
+import { ValidatorBadge } from "../../ValidatorBadge";
+import { TableRow } from "../tableComponents";
 import { TokenCell } from "../TokenCell";
 import { CustomIcon } from "lib/components/icon";
-import { TableRow } from "lib/components/table";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { Redelegation } from "lib/pages/account-details/types";
+import type { Redelegation } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 interface RedelegationTableRowProps {

src/lib/pages/account-details/components/tables/redelegation/index.tsx → src/lib/components/table/redelegation/index.tsx

@@ -1,8 +1,8 @@
 import { TableContainer } from "@chakra-ui/react";
 
+import { MobileTableContainer } from "../tableComponents";
 import { useMobile } from "lib/app-provider";
-import { MobileTableContainer } from "lib/components/table";
-import type { Redelegation } from "lib/pages/account-details/types";
+import type { Redelegation } from "lib/types";
 
 import { RedelegationTableHeader } from "./RedelegationTableHeader";
 import { RedelegationTableMobileCard } from "./RedelegationTableMobileCard";

src/lib/model/account.ts

@@ -2,17 +2,20 @@ import type { Big } from "big.js";
 import big from "big.js";
 
 import { useCelatoneApp } from "lib/app-provider";
-import type {
-  Delegation,
-  Redelegation,
-  StakingParams,
-  Unbonding,
-} from "lib/pages/account-details/types";
 import { useAssetInfos } from "lib/services/assetService";
 import { useBalanceInfos } from "lib/services/balanceService";
 import { useDelegationsByAddress } from "lib/services/delegationService";
 import { useMovePoolInfos } from "lib/services/move";
-import type { Option, BechAddr, USD, TokenWithValue } from "lib/types";
+import type {
+  Option,
+  BechAddr,
+  USD,
+  TokenWithValue,
+  StakingParams,
+  Delegation,
+  Unbonding,
+  Redelegation,
+} from "lib/types";
 import {
   addTokenWithValue,
   coinToTokenWithValue,

src/lib/pages/account-details/components/asset/AssetSectionContent.tsx

@@ -7,11 +7,13 @@ import type { TokenWithValue } from "lib/types";
 interface AssetSectionContentProps {
   supportedAssets: TokenWithValue[];
   error: Error;
+  isAccount?: boolean;
 }
 
 export const AssetSectionContent = ({
   supportedAssets,
   error,
+  isAccount = false,
 }: AssetSectionContentProps) => {
   if (error) return <ErrorFetching dataName="balances" />;
 
@@ -26,7 +28,8 @@ export const AssetSectionContent = ({
     </Grid>
   ) : (
     <Text variant="body2" color="text.dark">
-      This address does not hold any supported assets
+      This {isAccount ? "address" : "contract"} does not hold any supported
+      assets
     </Text>
   );
 };

src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx

@@ -22,6 +22,7 @@ export const UserAssetInfoCard = ({
         {helperText}
       </Text>
       <Heading
+        mt={1}
         as="h6"
         variant="h6"
         color={isZeroValue ? "text.dark" : "text.main"}