Merge pull request #13 from OriginProtocol/franck/fix_card

Fix bug in withdrawal card
OriginProtocol · Dec 29, 2022 · dfa1fb0 · dfa1fb0
2 parents 205cf05 + 11de65d
commit dfa1fb0
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 27 deletions.
diff --git a/token-transfer-client/src/components/BonusCard.js b/token-transfer-client/src/components/BonusCard.js
@@ -42,7 +42,7 @@ const BonusCard = ({ onDisplayBonusModal }) => {
         <div className="col-12 col-md-6">
           <h2>Bonus Tokens</h2>
           {Object.keys(data.totals.granted).map(currency => {
-            <>
+            ;<>
               <div className="mt-3 mb-2">
                 <div>Earned</div>
                 <strong style={{ fontSize: '24px' }}>
@@ -54,7 +54,9 @@ const BonusCard = ({ onDisplayBonusModal }) => {
                 <div>Locked Up</div>
                 <strong style={{ fontSize: '24px' }}>
                   {Number(
-                    data.totals.locked[currency].plus(data.totals.nextVestLocked[currency])
+                    data.totals.locked[currency].plus(
+                      data.totals.nextVestLocked[currency]
+                    )
                   ).toLocaleString()}
                 </strong>{' '}
                 <span className="ml-1 ogn">{currency}</span>

diff --git a/token-transfer-client/src/components/WithdrawModal.js b/token-transfer-client/src/components/WithdrawModal.js
@@ -377,14 +377,16 @@ class WithdrawModal extends Component {
         <form onSubmit={this.handleFormSubmit}>
           <div className="row">
             <div
-              className={`col-12${this.context.config.otcRequestEnabled ? ' col-sm-6' : ''
-                }`}
+              className={`col-12${
+                this.context.config.otcRequestEnabled ? ' col-sm-6' : ''
+              }`}
             >
               <div className="form-group">
                 <label htmlFor="amount">Amount of Tokens</label>
                 <div
-                  className={`input-group ${this.state.amountError ? 'is-invalid' : ''
-                    }`}
+                  className={`input-group ${
+                    this.state.amountError ? 'is-invalid' : ''
+                  }`}
                 >
                   <input {...input('amount')} type="number" />
                   <div className="input-group-append">
@@ -400,7 +402,7 @@ class WithdrawModal extends Component {
                 </div>
               </div>
               {this.context.accounts.length > 0 &&
-                !this.state.modalAddAccount ? (
+              !this.state.modalAddAccount ? (
                 <>
                   <div className="form-group">
                     <label htmlFor="address">Destination Account</label>

diff --git a/token-transfer-client/src/components/WithdrawalHistoryCard.js b/token-transfer-client/src/components/WithdrawalHistoryCard.js
@@ -18,10 +18,10 @@ const WithdrawalHistoryCard = () => {
               {data.config.isLocked
                 ? 0
                 : Number(
-                  data.totals.vested[currency].minus(
-                    data.totals.withdrawn[currency]
-                  )
-                ).toLocaleString()}
+                    data.totals.vested[currency].minus(
+                      data.totals.withdrawn[currency]
+                    )
+                  ).toLocaleString()}
             </strong>{' '}
             <span
               className="ogn"

diff --git a/token-transfer-client/src/components/WithdrawalSummaryCard.js b/token-transfer-client/src/components/WithdrawalSummaryCard.js
@@ -35,7 +35,11 @@ const WithdrawalSummaryCard = ({ onDisplayWithdrawModal }) => {
               <div className="col text-muted">Vested To Date</div>
               <div className="col text-right">
                 <strong>
-                  {Number(data.totals.vested[currency]).toLocaleString()}{' '}
+                  {Number(
+                    data.totals.vested[currency].plus(
+                      data.totals.unlockedEarnings[currency]
+                    )
+                  ).toLocaleString()}{' '}
                 </strong>
                 <span className="ogn">{currency}</span>
               </div>
@@ -59,9 +63,9 @@ const WithdrawalSummaryCard = ({ onDisplayWithdrawModal }) => {
               <div className="col text-right">
                 <strong>
                   {Number(
-                    data.totals.vested[currency].minus(
-                      data.totals.withdrawn[currency]
-                    )
+                    data.totals.vested[currency]
+                      .plus(data.totals.unlockedEarnings[currency])
+                      .minus(data.totals.withdrawn[currency])
                   ).toLocaleString()}{' '}
                 </strong>
                 <span className="ogn">{currency}</span>
@@ -83,8 +87,9 @@ const WithdrawalSummaryCard = ({ onDisplayWithdrawModal }) => {
               <div className="row mt-5 mb-2">
                 <div className="col text-center">
                   <button
-                    className={`btn btn-lg btn-outline-${theme === 'dark' ? 'light' : 'primary'
-                      }`}
+                    className={`btn btn-lg btn-outline-${
+                      theme === 'dark' ? 'light' : 'primary'
+                    }`}
                     onClick={() => onDisplayWithdrawModal(currency)}
                   >
                     Withdraw {currency}

diff --git a/token-transfer-client/src/components/pages/WithdrawalHistory.js b/token-transfer-client/src/components/pages/WithdrawalHistory.js
@@ -134,11 +134,11 @@ const WithdrawalHistory = ({ history }) => {
                           enums.TransferStatuses.WaitingConfirmation,
                           enums.TransferStatuses.Processing
                         ].includes(transfer.status) && (
-                            <>
-                              <div className="status-circle bg-orange mr-2"></div>
-                              Processing
-                            </>
-                          )}
+                          <>
+                            <div className="status-circle bg-orange mr-2"></div>
+                            Processing
+                          </>
+                        )}
                         {transfer.status === enums.TransferStatuses.Paused && (
                           <>
                             <div className="status-circle bg-red mr-2"></div>
@@ -161,11 +161,11 @@ const WithdrawalHistory = ({ history }) => {
                           enums.TransferStatuses.Expired,
                           enums.TransferStatuses.Cancelled
                         ].includes(transfer.status) && (
-                            <>
-                              <div className="status-circle bg-red mr-2"></div>
-                              {transfer.status}
-                            </>
-                          )}
+                          <>
+                            <div className="status-circle bg-red mr-2"></div>
+                            {transfer.status}
+                          </>
+                        )}
                       </td>
                     </tr>
                   ))