feat: Vesting

packages/fetch-extension/src/components-v2/card/index.tsx

@@ -16,6 +16,8 @@ export interface CardProps {
   rightContentStyle?: any;
   inActiveBackground?: any;
   disabled?: boolean;
+  bottomContent?: any;
+  bottomContentStyle?: any;
 }
 
 export const Card: React.FC<CardProps> = ({
@@ -25,6 +27,8 @@ export const Card: React.FC<CardProps> = ({
   subheading,
   rightContent,
   rightContentStyle,
+  bottomContent,
+  bottomContentStyle,
   isActive,
   style,
   subheadingStyle,
@@ -54,63 +58,76 @@ export const Card: React.FC<CardProps> = ({
       className={styles["cardContainer"]}
       onClick={!disabled && onClick}
     >
-      {leftImage &&
-        (leftImage.length > 1 ? (
-          <img
-            src={leftImage.length > 1 && leftImage}
-            alt={leftImage[0]}
-            className={styles["leftImage"]}
-            style={leftImageStyle}
-          />
-        ) : (
-          <div className={styles["leftImage"]} style={leftImageStyle}>
-            {leftImage}
-          </div>
-        ))}
+      <div className={styles["cardTopContainer"]}>
+        {leftImage &&
+          (leftImage.length > 1 ? (
+            <img
+              src={leftImage.length > 1 && leftImage}
+              alt={leftImage[0]}
+              className={styles["leftImage"]}
+              style={leftImageStyle}
+            />
+          ) : (
+            <div className={styles["leftImage"]} style={leftImageStyle}>
+              {leftImage}
+            </div>
+          ))}
 
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          width: "100%",
-        }}
-      >
-        <div className={styles["middleSection"]}>
-          <div
-            style={{ ...headingStyle }}
-            className={`${styles["heading"]} ${styles["wordBreak"]}`}
-          >
-            {heading}
-          </div>
-          {subheading && (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%",
+          }}
+        >
+          <div className={styles["middleSection"]}>
             <div
-              className={styles["subHeading"]}
-              style={{ ...subheadingStyle }}
+              style={{ ...headingStyle }}
+              className={`${styles["heading"]} ${styles["wordBreak"]}`}
             >
-              {subheading}
+              {heading}
             </div>
-          )}
-        </div>
+            {subheading && (
+              <div
+                className={styles["subHeading"]}
+                style={{ ...subheadingStyle }}
+              >
+                {subheading}
+              </div>
+            )}
+          </div>
 
-        <div className={styles["rightSection"]}>
-          {React.isValidElement(rightContent) ? (
-            <div style={rightContentStyle}> {rightContent}</div>
-          ) : rightContent && rightContent.includes("extension://") ? (
-            <img
-              onClick={rightContentOnClick}
-              src={rightContent}
-              alt="Right Section"
-              className={styles["rightImage"]}
-              style={rightContentStyle}
-            />
-          ) : (
-            <div onClick={rightContentOnClick} className={styles["rightText"]}>
-              {rightContent}
-            </div>
-          )}
+          <div className={styles["rightSection"]}>
+            {React.isValidElement(rightContent) ? (
+              <div style={rightContentStyle}> {rightContent}</div>
+            ) : rightContent && rightContent.includes("extension://") ? (
+              <img
+                onClick={rightContentOnClick}
+                src={rightContent}
+                alt="Right Section"
+                className={styles["rightImage"]}
+                style={rightContentStyle}
+              />
+            ) : (
+              <div
+                onClick={rightContentOnClick}
+                className={styles["rightText"]}
+              >
+                {rightContent}
+              </div>
+            )}
+          </div>
         </div>
       </div>
+      {bottomContent && (
+        <div
+          className={styles["cardBottomContainer"]}
+          style={bottomContentStyle}
+        >
+          {bottomContent}
+        </div>
+      )}
     </div>
   );
 };

packages/fetch-extension/src/components-v2/card/style.module.scss

@@ -1,6 +1,4 @@
 .cardContainer {
-  display: flex;
-  align-items: center;
   color: white;
   padding: 18px 12px;
   font-size: 14px;
@@ -12,6 +10,36 @@
 .cardContainer:hover {
   background: rgba(255, 255, 255, 0.1);
 }
+.cardTopContainer {
+  display: flex;
+  align-items: center;
+}
+.cardBottomContainer {
+  display: flex;
+  margin-top: 16px;
+  align-items: center;
+
+  .pCenter {
+    display: flex;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    align-items: center;
+    padding: 6px 12px 6px 12px;
+
+    .pImage {
+      height: 12px;
+      width: 12px;
+      margin-right: 6px;
+    }
+
+    .text {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 19px;
+      margin: 0;
+    }
+  }
+}
 .heading {
   word-break: break-all;
   font-weight: 400;

packages/fetch-extension/src/components-v2/form/coin-input.tsx

@@ -32,10 +32,11 @@ export interface CoinInputProps {
   disableAllBalance?: boolean;
   overrideSelectableCurrencies?: AppCurrency[];
   dropdownDisabled?: boolean;
+  onPress?: () => void;
 }
 
 export const CoinInput: FunctionComponent<CoinInputProps> = observer(
-  ({ amountConfig, disableAllBalance }) => {
+  ({ amountConfig, disableAllBalance, onPress }) => {
     const intl = useIntl();
     const [inputInFiatCurrency, setInputInFiatCurrency] = useState<
       string | undefined
@@ -225,7 +226,7 @@ export const CoinInput: FunctionComponent<CoinInputProps> = observer(
                 className={styleCoinInput["widgetButton"]}
                 onClick={(e) => {
                   e.preventDefault();
-                  amountConfig.toggleIsMax();
+                  onPress ? onPress() : amountConfig.toggleIsMax();
                 }}
               >
                 Use max available
@@ -252,7 +253,9 @@ export const TokenSelectorDropdown: React.FC<TokenDropdownProps> = ({
     string | undefined
   >("");
 
-  const { queriesStore, priceStore } = useStore();
+  const { queriesStore, priceStore, accountStore, chainStore } = useStore();
+  const accountInfo = accountStore.getAccount(chainStore.current.chainId);
+  const queries = queriesStore.get(chainStore.current.chainId);
   const queryBalances = queriesStore
     .get(amountConfig.chainId)
     .queryBalances.getQueryBech32Address(amountConfig.sender);
@@ -267,14 +270,15 @@ export const TokenSelectorDropdown: React.FC<TokenDropdownProps> = ({
     .sort((a, b) => {
       return a.coinDenom < b.coinDenom ? -1 : 1;
     });
-
-  const queryBalance = queryBalances.balances.find(
-    (bal) =>
-      amountConfig.sendCurrency.coinMinimalDenom ===
-      bal.currency.coinMinimalDenom
-  );
-  const balance = queryBalance
-    ? queryBalance.balance
+  const spendableBalances = queries.cosmos.querySpendableBalances
+    .getQueryBech32Address(accountInfo.bech32Address)
+    .balances?.find(
+      (bal) =>
+        amountConfig.sendCurrency.coinMinimalDenom ===
+        bal.currency.coinMinimalDenom
+    );
+  const balance = spendableBalances
+    ? spendableBalances
     : new CoinPretty(amountConfig.sendCurrency, new Int(0));
 
   const language = useLanguage();

packages/fetch-extension/src/config.ui.var.ts

@@ -30,6 +30,8 @@ export const FNS_TEST_ADDRESS = "fetch1s84mudgmjfjmkef7ludqnwy0fchh3mf4p4rmll";
 export const CHAIN_ID_DORADO = "dorado-1";
 export const CHAIN_ID_ERIDANUS = "eridanus-1";
 export const CHAIN_ID_FETCHHUB = "fetchhub-4";
+export const CHAIN_ID_LOCAL_TEST_NETWORK = "test-local";
+export const CHAIN_ID_REMOTE_TEST_NETWORK = "test";
 export const GROUP_PAGE_COUNT = 30;
 export const CHAT_PAGE_COUNT = 30;
 

packages/fetch-extension/src/languages/en.json

@@ -451,5 +451,15 @@
   "search.no-result-found": "No results found.",
   "search.refine.search": "Please refine your search.",
   "sign.in.google": "Continue with Google",
-  "sign.in.auth-powered": "Powered by Web3Auth"
+  "sign.in.auth-powered": "Powered by Web3Auth",
+
+  "portfolio.detail.vesting-card.paragraph": "Your balance includes {vestingBalance} {balanceDenom} that are still locked due to your vesting schedule",
+  "portfolio.detail.vesting-card.calendar.vesting.type": "Vesting type",
+  "portfolio.detail.vesting-card.calendar.start.time": "Start time",
+  "portfolio.detail.vesting-card.calendar.end.time": "End time",
+  "portfolio.detail.vesting-card.calendar.originally.locked": "Originally locked",
+  "portfolio.detail.vesting-card.calendar.currently.locked": "Currently locked",
+  "portfolio.detail.vesting-card.calendar.already.unlocked": "Already unlocked",
+  "portfolio.detail.vesting-card.calendar.learn.more": "Learn more",
+  "portfolio.detail.vesting-card.calendar.show/hide.calendar": "{calendarType} calendar"
 }

packages/fetch-extension/src/languages/ko.json

@@ -337,5 +337,13 @@
   "component.ibc.channel-registrar.chain-selector.add.channel.button": "저장",
 
   "component.waring.experimental-feature.title": "실험적 기능",
-  "component.waring.experimental-feature.paragraph": "용감한 우주 여행자를 위한 기능입니다"
+  "component.waring.experimental-feature.paragraph": "용감한 우주 여행자를 위한 기능입니다",
+
+  "portfolio.detail.vesting-card.paragraph": "귀하의 잔액에는 귀하의 베스팅 일정으로 인해 여전히 잠겨 있는 {vestingBalance} {balanceDenom}이 포함되어 있습니다",
+  "portfolio.detail.vesting-card.calendar.vesting.type": "베스팅 유형",
+  "portfolio.detail.vesting-card.calendar.start.time": "시작 시간",
+  "portfolio.detail.vesting-card.calendar.end.time": "종료 시간",
+  "portfolio.detail.vesting-card.calendar.originally.locked": "원래 잠겨 있음",
+  "portfolio.detail.vesting-card.calendar.currently.locked": "현재 잠겨 있음",
+  "portfolio.detail.vesting-card.calendar.already.unlocked": "이미 잠금 해제됨"
 }

packages/fetch-extension/src/layouts-v2/bottom-nav/index.tsx

@@ -8,15 +8,12 @@ import selectedMoreTabIcon from "@assets/svg/wireframe/selected-more.svg";
 import selectedStakeTabIcon from "@assets/svg/wireframe/selected-stake.svg";
 import stakeTabIcon from "@assets/svg/wireframe/stake-bottom-icon-new.svg";
 import React, { useEffect, useState } from "react";
-import {
-  CHAIN_ID_DORADO,
-  CHAIN_ID_ERIDANUS,
-  CHAIN_ID_FETCHHUB,
-} from "../../config.ui.var";
+
 import { WalletActions } from "../../pages-new/main/wallet-actions";
 import { useStore } from "../../stores";
 import style from "./style.module.scss";
 import { Tab } from "./tab";
+import { isFeatureAvailable } from "@utils/index";
 
 const bottomNav = [
   {
@@ -65,11 +62,7 @@ const StakeTab = () => {
   const [stakingTooltip, setStakingTooltip] = useState("");
   const [stakingDisabled, setStakingDisabled] = useState(false);
   useEffect(() => {
-    if (
-      current.chainId == CHAIN_ID_DORADO ||
-      current.chainId == CHAIN_ID_FETCHHUB ||
-      current.chainId == CHAIN_ID_ERIDANUS
-    ) {
+    if (isFeatureAvailable(current.chainId)) {
       setStakingDisabled(false);
       setStakingTooltip("");
     } else {

packages/fetch-extension/src/new-layouts/bottom-nav/index.tsx

@@ -5,10 +5,11 @@ import activityIcon from "@assets/icon/lightning-bolt.svg";
 import moreIcon from "@assets/icon/more.svg";
 import { NotificationSetup } from "@notificationTypes";
 import React, { useEffect, useState } from "react";
-import { CHAIN_ID_FETCHHUB } from "../../config.ui.var";
+
 import { useStore } from "../../stores";
 import style from "./style.module.scss";
 import { Tab } from "./tab";
+import { isFeatureAvailable } from "@utils/index";
 
 interface WalletConfig {
   notiphyWhitelist: string[] | undefined;
@@ -152,12 +153,12 @@ const ActivityTab = () => {
   const [activityDisabled, setActivityDisabled] = useState(false);
 
   useEffect(() => {
-    if (![CHAIN_ID_FETCHHUB].includes(current.chainId)) {
-      setActivityTooltip("Feature not available on this network");
-      setActivityDisabled(true);
-    } else {
+    if (isFeatureAvailable(current.chainId)) {
       setActivityTooltip("");
       setActivityDisabled(false);
+    } else {
+      setActivityTooltip("Feature not available on this network");
+      setActivityDisabled(true);
     }
   }, [current.chainId]);