Notify pending transactions. (#361)

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

@@ -15,6 +15,7 @@ export interface CardProps {
   rightContentOnClick?: any;
   rightContentStyle?: any;
   inActiveBackground?: any;
+  disabled?: boolean;
 }
 
 export const Card: React.FC<CardProps> = ({
@@ -31,22 +32,27 @@ export const Card: React.FC<CardProps> = ({
   onClick,
   rightContentOnClick,
   inActiveBackground,
+  disabled,
 }) => {
   const containerStyle: React.CSSProperties = {
     backgroundColor: isActive
       ? "var(--Indigo---Fetch, #5F38FB)"
       : inActiveBackground
       ? inActiveBackground
       : "rgba(255,255,255,0.1)",
-    cursor: onClick || rightContentOnClick ? "pointer" : "default",
+    cursor: disabled
+      ? "not-allowed"
+      : onClick || rightContentOnClick
+      ? "pointer"
+      : "default",
     ...style,
   };
 
   return (
     <div
       style={containerStyle}
       className={styles["cardContainer"]}
-      onClick={onClick}
+      onClick={!disabled && onClick}
     >
       {leftImage &&
         (leftImage.length > 1 ? (

packages/fetch-extension/src/config.ts

@@ -2847,3 +2847,16 @@ export const CommunityChainInfoRepo = {
   repoName: "keplr-chain-registry",
   branchName: "main",
 };
+
+export enum TXNTYPE {
+  ibcTransfer="ibcTransfer",
+  send="send",
+  withdrawRewards="withdrawRewards",
+  delegate="delegate",
+  undelegate="undelegate",
+  redelegate="redelegate",
+  govVote="govVote",
+  nativeBridgeSend="nativeBridgeSend",
+  approval="approval",
+  createSecret20ViewingKey="createSecret20ViewingKey",
+}

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

@@ -96,7 +96,7 @@ const ActivityTab = () => {
   const { keyRingStore, chainStore } = useStore();
   const current = chainStore.current;
   const [activityTooltip, setActivityTooltip] = useState("");
-  const [z, setActivityDisabled] = useState(false);
+  const [activityDisabled, setActivityDisabled] = useState(false);
   const isEvm = current.features?.includes("evm") ?? false;
   useEffect(() => {
     if (keyRingStore.keyRingType === "ledger") {
@@ -111,6 +111,9 @@ const ActivityTab = () => {
       setActivityTooltip("");
       setActivityDisabled(false);
     }
+
+    setActivityTooltip("Coming soon");
+    setActivityDisabled(true);
   }, [current.chainId, keyRingStore.keyRingType]);
 
   return (
@@ -119,7 +122,7 @@ const ActivityTab = () => {
       icon={activitygreyIcon}
       activeIcon={activityIcon}
       path={"/activity"}
-      disabled={z}
+      disabled={activityDisabled}
       tooltip={activityTooltip}
     />
   );

packages/fetch-extension/src/pages-new/asset-view/index.tsx

@@ -8,8 +8,12 @@ import { getTokenIcon } from "@utils/get-token-icon";
 import { Activity } from "./activity";
 import { observer } from "mobx-react-lite";
 import { separateNumericAndDenom } from "@utils/format";
+import { useStore } from "../../stores";
+import { TXNTYPE } from "../../config";
 
 export const AssetView = observer(() => {
+  const { chainStore, accountStore } = useStore();
+  const accountInfo = accountStore.getAccount(chainStore.current.chainId);
   const location = useLocation();
   const [tokenInfo, setTokenInfo] = useState<any>();
   const [tokenIcon, setTokenIcon] = useState<string>("");
@@ -62,6 +66,8 @@ export const AssetView = observer(() => {
         : -(parseFloat(totalNumber) * assetValues.diff) / 100;
   }
 
+  const isSendDisabled = accountInfo.txTypeInProgress === TXNTYPE.send;
+
   return (
     <HeaderLayout showTopMenu={true} onBackButton={() => navigate(-1)}>
       <div className={style["asset-info"]}>
@@ -143,20 +149,25 @@ export const AssetView = observer(() => {
           </ButtonV2>
           <ButtonV2
             styleProps={{
-              cursor: "pointer",
+              cursor: isSendDisabled ? "not-allowed" : "pointer",
               display: "flex",
               alignItems: "center",
               gap: "4px",
               justifyContent: "center",
+              opacity: isSendDisabled ? 0.5 : 1,
             }}
-            onClick={() => navigate("/send")}
+            onClick={!isSendDisabled ? () => navigate("/send") : () => {}}
             text={"Send"}
           >
-            <img
-              className={style["img"]}
-              src={require("@assets/svg/wireframe/arrow-up-gradient.svg")}
-              alt=""
-            />
+            {isSendDisabled ? (
+              <i className="fas fa-spinner fa-spin ml-2 mr-2" />
+            ) : (
+              <img
+                className={style["img"]}
+                src={require("@assets/svg/wireframe/arrow-up-gradient.svg")}
+                alt=""
+              />
+            )}
           </ButtonV2>
         </div>
         {tokenInfo?.coinDenom === "FET" && (

packages/fetch-extension/src/pages-new/bridge/ethereum-bridge.tsx

@@ -24,6 +24,7 @@ import queryString from "querystring";
 import { Card } from "@components-v2/card";
 import { BigNumber } from "@ethersproject/bignumber";
 import { ButtonV2 } from "@components-v2/buttons/button";
+import { TXNTYPE } from "../../config";
 
 export const EthereumBridge: FunctionComponent<{
   limit: string;
@@ -69,7 +70,7 @@ export const EthereumBridge: FunctionComponent<{
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [query.defaultAmount, query.defaultRecipient]);
 
-  if (accountInfo.txTypeInProgress === "nativeBridgeSend") {
+  if (accountInfo.txTypeInProgress === TXNTYPE.nativeBridgeSend) {
     return (
       <p className={style["loaderScreen"]}>
         Bridging in progress <i className="fa fa-spinner fa-spin fa-fw" />{" "}
@@ -145,7 +146,7 @@ export const Configure: FunctionComponent<{
       memoConfig.error == null &&
       amountConfig.error == null &&
       !allowanceQuery.isFetching &&
-      accountInfo.txTypeInProgress !== "approval";
+      accountInfo.txTypeInProgress !== TXNTYPE.approval;
 
     return (
       <form className={style["formContainer"]}>
@@ -224,7 +225,7 @@ export const Configure: FunctionComponent<{
               setPhase("approve");
             }}
             text={
-              accountInfo.txTypeInProgress === "approval"
+              accountInfo.txTypeInProgress === TXNTYPE.approval
                 ? ` Approve txn in progress
              ${(<i className="fa fa-spinner fa-spin fa-fw" />)}`
                 : "Next"

packages/fetch-extension/src/pages-new/bridge/fetchhub-bridge.tsx

@@ -16,6 +16,7 @@ import { useIntl } from "react-intl";
 import { ExtensionKVStore } from "@keplr-wallet/common";
 import { ButtonV2 } from "@components-v2/buttons/button";
 import { Card } from "@components-v2/card";
+import { TXNTYPE } from "../../config";
 
 export const FetchhubBridge: FunctionComponent<{
   limit: string;
@@ -78,7 +79,7 @@ export const FetchhubBridge: FunctionComponent<{
     nativeBridgeConfig.feeConfig.error == null &&
     nativeBridgeConfig.gasConfig.error == null;
 
-  if (accountInfo.txTypeInProgress === "nativeBridgeSend") {
+  if (accountInfo.txTypeInProgress === TXNTYPE.nativeBridgeSend) {
     return (
       <p
         style={{

packages/fetch-extension/src/pages-new/main/balances/index.tsx

@@ -122,6 +122,7 @@ export const Balances: React.FC<Props> = observer(({ tokenState }) => {
               : ` ${total
                   .shrink(true)
                   .trim(true)
+                  .hideDenom(true)
                   .maxDecimals(6)
                   .toString()} USD`}
           </div>

packages/fetch-extension/src/pages-new/main/wallet-actions/index.tsx

@@ -6,6 +6,7 @@ import { observer } from "mobx-react-lite";
 import { Card } from "@components-v2/card";
 import style from "./style.module.scss";
 import { Dropdown } from "@components-v2/dropdown";
+import { TXNTYPE } from "../../../config";
 
 interface WalletActionsProps {
   isOpen: boolean;
@@ -49,8 +50,15 @@ export const WalletActions: React.FC<WalletActionsProps> = observer(
               background: "rgba(255,255,255,0.1)",
               height: "60px",
               marginBottom: "6px",
+              opacity: accountInfo.txTypeInProgress === TXNTYPE.send ? 0.5 : 1,
             }}
+            disabled={accountInfo.txTypeInProgress === TXNTYPE.send}
             leftImage={require("@assets/svg/wireframe/arrow-up.svg")}
+            rightContent={
+              accountInfo.txTypeInProgress === TXNTYPE.send && (
+                <i className="fas fa-spinner fa-spin ml-2 mr-2" />
+              )
+            }
             heading={"Send"}
             onClick={() => navigate("/send")}
           />

packages/fetch-extension/src/pages-new/main/wallet-details/constants.ts

@@ -0,0 +1,16 @@
+interface txTypes {
+  [key: string]: string;
+}
+
+export const txType: txTypes = {
+  ibcTransfer: "IBC Transfer",
+  send: "Send Transaction",
+  withdrawRewards: "Rewards withdrawl",
+  delegate: "Delegation",
+  undelegate: "Undelegation",
+  redelegate: "Redelegation",
+  govVote: "Government Vote",
+  nativeBridgeSend: "Bridging",
+  approval: "Approve txn",
+  createSecret20ViewingKey: "Secret key creation",
+};