Adding callback and wrapping up general interaction

package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@auth0/auth0-react": "^1.12.0",
     "@masa-finance/masa-contracts-identity": "0.3.0",
-    "@masa-finance/masa-sdk": "^0.2.3",
+    "@masa-finance/masa-sdk": "^0.2.4",
     "ethers": "^5.7.0",
     "react": "^18.2.0",
     "react-query": "^3.39.1",

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

@@ -22,6 +22,7 @@ export const MasaInterface = () => {
     loading,
     identity,
     loggedIn,
+    closeModal
   } = useMasa();
 
   const page = useMemo(() => {
@@ -52,6 +53,7 @@ export const MasaInterface = () => {
     <>
       <ModalComponent
         open={isModalOpen as boolean}
+        close={closeModal}
         setOpen={setModalOpen as (val: boolean) => void}
       >
         {pages[page]}

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

@@ -4,7 +4,7 @@ import { useMasa } from '../../../../helpers/provider/masa-provider';
 import { MasaLoading } from '../../../masa-loading';
 
 export const InterfaceConnected = () => {
-  const { masa, handleLogout } = useMasa();
+  const { masa, handleLogout, closeModal } = useMasa();
   const [loading, setLoading] = useState(false);
 
   const [soulnames, setSoulnames] = useState<any[] | undefined | null>(null);
@@ -24,10 +24,6 @@ export const InterfaceConnected = () => {
     })();
   }, [masa, setSoulnames, setLoading]);
 
-  console.log({ soulnames });
-
-
-
   const name = useMemo(() => {
     if (soulnames?.length) {
       return soulnames[0].tokenDetails.sbtName;
@@ -45,6 +41,9 @@ export const InterfaceConnected = () => {
         web3 soulbound identity!
       </p>
 
+      <Button className="masa-button" onClick={() => closeModal?.()}>
+        Continue with Teller
+      </Button>
       <div className="dont-have-a-wallet" onClick={handleLogout}>
         <a>
           <p>I don't want to use this wallet</p>

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

@@ -5,29 +5,32 @@ import {
   useMasa,
   useMetamask,
 } from '../../../../helpers/provider/masa-provider';
+import { MasaLoading } from '../../../masa-loading';
 
 import './styles.css';
 
 export const InterfaceCreateIdentity = () => {
-  const { masa, setLoading } = useMasa();
+  const { masa, handlePurchaseSoulname } = useMasa();
+  const [loading, setLoading] = useState(false);
   const [soulName, setSoulName] = useState('');
 
-  const purchaseSoulname = useCallback(async () => {
-    const a = await masa?.identity.create(soulName, 1, 'eth');
-    console.log(a);
-    return 0;
-  }, [masa]);
-
   const [price, setPrice] = useState<any>(0);
+
+  const purchaseName = useCallback(async () => {
+    setLoading(true);
+    await handlePurchaseSoulname?.(soulName, 1, 'eth');
+    setLoading(false);
+  }, [handlePurchaseSoulname, soulName, setLoading]);
+
   useEffect(() => {
     (async () => {
-      setLoading?.(true)
       const p = await masa?.soulNames.getRegistrationPrice(soulName, 1, 'eth');
       setPrice(p);
-      setLoading?.(false)
     })();
   }, [masa, soulName]);
 
+  if (loading) return <MasaLoading />;
+
   return (
     <div className="masa-soulname-picker-container">
       <div className="masa-soulname-picker-title">
@@ -56,7 +59,7 @@ export const InterfaceCreateIdentity = () => {
             />
           </div>
         </div>
-        <Button className="masa-button" onClick={purchaseSoulname}>
+        <Button className="masa-button" onClick={purchaseName}>
           Claim your soul
         </Button>
       </div>

src/common/components/modal/index.tsx

@@ -8,11 +8,12 @@ export interface ModalProps {
   children: React.ReactNode;
   open: boolean;
   setOpen: (val: boolean) => void;
+  close: Function;
 }
 
-export const ModalComponent = ({ children, open, setOpen }: ModalProps) => {
+export const ModalComponent = ({ children, open, close }: ModalProps) => {
   return (
-    <Modal footer={false} open={open} onCancel={() => setOpen(false)}>
+    <Modal footer={false} open={open} onCancel={close}>
       <div className="masa-modal">
         <img src={Logo} className="logo" alt="logo" />
 

src/common/helpers/provider/masa-context.tsx

@@ -6,7 +6,6 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { useDebounce, useDebounceIfValue } from '../hooks/useDebounce';
 import { createNewMasa } from '../masa';
 
 export const MASA_CONTEXT = createContext<MasaShape>({});
@@ -28,6 +27,13 @@ export interface MasaShape {
   loggedIn?: boolean;
   handleLogin?: () => void;
   handleLogout?: () => void;
+  handlePurchaseSoulname?: (
+    soulname: string,
+    duration: number,
+    paymentMethod: string
+  ) => void;
+  connect?: (callback?: Function) => void;
+  closeModal: Function;
 }
 
 export const MasaContextProvider = ({ children }: MasaContextProviderProps) => {
@@ -43,6 +49,17 @@ export const MasaContextProvider = ({ children }: MasaContextProviderProps) => {
   const [identity, setIdentity] = useState<any>(null);
 
   const [loggedIn, setLoggedIn] = useState<boolean>(false);
+  const [modalCallback, setModalCallback] = useState<any>(null);
+
+  const connect = useCallback(
+    (callback?: () => void) => {
+      setModalOpen(true);
+      if (typeof callback === 'function') {
+        setModalCallback(() => callback);
+      }
+    },
+    [setModalOpen, setModalCallback]
+  );
 
   useEffect(() => {
     (async () => {
@@ -102,6 +119,13 @@ export const MasaContextProvider = ({ children }: MasaContextProviderProps) => {
     return !!walletAddress;
   }, [walletAddress]);
 
+  const closeModal = useCallback(() => {
+    setModalOpen(false);
+    if (modalCallback && loggedIn && isConnected) {
+      modalCallback();
+    }
+  }, [modalCallback, setModalOpen, loggedIn, isConnected]);
+
   useEffect(() => {
     (async () => {
       setLoading(true);
@@ -116,21 +140,38 @@ export const MasaContextProvider = ({ children }: MasaContextProviderProps) => {
     })();
   }, [masaInstance]);
 
-  useEffect(() => {
-    (async () => {
-      setLoading(true);
+  const loadIdentity = useCallback(async () => {
+    setLoading(true);
 
-      if (masaInstance && walletAddress) {
-        //@ts-ignore
-        const identityResult = await masaInstance.identity.load(walletAddress);
-        setIdentity(identityResult);
-      } else {
-        setIdentity(null);
-      }
-      setLoading(false);
-    })();
+    console.log('Loading identity...');
+    if (masaInstance && walletAddress) {
+      //@ts-ignore
+      const identityResult = await masaInstance.identity.load(walletAddress);
+      console.log('Setting identity', identityResult);
+      setIdentity(identityResult);
+    } else {
+      setIdentity(null);
+    }
+    setLoading(false);
   }, [masaInstance, walletAddress, setIdentity]);
 
+  const handlePurchaseSoulname = useCallback(
+    async (soulname, duration, paymentMethod) => {
+      const tx = await masaInstance?.identity.create(
+        soulname,
+        duration,
+        paymentMethod
+      );
+
+      await loadIdentity();
+    },
+    [masaInstance, loadIdentity]
+  );
+
+  useEffect(() => {
+    loadIdentity();
+  }, [loadIdentity]);
+
   useEffect(() => {
     if (provider) {
       setMasaInstance(createNewMasa(provider));
@@ -152,6 +193,9 @@ export const MasaContextProvider = ({ children }: MasaContextProviderProps) => {
     loggedIn,
     handleLogin,
     handleLogout,
+    handlePurchaseSoulname,
+    connect,
+    closeModal,
   };
 
   return (

src/common/helpers/provider/masa-provider.tsx

@@ -51,8 +51,9 @@ export const useMetamask = () => {
     });
   }, []);
 
+
+
   const connect = () => {
-    console.log('CONNECT');
     //@ts-ignore
     if (window.ethereum) {
       provider.send('eth_requestAccounts', []).then(async () => {

stories/masa.stories.tsx

@@ -25,51 +25,19 @@ const meta: Meta = {
 export default meta;
 
 const Component = () => {
-  const { masa, setModalOpen } = useMasa();
+  const { masa, connect } = useMasa();
 
-  const handleLogin = useCallback(async () => {
-    const result = await masa?.session.login();
-    console.log({ result });
-  }, [masa]);
+  const handleConect = useCallback(() => {
+    connect?.(function() {
+      alert("hello hello connected")
+    });
+  }, [connect]);
 
-  const handleLogout = useCallback(async () => {
-    const result = await masa?.session.logout();
-    console.log({ result });
-  }, [masa]);
-
-  const test = useCallback(async () => {
-    const address = await masa?.config.wallet.getAddress();
-
-    const balance = await masa?.account.getBalances(address as string);
-    console.log({ balance });
-
-    // identity id
-    const identityId = await masa?.identity.load(address);
-    console.log(`Identity ID: '${identityId}'`);
-
-    console.log('ACC', await masa?.soulNames.list(address));
-  }, [masa]);
-
-  const handleCreateIdentity = useCallback(async () => {
-    console.log('IDENTITY', masa?.identity);
-    const result = await masa?.soulNames.create(
-      'NewTestForSDK2.soul',
-      1,
-      'eth'
-    );
-    console.log({ result });
-  }, [masa]);
   return (
     <>
       <h1>SDK Tester!</h1>
 
-      <Button onClick={() => setModalOpen?.(true)}>Use Masa!</Button>
-      <br />
-      <Button onClick={handleLogin}>Login</Button>
-      <Button onClick={handleLogout}>Logout</Button>
-
-      <Button onClick={test}>test</Button>
-      <Button onClick={handleCreateIdentity}>createIdentity</Button>
+      <Button onClick={handleConect}>Use Masa!</Button>
     </>
   );
 };

yarn.lock

@@ -1999,10 +1999,10 @@
   dependencies:
     ethers "^5.6.9"
 
-"@masa-finance/masa-sdk@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@masa-finance/masa-sdk/-/masa-sdk-0.2.3.tgz#44ee5273ab9f9a5551cea6f99c2f210966176963"
-  integrity sha512-33bfVSFIK/tr04WyIGxTeazJvE8xZI1TsCg05qZBJyS5yjQ5DVu8nVMRlNX5/Ee7odJyBFP+rM/DZRVXneX15Q==
+"@masa-finance/masa-sdk@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@masa-finance/masa-sdk/-/masa-sdk-0.2.4.tgz#6d05d5dab812a66245852eb155a3cf8e608acbc7"
+  integrity sha512-OGBbKGa5bJIQHQ/0fXQlYuZtdPSXEhHhmRyxGWlFUkuy2kwnx4xGU+A/AHK3zjNoJHEldPUqzSMewgLUufXQdw==
   dependencies:
     "@masa-finance/masa-contracts-identity" "^0.4.1"
     arweave "^1.11.6"