feat: wip wagmi udpate

package.json

@@ -35,23 +35,23 @@
     "@ethersproject/providers": "^5.7.2",
     "@masa-finance/masa-contracts-identity": "^1.15.0",
     "@masa-finance/masa-sdk": "^3.34.1",
-    "@rainbow-me/rainbowkit": "^1.3.6",
+    "@rainbow-me/rainbowkit": "2.0.6",
     "@storybook/addon-styling-webpack": "^1.0.0",
     "@tanstack/query-sync-storage-persister": "^5.32.0",
     "@tanstack/react-query": "^5.32.0",
     "@tanstack/react-query-persist-client": "^5.32.0",
     "@wagmi/chains": "^1.8.0",
-    "@wagmi/core": "^1.4.13",
+    "@wagmi/core": "^2.6.19",
     "ethers": "~5.7.2",
     "rc-tooltip": "^6.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-phone-number-input": "^3.4.0",
     "react-spinners": "^0.13.8",
     "react-use": "^17.5.0",
     "rodal": "^2.0.0",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13"
+    "viem": "^2.9.28",
+    "wagmi": "^2.5.22"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
@@ -72,14 +72,14 @@
     "@tanstack/react-query-devtools": "^5.32.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.2.79",
+    "@types/react": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.7.1",
     "@typescript-eslint/parser": "^7.7.1",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.1",
-    "eslint": "^8.57.0",
+    "eslint": "^9.1.1",
     "eslint-config-masa": "^0.0.24",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "https-browserify": "^1.0.0",

src/MasaUpdatedProvider.tsx

@@ -0,0 +1,78 @@
+import React, { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { WagmiProvider } from 'wagmi';
+import * as all from 'wagmi/chains';
+import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { SupportedNetworks } from '@masa-finance/masa-sdk';
+import { arbitrumNova } from '@wagmi/chains';
+import {
+  masaChain,
+  masaTestnetChain,
+} from './wallet-client/helpers/get-masa-chains';
+
+const {
+  goerli,
+  sepolia,
+  bsc,
+  bscTestnet,
+  opBNB,
+  opBNBTestnet,
+  polygonAmoy,
+  polygonMumbai,
+  celo,
+  celoAlfajores,
+  base,
+  baseGoerli,
+  baseSepolia,
+  scroll,
+  scrollSepolia,
+  mainnet: ethereum,
+
+  polygon,
+} = all;
+
+console.log({ all, SupportedNetworks });
+
+const test = Object.values(SupportedNetworks).map((sn) => sn.networkName);
+const secondOne = test.map((sn) => all[sn]);
+console.log({ test, secondOne });
+const config = getDefaultConfig({
+  appName: 'RainbowKit App',
+  projectId: 'YOUR_PROJECT_ID',
+  chains: [
+    masaChain,
+    masaTestnetChain,
+    ethereum,
+    goerli,
+    polygon,
+    bsc,
+    bscTestnet,
+    opBNB,
+    opBNBTestnet,
+    polygonAmoy,
+    polygonMumbai,
+    celo,
+    celoAlfajores,
+    base,
+    baseGoerli,
+    baseSepolia,
+    scroll,
+    scrollSepolia,
+  ],
+  ssr: true,
+});
+const client = new QueryClient();
+
+console.log({ masaChain });
+
+const MasaUpdatedProvider = ({ children }: { children: ReactNode }) => {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={client}>
+        <RainbowKitProvider>{children} </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};
+
+export default MasaUpdatedProvider;

src/provider/masa-state-provider.tsx

@@ -5,8 +5,8 @@ import { queryClient } from '../masa-client/query-client';
 
 export const MasaStateProvider = ({ children }: { children: ReactNode }) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <MasaClientProvider>{children}</MasaClientProvider>
-    </QueryClientProvider>
+    // <QueryClientProvider client={queryClient}>
+    <MasaClientProvider>{children}</MasaClientProvider>
+    // </QueryClientProvider>
   );
 };

src/provider/masa-wallet-provider.tsx

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
-import WagmiRainbowkitProvider from '../wallet-client/wagmi-rainbowkit-provider';
+
 import WalletClientProvider from '../wallet-client/wallet-client-provider';
+import MasaUpdatedProvider from '../MasaUpdatedProvider';
 
 export const MasaWalletProvider = ({ children }: { children: ReactNode }) => (
-  <WagmiRainbowkitProvider>
+  <MasaUpdatedProvider>
     <WalletClientProvider>{children}</WalletClientProvider>
-  </WagmiRainbowkitProvider>
+  </MasaUpdatedProvider>
 );

src/stories/viem-update.stories.tsx

@@ -0,0 +1,55 @@
+import type { Args, Meta } from '@storybook/react';
+
+import React from 'react';
+import '../ui/styles.scss';
+import './stories.scss';
+import 'react-json-view-lite/dist/index.css';
+import '@rainbow-me/rainbowkit/styles.css';
+
+import MasaUpdatedProvider from '../MasaUpdatedProvider';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+
+const meta: Meta = {
+  title: 'Wallet And Network',
+  component: () => <div />,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+export default meta;
+
+const NetworkInfo = () => {
+  return (
+    <>
+      <h1>Viem Wagmi Update</h1>
+
+      <ul>
+        <ConnectButton />
+      </ul>
+    </>
+  );
+};
+
+const Component = (): JSX.Element => {
+  return (
+    // skipcq: JS-0415
+    <section>
+      <NetworkInfo />
+    </section>
+  );
+};
+
+const TemplateNewMasaState = (props: Args) => (
+  <MasaUpdatedProvider>
+    <Component {...props} />
+  </MasaUpdatedProvider>
+);
+
+export const WagmiUpdate = TemplateNewMasaState.bind({
+  options: { scope: [] },
+});

src/ui/styles.scss

@@ -1,3 +1,5 @@
 .sme-class {
   border: 2px solid red;
 }
+
+@import '~@rainbow-me/rainbowkit/styles.css';

src/wallet-client/helpers/get-masa-chains.ts

@@ -0,0 +1,59 @@
+import { SupportedNetworks, addresses } from '@masa-finance/masa-sdk';
+import { Chain } from '@rainbow-me/rainbowkit';
+
+const { masa, masatest } = SupportedNetworks;
+const masaContracts = Object.entries(addresses!.masa!)
+  .map(([key, value]) => ({
+    [key]: { address: value },
+  }))
+  .reduce((acc, val) => ({ ...acc, ...val }), {});
+const masaTestnetContracts = Object.entries(addresses!.masatest!)
+  .map(([key, value]) => ({
+    [key]: { address: value },
+  }))
+  .reduce((acc, val) => ({ ...acc, ...val }), {});
+
+export const masaChain = {
+  id: masa!.chainId,
+  name: masa!.chainName,
+  iconUrl: undefined,
+  iconBackground: '#fff',
+  nativeCurrency: {
+    name: masa!.nativeCurrency?.name as string,
+    symbol: masa!.nativeCurrency?.symbol as string,
+    decimals: masa!.nativeCurrency?.decimals as number,
+  },
+  rpcUrls: {
+    default: { http: ['https://subnets.avax.network/masanetwork/mainnet/rpc'] },
+  },
+  blockExplorers: {
+    default: { name: 'Avalanche', url: 'https://subnets.avax.network/masa' },
+  },
+  contracts: {
+    ...masaContracts,
+  },
+} as const satisfies Chain;
+
+export const masaTestnetChain = {
+  id: masatest!.chainId,
+  name: masatest!.chainName,
+  iconUrl: undefined,
+  iconBackground: '#fff',
+  nativeCurrency: {
+    name: masatest!.nativeCurrency?.name as string,
+    symbol: masatest!.nativeCurrency?.symbol as string,
+    decimals: masatest!.nativeCurrency?.decimals as number,
+  },
+  rpcUrls: {
+    default: { http: ['https://subnets.avax.network/masatestne/testnet/rpc'] },
+  },
+  blockExplorers: {
+    default: {
+      name: 'Avalanche',
+      url: 'https://subnets-test.avax.network/masatestnet',
+    },
+  },
+  contracts: {
+    ...masaTestnetContracts,
+  },
+} as const satisfies Chain;

src/wallet-client/helpers/wagmi-ethers-adapters.ts

@@ -0,0 +1,66 @@
+import { Signer, providers } from 'ethers';
+import { useMemo } from 'react';
+import type { Account, Chain, Client, Transport } from 'viem';
+import { Config, useClient, useConnectorClient } from 'wagmi';
+
+export function clientToProvider(client: Client<Transport, Chain>) {
+  const { chain, transport } = client;
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address,
+  };
+  if (transport.type === 'fallback')
+    return new providers.FallbackProvider(
+      (transport.transports as ReturnType<Transport>[]).map(
+        ({ value }) => new providers.JsonRpcProvider(value?.url, network)
+      )
+    );
+  return new providers.JsonRpcProvider(transport.url, network);
+}
+
+/** Hook to convert a viem Client to an ethers.js Provider. */
+export function useEthersProvider({
+  chainId,
+}: { chainId?: number | undefined } = {}) {
+  const client = useClient<Config>({ chainId });
+  return useMemo(
+    () => clientToProvider(client as Client<Transport, Chain>),
+    [client]
+  );
+}
+
+export function clientToSigner(client: Client<Transport, Chain, Account>) {
+  const { account, chain, transport } = client;
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address,
+  };
+  const provider = new providers.Web3Provider(transport, network);
+  const signer = provider.getSigner(account.address);
+  return signer;
+}
+
+/** Hook to convert a Viem Client to an ethers.js Signer. */
+export function useEthersSigner({ chainId }: { chainId?: number } = {}) {
+  const {
+    data: client,
+    isLoading,
+    error,
+  } = useConnectorClient<Config>({ chainId });
+  const signer = useMemo(
+    () => (client ? clientToSigner(client) : undefined),
+    [client]
+  );
+
+  return {
+    data: signer,
+    isLoading,
+    error,
+  } as {
+    data?: Signer;
+    isLoading?: boolean;
+    error?: Error | null;
+  };
+}