OCT-1548 Implement selection flow for multiple browser extension wallets

client/package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "@ethersproject/constants": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@rainbow-me/rainbowkit": "^2.1.1",
+    "@rainbow-me/rainbowkit": "^2.1.5",
     "@sentry/react": "^8.4.0",
     "@sentry/vite-plugin": "^2.17.0",
     "@tanstack/react-query": "^5.37.1",
@@ -62,7 +62,7 @@
     "react-toastify": "^10.0.5",
     "react-vis": "^1.12.1",
     "socket.io-client": "^4.7.5",
-    "viem": "^2.12.1",
+    "viem": "^2.21.1",
     "wagmi": "^2.12.25",
     "yup": "^1.4.0",
     "zustand": "^4.5.2"

client/src/api/clients/client-wagmi.ts

@@ -39,7 +39,7 @@ if (env.jsonRpcEndpoint) {
 const connectors = connectorsForWallets(
   [
     {
-      groupName: 'recommended',
+      groupName: 'Recommended',
       wallets: [injectedWallet, walletConnectWallet, ledgerWallet],
     },
   ],

client/src/components/shared/Layout/LayoutConnectWallet/LayoutConnectWallet.scss

@@ -0,0 +1,122 @@
+// Custom styles for RainbowKit connect modal.
+// !important are required, since most of these styles are being overwritten by direct CSS rules.
+
+.rainbowKitCustomFontFamily {
+  font-family: 'Inter', sans-serif !important;
+}
+
+.modalWidth {
+  width: $modalDesktopWidth !important;
+}
+
+.primaryWrapper {
+  padding: $modalPadding !important;
+  margin: 0 !important;
+}
+
+.modalHeader {
+  line-height: $modalHeaderHeight !important;
+  height: $modalHeaderHeight !important;
+  align-items: center !important;
+}
+
+.dummyDiv {
+  display: none !important;
+}
+
+.headerTextWrapper {
+  padding: 0 !important;
+}
+
+.headerText {
+  font-size: $modalHeaderFontSize !important;
+  font-weight: $font-weight-bold !important;
+}
+
+.optionsWrapper {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.walletOptionsButtonsWrapper {
+  display: flex !important;
+  flex-direction: row !important;
+}
+
+.walletOptionsButtons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  width: 100% !important;
+  gap: 1.6rem !important;
+}
+
+.walletOptionsButtonsContent {
+  height: 9.6rem;
+  padding: 0 !important;
+  background: $color-octant-grey3 !important;
+
+  &:hover {
+    .walletOptionsIcons {
+      filter: none !important;
+    }
+  }
+}
+
+.walletOptionsButtonsOuter {
+  width: 10.9rem;
+}
+
+.walletOptionsContent {
+  flex-direction: column !important;
+
+  > div:nth-child(2) > div {
+    text-align: center;
+    font-size: 1.4rem !important;
+  }
+}
+
+.walletOptionsText {
+  font-weight: $font-weight-bold !important;
+  font-size: $font-size-12 !important;
+}
+
+.walletOptionsIcons {
+  filter: grayscale(1) !important;
+}
+
+.buttonClose {
+  position: absolute !important;
+  top: 1.6rem !important;
+  right: 1.6rem !important;
+  height: 3.2rem !important;
+  width: 3.2rem !important;
+  background: none !important;
+  border: none !important;
+  border-radius: $border-radius-10 !important;
+
+  &:hover {
+    transform: none !important;
+    background: $color-octant-grey3 !important;
+  }
+
+  > svg > path {
+    fill: $color-octant-purple2 !important;
+  }
+}
+
+.sectionHeaders {
+  display: none !important;
+}
+
+.walletSections {
+  display: none !important;
+}
+
+.linkBoxTopDividerLine {
+  display: none !important;
+}
+
+.linkBox {
+  display: none !important;
+}

client/src/components/shared/Layout/LayoutConnectWallet/LayoutConnectWallet.tsx

@@ -1,19 +1,43 @@
 import { useConnectModal, WalletButton } from '@rainbow-me/rainbowkit';
 import cx from 'classnames';
-import React, { FC, Fragment } from 'react';
+import React, { FC, Fragment, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useConnect } from 'wagmi';
 
 import BoxRounded from 'components/ui/BoxRounded';
 import Loader from 'components/ui/Loader';
 import Svg from 'components/ui/Svg';
 import networkConfig from 'constants/networkConfig';
+import useMediaQuery from 'hooks/helpers/useMediaQuery';
 import useDelegationStore from 'store/delegation/store';
 import { browserWallet, walletConnect, ledgerConnect } from 'svg/wallet';
 
 import styles from './LayoutConnectWallet.module.scss';
+import { setCustomStylesForRainbowKitModal } from './utils';
+
+import './LayoutConnectWallet.scss';
+
+/**
+ * Determines when RainbwKit modal is in "list of wallets" mode.
+ * Mutations on RainbowKit modal DOM fire when:
+ * 1. User chooses any of the wallets (opens wallet-specific loading state).
+ * 2. User cancels the signature and goes back to the list.
+ * 3. Custom styles (setCustomStylesForRainbowKitModal) are applied.
+ *
+ * Custom styles can not be applied when wallet-specific loading state is visible, because:
+ * 1. It is not designed.
+ * 2. Some of the DOM elements are not available then.
+ *
+ * Hence, the logic triggers setCustomStylesForRainbowKitModal when modal is being opened
+ * and then when user goes back to the list of wallets.
+ *
+ * Observer checks for childList-type changes and whether user is in list mode,
+ * then applies custom styles.
+ */
+let isInListMode = false;
 
 const LayoutConnectWallet: FC = () => {
+  const { isDesktop } = useMediaQuery();
   const { t } = useTranslation('translation', {
     keyPrefix: 'components.dedicated.connectWallet',
   });
@@ -23,11 +47,34 @@ const LayoutConnectWallet: FC = () => {
     setIsDelegationConnectModalOpen: state.setIsDelegationConnectModalOpen,
   }));
   const { connectors, status, connect: onConnectAnyConnector } = useConnect();
-  const { connectModalOpen: isOpen } = useConnectModal();
+  const { openConnectModal, connectModalOpen: isConnectModalOpen } = useConnectModal();
+
+  useEffect(() => {
+    if (!isConnectModalOpen) {
+      return;
+    }
+
+    setCustomStylesForRainbowKitModal(t);
+    isInListMode = true;
+
+    const target = document.querySelector('.iekbcc0.ju367va.ju367v14');
+
+    const observer = new MutationObserver(mutations => {
+      if (mutations.every(({ type }) => type === 'childList') && !isInListMode) {
+        setCustomStylesForRainbowKitModal(t);
+      }
+      isInListMode = !isInListMode;
+    });
+
+    observer.observe(target as Element, { attributes: true, characterData: true, childList: true });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnectModalOpen]);
 
   const browserWalletConnector = connectors.find(
     // eslint-disable-next-line @typescript-eslint/naming-convention
     ({ id }) => id === 'injected',
+    // Actually, probably type should be used combined with .filter, user select and ... [0].
+    // ({ type }) => type === 'injected',
   );
 
   const isBrowserWalletConnecting = status === 'pending';
@@ -46,6 +93,14 @@ const LayoutConnectWallet: FC = () => {
     onConnectAnyConnector({ connector: browserWalletConnector });
   };
 
+  const onBrowserWalletClick = useMemo(() => {
+    if (isBrowserWalletConnecting) {
+      return undefined;
+    }
+    return isDesktop ? openConnectModal : connectBrowserWallet;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isBrowserWalletConnecting, isDesktop]);
+
   return (
     <Fragment>
       {browserWalletConnector && (
@@ -54,7 +109,7 @@ const LayoutConnectWallet: FC = () => {
           dataTest="ConnectWallet__BoxRounded--browserWallet"
           isGrey
           justifyContent="start"
-          onClick={isBrowserWalletConnecting ? undefined : connectBrowserWallet}
+          onClick={onBrowserWalletClick}
         >
           {isBrowserWalletConnecting ? (
             <>
@@ -91,7 +146,7 @@ const LayoutConnectWallet: FC = () => {
 
               if (
                 window.Cypress === undefined &&
-                (!isReady || isOpen || isBrowserWalletConnecting)
+                (!isReady || isConnectModalOpen || isBrowserWalletConnecting)
               ) {
                 return undefined;
               }
@@ -100,14 +155,17 @@ const LayoutConnectWallet: FC = () => {
             }}
           >
             <Svg
-              classNameSvg={cx(!isOpen && isBrowserWalletConnecting && styles.iconGrey)}
+              classNameSvg={cx(!isConnectModalOpen && isBrowserWalletConnecting && styles.iconGrey)}
               classNameWrapper={styles.icon}
               displayMode="wrapperCustom"
               img={walletConnect}
               size={2.4}
             />
             <div
-              className={cx(styles.label, !isOpen && isBrowserWalletConnecting && styles.labelGrey)}
+              className={cx(
+                styles.label,
+                !isConnectModalOpen && isBrowserWalletConnecting && styles.labelGrey,
+              )}
             >
               {t('walletConnect')}
             </div>
@@ -122,10 +180,14 @@ const LayoutConnectWallet: FC = () => {
               dataTest="ConnectWallet__BoxRounded--ledgerConnect"
               isGrey
               justifyContent="start"
-              onClick={!isReady || isOpen || isBrowserWalletConnecting ? undefined : onConnect}
+              onClick={
+                !isReady || isConnectModalOpen || isBrowserWalletConnecting ? undefined : onConnect
+              }
             >
               <Svg
-                classNameSvg={cx(!isOpen && isBrowserWalletConnecting && styles.iconGrey)}
+                classNameSvg={cx(
+                  !isConnectModalOpen && isBrowserWalletConnecting && styles.iconGrey,
+                )}
                 classNameWrapper={styles.icon}
                 displayMode="wrapperCustom"
                 img={ledgerConnect}
@@ -134,7 +196,7 @@ const LayoutConnectWallet: FC = () => {
               <div
                 className={cx(
                   styles.label,
-                  !isOpen && isBrowserWalletConnecting && styles.labelGrey,
+                  !isConnectModalOpen && isBrowserWalletConnecting && styles.labelGrey,
                 )}
               >
                 {t('ledgerConnect')}