From 1b48b66f2e370f96650f13653be78d74d56798e5 Mon Sep 17 00:00:00 2001
From: Joseph Lee <joeylee0925@gmail.com>
Date: Mon, 8 Feb 2021 13:33:40 -0500
Subject: [PATCH] Merge pull request #54 from
 AudiusProject/jowlee-decrease-delegation-bug

Disable decrease delegation if already pending
---
 .../src/components/Delegate/Delegate.tsx           |  9 +++++++--
 .../src/components/ManageService/ManageService.tsx |  4 ++--
 .../protocol-dashboard/src/store/account/hooks.ts  | 14 +++++++++++++-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/protocol-dashboard/src/components/Delegate/Delegate.tsx b/packages/protocol-dashboard/src/components/Delegate/Delegate.tsx
index 4aba9c3959e..2345d90637f 100644
--- a/packages/protocol-dashboard/src/components/Delegate/Delegate.tsx
+++ b/packages/protocol-dashboard/src/components/Delegate/Delegate.tsx
@@ -10,8 +10,9 @@ import Button, { ButtonType } from 'components/Button'
 import { IconArrowWhite } from '@audius/stems'
 import { useModalControls } from 'utils/hooks'
 import UpdateDelegationModal from 'components/UpdateDelegationModal'
-import { Address } from 'types'
+import { Address, Status } from 'types'
 import { formatWei, formatShortAud } from 'utils/format'
+import { useHasPendingDecreaseDelegationTx } from 'store/account/hooks'
 
 const messages = {
   title: 'Manage Delegation',
@@ -106,6 +107,10 @@ const DelegateSection: React.FC<DelegateSectionProps> = ({
   wallet,
   delegates
 }: DelegateSectionProps) => {
+  const useHasPendingDecrease = useHasPendingDecreaseDelegationTx()
+  const isDecreaseDelegationDisabled =
+    useHasPendingDecrease.status !== Status.Success ||
+    useHasPendingDecrease.hasPendingDecreaseTx
   return (
     <Paper className={clsx(styles.container, { [className!]: !!className })}>
       <div className={styles.title}>{messages.title} </div>
@@ -131,7 +136,7 @@ const DelegateSection: React.FC<DelegateSectionProps> = ({
           <DecreaseDelegation
             wallet={wallet}
             delegates={delegates}
-            isDisabled={false}
+            isDisabled={isDecreaseDelegationDisabled}
             className={styles.decreaseBtn}
           />
         </div>
diff --git a/packages/protocol-dashboard/src/components/ManageService/ManageService.tsx b/packages/protocol-dashboard/src/components/ManageService/ManageService.tsx
index 943c7e1d61f..a0e6bfd95d8 100644
--- a/packages/protocol-dashboard/src/components/ManageService/ManageService.tsx
+++ b/packages/protocol-dashboard/src/components/ManageService/ManageService.tsx
@@ -10,7 +10,7 @@ import TransactionStatus from 'components/TransactionStatus'
 import {
   useAccount,
   useAccountUser,
-  useHasPendingDecreaseTx
+  useHasPendingDecreaseStakeTx
 } from 'store/account/hooks'
 import { usePendingClaim } from 'store/cache/claims/hooks'
 import { Address, Status, Operator } from 'types'
@@ -220,7 +220,7 @@ const ManageService: React.FC<ManageServiceProps> = (
   const isDelegator =
     userStatus === Status.Success && 'delegates' in accountUser
 
-  const hasPendingDecreaseTx = useHasPendingDecreaseTx()
+  const hasPendingDecreaseTx = useHasPendingDecreaseStakeTx()
   let increaseStakeDisabled = !isServiceProvider
   const decreaseStakeDisabled =
     !isServiceProvider ||
diff --git a/packages/protocol-dashboard/src/store/account/hooks.ts b/packages/protocol-dashboard/src/store/account/hooks.ts
index 784176efcc3..ff29dc7ce06 100644
--- a/packages/protocol-dashboard/src/store/account/hooks.ts
+++ b/packages/protocol-dashboard/src/store/account/hooks.ts
@@ -171,7 +171,7 @@ export const usePendingTransactions = () => {
   return pendingTransactions
 }
 
-export const useHasPendingDecreaseTx = () => {
+export const useHasPendingDecreaseStakeTx = () => {
   const pendingTransactions = usePendingTransactions()
   if (pendingTransactions.status === Status.Success) {
     const hasPendingDecreaseTx =
@@ -182,3 +182,15 @@ export const useHasPendingDecreaseTx = () => {
   }
   return { status: Status.Loading, hasPendingDecreaseTx: true }
 }
+
+export const useHasPendingDecreaseDelegationTx = () => {
+  const pendingTransactions = usePendingTransactions()
+  if (pendingTransactions.status === Status.Success) {
+    const hasPendingDecreaseTx =
+      pendingTransactions.transactions?.some(tx => {
+        return tx.name === PendingTransactionName.Undelegate
+      }) ?? false
+    return { status: Status.Success, hasPendingDecreaseTx }
+  }
+  return { status: Status.Loading, hasPendingDecreaseTx: true }
+}