diff --git a/src/refactor/ui/components/masa-loading/index.tsx b/src/refactor/ui/components/masa-loading/index.tsx
new file mode 100644
index 00000000..b7aeeec4
--- /dev/null
+++ b/src/refactor/ui/components/masa-loading/index.tsx
@@ -0,0 +1 @@
+export * from './masa-loading';
diff --git a/src/refactor/ui/components/masa-loading/masa-loading.tsx b/src/refactor/ui/components/masa-loading/masa-loading.tsx
new file mode 100644
index 00000000..8092058d
--- /dev/null
+++ b/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 => (
+
+);
diff --git a/src/refactor/ui/components/modals/authenticate.tsx b/src/refactor/ui/components/modals/authenticate/authenticate.tsx
similarity index 91%
rename from src/refactor/ui/components/modals/authenticate.tsx
rename to src/refactor/ui/components/modals/authenticate/authenticate.tsx
index 654605ce..49d088f0 100644
--- a/src/refactor/ui/components/modals/authenticate.tsx
+++ b/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 (
-
+
Wallet connected!
{message}
@@ -108,6 +108,6 @@ export const InterfaceAuthenticate = (): JSX.Element => {
)}
-
+
);
};
diff --git a/src/refactor/ui/components/modals/authenticate/index.tsx b/src/refactor/ui/components/modals/authenticate/index.tsx
new file mode 100644
index 00000000..82843c07
--- /dev/null
+++ b/src/refactor/ui/components/modals/authenticate/index.tsx
@@ -0,0 +1 @@
+export { InterfaceAuthenticate } from './authenticate';
diff --git a/src/refactor/ui/components/modals/connected/connected.tsx b/src/refactor/ui/components/modals/connected/connected.tsx
new file mode 100644
index 00000000..7e6501d8
--- /dev/null
+++ b/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 ;
+
+ return (
+
+ );
+};
diff --git a/src/refactor/ui/components/modals/connected/index.tsx b/src/refactor/ui/components/modals/connected/index.tsx
new file mode 100644
index 00000000..854da5fa
--- /dev/null
+++ b/src/refactor/ui/components/modals/connected/index.tsx
@@ -0,0 +1 @@
+export { InterfaceConnected } from './connected';
diff --git a/src/refactor/ui/components/modals/index.tsx b/src/refactor/ui/components/modals/index.tsx
new file mode 100644
index 00000000..d9854dcb
--- /dev/null
+++ b/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'; */