Merge pull request #36 from DLC-link/feat/ui-animation

feat: added dashboard animation

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,7 +1,12 @@
 import { VStack } from '@chakra-ui/react';
-import { HasChildren } from '@models/has-children';
+import { boxShadowAnimation } from '@styles/css-styles';
 
-export function MintUnmintLayout({ children }: HasChildren): React.JSX.Element {
+interface MintUnmintLayoutProps {
+  children: React.ReactNode;
+  animate?: boolean;
+}
+
+export function MintUnmintLayout({ children, animate }: MintUnmintLayoutProps): React.JSX.Element {
   return (
     <VStack
       px={'15px'}
@@ -11,6 +16,9 @@ export function MintUnmintLayout({ children }: HasChildren): React.JSX.Element {
       border={'1px solid'}
       borderRadius={'md'}
       borderColor={'border.cyan.01'}
+      css={{
+        animation: animate ? `${boxShadowAnimation} 0.5s 2 ease-in-out` : 'none',
+      }}
     >
       {children}
     </VStack>

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

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import {
@@ -25,15 +26,23 @@ interface MintUnmintContainerProps {
 
 export function MintUnmint({ address }: MintUnmintContainerProps): React.JSX.Element {
   const dispatch = useDispatch();
+  const [animate, setAnimate] = useState(false);
 
-  const { activeTab } = useSelector((state: RootState) => state.mintunmint);
+  const { activeTab, mintStep, unmintStep } = useSelector((state: RootState) => state.mintunmint);
+
+  useEffect(() => {
+    setAnimate(true);
+    setTimeout(() => {
+      setAnimate(false);
+    }, 1000);
+  }, [mintStep, unmintStep]);
 
   function handleTabsChange(index: number) {
     dispatch(mintUnmintActions.setActiveTab(index));
   }
 
   return (
-    <MintUnmintLayout>
+    <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

@@ -37,6 +37,22 @@ export interface UseEthereumReturnType {
   isLoaded: boolean;
 }
 
+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);
+  return (
+    typeof provider === 'object' &&
+    provider !== null &&
+    '_metamask' in provider &&
+    'isMetaMask' in provider &&
+    provider.isMetaMask === true
+  );
+}
+
 function throwEthereumError(message: string, error: any): void {
   if (error.code === Logger.errors.CALL_EXCEPTION) {
     throw new EthereumError(
@@ -94,15 +110,16 @@ export function useEthereum(): UseEthereumReturnType {
     };
   }
 
-  function getProvider(ethereum: any, walletType: WalletType): any {
-    if ('providers' in ethereum) {
-      return ethereum.providers.find((provider: any) => provider[`is${walletType}`]);
+  function getProvider(ethereum: any): any {
+    if (isMetaMask(ethereum)) {
+      return ethereum;
+    } else {
+      return undefined;
     }
-    return ethereum[`is${walletType}`] ? ethereum : undefined;
   }
 
   function checkWalletProvider(ethereum: any, walletType: WalletType): any {
-    const ethereumWalletProvider = getProvider(ethereum, walletType);
+    const ethereumWalletProvider = getProvider(ethereum);
     if (!ethereumWalletProvider) {
       alert(`Install ${walletType}!`);
       throw new EthereumError(`${walletType} wallet not found`);
@@ -113,6 +130,7 @@ export function useEthereum(): UseEthereumReturnType {
   function getWalletProvider(walletType: WalletType): any {
     const { ethereum } = window;
 
+    console.log('ethereum', ethereum);
     if (!ethereum) {
       alert('Install MetaMask!');
       throw new EthereumError('No ethereum wallet found');
@@ -252,6 +270,8 @@ export function useEthereum(): UseEthereumReturnType {
       if (!walletType) throw new Error('Wallet not initialized');
       const walletProvider = getWalletProvider(walletType);
 
+      console.log('walletProvider', walletProvider);
+
       const ethereumAccounts = await walletProvider.request({
         method: 'eth_requestAccounts',
       });

src/shared/models/wallet.ts

@@ -1,6 +1,7 @@
 export enum WalletType {
   Metamask = 'MetaMask',
   Coinbase = 'CoinbaseWallet',
+  Trust = 'TrustWallet',
 }
 
 export interface Wallet {

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