From 20437604a0e177d4c5d3824b7dd7231823b9cd60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B3za=20Nagy?= Date: Fri, 8 Nov 2024 12:55:27 +0100 Subject: [PATCH] feat: create ui for 1CY success modal --- .../modals/components/modal-container.tsx | 19 ++++++ .../icy-successful-flow-modal.tsx | 61 +++++++++++++++++++ ...ult-box.locked-asset-information-stack.tsx | 4 +- .../one-click-yield-vault-box.tsx | 2 +- src/app/store/slices/modal/modal.slice.ts | 6 ++ 5 files changed, 89 insertions(+), 3 deletions(-) create mode 100644 src/app/components/modals/successful-flow-modal/icy-successful-flow-modal.tsx diff --git a/src/app/components/modals/components/modal-container.tsx b/src/app/components/modals/components/modal-container.tsx index 84b71b2e..7cf4e9a6 100644 --- a/src/app/components/modals/components/modal-container.tsx +++ b/src/app/components/modals/components/modal-container.tsx @@ -7,6 +7,7 @@ import { modalActions } from '@store/slices/modal/modal.actions'; import { LedgerModal } from '../ledger-modal/ledger-modal'; import { SelectBitcoinWalletModal } from '../select-bitcoin-wallet-modal/select-bitcoin-wallet-modal'; +import { IcySuccessfulFlowModal } from '../successful-flow-modal/icy-successful-flow-modal'; import { SuccessfulFlowModal } from '../successful-flow-modal/successful-flow-modal'; export interface ModalComponentProps { @@ -21,6 +22,7 @@ export function ModalContainer(): React.JSX.Element { isSuccesfulFlowModalOpen, isSelectBitcoinWalletModalOpen, isLedgerModalOpen, + isIcySuccesfulFlowModalOpen, } = useSelector((state: RootState) => state.modal); const handleClosingModal = (actionCreator: () => AnyAction) => { @@ -60,6 +62,23 @@ export function ModalContainer(): React.JSX.Element { isOpen={isLedgerModalOpen} handleClose={() => handleClosingModal(modalActions.toggleLedgerModalVisibility)} /> + + handleClosingModal(() => + modalActions.toggleIcySuccessfulFlowModalVisibility({ + vaultUUID: '', + vault: undefined, + flow: 'mint', + assetAmount: 0, + }) + ) + } + vaultUUID={isIcySuccesfulFlowModalOpen[2] ? isIcySuccesfulFlowModalOpen[2] : ''} + /> ); } diff --git a/src/app/components/modals/successful-flow-modal/icy-successful-flow-modal.tsx b/src/app/components/modals/successful-flow-modal/icy-successful-flow-modal.tsx new file mode 100644 index 00000000..d30d0e11 --- /dev/null +++ b/src/app/components/modals/successful-flow-modal/icy-successful-flow-modal.tsx @@ -0,0 +1,61 @@ +import { useNavigate } from 'react-router-dom'; + +import { Button, HStack, Text, VStack } from '@chakra-ui/react'; +import { OneClickYieldVaultBox } from '@components/one-click-yield-vault-box/one-click-yield-vault-box'; +import { Vault as VaultModel } from '@models/vault'; + +import { ModalComponentProps } from '../components/modal-container'; +import { ModalVaultLayout } from '../components/modal.vault.layout'; + +interface IcySuccessfulFlowModalProps extends ModalComponentProps { + vaultUUID: string; + vault: VaultModel; + flow: 'mint' | 'burn'; + assetAmount: number; +} + +//modify this function with the unmint flow? +function getModalText(assetAmount?: number): string { + return `You have successfully deposited ${assetAmount} BTC and started earning yield.`; +} + +export function IcySuccessfulFlowModal({ + isOpen, + handleClose, + vault, + assetAmount, +}: IcySuccessfulFlowModalProps): React.JSX.Element { + const navigate = useNavigate(); + + function handleNavigateToMyVaults() { + navigate('/my-vaults'); + if (handleClose) { + handleClose(); + } + } + return ( + handleClose()}> + + + + {getModalText(assetAmount)} + + + + + + + ); +} diff --git a/src/app/components/one-click-yield-vault-box/components/one-click-yield-vault-box.locked-asset-information-stack.tsx b/src/app/components/one-click-yield-vault-box/components/one-click-yield-vault-box.locked-asset-information-stack.tsx index 3aa8f333..59fff1b7 100644 --- a/src/app/components/one-click-yield-vault-box/components/one-click-yield-vault-box.locked-asset-information-stack.tsx +++ b/src/app/components/one-click-yield-vault-box/components/one-click-yield-vault-box.locked-asset-information-stack.tsx @@ -8,8 +8,8 @@ export function LockedAssetInformationStack({ bitcoinAmount, }: LockedAssetInformationStackProps): React.JSX.Element { return ( - - + + {'Bitcoin {bitcoinAmount} diff --git a/src/app/components/one-click-yield-vault-box/one-click-yield-vault-box.tsx b/src/app/components/one-click-yield-vault-box/one-click-yield-vault-box.tsx index be9a1643..d71409d5 100644 --- a/src/app/components/one-click-yield-vault-box/one-click-yield-vault-box.tsx +++ b/src/app/components/one-click-yield-vault-box/one-click-yield-vault-box.tsx @@ -61,7 +61,7 @@ export function OneClickYieldVaultBox({ - + Deposited BTC diff --git a/src/app/store/slices/modal/modal.slice.ts b/src/app/store/slices/modal/modal.slice.ts index ef32b01b..75b6a5b1 100644 --- a/src/app/store/slices/modal/modal.slice.ts +++ b/src/app/store/slices/modal/modal.slice.ts @@ -6,6 +6,7 @@ interface ModalState { isSuccesfulFlowModalOpen: [boolean, Vault | undefined, string, string, number]; isSelectBitcoinWalletModalOpen: boolean; isLedgerModalOpen: boolean; + isIcySuccesfulFlowModalOpen: [boolean, Vault | undefined, string, string, number]; } const initialModalState: ModalState = { @@ -13,6 +14,7 @@ const initialModalState: ModalState = { isSuccesfulFlowModalOpen: [false, undefined, '', 'mint', 0], isSelectBitcoinWalletModalOpen: false, isLedgerModalOpen: false, + isIcySuccesfulFlowModalOpen: [false, undefined, '', 'mint', 0], }; export const modalSlice = createSlice({ @@ -38,5 +40,9 @@ export const modalSlice = createSlice({ toggleLedgerModalVisibility: state => { state.isLedgerModalOpen = !state.isLedgerModalOpen; }, + toggleIcySuccessfulFlowModalVisibility: (state, action) => { + const { vaultUUID, vault, flow, assetAmount } = action.payload; + state.isIcySuccesfulFlowModalOpen = [false, vault, vaultUUID, flow, assetAmount]; + }, }, });