fix code continuity bugs

src/common/components/index.ts

@@ -0,0 +1,4 @@
+export * from './masa-interface';
+export * from './masa-loading';
+export * from './modal';
+export * from './spinner';

src/common/components/masa-interface/index.ts

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

src/common/components/masa-interface/index.tsx → src/common/components/masa-interface/masa-interface.tsx

@@ -1,11 +1,13 @@
 import React, { useMemo } from 'react';
 import { useMasa } from '../../helpers/provider/use-masa';
 import { ModalComponent } from '../modal';
-import { InterfaceAuthenticate } from './pages/authenticate';
-import { InterfaceConnected } from './pages/connected';
-import { InterfaceConnector } from './pages/connector';
-import { InterfaceCreateCreditScore } from './pages/create-credit-score';
-import { InterfaceCreateIdentity } from './pages/createIdentity';
+import {
+  InterfaceAuthenticate,
+  InterfaceConnected,
+  InterfaceConnector,
+  InterfaceCreateCreditScore,
+  InterfaceCreateIdentity,
+} from './pages';
 
 const pages = {
   connector: ({ disable }) => <InterfaceConnector disable={disable} />,
@@ -15,7 +17,11 @@ const pages = {
   createCreditScore: <InterfaceCreateCreditScore />,
 };
 
-export const MasaInterface = ({ disable }: { disable?: boolean }) => {
+export const MasaInterface = ({
+  disable,
+}: {
+  disable?: boolean;
+}): JSX.Element => {
   const {
     isModalOpen,
     setModalOpen,

src/common/components/masa-interface/pages/authenticate/authenticate.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import { useMasa } from '../../../../helpers/provider/use-masa';
+import { Spinner } from '../../../spinner';
+
+export const InterfaceAuthenticate = (): JSX.Element => {
+  const { handleLogin, walletAddress, identity, loading } = useMasa();
+
+  const hasIdentity = useMemo(() => {
+    return identity && identity?.identityId;
+  }, [identity]);
+  const shortAddress = useMemo(() => {
+    return `${walletAddress?.substring(0, 2)}...${walletAddress?.substring(
+      walletAddress.length - 4,
+      walletAddress.length - 1
+    )}`;
+  }, [walletAddress]);
+
+  if (loading) {
+    return <Spinner />;
+  }
+  return (
+    <div className="interface-authenticate">
+      <div>
+        <h3 className="title">Wallet connected!</h3>
+        <p className="connected-wallet">
+          Your wallet is connected you can now create an account by minting a
+          Masa Soulbound Identity and Masa Soulname!
+        </p>
+
+        <p className="connected-wallet with-wallet">
+          You are connected with the following wallet
+          <span>{shortAddress}</span>
+        </p>
+      </div>
+      <div>
+        <button
+          className="masa-button authenticate-button"
+          onClick={handleLogin}
+        >
+          {loading ? 'loading...' : hasIdentity ? 'Sign in' : 'Register'}
+        </button>
+        <div className="dont-have-a-wallet">
+          <a>
+            <p>
+              Want to use a different wallet? Close this window and disconnect
+              your wallet in Metamask to connect a new wallet
+            </p>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};

src/common/components/masa-interface/pages/authenticate/index.tsx

@@ -1,53 +1 @@
-import React, { useMemo } from 'react';
-import { useMasa } from '../../../../helpers/provider/use-masa';
-import { Spinner } from '../../../spinner';
-
-export const InterfaceAuthenticate = () => {
-  const { handleLogin, walletAddress, identity, loading } = useMasa();
-
-  const hasIdentity = useMemo(() => {
-    return identity && identity?.identityId;
-  }, [identity]);
-  const shortAddress = useMemo(() => {
-    return `${walletAddress?.substring(0, 2)}...${walletAddress?.substring(
-      walletAddress.length - 4,
-      walletAddress.length - 1
-    )}`;
-  }, [walletAddress]);
-
-  if (loading) {
-    return <Spinner />;
-  }
-  return (
-    <div className="interface-authenticate">
-      <div>
-        <h3 className="title">Wallet connected!</h3>
-        <p className="connected-wallet">
-          Your wallet is connected you can now create an account by minting a
-          Masa Soulbound Identity and Masa Soulname!
-        </p>
-
-        <p className="connected-wallet with-wallet">
-          You are connected with the following wallet
-          <span>{shortAddress}</span>
-        </p>
-      </div>
-      <div>
-        <button
-          className="masa-button authenticate-button"
-          onClick={handleLogin}
-        >
-          {loading ? 'loading...' : hasIdentity ? 'Sign in' : 'Register'}
-        </button>
-        <div className="dont-have-a-wallet">
-          <a>
-            <p>
-              Want to use a different wallet? Close this window and disconnect
-              your wallet in Metamask to connect a new wallet
-            </p>
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-};
+export { InterfaceAuthenticate } from './authenticate';

src/common/components/masa-interface/pages/connected/connected.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { useMasa } from '../../../../helpers/provider/use-masa';
+import { MasaLoading } from '../../../masa-loading';
+import { Spinner } from '../../../spinner';
+
+export const InterfaceConnected = () => {
+  const { company, loading, closeModal } = useMasa();
+
+  useEffect(() => {
+    if (!loading) {
+      setTimeout(() => {
+        closeModal?.();
+      }, 3000);
+    }
+  }, [loading]);
+
+  if (loading) return <MasaLoading />;
+  return (
+    <div className="interface-connected">
+      <div>
+        <h3 className="title">We are taking you to {company}</h3>
+
+        <Spinner />
+      </div>
+    </div>
+  );
+};

src/common/components/masa-interface/pages/connected/index.tsx

@@ -1,27 +1 @@
-import React, { useEffect } from 'react';
-import { useMasa } from '../../../../helpers/provider/use-masa';
-import { MasaLoading } from '../../../masa-loading';
-import { Spinner } from '../../../spinner';
-
-export const InterfaceConnected = () => {
-  const { company, loading, closeModal } = useMasa();
-
-  useEffect(() => {
-    if (!loading) {
-      setTimeout(() => {
-        closeModal?.();
-      }, 3000);
-    }
-  }, [loading]);
-
-  if (loading) return <MasaLoading />;
-  return (
-    <div className="interface-connected">
-      <div>
-        <h3 className="title">We are taking you to {company}</h3>
-
-        <Spinner />
-      </div>
-    </div>
-  );
-};
+export { InterfaceConnected } from './connected';

src/common/components/masa-interface/pages/connector/connector.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useMetamask } from '../../../../helpers/provider/use-metamask';
+
+export const InterfaceConnector = ({ disable }: { disable?: boolean }) => {
+  const { connect } = useMetamask({ disable });
+
+  return (
+    <div className="interface-connect">
+      <div>
+        <h3 className="title">Select a wallet</h3>
+        <p>
+          By connecting your wallet, you agree to our <a>Terms of Service</a>{' '}
+          and <a>Privacy Policy</a>
+        </p>
+      </div>
+      <div className="masa-connectors">
+        <div className="connector" onClick={connect}>
+          <p>MetaMask</p>
+          <img
+            src={
+              'https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/MetaMask_Fox.svg/2048px-MetaMask_Fox.svg.png'
+            }
+            className="connector-image"
+          />
+        </div>
+        <div className="connector disabled">
+          <p>WalletConnect</p>
+          <img
+            src={'https://example.walletconnect.org/favicon.ico'}
+            className="connector-image"
+          />
+        </div>
+        <div className="connector disabled">
+          <p>Ciubvase Wallet</p>
+          <img
+            src={'https://avatars.githubusercontent.com/u/18060234?s=280&v=4'}
+            className="connector-image"
+          />
+        </div>
+      </div>
+      <div className="dont-have-a-wallet">
+        <a>
+          <p>I don't have a Wallet</p>
+        </a>
+      </div>
+    </div>
+  );
+};

src/common/components/masa-interface/pages/connector/index.tsx

@@ -1,48 +1 @@
-import React from 'react';
-import { useMetamask } from '../../../../helpers/provider/use-metamask';
-
-export const InterfaceConnector = ({ disable }: { disable?: boolean }) => {
-  const { connect } = useMetamask({ disable });
-
-  return (
-    <div className="interface-connect">
-      <div>
-        <h3 className="title">Select a wallet</h3>
-        <p>
-          By connecting your wallet, you agree to our <a>Terms of Service</a>{' '}
-          and <a>Privacy Policy</a>
-        </p>
-      </div>
-      <div className="masa-connectors">
-        <div className="connector" onClick={connect}>
-          <p>MetaMask</p>
-          <img
-            src={
-              'https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/MetaMask_Fox.svg/2048px-MetaMask_Fox.svg.png'
-            }
-            className="connector-image"
-          />
-        </div>
-        <div className="connector disabled">
-          <p>WalletConnect</p>
-          <img
-            src={'https://example.walletconnect.org/favicon.ico'}
-            className="connector-image"
-          />
-        </div>
-        <div className="connector disabled">
-          <p>Ciubvase Wallet</p>
-          <img
-            src={'https://avatars.githubusercontent.com/u/18060234?s=280&v=4'}
-            className="connector-image"
-          />
-        </div>
-      </div>
-      <div className="dont-have-a-wallet">
-        <a>
-          <p>I don't have a Wallet</p>
-        </a>
-      </div>
-    </div>
-  );
-};
+export { InterfaceConnector } from './connector';

src/common/components/masa-interface/pages/create-credit-score/create-credit-score.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { useMasa } from '../../../../helpers/provider/use-masa';
 import { MasaLoading } from '../../../masa-loading';
 
-export const InterfaceCreateCreditScore = () => {
+export const InterfaceCreateCreditScore = (): JSX.Element => {
   const { handleCreateCreditScore, loading } = useMasa();
   const [error, setError] = useState<string | null>(null);
 

src/common/components/masa-interface/pages/createIdentity/index.tsx → src/common/components/masa-interface/pages/create-identity-/create-identity.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { useMasa } from '../../../../helpers/provider/use-masa';
 import { MasaLoading } from '../../../masa-loading';
 
-export const InterfaceCreateIdentity = () => {
+export const InterfaceCreateIdentity = (): JSX.Element => {
   const { handlePurchaseIdentity, handleLogout, loading } = useMasa();
 
   const createIdentity = useCallback(async () => {

src/common/components/masa-interface/pages/create-identity-/index.ts

@@ -0,0 +1 @@
+export { InterfaceCreateIdentity } from './create-identity';

src/common/components/masa-interface/pages/index.ts

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

src/common/components/masa-loading/index.ts

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

src/common/components/modal/index.ts

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

src/common/components/modal/index.tsx → src/common/components/modal/modal.tsx

@@ -7,7 +7,7 @@ export interface ModalProps {
   children: React.ReactNode;
   open: boolean;
   setOpen: (val: boolean) => void;
-  close: Function;
+  close: () => void;
 }
 
 export const ModalComponent = ({ children, open, close }: ModalProps) => {

src/common/components/spinner/spinner.tsx

@@ -6,10 +6,10 @@ export interface SpinnerProps {
   color?: string;
 }
 
-export function Spinner({ color = '#000' }: SpinnerProps) {
+export const Spinner = ({ color = '#000' }: SpinnerProps) => {
   return (
     <div className="masa-spinner">
       <MoonLoader color={color} />
     </div>
   );
-}
+};

src/common/helpers/hooks/useDebounce.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 // Hook
-export function useDebounce(value, delay) {
+export const useDebounce = (value, delay) => {
   // State and setters for debounced value
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(
@@ -20,10 +20,10 @@ export function useDebounce(value, delay) {
     [value, delay] // Only re-call effect if value or delay changes
   );
   return debouncedValue;
-}
+};
 
 // Hook
-export function useDebounceIfValue(value, target, delay) {
+export const useDebounceIfValue = (value, target, delay) => {
   // State and setters for debounced value
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
@@ -42,4 +42,4 @@ export function useDebounceIfValue(value, target, delay) {
     }
   }, [value, delay, target]);
   return debouncedValue;
-}
+};