diff --git a/package.json b/package.json index 9fc053de..a57e75c7 100644 --- a/package.json +++ b/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", diff --git a/src/common/components/masa-interface/index.tsx b/src/common/components/masa-interface/index.tsx index c6edb744..cabb87f1 100644 --- a/src/common/components/masa-interface/index.tsx +++ b/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 = () => { <> void} > {pages[page]} diff --git a/src/common/components/masa-interface/pages/connected/index.tsx b/src/common/components/masa-interface/pages/connected/index.tsx index a76571fa..ca5bedb0 100644 --- a/src/common/components/masa-interface/pages/connected/index.tsx +++ b/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(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!

+

I don't want to use this wallet

diff --git a/src/common/components/masa-interface/pages/createIdentity/index.tsx b/src/common/components/masa-interface/pages/createIdentity/index.tsx index a2d59bf7..58ee4c5d 100644 --- a/src/common/components/masa-interface/pages/createIdentity/index.tsx +++ b/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(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 ; + return (
@@ -56,7 +59,7 @@ export const InterfaceCreateIdentity = () => { />
-
diff --git a/src/common/components/modal/index.tsx b/src/common/components/modal/index.tsx index c60975c9..0b69d1bc 100644 --- a/src/common/components/modal/index.tsx +++ b/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 ( - setOpen(false)}> +
logo diff --git a/src/common/helpers/provider/masa-context.tsx b/src/common/helpers/provider/masa-context.tsx index 2f9116d0..3e9e38b7 100644 --- a/src/common/helpers/provider/masa-context.tsx +++ b/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({}); @@ -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(null); const [loggedIn, setLoggedIn] = useState(false); + const [modalCallback, setModalCallback] = useState(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 ( diff --git a/src/common/helpers/provider/masa-provider.tsx b/src/common/helpers/provider/masa-provider.tsx index 0792ebe3..0d54fa5b 100644 --- a/src/common/helpers/provider/masa-provider.tsx +++ b/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 () => { diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx index 645da65a..d907926c 100644 --- a/stories/masa.stories.tsx +++ b/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 ( <>

SDK Tester!

- -
- - - - - + ); }; diff --git a/yarn.lock b/yarn.lock index 4fc9daf9..539000aa 100644 --- a/yarn.lock +++ b/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"