feat: add soulnames, wip

src/refactor/masa-client-provider.tsx

@@ -1,10 +1,10 @@
 import React, { ReactNode, createContext, useContext, useMemo } from 'react';
 import { useAsync } from 'react-use';
 import { useMasaClient } from './masa-client/use-masa-client';
-import { useIdentity } from './masa-feature/use-identity';
+import { useIdentity } from './masa/use-identity';
 
 import { useWallet } from './wallet-client/wallet/use-wallet';
-import { useSession } from './masa-feature/use-session';
+import { useSession } from './masa/use-session';
 
 export interface MasaClientProviderValue {
   masa?: ReturnType<typeof useMasaClient>['sdk'];

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

@@ -47,7 +47,9 @@ export const useMasaClient = () => {
   const { value: masaChainId } = useAsync(async () => {
     if (masa) {
       const mChainId = await masa.config.signer?.getChainId();
+
       if (mChainId !== activeChainId) return undefined;
+
       return mChainId;
     }
 
@@ -56,10 +58,12 @@ export const useMasaClient = () => {
 
   const { value: masaNetwork } = useAsync(async () => {
     if (!masa) return undefined;
+    if (masaChainId !== activeChainId) return undefined;
+
     const network = await masa.config.signer?.provider?.getNetwork();
-    if (network?.name !== activeNetwork) return undefined;
-    return network?.name;
-  }, [masa, activeNetwork]);
+
+    return network?.name === 'unknown' ? activeNetwork : network?.name;
+  }, [masa, activeNetwork, activeChainId, masaChainId]);
 
   const masaClient = useMemo(() => {
     if (address !== masaAddress) {

src/refactor/masa-client/use-masa-query-client.ts

@@ -0,0 +1,12 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useClient } from 'wagmi';
+import { QcContext } from '../masa-provider';
+
+export const useMasaQueryClient = () => {
+  const queryClient = useQueryClient({ context: QcContext });
+  const client = useClient();
+
+  console.log('wagmiclient', { client });
+
+  return queryClient;
+};

src/refactor/masa-client/use-masa-sdk.ts

@@ -107,6 +107,7 @@ export const useMasaSDK = (
       verbose,
     });
   }, [
+    address,
     signer,
     apiUrl,
     environmentName,

src/refactor/masa/use-identity-listen.ts

@@ -0,0 +1,38 @@
+import { useAsync } from 'react-use';
+import { useMasaClient } from '../masa-client/use-masa-client';
+import { useNetwork } from '../wallet-client/network';
+import type { useSession } from './use-session';
+import type { useIdentity } from './use-identity';
+
+export const useIdentityListen = ({
+  identity,
+  getIdentity,
+  sessionAddress,
+}: {
+  identity?: ReturnType<typeof useIdentity>['identity'];
+  getIdentity: ReturnType<typeof useIdentity>['getIdentity'];
+  sessionAddress?: ReturnType<typeof useSession>['sessionAddress'];
+}) => {
+  const { masaAddress, masaNetwork } = useMasaClient();
+  const { activeNetwork } = useNetwork();
+  //   const { identity, getIdentity } = useIdentity();
+
+  useAsync(async () => {
+    if (
+      masaAddress === sessionAddress &&
+      masaNetwork === activeNetwork &&
+      identity?.address !== masaAddress
+    )
+      // * NOTE: we need to make sure the states are in sync before loading the identity
+      await getIdentity();
+
+    return undefined;
+  }, [
+    getIdentity,
+    masaAddress,
+    activeNetwork,
+    masaNetwork,
+    sessionAddress,
+    identity,
+  ]);
+};

src/refactor/masa/use-identity-purchase.ts

@@ -0,0 +1,50 @@
+import { useAsyncFn } from 'react-use';
+import type { PaymentMethod } from '@masa-finance/masa-sdk';
+import { useMasaClient } from '../masa-client/use-masa-client';
+
+
+export const useIdentityPurchase = () => {
+  const { sdk: masa } = useMasaClient();
+  const [
+    { loading: isPurchasingIdentity, value: hasPurchasedIdentity },
+    purchaseIdentity,
+  ] = useAsyncFn(async () => {
+    const purchasedIdentity = await masa?.identity.create();
+    return purchasedIdentity?.success;
+  }, [masa]);
+
+  const [
+    {
+      value: hasPurchasedIdentityWithSoulName,
+      loading: isPurchasingIdentityWithSoulName,
+    },
+    purchaseIdentityWithSoulName,
+  ] = useAsyncFn(
+    async (
+      paymentMethod: PaymentMethod,
+      soulname: string,
+      registrationPeriod: number,
+      style?: string
+    ) => {
+      const result = await masa?.identity.createWithSoulName(
+        paymentMethod,
+        soulname,
+        registrationPeriod,
+        style
+      );
+
+      return !!result?.success;
+    },
+    [masa]
+  );
+
+  return {
+    purchaseIdentity,
+    isPurchasingIdentity,
+    hasPurchasedIdentity,
+
+    purchaseIdentityWithSoulName,
+    isPurchasingIdentityWithSoulName,
+    hasPurchasedIdentityWithSoulName,
+  };
+};

src/refactor/masa-feature/use-identity.ts → src/refactor/masa/use-identity.ts

@@ -1,19 +1,20 @@
-import { useAsync, useAsyncFn } from 'react-use';
+import { useAsyncFn } from 'react-use';
 import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import { useMasaClient } from '../masa-client/use-masa-client';
 import { useSession } from './use-session';
 import { QcContext } from '../masa-provider';
 import { useNetwork } from '../wallet-client/network';
 import { useWallet } from '../wallet-client/wallet/use-wallet';
+import { isIdentityContractAvailible } from './utils';
+import { useIdentityListen } from './use-identity-listen';
 // import { useWallet } from '../wallet-client/wallet/use-wallet';
 
 export const useIdentity = () => {
-  // const queryClient = useQueryClient({ context: QcContext });
   const { masaAddress, sdk: masa, masaNetwork } = useMasaClient();
   const { isDisconnected } = useWallet();
   const { sessionAddress, hasSession } = useSession();
   const { activeNetwork } = useNetwork();
-  // const { address } = useWallet();
 
   const [{ loading: isLoadingIdentity }, loadIdentity] =
     useAsyncFn(async () => {
@@ -25,8 +26,8 @@ export const useIdentity = () => {
         if (!hasSession) return null;
         return await masa.identity.load(masaAddress);
       } catch (error) {
-        console.log('IM IN THIS ERROR', { error });
-        throw error;
+        console.error('ERROR loading identity', error);
+        return null;
       }
     }, [
       masaAddress,
@@ -48,32 +49,23 @@ export const useIdentity = () => {
       'identity',
       { masaAddress, sessionAddress, masaNetwork, persist: false },
     ],
-    onSettled: () => console.log('settled identity'),
     queryFn: async () => loadIdentity(),
   });
 
-  useAsync(async () => {
-    if (
-      masaAddress === sessionAddress &&
-      masaNetwork === activeNetwork &&
-      identity?.address !== masaAddress
-    )
-      await loadIdentity();
+  const hasIdentity = useMemo(() => !!identity, [identity]);
+  const isIdentityAvailibleInNetwork = useMemo(
+    () => isIdentityContractAvailible(masa),
+    [masa]
+  );
 
-    return undefined;
-  }, [
-    loadIdentity,
-    masaAddress,
-    activeNetwork,
-    masaNetwork,
-    sessionAddress,
-    identity,
-  ]);
+  useIdentityListen({ identity, getIdentity, sessionAddress });
 
   return {
     identity,
+    hasIdentity,
     isLoadingIdentity,
     isFetchingIdentity,
+    isIdentityAvailibleInNetwork,
     getIdentity,
   };
 };

src/refactor/masa-feature/use-session.ts → src/refactor/masa/use-session.ts

@@ -1,18 +1,18 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useAsyncFn } from 'react-use';
 import type { ISession } from '@masa-finance/masa-sdk';
 import { useMemo } from 'react';
 import { useWallet } from '../wallet-client/wallet/use-wallet';
 import { useMasaClient } from '../masa-client/use-masa-client';
+import { useMasaQueryClient } from '../masa-client/use-masa-query-client';
 import { QcContext } from '../masa-provider';
 
 // * NOTE: react-query does not allow us to pass undefined as a function return,
 // * NOTE: so we need to convert an undefined result in every query to null
-// * TODO: split up the queries, pass context via function variable to avoid dependency cycle
 export const useSession = () => {
   const { address, isDisconnected, previousAddress, isConnected } = useWallet();
   const { masa, masaAddress } = useMasaClient();
-  const queryClient = useQueryClient({ context: QcContext });
+  const queryClient = useMasaQueryClient();
 
   // * callbacks
   const [{ loading: isCheckingSession }, checkSessionAsync] =

src/refactor/masa/use-soulnames-purchase.ts

@@ -0,0 +1,37 @@
+import type { PaymentMethod } from '@masa-finance/masa-sdk';
+import { useAsyncFn } from 'react-use';
+import { useMasaClient } from '../masa-client/use-masa-client';
+import { useMasaQueryClient } from '../masa-client/use-masa-query-client';
+
+export const useSoulNamesPurchase = () => {
+  const { sdk: masa } = useMasaClient();
+  const queryClient = useMasaQueryClient();
+  const [
+    { loading: isPurchasingSoulName, value: hasPurchasedSoulName },
+    purchaseSoulName,
+  ] = useAsyncFn(
+    async (
+      soulname: string,
+      registrationPeriod: number,
+      paymentMethod: PaymentMethod,
+      style?: string
+    ) => {
+      const result = await masa?.soulName.create(
+        paymentMethod,
+        soulname,
+        registrationPeriod,
+        undefined,
+        style
+      );
+      await queryClient.invalidateQueries(['soulnames']);
+      return !!result?.success;
+    },
+    [masa, queryClient]
+  );
+
+  return {
+    isPurchasingSoulName,
+    hasPurchasedSoulName,
+    purchaseSoulName,
+  };
+};

src/refactor/masa/use-soulnames.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+import { useAsync } from 'react-use';
+import { QcContext } from '../masa-provider';
+import { useMasaClient } from '../masa-client/use-masa-client';
+
+export const useSoulNames = () => {
+  const { masaAddress, masaNetwork, sdk: masa } = useMasaClient();
+  const {
+    data: soulnames,
+    isFetching: isLoadingSoulnames,
+    refetch: getSoulnames,
+  } = useQuery({
+    enabled: !!masa && !!masaAddress && !!masaNetwork,
+    context: QcContext,
+    queryKey: ['soulnames', { masaAddress, masaNetwork, persist: false }],
+    queryFn: async () => masa?.soulName.list(),
+  });
+
+  useAsync(async () => getSoulnames(), [getSoulnames]);
+  return {
+    soulnames,
+    isLoadingSoulnames,
+    getSoulnames,
+  };
+};

src/refactor/masa/utils.ts

@@ -0,0 +1,15 @@
+import type { Masa } from '@masa-finance/masa-sdk';
+import { constants } from 'ethers';
+
+export const isIdentityContractAvailible = (masa?: Masa) => {
+  if (!masa) return false;
+  if (
+    masa?.contracts.instances.SoulboundIdentityContract.address ===
+      constants.AddressZero ||
+    !masa?.contracts.instances.SoulboundIdentityContract.hasAddress
+  ) {
+    return false;
+  }
+
+  return true;
+};