Task/new connect wallet

public/locales/en.json

@@ -694,5 +694,6 @@
   "docs": "Docs",
   "governance": "Governance",
   "proposals": "Proposals",
-  "termsofuse": "Terms of Use"
+  "termsofuse": "Terms of Use",
+  "walletDescription": "Connecting your wallet is like \"logging in\" on Web3. Select your wallet from the options to get started."
 }

src/components/WalletModal/Option.tsx

@@ -1,22 +1,9 @@
 import React from 'react';
 import { Box } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
+import { WalletOptionProps } from './options/WalletOptionProps';
 
-interface OptionProps {
-  link?: string | null;
-  clickable?: boolean;
-  size?: number | null;
-  onClick?: () => void;
-  color: string;
-  header: React.ReactNode;
-  subheader: React.ReactNode | null;
-  icon: string;
-  active?: boolean;
-  id: string;
-  installLink?: string | null;
-}
-
-const Option: React.FC<OptionProps> = ({
+const Option: React.FC<WalletOptionProps> = ({
   link = null,
   onClick,
   header,

src/components/WalletModal/WalletModal.tsx

@@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next';
 // import { UAuthConnector } from '@uauth/web3-react';
 // import UAuth from '@uauth/js';
 import Option from './Option';
+import WalletOption from './options';
 import PendingView from './PendingView';
 import 'components/styles/WalletModal.scss';
 import {
@@ -73,6 +74,8 @@ const WalletModal: React.FC<WalletModalProps> = ({
 
   const connections = getConnections();
 
+  const iconify = true;
+
   // always reset to account view
   useEffect(() => {
     if (walletModalOpen) {
@@ -161,71 +164,76 @@ const WalletModal: React.FC<WalletModalProps> = ({
         !isPhantomWallet
       ) {
         return (
-          <Option
+          <WalletOption
             id={`connect-${option.key}`}
             key={option.key}
             color={option.color}
             header={t('installPhantom')}
             subheader={null}
             link={'https://phantom.app/download'}
             icon={option.iconName}
+            iconify={iconify}
           />
         );
       } else if (
         option.name === GlobalConst.walletName.BRAVEWALLET &&
         !isBraveWallet
       ) {
         return (
-          <Option
+          <WalletOption
             id={`connect-${option.name}`}
             key={option.name}
             color={'#E8831D'}
             header={t('installBrave')}
             subheader={t('installBraveDesc')}
             link={'https://brave.com/wallet'}
             icon={option.iconName}
+            iconify={iconify}
           />
         );
       } else if (option.name === GlobalConst.walletName.BITKEEP && !isBitKeep) {
         return (
-          <Option
+          <WalletOption
             id={`connect-${option.name}`}
             key={option.name}
             color={'#E8831D'}
             header={t('installBitKeep')}
             subheader={null}
             link={'https://bitkeep.com/en/download'}
             icon={option.iconName}
+            iconify={iconify}
           />
         );
       } else if (
         option.name === GlobalConst.walletName.TRUST_WALLET &&
         !isTrustWallet
       ) {
         return (
-          <Option
+          <WalletOption
             id={`connect-${option.name}`}
             key={option.name}
             color={'#E8831D'}
             header={t('installTrustWallet')}
             subheader={null}
             link={'https://trustwallet.com/'}
             icon={option.iconName}
+            iconify={iconify}
           />
         );
       } else if (
         option.name === GlobalConst.walletName.METAMASK &&
         !isMetamask
       ) {
         return (
-          <Option
+          <WalletOption
             id={`connect-${option.name}`}
             key={option.name}
             color={'#E8831D'}
             header={t('installMetamask')}
             subheader={null}
             link={'https://metamask.io/'}
             icon={MetamaskIcon}
+            iconify={iconify}
           />
         );
       }
@@ -234,7 +242,7 @@ const WalletModal: React.FC<WalletModalProps> = ({
       if (isMobile) {
         if (!web3 && !ethereum && option.mobile) {
           return (
-            <Option
+            <WalletOption
               onClick={() => {
                 option.connector !== connector &&
                   !option.href &&
@@ -249,6 +257,7 @@ const WalletModal: React.FC<WalletModalProps> = ({
               subheader={null}
               icon={option.iconName}
               installLink={option.installLink}
+              iconify={iconify}
             />
           );
         } else if (
@@ -264,7 +273,7 @@ const WalletModal: React.FC<WalletModalProps> = ({
               option.connector === coinbaseWalletConnection.connector))
         ) {
           return (
-            <Option
+            <WalletOption
               onClick={() => {
                 if (option.connector === connector && account) {
                   setWalletView(WALLET_VIEWS.ACCOUNT);
@@ -283,6 +292,7 @@ const WalletModal: React.FC<WalletModalProps> = ({
               subheader={null}
               icon={option.iconName}
               installLink={option.installLink}
+              iconify={iconify}
             />
           );
         }
@@ -302,7 +312,7 @@ const WalletModal: React.FC<WalletModalProps> = ({
       return (
         !isMobile &&
         !option.mobileOnly && (
-          <Option
+          <WalletOption
             id={`connect-${option.key}`}
             onClick={() => {
               isActive && option.connector === connector
@@ -317,6 +327,7 @@ const WalletModal: React.FC<WalletModalProps> = ({
             subheader={null} //use option.descriptio to bring back multi-line
             icon={option.iconName}
             installLink={option.installLink}
+            iconify={iconify}
           />
         )
       );
@@ -351,35 +362,46 @@ const WalletModal: React.FC<WalletModalProps> = ({
       );
     }
     return (
-      <Box paddingX={3} paddingY={4}>
-        <Box className='flex justify-between'>
-          <h5>{t('connectWallet')}</h5>
-          <Close className='cursor-pointer' onClick={toggleWalletModal} />
-        </Box>
-        <Box mt={4}>
-          {walletView === WALLET_VIEWS.PENDING ? (
-            <PendingView
-              connection={pendingWallet}
-              error={pendingError}
-              setPendingError={setPendingError}
-              tryActivation={tryActivation}
-            />
-          ) : (
-            getOptions()
-          )}
-          {walletView !== WALLET_VIEWS.PENDING && (
-            <Box className='blurb'>
-              <small>{t('newToMatic')}</small>
-              <a
-                href='https://wiki.polygon.technology/docs/tools/wallets/getting-started'
-                target='_blank'
-                rel='noopener noreferrer'
+      <Box paddingTop={4}>
+        <Box paddingX={3}>
+          <Box className='flex justify-between'>
+            <h6>{t('connectWallet')}</h6>
+            <Close className='cursor-pointer' onClick={toggleWalletModal} />
+          </Box>
+          <Box my={1} className='walletDescriptionContainer'>
+            {t('walletDescription')}
+          </Box>
+          <Box>
+            {walletView === WALLET_VIEWS.PENDING ? (
+              <PendingView
+                connection={pendingWallet}
+                error={pendingError}
+                setPendingError={setPendingError}
+                tryActivation={tryActivation}
+              />
+            ) : (
+              <Box
+                className={
+                  iconify ? 'option-container-iconify' : 'option-container'
+                }
               >
-                <small>{t('learnWallet')} ↗</small>
-              </a>
-            </Box>
-          )}
+                {getOptions()}
+              </Box>
+            )}
+          </Box>
         </Box>
+        {walletView !== WALLET_VIEWS.PENDING && (
+          <Box paddingY={2.5} className={iconify ? 'blurb-iconify' : 'blurb'}>
+            <small>{t('newToMatic')}</small>
+            <a
+              href='https://wiki.polygon.technology/docs/tools/wallets/getting-started'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <small>{t('learnWallet')} ↗</small>
+            </a>
+          </Box>
+        )}
       </Box>
     );
   }

src/components/WalletModal/options/BarOptionContent.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import { WalletOptionProps } from './WalletOptionProps';
+
+const BarOptionContent: React.FC<WalletOptionProps> = ({
+  onClick,
+  header,
+  subheader = null,
+  icon,
+  active = false,
+  id,
+  installLink = null,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Box className='optionCardClickable' id={id} onClick={onClick}>
+      <Box className='flex items-center' my={0.5}>
+        <img src={icon} alt={'Icon'} width={24} />
+        <p style={{ marginLeft: 8 }}>{header}</p>
+      </Box>
+      {active && (
+        <Box className='flex items-center'>
+          <Box className='optionConnectedDot' />
+          <small>{t('connected')}</small>
+        </Box>
+      )}
+      {!active && installLink && (
+        <Box className='flex items-center'>
+          <small className='installBtn'>{t('install')}</small>
+        </Box>
+      )}
+      {subheader && (
+        <Box my={0.5} width={1}>
+          <span>{subheader}</span>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default BarOptionContent;

src/components/WalletModal/options/IconifyOption.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import { WalletOptionProps } from './WalletOptionProps';
+
+const IconifyOption: React.FC<WalletOptionProps> = ({
+  header,
+  icon,
+  active,
+  id,
+  onClick,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      id={id}
+      onClick={onClick}
+      className='flex items-center flex-col optionCardIconfiy'
+      my={1.5}
+      mx={1.5}
+    >
+      <Box className='optionIconContainer'>
+        <img className='m-auto' src={icon} alt={'Icon'} width={48} />
+      </Box>
+      <Box className='optionHeader' mt={0.5}>
+        {header}
+      </Box>
+      {active && (
+        <Box className='flex items-center'>
+          <Box className='optionConnectedDot' />
+          <small>{t('connected')}</small>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default IconifyOption;

src/components/WalletModal/options/WalletOption.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { WalletOptionProps } from './WalletOptionProps';
+
+import IconifyOption from './IconifyOption';
+import BarOptionContent from './BarOptionContent';
+
+const WalletOption: React.FC<WalletOptionProps> = (
+  props: WalletOptionProps,
+) => {
+  const { iconify, link, installLink } = props;
+
+  if (link) {
+    return (
+      <a
+        href={link}
+        target='_blank'
+        rel='noopener noreferrer'
+        className='optionLink'
+      >
+        {iconify ? (
+          <IconifyOption {...props} />
+        ) : (
+          <BarOptionContent {...props} />
+        )}
+      </a>
+    );
+  }
+
+  if (installLink !== null) {
+    return (
+      <a
+        href={installLink}
+        target='_blank'
+        rel='noopener noreferrer'
+        className='installLink'
+      >
+        {iconify ? (
+          <IconifyOption {...props} />
+        ) : (
+          <BarOptionContent {...props} />
+        )}
+      </a>
+    );
+  }
+
+  return null;
+};
+
+export default WalletOption;