feat: modified animation, added path aliases, fixed balance showing

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';
 

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 {

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}

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'}

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 {

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';
 

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

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);

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>

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);

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>
   );

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';
 

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'}>

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';

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');

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); }
+`;

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',

tsconfig.json

@@ -9,6 +9,8 @@
       "@pages/*": ["app/pages/*"],
       "@shared/*": ["shared/*"],
       "@hooks/*": ["app/hooks/*"],
+      "@providers/*": ["app/providers/*"],
+      "@styles/*": ["styles/*"],
     },
     "target": "ES2020",
     "useDefineForClassFields": true,

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') 
     }]
   }
 })