diff --git a/src/provider/hooks.ts b/src/provider/hooks.ts index b5920401..4a41bd77 100644 --- a/src/provider/hooks.ts +++ b/src/provider/hooks.ts @@ -3,6 +3,8 @@ import { queryClient } from './masa-query-client'; import { useAsyncFn } from 'react-use'; import { DependencyList } from 'react'; import { + getCreditScoresQueryKey, + getGreenQueryKey, getIdentityQueryKey, getSessionDataQueryKey, getSessionQueryKey, @@ -18,8 +20,8 @@ const QUERIES = [ 'session', 'sessionData', 'soulnames', - // 'credit-scores', - // 'green', + 'green', + 'credit-scores', ]; export type QueryKeyRetrievalInput = { @@ -39,6 +41,10 @@ export const getQueryKeys = () => ({ getWalletQueryKey({ masa, signer, walletAddress }), soulnames: ({ masa, signer, walletAddress }: QueryKeyRetrievalInput) => getSoulnamesQueryKey({ masa, signer, walletAddress }), + green: ({ masa, signer, walletAddress }: QueryKeyRetrievalInput) => + getGreenQueryKey({ masa, signer, walletAddress }), + 'credit-scores': ({ masa, signer, walletAddress }: QueryKeyRetrievalInput) => + getCreditScoresQueryKey({ masa, signer, walletAddress }), }); export const invalidateAllQueries = async ({ @@ -101,6 +107,34 @@ export const invalidateIdentity = async ({ ); }; +export const invalidateCreditScores = async ({ + masa, + signer, + walletAddress, +}: QueryKeyRetrievalInput) => { + await queryClient.invalidateQueries( + getQueryKeys()['credit-scores']({ + masa, + signer, + walletAddress, + }) + ); +}; + +export const invalidateGreen = async ({ + masa, + signer, + walletAddress, +}: QueryKeyRetrievalInput) => { + await queryClient.invalidateQueries( + getQueryKeys().green({ + masa, + signer, + walletAddress, + }) + ); +}; + export const useLogout = ( options: { masa?: Masa; diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index 48f2074a..4d87732b 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -73,21 +73,14 @@ export const MasaContextProvider = ({ const { walletAddress, isWalletLoading, hasWalletAddress, reloadWallet } = useWallet(masaInstance, signer); - const { - isConnected, - isDisconnected, - // isDisconnected, - // isLoggedIn: loggedIn, - // isLoggingOut, - hasAccountAddress, - accountAddress, - } = useAccountState({ - masa: masaInstance, - walletAddress, - signer, - hasWalletAddress, - reloadWallet, - }); + const { isConnected, isDisconnected, hasAccountAddress, accountAddress } = + useAccountState({ + masa: masaInstance, + walletAddress, + signer, + hasWalletAddress, + reloadWallet, + }); // session const { isLoggedIn, handleLogin, handleLogout, isSessionLoading } = @@ -128,7 +121,7 @@ export const MasaContextProvider = ({ isCreditScoresLoading, handleCreateCreditScore, reloadCreditScores, - } = useCreditScores(masaInstance, walletAddress, identity); + } = useCreditScores(masaInstance, accountAddress, identity); // greens const { @@ -137,7 +130,7 @@ export const MasaContextProvider = ({ handleGenerateGreen, handleCreateGreen, reloadGreens, - } = useGreen(masaInstance, walletAddress); + } = useGreen(masaInstance, accountAddress); // scope const { scope, setScope, areScopesFullfiled } = useScopes( @@ -204,42 +197,8 @@ export const MasaContextProvider = ({ wagmiLoading, ]); - // const providerWagmi = useProvider(); - - // useEffect(() => { - // if (forceNetwork && currentNetwork?.networkName !== forceNetwork) - // openSwitchChainModal(); - // else if (!isLoggedIn && provider) openAuthenticateModal(); - // if (isLoggedIn) { - // if (!soulnames || (soulnames && soulnames.length === 0)) { - // // TODO: add scopes - // openCreateSoulnameModal(); - // } - // } - // }, [ - // isLoggedIn, - // provider, - // forceNetwork, - // soulnames, - // currentNetwork, - // // openAuthenticateModal, - // // openSwitchChainModal, - // // openCreateSoulnameModal, - // ]); - const connect = useCallback( (options?: { scope?: string[]; callback?: () => void }) => { - // if (useRainbowKitWalletConnect) { - // openConnectModal?.(); - // // setRainbowKitModalCallback(() => { - // // return () => { - // // openAuthenticateModal(); - // // openConnectedModal(); - // // }; - // // }); - // // return; - // } - if (verbose) { console.info({ forcedPage, useRainbowKitWalletConnect, options }); } @@ -255,7 +214,6 @@ export const MasaContextProvider = ({ }); openConnectModal?.(); - console.log('OPENING RK MODAL'); } else { setModalOpen(true); } @@ -306,6 +264,7 @@ export const MasaContextProvider = ({ void loadMasa(); }, [arweaveConfig, environmentName, verbose, currentNetwork, signer]); + if (verbose) console.log('MASA STATE', { greens, soulnames, creditScores }); const context: MasaShape = { // masa instance masa: masaInstance, diff --git a/src/provider/modules/credit-scores/credit-scores.ts b/src/provider/modules/credit-scores/credit-scores.ts index 6d1baef7..fd779e6c 100644 --- a/src/provider/modules/credit-scores/credit-scores.ts +++ b/src/provider/modules/credit-scores/credit-scores.ts @@ -2,28 +2,31 @@ import { useCallback, useMemo } from 'react'; import { useQuery } from 'react-query'; import { queryClient } from '../../masa-query-client'; import { ICreditScore, Masa, NetworkName } from '@masa-finance/masa-sdk'; -import { BigNumber } from 'ethers'; +import { BigNumber, Signer } from 'ethers'; -export const useCreditScores = ( - masa?: Masa, - walletAddress?: string, +export const getCreditScoresQueryKey = ({ + masa, + walletAddress, +}: { + masa?: Masa; + signer?: Signer; // unused + walletAddress?: string; // unused +}) => { + return ['credit-scores', walletAddress, masa?.config.networkName]; +}; + +export const useCreditScoresQuery = ({ + masa, + walletAddress, + identity, +}: { + masa?: Masa; + walletAddress?: string; identity?: { identityId?: BigNumber; address?: string; - } -): { - creditScores?: - | { - tokenId: BigNumber; - tokenUri: string; - metadata?: ICreditScore; - }[]; - handleCreateCreditScore: () => Promise; - status: string; - isCreditScoresLoading: boolean; - reloadCreditScores: () => void; - error: unknown; -} => { + }; +}) => { const queryKey: (string | NetworkName | undefined)[] = useMemo(() => { return ['credit-scores', walletAddress, masa?.config.networkName]; }, [walletAddress, masa]); @@ -58,19 +61,69 @@ export const useCreditScores = ( }, }); + const invalidateCreditScores = useCallback( + async () => await queryClient.invalidateQueries(['credit-scores']), + [] + ); + + return { + creditScores, + status, + isLoading, + isFetching, + reloadCreditScores, + invalidateCreditScores, + error, + }; +}; + +export type UseCreditScoresReturnType = { + creditScores?: + | { + tokenId: BigNumber; + tokenUri: string; + metadata?: ICreditScore; + }[]; + handleCreateCreditScore: () => Promise; + status: string; + isCreditScoresLoading: boolean; + reloadCreditScores: () => void; + invalidateCreditScores: () => void; + error: unknown; +}; + +export const useCreditScores = ( + masa?: Masa, + walletAddress?: string, + identity?: { + identityId?: BigNumber; + address?: string; + } +): UseCreditScoresReturnType => { + const { + creditScores, + status, + isLoading, + isFetching, + reloadCreditScores, + invalidateCreditScores, + error, + } = useCreditScoresQuery({ masa, walletAddress, identity }); + const handleCreateCreditScore = useCallback(async (): Promise< boolean | undefined > => { const response = await masa?.creditScore.create(); - await queryClient.invalidateQueries(queryKey); + await invalidateCreditScores(); return response?.success; - }, [masa, queryKey]); + }, [masa, invalidateCreditScores]); return { creditScores, isCreditScoresLoading: isLoading || isFetching, handleCreateCreditScore, reloadCreditScores, + invalidateCreditScores, status, error, }; diff --git a/src/provider/modules/green/green.ts b/src/provider/modules/green/green.ts index f00abe7a..22ecbc4c 100644 --- a/src/provider/modules/green/green.ts +++ b/src/provider/modules/green/green.ts @@ -10,27 +10,24 @@ import { } from '@masa-finance/masa-sdk'; import { BigNumber } from 'ethers'; -export const useGreen = ( - masa?: Masa, - walletAddress?: string -): { - greens?: { - tokenId: BigNumber; - tokenUri: string; - metadata?: IGreen; - }[]; - handleGenerateGreen: ( - phoneNumber: string - ) => Promise; - handleCreateGreen: ( - phoneNumber: string, - code: string - ) => Promise; - status: string; - isGreensLoading: boolean; - reloadGreens: () => void; - error: unknown; -} => { +export const getGreenQueryKey = ({ + masa, + walletAddress, +}: { + masa?: Masa; + walletAddress?: string; + signer?: any; // unused here +}) => { + return ['green', walletAddress, masa?.config.networkName]; +}; + +export const useGreenQuery = ({ + masa, + walletAddress, +}: { + masa?: Masa; + walletAddress?: string; +}) => { const queryKey: (string | NetworkName | undefined)[] = useMemo(() => { return ['green', walletAddress, masa?.config.networkName]; }, [masa, walletAddress]); @@ -65,16 +62,66 @@ export const useGreen = ( }, }); + const invalidateGreen = useCallback( + async () => await queryClient.invalidateQueries(['green']), + [] + ); + + return { + greens, + status, + isLoading, + isFetching, + reloadGreens, + invalidateGreen, + error, + }; +}; + +export type UseGreenReturnValue = { + greens?: { + tokenId: BigNumber; + tokenUri: string; + metadata?: IGreen; + }[]; + handleGenerateGreen: ( + phoneNumber: string + ) => Promise; + handleCreateGreen: ( + phoneNumber: string, + code: string + ) => Promise; + status: string; + isGreensLoading: boolean; + reloadGreens: () => void; + error: unknown; + invalidateGreen: () => void; +}; + +export const useGreen = ( + masa?: Masa, + walletAddress?: string +): UseGreenReturnValue => { + const { + greens, + status, + isLoading, + isFetching, + reloadGreens, + error, + invalidateGreen, + } = useGreenQuery({ masa, walletAddress }); + const handleCreateGreen = useCallback( async ( phoneNumber: string, code: string ): Promise => { const response = await masa?.green.create('ETH', phoneNumber, code); - await queryClient.invalidateQueries(queryKey); + await invalidateGreen(); return response; }, - [masa, queryKey] + [masa, invalidateGreen] ); const handleGenerateGreen = useCallback( @@ -97,5 +144,6 @@ export const useGreen = ( reloadGreens, status, error, + invalidateGreen, }; }; diff --git a/src/provider/use-account-state.ts b/src/provider/use-account-state.ts index f6c17fa8..fc2be416 100644 --- a/src/provider/use-account-state.ts +++ b/src/provider/use-account-state.ts @@ -9,6 +9,9 @@ import { invalidateAllQueries, invalidateIdentity, invalidateWallet, + invalidateCreditScores, + invalidateGreen, + // invalidateSession, useLogout, } from './hooks'; import { useMemo, useState } from 'react'; @@ -57,16 +60,20 @@ export const useAccountState = ({ // * detects if we have a new account or chain useAsync(async () => { - const handleConnectorUpdate = async ({ account }: ConnectorData) => { + const handleConnectorUpdate = async ({ account, chain }: ConnectorData) => { if (account) { setAccountAddress(account); await invalidateAllQueries({ masa, signer, walletAddress }); // reloadIdentity?.(); // reloadWallet?.(); + } else if (chain) { + console.log('new chain', chain); + await Promise.all([ + invalidateIdentity({ masa, signer, walletAddress }), + invalidateCreditScores({ masa, signer, walletAddress }), + invalidateGreen({ masa, signer, walletAddress }), + ]); } - // else if (chain) { - // console.log('new chain', chain); - // } }; if (activeConnector) { diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx index 48207261..41ca5a47 100644 --- a/stories/masa.stories.tsx +++ b/stories/masa.stories.tsx @@ -219,8 +219,8 @@ const TemplateWithRainbowKit: Story = (props: Args) => {