fix: readme and code styles

README.md

@@ -2,7 +2,7 @@
 
 The purpose of this repo is to have shared solutions for typical web3 related problems.
 
-Transactions, signing, provider etc
+Transactions, signing, clients etc
 
 ### Limitations
 
@@ -80,25 +80,33 @@ WalletSlice is a set of ready solutions to work with [wagmi.sh](https://wagmi.sh
 
 It will do appropriate logic to handle different connectors type and save the required states to zustand store
 
-Since we don’t use wagmi.sh hooks to work with wagmi connectors, but write data directly to our store, we needed our custom Wagmi provider. Custom `<WagmiProvider />` is required to make `WalletSlice` work.
+Since we write data directly to our store, we needed our custom component to sync wagmi config with zustand store. `<WagmiZustandSync />` is required to make `WalletSlice` work.
 
-Example of how to use `<WagmiProvider />` in your own app
+Example of how to use `<WagmiZustandSync />` in your own app
 
 `yourapp/WagmiProvider.tsx` →
 ```tsx
-import { WagmiProvider as BaseWagmiProvider } from '@bgd-labs/frontend-web3-utils';
+import {
+  createWagmiConfig,
+  WagmiZustandSync,
+} from '@bgd-labs/frontend-web3-utils';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React, { useMemo } from 'react';
+import { WagmiProvider } from 'wagmi';
 
-import { useStore } from '../../store';
 import { CHAINS } from '../../utils/chains';
-
-export default function WagmiProvider() {
-  return (
-    <BaseWagmiProvider
-      connectorsInitProps={{
-        appName: 'YourAppName',
-        chains: CHAINS,
-        defaultChainId: 1, // optional
-        wcParams: { // optional need for wallet connector work
+import { DESIRED_CHAIN_ID } from '../../utils/constants';
+
+const queryClient = new QueryClient();
+
+export default function WagmiConfigProviderWrapper() {
+  const config = useMemo(() => {
+    return createWagmiConfig({
+      chains: CHAINS,
+      connectorsInitProps: {
+        appName: 'Test',
+        defaultChainId: DESIRED_CHAIN_ID,
+        wcParams: {
           projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID || '',
           metadata: {
             name: 'wagmi',
@@ -107,9 +115,20 @@ export default function WagmiProvider() {
             icons: ['https://wagmi.sh/icon.png'],
           },
         },
-      }}
-      useStore={useStore}
-    />
+      },
+    });
+  }, []);
+
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <WagmiZustandSync
+          wagmiConfig={config}
+          defaultChainId={DESIRED_CHAIN_ID}
+          useStore={useStore}
+        />
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 ```

src/index.tsx

@@ -2,7 +2,6 @@ export * from './hooks/useLastTxLocalStatus';
 export * from './types/base';
 export * from './types/store';
 export * from './utils/chainInfoHelpers';
-export * from './utils/chains';
 export * from './utils/constants';
 export * from './utils/localStorage';
 export * from './utils/wallets/getBrowserWalletLabelAndIcon';

src/utils/chainInfoHelpers.ts

@@ -1,13 +1,5 @@
 import { Chain, createPublicClient, fallback, http, PublicClient } from 'viem';
-import {
-  avalanche,
-  avalancheFuji,
-  goerli,
-  mainnet,
-  polygon,
-  polygonMumbai,
-  sepolia,
-} from 'viem/chains';
+import * as viemChains from 'viem/chains';
 
 import { ClientsRecord } from '../types/base';
 
@@ -17,14 +9,20 @@ export const fallBackConfig = {
   retryCount: 5,
 };
 
+export const VIEM_CHAINS: Record<number, Chain> = Object.values(
+  viemChains,
+).reduce((acc, chain) => {
+  return { ...acc, [chain.id]: chain };
+}, {});
+
 export const initialChains: Record<number, Chain> = {
-  [mainnet.id]: mainnet,
-  [polygon.id]: polygon,
-  [polygonMumbai.id]: polygonMumbai,
-  [avalanche.id]: avalanche,
-  [avalancheFuji.id]: avalancheFuji,
-  [goerli.id]: goerli,
-  [sepolia.id]: sepolia,
+  [viemChains.mainnet.id]: viemChains.mainnet,
+  [viemChains.polygon.id]: viemChains.polygon,
+  [viemChains.polygonMumbai.id]: viemChains.polygonMumbai,
+  [viemChains.avalanche.id]: viemChains.avalanche,
+  [viemChains.avalancheFuji.id]: viemChains.avalancheFuji,
+  [viemChains.goerli.id]: viemChains.goerli,
+  [viemChains.sepolia.id]: viemChains.sepolia,
 };
 
 export const initChainInformationConfig = (chains?: Record<number, Chain>) => {
@@ -68,7 +66,7 @@ export const initChainInformationConfig = (chains?: Record<number, Chain>) => {
     } else {
       // this case can only ever occure when a wallet is connected with an unknown chainId which will not allow interaction
       return {
-        ...mainnet,
+        ...viemChains.mainnet,
         id: chainId,
         name: `unknown network: ${chainId}`,
       };

src/web3/adapters/GelatoAdapter.ts

@@ -73,7 +73,7 @@ export class GelatoAdapter<T extends BaseTx> implements AdapterInterface<T> {
         return !!listOfRelays.relays.find((id) => +id === chainId);
       }
     } catch (e) {
-      console.error('Check gelato available error', e);
+      console.error('Check is gelato services available error:', e);
       return false;
     }
   };

src/web3/components/WagmiZustandSync.tsx

@@ -1,12 +1,7 @@
 import { Config, GetAccountReturnType, watchAccount } from '@wagmi/core';
 import { useEffect } from 'react';
-import { CreateConnectorFn } from 'wagmi';
 import { StoreApi, UseBoundStore } from 'zustand';
 
-import { WalletType } from '../connectors';
-
-export type Connectors = { connector: CreateConnectorFn; type: WalletType }[];
-
 interface WagmiZustandSyncProps {
   wagmiConfig: Config;
   defaultChainId?: number;
@@ -31,21 +26,21 @@ export function WagmiZustandSync({
   const { setDefaultChainId, setWagmiConfig, changeActiveWalletAccount } =
     useStore();
 
-  watchAccount(wagmiConfig, {
-    onChange: async (account) => {
-      await changeActiveWalletAccount(account);
-    },
-  });
-
-  useEffect(() => {
-    setWagmiConfig(wagmiConfig);
-  }, [wagmiConfig]);
-
   useEffect(() => {
     if (defaultChainId) {
       setDefaultChainId(defaultChainId);
     }
   }, [defaultChainId]);
 
+  useEffect(() => {
+    setWagmiConfig(wagmiConfig);
+  }, [wagmiConfig]);
+
+  watchAccount(wagmiConfig, {
+    onChange: async (account) => {
+      await changeActiveWalletAccount(account);
+    },
+  });
+
   return null;
 }

src/web3/store/walletSlice.ts

@@ -25,8 +25,7 @@ import { privateKeyToAccount } from 'viem/accounts';
 import { mainnet } from 'viem/chains';
 
 import { StoreSlice } from '../../types/store';
-import { fallBackConfig } from '../../utils/chainInfoHelpers';
-import { VIEM_CHAINS } from '../../utils/chains';
+import { fallBackConfig, VIEM_CHAINS } from '../../utils/chainInfoHelpers';
 import {
   clearWalletConnectV2LocalStorage,
   clearWalletLinkLocalStorage,
@@ -42,8 +41,8 @@ export interface Wallet {
   address: Hex;
   chainId: number;
   chain?: Chain;
-  publicClient?: PublicClient;
-  walletClient?: WalletClient;
+  publicClient: PublicClient;
+  walletClient: WalletClient;
   // isActive is added, because Wallet can be connected but not active, i.e. wrong network
   isActive: boolean;
   // isContractAddress is added, to check if wallet address is contract (mostly fo safe)
@@ -55,7 +54,7 @@ export type IWalletSlice = {
   wagmiConfig?: Config;
   setWagmiConfig: (config: Config) => Promise<void>;
 
-  defaultChainId: number;
+  defaultChainId?: number;
   setDefaultChainId: (chainId: number) => void;
 
   initDefaultWallet: () => Promise<void>;
@@ -104,7 +103,6 @@ export function createWalletSlice({
       }
     },
 
-    defaultChainId: mainnet.id,
     setDefaultChainId: (chainId) => {
       set({ defaultChainId: chainId });
     },

src/web3/utils/createWagmiConfig.ts

@@ -2,8 +2,7 @@ import { createClient, fallback, Hex, Transport } from 'viem';
 import { Chain, mainnet } from 'viem/chains';
 import { Config, createConfig, http } from 'wagmi';
 
-import { fallBackConfig } from '../../utils/chainInfoHelpers';
-import { VIEM_CHAINS } from '../../utils/chains';
+import { fallBackConfig, VIEM_CHAINS } from '../../utils/chainInfoHelpers';
 import { AllConnectorsInitProps, initAllConnectors } from '../connectors';
 
 interface ICreateWagmiConfig {