chore: react 18 fixes

client/src/App.tsx

@@ -50,7 +50,7 @@ function App() {
   return (
     <ThemeProvider>
       <AuthProvider>
-        <AnimatePresence exitBeforeEnter>
+        <AnimatePresence mode="wait">
           <Routes location={location} key={location.pathname}>
             <Route path="/" element={<LandingPage />} />
             <Route path="/demo" element={<OnboardingPage />} />

client/src/index.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
 import { PersistGate } from 'redux-persist/integration/react'
@@ -11,18 +10,18 @@ import { KBar } from './utils/KBar'
 
 const { store, persistor } = Redux
 
-render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <BrowserRouter>
-          <KBar>
-            <App />
-          </KBar>
-        </BrowserRouter>
-      </PersistGate>
-    </Provider>
-  </React.StrictMode>,
+const container = document.getElementById('root')
 
-  document.getElementById('root')
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(container!)
+root.render(
+  <Provider store={store}>
+    <PersistGate loading={null} persistor={persistor}>
+      <BrowserRouter>
+        <KBar>
+          <App />
+        </KBar>
+      </BrowserRouter>
+    </PersistGate>
+  </Provider>
 )

client/src/pages/dashboard/DashboardPage.tsx

@@ -106,7 +106,7 @@ export const DashboardPage: React.FC = () => {
           </div>
         </>
       ) : (
-        <AnimatePresence initial={false} exitBeforeEnter onExitComplete={() => null}>
+        <AnimatePresence initial={false} mode="wait" onExitComplete={() => null}>
           <Modal title={ERROR_TITLE} description={ERROR_DESCRIPTION} onOk={routeError} />
         </AnimatePresence>
       )}

client/src/pages/onboarding/OnboardingContainer.tsx

@@ -249,7 +249,7 @@ export const OnboardingContainer: React.FC<Props> = ({
             <FiLogOut onClick={showLeaveModal} className="inline h-12 cursor-pointer dark:text-white" />
           </motion.p>
         </div>
-        <AnimatePresence exitBeforeEnter>{getComponentToRender(onboardingStep)}</AnimatePresence>
+        <AnimatePresence mode="wait">{getComponentToRender(onboardingStep)}</AnimatePresence>
         <OnboardingBottomNav
           onboardingStep={onboardingStep}
           addOnboardingStep={addOnboardingProgress}
@@ -260,7 +260,7 @@ export const OnboardingContainer: React.FC<Props> = ({
         />
       </div>
       <div className="bg-animo-white dark:bg-animo-black hidden lg:flex lg:w-1/3 rounded-r-lg flex-col justify-center h-full select-none">
-        <AnimatePresence exitBeforeEnter>{getImageToRender(onboardingStep)}</AnimatePresence>
+        <AnimatePresence mode="wait">{getImageToRender(onboardingStep)}</AnimatePresence>
       </div>
       {leaveModal && (
         <Modal title={LEAVE_MODAL_TITLE} description={LEAVE_MODAL_DESCRIPTION} onOk={leave} onCancel={closeLeave} />

client/src/pages/onboarding/OnboardingPage.tsx

@@ -57,7 +57,7 @@ export const OnboardingPage: React.FC = () => {
       className="container flex flex-col items-center p-4"
     >
       <Stepper steps={StepperItems} onboardingStep={onboardingStep} />
-      <AnimatePresence exitBeforeEnter>
+      <AnimatePresence mode="wait">
         {mounted && (
           <OnboardingContainer
             characters={characters}

client/src/pages/onboarding/components/CharacterContent.tsx

@@ -14,7 +14,7 @@ export const CharacterContent: React.FC<Props> = ({ character }) => {
   return (
     <motion.div variants={fadeExit} initial="hidden" animate="show" exit="exit" className="h-full">
       {character ? (
-        <AnimatePresence exitBeforeEnter>
+        <AnimatePresence mode="wait">
           <motion.div
             key={character.id}
             variants={characterFade}

client/src/pages/onboarding/components/OnboardingBottomNav.tsx

@@ -46,7 +46,7 @@ export const OnboardingBottomNav: React.FC<Props> = ({
       <div className="flex self-center">
         <BackButton onClick={removeOnboardingStep} disabled={backDisabled} data-cy="prev-onboarding-step" />
       </div>
-      <AnimatePresence exitBeforeEnter>
+      <AnimatePresence mode="wait">
         {!hidden && (
           <motion.div variants={fadeExit} initial="hidden" animate="show" exit="exit" data-cy="next-onboarding-step">
             <Button

client/src/pages/onboarding/steps/AcceptCredential.tsx

@@ -125,7 +125,7 @@ export const AcceptCredential: React.FC<Props> = ({ content, connectionId, crede
       <StepInformation title={content.title} text={content.text} />
       <div className="flex flex-row m-auto content-center">
         {currentCharacter.starterCredentials.length === credentials.length ? (
-          <AnimatePresence exitBeforeEnter>
+          <AnimatePresence mode="wait">
             <motion.div className={`flex flex-1 flex-col m-auto`} variants={fade} animate="show" exit="exit">
               <StarterCredentials credentialData={currentCharacter.starterCredentials} credentials={credentials} />
             </motion.div>

client/src/pages/onboarding/steps/ChooseWallet.tsx

@@ -65,7 +65,7 @@ export const ChooseWallet: React.FC<Props> = ({ content, addOnboardingProgress }
       >
         {renderWallets}
       </motion.div>
-      <AnimatePresence initial={false} exitBeforeEnter onExitComplete={() => null}>
+      <AnimatePresence initial={false} mode="wait" onExitComplete={() => null}>
         {selectedWallet && (
           <WalletModal
             isWalletModalOpen={isChooseWalletModalOpen}

client/src/pages/useCase/Section.tsx

@@ -169,7 +169,7 @@ export const Section: React.FC<Props> = ({
               style={style}
               data-cy="section"
             >
-              <AnimatePresence initial={false} exitBeforeEnter onExitComplete={() => null}>
+              <AnimatePresence initial={false} mode="wait" onExitComplete={() => null}>
                 {step.type === StepType.INFO && <StepInformation key={step.id} step={step} />}
                 {step.type === StepType.CONNECTION && (
                   <StepConnection key={step.id} step={step} connection={connection} entity={section.entity} />
@@ -219,5 +219,5 @@ export const Section: React.FC<Props> = ({
     }
   }
 
-  return <AnimatePresence exitBeforeEnter>{step && renderStepItem()}</AnimatePresence>
+  return <AnimatePresence mode="wait">{step && renderStepItem()}</AnimatePresence>
 }

client/src/pages/useCase/UseCasePage.tsx

@@ -83,7 +83,7 @@ export const UseCasePage: React.FC = () => {
           <Loader />
         </div>
       ) : (
-        <AnimatePresence exitBeforeEnter>
+        <AnimatePresence mode="wait">
           {currentCharacter && section && currentUseCase ? (
             <motion.div
               key={'sectionDiv' + section.id}

client/src/pages/useCase/steps/StepCredential.tsx

@@ -120,7 +120,7 @@ export const StepCredential: React.FC<Props> = ({ step, connectionId, issueCrede
       <div className="flex flex-1-1 m-auto">
         <motion.div className={`flex flex-1-1 flex-col m-auto`} variants={fade} animate="show" exit="exit">
           {credentials.length <= (issueCredentials?.length ?? 0) ? (
-            <AnimatePresence exitBeforeEnter>{renderCredentials}</AnimatePresence>
+            <AnimatePresence mode="wait">{renderCredentials}</AnimatePresence>
           ) : (
             <motion.div className="flex flex-col h-full m-auto">
               <Loader />

client/src/pages/useCase/steps/StepProofOOB.tsx

@@ -107,7 +107,7 @@ export const StepProofOOB: React.FC<Props> = ({ proof, proofUrl, step, requested
   return (
     <motion.div variants={fadeX} initial="hidden" animate="show" exit="exit" className="flex flex-col h-full">
       <StepInfo title={step.title} description={step.description} />
-      <AnimatePresence initial={false} exitBeforeEnter onExitComplete={() => null}>
+      <AnimatePresence initial={false} mode="wait" onExitComplete={() => null}>
         {!proofReceived ? (
           <motion.div
             variants={fadeExit}

server/src/utils/TestAgent.ts

@@ -24,7 +24,7 @@ const agentConfig: InitConfig = {
     },
   ],
   logger: logger,
-  publicDidSeed: 'qPa9E2iIwV2Sh37aqEj3LS3oLjZhiu5B',
+  publicDidSeed: 'rittrjmbybhggminojbbnzpkmfvmrltd',
   endpoints: ['http://localhost:9001'],
   autoAcceptConnections: true,
   autoAcceptCredentials: AutoAcceptCredential.ContentApproved,