reorganized and started refacotr of connted modal

src/refactor/ui/components/masa-loading/index.tsx

@@ -0,0 +1 @@
+export * from './masa-loading';

src/refactor/ui/components/masa-loading/masa-loading.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Spinner } from '../spinner';
+
+export const MasaLoading = (): JSX.Element => (
+  <section className="spinner">
+    <Spinner />
+  </section>
+);

src/refactor/ui/components/modals/authenticate.tsx → src/refactor/ui/components/modals/authenticate/authenticate.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useMasa } from '../../../../provider';
-import { Spinner } from '../spinner';
-import { useWallet } from '../../../wallet-client/wallet/use-wallet';
-import { useSession } from '../../../masa/use-session';
+import { useMasa } from '../../../../../provider';
+import { Spinner } from '../../spinner';
+import { useWallet } from '../../../../wallet-client/wallet/use-wallet';
+import { useSession } from '../../../../masa/use-session';
 
 export const InterfaceAuthenticate = (): JSX.Element => {
   const {
@@ -68,7 +68,7 @@ export const InterfaceAuthenticate = (): JSX.Element => {
   }
 
   return (
-    <div className="interface-authenticate">
+    <section className="interface-authenticate">
       <section>
         <h3 className="title">Wallet connected!</h3>
         <p className="connected-wallet">{message}</p>
@@ -108,6 +108,6 @@ export const InterfaceAuthenticate = (): JSX.Element => {
           </div>
         )}
       </section>
-    </div>
+    </section>
   );
 };

src/refactor/ui/components/modals/authenticate/index.tsx

@@ -0,0 +1 @@
+export { InterfaceAuthenticate } from './authenticate';

src/refactor/ui/components/modals/connected/connected.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useMemo } from 'react';
+import { useMasa } from '../../../../../provider';
+import { MasaLoading } from '../../masa-loading';
+import { Spinner } from '../../spinner';
+import { useSession } from '../../../../masa/use-session';
+
+export const InterfaceConnected = (): JSX.Element => {
+  const { closeModal, company, isModalOpen } = useMasa();
+  const { isLoadingSession: isLoading } = useSession();
+
+  useEffect(() => {
+    let timeout;
+    if (isModalOpen && !isLoading) {
+      timeout = setTimeout(() => {
+        closeModal?.();
+      }, 3000);
+    }
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isLoading, closeModal, isModalOpen]);
+
+  const titleText = useMemo(() => {
+    switch (company) {
+      case 'Masa': {
+        return 'Starting your soulbound journey';
+      }
+      case 'Celo': {
+        return 'Launching your Prosperity Passport';
+      }
+      case 'Base': {
+        return 'Taking you to Base Camp';
+      }
+      default: {
+        return 'Starting your soulbound journey';
+      }
+    }
+  }, [company]);
+
+  if (isLoading) return <MasaLoading />;
+
+  return (
+    <section className="interface-connected">
+      <section>
+        <h3 className="title">{titleText}</h3>
+        <Spinner />
+      </section>
+    </section>
+  );
+};

src/refactor/ui/components/modals/connected/index.tsx

@@ -0,0 +1 @@
+export { InterfaceConnected } from './connected';

src/refactor/ui/components/modals/index.tsx

@@ -0,0 +1,5 @@
+export * from './authenticate';
+/* export * from './connected';
+ * export * from './connector';
+ * export * from './create-credit-score';
+ * export * from './create-identity'; */