feat: wip correct wallet address handling

src/provider/configured-rainbowkit-provider.tsx → src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx

@@ -9,8 +9,6 @@ import { Valora } from '@celo/rainbowkit-celo/wallets';
 import { injectedWallet, metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
 // Import CELO chain information
 import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains';
-
-import { configureChains, createClient, WagmiConfig } from 'wagmi';
 import {
   baseGoerli,
   bsc,
@@ -20,17 +18,21 @@ import {
   polygon,
   polygonMumbai,
 } from 'wagmi/chains';
+
+import { configureChains, createClient, WagmiConfig } from 'wagmi';
 import { publicProvider } from 'wagmi/providers/public';
 import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
 
 import type { ReactNode } from 'react';
 import React, { createContext, useContext, useMemo } from 'react';
+import { getRainbowkitChains } from './utils';
 // import { SupportedNetworks } from '@masa-finance/masa-sdk';
 
 type ConfiguredRainbowKitProviderValue = Record<string, never>;
 
 interface ConfiguredRainbowKitProviderProps {
   children: ReactNode;
+  chainsToUse?: any;
 }
 
 const { chains, provider } = configureChains(
@@ -94,12 +96,14 @@ const wagmiClient = createClient({
 
 export const ConfiguredRainbowKitProvider = ({
   children,
+  chainsToUse,
 }: ConfiguredRainbowKitProviderProps) => {
+  const rainbowkitChains = getRainbowkitChains(chainsToUse);
   const contextValue = useMemo(() => ({}), []);
 
   return (
     <WagmiConfig client={wagmiClient}>
-      <RainbowKitProvider modalSize="compact" chains={chains}>
+      <RainbowKitProvider modalSize="compact" chains={rainbowkitChains}>
         <ConfiguredRainbowKitContext.Provider value={contextValue}>
           {children}
         </ConfiguredRainbowKitContext.Provider>

src/provider/configured-rainbowkit-provider/index.ts

@@ -0,0 +1 @@
+export * from './configured-rainbowkit-provider';

src/provider/configured-rainbowkit-provider/utils.ts

@@ -0,0 +1,71 @@
+import { Network, SupportedNetworks } from '@masa-finance/masa-sdk';
+import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains';
+import {
+  baseGoerli,
+  bsc,
+  bscTestnet,
+  goerli,
+  mainnet,
+  polygon,
+  polygonMumbai,
+} from 'wagmi/chains';
+
+const rainbowkitChains = [
+  Alfajores,
+  baseGoerli,
+  bsc,
+  bscTestnet,
+  Celo,
+  goerli,
+  mainnet,
+  polygon,
+  polygonMumbai,
+];
+
+type MasaNetworks = Partial<{
+  goerli: Network;
+  ethereum: Network;
+  mainnet: Network;
+  alfajores: Network;
+  celo: Network;
+  mumbai: Network;
+  polygon: Network;
+  bsctest: Network;
+  bsc: Network;
+  basegoerli: Network;
+  unknown: Network;
+}>;
+
+export const getRainbowkitChains = (
+  networkList?: Array<keyof MasaNetworks>
+) => {
+  if (!networkList || (networkList && !networkList.length)) {
+    return rainbowkitChains;
+  }
+
+  const masaNetworks = Object.keys(SupportedNetworks)
+    .filter((x: string) => x !== 'ethereum' && x !== 'unknown') // remove unused network
+    .reduce((acc: MasaNetworks, val: string) => {
+      acc[val] = SupportedNetworks[val] as Network;
+      return acc;
+    }, {});
+
+  const masaNetworkNames = Object.keys(masaNetworks);
+
+  const userNetworksFiltered = networkList.filter((networkName) =>
+    masaNetworkNames.includes(networkName)
+  );
+
+  const userNetworksMasa = userNetworksFiltered.map((un) => masaNetworks[un]);
+  const userNetworksRainbowkit = userNetworksMasa.map((unm) => unm?.chainId);
+  const userChainsRainbowkit = rainbowkitChains.filter((rainbowkitChain) =>
+    userNetworksRainbowkit.includes(rainbowkitChain.id)
+  );
+  return userChainsRainbowkit;
+
+  //   const networkLi;
+  //   const rainbowkitChains = networkList.filter((network: any) => {
+  //     return network.name === SupportedNetworks.Rainbowkit;
+  //   });
+  //   return rainbowkitChains;
+};

src/provider/masa-context-provider.tsx

@@ -23,6 +23,7 @@ import { useScopes } from './modules/scopes/scopes';
 import { useRainbowKit } from './use-rainbowkit';
 import { useWagmi } from './modules/wagmi';
 import { useNetworkSwitch } from './use-network-switch';
+import { useAsync } from 'react-use';
 
 export { SoulNameErrorCodes };
 
@@ -64,18 +65,42 @@ export const MasaContextProvider = ({
   const [masaInstance, setMasaInstance] = useState<Masa | undefined>();
 
   // provider
-  const { isLoading: wagmiLoading, signer: wagmiSigner } = useWagmi();
+  const {
+    isLoading: wagmiLoading,
+    signer: wagmiSigner,
+    // refetchSigner,
+    provider: wagmiProvider,
+    address: wagmiAddress,
+  } = useWagmi();
+
   const [signer, setSigner] = useState<Signer | undefined>(
     wagmiSigner as Signer
   );
 
-  useEffect(() => setSigner(wagmiSigner as Signer), [wagmiSigner]);
+  useEffect(() => {
+    setSigner(wagmiSigner as Signer);
+  }, [wagmiSigner, wagmiAddress]);
 
   // wallet
   const { walletAddress, isWalletLoading, hasWalletAddress } = useWallet(
     masaInstance,
     wagmiSigner as Signer
   );
+
+  // * little async useEffect helper
+  useAsync(async () => {
+    // const { data: result } = await refetchSigner();
+    // const oldAddress = await wagmiSigner?.getAddress();
+    // const newAddress = await wagmiSigner?.getAddress();
+    console.log('use async hook');
+    console.log({
+      wagmiSigner,
+      wagmiAddress,
+      wagmiProvider,
+      walletAddress,
+    });
+    setSigner(wagmiSigner as Signer);
+  }, [wagmiSigner, wagmiAddress]);
   // session
   const { isLoggedIn, handleLogin, handleLogout, isSessionLoading } =
     useSession(masaInstance, walletAddress);
@@ -263,7 +288,14 @@ export const MasaContextProvider = ({
     };
 
     void loadMasa();
-  }, [arweaveConfig, environmentName, verbose, currentNetwork, wagmiSigner]);
+  }, [
+    arweaveConfig,
+    environmentName,
+    verbose,
+    currentNetwork,
+    wagmiSigner,
+    wagmiAddress,
+  ]);
 
   const context: MasaShape = {
     // masa instance

src/provider/masa-provider.tsx

@@ -9,7 +9,7 @@ import { QueryClientProvider } from 'react-query';
 
 import { queryClient } from './masa-query-client';
 import { MasaInterface } from '../components';
-import ConfiguredRainbowKitProvider from './configured-rainbowkit-provider';
+import ConfiguredRainbowKitProvider from './configured-rainbowkit-provider/configured-rainbowkit-provider';
 
 // needs to be imported using require. Otherwise, it will not load!
 require('@rainbow-me/rainbowkit/styles.css');

src/provider/modules/wagmi/use-wagmi.tsx

@@ -7,6 +7,7 @@ export const useWagmi = () => {
     data: signer,
     isError: isSignerError,
     isLoading: isSignerLoading,
+    refetch: refetchSigner,
   } = useSigner();
   const { address, isConnecting, isDisconnected } = useAccount();
 
@@ -18,6 +19,7 @@ export const useWagmi = () => {
     isDisconnected,
     provider,
     signer,
+    refetchSigner,
     chain: chain as Chain,
     chains,
   };

src/provider/modules/wallet/wallet.ts

@@ -1,7 +1,8 @@
 import { useQuery } from 'react-query';
 import { Masa, NetworkName } from '@masa-finance/masa-sdk';
 import { Signer, Wallet } from 'ethers';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
+import { useAccount, useSigner } from 'wagmi';
 
 export const useWallet = (
   masa?: Masa,
@@ -13,9 +14,12 @@ export const useWallet = (
   status: string;
   error: unknown;
 } => {
+  const { address: wagmiAddress } = useAccount();
+  const signer = useSigner();
+  const { isRefetching } = signer;
   const queryKey: (string | NetworkName | undefined)[] = useMemo(() => {
     return ['wallet', masa?.config.networkName];
-  }, [masa]);
+  }, [masa, wagmiAddress, isRefetching]);
 
   const {
     data: walletAddress,
@@ -31,7 +35,16 @@ export const useWallet = (
       retry: false,
     }
   );
+  useEffect(() => {
+    console.log('isRefetching changed', isRefetching);
+  }, [isRefetching]);
+  // console.log({
+  //   wagmiAddress,
 
+  //   walletAddress,
+
+  //   signer: signer.data?.provider,
+  // });
   const hasWalletAddress = useMemo(() => {
     return !!walletAddress;
   }, [walletAddress]);