Merge pull request #232 from alleslabs/pages/account-delegation

feat: delegation

CHANGELOG.md

@@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#245](https://github.com/alleslabs/celatone-frontend/pull/245) Add amplitude for account detail page
+- [#232](https://github.com/alleslabs/celatone-frontend/pull/232) Add delegation data and section for the account detail page
 - [#261](https://github.com/alleslabs/celatone-frontend/pull/261) Add Relation column to transaction tables and refactor transaction table components
 - [#265](https://github.com/alleslabs/celatone-frontend/pull/265) Add filter by status and type to proposal list page, and change Inactive proposal status to DepositFailed
 - [#263](https://github.com/alleslabs/celatone-frontend/pull/263) Wireup search bar and my proposal switch in proposal list page

src/lib/app-fns/explorer/index.ts

@@ -1,8 +1,8 @@
 export const explorerMap: Record<string, string> = {
   osmosis: "https://www.mintscan.io/osmosis",
-  terra2: "https://finder.terra.money/mainnet",
-  terra2testnet: "https://finder.terra.money/testnet",
   osmosistestnet: "https://testnet.mintscan.io/osmosis-testnet",
+  terra2: "https://terrasco.pe/mainnet",
+  terra2testnet: "https://terrasco.pe/testnet",
 };
 
 export const getExplorerBlockUrl = (chainName: string) => {

src/lib/components/CustomTab.tsx

@@ -21,6 +21,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       letterSpacing="0.4px"
       variant="ghost"
       color="text.dark"
+      mb={0}
       sx={{
         "&[aria-selected=true]": {
           color: "violet.light",

src/lib/components/ExplorerLink.tsx

@@ -80,6 +80,12 @@ const getValueText = (
   return isTruncate ? truncate(value) : value;
 };
 
+const getCopyLabel = (type: LinkType) =>
+  type
+    .split("_")
+    .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+    .join(" ");
+
 const LinkRender = ({
   type,
   isInternal,
@@ -187,6 +193,7 @@ export const ExplorerLink = ({
           <Copier
             type={type}
             value={copyValue || value}
+            copyLabel={copyValue ? `${getCopyLabel(type)} Copied!` : undefined}
             display={showCopyOnHover ? "none" : "block"}
             ml="8px"
             amptrackSection={ampCopierSection}

src/lib/components/TokenCard.tsx

@@ -1,6 +1,5 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Badge, Flex, Image, Text, Tooltip } from "@chakra-ui/react";
-import { useState } from "react";
 
 import { NAToken } from "lib/icon";
 import type { BalanceWithAssetInfo, Token, U, USD } from "lib/types";
@@ -22,7 +21,6 @@ export const TokenCard = ({
   amptrackSection,
   ...cardProps
 }: TokenCardProps) => {
-  const [logoError, setLogoError] = useState(false);
   const { symbol, price, amount, precision, id } = userBalance.balance;
 
   return (
@@ -52,16 +50,13 @@ export const TokenCard = ({
           borderBottomColor="pebble.700"
           pb={2}
         >
-          {!logoError ? (
-            <Image
-              boxSize={6}
-              src={userBalance.assetInfo?.logo}
-              alt={symbol}
-              onError={() => setLogoError(true)}
-            />
-          ) : (
-            <NAToken />
-          )}
+          <Image
+            boxSize={6}
+            src={userBalance.assetInfo?.logo}
+            alt={symbol}
+            fallback={<NAToken />}
+            fallbackStrategy="onError"
+          />
           <Text
             variant="body2"
             className="ellipsis"

src/lib/components/ValidatorBadge.tsx

@@ -0,0 +1,37 @@
+import { Flex, Image } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+
+import { getChainApiPath } from "env";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { ValidatorInfo } from "lib/types";
+
+interface ValidatorBadgeProps {
+  validator: ValidatorInfo;
+}
+
+export const ValidatorBadge = ({ validator }: ValidatorBadgeProps) => {
+  const { currentChainName } = useWallet();
+
+  return (
+    <Flex alignItems="center" gap={2}>
+      <Image
+        boxSize={10}
+        src={`https://raw.githubusercontent.com/cosmostation/chainlist/master/chain/${getChainApiPath(
+          currentChainName
+        )}/${validator.validatorAddress}.png`}
+        alt={validator.moniker}
+        fallbackSrc={`https://ui-avatars.com/api/?name=${
+          validator.moniker ?? ""
+        }&background=9793F3&color=fff`}
+        borderRadius="50%"
+      />
+      <ExplorerLink
+        value={validator.moniker ?? validator.validatorAddress}
+        copyValue={validator.validatorAddress}
+        type="validator_address"
+        textFormat="ellipsis"
+        showCopyOnHover
+      />
+    </Flex>
+  );
+};

src/lib/components/state/EmptyState.tsx

@@ -30,7 +30,7 @@ export const EmptyState = ({
           {heading}
         </Heading>
       )}
-      <Text color="text.dark" w="540px" textAlign="center">
+      <Text color="text.dark" textAlign="center">
         {message}
       </Text>
     </Flex>

src/lib/components/table/ViewMore.tsx

@@ -1,6 +1,7 @@
 import { Button, Flex } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 interface ViewMoreProps {
   onClick: () => void;
@@ -13,7 +14,10 @@ export const ViewMore = ({ onClick }: ViewMoreProps) => (
       variant="ghost"
       color="text.dark"
       rightIcon={<CustomIcon name="chevron-down" />}
-      onClick={onClick}
+      onClick={() => {
+        AmpTrack(AmpEvent.USE_VIEW_MORE);
+        onClick();
+      }}
     >
       View More
     </Button>

src/lib/components/table/transactions/TransactionsTableHeader.tsx

@@ -13,7 +13,7 @@ export const TransactionsTableHeader = ({
   showAction: boolean;
 }) => (
   <Grid templateColumns={templateColumns} minW="min-content">
-    <TableHeader borderTopStyle="none">Transaction Hash</TableHeader>
+    <TableHeader>Transaction Hash</TableHeader>
     <TableHeader />
     <TableHeader>Messages</TableHeader>
     {showRelations && <TableHeader>Relations</TableHeader>}

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

@@ -15,8 +15,8 @@ export const UserAssetInfoCard = ({
       {helperText}
     </Text>
     <Heading
-      as="h5"
-      variant="h5"
+      as="h6"
+      variant="h6"
       fontWeight="600"
       color={isZeroValue ? "text.dark" : "text.main"}
     >

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

@@ -10,7 +10,7 @@ import { useUserAssetInfos } from "lib/pages/account-details/data";
 import type { BalanceWithAssetInfo, HumanAddr, Option, USD } from "lib/types";
 import { calTotalValue, formatPrice } from "lib/utils";
 
-import { UserAssetInfoCard } from "./UserAssetInfo";
+import { UserAssetInfoCard } from "./UserAssetInfoCard";
 
 interface AssetsSectionProps {
   walletAddress: HumanAddr;
@@ -72,7 +72,7 @@ export const AssetsSection = ({
               totalValue && supportedAssets ? formatPrice(totalValue) : "N/A"
             }
             isZeroValue={totalValue.eq(0) || !supportedAssets}
-            helperText="Total Value"
+            helperText="Total Asset Value"
           />
           <UserAssetInfoCard
             value={supportedAssets ? supportedAssets.length.toString() : "N/A"}

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

@@ -0,0 +1,76 @@
+import { Flex, RadioGroup, Stack } from "@chakra-ui/react";
+import { useState } from "react";
+
+import { DelegationsTable, UnbondingsTable } from "../tables";
+import type { Delegation, Unbonding } from "lib/pages/account-details/data";
+import type { TokenWithValue } from "lib/pages/account-details/type";
+import { AmpTrackUseRadio } from "lib/services/amplitude";
+import type { Option } from "lib/types";
+
+import { RadioCard } from "./RadioCard";
+
+interface DelegationsBodyProps {
+  totalDelegations: Option<Record<string, TokenWithValue>>;
+  delegations: Option<Delegation[]>;
+  totalUnbondings: Option<Record<string, TokenWithValue>>;
+  unbondings: Option<Unbonding[]>;
+  rewards: Option<Record<string, TokenWithValue[]>>;
+  isLoadingDelegations: boolean;
+  isLoadingUnbondings: boolean;
+  defaultToken: TokenWithValue;
+}
+
+export const DelegationsBody = ({
+  totalDelegations,
+  delegations,
+  totalUnbondings,
+  unbondings,
+  rewards,
+  isLoadingDelegations,
+  isLoadingUnbondings,
+  defaultToken,
+}: DelegationsBodyProps) => {
+  // NOTE: set between "Delegated" and "Unbonding"
+  const [value, setValue] = useState("Delegated");
+
+  return (
+    <Flex direction="column" gap={8}>
+      <RadioGroup
+        onChange={(newValue) => {
+          AmpTrackUseRadio(newValue.toLocaleLowerCase());
+          setValue(newValue);
+        }}
+        value={value}
+        overflowX="scroll"
+      >
+        <Stack direction="row">
+          <RadioCard
+            value="Delegated"
+            total={totalDelegations}
+            defaultToken={defaultToken}
+            isLoading={isLoadingDelegations}
+          />
+          <RadioCard
+            value="Unbonding"
+            total={totalUnbondings}
+            defaultToken={defaultToken}
+            isLoading={isLoadingUnbondings}
+          />
+        </Stack>
+      </RadioGroup>
+      {value === "Delegated" ? (
+        <DelegationsTable
+          delegations={delegations}
+          rewards={rewards}
+          defaultToken={defaultToken}
+          isLoading={isLoadingDelegations}
+        />
+      ) : (
+        <UnbondingsTable
+          unbondings={unbondings}
+          isLoading={isLoadingUnbondings}
+        />
+      )}
+    </Flex>
+  );
+};

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

@@ -0,0 +1,51 @@
+import { Box, Text } from "@chakra-ui/react";
+
+import { NonRedelegatablesTable } from "../tables";
+import type { Redelegation } from "lib/pages/account-details/data";
+import type { NonRedelegatable } from "lib/pages/account-details/type";
+
+interface NonRedelegatableSectionProps {
+  redelegations: Redelegation[];
+}
+
+export const NonRedelegatableSection = ({
+  redelegations,
+}: NonRedelegatableSectionProps) => {
+  const nonRedelegatables = redelegations
+    .reduceRight<NonRedelegatable[]>((prev, redelegation) => {
+      if (
+        prev.find(
+          (value) =>
+            value.dstValidator.validatorAddress ===
+            redelegation.dstValidator.validatorAddress
+        )
+      )
+        return prev;
+      return prev.concat({
+        dstValidator: redelegation.dstValidator,
+        completionTime: redelegation.completionTime,
+      });
+    }, [])
+    .reverse();
+
+  return (
+    <Box
+      px={6}
+      py={4}
+      bgColor="pebble.900"
+      border="1px solid"
+      borderColor="pebble.700"
+      borderRadius="8px"
+    >
+      <Text variant="body2">
+        This account cannot redelegate from
+        <span style={{ fontWeight: 700 }}>
+          {" "}
+          these validators to other validators{" "}
+        </span>
+        until their active redelegations have completed.
+      </Text>
+      <NonRedelegatablesTable nonRedelegatables={nonRedelegatables} />
+    </Box>
+  );
+};

src/lib/pages/account-details/components/delegations/RadioCard.tsx

@@ -0,0 +1,51 @@
+import { Flex, Radio, Text, Heading, Spinner } from "@chakra-ui/react";
+
+import type { TokenWithValue } from "lib/pages/account-details/type";
+import type { Option } from "lib/types";
+import {
+  formatPrice,
+  formatUTokenWithPrecision,
+  getTokenLabel,
+} from "lib/utils";
+
+interface RadioCardProps {
+  value: string;
+  total: Option<Record<string, TokenWithValue>>;
+  defaultToken: TokenWithValue;
+  isLoading: boolean;
+}
+
+export const RadioCard = ({
+  value,
+  total,
+  defaultToken,
+  isLoading,
+}: RadioCardProps) => {
+  const token = total?.[defaultToken.denom] ?? defaultToken;
+  return (
+    <Radio variant="card" value={value} overflowX="hidden">
+      <Flex alignItems="center" gap={2} justifyContent="space-between">
+        <Flex direction="column" gap={1}>
+          <Text variant="body2" textColor="pebble.400" fontWeight="500">
+            {value}
+          </Text>
+          {isLoading ? (
+            <Spinner mt={2} alignSelf="center" size="md" speed="0.65s" />
+          ) : (
+            <Flex alignItems="end" gap={1}>
+              <Heading variant="h6" as="h6">
+                {formatUTokenWithPrecision(token.amount, token.precision || 0)}
+              </Heading>
+              <Text variant="body2" textColor="text.main">
+                {getTokenLabel(token.denom)}
+              </Text>
+            </Flex>
+          )}
+        </Flex>
+        <Text variant="body2" textColor="text.dark">
+          ({token.value ? formatPrice(token.value) : "-"})
+        </Text>
+      </Flex>
+    </Radio>
+  );
+};