From b3d1112ecc7292a21e5a2d99c57ab07c974df083 Mon Sep 17 00:00:00 2001 From: jas2212 <93518923+AbbasAliLokhandwala@users.noreply.github.com> Date: Fri, 14 Jun 2024 10:53:59 +0530 Subject: [PATCH] Notify pending transactions. (#361) --- .../src/components-v2/card/index.tsx | 10 +- packages/fetch-extension/src/config.ts | 13 + .../src/layouts-v2/bottom-nav/index.tsx | 7 +- .../src/pages-new/asset-view/index.tsx | 25 +- .../src/pages-new/bridge/ethereum-bridge.tsx | 7 +- .../src/pages-new/bridge/fetchhub-bridge.tsx | 3 +- .../src/pages-new/main/balances/index.tsx | 1 + .../pages-new/main/wallet-actions/index.tsx | 8 + .../main/wallet-details/constants.ts | 16 + .../pages-new/main/wallet-details/index.tsx | 534 +++++++++--------- .../src/pages-new/more/ibc-transfer/index.tsx | 3 +- .../src/pages-new/more/token/add/index.tsx | 5 +- .../src/pages-new/portfolio/stats/index.tsx | 37 +- .../src/pages-new/send/send-phase-2.tsx | 7 +- .../pages-unused/settings/token/add/index.tsx | 5 +- .../fetch-extension/src/pages/main/stake.tsx | 3 +- .../fetch-extension/src/pages/main/token.tsx | 3 +- .../src/pages/main/tx-button.tsx | 7 +- .../fetch-extension/src/pages/send/index.tsx | 3 +- .../src/pages/validator/stake.tsx | 10 +- .../src/pages/validator/transfer.tsx | 10 +- .../src/pages/validator/unstake.tsx | 10 +- 22 files changed, 441 insertions(+), 286 deletions(-) create mode 100644 packages/fetch-extension/src/pages-new/main/wallet-details/constants.ts diff --git a/packages/fetch-extension/src/components-v2/card/index.tsx b/packages/fetch-extension/src/components-v2/card/index.tsx index 3ba7662a86..6ba946d299 100644 --- a/packages/fetch-extension/src/components-v2/card/index.tsx +++ b/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 = ({ @@ -31,6 +32,7 @@ export const Card: React.FC = ({ onClick, rightContentOnClick, inActiveBackground, + disabled, }) => { const containerStyle: React.CSSProperties = { backgroundColor: isActive @@ -38,7 +40,11 @@ export const Card: React.FC = ({ : inActiveBackground ? inActiveBackground : "rgba(255,255,255,0.1)", - cursor: onClick || rightContentOnClick ? "pointer" : "default", + cursor: disabled + ? "not-allowed" + : onClick || rightContentOnClick + ? "pointer" + : "default", ...style, }; @@ -46,7 +52,7 @@ export const Card: React.FC = ({
{leftImage && (leftImage.length > 1 ? ( diff --git a/packages/fetch-extension/src/config.ts b/packages/fetch-extension/src/config.ts index 0bd8a62dd1..f2a471fc48 100644 --- a/packages/fetch-extension/src/config.ts +++ b/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", +} diff --git a/packages/fetch-extension/src/layouts-v2/bottom-nav/index.tsx b/packages/fetch-extension/src/layouts-v2/bottom-nav/index.tsx index e8515b7ef7..7d02a0e678 100644 --- a/packages/fetch-extension/src/layouts-v2/bottom-nav/index.tsx +++ b/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} /> ); diff --git a/packages/fetch-extension/src/pages-new/asset-view/index.tsx b/packages/fetch-extension/src/pages-new/asset-view/index.tsx index 8fb50a2793..b4af043d3a 100644 --- a/packages/fetch-extension/src/pages-new/asset-view/index.tsx +++ b/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(); const [tokenIcon, setTokenIcon] = useState(""); @@ -62,6 +66,8 @@ export const AssetView = observer(() => { : -(parseFloat(totalNumber) * assetValues.diff) / 100; } + const isSendDisabled = accountInfo.txTypeInProgress === TXNTYPE.send; + return ( navigate(-1)}>
@@ -143,20 +149,25 @@ export const AssetView = observer(() => { navigate("/send")} + onClick={!isSendDisabled ? () => navigate("/send") : () => {}} text={"Send"} > - + {isSendDisabled ? ( + + ) : ( + + )}
{tokenInfo?.coinDenom === "FET" && ( diff --git a/packages/fetch-extension/src/pages-new/bridge/ethereum-bridge.tsx b/packages/fetch-extension/src/pages-new/bridge/ethereum-bridge.tsx index 2d6cb563b1..bcd463d24b 100644 --- a/packages/fetch-extension/src/pages-new/bridge/ethereum-bridge.tsx +++ b/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 (

Bridging in progress {" "} @@ -145,7 +146,7 @@ export const Configure: FunctionComponent<{ memoConfig.error == null && amountConfig.error == null && !allowanceQuery.isFetching && - accountInfo.txTypeInProgress !== "approval"; + accountInfo.txTypeInProgress !== TXNTYPE.approval; return (

@@ -224,7 +225,7 @@ export const Configure: FunctionComponent<{ setPhase("approve"); }} text={ - accountInfo.txTypeInProgress === "approval" + accountInfo.txTypeInProgress === TXNTYPE.approval ? ` Approve txn in progress ${()}` : "Next" diff --git a/packages/fetch-extension/src/pages-new/bridge/fetchhub-bridge.tsx b/packages/fetch-extension/src/pages-new/bridge/fetchhub-bridge.tsx index 4beb3a11f5..35e7c39c60 100644 --- a/packages/fetch-extension/src/pages-new/bridge/fetchhub-bridge.tsx +++ b/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 (

= observer(({ tokenState }) => { : ` ${total .shrink(true) .trim(true) + .hideDenom(true) .maxDecimals(6) .toString()} USD`}

diff --git a/packages/fetch-extension/src/pages-new/main/wallet-actions/index.tsx b/packages/fetch-extension/src/pages-new/main/wallet-actions/index.tsx index d8a256ecaf..175032c6b9 100644 --- a/packages/fetch-extension/src/pages-new/main/wallet-actions/index.tsx +++ b/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 = 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 && ( + + ) + } heading={"Send"} onClick={() => navigate("/send")} /> diff --git a/packages/fetch-extension/src/pages-new/main/wallet-details/constants.ts b/packages/fetch-extension/src/pages-new/main/wallet-details/constants.ts new file mode 100644 index 0000000000..eb34a9a854 --- /dev/null +++ b/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", +}; diff --git a/packages/fetch-extension/src/pages-new/main/wallet-details/index.tsx b/packages/fetch-extension/src/pages-new/main/wallet-details/index.tsx index cbeabf12fd..975ee074af 100644 --- a/packages/fetch-extension/src/pages-new/main/wallet-details/index.tsx +++ b/packages/fetch-extension/src/pages-new/main/wallet-details/index.tsx @@ -12,288 +12,312 @@ import { useStore } from "../../../stores"; import { Balances } from "../balances"; import style from "../style.module.scss"; import { WalletConfig } from "@keplr-wallet/stores/build/chat/user-details"; +import { observer } from "mobx-react-lite"; +import { txType } from "./constants"; -export const WalletDetailsView = ({ - setIsSelectNetOpen, - setIsSelectWalletOpen, - tokenState, -}: { - setIsSelectNetOpen: any; - setIsSelectWalletOpen?: any; - tokenState: any; -}) => { - const { - keyRingStore, - chatStore, - accountStore, - chainStore, - queriesStore, - uiConfigStore, - } = useStore(); - const userState = chatStore.userDetailsStore; +export const WalletDetailsView = observer( + ({ + setIsSelectNetOpen, + setIsSelectWalletOpen, + tokenState, + }: { + setIsSelectNetOpen: any; + setIsSelectWalletOpen?: any; + tokenState: any; + }) => { + const { + keyRingStore, + chatStore, + accountStore, + chainStore, + queriesStore, + uiConfigStore, + } = useStore(); + const userState = chatStore.userDetailsStore; - const { hasFET, enabledChainIds } = userState; - const config: WalletConfig = userState.walletConfig; - const current = chainStore.current; - const [chatTooltip, setChatTooltip] = useState(""); - const [chatDisabled, setChatDisabled] = useState(false); + const { hasFET, enabledChainIds } = userState; + const config: WalletConfig = userState.walletConfig; + const current = chainStore.current; + const [chatTooltip, setChatTooltip] = useState(""); + const [chatDisabled, setChatDisabled] = useState(false); - useEffect(() => { - if (keyRingStore.keyRingType === "ledger") { - setChatTooltip("Coming soon for ledger"); - setChatDisabled(true); - return; - } + useEffect(() => { + if (keyRingStore.keyRingType === "ledger") { + setChatTooltip("Coming soon for ledger"); + setChatDisabled(true); + return; + } - if (config.requiredNative && !hasFET) { - setChatTooltip("You need to have FET balance to use this feature"); - setChatDisabled(true); - return; - } else { - setChatTooltip(""); - setChatDisabled(false); - } + if (config.requiredNative && !hasFET) { + setChatTooltip("You need to have FET balance to use this feature"); + setChatDisabled(true); + return; + } else { + setChatTooltip(""); + setChatDisabled(false); + } - if (!enabledChainIds.includes(current.chainId)) { - setChatTooltip("Feature not available on this network"); - setChatDisabled(true); - return; - } - }, [ - hasFET, - enabledChainIds, - config.requiredNative, - keyRingStore.keyRingType, - current.chainId, - ]); - const navigate = useNavigate(); - const accountInfo = accountStore.getAccount(chainStore.current.chainId); + if (!enabledChainIds.includes(current.chainId)) { + setChatTooltip("Feature not available on this network"); + setChatDisabled(true); + return; + } + }, [ + hasFET, + enabledChainIds, + config.requiredNative, + keyRingStore.keyRingType, + current.chainId, + ]); + const navigate = useNavigate(); + const accountInfo = accountStore.getAccount(chainStore.current.chainId); - const icnsPrimaryName = (() => { - if ( - uiConfigStore.icnsInfo && - chainStore.hasChain(uiConfigStore.icnsInfo.chainId) - ) { - const queries = queriesStore.get(uiConfigStore.icnsInfo.chainId); - const icnsQuery = queries.icns.queryICNSNames.getQueryContract( - uiConfigStore.icnsInfo.resolverContractAddress, - accountStore.getAccount(chainStore.current.chainId).bech32Address - ); + const icnsPrimaryName = (() => { + if ( + uiConfigStore.icnsInfo && + chainStore.hasChain(uiConfigStore.icnsInfo.chainId) + ) { + const queries = queriesStore.get(uiConfigStore.icnsInfo.chainId); + const icnsQuery = queries.icns.queryICNSNames.getQueryContract( + uiConfigStore.icnsInfo.resolverContractAddress, + accountStore.getAccount(chainStore.current.chainId).bech32Address + ); - return icnsQuery.primaryName; - } - })(); + return icnsQuery.primaryName; + } + })(); - const isEvm = chainStore.current.features?.includes("evm") ?? false; + const isEvm = chainStore.current.features?.includes("evm") ?? false; - const intl = useIntl(); - const notification = useNotification(); - const copyAddress = useCallback( - async (address: string) => { - if (accountInfo.walletStatus === WalletStatus.Loaded) { - await navigator.clipboard.writeText(address); - notification.push({ - placement: "top-center", - type: "success", - duration: 2, - content: intl.formatMessage({ - id: "main.address.copied", - }), - canDelete: true, - transition: { - duration: 0.25, - }, - }); - } - }, - [accountInfo.walletStatus, notification, intl] - ); + const intl = useIntl(); + const notification = useNotification(); + const copyAddress = useCallback( + async (address: string) => { + if (accountInfo.walletStatus === WalletStatus.Loaded) { + await navigator.clipboard.writeText(address); + notification.push({ + placement: "top-center", + type: "success", + duration: 2, + content: intl.formatMessage({ + id: "main.address.copied", + }), + canDelete: true, + transition: { + duration: 0.25, + }, + }); + } + }, + [accountInfo.walletStatus, notification, intl] + ); - return ( -
-
- - -
-
+ return ( +
-
- {(() => { - if (accountInfo.walletStatus === WalletStatus.Loaded) { - if (icnsPrimaryName) { - return icnsPrimaryName; - } + + +
+
+
+
+ {(() => { + if (accountInfo.walletStatus === WalletStatus.Loaded) { + if (icnsPrimaryName) { + return icnsPrimaryName; + } - if (accountInfo.name) { - return accountInfo.name; + if (accountInfo.name) { + return accountInfo.name; + } + return intl.formatMessage({ + id: "setting.keyring.unnamed-account", + }); + } else if (accountInfo.walletStatus === WalletStatus.Rejected) { + return "Unable to Load Key"; + } else { + return "Loading..."; } - return intl.formatMessage({ - id: "setting.keyring.unnamed-account", - }); - } else if (accountInfo.walletStatus === WalletStatus.Rejected) { - return "Unable to Load Key"; - } else { - return "Loading..."; - } - })()} -
-
-
- {accountInfo.walletStatus === WalletStatus.Rejected && ( - { - if ( - accountInfo.rejectionReason && - accountInfo.rejectionReason instanceof KeplrError && - accountInfo.rejectionReason.module === "keyring" && - accountInfo.rejectionReason.code === 152 - ) { - // Return unsupported device message - return "Ledger is not supported for this chain"; - } + })()} +
+
+
+ {accountInfo.walletStatus === WalletStatus.Rejected && ( + { + if ( + accountInfo.rejectionReason && + accountInfo.rejectionReason instanceof KeplrError && + accountInfo.rejectionReason.module === "keyring" && + accountInfo.rejectionReason.code === 152 + ) { + // Return unsupported device message + return "Ledger is not supported for this chain"; + } - let result = "Failed to load account by unknown reason"; - if (accountInfo.rejectionReason) { - result += `: ${accountInfo.rejectionReason.toString()}`; - } + let result = "Failed to load account by unknown reason"; + if (accountInfo.rejectionReason) { + result += `: ${accountInfo.rejectionReason.toString()}`; + } - return result; - })()} - theme="dark" - trigger="hover" - options={{ - placement: "top", - }} - > - - - )} -
- {accountInfo.walletStatus !== WalletStatus.Rejected && !isEvm && ( -
-
copyAddress(accountInfo.bech32Address)} - > -
- {accountInfo.walletStatus === WalletStatus.Loaded && - accountInfo.bech32Address - ? accountInfo.bech32Address - : "..."} -
- -
+ return result; + })()} + theme="dark" + trigger="hover" + options={{ + placement: "top", + }} + > + + + )}
- )} - {accountInfo.walletStatus !== WalletStatus.Rejected && - (isEvm || accountInfo.hasEthereumHexAddress) && ( -
+ {accountInfo.walletStatus !== WalletStatus.Rejected && !isEvm && ( +
copyAddress(accountInfo.ethereumHexAddress)} + style={{ + display: "flex", + alignItems: "center", + gap: "6px", + cursor: "pointer", + fontWeight: 400, + }} + onClick={() => copyAddress(accountInfo.bech32Address)} > -
+
{accountInfo.walletStatus === WalletStatus.Loaded && - accountInfo.ethereumHexAddress - ? accountInfo.ethereumHexAddress.length === 42 - ? `${accountInfo.ethereumHexAddress.slice( - 0, - 6 - )}...${accountInfo.ethereumHexAddress.slice(-6)}` - : accountInfo.ethereumHexAddress + accountInfo.bech32Address + ? accountInfo.bech32Address : "..."}
+
- copyAddress(accountInfo.bech32Address)} - src={require("@assets/svg/wireframe/copy.svg")} - alt="" - />
)} + {accountInfo.walletStatus !== WalletStatus.Rejected && + (isEvm || accountInfo.hasEthereumHexAddress) && ( +
+
+ copyAddress(accountInfo.ethereumHexAddress) + } + > +
+ {accountInfo.walletStatus === WalletStatus.Loaded && + accountInfo.ethereumHexAddress + ? accountInfo.ethereumHexAddress.length === 42 + ? `${accountInfo.ethereumHexAddress.slice( + 0, + 6 + )}...${accountInfo.ethereumHexAddress.slice(-6)}` + : accountInfo.ethereumHexAddress + : "..."} +
+
+ copyAddress(accountInfo.bech32Address)} + src={require("@assets/svg/wireframe/copy.svg")} + alt="" + /> +
+ )} +
+
- -
- {icnsPrimaryName ? ( -
- + icns-registered +
+ ) : null} + + {accountInfo.txTypeInProgress && ( +
-
- ) : null} + > +
+ + {txType[accountInfo.txTypeInProgress]} in progress +
+
+ )} - -
- ); -}; + +
+ ); + } +); diff --git a/packages/fetch-extension/src/pages-new/more/ibc-transfer/index.tsx b/packages/fetch-extension/src/pages-new/more/ibc-transfer/index.tsx index c396ef8142..750711ae0d 100644 --- a/packages/fetch-extension/src/pages-new/more/ibc-transfer/index.tsx +++ b/packages/fetch-extension/src/pages-new/more/ibc-transfer/index.tsx @@ -33,6 +33,7 @@ import style from "./style.module.scss"; import { Card } from "@components-v2/card"; import { Dropdown } from "@components-v2/dropdown"; import { SetKeyRingPage } from "../../keyring-dev"; +import { TXNTYPE } from "../../../config"; export const IBCTransferPage: FunctionComponent = observer(() => { const navigate = useNavigate(); @@ -366,7 +367,7 @@ export const IBCTransferPageAmount: FunctionComponent<{ /> diff --git a/packages/fetch-extension/src/pages-new/more/token/add/index.tsx b/packages/fetch-extension/src/pages-new/more/token/add/index.tsx index 40b8931f4a..de92997e6d 100644 --- a/packages/fetch-extension/src/pages-new/more/token/add/index.tsx +++ b/packages/fetch-extension/src/pages-new/more/token/add/index.tsx @@ -20,6 +20,7 @@ import { useLoadingIndicator } from "@components/loading-indicator"; import { useNotification } from "@components/notification"; import { isAddress } from "@ethersproject/address"; import { HeaderLayout } from "@layouts-v2/header-layout"; +import { TXNTYPE } from "../../../../config"; interface FormData { contractAddress: string; @@ -46,7 +47,7 @@ export const AddTokenPage: FunctionComponent = observer(() => { const interactionInfo = useInteractionInfo(() => { // When creating the secret20 viewing key, this page will be moved to "/sign" page to generate the signature. // So, if it is creating phase, don't reject the waiting datas. - if (accountInfo.txTypeInProgress !== "createSecret20ViewingKey") { + if (accountInfo.txTypeInProgress !== TXNTYPE.createSecret20ViewingKey) { tokensStore.rejectAllSuggestedTokens(); } }); @@ -394,7 +395,7 @@ export const AddTokenPage: FunctionComponent = observer(() => { !accountInfo.isReadyToSendTx } data-loading={ - accountInfo.txTypeInProgress === "createSecret20ViewingKey" + accountInfo.txTypeInProgress === TXNTYPE.createSecret20ViewingKey } styleProps={{ height: "56px", diff --git a/packages/fetch-extension/src/pages-new/portfolio/stats/index.tsx b/packages/fetch-extension/src/pages-new/portfolio/stats/index.tsx index 3c74f129eb..bed3038269 100644 --- a/packages/fetch-extension/src/pages-new/portfolio/stats/index.tsx +++ b/packages/fetch-extension/src/pages-new/portfolio/stats/index.tsx @@ -9,6 +9,7 @@ import { ButtonV2 } from "@components-v2/buttons/button"; import { DefaultGasMsgWithdrawRewards } from "../../../config.ui"; import { useNavigate } from "react-router"; import { useNotification } from "@components/notification"; +import { TXNTYPE } from "../../../config"; export const Stats = () => { const navigate = useNavigate(); @@ -133,11 +134,34 @@ export const Stats = () => { undefined, { onBroadcasted: () => { + notification.push({ + type: "primary", + placement: "top-center", + duration: 2, + content: `Transaction broadcasted`, + canDelete: true, + transition: { + duration: 0.25, + }, + }); + analyticsStore.logEvent("Claim reward tx broadcasted", { chainId: chainStore.current.chainId, chainName: chainStore.current.chainName, }); }, + onFulfill: () => { + notification.push({ + type: "success", + placement: "top-center", + duration: 5, + content: `Transaction Completed`, + canDelete: true, + transition: { + duration: 0.25, + }, + }); + }, } ); @@ -214,8 +238,17 @@ export const Stats = () => { color: "white", }} text="Claim rewards" - disabled={rewardsBal === "0.000000000000000000 FET"} - /> + disabled={ + rewardsBal === "0.000000000000000000 FET" || + accountInfo.txTypeInProgress === TXNTYPE.withdrawRewards || + _isWithdrawingRewards + } + > + {(accountInfo.txTypeInProgress === TXNTYPE.withdrawRewards || + _isWithdrawingRewards) && ( + + )} +
); }; diff --git a/packages/fetch-extension/src/pages-new/send/send-phase-2.tsx b/packages/fetch-extension/src/pages-new/send/send-phase-2.tsx index e8c449dedf..113eb73bf1 100644 --- a/packages/fetch-extension/src/pages-new/send/send-phase-2.tsx +++ b/packages/fetch-extension/src/pages-new/send/send-phase-2.tsx @@ -12,6 +12,7 @@ import { CoinPretty, Int } from "@keplr-wallet/unit"; import { observer } from "mobx-react-lite"; import { TransxStatus } from "@components-v2/transx-status"; import { useLocation } from "react-router"; +import { TXNTYPE } from "../../config"; interface SendPhase2Props { sendConfigs?: any; setIsNext?: any; @@ -307,7 +308,11 @@ export const SendPhase2: React.FC = observer( }} data-loading={accountInfo.isSendingMsg === "send"} disabled={!accountInfo.isReadyToSendMsgs || !txStateIsValid} - /> + > + {accountInfo.txTypeInProgress === TXNTYPE.send && ( + + )} + {trnsxStatus !== undefined && }
); diff --git a/packages/fetch-extension/src/pages-unused/settings/token/add/index.tsx b/packages/fetch-extension/src/pages-unused/settings/token/add/index.tsx index 719adea1d5..f3b838ab9c 100644 --- a/packages/fetch-extension/src/pages-unused/settings/token/add/index.tsx +++ b/packages/fetch-extension/src/pages-unused/settings/token/add/index.tsx @@ -19,6 +19,7 @@ import { useInteractionInfo } from "@keplr-wallet/hooks"; import { useLoadingIndicator } from "@components/loading-indicator"; import { useNotification } from "@components/notification"; import { isAddress } from "@ethersproject/address"; +import { TXNTYPE } from "../../../../config"; interface FormData { contractAddress: string; @@ -45,7 +46,7 @@ export const AddTokenPage: FunctionComponent = observer(() => { const interactionInfo = useInteractionInfo(() => { // When creating the secret20 viewing key, this page will be moved to "/sign" page to generate the signature. // So, if it is creating phase, don't reject the waiting datas. - if (accountInfo.txTypeInProgress !== "createSecret20ViewingKey") { + if (accountInfo.txTypeInProgress !== TXNTYPE.createSecret20ViewingKey) { tokensStore.rejectAllSuggestedTokens(); } }); @@ -368,7 +369,7 @@ export const AddTokenPage: FunctionComponent = observer(() => { !accountInfo.isReadyToSendTx } data-loading={ - accountInfo.txTypeInProgress === "createSecret20ViewingKey" + accountInfo.txTypeInProgress === TXNTYPE.createSecret20ViewingKey } > diff --git a/packages/fetch-extension/src/pages/main/stake.tsx b/packages/fetch-extension/src/pages/main/stake.tsx index ddfe0647bb..32b52c4930 100644 --- a/packages/fetch-extension/src/pages/main/stake.tsx +++ b/packages/fetch-extension/src/pages/main/stake.tsx @@ -16,6 +16,7 @@ import { useNavigate } from "react-router"; import { FormattedMessage } from "react-intl"; import { DefaultGasMsgWithdrawRewards } from "../../config.ui"; +import { TXNTYPE } from "../../config"; export const StakeView: FunctionComponent = observer(() => { const navigate = useNavigate(); @@ -150,7 +151,7 @@ export const StakeView: FunctionComponent = observer(() => { disabled={!accountInfo.isReadyToSendTx} onClick={withdrawAllRewards} data-loading={ - accountInfo.txTypeInProgress === "withdrawRewards" || + accountInfo.txTypeInProgress === TXNTYPE.withdrawRewards || isWithdrawingRewards } > diff --git a/packages/fetch-extension/src/pages/main/token.tsx b/packages/fetch-extension/src/pages/main/token.tsx index be4429b32d..b122a1a7f5 100644 --- a/packages/fetch-extension/src/pages/main/token.tsx +++ b/packages/fetch-extension/src/pages/main/token.tsx @@ -17,6 +17,7 @@ import { Dec } from "@keplr-wallet/unit"; import { DenomHelper } from "@keplr-wallet/common"; import { ToolTip } from "@components/tooltip"; import { formatTokenName } from "@utils/format"; +import { TXNTYPE } from "../../config"; const TokenView: FunctionComponent<{ balance: ObservableQueryBalanceInner; @@ -195,7 +196,7 @@ const TokenView: FunctionComponent<{ } }} > - {accountInfo.txTypeInProgress === "createSecret20ViewingKey" ? ( + {accountInfo.txTypeInProgress === TXNTYPE.createSecret20ViewingKey ? ( ) : ( diff --git a/packages/fetch-extension/src/pages/main/tx-button.tsx b/packages/fetch-extension/src/pages/main/tx-button.tsx index 9b76ab161a..c9d93401c8 100644 --- a/packages/fetch-extension/src/pages/main/tx-button.tsx +++ b/packages/fetch-extension/src/pages/main/tx-button.tsx @@ -26,6 +26,7 @@ import activeSend from "@assets/icon/activeSend.png"; import { DepositModal } from "./qr-code"; import { Link } from "react-router-dom"; import { CHAIN_ID_DORADO, CHAIN_ID_FETCHHUB } from "../../config.ui.var"; +import { TXNTYPE } from "../../config"; export const TxButtonView: FunctionComponent = observer(() => { const { accountStore, chainStore, queriesStore, analyticsStore } = useStore(); @@ -138,7 +139,7 @@ export const TxButtonView: FunctionComponent = observer(() => { } color="primary" outline - data-loading={accountInfo.txTypeInProgress === "send"} + data-loading={accountInfo.txTypeInProgress === TXNTYPE.send} onClick={(e) => { e.preventDefault(); if (hasAssets) { @@ -179,7 +180,9 @@ export const TxButtonView: FunctionComponent = observer(() => { outline color="primary" onClick={withdrawAllRewards} - data-loading={accountInfo.txTypeInProgress === "withdrawRewards"} + data-loading={ + accountInfo.txTypeInProgress === TXNTYPE.withdrawRewards + } onMouseEnter={() => { setIsActiveReward(true); }} diff --git a/packages/fetch-extension/src/pages/send/index.tsx b/packages/fetch-extension/src/pages/send/index.tsx index 5a943173d3..23eff48ed1 100644 --- a/packages/fetch-extension/src/pages/send/index.tsx +++ b/packages/fetch-extension/src/pages/send/index.tsx @@ -27,6 +27,7 @@ import { PopupSize, } from "@keplr-wallet/popup"; import { DenomHelper, ExtensionKVStore } from "@keplr-wallet/common"; +import { TXNTYPE } from "../../config"; export const SendPage: FunctionComponent = observer(() => { const navigate = useNavigate(); @@ -433,7 +434,7 @@ export const SendPage: FunctionComponent = observer(() => { type="submit" color="primary" block - data-loading={accountInfo.txTypeInProgress === "send"} + data-loading={accountInfo.txTypeInProgress === TXNTYPE.send} disabled={!accountInfo.isReadyToSendTx || !txStateIsValid} style={{ marginTop: "12px", diff --git a/packages/fetch-extension/src/pages/validator/stake.tsx b/packages/fetch-extension/src/pages/validator/stake.tsx index 779ebb755a..8277cd90a6 100644 --- a/packages/fetch-extension/src/pages/validator/stake.tsx +++ b/packages/fetch-extension/src/pages/validator/stake.tsx @@ -16,6 +16,7 @@ import { useNavigate } from "react-router"; import { Button, FormGroup, Input, Label } from "reactstrap"; import { useStore } from "../../stores"; import style from "./style.module.scss"; +import { TXNTYPE } from "../../config"; export const Stake: FunctionComponent<{ validatorAddress: string }> = observer( ({ validatorAddress }) => { @@ -173,7 +174,11 @@ export const Stake: FunctionComponent<{ validatorAddress: string }> = observer( type="submit" color="primary" block - disabled={errorText != null || !amountConfig.amount} + disabled={ + errorText != null || + !amountConfig.amount || + account.txTypeInProgress === TXNTYPE.delegate + } style={{ alignItems: "end", marginTop: "10px" }} onClick={stakeClicked} > @@ -186,6 +191,9 @@ export const Stake: FunctionComponent<{ validatorAddress: string }> = observer( }} /> Stake + {account.txTypeInProgress === TXNTYPE.delegate && ( + + )} diff --git a/packages/fetch-extension/src/pages/validator/transfer.tsx b/packages/fetch-extension/src/pages/validator/transfer.tsx index d5f963b1f5..4b178eda09 100644 --- a/packages/fetch-extension/src/pages/validator/transfer.tsx +++ b/packages/fetch-extension/src/pages/validator/transfer.tsx @@ -26,6 +26,7 @@ import { useStore } from "../../stores"; import style from "./style.module.scss"; import { Staking } from "@keplr-wallet/stores"; import { CoinPretty } from "@keplr-wallet/unit"; +import { TXNTYPE } from "../../config"; export const Transfer: FunctionComponent<{ validatorAddress: string; @@ -231,7 +232,11 @@ export const Transfer: FunctionComponent<{ type="submit" color="primary" block - disabled={errorText != null || !amountConfig.amount} + disabled={ + errorText != null || + !amountConfig.amount || + account.txTypeInProgress === TXNTYPE.redelegate + } style={{ alignItems: "end", marginTop: "10px" }} onClick={stakeClicked} > @@ -244,6 +249,9 @@ export const Transfer: FunctionComponent<{ }} /> Redelegate + {account.txTypeInProgress === TXNTYPE.redelegate && ( + + )} diff --git a/packages/fetch-extension/src/pages/validator/unstake.tsx b/packages/fetch-extension/src/pages/validator/unstake.tsx index b9e6984d94..63c57ffa81 100644 --- a/packages/fetch-extension/src/pages/validator/unstake.tsx +++ b/packages/fetch-extension/src/pages/validator/unstake.tsx @@ -15,6 +15,7 @@ import { useNavigate } from "react-router"; import { Button, FormGroup, Input, Label } from "reactstrap"; import { useStore } from "../../stores"; import style from "./style.module.scss"; +import { TXNTYPE } from "../../config"; export const Unstake: FunctionComponent<{ validatorAddress: string; @@ -171,7 +172,11 @@ export const Unstake: FunctionComponent<{ type="submit" color="primary" block - disabled={errorText != null || !amountConfig.amount} + disabled={ + errorText != null || + !amountConfig.amount || + account.txTypeInProgress === TXNTYPE.undelegate + } style={{ alignItems: "end", marginTop: "10px" }} onClick={stakeClicked} > @@ -184,6 +189,9 @@ export const Unstake: FunctionComponent<{ }} /> Unstake + {account.txTypeInProgress === TXNTYPE.undelegate && ( + + )}