Merge pull request #1996 from oasisprotocol/lw/delegable-amount

Show available amount next to delegation input
oasisprotocol · Jul 9, 2024 · bd1a4aa · bd1a4aa
2 parents e9a3aa4 + effa544
commit bd1a4aa
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 23 deletions.
diff --git a/.changelog/1996.trivial.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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?"