feat: wip authenticate

src/refactor/masa/use-masa-loading.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { useMasaClient } from '../masa-client/use-masa-client';
+import { useCreditScores } from './use-credit-scores';
+import { useGreen } from './use-green';
+import { useIdentity } from './use-identity';
+import { useSession } from './use-session';
+import { useSoulNames } from './use-soulnames';
+import { useWallet } from '../wallet-client/wallet/use-wallet';
+
+export const useMasaLoading = () => {
+  const { isLoadingSigner, isConnecting } = useWallet();
+  const { isLoadingSession } = useSession();
+  const { isLoadingIdentity } = useIdentity();
+  const { isLoadingSoulnames } = useSoulNames();
+  const { isLoadingCreditScores } = useCreditScores();
+  const { isLoadingGreens } = useGreen();
+  const { sdk: masa } = useMasaClient();
+
+  const isLoading = useMemo(
+    () =>
+      isLoadingSession ||
+      isLoadingIdentity ||
+      isLoadingSoulnames ||
+      isLoadingCreditScores ||
+      isLoadingGreens ||
+      isLoadingSigner ||
+      isConnecting ||
+      !masa,
+    [
+      isLoadingSession,
+      isLoadingIdentity,
+      isLoadingSoulnames,
+      isLoadingCreditScores,
+      isLoadingGreens,
+      masa,
+      isLoadingSigner,
+      isConnecting,
+    ]
+  );
+
+  return isLoading;
+};

src/refactor/masanew.stories.tsx

@@ -26,9 +26,7 @@ import {
   CreateIdentityModal,
 } from './ui/components/modals';
 import { useGreenModal } from './ui/components/modals/create-green/use-green-modal';
-import CreateSoulnameModal, {
-  openCreateSoulnameModal,
-} from './ui/components/modals/create-soulname/CreateSoulnameModal';
+import { openCreateSoulnameModal } from './ui/components/modals/create-soulname/CreateSoulnameModal';
 import { useWalletClient } from './wallet-client/wallet-client-provider';
 import { openAuthenticateModal } from './ui/components/modals/authenticate/authenticate';
 import { SupportedNetworks } from '@masa-finance/masa-sdk';
@@ -159,6 +157,7 @@ const WalletInfo = () => {
     openChainModal,
     openAccountModal,
     disconnect,
+    shortAddress,
     // disconnectAsync,
     isLoadingSigner,
     isLoadingBalance,
@@ -173,6 +172,7 @@ const WalletInfo = () => {
           <h3>Wallet</h3>
           <li>address: {String(address)}</li>
           <li>previousAddress: {String(previousAddress)}</li>
+          <li>shortAddress: {String(shortAddress)}</li>
           <li>activeConnector: {String(connector?.name)}</li>
           <li>isConnected: {String(isConnected)}</li>
           <li>isConnecting: {String(isConnecting)}</li>
@@ -503,12 +503,12 @@ const ModalFlow = () => {
           disabled={!!hasSession}
           onClick={() =>
             openAuthenticateModal({
-              onAuthenticate: () => console.log('AUTHENTICATE SUCCESS'),
-              onClose: () => console.log('AUTHENTICATE CLOSED'),
-              onError: () => console.log('AUTHENTICATE ERROR'),
-              closeOnSuccess: false,
+              onAuthenticateSuccess: () => console.log('AUTHENTICATE SUCCESS'),
+              // onClose: () => console.log('AUTHENTICATE CLOSED'),
+              onAuthenticateError: () => console.log('AUTHENTICATE ERROR'),
+              // closeOnSuccess: false,
               // TODO: Didn't know how to handle this type, lets fix is later
-              next: CreateSoulnameModal as any,
+              // next: CreateSoulnameModal as any,
             })
           }
         >

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { Spinner } from '../spinner';
+
+export const ModalLoading = ({ titleText }: { titleText?: ReactNode }) => (
+  <section className="interface-connected">
+    <section>
+      <h3 className="title">{titleText}</h3>
+      <Spinner />
+    </section>
+  </section>
+);

src/refactor/ui/components/modals/authenticate/auth-view.tsx

@@ -4,7 +4,7 @@ interface AuthViewProps {
   message: string | undefined;
   handleClipboard: () => void;
   copied: boolean;
-  shortAddress: string;
+  shortAddress?: string;
   loginSessionAsync: () => void;
   isLoadingSigner?: boolean;
   hasSession: boolean | undefined | null;
@@ -23,8 +23,8 @@ const AuthView = ({
   isConnected,
   switchWallet,
 }: AuthViewProps): JSX.Element => (
-  <section className="interface-authenticate">
-    <div>
+  <article className="interface-authenticate">
+    <header>
       <h3 className="title">Wallet connected!</h3>
       <p className="connected-wallet">{message}</p>
 
@@ -39,8 +39,8 @@ const AuthView = ({
           {copied ? 'Copied!' : shortAddress}
         </span>
       </p>
-    </div>
-    <div>
+    </header>
+    <section>
       <button
         type="button"
         className="masa-button authenticate-button"
@@ -67,8 +67,8 @@ const AuthView = ({
           )}
         </p>
       </div>
-    </div>
-  </section>
+    </section>
+  </article>
 );
 
 export default AuthView;