feat(wallet selector): add wallet selector modal (#1559)

Co-authored-by: Overzunov <[email protected]>
near-daos · Dec 5, 2022 · 6bd4e8a · 6bd4e8a
1 parent b416d2f
commit 6bd4e8a
Show file tree

Hide file tree

Showing 34 changed files with 536 additions and 354 deletions.
diff --git a/astro_2.0/components/AppHeader/components/AccountDropdown/AccountDropdown.module.scss b/astro_2.0/components/AppHeader/components/AccountDropdown/AccountDropdown.module.scss
@@ -7,21 +7,22 @@
   position: relative;
 }
 
+.wrapper {
+  align-items: center;
+  display: flex;
+}
+
 @include mobile-only {
   .controlIcon {
     display: none;
   }
 }
 
 .controlIcon {
-  margin: 0 8px 0 4px;
+  margin: 0 24px 0 4px;
   width: 20px;
 }
 
-.controlIcon.open {
-  transform: rotate(180deg);
-}
-
 .menuButton {
   padding: 8px;
 

diff --git a/astro_2.0/components/AppHeader/components/AccountDropdown/AccountDropdown.tsx b/astro_2.0/components/AppHeader/components/AccountDropdown/AccountDropdown.tsx
@@ -10,7 +10,7 @@ import { ConnectedAccountButton } from 'astro_2.0/components/AppHeader/component
 import styles from './AccountDropdown.module.scss';
 
 export const AccountDropdown: React.FC = () => {
-  const { accountId, nearService, connectingToWallet } = useWalletContext();
+  const { accountId, nearService } = useWalletContext();
   const [open, setOpen] = useState(false);
 
   const closeDropdown = useCallback(() => {
@@ -25,38 +25,37 @@ export const AccountDropdown: React.FC = () => {
     }
 
     return (
-      <GenericDropdown
-        isOpen={open}
-        onOpenUpdate={setOpen}
-        parent={
-          <div>
-            <ConnectedAccountButton>
-              <Icon
-                name="buttonArrowDown"
-                className={cn(styles.controlIcon, { [styles.open]: open })}
-              />
-            </ConnectedAccountButton>
-          </div>
-        }
-        options={{
-          placement: 'bottom-end',
-        }}
-      >
-        <>
-          {nearService && <WalletsList closeDropdownHandler={closeDropdown} />}
-          <AppFooter mobile className={styles.footer} onClick={closeDropdown} />
-        </>
-      </GenericDropdown>
+      <div className={styles.wrapper}>
+        <GenericDropdown
+          isOpen={open}
+          onOpenUpdate={setOpen}
+          parent={
+            <div>
+              <Icon name="settings" className={cn(styles.controlIcon)} />
+            </div>
+          }
+          options={{
+            placement: 'bottom-end',
+          }}
+        >
+          <>
+            {nearService && (
+              <WalletsList closeDropdownHandler={closeDropdown} />
+            )}
+            <AppFooter
+              mobile
+              className={styles.footer}
+              onClick={closeDropdown}
+            />
+          </>
+        </GenericDropdown>
+        <ConnectedAccountButton />
+      </div>
     );
   }
 
   return (
-    <div
-      className={cn(styles.root, {
-        [styles.disabled]: connectingToWallet,
-      })}
-      ref={ref}
-    >
+    <div className={cn(styles.root)} ref={ref}>
       {render()}
     </div>
   );

diff --git a/...ents/AccountDropdown/components/ConnectedAccountButton/ConnectedAccountButton.module.scss b/...ents/AccountDropdown/components/ConnectedAccountButton/ConnectedAccountButton.module.scss
@@ -25,7 +25,7 @@
     @extend %subtitle4;
     @include ellipse-text;
     color: var(--color-neutral-70);
-    margin: 0 4px 0 8px;
+    margin: 0 20px 0 12px;
     max-width: 220px;
   }
 }
diff --git a/...r/components/AccountDropdown/components/ConnectedAccountButton/ConnectedAccountButton.tsx b/...r/components/AccountDropdown/components/ConnectedAccountButton/ConnectedAccountButton.tsx
@@ -1,28 +1,28 @@
 import cn from 'classnames';
-import { WalletIcon } from 'astro_2.0/components/AppHeader/components/AccountDropdown/components/WalletIcon';
 import React from 'react';
+
 import { useWalletContext } from 'context/WalletContext';
+
+import { Button } from 'components/button/Button';
+import { WalletIcon } from 'astro_2.0/components/AppHeader/components/AccountDropdown/components/WalletIcon';
+
 import styles from './ConnectedAccountButton.module.scss';
 
 export const ConnectedAccountButton: React.FC = ({ children }) => {
-  const { currentWallet, connectingToWallet, accountId } = useWalletContext();
+  const { currentWallet, accountId, switchWallet } = useWalletContext();
 
   return (
     <>
       {currentWallet !== null && (
-        <div
-          className={cn(styles.accountButton, {
-            [styles.disabled]: connectingToWallet,
-          })}
+        <Button
+          onClick={() => switchWallet()}
+          variant="transparent"
+          className={cn(styles.accountButton)}
         >
-          <WalletIcon
-            showLoader={connectingToWallet}
-            walletType={currentWallet}
-            isSelected={false}
-          />
+          <WalletIcon walletType={currentWallet} isSelected={false} />
           <span className={styles.accountId}>{accountId}</span>
           {children}
-        </div>
+        </Button>
       )}
     </>
   );

diff --git a/....0/components/AppHeader/components/AccountDropdown/components/LoginButton/LoginButton.tsx b/....0/components/AppHeader/components/AccountDropdown/components/LoginButton/LoginButton.tsx
@@ -1,24 +1,22 @@
-import React from 'react';
-import { useModal } from 'components/modal';
-import { WalletSelectionModal } from 'astro_2.0/components/AppHeader/components/AccountDropdown/components/WalletSelectionModal';
+import React, { useCallback } from 'react';
 import { useWalletContext } from 'context/WalletContext';
 import { Button } from 'components/button/Button';
 
 import styles from './LoginButton.module.scss';
 
 export const LoginButton: React.FC = () => {
-  const { login, connectingToWallet } = useWalletContext();
-  const [showModal] = useModal(WalletSelectionModal, {
-    signIn: walletType => login(walletType),
-  });
+  const { login } = useWalletContext();
+
+  const handleLogin = useCallback(async () => {
+    await login();
+  }, [login]);
 
   return (
     <Button
       variant="green"
       size="small"
       capitalize
-      disabled={connectingToWallet}
-      onClick={() => showModal()}
+      onClick={handleLogin}
       className={styles.loginButton}
     >
       Connect wallet

diff --git a/..._2.0/components/AppHeader/components/AccountDropdown/components/WalletIcon/WalletIcon.tsx b/..._2.0/components/AppHeader/components/AccountDropdown/components/WalletIcon/WalletIcon.tsx
@@ -2,35 +2,26 @@ import { WalletType } from 'types/config';
 import React from 'react';
 import { NearIcon } from 'astro_2.0/components/NearIcon';
 import { SenderIcon } from 'astro_2.0/components/SenderIcon';
-import { Button } from 'components/button/Button';
 import styles from 'astro_2.0/components/AppHeader/components/AccountDropdown/components/WalletIcon/WalletIcon.module.scss';
 import { SelectorNearIcon } from 'astro_2.0/components/SelectorIcons';
 
 interface WalletIconProps {
   walletType: WalletType;
   isSelected: boolean;
-  onClick?: () => void;
   showLoader?: boolean;
 }
 
 export const WalletIcon: React.FC<WalletIconProps> = ({
   walletType,
   isSelected,
-  onClick,
   showLoader,
 }) => {
   const renderIcon = (icon: React.ReactElement) => {
     return (
-      <Button
-        variant="transparent"
-        size="block"
-        disabled={showLoader}
-        className={styles.iconContainer}
-        onClick={onClick}
-      >
+      <div className={styles.iconContainer}>
         {icon}
         {isSelected && <div className={styles.selectedWallet} />}
-      </Button>
+      </div>
     );
   };
 

diff --git a/....0/components/AppHeader/components/AccountDropdown/components/WalletsList/WalletsList.tsx b/....0/components/AppHeader/components/AccountDropdown/components/WalletsList/WalletsList.tsx
@@ -1,13 +1,7 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { MyAccountButton } from 'astro_2.0/components/AppHeader/components/AccountDropdown/components/MyAccountButton';
-import { WalletType } from 'types/config';
 import { DisconnectButton } from 'astro_2.0/components/AppHeader/components/AccountDropdown/components/DisconnectButton';
-import { WalletWithAccounts } from 'astro_2.0/components/AppHeader/components/AccountDropdown/components/WalletWithAccounts';
-import { WalletButton } from 'astro_2.0/components/AppHeader/components/AccountDropdown/components/WalletButton';
 import styles from 'astro_2.0/components/AppHeader/components/AccountDropdown/components/WalletsList/WalletsList.module.scss';
-import { useWalletContext } from 'context/WalletContext';
-import { useFlags } from 'launchdarkly-react-client-sdk';
-import { useTranslation } from 'next-i18next';
 
 interface WalletsListProps {
   closeDropdownHandler: () => void;
@@ -16,86 +10,13 @@ interface WalletsListProps {
 export const WalletsList: React.FC<WalletsListProps> = ({
   closeDropdownHandler,
 }) => {
-  const {
-    currentWallet,
-    availableAccounts,
-    availableWallets,
-    switchAccount,
-    switchWallet,
-  } = useWalletContext();
-  const { useWalletSelector } = useFlags();
-  const { t } = useTranslation();
-
-  const switchAccountHandler = useCallback(
-    (account: string) => () => {
-      switchAccount(WalletType.NEAR, account);
-    },
-    [switchAccount]
-  );
-
-  const switchWalletHandler = useCallback(
-    (wallet: WalletType) => async () => {
-      closeDropdownHandler();
-      await switchWallet(wallet);
-    },
-    [closeDropdownHandler, switchWallet]
-  );
-
   return (
     <div className={styles.root}>
       <MyAccountButton
         className={styles.menuButton}
         closeDropdown={closeDropdownHandler}
       />
       <div className={styles.delimiter} />
-      <div className={styles.chooseWalletCaption}>Choose wallet</div>
-      {availableWallets.map(wallet =>
-        wallet.id === WalletType.NEAR && availableAccounts.length > 1 ? (
-          <WalletWithAccounts
-            key={wallet.id}
-            wallet={wallet}
-            isSelected={currentWallet === wallet.id}
-            accounts={availableAccounts}
-            switchAccountHandler={switchAccountHandler}
-            switchWalletHandler={switchWalletHandler}
-          />
-        ) : (
-          <WalletButton
-            key={wallet.id}
-            walletType={wallet.id}
-            isSelected={currentWallet === wallet.id}
-            onClick={switchWalletHandler(wallet.id)}
-            name={wallet.name}
-            type={wallet.type}
-            url={wallet.url}
-          />
-        )
-      )}
-      {useWalletSelector && (
-        <>
-          <WalletButton
-            walletType={WalletType.SELECTOR_NEAR}
-            onClick={switchWalletHandler(WalletType.SELECTOR_NEAR)}
-            name="Selector NEAR"
-            type={t('header.wallets.near.type')}
-            url="mynearwallet.com"
-            className={styles.wallet}
-            isSelected={currentWallet === WalletType.SELECTOR_NEAR}
-          />
-          {availableWallets.find(item => item.id === WalletType.SENDER) && (
-            <WalletButton
-              walletType={WalletType.SENDER}
-              onClick={switchWalletHandler(WalletType.SELECTOR_SENDER)}
-              name="Selector Sender"
-              type={t('header.wallets.sender.type')}
-              url="senderwallet.io"
-              className={styles.wallet}
-              isSelected={currentWallet === WalletType.SELECTOR_SENDER}
-            />
-          )}
-        </>
-      )}
-      <div className={styles.delimiter} />
       <DisconnectButton />
     </div>
   );

diff --git a/astro_2.0/components/DaoDetails/DaoDetailsMinimized/components/DaoAction/DaoAction.tsx b/astro_2.0/components/DaoDetails/DaoDetailsMinimized/components/DaoAction/DaoAction.tsx
@@ -4,8 +4,6 @@ import cn from 'classnames';
 import { useRouter } from 'next/router';
 import { useMedia } from 'react-use';
 
-import { WalletType } from 'types/config';
-
 import { useWalletContext } from 'context/WalletContext';
 import { useTranslation } from 'next-i18next';
 
@@ -47,7 +45,7 @@ export const DaoAction: FC<Props> = ({
 
   const handleCreateProposal = useCallback(() => {
     if (isEmpty(accountId)) {
-      login(WalletType.NEAR);
+      login();
     } else if (onCreateProposalClick) {
       onCreateProposalClick();
     }

diff --git a/astro_2.0/components/DaosList/DaosList.tsx b/astro_2.0/components/DaosList/DaosList.tsx
@@ -7,7 +7,6 @@ import { CREATE_DAO_URL } from 'constants/routing';
 
 import { useWalletContext } from 'context/WalletContext';
 
-import { WalletType } from 'types/config';
 import styles from './DaosList.module.scss';
 
 interface DaosListProps {
@@ -20,7 +19,7 @@ export const DaosList: FC<DaosListProps> = ({ label, children }) => {
   const { accountId, login } = useWalletContext();
 
   const handleCreateDao = useCallback(
-    () => (accountId ? router.push(CREATE_DAO_URL) : login(WalletType.NEAR)),
+    () => (accountId ? router.push(CREATE_DAO_URL) : login()),
     [login, router, accountId]
   );
 

diff --git a/astro_2.0/components/LocaleSelector/LocaleSelector.module.scss b/astro_2.0/components/LocaleSelector/LocaleSelector.module.scss
@@ -23,4 +23,8 @@
   height: 24px;
   margin-right: 8px;
   width: 24px;
+
+  &.nonEn {
+    transform: rotate(180deg);
+  }
 }
diff --git a/astro_2.0/components/LocaleSelector/LocaleSelector.tsx b/astro_2.0/components/LocaleSelector/LocaleSelector.tsx
@@ -38,7 +38,9 @@ export const LocaleSelector: FC = () => {
             <div className={cn(styles.selector)} ref={rootRef}>
               <CircleFlag
                 countryCode={locale === 'en' ? 'us' : locale}
-                className={styles.flag}
+                className={cn(styles.flag, {
+                  [styles.nonEn]: locale !== 'en',
+                })}
               />{' '}
               {locale}
             </div>

diff --git a/astro_2.0/components/LocaleSelector/components/Locales/Locales.module.scss b/astro_2.0/components/LocaleSelector/components/Locales/Locales.module.scss
@@ -38,4 +38,8 @@
   height: 24px;
   margin-right: 8px;
   width: 24px;
+
+  &.nonEn {
+    transform: rotate(180deg);
+  }
 }