((state) =>
+ getModalData(state, ModalNames.V3WithdrawConfirm)
+ );
+
+ if (!props) return null;
+
+ return (
+
+
+
+ );
+});
export const V3WithdrawConfirmContent = ({
isModalOpen,
setIsModalOpen,
withdrawRequest,
openCancelModal,
-}: Props) => {
+}: {
+ isModalOpen: boolean;
+ setIsModalOpen: (isOpen: boolean) => void;
+ withdrawRequest: WithdrawalRequest;
+ openCancelModal: (req: WithdrawalRequest) => void;
+}) => {
const {
- ModalApprove,
token,
loadingAmounts,
withdrawAmounts,
@@ -82,8 +91,6 @@ export const V3WithdrawConfirmContent = ({
return (
- {ModalApprove}
-
void;
+interface V3WithdrawProps {
holding: Holding;
}
+const V3WithdrawModal = () => {
+ const { popModal } = useModal();
+ const isOpen = useAppSelector((state) =>
+ getIsModalOpen(state, ModalNames.V3Withdraw)
+ );
+
+ const props = useAppSelector((state) =>
+ getModalData(state, ModalNames.V3Withdraw)
+ );
+ const holding = props?.holding;
-const V3WithdrawModal = ({ isOpen, setIsOpen, holding }: Props) => {
const {
step,
onClose,
@@ -41,10 +51,10 @@ const V3WithdrawModal = ({ isOpen, setIsOpen, holding }: Props) => {
lockDurationInDays,
requestId,
setRequestId,
- } = useV3WithdrawModal({ setIsOpen });
+ } = useV3WithdrawModal({ setIsOpen: popModal });
useEffect(() => {
- if (isOpen) {
+ if (isOpen && holding) {
setCurrentWithdraw({
withdraw_pool: holding.pool.name,
withdraw_blockchain: getBlockchain(),
@@ -56,10 +66,12 @@ const V3WithdrawModal = ({ isOpen, setIsOpen, holding }: Props) => {
sendWithdrawEvent(WithdrawEvent.WithdrawPoolClick);
sendWithdrawEvent(WithdrawEvent.WithdrawAmountView);
}
- }, [isOpen, isCurrency, holding.pool.name]);
+ }, [isOpen, isCurrency, holding]);
+
+ if (!holding) return null;
return (
- {
requestId={requestId}
/>
)}
-
+
);
};
diff --git a/src/elements/modalVbnt/ModalVbnt.tsx b/src/modals/VbntModal.tsx
similarity index 81%
rename from src/elements/modalVbnt/ModalVbnt.tsx
rename to src/modals/VbntModal.tsx
index 0683b542b..139c9b632 100644
--- a/src/elements/modalVbnt/ModalVbnt.tsx
+++ b/src/modals/VbntModal.tsx
@@ -1,4 +1,3 @@
-import { Modal } from 'components/modal/Modal';
import { useMemo, useState } from 'react';
import { Token, updateUserBalances } from 'services/observables/tokens';
import { wait } from 'utils/pureFunctions';
@@ -15,7 +14,7 @@ import {
unstakeFailedNotification,
unstakeNotification,
} from 'services/notifications/notifications';
-import { useApproveModal } from 'hooks/useApproveModal';
+import { useApproval } from 'hooks/useApproval';
import { TokenInputPercentage } from 'components/tokenInputPercentage/TokenInputPercentage';
import { ApprovalContract } from 'services/web3/approval';
import { useAppSelector } from 'store';
@@ -26,26 +25,29 @@ import {
sendGovEvent,
} from 'services/api/googleTagManager/gov';
import { getFiat } from 'services/api/googleTagManager';
+import { useModal } from 'hooks/useModal';
+import { getIsModalOpen, getModalData } from 'store/modals/modals';
import { CurrencySelection } from 'elements/layoutHeader/CurrencySelection';
import { TokenCurrency } from 'store/user/user';
+import { Modal, ModalNames } from 'modals';
-interface ModalVbntProps {
- setIsOpen: Function;
- isOpen: boolean;
+interface VbntModalProps {
token: Token;
stake: boolean;
stakeBalance?: string;
onCompleted?: Function;
}
-export const ModalVbnt = ({
- setIsOpen,
- isOpen,
- token,
- stake,
- stakeBalance,
- onCompleted,
-}: ModalVbntProps) => {
+export const VbntModal = () => {
+ const { popModal } = useModal();
+ const isOpen = useAppSelector((state) =>
+ getIsModalOpen(state, ModalNames.VBnt)
+ );
+
+ const props = useAppSelector((state) =>
+ getModalData(state, ModalNames.VBnt)
+ );
+
const account = useAppSelector((state) => state.user.account);
const tokenCurrency = useAppSelector((state) => state.user.tokenCurrency);
const isCurrency = tokenCurrency === TokenCurrency.Currency;
@@ -56,11 +58,11 @@ export const ModalVbnt = ({
const stakeDisabled = !account || !amount || Number(amount) === 0;
- const fieldBlance = stake
- ? token.balance
- ? token.balance
+ const fieldBlance = props?.stake
+ ? props?.token.balance
+ ? props?.token.balance
: undefined
- : stakeBalance;
+ : props?.stakeBalance;
const govProperties: GovProperties = {
stake_input_type: getFiat(isCurrency),
@@ -76,10 +78,11 @@ export const ModalVbnt = ({
percentages.findIndex((x) => percentage.toFixed(10) === x.toFixed(10))
);
}
- }, [amount, token, percentages, fieldBlance]);
+ }, [amount, props?.token, percentages, fieldBlance]);
const handleStakeUnstake = async () => {
- if (stakeDisabled || !account) return;
+ if (stakeDisabled || !account || !props) return;
+ const { stake, token } = props;
sendGovEvent(GovEvent.Click, govProperties, stake);
sendGovEvent(GovEvent.WalletRequest, govProperties, stake);
@@ -127,20 +130,24 @@ export const ModalVbnt = ({
);
};
- const [checkApprove, ModalApprove] = useApproveModal(
- [{ amount: amount, token: token }],
+ const startApprove = useApproval(
+ props ? [{ amount: amount, token: props.token }] : [],
handleStakeUnstake,
ApprovalContract.Governance,
- () => sendGovEvent(GovEvent.UnlimitedPopup, govProperties, stake),
+ () => sendGovEvent(GovEvent.UnlimitedPopup, govProperties, props?.stake),
(isUnlimited: boolean) =>
sendGovEvent(
GovEvent.UnlimitedPopupSelect,
govProperties,
- stake,
+ props?.stake,
isUnlimited
)
);
+ if (!props) return null;
+
+ const { stake, token, onCompleted } = props;
+
const refreshBalances = async () => {
await wait(8000);
await updateUserBalances();
@@ -152,7 +159,7 @@ export const ModalVbnt = ({
}
- setIsOpen={setIsOpen}
+ setIsOpen={popModal}
isOpen={isOpen}
separator
large
@@ -170,8 +177,8 @@ export const ModalVbnt = ({