feat(refactor): Simplify bond buttons, unify "Unstake" term for nomin…

…ators and pools (#2467)

packages/app/src/library/Headers/Connect.tsx

@@ -4,18 +4,18 @@
 import { faPlug, faWallet } from '@fortawesome/free-solid-svg-icons'
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useTranslation } from 'react-i18next'
-import { ButtonText } from 'ui-buttons'
+import { ButtonText, MultiButton } from 'ui-buttons'
+import { ButtonRow } from 'ui-core/base'
 import { useOverlay } from 'ui-overlay'
-import { ConnectedAccount, HeadingWrapper } from './Wrappers'
 
 export const Connect = () => {
   const { t } = useTranslation('library')
   const { openModal } = useOverlay().modal
   const { accounts } = useImportedAccounts()
 
   return (
-    <HeadingWrapper>
-      <ConnectedAccount>
+    <ButtonRow>
+      <MultiButton marginLeft>
         {accounts.length ? (
           <>
             <ButtonText
@@ -48,7 +48,7 @@ export const Connect = () => {
             style={{ color: 'white', fontSize: '1.05rem' }}
           />
         )}
-      </ConnectedAccount>
-    </HeadingWrapper>
+      </MultiButton>
+    </ButtonRow>
   )
 }

packages/app/src/library/Headers/Connected.tsx

@@ -8,9 +8,9 @@ import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { useStaking } from 'contexts/Staking'
 import { useSyncing } from 'hooks/useSyncing'
 import { useTranslation } from 'react-i18next'
+import { ButtonRow } from 'ui-core/base'
 import DefaultAccount from '../Account/DefaultAccount'
 import PoolAccount from '../Account/PoolAccount'
-import { HeadingWrapper } from './Wrappers'
 
 export const Connected = () => {
   const { t } = useTranslation('library')
@@ -25,36 +25,36 @@ export const Connected = () => {
     activeAccount && (
       <>
         {/* Default account display / stash label if actively nominating. */}
-        <HeadingWrapper>
+        <ButtonRow xMargin>
           <DefaultAccount
             value={activeAccount}
             label={
               syncing ? undefined : isNominating() ? 'Nominator' : undefined
             }
             readOnly={!accountHasSigner(activeAccount)}
           />
-        </HeadingWrapper>
+        </ButtonRow>
 
         {/* Pool account display / hide if not in pool or if syncing. */}
         {activePool !== null && !syncing && (
-          <HeadingWrapper>
+          <ButtonRow xMargin>
             <PoolAccount
               label={t('pool')}
               pool={activePool}
               syncing={!Object.values(poolsMetaData).length}
             />
-          </HeadingWrapper>
+          </ButtonRow>
         )}
 
         {/* Proxy account display / hide if no proxy. */}
         {activeProxy && (
-          <HeadingWrapper>
+          <ButtonRow xMargin>
             <DefaultAccount
               value={activeProxy}
               label={t('proxy')}
               readOnly={!accountHasSigner(activeProxy)}
             />
-          </HeadingWrapper>
+          </ButtonRow>
         )}
       </>
     )

packages/app/src/library/Headers/Wrappers.ts

@@ -36,31 +36,6 @@ export const Wrapper = styled.div`
   }
 `
 
-export const ConnectedAccount = styled(motion.div)`
-  background: var(--accent-color-primary);
-  border-radius: 1.5rem;
-  display: flex;
-  transition: transform var(--transition-duration);
-  padding: 0.1rem 0.75rem;
-
-  &:hover {
-    transform: scale(1.015);
-  }
-
-  > span {
-    border-right: 1px solid var(--text-color-invert);
-    opacity: 0.2;
-    margin: 0 0.4rem;
-  }
-`
-
-export const HeadingWrapper = styled.div`
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-end;
-  margin-left: 0.9rem;
-`
-
 export const Item = styled.button`
   background: var(--button-tab-background);
   border: 1px solid var(--border-primary-color);

packages/app/src/overlay/modals/LeavePool/index.tsx

@@ -21,7 +21,7 @@ import { StaticNote } from 'overlay/modals/Utils/StaticNote'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSubmitInvert } from 'ui-buttons'
-import { Padding, Warnings } from 'ui-core/modal'
+import { Padding, Title, Warnings } from 'ui-core/modal'
 import { useOverlay } from 'ui-overlay'
 import { planckToUnitBn, timeleftAsString } from 'utils'
 
@@ -98,7 +98,8 @@ export const LeavePool = ({
 
   return (
     <>
-      <Padding horizontalOnly>
+      <Padding>
+        <Title>{t('leavePool')}</Title>
         {warnings.length > 0 ? (
           <Warnings>
             {warnings.map((text, i) => (

packages/app/src/overlay/modals/ManagePool/Tasks.tsx

@@ -3,10 +3,8 @@
 
 import { Polkicon } from '@w3ux/react-polkicon'
 import { ellipsisFn } from '@w3ux/utils'
-import { useActiveAccounts } from 'contexts/ActiveAccounts'
 import { useApi } from 'contexts/Api'
 import { useActivePool } from 'contexts/Pools/ActivePool'
-import { useTransferOptions } from 'contexts/TransferOptions'
 import { Warning } from 'library/Form/Warning'
 import { CopyAddress } from 'library/ListItem/Labels/CopyAddress'
 import type { ForwardedRef } from 'react'
@@ -19,13 +17,8 @@ import type { TasksProps } from './types'
 export const Tasks = forwardRef(
   ({ setSection, setTask }: TasksProps, ref: ForwardedRef<HTMLDivElement>) => {
     const { t } = useTranslation('modals')
-    const { activeAccount } = useActiveAccounts()
-    const { getTransferOptions } = useTransferOptions()
     const { globalMaxCommission } = useApi().poolsConfig
-    const { activePool, isOwner, isBouncer, isMember, isDepositor } =
-      useActivePool()
-
-    const { active } = getTransferOptions(activeAccount).pool
+    const { activePool, isOwner, isBouncer } = useActivePool()
 
     const poolLocked = activePool?.bondedPool?.state === 'Blocked'
     const poolDestroying = activePool?.bondedPool?.state === 'Destroying'
@@ -169,19 +162,6 @@ export const Tasks = forwardRef(
                 </ButtonOption>
               </>
             )}
-            {isMember() && !isDepositor() && active?.isGreaterThan(0) && (
-              <ButtonOption
-                onClick={() => {
-                  setSection(1)
-                  setTask('leave_pool')
-                }}
-              >
-                <TaskInnerWrapper>
-                  <h3>{t('leavePool')}</h3>
-                  <p>{t('unbondFundsLeavePool')}</p>
-                </TaskInnerWrapper>
-              </ButtonOption>
-            )}
           </div>
         </div>
       </ContentWrapper>

packages/app/src/pages/Nominate/Active/ManageBond.tsx

@@ -1,28 +1,41 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { faLockOpen } from '@fortawesome/free-solid-svg-icons'
+import {
+  faBolt,
+  faMinus,
+  faPlus,
+  faSignOutAlt,
+} from '@fortawesome/free-solid-svg-icons'
 import { Odometer } from '@w3ux/react-odometer'
 import { minDecimalPlaces } from '@w3ux/utils'
 import type BigNumber from 'bignumber.js'
 import { useActiveAccounts } from 'contexts/ActiveAccounts'
+import { useApi } from 'contexts/Api'
 import { useBalances } from 'contexts/Balances'
+import { useBonded } from 'contexts/Bonded'
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
+import { useFastUnstake } from 'contexts/FastUnstake'
 import { useHelp } from 'contexts/Help'
 import { useNetwork } from 'contexts/Network'
 import { useStaking } from 'contexts/Staking'
 import { useTransferOptions } from 'contexts/TransferOptions'
+import { useNominationStatus } from 'hooks/useNominationStatus'
 import { useSyncing } from 'hooks/useSyncing'
 import { useUnstaking } from 'hooks/useUnstaking'
 import { BondedChart } from 'library/BarChart/BondedChart'
 import { useTranslation } from 'react-i18next'
-import { ButtonHelp, ButtonPrimary } from 'ui-buttons'
+import { ButtonHelp, ButtonPrimary, ButtonText, MultiButton } from 'ui-buttons'
 import { ButtonRow, CardHeader } from 'ui-core/base'
 import { useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
 
 export const ManageBond = () => {
   const { t } = useTranslation('pages')
+  const {
+    isReady,
+    networkMetrics: { fastUnstakeErasToCheckPerBlock },
+  } = useApi()
   const {
     networkData: {
       units,
@@ -33,18 +46,52 @@ export const ManageBond = () => {
   const { syncing } = useSyncing()
   const { inSetup } = useStaking()
   const { getLedger } = useBalances()
+  const { getBondedAccount } = useBonded()
   const { openModal } = useOverlay().modal
   const { isFastUnstaking } = useUnstaking()
+  const { activeAccount } = useActiveAccounts()
+  const { getFastUnstakeText } = useUnstaking()
   const { isReadOnlyAccount } = useImportedAccounts()
   const { getTransferOptions } = useTransferOptions()
-  const { activeAccount } = useActiveAccounts()
+  const { getNominationStatus } = useNominationStatus()
+  const { exposed, fastUnstakeStatus } = useFastUnstake()
+
+  const controller = getBondedAccount(activeAccount)
   const ledger = getLedger({ stash: activeAccount })
   const { active }: { active: BigNumber } = ledger
   const allTransferOptions = getTransferOptions(activeAccount)
 
   const { freeBalance } = allTransferOptions
-  const { totalUnlocking, totalUnlocked, totalUnlockChunks } =
-    allTransferOptions.nominate
+  const { totalUnlocking, totalUnlocked } = allTransferOptions.nominate
+  const nominationStatus = getNominationStatus(activeAccount, 'nominator')
+
+  // Determine whether to display fast unstake button or regular unstake button.
+  const unstakeButton =
+    fastUnstakeErasToCheckPerBlock > 0 &&
+    !nominationStatus.nominees.active.length &&
+    fastUnstakeStatus !== null &&
+    !exposed ? (
+      <ButtonPrimary
+        disabled={isReadOnlyAccount(controller)}
+        text={getFastUnstakeText()}
+        iconLeft={faBolt}
+        onClick={() => {
+          openModal({ key: 'ManageFastUnstake', size: 'sm' })
+        }}
+      />
+    ) : (
+      <ButtonPrimary
+        text={t('nominate.unstake')}
+        iconLeft={faSignOutAlt}
+        disabled={!isReady || isReadOnlyAccount(controller) || !activeAccount}
+        onClick={() => openModal({ key: 'Unstake', size: 'sm' })}
+      />
+    )
+
+  const unstakeDisabled =
+    inSetup() || syncing || isReadOnlyAccount(activeAccount)
+
+  const bondDisabled = unstakeDisabled || isFastUnstaking
 
   return (
     <>
@@ -64,57 +111,36 @@ export const ManageBond = () => {
           />
         </h2>
         <ButtonRow>
-          <ButtonPrimary
-            disabled={
-              inSetup() ||
-              syncing ||
-              isReadOnlyAccount(activeAccount) ||
-              isFastUnstaking
-            }
-            marginRight
-            onClick={() =>
-              openModal({
-                key: 'Bond',
-                options: { bondFor: 'nominator' },
-                size: 'sm',
-              })
-            }
-            text="+"
-          />
-          <ButtonPrimary
-            disabled={
-              inSetup() ||
-              syncing ||
-              isReadOnlyAccount(activeAccount) ||
-              isFastUnstaking
-            }
-            marginRight
-            onClick={() =>
-              openModal({
-                key: 'Unbond',
-                options: { bondFor: 'nominator' },
-                size: 'sm',
-              })
-            }
-            text="-"
-          />
-          <ButtonPrimary
-            disabled={syncing || inSetup() || isReadOnlyAccount(activeAccount)}
-            iconLeft={faLockOpen}
-            marginRight
-            onClick={() =>
-              openModal({
-                key: 'UnlockChunks',
-                options: {
-                  bondFor: 'nominator',
-                  disableWindowResize: true,
-                  disableScroll: true,
-                },
-                size: 'sm',
-              })
-            }
-            text={String(totalUnlockChunks ?? 0)}
-          />
+          <MultiButton marginRight disabled={bondDisabled}>
+            <ButtonText
+              disabled={bondDisabled}
+              marginRight
+              onClick={() =>
+                openModal({
+                  key: 'Bond',
+                  options: { bondFor: 'nominator' },
+                  size: 'sm',
+                })
+              }
+              iconLeft={faPlus}
+              text=""
+            />
+            <span />
+            <ButtonText
+              disabled={bondDisabled}
+              marginRight
+              onClick={() =>
+                openModal({
+                  key: 'Unbond',
+                  options: { bondFor: 'nominator' },
+                  size: 'sm',
+                })
+              }
+              iconLeft={faMinus}
+              text=""
+            />
+          </MultiButton>
+          {!unstakeDisabled && unstakeButton}
         </ButtonRow>
       </CardHeader>
       <BondedChart