Revert "save: update progress"

This reverts commit 3a6700f.

packages/constants/package.json

@@ -11,11 +11,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@tanstack/react-query": "^5.18.1",
-    "@web3modal/wagmi": "^4.1.3",
     "lodash": "^4.17.21",
-    "viem": "^2.8.18",
-    "wagmi": "^2.5.12"
+    "viem": "^1.21.4"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.202",

packages/dapp/package.json

@@ -40,9 +40,8 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.3",
     "styled-components": "^6.1.8",
-    "viem": "^2.8.18",
-    "wagmi": "^2.5.12",
-    "@web3modal/wagmi": "^4.1.1"
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13"
   },
   "scripts": {
     "dev": "next dev",
@@ -76,6 +75,9 @@
     "ts-node": "^10.9.2"
   },
   "eslintConfig": {
-    "extends": ["next", "next/core-web-vitals"]
+    "extends": [
+      "next",
+      "next/core-web-vitals"
+    ]
   }
 }

packages/dapp/pages/_app.tsx

@@ -1,19 +1,20 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import 'focus-visible/dist/focus-visible';
-import { AppProps } from 'next/app';
+import '@rainbow-me/rainbowkit/styles.css';
 
 import { ChakraProvider, ColorModeScript, CSSReset } from '@chakra-ui/react';
 import { Global } from '@emotion/react';
+import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { ErrorBoundary, globalStyles, Layout, theme } from '@smart-invoice/ui';
-import { wagmiConfig, createWeb3ModalThing } from '@smart-invoice/utils';
+import { chains, wagmiConfig } from '@smart-invoice/utils';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { WagmiProvider } from 'wagmi';
+import { AppProps } from 'next/app';
+import React from 'react';
+import { WagmiConfig } from 'wagmi';
 
 import { OverlayContextProvider } from '../contexts/OverlayContext';
 
-const PROJECT_ID = process.env.NEXT_PUBLIC_WALLETCONNECT_ID || '';
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -26,23 +27,25 @@ const queryClient = new QueryClient({
 
 function App({ Component, pageProps }: AppProps) {
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <ChakraProvider theme={theme}>
-          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
-          <CSSReset />
-          <Global styles={globalStyles} />
-          <ErrorBoundary>
-            <OverlayContextProvider>
-              <Layout>
-                <Component {...pageProps} />
-              </Layout>
-            </OverlayContextProvider>
-          </ErrorBoundary>
-        </ChakraProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
-      </QueryClientProvider>
-    </WagmiProvider>
+    <WagmiConfig config={wagmiConfig}>
+      <RainbowKitProvider chains={chains}>
+        <QueryClientProvider client={queryClient}>
+          <ChakraProvider theme={theme}>
+            <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+            <CSSReset />
+            <Global styles={globalStyles} />
+            <ErrorBoundary>
+              <OverlayContextProvider>
+                <Layout>
+                  <Component {...pageProps} />
+                </Layout>
+              </OverlayContextProvider>
+            </ErrorBoundary>
+          </ChakraProvider>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
+      </RainbowKitProvider>
+    </WagmiConfig>
   );
 }
 

packages/forms/package.json

@@ -25,8 +25,8 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-hook-form": "^7.49.3",
-    "viem": "^2.8.18",
-    "wagmi": "^2.5.12",
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13",
     "yup": "^1.3.3"
   },
   "devDependencies": {

packages/graphql/package.json

@@ -16,7 +16,7 @@
     "graphql-tag": "^2.12.6",
     "graphql-zeus": "^5.3.3",
     "lodash": "^4.17.21",
-    "viem": "^2.8.18"
+    "viem": "^1.21.4"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.202"

packages/hooks/package.json

@@ -16,8 +16,8 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-hook-form": "^7.49.3",
-    "viem": "^2.8.18",
-    "wagmi": "^2.5.12"
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.202",

packages/types/package.json

@@ -16,6 +16,6 @@
     "@chakra-ui/react": "^2.8.2",
     "@smart-invoice/graphql": "*",
     "react": "^18.2.0",
-    "viem": "^2.8.18"
+    "viem": "^1.21.4"
   }
 }

packages/ui/package.json

@@ -31,8 +31,8 @@
     "react-datepicker": "^4.25.0",
     "react-hook-form": "^7.49.3",
     "styled-components": "^6.1.8",
-    "viem": "^2.8.18",
-    "wagmi": "^2.5.12"
+    "viem": "1.21.4",
+    "wagmi": "^1.4.13"
   },
   "devDependencies": {
     "@types/jest": "^29.5.11",

packages/ui/src/atoms/ConnectWeb3.tsx

@@ -1,18 +1,18 @@
 import { Button, Flex, Text } from '@chakra-ui/react';
-import { useWeb3Modal } from '@web3modal/wagmi/react';
+import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { SUPPORTED_NETWORKS } from '@smart-invoice/constants';
 import { useIsClient } from '@smart-invoice/hooks';
 import { chainsMap } from '@smart-invoice/utils';
 import _ from 'lodash';
 import React from 'react';
 import { useAccount } from 'wagmi';
-import { createWeb3ModalThing } from '@smart-invoice/utils';
+
 import { WalletFilledIcon } from '../icons/WalletFilledIcon';
 import { Container } from './Container';
 import { Loader } from './Loader';
 
 export function ConnectWeb3() {
-  const { open, close } = useWeb3Modal();
+  const { openConnectModal } = useConnectModal();
   const { address, isConnecting } = useAccount();
 
   const isClient = useIsClient();
@@ -73,7 +73,7 @@ export function ConnectWeb3() {
         )}
 
         {isClient && !address && (
-          <Button onClick={() => open()} px={12} isLoading={isConnecting}>
+          <Button onClick={openConnectModal} px={12} isLoading={isConnecting}>
             Connect
           </Button>
         )}

packages/ui/src/molecules/Header.tsx

@@ -7,7 +7,8 @@ import {
   useMediaQuery,
 } from '@chakra-ui/react';
 import styled from '@emotion/styled';
-import { ChakraNextLink, ConnectWeb3 } from '@smart-invoice/ui';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { ChakraNextLink } from '@smart-invoice/ui';
 import _ from 'lodash';
 
 import { HamburgerIcon } from '../icons/HamburgerIcon';
@@ -98,7 +99,11 @@ export function Header() {
       >
         {!upTo780 && (
           <Flex justifyContent="flex-end" width="230px">
-            <ConnectWeb3 />
+            <ConnectButton
+              accountStatus="address"
+              chainStatus="icon"
+              showBalance={false}
+            />
           </Flex>
         )}
         {upTo780 && (
@@ -141,7 +146,11 @@ export function Header() {
         }}
       >
         <Flex height="60px" alignItems="center">
-          <ConnectWeb3 />
+          <ConnectButton
+            accountStatus="address"
+            chainStatus="icon"
+            showBalance={false}
+          />
         </Flex>
 
         {_.map(links, ({ label, href }) => (

packages/utils/package.json

@@ -19,9 +19,8 @@
     "bs58": "^5.0.0",
     "firebase": "^10.7.0",
     "lodash": "^4.17.21",
-    "viem": "^2.8.18",
-    "@web3modal/wagmi": "^4.1.1",
-    "wagmi": "^2.5.12",
+    "viem": "1.21.4",
+    "wagmi": "^1.4.13",
     "yup": "^1.3.3"
   },
   "devDependencies": {

packages/utils/src/web3.ts

@@ -1,32 +1,46 @@
-import { createWeb3Modal } from '@web3modal/wagmi/react';
-import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  coinbaseWallet,
+  injectedWallet,
+  ledgerWallet,
+  metaMaskWallet,
+  rainbowWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';
 import _ from 'lodash';
-import { type Chain } from 'viem';
-import { cookieStorage, createStorage } from 'wagmi';
-import { gnosis, mainnet, polygon, polygonMumbai, sepolia } from 'wagmi/chains';
+import { Chain, configureChains, createConfig } from 'wagmi';
+import {
+  gnosis as defaultGnosis,
+  goerli,
+  mainnet,
+  polygon,
+  polygonMumbai,
+} from 'wagmi/chains';
+import { infuraProvider } from 'wagmi/providers/infura';
+import { publicProvider } from 'wagmi/providers/public';
+
 const APP_NAME = 'Smart Invoice';
 const PROJECT_ID = process.env.NEXT_PUBLIC_WALLETCONNECT_ID || '';
 
+const gnosis = {
+  ...defaultGnosis,
+  hasIcon: true,
+  iconUrl: '/chains/gnosis.png',
+  iconBackground: 'none',
+};
+
 const mainnetChains = [1, 100, 137];
 const testnetChains = [5, 80001];
 const orderedChains = _.concat(mainnetChains, testnetChains);
 
 export const chainsList: { [key: number]: Chain } = {
   1: mainnet,
-  11155111: sepolia,
+  5: goerli,
   100: gnosis,
   137: polygon,
   80001: polygonMumbai,
 };
 
-const chainsOrdered: Chain[] = [
-  mainnet,
-  sepolia,
-  gnosis,
-  polygon,
-  polygonMumbai,
-];
-
 export const chainsMap = (chainId: number) => {
   if (!chainId) {
     return null;
@@ -45,30 +59,37 @@ export const chainByName = (name: string | undefined) => {
   return chain;
 };
 
-const chains = _.map(orderedChains, 'id');
-
-const metadata = {
-  name: APP_NAME,
-  description: APP_NAME,
-  url: 'http://localhost:3000', // origin must match your domain & subdomain
-  icons: ['/favicon.ico'],
+const { chains, publicClient } = configureChains(
+  _.compact(_.map(orderedChains, chainId => chainsMap(chainId))),
+  [
+    infuraProvider({ apiKey: process.env.NEXT_PUBLIC_INFURA_ID || '' }),
+    publicProvider(),
+  ],
+);
+const options = {
+  appName: APP_NAME,
+  projectId: PROJECT_ID,
+  chains,
 };
 
-export const config = defaultWagmiConfig({
-  chains: [...chainsOrdered] as any,
-  projectId: PROJECT_ID,
-  metadata,
-  ssr: true,
-  storage: createStorage({
-    storage: cookieStorage,
-  }),
-});
+const connectors = connectorsForWallets([
+  {
+    groupName: 'Recommended',
+    wallets: [
+      injectedWallet({ chains, shimDisconnect: true }),
+      rainbowWallet({ chains, projectId: PROJECT_ID }),
+      ledgerWallet({ chains, projectId: PROJECT_ID }),
+      metaMaskWallet({ chains, projectId: PROJECT_ID }),
+      coinbaseWallet({ appName: APP_NAME, chains }),
+      walletConnectWallet({ chains, projectId: PROJECT_ID, options }),
+    ],
+  },
+]);
 
-const createWeb3ModalThing = () =>
-  createWeb3Modal({
-    wagmiConfig: config,
-    projectId: PROJECT_ID,
-    enableAnalytics: false,
-  });
+const wagmiConfig = createConfig({
+  autoConnect: true,
+  connectors,
+  publicClient,
+});
 
-export { chains, createWeb3ModalThing, config as wagmiConfig };
+export { chains, wagmiConfig };