From effa5445d47a7a54d935f0c408e7141fa18b88b6 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Sat, 6 Jul 2024 04:51:21 +0200
Subject: [PATCH] Show available amount next to delegation input

---
 .changelog/1996.trivial.md                    |   1 +
 .../__snapshots__/index.test.tsx.snap         | 118 ++++++++++++++----
 .../AddEscrowForm/__tests__/index.test.tsx    |   7 +-
 src/app/components/AddEscrowForm/index.tsx    |  16 ++-
 .../Features/ValidatorList/ValidatorItem.tsx  |   3 +
 .../Features/ValidatorList/index.tsx          |   3 +
 src/locales/en/translation.json               |   1 +
 7 files changed, 126 insertions(+), 23 deletions(-)
 create mode 100644 .changelog/1996.trivial.md

diff --git a/.changelog/1996.trivial.md b/.changelog/1996.trivial.md
new file mode 100644
index 0000000000..ee1e644acf
--- /dev/null
+++ b/.changelog/1996.trivial.md
@@ -0,0 +1 @@
+Show available amount next to delegation input
diff --git a/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
index b3c9c42518..ab6af1ec0f 100644
--- a/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
@@ -33,6 +33,39 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
 }
 
 .c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  margin-top: 6px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c10 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -50,6 +83,12 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
 }
 
 .c8 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: bolder;
+}
+
+.c11 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -78,47 +117,47 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c8:hover {
+.c11:hover {
   box-shadow: 0px 0px 0px 2px #0500e2;
 }
 
-.c8:focus {
+.c11:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c8:focus > circle,
-.c8:focus > ellipse,
-.c8:focus > line,
-.c8:focus > path,
-.c8:focus > polygon,
-.c8:focus > polyline,
-.c8:focus > rect {
+.c11:focus > circle,
+.c11:focus > ellipse,
+.c11:focus > line,
+.c11:focus > path,
+.c11:focus > polygon,
+.c11:focus > polyline,
+.c11:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c8:focus::-moz-focus-inner {
+.c11:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c8:focus:not(:focus-visible) {
+.c11:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c8:focus:not(:focus-visible) > circle,
-.c8:focus:not(:focus-visible) > ellipse,
-.c8:focus:not(:focus-visible) > line,
-.c8:focus:not(:focus-visible) > path,
-.c8:focus:not(:focus-visible) > polygon,
-.c8:focus:not(:focus-visible) > polyline,
-.c8:focus:not(:focus-visible) > rect {
+.c11:focus:not(:focus-visible) > circle,
+.c11:focus:not(:focus-visible) > ellipse,
+.c11:focus:not(:focus-visible) > line,
+.c11:focus:not(:focus-visible) > path,
+.c11:focus:not(:focus-visible) > polygon,
+.c11:focus:not(:focus-visible) > polyline,
+.c11:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c8:focus:not(:focus-visible)::-moz-focus-inner {
+.c11:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
@@ -248,6 +287,12 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
 
 @media only screen and (max-width:768px) {
   .c7 {
+    margin-top: 3px;
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c10 {
     width: 6px;
   }
 }
@@ -287,12 +332,43 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
             value=""
           />
         </div>
+        <div
+          class="c7"
+        >
+          <span
+            class="c8"
+          >
+            <span>
+              account.addEscrow.availableAmount
+               
+            </span>
+            <span>
+              <div
+                class="c9"
+                style="display: inline-flex; white-space: nowrap;"
+              >
+                456.542341274
+              </div>
+              <span
+                class="c5"
+              >
+                <span
+                  class="notranslate"
+                  translate="no"
+                >
+                   
+                </span>
+              </span>
+            </span>
+          </span>
+        </div>
       </div>
       <div
-        class="c7"
+        class="c10"
       />
       <button
-        class="c8"
+        class="c11"
+        style="height: 48px;"
         type="submit"
       >
         account.addEscrow.delegate
diff --git a/src/app/components/AddEscrowForm/__tests__/index.test.tsx b/src/app/components/AddEscrowForm/__tests__/index.test.tsx
index 77cadb5fd7..e3b72a4296 100644
--- a/src/app/components/AddEscrowForm/__tests__/index.test.tsx
+++ b/src/app/components/AddEscrowForm/__tests__/index.test.tsx
@@ -15,7 +15,12 @@ const renderComponent = (store: any, address: string, validatorStatus: Validator
     <Provider store={store}>
       <ThemeProvider>
         <ModalProvider>
-          <AddEscrowForm validatorAddress={address} validatorStatus={validatorStatus} validatorRank={21} />
+          <AddEscrowForm
+            validatorAddress={address}
+            validatorStatus={validatorStatus}
+            validatorRank={21}
+            accountAvailableBalance={456542341274n.toString()}
+          />
         </ModalProvider>
       </ThemeProvider>
     </Provider>,
diff --git a/src/app/components/AddEscrowForm/index.tsx b/src/app/components/AddEscrowForm/index.tsx
index bd8b153b8d..828eed95aa 100644
--- a/src/app/components/AddEscrowForm/index.tsx
+++ b/src/app/components/AddEscrowForm/index.tsx
@@ -21,11 +21,14 @@ import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { TransactionStatus } from '../TransactionStatus'
 import { usePreventChangeOnNumberInputScroll } from '../../lib/usePreventChangeOnNumberInputScroll'
+import { AmountFormatter } from '../AmountFormatter'
+import { StringifiedBigInt } from '../../../types/StringifiedBigInt'
 
 interface Props {
   validatorAddress: string
   validatorStatus: Validator['status']
   validatorRank: number
+  accountAvailableBalance: StringifiedBigInt | null
 }
 
 export const AddEscrowForm = memo((props: Props) => {
@@ -114,8 +117,19 @@ export const AddEscrowForm = memo((props: Props) => {
                 reverse
                 onWheel={onWheel}
               />
+              <Box align="end" margin={{ top: 'xsmall' }}>
+                <Text weight="bolder" size="small">
+                  <span>{t('account.addEscrow.availableAmount', 'Available:')} </span>
+                  <AmountFormatter amount={props.accountAvailableBalance} smallTicker />
+                </Text>
+              </Box>
             </Box>
-            <Button label={t('account.addEscrow.delegate', 'Delegate')} type="submit" primary />
+            <Button
+              label={t('account.addEscrow.delegate', 'Delegate')}
+              type="submit"
+              primary
+              style={{ height: 48 }}
+            />
           </Box>
           <TransactionStatus error={error} success={success} />
         </Form>
diff --git a/src/app/pages/StakingPage/Features/ValidatorList/ValidatorItem.tsx b/src/app/pages/StakingPage/Features/ValidatorList/ValidatorItem.tsx
index 063d37c570..4514a79829 100644
--- a/src/app/pages/StakingPage/Features/ValidatorList/ValidatorItem.tsx
+++ b/src/app/pages/StakingPage/Features/ValidatorList/ValidatorItem.tsx
@@ -4,10 +4,12 @@ import { Box } from 'grommet/es6/components/Box'
 import React from 'react'
 
 import { ValidatorInformations } from './ValidatorInformations'
+import { StringifiedBigInt } from '../../../../../types/StringifiedBigInt'
 
 interface ValidatorProps {
   data: Validator
   details: ValidatorDetails | null
+  accountAvailableBalance: StringifiedBigInt | null
   isAddressInWallet: boolean
 }
 export const ValidatorItem = (props: ValidatorProps) => {
@@ -24,6 +26,7 @@ export const ValidatorItem = (props: ValidatorProps) => {
             validatorAddress={validator.address}
             validatorStatus={validator.status}
             validatorRank={validator.rank}
+            accountAvailableBalance={props.accountAvailableBalance}
           />
         )}
       </Box>
diff --git a/src/app/pages/StakingPage/Features/ValidatorList/index.tsx b/src/app/pages/StakingPage/Features/ValidatorList/index.tsx
index 31b519e5cf..51586e8406 100644
--- a/src/app/pages/StakingPage/Features/ValidatorList/index.tsx
+++ b/src/app/pages/StakingPage/Features/ValidatorList/index.tsx
@@ -32,6 +32,7 @@ import { ValidatorItem } from './ValidatorItem'
 import { formatCommissionPercent } from 'app/lib/helpers'
 import { intlDateTimeFormat } from 'app/components/DateFormatter/intlDateTimeFormat'
 import { StakeSubnavigation } from '../../../AccountPage/Features/StakeSubnavigation'
+import { selectAccountAvailableBalance } from '../../../../state/account/selectors'
 
 interface Props {}
 
@@ -42,6 +43,7 @@ export const ValidatorList = memo((props: Props) => {
   const validatorsTimestamp = useSelector(selectValidatorsTimestamp)
   const updateValidatorsError = useSelector(selectUpdateValidatorsError)
   const isAddressInWallet = useSelector(selectIsAddressInWallet)
+  const accountAvailableBalance = useSelector(selectAccountAvailableBalance)
   const selectedAddress = useSelector(selectSelectedAddress)
   const validatorDetails = useSelector(selectValidatorDetails)
 
@@ -143,6 +145,7 @@ export const ValidatorList = memo((props: Props) => {
               <ValidatorItem
                 data={{} as any}
                 details={validatorDetails}
+                accountAvailableBalance={accountAvailableBalance}
                 isAddressInWallet={isAddressInWallet}
                 key={selectedAddress}
               />
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 2d174f9941..2f7cf19b84 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -1,6 +1,7 @@
 {
   "account": {
     "addEscrow": {
+      "availableAmount": "Available:",
       "confirmDelegatingToInactive": {
         "description": "Status of this validator is {{validatorStatus}}. Your delegation might not generate any rewards.",
         "title": "Are you sure you want to continue?"