Feat/cfe-272 contract delegation

CHANGELOG.md

@@ -57,6 +57,8 @@ 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
+- [#717](https://github.com/alleslabs/celatone-frontend/pull/717) Add total value for contract detail
 - [#681](https://github.com/alleslabs/celatone-frontend/pull/681) Add Initia wallet
 - [#704](https://github.com/alleslabs/celatone-frontend/pull/704) Fix client undefined after disconnected
 - [#698](https://github.com/alleslabs/celatone-frontend/pull/698) Add ledger

src/lib/pages/account-details/components/TotalAccountValue.tsx → src/lib/components/TotalValue.tsx

@@ -1,43 +1,46 @@
 import { Flex, Heading, Skeleton, Text } from "@chakra-ui/react";
 
-import { useAccountTotalValue } from "../data";
+import { useAccountTotalValue } from "lib/model/account";
 import type { BechAddr } from "lib/types";
 import { formatPrice } from "lib/utils";
 
-interface TotalAccountValueProps {
-  accountAddress: BechAddr;
+interface TotalValueProps {
+  address: BechAddr;
+  label?: string;
+  isCompact?: boolean;
 }
-export const TotalAccountValue = ({
-  accountAddress,
-}: TotalAccountValueProps) => {
-  const { totalAccountValue, isLoading } = useAccountTotalValue(accountAddress);
+export const TotalValue = ({
+  address,
+  label = "Total Account Value",
+  isCompact = false,
+}: TotalValueProps) => {
+  const { totalAccountValue, isLoading } = useAccountTotalValue(address);
   return (
     <Flex
-      p={4}
+      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">
-        Total Account Value
+        {label}
       </Text>
       {isLoading ? (
         <Skeleton
           mt={1}
-          h={8}
-          w="full"
+          h={5}
           borderRadius={2}
           startColor="gray.500"
           endColor="gray.700"
         />
       ) : (
         <Heading
-          as="h6"
-          variant="h6"
+          as="h5"
+          variant="h5"
           color={
             !totalAccountValue || totalAccountValue.eq(0)
-              ? "text.dark"
+              ? "text.disabled"
               : "text.main"
           }
         >

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,11 @@ export const DelegationInfo = ({
   onViewMore,
 }: DelegationInfoProps) => {
   const isMobile = useMobile();
-
   const isMobileOverview = isMobile && !!onViewMore;
+  const tableTitle = (
+    <TableTitle title="Delegations" mb={0} showCount={false} />
+  );
+
   return (
     <>
       {isMobileOverview ? (
@@ -43,16 +47,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}
           <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

@@ -5,7 +5,7 @@ import { useEffect } from "react";
 import { AmpEvent, track } from "lib/amplitude";
 import { Loading } from "lib/components/Loading";
 import { ErrorFetching } from "lib/components/state";
-import { useUserDelegationInfos } from "lib/pages/account-details/data";
+import { useAccountDelegationInfos } from "lib/model/account";
 import type { BechAddr } from "lib/types";
 import { getTokenLabel } from "lib/utils";
 
@@ -38,7 +38,7 @@ export const DelegationsSection = ({
     rewards,
     redelegations,
     totalCommission,
-  } = useUserDelegationInfos(address);
+  } = useAccountDelegationInfos(address);
 
   useEffect(() => {
     onClose();
@@ -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/components/links/GitHubLink.tsx

@@ -5,14 +5,20 @@ import { trackSocial } from "lib/amplitude";
 
 interface GitHubLinkProps {
   github: string;
+  hasMinW?: boolean;
 }
 
-export const GitHubLink = ({ github }: GitHubLinkProps) => {
+export const GitHubLink = ({ github, hasMinW = false }: GitHubLinkProps) => {
   const [, , , org, repo] = github.split("/");
   return (
     <Flex gap={{ base: 0, md: 2 }} direction={{ base: "column", md: "row" }}>
-      <Text fontWeight={500} color="text.dark" variant="body2">
-        GitHub:
+      <Text
+        fontWeight={500}
+        color="text.dark"
+        variant="body2"
+        minW={hasMinW ? 32 : "auto"}
+      >
+        GitHub{!hasMinW && ":"}
       </Text>
       <a
         href={github}

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,14 +1,18 @@
 export * from "./AccordionTx";
 export * from "./accounts";
+export * from "./bonded";
 export * from "./codes";
 export * from "./contracts";
-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 "./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 {