Replace web3-react with wagmi and add seif, tailwind and compass wallet connectors

.github/workflows/e2e.yaml

@@ -15,6 +15,8 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20
+      - name: Install build-essential
+        run: apt-get update && apt-get install -y build-essential
       - name: Install dependencies
         run: yarn
       - name: Install Playwright browsers and run Playwright tests

package.json

@@ -6,16 +6,15 @@
     "@babel/core": "^7.0.0-0",
     "@bancor/carbon-sdk": "^0.0.97-DEV",
     "@cloudflare/workers-types": "^4.20230717.0",
-    "@coinbase/wallet-sdk": "^3.6.3",
     "@ethersproject/abi": "^5.0.0",
     "@ethersproject/bytes": "^5.0.0",
     "@ethersproject/providers": "^5.7.1",
     "@floating-ui/react": "^0.25.4",
     "@playwright/test": "^1.43.1",
     "@sentry/react": "^7.48.0",
     "@sentry/vite-plugin": "^0.7.2",
-    "@tanstack/react-query": "^4.14.5",
-    "@tanstack/react-query-devtools": "^4.14.5",
+    "@tanstack/react-query": "^5.40.1",
+    "@tanstack/react-query-devtools": "^5.40.1",
     "@tanstack/react-router": "^1.4.9",
     "@tanstack/react-table": "^8.9.3",
     "@tanstack/react-virtual": "^3.0.0-beta.30",
@@ -28,22 +27,14 @@
     "@typechain/ethers-v5": "^10.1.0",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash": "4.14.191",
-    "@types/node": "^16.7.13",
+    "@types/node": "^20.0.0",
     "@types/numeral": "^2.0.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/ua-parser-js": "^0.7.36",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "@vitejs/plugin-react": "^3.1.0",
-    "@walletconnect/ethereum-provider": "^2.9.2",
-    "@web3-react/coinbase-wallet": "8.2.2",
-    "@web3-react/core": "8.2.2",
-    "@web3-react/gnosis-safe": "8.2.3",
-    "@web3-react/metamask": "8.2.3",
-    "@web3-react/network": "8.2.2",
-    "@web3-react/types": "8.2.2",
-    "@web3-react/walletconnect-v2": "^8.5.0",
     "autoprefixer": "^10.4.12",
     "body-scroll-lock": "^4.0.0-beta.0",
     "buffer": "^6.0.3",
@@ -74,6 +65,7 @@
     "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
+    "mipd": "^0.0.7",
     "numbro": "^2.3.6",
     "numeral": "^2.0.6",
     "postcss": "^8.4.31",
@@ -83,18 +75,20 @@
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "source-map-explorer": "^2.5.3",
+    "stream-browserify": "^3.0.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss": "3.4.3",
     "typechain": "^8.1.0",
     "typescript": "^5.3.3",
     "ua-parser-js": "^1.0.35",
-    "use-async-effect": "^2.2.7",
     "valibot": "^0.28.1",
+    "viem": "2.x",
     "vite": "5.0.13",
-    "vite-plugin-rewrite-all": "^1.0.1",
+    "vite-plugin-rewrite-all": "1.0.1",
     "vite-plugin-svgr": "^2.4.0",
     "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^0.29.8",
+    "wagmi": "2.9.10",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

src/components/activity/ActivityProvider.tsx

@@ -24,7 +24,7 @@ export const ActivityProvider: FC<Props> = ({ children, params, empty }) => {
     user: params.ownerId,
   });
 
-  if (activityQuery.isLoading || userStrategiesQuery.isLoading) {
+  if (activityQuery.isPending || userStrategiesQuery.isPending) {
     return <CarbonLogoLoading className="w-[100px] flex-1 self-center" />;
   }
   const activities = activityQuery.data ?? [];

src/components/activity/useActivityNotifiction.ts

@@ -1,10 +1,10 @@
-import { useWeb3 } from 'libs/web3';
+import { useWagmi } from 'libs/wagmi';
 import { useActivityQuery } from './useActivityQuery';
 import { useEffect, useState } from 'react';
 import { useNotifications } from 'hooks/useNotifications';
 
 export const useActivityNotifications = () => {
-  const { user } = useWeb3();
+  const { user } = useWagmi();
   const [previousUser, setPreviousUser] = useState<string | null>(null);
   const [previous, setPrevious] = useState<number | null>(null);
   const query = useActivityQuery({ ownerId: user });
@@ -15,7 +15,7 @@ export const useActivityNotifications = () => {
   const { dispatchNotification } = useNotifications();
 
   useEffect(() => {
-    if (query.isLoading) return;
+    if (query.isPending) return;
     // We need to keep this in the same useEffect to force re-evaluate previous in next render
     if (user && user !== previousUser) {
       setPreviousUser(user);
@@ -35,7 +35,7 @@ export const useActivityNotifications = () => {
     buyOrSell,
     dispatchNotification,
     previous,
-    query.isLoading,
+    query.isPending,
     previousUser,
     user,
   ]);

src/components/activity/useActivityQuery.tsx

@@ -47,19 +47,17 @@ const isValidParams = (params: QueryActivityParams) => {
 };
 
 export const useActivityQuery = (params: QueryActivityParams = {}) => {
-  const { tokensMap, isLoading } = useTokens();
+  const { tokensMap, isPending } = useTokens();
   const validParams = isValidParams(params);
-  return useQuery(
-    QueryKey.activities(params),
-    async () => {
+  return useQuery({
+    queryKey: QueryKey.activities(params),
+    queryFn: async () => {
       const activities = await carbonApi.getActivity(params);
       return toActivities(activities, tokensMap).sort((a, b) => {
         return b.date.getTime() - a.date.getTime();
       });
     },
-    {
-      enabled: !isLoading && validParams,
-      refetchInterval: THIRTY_SEC_IN_MS,
-    }
-  );
+    enabled: !isPending && validParams,
+    refetchInterval: THIRTY_SEC_IN_MS,
+  });
 };

src/components/common/TokenInputField/TokenInputField.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, FC, FocusEvent, useRef } from 'react';
 import { SafeDecimal } from 'libs/safedecimal';
 import { Token } from 'libs/tokens';
-import { useWeb3 } from 'libs/web3';
+import { useWagmi } from 'libs/wagmi';
 import { useFiatCurrency } from 'hooks/useFiatCurrency';
 import { LogoImager } from 'components/common/imager/Imager';
 import { Slippage } from './Slippage';
@@ -49,7 +49,7 @@ export const TokenInputField: FC<Props> = (props) => {
     withoutWallet,
     'data-testid': testid,
   } = props;
-  const { user } = useWeb3();
+  const { user } = useWagmi();
   const inputRef = useRef<HTMLInputElement>(null);
   const { getFiatValue, getFiatAsString } = useFiatCurrency(token);
   const fiatValueUsd = getFiatValue(value, true);

src/components/common/WalletIcon.tsx

@@ -0,0 +1,48 @@
+import { ReactComponent as IconCoinbaseLogo } from 'assets/logos/coinbase.svg';
+import { ReactComponent as IconCompassWalletLogo } from 'assets/logos/compassWallet.svg';
+import { ReactComponent as IconTailwindWalletLogo } from 'assets/logos/tailwindWallet.svg';
+import { ReactComponent as IconSeifWalletLogo } from 'assets/logos/seifWallet.svg';
+import { ReactComponent as IconGnosisLogo } from 'assets/logos/gnosis.svg';
+import { ReactComponent as IconImposterLogo } from 'assets/logos/imposter.svg';
+import { ReactComponent as IconMetaMaskLogo } from 'assets/logos/metamask.svg';
+import { ReactComponent as IconWalletConnectLogo } from 'assets/logos/walletConnect.svg';
+import { ReactComponent as IconWallet } from 'assets/icons/wallet.svg';
+
+type Props = JSX.IntrinsicElements['img'] &
+  JSX.IntrinsicElements['svg'] & {
+    isImposter?: boolean;
+    selectedWallet?: string;
+    icon?: string;
+  };
+export const WalletIcon = ({
+  isImposter,
+  selectedWallet,
+  icon,
+  ...attr
+}: Props) => {
+  if (isImposter) {
+    return <IconImposterLogo {...attr} />;
+  }
+
+  // For EIP6963 injected wallets
+  if (icon) return <img alt="Wallet Logo" src={icon} {...attr} />;
+
+  switch (selectedWallet) {
+    case 'MetaMask':
+      return <IconMetaMaskLogo {...attr} />;
+    case 'WalletConnect':
+      return <IconWalletConnectLogo {...attr} />;
+    case 'Coinbase Wallet':
+      return <IconCoinbaseLogo {...attr} />;
+    case 'Safe':
+      return <IconGnosisLogo {...attr} />;
+    case 'Tailwind Wallet':
+      return <IconTailwindWalletLogo {...attr} />;
+    case 'Compass Wallet':
+      return <IconCompassWalletLogo {...attr} />;
+    case 'Seif Wallet':
+      return <IconSeifWalletLogo {...attr} />;
+    default:
+      return <IconWallet {...attr} />;
+  }
+};

src/components/common/approval/ApproveToken.tsx

@@ -5,7 +5,7 @@ import { Switch } from 'components/common/switch';
 import { ApprovalTokenResult } from 'hooks/useApproval';
 import { LogoImager } from 'components/common/imager/Imager';
 import { QueryKey, useQueryClient } from 'libs/queries';
-import { useWeb3 } from 'libs/web3';
+import { useWagmi } from 'libs/wagmi';
 import { useNotifications } from 'hooks/useNotifications';
 import { useTokens } from 'hooks/useTokens';
 import { carbonEvents } from 'services/events';
@@ -19,21 +19,21 @@ import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 
 type Props = {
   data?: ApprovalTokenResult;
-  isLoading: boolean;
+  isPending: boolean;
   error: unknown;
   eventData?: StrategyEventOrTradeEvent & TokenApprovalType;
   context?: 'depositStrategyFunds' | 'createStrategy' | 'trade';
 };
 
 export const ApproveToken: FC<Props> = ({
   data,
-  isLoading,
+  isPending,
   error,
   eventData,
   context,
 }) => {
   const { dispatchNotification } = useNotifications();
-  const { user } = useWeb3();
+  const { user } = useWagmi();
   const { getTokenById } = useTokens();
   const token = getTokenById(data?.address || '');
   const mutation = useSetUserApproval();
@@ -157,7 +157,7 @@ export const ApproveToken: FC<Props> = ({
   };
 
   if (!data || !token) {
-    if (isLoading) {
+    if (isPending) {
       return <div>is loading</div>;
     }
     return <div>Unknown Error</div>;

src/components/core/MainContent.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useRef } from 'react';
-import { useWeb3 } from 'libs/web3';
+import { useWagmi } from 'libs/wagmi';
 import { ErrorUnsupportedNetwork } from 'components/core/error/ErrorUnsupportedNetwork';
 import { ErrorNetworkConnection } from 'components/core/error/ErrorNetworkConnection';
 import { useTokens } from 'hooks/useTokens';
@@ -23,7 +23,7 @@ const paths: Record<string, Pathnames> = {
 };
 
 export const MainContent: FC = () => {
-  const web3 = useWeb3();
+  const wagmi = useWagmi();
   const { location } = useRouterState();
   const prevPathnameRef = useRef('');
   const tokens = useTokens();
@@ -47,11 +47,11 @@ export const MainContent: FC = () => {
     return <Outlet />;
   }
 
-  if (!web3.isSupportedNetwork) {
+  if (!wagmi.isSupportedNetwork) {
     return <ErrorUnsupportedNetwork />;
   }
 
-  if (web3.networkError) {
+  if (wagmi.networkError) {
     return <ErrorNetworkConnection />;
   }
 
@@ -63,7 +63,7 @@ export const MainContent: FC = () => {
     return <ErrorTokenList />;
   }
 
-  if (web3.isUserBlocked) {
+  if (wagmi.isUserBlocked) {
     return <ErrorUserBlocked />;
   }
 

src/components/core/error/ErrorUnsupportedNetwork.tsx

@@ -1,11 +1,11 @@
 import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 import { Button } from 'components/common/button';
-import { useWeb3 } from 'libs/web3';
+import { useWagmi } from 'libs/wagmi';
 import { ErrorWrapper } from 'components/core/error/ErrorWrapper';
 import config from 'config';
 
 export const ErrorUnsupportedNetwork = () => {
-  const { disconnect, switchNetwork } = useWeb3();
+  const { disconnect, switchNetwork } = useWagmi();
 
   const networkName = config.network.name;
 

src/components/core/error/ErrorUserBlocked.tsx

@@ -1,11 +1,11 @@
-import { useWeb3 } from 'libs/web3';
+import { useWagmi } from 'libs/wagmi';
 import { NewTabLink, externalLinks } from 'libs/routing';
 import { ErrorWrapper } from 'components/core/error/ErrorWrapper';
 import { Button } from 'components/common/button';
 import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 
 export const ErrorUserBlocked = () => {
-  const { disconnect } = useWeb3();
+  const { disconnect } = useWagmi();
 
   return (
     <ErrorWrapper

src/components/core/menu/mainMenu/MainMenuRight.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { IS_TENDERLY_FORK } from 'libs/web3';
+import { IS_TENDERLY_FORK } from 'libs/wagmi';
 import { useBreakpoints } from 'hooks/useBreakpoints';
 import { MainMenuRightWallet } from 'components/core/menu/mainMenu/MainMenuRightWallet';
 import { MainMenuRightNotifications } from 'components/core/menu/mainMenu/MainMenuRightNotifications';

src/components/core/menu/mainMenu/MainMenuRightNotifications.tsx

@@ -2,12 +2,12 @@ import { FC } from 'react';
 import { useModal } from 'hooks/useModal';
 import { ReactComponent as IconBell } from 'assets/icons/bell.svg';
 import { useNotifications } from 'hooks/useNotifications';
-import { useWeb3 } from 'libs/web3';
+import { useWagmi } from 'libs/wagmi';
 import { Button } from 'components/common/button';
 import { carbonEvents } from 'services/events';
 
 export const MainMenuRightNotifications: FC = () => {
-  const { user } = useWeb3();
+  const { user } = useWagmi();
   const { openModal } = useModal();
   const { hasPendingTx, notifications } = useNotifications();