spring cleaning

masa-finance · Feb 6, 2023 · e0c3426 · e0c3426
1 parent 8fa88b2
commit e0c3426
Show file tree

Hide file tree

Showing 17 changed files with 103 additions and 65 deletions.
diff --git a/src/common/components/masa-interface/masa-interface.tsx b/src/common/components/masa-interface/masa-interface.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useMasa } from '../../helpers/provider/use-masa';
+import { useMasa } from '../../helpers';
 import { ModalComponent } from '../modal';
 import {
   InterfaceAuthenticate,
@@ -10,7 +10,9 @@ import {
 } from './pages';
 
 const pages = {
-  connector: ({ disable }) => <InterfaceConnector disable={disable} />,
+  connector: ({ disable }): JSX.Element => (
+    <InterfaceConnector disable={disable} />
+  ),
   createIdentity: <InterfaceCreateIdentity />,
   connectedState: <InterfaceConnected />,
   authenticate: <InterfaceAuthenticate />,
@@ -50,7 +52,7 @@ export const MasaInterface = ({
     <>
       <ModalComponent
         open={isModalOpen as boolean}
-        close={() => closeModal?.()}
+        close={(): void => closeModal?.()}
         setOpen={setModalOpen as (val: boolean) => void}
       >
         {page === 'connector' ? pages[page]({ disable }) : pages[page]}

diff --git a/src/common/components/masa-interface/pages/authenticate/authenticate.tsx b/src/common/components/masa-interface/pages/authenticate/authenticate.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useMasa } from '../../../../helpers/provider/use-masa';
+import { useMasa } from '../../../../helpers';
 import { Spinner } from '../../../spinner';
 
 export const InterfaceAuthenticate = (): JSX.Element => {

diff --git a/src/common/components/masa-interface/pages/connected/connected.tsx b/src/common/components/masa-interface/pages/connected/connected.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
-import { useMasa } from '../../../../helpers/provider/use-masa';
+import { useMasa } from '../../../../helpers';
 import { MasaLoading } from '../../../masa-loading';
 import { Spinner } from '../../../spinner';
 
-export const InterfaceConnected = () => {
+export const InterfaceConnected = (): JSX.Element => {
   const { company, loading, closeModal } = useMasa();
 
   useEffect(() => {
@@ -12,9 +12,10 @@ export const InterfaceConnected = () => {
         closeModal?.();
       }, 3000);
     }
-  }, [loading]);
+  }, [loading, closeModal]);
 
   if (loading) return <MasaLoading />;
+
   return (
     <div className="interface-connected">
       <div>

diff --git a/src/common/components/masa-interface/pages/connector/connector.tsx b/src/common/components/masa-interface/pages/connector/connector.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
-import { useMetamask } from '../../../../helpers/provider/use-metamask';
+import { useMetamask } from '../../../../helpers';
 
-export const InterfaceConnector = ({ disable }: { disable?: boolean }) => {
+export const InterfaceConnector = ({
+  disable,
+}: {
+  disable?: boolean;
+}): JSX.Element => {
   const { connect } = useMetamask({ disable });
 
   return (

diff --git a/src/common/components/masa-interface/pages/create-credit-score/create-credit-score.tsx b/src/common/components/masa-interface/pages/create-credit-score/create-credit-score.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { useMasa } from '../../../../helpers/provider/use-masa';
+import { useMasa } from '../../../../helpers';
 import { MasaLoading } from '../../../masa-loading';
 
 export const InterfaceCreateCreditScore = (): JSX.Element => {

diff --git a/src/common/components/masa-interface/pages/create-identity-/create-identity.tsx b/src/common/components/masa-interface/pages/create-identity-/create-identity.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { useMasa } from '../../../../helpers/provider/use-masa';
+import { useMasa } from '../../../../helpers';
 import { MasaLoading } from '../../../masa-loading';
 
 export const InterfaceCreateIdentity = (): JSX.Element => {

diff --git a/src/common/components/masa-loading/masa-loading.tsx b/src/common/components/masa-loading/masa-loading.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Spinner } from '../spinner';
 
-export const MasaLoading = () => {
+export const MasaLoading = (): JSX.Element => {
   return (
     <div className="spinner">
       <Spinner />

diff --git a/src/common/components/modal/modal.tsx b/src/common/components/modal/modal.tsx
@@ -10,13 +10,17 @@ export interface ModalProps {
   close: () => void;
 }
 
-export const ModalComponent = ({ children, open, close }: ModalProps) => {
+export const ModalComponent = ({
+  children,
+  open,
+  close,
+}: ModalProps): JSX.Element => {
   return (
     <Rodal
       height={520}
       width={500}
       visible={open}
-      onClose={() => close()}
+      onClose={(): void => close()}
       className="masa-rodal-container"
     >
       <div className="masa-modal">

diff --git a/src/common/components/spinner/spinner.tsx b/src/common/components/spinner/spinner.tsx
@@ -6,7 +6,7 @@ export interface SpinnerProps {
   color?: string;
 }
 
-export const Spinner = ({ color = '#000' }: SpinnerProps) => {
+export const Spinner = ({ color = '#000' }: SpinnerProps): JSX.Element => {
   return (
     <div className="masa-spinner">
       <MoonLoader color={color} />

diff --git a/src/common/helpers/hooks/useDebounce.ts b/src/common/helpers/hooks/useDebounce.ts
@@ -1,9 +1,13 @@
 import { useEffect, useState } from 'react';
 
 // Hook
-export const useDebounce = (value, delay) => {
+export const useDebounce = (
+  value: string | number,
+  delay: number
+): string | number => {
   // State and setters for debounced value
-  const [debouncedValue, setDebouncedValue] = useState(value);
+  const [debouncedValue, setDebouncedValue] = useState<string | number>(value);
+
   useEffect(
     () => {
       // Update debounced value after delay
@@ -13,33 +17,42 @@ export const useDebounce = (value, delay) => {
       // Cancel the timeout if value changes (also on delay change or unmount)
       // This is how we prevent debounced value from updating if value is changed ...
       // .. within the delay period. Timeout gets cleared and restarted.
-      return () => {
+      return (): void => {
         clearTimeout(handler);
       };
     },
     [value, delay] // Only re-call effect if value or delay changes
   );
+
   return debouncedValue;
 };
 
 // Hook
-export const useDebounceIfValue = (value, target, delay) => {
+export const useDebounceIfValue = (
+  value: string | number,
+  target: string | number,
+  delay: number
+): string | number => {
   // State and setters for debounced value
-  const [debouncedValue, setDebouncedValue] = useState(value);
+  const [debouncedValue, setDebouncedValue] = useState<string | number>(value);
+
   useEffect(() => {
     if (value === target) {
       const handler = setTimeout(() => {
         setDebouncedValue(value);
       }, delay);
 
-      return () => {
+      return (): void => {
         clearTimeout(handler);
       };
     } else {
       setDebouncedValue(value);
 
-      return () => {};
+      return (): void => {
+        // todo delete me!
+      };
     }
   }, [value, delay, target]);
+
   return debouncedValue;
 };
diff --git a/src/common/helpers/masa/masa.ts b/src/common/helpers/masa/masa.ts
@@ -1,4 +1,9 @@
-import { environments, Masa, NetworkName } from '@masa-finance/masa-sdk';
+import {
+  Environment,
+  environments,
+  Masa,
+  NetworkName,
+} from '@masa-finance/masa-sdk';
 import { ethers, Wallet } from 'ethers';
 import { ArweaveConfig } from '../provider/masa-context-provider';
 
@@ -41,17 +46,15 @@ export const createRandomWallet = (): Wallet | null => {
 export const createNewMasa = (
   newWallet,
   env: string,
-  arweaveConfig?: ArweaveConfig,
-  cookie?: string
+  arweaveConfig?: ArweaveConfig
 ): Masa | null => {
   const signer = newWallet ? newWallet : createRandomWallet();
   if (!signer) return null;
 
-  const environment = environments.find((e) => e.name === env);
+  const environment = environments.find((e: Environment) => e.name === env);
   if (!environment) return null;
 
   return new Masa({
-    cookie: cookie || undefined,
     wallet: signer,
     apiUrl: environment.apiUrl,
     defaultNetwork: getChainName(

diff --git a/src/common/helpers/provider/masa-context-provider.tsx b/src/common/helpers/provider/masa-context-provider.tsx
@@ -28,7 +28,6 @@ export interface MasaContextProviderProps extends MasaShape {
   signer?: ethers.Wallet | ethers.Signer;
   noWallet?: boolean;
   arweaveConfig?: ArweaveConfig;
-  cookie?: string;
 }
 
 export const MasaContextProvider = ({
@@ -38,8 +37,7 @@ export const MasaContextProvider = ({
   signer: externalSigner,
   noWallet,
   arweaveConfig,
-  cookie,
-}: MasaContextProviderProps) => {
+}: MasaContextProviderProps): JSX.Element => {
   const [masaInstance, setMasaInstance] = useState<Masa | null>(null);
 
   const [provider, setProvider] = useState<
@@ -48,7 +46,7 @@ export const MasaContextProvider = ({
   const [missingProvider, setMissingProvider] = useState<boolean>();
 
   const [isModalOpen, setModalOpen] = useState(false);
-  const [modalCallback, setModalCallback] = useState<any>(null);
+  const [modalCallback, setModalCallback] = useState<(() => void) | null>(null);
 
   const [scope, setScope] = useState<string[]>([]);
 
@@ -137,19 +135,15 @@ export const MasaContextProvider = ({
 
   useEffect(() => {
     if (noWallet) {
-      setMasaInstance(
-        createNewMasa(undefined, environment, arweaveConfig, cookie)
-      );
+      setMasaInstance(createNewMasa(undefined, environment, arweaveConfig));
     } else {
       if (provider) {
-        setMasaInstance(
-          createNewMasa(provider, environment, arweaveConfig, cookie)
-        );
+        setMasaInstance(createNewMasa(provider, environment, arweaveConfig));
       } else {
         setMasaInstance(null);
       }
     }
-  }, [provider, noWallet, walletAddress]);
+  }, [provider, noWallet, walletAddress, arweaveConfig, environment]);
 
   const context = {
     setProvider,

diff --git a/src/common/helpers/provider/modules/credit-scores/credit-scores.ts b/src/common/helpers/provider/modules/credit-scores/credit-scores.ts
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useQuery } from 'react-query';
 import { queryClient } from '../../masa-query-client';
-import { Masa } from '@masa-finance/masa-sdk';
+import { ICreditScore, Masa } from '@masa-finance/masa-sdk';
 import { BigNumber } from 'ethers';
 
 export const useCreditScores = (
@@ -13,8 +13,25 @@ export const useCreditScores = (
         address?: string | undefined;
       }
     | undefined
-) => {
-  const { data, status, isLoading, error } = useQuery(
+): {
+  creditScores:
+    | {
+        tokenId: BigNumber;
+        tokenUri: string;
+        metadata?: ICreditScore | undefined;
+      }[]
+    | undefined;
+  handleCreateCreditScore: () => void;
+  status: string;
+  isLoading: boolean;
+  error: unknown;
+} => {
+  const {
+    data: creditScores,
+    status,
+    isLoading,
+    error,
+  } = useQuery(
     `credit-scores-${walletAddress}`,
     () => masa?.creditScore.list(),
     { enabled: !!masa && !!walletAddress && !!identity?.identityId }
@@ -26,10 +43,10 @@ export const useCreditScores = (
     await queryClient.invalidateQueries(`credit-scores-${walletAddress}`);
 
     return response?.success;
-  }, [masa]);
+  }, [masa, walletAddress]);
 
   return {
-    creditScores: data,
+    creditScores,
     handleCreateCreditScore,
     status,
     isLoading,

diff --git a/src/common/helpers/provider/modules/identity/identity.ts b/src/common/helpers/provider/modules/identity/identity.ts
@@ -41,7 +41,7 @@ export const useIdentity = (
   const handlePurchaseIdentity = useCallback(async () => {
     await masa?.identity.create();
     await queryClient.invalidateQueries(`identity-${walletAddress}`);
-  }, [masa]);
+  }, [masa, walletAddress]);
 
   return { identity, handlePurchaseIdentity, status, isLoading, error };
 };
diff --git a/src/common/helpers/provider/modules/session/session.ts b/src/common/helpers/provider/modules/session/session.ts
@@ -6,7 +6,14 @@ import { Masa } from '@masa-finance/masa-sdk';
 export const useSession = (
   masa: Masa | null,
   walletAddress: string | undefined
-) => {
+): {
+  loggedIn?: boolean;
+  login: () => void;
+  logout: () => void;
+  status: string;
+  isLoading: boolean;
+  error: unknown;
+} => {
   const {
     data: loggedIn,
     status,
@@ -28,7 +35,7 @@ export const useSession = (
       await queryClient.invalidateQueries(`session-${walletAddress}`);
       await queryClient.refetchQueries();
     }
-  }, [masa]);
+  }, [masa, walletAddress]);
 
   const logout = useCallback(
     async (callback?: () => void) => {
@@ -40,7 +47,7 @@ export const useSession = (
         callback();
       }
     },
-    [masa]
+    [masa, walletAddress]
   );
 
   return { loggedIn, login, logout, status, isLoading, error };

diff --git a/src/common/helpers/provider/use-masa.tsx b/src/common/helpers/provider/use-masa.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
-import { MASA_CONTEXT } from './masa-context';
+import { MASA_CONTEXT, MasaShape } from './masa-context';
 
-export const useMasa = () => {
-  return useContext(MASA_CONTEXT);
+export const useMasa = (): MasaShape => {
+  return useContext<MasaShape>(MASA_CONTEXT);
 };