Merge pull request #3890 from LiskHQ/3889-disable-register-delegate-l…

…ink-in-btc Disable register delegate link in BTC and explorer
LiskHQ · Oct 26, 2021 · 4431247 · 4431247
2 parents 3bbb38c + 136da2c
commit 4431247
Show file tree

Hide file tree

Showing 5 changed files with 237 additions and 90 deletions.
diff --git a/src/components/screens/wallet/overview/balanceInfo/actionBar.js b/src/components/screens/wallet/overview/balanceInfo/actionBar.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { PrimaryButton, SecondaryButton, TertiaryButton } from '@toolbox/buttons';
+import DialogLink from '@toolbox/dialog/link';
+import SignInTooltipWrapper from '@shared/signInTooltipWrapper';
+import { selectAccountBalance, selectLSKAddress } from '@store/selectors';
+import EmptyBalanceTooltipWrapper from './emptyBalanceTooltipWrapper';
+import styles from './balanceInfo.css';
+
+const ActionBar = ({
+  username, address, t, isWalletRoute, activeToken,
+}) => {
+  const hostBalance = useSelector(selectAccountBalance);
+  const disableButtons = hostBalance === 0;
+  const vote = useSelector(state => state.voting[address]);
+  const lskAddress = useSelector(selectLSKAddress);
+  const initialValue = isWalletRoute
+    ? {}
+    : { recipient: address };
+
+  const voteButtonTitle = vote ? t('Edit vote') : t('Add to votes');
+
+  const sendTitle = isWalletRoute
+    ? t('Send {{token}}', { token: activeToken })
+    : t('Send {{token}} here', { token: activeToken });
+
+  return (
+    <SignInTooltipWrapper position="bottom">
+      <EmptyBalanceTooltipWrapper hostBalance={hostBalance}>
+        <div className={styles.actionRow}>
+          {
+            username && (
+              <DialogLink component="editVote" className={`${styles.button} add-vote`}>
+                <SecondaryButton
+                  className={`${styles.voteButton} open-add-vote-dialog`}
+                  size="m"
+                  disabled={disableButtons}
+                >
+                  {voteButtonTitle}
+                </SecondaryButton>
+              </DialogLink>
+            )
+          }
+          {
+            (!username && lskAddress === address) && (
+              <DialogLink
+                className={styles.registerDelegate}
+                component="registerDelegate"
+              >
+                <TertiaryButton
+                  className="register-delegate"
+                  size="m"
+                  disabled={disableButtons}
+                >
+                  {t('Register delegate')}
+                </TertiaryButton>
+              </DialogLink>
+            )
+          }
+          <DialogLink component="send" className={`${styles.button} tx-send-bt`} data={initialValue}>
+            <PrimaryButton
+              className={`${styles.sendButton} ${styles[activeToken]} open-send-dialog`}
+              size="m"
+              disabled={disableButtons}
+            >
+              {sendTitle}
+            </PrimaryButton>
+          </DialogLink>
+        </div>
+      </EmptyBalanceTooltipWrapper>
+    </SignInTooltipWrapper>
+  );
+};
+
+export default withTranslation()(ActionBar);
diff --git a/src/components/screens/wallet/overview/balanceInfo/actionBar.test.js b/src/components/screens/wallet/overview/balanceInfo/actionBar.test.js
@@ -0,0 +1,125 @@
+import { mountWithRouterAndStore } from '@utils/testHelpers';
+import { tokenMap } from '@constants';
+import ActionBar from './actionBar';
+
+describe('Reclaim balance screen', () => {
+  const hostAddress = 'lskmjr8hrnhzc6j653eto5fbh2p3kwdpa9ccdnhk6';
+  const explorerAddress = 'lskc7ofju4nvnshg6349otmcssme9q87wrpf8umws';
+  let wrapper;
+  const props = {
+    username: undefined,
+    address: hostAddress,
+    t: t => t,
+    isWalletRoute: true,
+    activeToken: tokenMap.LSK.key,
+  };
+  const noBalanceAccount = {
+    summary: {
+      address: hostAddress,
+      balance: 0,
+    },
+  };
+  const balanceAccount = {
+    summary: {
+      address: hostAddress,
+      balance: 100000,
+    },
+  };
+  const state = {
+    account: {
+      passphrase: 'test',
+      info: {
+        LSK: { },
+      },
+    },
+    settings: { token: { active: tokenMap.LSK.key } },
+  };
+
+  it('Should display register delegate button and send', () => {
+    wrapper = mountWithRouterAndStore(
+      ActionBar,
+      props,
+      {},
+      { ...state, account: { info: { LSK: balanceAccount } } },
+    );
+    const html = wrapper.html();
+
+    expect(html).toContain('open-send-dialog');
+    expect(html).toContain('register-delegate');
+    expect(html).not.toContain('open-add-vote-dialog');
+  });
+
+  it('Should not display register delegate button', () => {
+    wrapper = mountWithRouterAndStore(
+      ActionBar,
+      { ...props, activeToken: tokenMap.BTC.key, address: 'mnrutC4CgQhMos4f8HWYRy8rKQ3UisGwYJ' },
+      {},
+      { ...state, account: { info: { LSK: balanceAccount } } },
+    );
+    let html = wrapper.html();
+
+    expect(html).toContain('open-send-dialog');
+    expect(html).not.toContain('register-delegate');
+    expect(html).not.toContain('open-add-vote-dialog');
+
+    wrapper = mountWithRouterAndStore(
+      ActionBar,
+      { ...props, address: explorerAddress },
+      {},
+      { ...state, account: { info: { LSK: balanceAccount } } },
+    );
+    html = wrapper.html();
+
+    expect(html).toContain('open-send-dialog');
+    expect(html).not.toContain('register-delegate');
+    expect(html).not.toContain('open-add-vote-dialog');
+  });
+
+  it('Should display add/edit vote correctly', () => {
+    wrapper = mountWithRouterAndStore(
+      ActionBar,
+      { ...props, username: 'delegate' },
+      {},
+      { ...state, account: { info: { LSK: balanceAccount } } },
+    );
+    let html = wrapper.html();
+
+    expect(html).toContain('open-send-dialog');
+    expect(html).not.toContain('register-delegate');
+    expect(html).toContain('open-add-vote-dialog');
+    expect(html).toContain('Add to votes');
+    expect(html).not.toContain('Edit vote');
+
+    wrapper = mountWithRouterAndStore(
+      ActionBar,
+      { ...props, username: 'delegate' },
+      {},
+      {
+        ...state,
+        account: { info: { LSK: balanceAccount } },
+        voting: {
+          [balanceAccount.summary.address]: {},
+        },
+      },
+    );
+    html = wrapper.html();
+
+    expect(html).toContain('Edit vote');
+    expect(html).not.toContain('Add to votes');
+  });
+
+  it('Should disable buttons', () => {
+    wrapper = mountWithRouterAndStore(
+      ActionBar,
+      props,
+      {},
+      { ...state, account: { info: { LSK: noBalanceAccount } } },
+    );
+    const html = wrapper.html();
+
+    expect(html).toContain('empty-balance-tooltip-wrapper');
+    expect(html).toContain('emptyBalanceTooltipChild disabled');
+    expect(wrapper.find('button.open-send-dialog')).toBeDisabled();
+    expect(wrapper.find('button.register-delegate')).toBeDisabled();
+  });
+});
diff --git a/src/components/screens/wallet/overview/balanceInfo/emptyBalanceTooltipWrapper.js b/src/components/screens/wallet/overview/balanceInfo/emptyBalanceTooltipWrapper.js
@@ -27,7 +27,7 @@ const EmptyBalanceTooltipWrapper = ({
   return (hostBalance === 0
     ? (
       <Tooltip
-        className={styles.emptyBalanceTooltipWrapper}
+        className={`${styles.emptyBalanceTooltipWrapper} empty-balance-tooltip-wrapper`}
         position="bottom left"
         content={React.cloneElement(children, { className: `${children.props.className} ${styles.emptyBalanceTooltipChild} disabled` })}
       >

diff --git a/src/components/screens/wallet/overview/balanceInfo/index.js b/src/components/screens/wallet/overview/balanceInfo/index.js
@@ -1,103 +1,47 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
-
 import { tokenMap } from '@constants';
 import { fromRawLsk } from '@utils/lsk';
-import { PrimaryButton, SecondaryButton, TertiaryButton } from '@toolbox/buttons';
 import Box from '@toolbox/box';
 import BoxContent from '@toolbox/box/content';
-import DialogLink from '@toolbox/dialog/link';
 import LiskAmount from '@shared/liskAmount';
 import DiscreetMode from '@shared/discreetMode';
 import Converter from '@shared/converter';
-import SignInTooltipWrapper from '@shared/signInTooltipWrapper';
-import { selectAccountBalance } from '@store/selectors';
 import LockedBalanceLink from './unlocking';
-import EmptyBalanceTooltipWrapper from './emptyBalanceTooltipWrapper';
+import ActionBar from './actionBar';
 import styles from './balanceInfo.css';
 
 const BalanceInfo = ({
   t, activeToken, balance, isWalletRoute, address, username,
-}) => {
-  const hostBalance = useSelector(selectAccountBalance);
-  const disableButtons = hostBalance === 0;
-  const vote = useSelector(state => state.voting[address]);
-  const initialValue = isWalletRoute
-    ? {}
-    : { recipient: address };
-
-  const voteButtonTitle = vote ? t('Edit vote') : t('Add to votes');
-
-  const sendTitle = isWalletRoute
-    ? t('Send {{token}}', { token: activeToken })
-    : t('Send {{token}} here', { token: activeToken });
-
-  return (
-    <Box className={`${styles.wrapper}`}>
-      <BoxContent className={styles.content}>
-        <h2 className={styles.title}>{t('Balance')}</h2>
-        <div className={styles.valuesRow}>
-          <DiscreetMode shouldEvaluateForOtherAccounts>
-            <div className={`${styles.cryptoValue} balance-value`}>
-              <LiskAmount val={balance} token={activeToken} />
-              <Converter
-                className={styles.fiatValue}
-                value={fromRawLsk(balance)}
-                error=""
-              />
-
-            </div>
-            {
-              activeToken === tokenMap.LSK.key && isWalletRoute ? (
-                <LockedBalanceLink activeToken={activeToken} isWalletRoute={isWalletRoute} />
-              ) : null
-            }
-          </DiscreetMode>
-        </div>
-        <SignInTooltipWrapper position="bottom">
-          <EmptyBalanceTooltipWrapper hostBalance={hostBalance}>
-            <div className={styles.actionRow}>
-              {
-                username ? (
-                  <DialogLink component="editVote" className={`${styles.button} add-vote`}>
-                    <SecondaryButton
-                      className={`${styles.voteButton} open-add-vote-dialog`}
-                      size="m"
-                      disabled={disableButtons}
-                    >
-                      {voteButtonTitle}
-                    </SecondaryButton>
-                  </DialogLink>
-                ) : (
-                  <DialogLink
-                    className={`${styles.registerDelegate} register-delegate`}
-                    component="registerDelegate"
-                  >
-                    <TertiaryButton
-                      size="m"
-                      disabled={disableButtons}
-                    >
-                      {t('Register delegate')}
-                    </TertiaryButton>
-                  </DialogLink>
-                )
-              }
-              <DialogLink component="send" className={`${styles.button} tx-send-bt`} data={initialValue}>
-                <PrimaryButton
-                  className={`${styles.sendButton} ${styles[activeToken]} open-send-dialog`}
-                  size="m"
-                  disabled={disableButtons}
-                >
-                  {sendTitle}
-                </PrimaryButton>
-              </DialogLink>
-            </div>
-          </EmptyBalanceTooltipWrapper>
-        </SignInTooltipWrapper>
-      </BoxContent>
-    </Box>
-  );
-};
+}) => (
+  <Box className={`${styles.wrapper}`}>
+    <BoxContent className={styles.content}>
+      <h2 className={styles.title}>{t('Balance')}</h2>
+      <div className={styles.valuesRow}>
+        <DiscreetMode shouldEvaluateForOtherAccounts>
+          <div className={`${styles.cryptoValue} balance-value`}>
+            <LiskAmount val={balance} token={activeToken} />
+            <Converter
+              className={styles.fiatValue}
+              value={fromRawLsk(balance)}
+              error=""
+            />
+          </div>
+          {
+            activeToken === tokenMap.LSK.key && isWalletRoute ? (
+              <LockedBalanceLink activeToken={activeToken} isWalletRoute={isWalletRoute} />
+            ) : null
+          }
+        </DiscreetMode>
+      </div>
+      <ActionBar
+        address={address}
+        username={username}
+        isWalletRoute={isWalletRoute}
+        activeToken={activeToken}
+      />
+    </BoxContent>
+  </Box>
+);
 
 export default withTranslation()(BalanceInfo);
diff --git a/src/store/selectors.js b/src/store/selectors.js
@@ -1,8 +1,10 @@
 const selectAccount = state => state.account;
 const selectActiveToken = state => state.settings.token.active;
 const selectAddress = state => state.account.info[state.settings.token.active].address;
-const selectLSKAddress = state => state.account.info.LSK.address;
-const selectBTCAddress = state => state.account.info.BTC.address;
+const selectLSKAddress = state =>
+  (state.account.info ? state.account.info.LSK.summary.address : undefined);
+const selectBTCAddress = state =>
+  (state.account.info ? state.account.info.BTC.summary.address : undefined);
 const selectPublicKey = state => state.account.info[state.settings.token.active].publicKey;
 const selectTransactions = state => state.transactions;
 const selectActiveTokenAccount = state => state.account.info[state.settings.token.active];