feat: MultiChoiceMenu component

src/components/UI/MultiChoiceErrorMessage/MultiChoiceErrorMessage.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import styles from './MultiChoiceErrorMessage.module.scss';
+
+export const MultiChoiceErrorMessage = ({message}) => {
+  return <div className={styles.multiChoiceErrorMessage}>❗ {message}</div>;
+};
+
+MultiChoiceErrorMessage.propTypes = {
+  message: PropTypes.string
+};

src/components/UI/LoginErrorMessage/LoginErrorMessage.module.scss → src/components/UI/MultiChoiceErrorMessage/MultiChoiceErrorMessage.module.scss

@@ -1,6 +1,6 @@
 @import '../../../index';
 
-.loginErrorMessage {
+.multiChoiceErrorMessage {
   text-align: center;
   margin-top: 20px;
   line-height: 20px;

src/components/UI/MultiChoiceItem/MultiChoiceItem.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {ReactComponent as ForwardIcon} from '../../../assets/svg/icons/forward.svg';
+import {toClasses, capitalize} from '../../../utils';
+import {DynamicIcon} from '../index';
+import styles from './MultiChoiceItem.module.scss';
+
+export const MultiChoiceItem = ({name, description, logoPath, isDisabled, onClick}) => (
+  <>
+    <div
+      className={toClasses(styles.multiChoiceItem, isDisabled && styles.isDisabled)}
+      onClick={onClick}
+    >
+      <div className={styles.left}>
+        <DynamicIcon path={logoPath} size={41} />
+        <div className={styles.text}>
+          <div className={styles.title}>{capitalize(name)}</div>
+          <div className={styles.description}>{capitalize(description)}</div>
+        </div>
+      </div>
+      <ForwardIcon />
+    </div>
+    <div className={styles.separator} />
+  </>
+);
+
+MultiChoiceItem.propTypes = {
+  name: PropTypes.string,
+  description: PropTypes.string,
+  logoPath: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func
+};

src/components/UI/MultiChoiceItem/MultiChoiceItem.module.scss

@@ -0,0 +1,68 @@
+@import '../../../index';
+
+.multiChoiceItem {
+  display: flex;
+  padding: 15px 20px;
+  cursor: pointer;
+  transition: 0.3s ease-in-out;
+  align-items: center;
+  justify-content: space-between;
+
+  &.isDisabled {
+    pointer-events: none;
+    opacity: 0.2;
+  }
+
+  .left {
+    display: flex;
+
+    .text {
+      display: flex;
+      flex-direction: column;
+      margin-left: 20px;
+
+      .title {
+        font-weight: 500;
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        line-height: 150%;
+        color: $--color-white;
+      }
+
+      .description {
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        color: $--color-white;
+        opacity: 0.5;
+        line-height: 150%;
+      }
+    }
+  }
+
+  svg {
+    transition: 0.3s ease-in-out;
+  }
+
+  &:hover {
+    background: $--color-alpha-1;
+    box-sizing: border-box;
+    border-radius: 8px;
+
+    svg {
+      transform: scale(2) scale3d(1, -1, -2);
+    }
+  }
+}
+
+.separator {
+  display: none;
+
+  &:not(:last-child) {
+    display: block;
+    height: 1px;
+    width: 100%;
+    background: $--color-alpha-3;
+  }
+}

src/components/UI/MultiChoiceMenu/MultiChoiceMenu.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {toClasses} from '../../../utils';
+import {MultiChoiceErrorMessage} from '../MultiChoiceErrorMessage/MultiChoiceErrorMessage';
+import {MultiChoiceItem} from '../MultiChoiceItem/MultiChoiceItem';
+import styles from './MultiChoiceMenu.module.scss';
+
+export const MultiChoiceMenu = ({title, description, choices, error, footer}) => {
+  const renderChoiceItems = () => {
+    return choices.map(choice => {
+      return (
+        <MultiChoiceItem
+          key={choice.id}
+          description={choice.description}
+          isDisabled={choice.isDisabled || false}
+          logoPath={choice.logoPath}
+          name={choice.name}
+          onClick={choice.onClick}
+        />
+      );
+    });
+  };
+
+  return (
+    <div className={toClasses(styles.multiChoiceMenu, 'center')}>
+      <div className={styles.content}>
+        <div className={styles.title}>{title}</div>
+        {description && <p>{description}</p>}
+        <div className={styles.container}>{renderChoiceItems()}</div>
+        {error && <MultiChoiceErrorMessage message={error.message} />}
+      </div>
+      {footer && (
+        <>
+          <div className={styles.separator} />
+          {footer}
+        </>
+      )}
+    </div>
+  );
+};
+
+MultiChoiceMenu.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  choices: PropTypes.arrayOf(PropTypes.object),
+  error: PropTypes.object,
+  footer: PropTypes.oneOfType(PropTypes.array, PropTypes.object)
+};

src/components/UI/MultiChoiceMenu/MultiChoiceMenu.module.scss

@@ -0,0 +1,43 @@
+@import '../../../index';
+
+.multiChoiceMenu {
+  position: absolute;
+  width: 450px;
+  background: $--color-alpha;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+
+  .content {
+    margin: 30px;
+
+    p {
+      font-size: 12px;
+      color: $--color-white;
+      opacity: 0.7;
+    }
+
+    .title {
+      margin-bottom: 30px;
+      font-weight: 600;
+      font-size: 24px;
+      line-height: 30px;
+      text-align: center;
+      letter-spacing: 0.01em;
+      color: $--color-white;
+      text-transform: capitalize;
+    }
+
+    .container {
+      margin-top: 20px;
+      border: 1px solid $--color-alpha-3;
+      box-sizing: border-box;
+      border-radius: 8px;
+    }
+  }
+}
+
+.separator {
+  height: 1px;
+  width: 100%;
+  background: $--color-alpha-3;
+}

src/components/UI/index.js

@@ -32,6 +32,8 @@ export * from './RefreshIcon/RefreshIcon';
 export * from './Stepper/Stepper';
 export * from './StyledBackground/StyledBackground';
 export * from './FullScreenContainer/FullScreenContainer';
-export * from './LoginErrorMessage/LoginErrorMessage';
+export * from './MultiChoiceErrorMessage/MultiChoiceErrorMessage';
+export * from './MultiChoiceMenu/MultiChoiceMenu';
+export * from './MultiChoiceItem/MultiChoiceItem';
 export * from './Modal';
 export * from './Toast';

src/routes/Login/Login.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useRef, useState} from 'react';
 
-import {LoginErrorMessage, WalletLogin} from '../../components/UI';
+import {MultiChoiceMenu} from '../../components/UI';
 import {
   ActionType,
   ChainInfo,
@@ -18,7 +18,7 @@ import {
 import {useHideModal, useProgressModal} from '../../providers/ModalProvider';
 import {useIsL1, useIsL2, useTransfer} from '../../providers/TransferProvider';
 import {useWallets} from '../../providers/WalletsProvider';
-import {evaluate, isChrome, toClasses} from '../../utils';
+import {evaluate, isChrome} from '../../utils';
 import styles from './Login.module.scss';
 
 const MODAL_TIMEOUT_DURATION = 2000;
@@ -146,41 +146,38 @@ export const Login = () => {
     hideModal();
   };
 
-  const renderLoginWallets = () => {
+  const mapLoginWalletsToChoices = () => {
     return walletHandlers.map(walletHandler => {
       const {
         config: {id, description, name, logoPath}
       } = walletHandler;
-      return (
-        <WalletLogin
-          key={id}
-          description={description}
-          isDisabled={!isChrome()}
-          logoPath={logoPath}
-          name={name}
-          onClick={() => onWalletConnect(walletHandler)}
-        />
-      );
+      return {
+        id,
+        description,
+        isDisabled: !isChrome(),
+        logoPath,
+        name,
+        onClick: () => onWalletConnect(walletHandler)
+      };
     });
   };
 
   return (
-    <div className={toClasses(styles.login, 'center')}>
-      <div className={styles.content}>
-        <div className={styles.title}>{titleTxt}</div>
-        <p>
-          {evaluate(subtitleTxt, {
-            networkName:
-              action === ActionType.TRANSFER_TO_L2 ? NetworkType.L1.name : NetworkType.L2.name
-          })}
-        </p>
-        <div className={styles.container}>{renderLoginWallets()}</div>
-        {error && <LoginErrorMessage message={error.message} />}
-      </div>
-      <div className={styles.separator} />
-      <div className={styles.download}>
-        {downloadTxt[0]} <span onClick={onDownloadClick}>{downloadTxt[1]}</span>
-      </div>
+    <div className={styles.login}>
+      <MultiChoiceMenu
+        choices={mapLoginWalletsToChoices()}
+        description={evaluate(subtitleTxt, {
+          networkName:
+            action === ActionType.TRANSFER_TO_L2 ? NetworkType.L1.name : NetworkType.L2.name
+        })}
+        error={error}
+        footer={
+          <div className={styles.download}>
+            {downloadTxt[0]} <span onClick={onDownloadClick}>{downloadTxt[1]}</span>
+          </div>
+        }
+        title={titleTxt}
+      />
     </div>
   );
 };

src/routes/Login/Login.module.scss

@@ -1,40 +1,6 @@
 @import '../../index';
 
 .login {
-  position: absolute;
-  width: 450px;
-  background: $--color-alpha;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  border-radius: 20px;
-
-  .content {
-    margin: 30px;
-
-    p {
-      font-size: 12px;
-      color: $--color-white;
-      opacity: 0.7;
-    }
-
-    .title {
-      margin-bottom: 30px;
-      font-weight: 600;
-      font-size: 24px;
-      line-height: 30px;
-      text-align: center;
-      letter-spacing: 0.01em;
-      color: $--color-white;
-      text-transform: capitalize;
-    }
-
-    .container {
-      margin-top: 20px;
-      border: 1px solid $--color-alpha-3;
-      box-sizing: border-box;
-      border-radius: 8px;
-    }
-  }
-
   .download {
     margin: 30px;
     font-size: 14px;
@@ -50,9 +16,3 @@
     }
   }
 }
-
-.separator {
-  height: 1px;
-  width: 100%;
-  background: $--color-alpha-3;
-}