From f74b44426030353e27a76cf4187579ccbb682fe8 Mon Sep 17 00:00:00 2001
From: Polybius93 <adam.daniel.puskas@polybius-studios.com>
Date: Thu, 14 Dec 2023 13:03:08 +0100
Subject: [PATCH] feat: modified animation, added path aliases, fixed balance
 showing

---
 src/app/app.tsx                               |  2 +-
 .../components/lock-screen/lock-screen.tsx    |  2 +-
 .../components/mint-unmint.layout.tsx         | 47 ++-----------------
 .../mint/components/mint.layout.tsx           |  1 -
 .../protocol-summary-stack.tsx                |  2 +-
 .../transaction-form/transaction-form.tsx     |  2 +-
 .../transaction-summary.tsx                   | 19 +++-----
 .../components/unmint-vault-selector.tsx      |  5 +-
 .../components/mint-unmint/mint-unmint.tsx    |  2 +-
 .../select-wallet-modal.tsx                   |  3 +-
 .../successful-flow-modal.tsx                 |  1 +
 .../my-vaults-small/my-vaults-small.tsx       |  2 +-
 .../my-vaults-header-balance-info.tsx         |  2 +-
 .../components/my-vaults/my-vaults-large.tsx  |  4 +-
 src/app/hooks/use-ethereum.ts                 | 16 +++----
 src/styles/css-styles.ts                      | 10 ++++
 src/styles/modal-theme.ts                     |  2 +-
 tsconfig.json                                 |  2 +
 vite.config.ts                                |  8 ++++
 19 files changed, 52 insertions(+), 80 deletions(-)

diff --git a/src/app/app.tsx b/src/app/app.tsx
index 6600bb51..308339b6 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -2,10 +2,10 @@ import { Route } from 'react-router-dom';
 
 import { AppLayout } from '@components/app.layout';
 import { MyVaults } from '@pages/my-vaults/my-vaults';
+import { BalanceContextProvider } from '@providers/balance-context-provider';
 
 import { About } from './pages/about/about';
 import { Dashboard } from './pages/dashboard/dashboard';
-import { BalanceContextProvider } from './providers/balance-context-provider';
 import { BlockchainContextProvider } from './providers/blockchain-context-provider';
 import { VaultContextProvider } from './providers/vault-context-provider';
 
diff --git a/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx b/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
index 10deef6c..06f52836 100644
--- a/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
+++ b/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
@@ -5,9 +5,9 @@ import { Button, VStack } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
 import { useVaults } from '@hooks/use-vaults';
 import { Vault } from '@models/vault';
+import { BlockchainContext } from '@providers/blockchain-context-provider';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 
-import { BlockchainContext } from '../../../../providers/blockchain-context-provider';
 import { LockScreenProtocolFee } from './components/protocol-fee';
 
 interface LockScreenProps {
diff --git a/src/app/components/mint-unmint/components/mint-unmint.layout.tsx b/src/app/components/mint-unmint/components/mint-unmint.layout.tsx
index a2c40b7e..247f0959 100644
--- a/src/app/components/mint-unmint/components/mint-unmint.layout.tsx
+++ b/src/app/components/mint-unmint/components/mint-unmint.layout.tsx
@@ -1,47 +1,12 @@
-import { VStack, keyframes } from '@chakra-ui/react';
+import { VStack } from '@chakra-ui/react';
+import { boxShadowAnimation } from '@styles/css-styles';
 
 interface MintUnmintLayoutProps {
   children: React.ReactNode;
   animate?: boolean;
-  step?: number;
 }
 
-export function MintUnmintLayout({ children, animate, step }: MintUnmintLayoutProps): React.JSX.Element {
-  const glow = keyframes`
-  0% { box-shadow: 0 0 5px rgba(255,255,255,0); }
-  25% { box-shadow: 0 0 10px rgba(255,255,255,0.5); }
-  50% { box-shadow: 0 0 15px rgba(255,255,255,0.75); }
-  75% { box-shadow: 0 0 10px rgba(255,255,255,0.5); }
-  100% { box-shadow: 0 0 5px rgba(7,232,216,0); }
-`;
-
-const swimUp = keyframes`
-  0% {
-    transform: translateY(0px);
-    opacity: 1;
-  }
-  5% {
-    transform: translateY(0px);
-    opacity: 0.5;
-  }
-  15% {
-    transform: translateY(0px);
-    opacity: 0;
-  }
-  25% {
-    transform: translateY(175px);
-    opacity: 0;
-  }
-  50% {
-    transform: translateY(75px);
-    opacity: 0.5;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-`;
-
+export function MintUnmintLayout({ children, animate }: MintUnmintLayoutProps): React.JSX.Element {
   return (
     <VStack
       px={'15px'}
@@ -52,11 +17,7 @@ const swimUp = keyframes`
       borderRadius={'md'}
       borderColor={'border.cyan.01'}
       css={{
-        animation: animate
-        ? step === 0
-          ? `${swimUp} 0.5s ease-out`
-          : `${glow} 0.5s 2 ease-in-out`
-        : 'none',
+        animation: animate ? `${boxShadowAnimation} 0.5s 2 ease-in-out` : 'none',
       }}
     >
       {children}
diff --git a/src/app/components/mint-unmint/components/mint/components/mint.layout.tsx b/src/app/components/mint-unmint/components/mint/components/mint.layout.tsx
index baa51fd2..a9f67f1d 100644
--- a/src/app/components/mint-unmint/components/mint/components/mint.layout.tsx
+++ b/src/app/components/mint-unmint/components/mint/components/mint.layout.tsx
@@ -2,7 +2,6 @@ import { VStack } from '@chakra-ui/react';
 import { HasChildren } from '@models/has-children';
 
 export function MintLayout({ children }: HasChildren): React.JSX.Element {
-  
   return (
     <VStack
       alignContent={'start'}
diff --git a/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx b/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx
index 3e12a2fc..3cc84298 100644
--- a/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx
+++ b/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx
@@ -2,8 +2,8 @@
 import { useContext } from 'react';
 
 import { Skeleton, Text, VStack } from '@chakra-ui/react';
+import { BlockchainContext } from '@providers/blockchain-context-provider';
 
-import { BlockchainContext } from '../../../../providers/blockchain-context-provider';
 import { ProtocolSummaryStackLayout } from './components/protocol-summary-stack.layout';
 
 export function ProtocolSummaryStack(): React.JSX.Element {
diff --git a/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx b/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
index ac4fecf6..fec9e1e1 100644
--- a/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
+++ b/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
@@ -3,9 +3,9 @@ import { useContext, useState } from 'react';
 import { Button, FormControl, FormErrorMessage, Text, VStack, useToast } from '@chakra-ui/react';
 import { customShiftValue } from '@common/utilities';
 import { EthereumError } from '@models/error-types';
+import { BlockchainContext } from '@providers/blockchain-context-provider';
 import { Form, Formik } from 'formik';
 
-import { BlockchainContext } from '../../../../providers/blockchain-context-provider';
 import { TransactionFormInput } from './components/transaction-form-input';
 import { TransactionFormWarning } from './components/transaction-form-warning';
 
diff --git a/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx b/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx
index 68e8ed3f..4cfc561e 100644
--- a/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx
+++ b/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx
@@ -1,5 +1,5 @@
 import { useDispatch } from 'react-redux';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { Button, HStack, Spinner, Stack, Text, VStack } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
@@ -35,12 +35,14 @@ interface TransactionSummaryProps {
   currentStep: [number, string];
   flow: 'mint' | 'unmint';
   blockchain: 'ethereum' | 'bitcoin';
+  handleClose?: () => void;
 }
 
 export function TransactionSummary({
   currentStep,
   flow,
   blockchain,
+  handleClose,
 }: TransactionSummaryProps): React.JSX.Element {
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -68,19 +70,9 @@ export function TransactionSummary({
           />
         </>
       )}
-      <Stack
-        p={'15px'}
-        w={'100%'}
-        border={'1px solid'}
-        borderRadius={'md'}
-        borderColor={'border.cyan.01'}
-      >
+      <Stack p={'5px'} w={'100%'}>
         <Text color={'white.01'} fontSize={'sm'}>
-          You can check all of your vaults' status under{' '}
-          <Text as={Link} to={'/my-vaults'} color={'accent.cyan.01'} textDecoration={'underline'}>
-            My Vaults
-          </Text>{' '}
-          tab.
+          View vault statuses in the My Vaults tab.
         </Text>
       </Stack>
       <Button
@@ -92,6 +84,7 @@ export function TransactionSummary({
               : mintUnmintActions.setUnmintStep([0, ''])
           );
           navigate('/my-vaults');
+          handleClose && handleClose();
         }}
       >
         View in My Vaults
diff --git a/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx b/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx
index 067df3d0..08f476ec 100644
--- a/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx
+++ b/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx
@@ -6,9 +6,8 @@ import { VaultsListGroupContainer } from '@components/vaults-list/components/vau
 import { VaultsList } from '@components/vaults-list/vaults-list';
 import { useVaults } from '@hooks/use-vaults';
 import { Vault } from '@models/vault';
-
-import { scrollBarCSS } from '../../../../../../styles/css-styles';
-import { BlockchainContext } from '../../../../../providers/blockchain-context-provider';
+import { BlockchainContext } from '@providers/blockchain-context-provider';
+import { scrollBarCSS } from '@styles/css-styles';
 
 export function UnmintVaultSelector(): React.JSX.Element {
   const [selectedVault, setSelectedVault] = useState<Vault | undefined>(undefined);
diff --git a/src/app/components/mint-unmint/mint-unmint.tsx b/src/app/components/mint-unmint/mint-unmint.tsx
index 69b4db87..2eccc282 100644
--- a/src/app/components/mint-unmint/mint-unmint.tsx
+++ b/src/app/components/mint-unmint/mint-unmint.tsx
@@ -42,7 +42,7 @@ export function MintUnmint({ address }: MintUnmintContainerProps): React.JSX.Ele
   }
 
   return (
-    <MintUnmintLayout animate={animate} step={activeTab === 0 ? mintStep[0] : unmintStep[0]}>
+    <MintUnmintLayout animate={animate}>
       <Tabs variant="unstyled" index={activeTab} onChange={handleTabsChange}>
         <TabList>
           <Tab>Mint</Tab>
diff --git a/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx b/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx
index 302f3f3a..a356c3eb 100644
--- a/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx
+++ b/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx
@@ -8,8 +8,7 @@ import { SelectWalletMenu } from '@components/modals/select-wallet-modal/compone
 import { SelectNetworkButton } from '@components/select-network-button/select-network-button';
 import { Network } from '@models/network';
 import { WalletType, ethereumWallets } from '@models/wallet';
-
-import { BlockchainContext } from '../../../providers/blockchain-context-provider';
+import { BlockchainContext } from '@providers/blockchain-context-provider';
 
 export function SelectWalletModal({ isOpen, handleClose }: ModalComponentProps): React.JSX.Element {
   const blockchainContext = useContext(BlockchainContext);
diff --git a/src/app/components/modals/successful-flow-modal/successful-flow-modal.tsx b/src/app/components/modals/successful-flow-modal/successful-flow-modal.tsx
index 07d0de9c..2de11794 100644
--- a/src/app/components/modals/successful-flow-modal/successful-flow-modal.tsx
+++ b/src/app/components/modals/successful-flow-modal/successful-flow-modal.tsx
@@ -20,6 +20,7 @@ export function SuccessfulFlowModal({
         currentStep={[flow === 'mint' ? 3 : 2, vaultUUID]}
         flow={flow}
         blockchain={'ethereum'}
+        handleClose={() => handleClose()}
       />
     </ModalLayout>
   );
diff --git a/src/app/components/my-vaults-small/my-vaults-small.tsx b/src/app/components/my-vaults-small/my-vaults-small.tsx
index 476e596b..c6da6b6a 100644
--- a/src/app/components/my-vaults-small/my-vaults-small.tsx
+++ b/src/app/components/my-vaults-small/my-vaults-small.tsx
@@ -4,8 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import { Button, Skeleton } from '@chakra-ui/react';
 import { VaultsListGroupBlankContainer } from '@components/vaults-list/components/vaults-list-group-blank-container';
 import { VaultsList } from '@components/vaults-list/vaults-list';
+import { VaultContext } from '@providers/vault-context-provider';
 
-import { VaultContext } from '../../providers/vault-context-provider';
 import { VaultsListGroupContainer } from '../vaults-list/components/vaults-list-group-container';
 import { MyVaultsSmallLayout } from './components/my-vaults-small.layout';
 
diff --git a/src/app/components/my-vaults/components/my-vaults-header/components/my-vaults-header-balance-info.tsx b/src/app/components/my-vaults/components/my-vaults-header/components/my-vaults-header-balance-info.tsx
index ff5119d6..5c99f0ba 100644
--- a/src/app/components/my-vaults/components/my-vaults-header/components/my-vaults-header-balance-info.tsx
+++ b/src/app/components/my-vaults/components/my-vaults-header/components/my-vaults-header-balance-info.tsx
@@ -20,7 +20,7 @@ export function MyVaultsHeaderBalanceInfo({
       <Text color={'accent.cyan.01'} fontWeight={600} fontSize={'md'}>
         {title}
       </Text>
-      <Skeleton isLoaded={!!assetAmount} h={'auto'} w={'100%'}>
+      <Skeleton isLoaded={assetAmount !== undefined} h={'auto'} w={'100%'}>
         <HStack>
           <Image src={imageSrc} alt={altText} boxSize={'25px'} />
           <Text color={'white'} fontWeight={800} fontSize={'xl'}>
diff --git a/src/app/components/my-vaults/my-vaults-large.tsx b/src/app/components/my-vaults/my-vaults-large.tsx
index 0c61d9b8..574ae6f7 100644
--- a/src/app/components/my-vaults/my-vaults-large.tsx
+++ b/src/app/components/my-vaults/my-vaults-large.tsx
@@ -5,10 +5,10 @@ import { HStack } from '@chakra-ui/react';
 import { VaultsListGroupBlankContainer } from '@components/vaults-list/components/vaults-list-group-blank-container';
 import { VaultsListGroupContainer } from '@components/vaults-list/components/vaults-list-group-container';
 import { VaultsList } from '@components/vaults-list/vaults-list';
+import { BalanceContext } from '@providers/balance-context-provider';
+import { VaultContext } from '@providers/vault-context-provider';
 import { RootState } from '@store/index';
 
-import { BalanceContext } from '../../providers/balance-context-provider';
-import { VaultContext } from '../../providers/vault-context-provider';
 import { MyVaultsLargeHeader } from './components/my-vaults-header/my-vaults-header';
 import { MyVaultsLargeLayout } from './components/my-vaults-large.layout';
 import { MyVaultsSetupInformationStack } from './components/my-vaults-setup-information-stack';
diff --git a/src/app/hooks/use-ethereum.ts b/src/app/hooks/use-ethereum.ts
index 54a7b127..449714ff 100644
--- a/src/app/hooks/use-ethereum.ts
+++ b/src/app/hooks/use-ethereum.ts
@@ -38,12 +38,12 @@ export interface UseEthereumReturnType {
 }
 
 function isMetaMask(provider: any): boolean {
-  console.log('provider', provider)
-  console.log('typeof provider', typeof provider)
-  console.log('provider !== null', provider !== null)
-  console.log('metamaskInProvider', '_metamask' in provider )
-  console.log('isMetaMaskInProvider', 'isMetaMask' in provider)
-  console.log('provider.isMetaMask', provider.isMetaMask)
+  console.log('provider', provider);
+  console.log('typeof provider', typeof provider);
+  console.log('provider !== null', provider !== null);
+  console.log('metamaskInProvider', '_metamask' in provider);
+  console.log('isMetaMaskInProvider', 'isMetaMask' in provider);
+  console.log('provider.isMetaMask', provider.isMetaMask);
   return (
     typeof provider === 'object' &&
     provider !== null &&
@@ -114,7 +114,7 @@ export function useEthereum(): UseEthereumReturnType {
     if (isMetaMask(ethereum)) {
       return ethereum;
     } else {
-     return undefined;
+      return undefined;
     }
   }
 
@@ -130,7 +130,7 @@ export function useEthereum(): UseEthereumReturnType {
   function getWalletProvider(walletType: WalletType): any {
     const { ethereum } = window;
 
-    console.log('ethereum', ethereum)
+    console.log('ethereum', ethereum);
     if (!ethereum) {
       alert('Install MetaMask!');
       throw new EthereumError('No ethereum wallet found');
diff --git a/src/styles/css-styles.ts b/src/styles/css-styles.ts
index 7b07d307..ee79e944 100644
--- a/src/styles/css-styles.ts
+++ b/src/styles/css-styles.ts
@@ -1,3 +1,5 @@
+import { keyframes } from '@emotion/react';
+
 export const scrollBarCSS = {
   '&::-webkit-scrollbar': {
     background: 'rgba(255,255,255,0.25)',
@@ -10,3 +12,11 @@ export const scrollBarCSS = {
     background: 'rgba(7,232,216,1)',
   },
 };
+
+export const boxShadowAnimation = keyframes`
+0% { box-shadow: 0 0 5px rgba(255,255,255,0); }
+25% { box-shadow: 0 0 10px rgba(255,255,255,0.5); }
+50% { box-shadow: 0 0 15px rgba(255,255,255,0.75); }
+75% { box-shadow: 0 0 10px rgba(255,255,255,0.5); }
+100% { box-shadow: 0 0 5px rgba(7,232,216,0); }
+`;
diff --git a/src/styles/modal-theme.ts b/src/styles/modal-theme.ts
index 6e164d62..0e19a257 100644
--- a/src/styles/modal-theme.ts
+++ b/src/styles/modal-theme.ts
@@ -5,7 +5,7 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe
 
 const baseStyle = definePartsStyle({
   dialogContainer: {
-    top: '25%',
+    top: '19.5%',
   },
   dialog: {
     padding: '15px',
diff --git a/tsconfig.json b/tsconfig.json
index 21bd8335..c595b677 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,8 @@
       "@pages/*": ["app/pages/*"],
       "@shared/*": ["shared/*"],
       "@hooks/*": ["app/hooks/*"],
+      "@providers/*": ["app/providers/*"],
+      "@styles/*": ["styles/*"],
     },
     "target": "ES2020",
     "useDefineForClassFields": true,
diff --git a/vite.config.ts b/vite.config.ts
index cd835bfc..c61cfc3e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -33,6 +33,14 @@ export default defineConfig({
     { 
       find: "@hooks", 
       replacement: resolve(__dirname, './src/app/hooks') 
+    },
+    { 
+      find: "@providers", 
+      replacement: resolve(__dirname, './src/app/providers') 
+    },
+    { 
+      find: "@styles", 
+      replacement: resolve(__dirname, './src/styles') 
     }]
   }
 })