feat: add masa state generation

package.json

@@ -38,6 +38,7 @@
     "@acusti/react-code-input": "^3.11.0",
     "@babel/preset-typescript": "^7.21.5",
     "@celo/rainbowkit-celo": "^0.11.2",
+    "@masa-finance/masa-contracts-identity": "^1.8.0",
     "@masa-finance/masa-sdk": "^3.2.3",
     "@metamask/providers": "^11.0.0",
     "@rainbow-me/rainbowkit": "0.12.14",

src/refactor/base-provider.tsx

@@ -7,7 +7,7 @@ import React, {
   useState,
 } from 'react';
 import { SupportedNetworks } from '@masa-finance/masa-sdk';
-import { MasaReactConfig } from './config';
+import { MasaReactConfig, mergeConfigWithDefault } from './config';
 
 export interface MasaReactConfigBaseProvider extends MasaReactConfig {
   updateConfig: (newConfig: Partial<MasaReactConfig>) => void;
@@ -23,8 +23,9 @@ export const MasaBaseProvider = ({
   children: ReactNode;
   config: MasaReactConfig;
 }) => {
-  console.log('provider param', { config });
-  const [masaConfig, setConfig] = useState<MasaReactConfig>(config);
+  const [masaConfig, setConfig] = useState<MasaReactConfig>(
+    mergeConfigWithDefault(config)
+  );
 
   const updateConfig = useCallback(
     (newConfig: Partial<MasaReactConfig>) => {

src/refactor/config.ts

@@ -1,4 +1,8 @@
-import type { MasaArgs, NetworkName } from '@masa-finance/masa-sdk';
+import type {
+  EnvironmentName,
+  MasaArgs,
+  NetworkName,
+} from '@masa-finance/masa-sdk';
 
 export interface ArweaveConfig {
   port?: string;
@@ -11,8 +15,8 @@ export interface MasaReactConfig {
   company?: string;
   allowedNetworkNames?: NetworkName[];
   allowedWallets?: Array<'metamask' | 'valora' | 'walletconnect'>;
-
   arweaveConfig?: ArweaveConfig;
+  forceChain?: NetworkName;
 
   wagmiConfig?: unknown;
 
@@ -22,3 +26,40 @@ export interface MasaReactConfig {
 
   masaConfig: Omit<MasaArgs, 'signer'>;
 }
+
+export const defaultConfig: Partial<MasaReactConfig> = {
+  company: 'Masa',
+  allowedNetworkNames: [
+    'ethereum',
+    'goerli',
+    'alfajores',
+    'celo',
+    'mumbai',
+    'polygon',
+    'bsctest',
+    'bsc',
+    'basegoerli',
+  ],
+  allowedWallets: ['metamask', 'valora', 'walletconnect'],
+  masaConfig: {
+    environment: 'dev' as EnvironmentName,
+    networkName: 'ethereum' as NetworkName,
+    verbose: false,
+    arweave: {
+      host: 'arweave.net',
+      port: Number.parseInt('443', 10),
+      protocol: 'https',
+      logging: false,
+    },
+  },
+};
+
+export const mergeConfigWithDefault = (config: Partial<MasaReactConfig>) =>
+  ({
+    ...defaultConfig,
+    ...config,
+    masaConfig: {
+      ...defaultConfig.masaConfig,
+      ...config.masaConfig,
+    },
+  } as MasaReactConfig);

src/refactor/masa-client/masa-client-provider.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode, createContext, useContext, useMemo } from 'react';
+import type { Masa } from '@masa-finance/masa-sdk';
+import { useMasaClient } from './masa-client';
+
+export interface MasaClientProviderValue {
+  masa?: Masa;
+}
+
+export const MasaClientContext = createContext({} as MasaClientProviderValue);
+
+export const MasaClientProvider = ({ children }: { children: ReactNode }) => {
+  const masa = useMasaClient();
+
+  const masaClientProviderValue = useMemo(
+    () => ({
+      masa,
+    }),
+    [masa]
+  );
+  return (
+    <MasaClientContext.Provider value={masaClientProviderValue}>
+      {children}
+    </MasaClientContext.Provider>
+  );
+};
+
+export const useMasaClientProvider = (): MasaClientProviderValue =>
+  useContext(MasaClientContext);
+export default MasaClientProvider;

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

@@ -1,3 +1,20 @@
-export const useMasaAccount = () => {
-    return {};
-}
+import type { Signer } from 'ethers';
+import { useConfig } from '../base-provider';
+import { useWallet } from '../wallet-client/wallet/use-wallet';
+import { useMasaSDK } from './use-masa-sdk';
+
+export const useMasaClient = () => {
+  const { masaConfig } = useConfig();
+  const { signer } = useWallet();
+
+  const masa = useMasaSDK(
+    {
+      signer: signer as Signer | undefined,
+      ...masaConfig,
+      environmentName: masaConfig.environment,
+    },
+    [signer, masaConfig]
+  );
+
+  return masa;
+};

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

@@ -1,15 +1,101 @@
-import { Masa } from '@masa-finance/masa-sdk';
-import { Signer } from 'ethers';
+import {
+  Environment,
+  EnvironmentName,
+  environments,
+  IIdentityContracts,
+  Masa,
+  NetworkName,
+} from '@masa-finance/masa-sdk';
+import {
+  SoulName__factory,
+  SoulStore__factory,
+} from '@masa-finance/masa-contracts-identity';
+
+import type { Signer } from 'ethers';
 import { useMemo } from 'react';
+import { ArweaveConfig } from '../config';
+
+export interface UseMasaSdkArgs {
+  signer?: Signer;
+  environmentName?: EnvironmentName;
+  networkName?: NetworkName;
+  arweaveConfig?: ArweaveConfig;
+  verbose?: boolean;
+  apiUrl?: string;
+  contractAddressOverrides?: {
+    SoulNameAddress: string;
+    SoulStoreAddress: string;
+  };
+}
+export const useMasaSDK = (
+  {
+    signer,
+    environmentName,
+    networkName = 'unknown',
+    arweaveConfig,
+    verbose,
+    apiUrl,
+    contractAddressOverrides,
+  }: UseMasaSdkArgs,
+  deps: Array<unknown>
+): Masa | undefined => {
+  const masa = useMemo(() => {
+    if (!signer) return undefined;
+
+    console.log({ environmentName });
+    const environment: Environment | undefined = environments.find(
+      (singleEnvironment: Environment) =>
+        singleEnvironment.name === environmentName
+    );
+
+    if (!environment) {
+      console.error(`Unable to find environment ${environmentName as string}`);
+      return undefined;
+    }
+
+    let contractOverrides: Partial<IIdentityContracts> | undefined;
+
+    if (contractAddressOverrides) {
+      console.log({ contractAddressOverrides });
+
+      contractOverrides = {} as Partial<IIdentityContracts>;
+      contractOverrides.SoulStoreContract = SoulStore__factory.connect(
+        contractAddressOverrides.SoulStoreAddress,
+        signer
+      );
+      contractOverrides.SoulStoreContract.hasAddress = true;
+
+      contractOverrides.SoulNameContract = SoulName__factory.connect(
+        contractAddressOverrides.SoulNameAddress,
+        signer
+      );
+      contractOverrides.SoulNameContract.hasAddress = true;
+    }
 
-export const useMasaSDK = ({ signer }: { signer: Signer }) => {
-  const masa = useMemo(
-    () =>
-      new Masa({
-        signer,
-      }),
-    [signer]
-  );
+    return new Masa({
+      signer,
+      apiUrl: apiUrl ?? environment.apiUrl,
+      networkName,
+      environment: environment.environment,
+      arweave: {
+        host: arweaveConfig?.host || 'arweave.net',
+        port: Number.parseInt(arweaveConfig?.port || '443', 10),
+        protocol: arweaveConfig?.protocol || 'https',
+        logging: !!arweaveConfig?.logging || false,
+      },
+      contractOverrides,
+      verbose,
+    });
+  }, [
+    signer,
+    apiUrl,
+    environmentName,
+    networkName,
+    arweaveConfig,
+    verbose,
+    contractAddressOverrides,
+    ...deps,
+  ]);
 
   return masa;
 };

src/refactor/masa-provider.tsx

@@ -3,6 +3,7 @@ import MasaBaseProvider from './base-provider';
 import { MasaReactConfig } from './config';
 import WalletProvider from './wallet-client/wallet-client-provider';
 import WagmiRainbowkitProvider from './wallet-client/wagmi-rainbowkit-provider';
+import MasaClientProvider from './masa-client/masa-client-provider';
 
 export interface MasaProviderValue {}
 
@@ -21,9 +22,11 @@ export const MasaProvider = ({
     <MasaBaseProvider config={config}>
       <WagmiRainbowkitProvider>
         <WalletProvider>
-          <MasaContext.Provider value={masaProviderValue}>
-            {children}
-          </MasaContext.Provider>
+          <MasaClientProvider>
+            <MasaContext.Provider value={masaProviderValue}>
+              {children}
+            </MasaContext.Provider>
+          </MasaClientProvider>
         </WalletProvider>
       </WagmiRainbowkitProvider>
     </MasaBaseProvider>

src/refactor/masanew.stories.tsx

@@ -7,7 +7,7 @@ import { Button } from './ui';
 import './ui/styles.scss';
 import { useConfig } from './base-provider';
 import MasaProvider from './masa-provider';
-// import { useWalletClient } from './wallet-client/wallet-client-provider';
+
 import { useWallet } from './wallet-client/wallet/use-wallet';
 import { useNetwork } from './wallet-client/network/use-network';
 
@@ -225,7 +225,9 @@ const Component = (): JSX.Element => {
         <li>
           <Button
             type="button"
-            onClick={() => console.log('config', { config })}
+            onClick={() =>
+              console.log('config', { config, masaConfig: config.masaConfig })
+            }
           >
             Log Config
           </Button>

src/refactor/ui/scss/fonts.scss

@@ -1,10 +1,8 @@
 @font-face {
   font-family: 'Proxima Nova';
   font-weight: 500;
-  src: url('') url('../../.../../../fonts/proximanova-bold-webfont.woff')
-    format('woff');
-  src: url('../../.../../../fonts/proximanova-bold-webfont.woff2')
-    format('woff2');
+  src: url('../../../fonts/proximanova-bold-webfont.woff') format('woff');
+  src: url('../../../fonts/proximanova-bold-webfont.woff2') format('woff2');
 }
 
 @font-face {