From dc7d3bd2e68ac545948894c9cf612ef818f5cdff Mon Sep 17 00:00:00 2001
From: Polybius93 <adam.daniel.puskas@polybius-studios.com>
Date: Wed, 13 Dec 2023 17:33:48 +0100
Subject: [PATCH] feat: added flow animation

---
 .../components/mint-unmint.layout.tsx         | 53 +++++++++++++++++--
 .../mint/components/mint.layout.tsx           |  1 +
 .../components/mint-unmint/mint-unmint.tsx    | 13 ++++-
 src/app/hooks/use-ethereum.ts                 | 30 +++++++++--
 src/shared/models/wallet.ts                   |  1 +
 5 files changed, 88 insertions(+), 10 deletions(-)

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 5d6c1464..a2c40b7e 100644
--- a/src/app/components/mint-unmint/components/mint-unmint.layout.tsx
+++ b/src/app/components/mint-unmint/components/mint-unmint.layout.tsx
@@ -1,7 +1,47 @@
-import { VStack } from '@chakra-ui/react';
-import { HasChildren } from '@models/has-children';
+import { VStack, keyframes } from '@chakra-ui/react';
+
+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 }: HasChildren): React.JSX.Element {
   return (
     <VStack
       px={'15px'}
@@ -11,6 +51,13 @@ export function MintUnmintLayout({ children }: HasChildren): React.JSX.Element {
       border={'1px solid'}
       borderRadius={'md'}
       borderColor={'border.cyan.01'}
+      css={{
+        animation: animate
+        ? step === 0
+          ? `${swimUp} 0.5s ease-out`
+          : `${glow} 0.5s 2 ease-in-out`
+        : 'none',
+      }}
     >
       {children}
     </VStack>
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 a9f67f1d..baa51fd2 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,6 +2,7 @@ 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/mint-unmint.tsx b/src/app/components/mint-unmint/mint-unmint.tsx
index 62b6fc12..69b4db87 100644
--- a/src/app/components/mint-unmint/mint-unmint.tsx
+++ b/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} step={activeTab === 0 ? mintStep[0] : unmintStep[0]}>
       <Tabs variant="unstyled" index={activeTab} onChange={handleTabsChange}>
         <TabList>
           <Tab>Mint</Tab>
diff --git a/src/app/hooks/use-ethereum.ts b/src/app/hooks/use-ethereum.ts
index 28740c5c..54a7b127 100644
--- a/src/app/hooks/use-ethereum.ts
+++ b/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',
       });
diff --git a/src/shared/models/wallet.ts b/src/shared/models/wallet.ts
index d20102c8..b18eea18 100644
--- a/src/shared/models/wallet.ts
+++ b/src/shared/models/wallet.ts
@@ -1,6 +1,7 @@
 export enum WalletType {
   Metamask = 'MetaMask',
   Coinbase = 'CoinbaseWallet',
+  Trust = 'TrustWallet',
 }
 
 export interface Wallet {