From 54fe92df55b2ef6afee275207b740c9548742dc7 Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 9 Jun 2023 10:15:09 +0200 Subject: [PATCH] feat: add masa state generation --- package.json | 1 + src/refactor/base-provider.tsx | 7 +- src/refactor/config.ts | 45 +++++++- .../masa-client/masa-client-provider.tsx | 29 +++++ src/refactor/masa-client/masa-client.ts | 23 +++- src/refactor/masa-client/use-masa-sdk.ts | 106 ++++++++++++++++-- src/refactor/masa-provider.tsx | 9 +- src/refactor/masanew.stories.tsx | 6 +- src/refactor/ui/scss/fonts.scss | 6 +- 9 files changed, 205 insertions(+), 27 deletions(-) create mode 100644 src/refactor/masa-client/masa-client-provider.tsx diff --git a/package.json b/package.json index b73e1ecc..5b7642e2 100644 --- a/package.json +++ b/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", diff --git a/src/refactor/base-provider.tsx b/src/refactor/base-provider.tsx index ef7e611a..a58d16fa 100644 --- a/src/refactor/base-provider.tsx +++ b/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) => void; @@ -23,8 +23,9 @@ export const MasaBaseProvider = ({ children: ReactNode; config: MasaReactConfig; }) => { - console.log('provider param', { config }); - const [masaConfig, setConfig] = useState(config); + const [masaConfig, setConfig] = useState( + mergeConfigWithDefault(config) + ); const updateConfig = useCallback( (newConfig: Partial) => { diff --git a/src/refactor/config.ts b/src/refactor/config.ts index fd461554..139eda75 100644 --- a/src/refactor/config.ts +++ b/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; } + +export const defaultConfig: Partial = { + 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) => + ({ + ...defaultConfig, + ...config, + masaConfig: { + ...defaultConfig.masaConfig, + ...config.masaConfig, + }, + } as MasaReactConfig); diff --git a/src/refactor/masa-client/masa-client-provider.tsx b/src/refactor/masa-client/masa-client-provider.tsx new file mode 100644 index 00000000..b3163f54 --- /dev/null +++ b/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 ( + + {children} + + ); +}; + +export const useMasaClientProvider = (): MasaClientProviderValue => + useContext(MasaClientContext); +export default MasaClientProvider; diff --git a/src/refactor/masa-client/masa-client.ts b/src/refactor/masa-client/masa-client.ts index 27bc371a..f79dfa8d 100644 --- a/src/refactor/masa-client/masa-client.ts +++ b/src/refactor/masa-client/masa-client.ts @@ -1,3 +1,20 @@ -export const useMasaAccount = () => { - return {}; -} \ No newline at end of file +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; +}; diff --git a/src/refactor/masa-client/use-masa-sdk.ts b/src/refactor/masa-client/use-masa-sdk.ts index e77dc8aa..e747e376 100644 --- a/src/refactor/masa-client/use-masa-sdk.ts +++ b/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 +): 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 | undefined; + + if (contractAddressOverrides) { + console.log({ contractAddressOverrides }); + + contractOverrides = {} as Partial; + 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; }; diff --git a/src/refactor/masa-provider.tsx b/src/refactor/masa-provider.tsx index df0c3ace..85bea701 100644 --- a/src/refactor/masa-provider.tsx +++ b/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 = ({ - - {children} - + + + {children} + + diff --git a/src/refactor/masanew.stories.tsx b/src/refactor/masanew.stories.tsx index 9f7d0c62..f0bd4893 100644 --- a/src/refactor/masanew.stories.tsx +++ b/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 => {
  • diff --git a/src/refactor/ui/scss/fonts.scss b/src/refactor/ui/scss/fonts.scss index f3115111..91535e22 100644 --- a/src/refactor/ui/scss/fonts.scss +++ b/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 {