From e6d8e3ad2bbdcb272658e678cf661c7a05909459 Mon Sep 17 00:00:00 2001
From: Tom Beynon <tom@tombeynon.co.uk>
Date: Wed, 2 Mar 2022 02:10:07 +0000
Subject: [PATCH] Improve REStake UX

---
 src/components/DelegateForm.js |  6 +---
 src/components/Delegations.js  | 52 +++++++++++++++-------------------
 src/components/Validators.js   |  2 +-
 3 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/src/components/DelegateForm.js b/src/components/DelegateForm.js
index 7ce2cd78..a431652d 100644
--- a/src/components/DelegateForm.js
+++ b/src/components/DelegateForm.js
@@ -96,11 +96,7 @@ class DelegateForm extends React.Component {
   actionText(){
     if(this.props.redelegate) return 'Redelegate'
     if(this.props.undelegate) return 'Undelegate'
-    if(this.props.validator){
-      return 'Delegate'
-    }else{
-      return 'Add Validator'
-    }
+    return 'Delegate'
   }
 
   denom(){
diff --git a/src/components/Delegations.js b/src/components/Delegations.js
index cc82d748..3cdc2373 100644
--- a/src/components/Delegations.js
+++ b/src/components/Delegations.js
@@ -103,7 +103,7 @@ class Delegations extends React.Component {
     this.props.restClient.getGrants(this.props.network.data.testaddress, this.props.address)
       .then(
         (result) => { }, (error) => {
-          if (error.response.status === 501) {
+          if (error.response && error.response.status === 501) {
             this.setState({ authzMissing: true });
           }
         })
@@ -227,34 +227,31 @@ class Delegations extends React.Component {
               stargateClient={this.props.stargateClient}
               onDelegate={this.onClaimRewards}>{validator.description.moniker}</Delegate>
           </td>
-          <td className="d-none d-sm-table-cell text-center">{operator ? <CheckCircle className="text-success" /> : <XCircle className="opacity-50" />}</td>
+          <td className="text-center">
+            {operator ? this.restakePossible() ? (
+              this.grantsValid(operator) ? (
+                <RevokeRestake
+                  size="sm" variant="outline-danger"
+                  address={this.props.address}
+                  operator={operator}
+                  stargateClient={this.props.stargateClient}
+                  onRevoke={this.onRevoke}
+                  setError={this.setError} />
+              ) : (
+                <GrantRestake
+                  size="sm" variant="outline-success"
+                  address={this.props.address}
+                  operator={operator}
+                  stargateClient={this.props.stargateClient}
+                  onGrant={this.onGrant}
+                  setError={this.setError} />
+              )
+            ) : <CheckCircle className="text-success" /> : <XCircle className="opacity-50" />}
+          </td>
           <td className="d-none d-lg-table-cell">{validator.commission.commission_rates.rate * 100}%</td>
           <td className="d-none d-lg-table-cell"></td>
           <td className="d-none d-sm-table-cell"><Coins coins={item.balance} /></td>
           <td className="d-none d-sm-table-cell">{rewards && rewards.reward.map(el => <Coins key={el.denom} coins={el} />)}</td>
-          {this.restakePossible() && (
-            <td>
-              {operator && (
-                this.grantsValid(operator) ? (
-                  <RevokeRestake
-                    size="sm" variant="outline-danger"
-                    address={this.props.address}
-                    operator={operator}
-                    stargateClient={this.props.stargateClient}
-                    onRevoke={this.onRevoke}
-                    setError={this.setError} />
-                ) : (
-                  <GrantRestake
-                    size="sm" variant="outline-success"
-                    address={this.props.address}
-                    operator={operator}
-                    stargateClient={this.props.stargateClient}
-                    onGrant={this.onGrant}
-                    setError={this.setError} />
-                )
-              )}
-            </td>
-          )}
           <td>
             <div className="d-grid gap-2 d-md-flex justify-content-end">
               {!this.state.validatorLoading[validatorAddress]
@@ -390,14 +387,11 @@ class Delegations extends React.Component {
             <thead>
               <tr>
                 <th colSpan={2}>Validator</th>
-                <th className="d-none d-sm-table-cell text-center">Operator</th>
+                <th className="d-none d-sm-table-cell text-center">REStake</th>
                 <th className="d-none d-lg-table-cell">Commission</th>
                 <th className="d-none d-lg-table-cell">APY</th>
                 <th className="d-none d-sm-table-cell">Delegation</th>
                 <th className="d-none d-sm-table-cell">Rewards</th>
-                {this.restakePossible() &&
-                <th>REStake</th>
-                }
                 <th width={110}></th>
               </tr>
             </thead>
diff --git a/src/components/Validators.js b/src/components/Validators.js
index 623aed5b..fdd137c3 100644
--- a/src/components/Validators.js
+++ b/src/components/Validators.js
@@ -81,7 +81,7 @@ function Validators(props) {
           <tbody>
             <tr>
               <th>Validator</th>
-              <th className="text-center">Operator</th>
+              <th className="text-center">REStake</th>
               <th></th>
             </tr>
             {filteredOperators.map(([validator_address, item], i) => renderItem(item, true))}