Merge pull request #3 from rarimo/update/animations

Update/animations
rarimo · Nov 21, 2023 · a0ca797 · a0ca797
2 parents 744fc91 + 7db2d0a
commit a0ca797
Show file tree

Hide file tree

Showing 8 changed files with 220 additions and 114 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react'
 import { ToastContainer } from 'react-toastify'
 
-import { AppFooter, AppNavbar, InvalidChainModal, Loader } from '@/common'
+import { AppFooter, AppNavbar, InvalidChainModal } from '@/common'
 import { useMetamaskZkpSnapContext, useWeb3Context } from '@/contexts'
 import { bus, BUS_EVENTS, ErrorHandler, isWebpSupported } from '@/helpers'
 import { useNotification, useViewportSizes } from '@/hooks'
@@ -90,8 +90,11 @@ const App: FC<HTMLAttributes<HTMLDivElement>> = ({ children }) => {
   return (
     <>
       <AppNavbar />
-      <div className='app__main' key={Number(isValidChain)}>
-        {isAppInitialized ? children : <Loader />}
+      <div
+        className='app__main'
+        key={provider?.isConnected ? Number(isValidChain) : 'app_main'}
+      >
+        {isAppInitialized && children}
       </div>
 
       <AppFooter />

diff --git a/src/contexts/FormStepperContext/FormStepperContext.tsx b/src/contexts/FormStepperContext/FormStepperContext.tsx
@@ -59,6 +59,8 @@ interface FormStepperContextValue {
   StepComponent: ReactElement
   SidebarComponent?: ReactElement
 
+  isSidebarExist: boolean
+
   handleError: (error: Error) => void
   nextStep: () => void
   prevStep: () => void
@@ -80,6 +82,8 @@ export const formStepperContext = createContext<FormStepperContextValue>({
   StepComponent: <></>,
   SidebarComponent: <></>,
 
+  isSidebarExist: true,
+
   handleError: () => {
     throw new TypeError('handleError method is not defined')
   },
@@ -253,6 +257,8 @@ const FormStepperContextProvider: FC<Props> = ({ children }) => {
   ])
 
   const init = useCallback(async () => {
+    if (provider?.isConnected && !isValidChain) return
+
     try {
       let identityBigIntString = ''
 
@@ -291,6 +297,7 @@ const FormStepperContextProvider: FC<Props> = ({ children }) => {
 
     setIsLoaded(true)
   }, [
+    isValidChain,
     isSnapInstalled,
     provider?.isConnected,
     handleWorldcoinRedirect,
@@ -519,6 +526,11 @@ const FormStepperContextProvider: FC<Props> = ({ children }) => {
     return currentStep ? STEPS_SIDEBAR_CONTENT[currentStep] : undefined
   }, [STEPS_SIDEBAR_CONTENT, currentStep])
 
+  const isSidebarExist = useMemo(
+    () => currentStep !== Steps.ProofSubmittedStep,
+    [currentStep],
+  )
+
   const handleError = useCallback(
     (error: Error) => {
       ErrorHandler.processWithoutFeedback(error)
@@ -565,6 +577,8 @@ const FormStepperContextProvider: FC<Props> = ({ children }) => {
         StepComponent,
         SidebarComponent,
 
+        isSidebarExist,
+
         nextStep,
         prevStep,
         setStep,

diff --git a/src/contexts/ZkpContext/ZkpContext.tsx b/src/contexts/ZkpContext/ZkpContext.tsx
@@ -39,6 +39,10 @@ interface ZkpContextValue {
   identityIdBigIntString: string
   isZKPRequestPending: boolean
   isProveRequestPending: boolean
+
+  isEthAddressProved: boolean
+  isDidProved: boolean
+
   verifiableCredentials?: W3CCredential
   isUserSubmittedZkp: boolean
   zkProof?: ZKProof
@@ -76,6 +80,9 @@ export const zkpContext = createContext<ZkpContextValue>({
   isProveRequestPending: false,
   isUserSubmittedZkp: false,
 
+  isEthAddressProved: false,
+  isDidProved: false,
+
   getClaimOffer: async () => {
     throw new TypeError(`getClaimOffer() not implemented`)
   },
@@ -120,6 +127,9 @@ const ZkpContextProvider: FC<Props> = ({ children, ...rest }) => {
   const { provider } = useWeb3Context()
   const zkpSnap = useMetamaskZkpSnapContext()
 
+  const [isEthAddressProved, setIsEthAddressProved] = useState(false)
+  const [isDidProved, setIsDidProved] = useState(false)
+
   const { isIdentityProved, isSenderAddressProved, getProveIdentityTxBody } =
     useSbtIdentityVerifier()
 
@@ -358,6 +368,9 @@ const ZkpContextProvider: FC<Props> = ({ children, ...rest }) => {
 
       if (!isDIDProved && !isAddressProved) return ''
 
+      setIsEthAddressProved(!!isAddressProved)
+      setIsDidProved(!!isDIDProved)
+
       if (isDIDProved && isAddressProved) {
         provedMsg = `Your identity ${currentIdentityBigIntString} has been verified as human, and the wallet address ${provider?.address} is already linked to it.`
       } else if (isDIDProved && !isAddressProved) {
@@ -385,6 +398,10 @@ const ZkpContextProvider: FC<Props> = ({ children, ...rest }) => {
         isZKPRequestPending,
         isProveRequestPending,
         isUserSubmittedZkp,
+
+        isEthAddressProved,
+        isDidProved,
+
         zkProof,
 
         txSubmitExplorerLink,

diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
@@ -70,6 +70,8 @@ const MainPage: FC<Props> = ({ className, ...rest }) => {
     StepComponent,
     SidebarComponent,
 
+    isSidebarExist,
+
     setIsSidebarAnimationCompleted,
 
     isSidebarClosingDisabled,
@@ -107,69 +109,75 @@ const MainPage: FC<Props> = ({ className, ...rest }) => {
   return (
     <div className={['main-page', className].join(' ')} {...rest}>
       {isLoaded ? (
-        isLoadFailed ? (
-          <motion.div className='main-page__content'>
-            <motion.div className='main-page__step'>
-              <ErrorMessage
-                message={`Ooops... something went wrong, please reload page`}
-              />
-            </motion.div>
-          </motion.div>
-        ) : isDeviceMobile ? (
-          <div className='main-page__mobile-warning'>
-            <div className='main-page__mobile-warninh-icon-wrp'>
-              <Icon
-                className='main-page__mobile-warninh-icon'
-                name={ICON_NAMES.deviceMobile}
-              />
-            </div>
-            <h4 className='main-page__mobile-warning-title'>
-              {`Mobile version is not yet available.`}
-            </h4>
-            <span className='main-page__mobile-warning-subtitle'>
-              {`Please use a desktop device`}
-            </span>
-          </div>
-        ) : (
-          <LayoutGroup>
+        <LayoutGroup>
+          <motion.div
+            className='main-page__content'
+            key={mainContentUuid}
+            variants={
+              SidebarComponent
+                ? mainContentAnimationVariants
+                : mainContentFillAnimationVariants
+            }
+            initial='collapsed'
+            animate='collapsed'
+            exit='open'
+            transition={{
+              duration: '0.75',
+              ease: 'backInOut',
+            }}
+          >
             <motion.div
-              className='main-page__content'
-              key={mainContentUuid}
-              variants={
-                isSidebarOpen && SidebarComponent
-                  ? mainContentAnimationVariants
-                  : mainContentFillAnimationVariants
-              }
-              initial='open'
-              animate='collapsed'
-              exit='open'
+              className='main-page__steps-indicator'
+              animate={{
+                width: `${stepsProgress}%`,
+              }}
               transition={{
-                duration: '0.75',
+                duration: '0.5',
                 ease: 'backInOut',
               }}
-            >
-              <motion.div
-                className='main-page__steps-indicator'
-                animate={{
-                  width: `${stepsProgress}%`,
-                }}
-                transition={{
-                  duration: '0.5',
-                  ease: 'backInOut',
-                }}
-              />
-
-              <AnimatePresence mode='wait' initial={false}>
-                {StepComponent}
-              </AnimatePresence>
-
-              <AnimatePresence>
-                {!isSidebarOpen && SidebarToggler('expand')}
-              </AnimatePresence>
-            </motion.div>
+            />
+
+            <AnimatePresence mode={'wait'}>
+              {isLoadFailed ? (
+                <motion.div
+                  key={'main-page__error-component'}
+                  className='main-page__step'
+                >
+                  <ErrorMessage
+                    message={`Ooops... something went wrong, please reload page`}
+                  />
+                </motion.div>
+              ) : isDeviceMobile ? (
+                <div
+                  key={'main-page__error-mobile-component'}
+                  className='main-page__mobile-warning'
+                >
+                  <div className='main-page__mobile-warninh-icon-wrp'>
+                    <Icon
+                      className='main-page__mobile-warninh-icon'
+                      name={ICON_NAMES.deviceMobile}
+                    />
+                  </div>
+                  <h4 className='main-page__mobile-warning-title'>
+                    {`Mobile version is not yet available.`}
+                  </h4>
+                  <span className='main-page__mobile-warning-subtitle'>
+                    {`Please use a desktop device`}
+                  </span>
+                </div>
+              ) : (
+                StepComponent
+              )}
+            </AnimatePresence>
 
             <AnimatePresence>
-              {isSidebarOpen && SidebarComponent && (
+              {!isSidebarOpen && SidebarToggler('expand')}
+            </AnimatePresence>
+          </motion.div>
+
+          {isSidebarExist && (
+            <AnimatePresence initial={false} mode={'wait'}>
+              {isSidebarOpen && (
                 <motion.div
                   className='main-page__sidebar'
                   key={sidebarUuid}
@@ -179,7 +187,6 @@ const MainPage: FC<Props> = ({ className, ...rest }) => {
                   exit='collapsed'
                   transition={{
                     duration: '0.75',
-                    delay: 0.5,
                     ease: 'backInOut',
                   }}
                   onAnimationComplete={() => {
@@ -198,12 +205,13 @@ const MainPage: FC<Props> = ({ className, ...rest }) => {
                 </motion.div>
               )}
             </AnimatePresence>
-          </LayoutGroup>
-        )
+          )}
+        </LayoutGroup>
       ) : (
-        <div className='main-page__loader-wrp main-page__content'>
-          <Loader className='main-page__loader' />
-        </div>
+        <Loader
+          key={'main-page__loader-component'}
+          className='main-page__loader'
+        />
       )}
     </div>
   )

diff --git a/...inPage/components/5_ProofGenerating/components/SidebarContentVCLoading/SidebarContent.tsx b/...inPage/components/5_ProofGenerating/components/SidebarContentVCLoading/SidebarContent.tsx
@@ -48,7 +48,7 @@ const SidebarContent: FC<SidebarProps> = ({ className, ...rest }) => {
         <img
           ref={imageSeq}
           className='app__step-sidebar-content-img'
-          src='/images/sidebar-img-5.svg'
+          src='/images/sequences/sidebar-5/5_0000.png'
           alt='sidebar-content'
         />
       </div>