feat: create ui for 1CY success modal (#210)

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)}
       />
+      <IcySuccessfulFlowModal
+        isOpen={isIcySuccesfulFlowModalOpen[0]}
+        vault={isIcySuccesfulFlowModalOpen[1]!}
+        flow={isIcySuccesfulFlowModalOpen[3] as 'mint' | 'burn'}
+        assetAmount={isIcySuccesfulFlowModalOpen[4]}
+        handleClose={() =>
+          handleClosingModal(() =>
+            modalActions.toggleIcySuccessfulFlowModalVisibility({
+              vaultUUID: '',
+              vault: undefined,
+              flow: 'mint',
+              assetAmount: 0,
+            })
+          )
+        }
+        vaultUUID={isIcySuccesfulFlowModalOpen[2] ? isIcySuccesfulFlowModalOpen[2] : ''}
+      />
     </>
   );
 }

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 (
+    <ModalVaultLayout title={'Success!'} isOpen={isOpen} onClose={() => handleClose()}>
+      <VStack w={'100%'} spacing={'25px'}>
+        <HStack w={'100%'}>
+          <Text color={'grey.01'} fontSize={'sm'}>
+            {getModalText(assetAmount)}
+          </Text>
+        </HStack>
+        <OneClickYieldVaultBox oneClickYieldVault={vault} />
+        <Button
+          variant={'depositBTC'}
+          w={'100%'}
+          p={'2.5px'}
+          bg={'orange.01'}
+          color={'white.01'}
+          fontSize={'sm'}
+          fontWeight={'bold'}
+          _hover={{ bg: 'white.01', color: 'orange.01' }}
+          onClick={() => handleNavigateToMyVaults()}
+        >
+          View in My Vaults
+        </Button>
+      </VStack>
+    </ModalVaultLayout>
+  );
+}

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 (
-    <HStack w={'40%'}>
-      <HStack w={'50%'}>
+    <HStack w={'45%'}>
+      <HStack w={'45%'}>
         <Image src={'./images/logos/bitcoin-logo.svg'} alt={'Bitcoin Logo'} boxSize={'35px'} />
         <Text fontSize={'lg'} fontWeight={'bold'} color={'white.01'}>
           {bitcoinAmount}

src/app/components/one-click-yield-vault-box/one-click-yield-vault-box.tsx

@@ -61,7 +61,7 @@ export function OneClickYieldVaultBox({
         </HStack>
       </VStack>
       <VStack w={'100%'} alignItems={'start'}>
-        <HStack w={'35%'} justifyContent={'space-between'}>
+        <HStack justifyContent={'space-between'}>
           <Text fontWeight={'bold'} fontSize={'sm'} color={'white.02'} alignSelf={'start'}>
             Deposited BTC
           </Text>

src/app/store/slices/modal/modal.slice.ts

@@ -6,13 +6,15 @@ interface ModalState {
   isSuccesfulFlowModalOpen: [boolean, Vault | undefined, string, string, number];
   isSelectBitcoinWalletModalOpen: boolean;
   isLedgerModalOpen: boolean;
+  isIcySuccesfulFlowModalOpen: [boolean, Vault | undefined, string, string, number];
 }
 
 const initialModalState: ModalState = {
   isSelectWalletModalOpen: false,
   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];
+    },
   },
 });