Merge pull request #1915 from oasisprotocol/lw/show-debondable

Show debondable amount next to debonding input

.changelog/1915.bugfix.md

@@ -0,0 +1 @@
+Show debondable amount next to debonding input

src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap

@@ -15,7 +15,26 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c8 {
+.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;
+}
+
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -27,6 +46,7 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  height: 50px;
 }
 
 .c1 {
@@ -44,7 +64,7 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
   padding-top: 12px;
 }
 
-.c9 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -60,7 +80,7 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
   height: 100%;
 }
 
-.c11 {
+.c13 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -70,7 +90,7 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
   width: 24px;
 }
 
-.c7 {
+.c9 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -87,7 +107,13 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
   font-weight: 600;
 }
 
-.c10 {
+.c8 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: bolder;
+}
+
+.c12 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -122,51 +148,51 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c10:hover {
+.c12:hover {
   box-shadow: 0px 0px 0px 2px #0500e2;
 }
 
-.c10:focus {
+.c12:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c10:focus > circle,
-.c10:focus > ellipse,
-.c10:focus > line,
-.c10:focus > path,
-.c10:focus > polygon,
-.c10:focus > polyline,
-.c10:focus > rect {
+.c12:focus > circle,
+.c12:focus > ellipse,
+.c12:focus > line,
+.c12:focus > path,
+.c12:focus > polygon,
+.c12:focus > polyline,
+.c12:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c10:focus::-moz-focus-inner {
+.c12:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c10:focus:not(:focus-visible) {
+.c12:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c10:focus:not(:focus-visible) > circle,
-.c10:focus:not(:focus-visible) > ellipse,
-.c10:focus:not(:focus-visible) > line,
-.c10:focus:not(:focus-visible) > path,
-.c10:focus:not(:focus-visible) > polygon,
-.c10:focus:not(:focus-visible) > polyline,
-.c10:focus:not(:focus-visible) > rect {
+.c12:focus:not(:focus-visible) > circle,
+.c12:focus:not(:focus-visible) > ellipse,
+.c12:focus:not(:focus-visible) > line,
+.c12:focus:not(:focus-visible) > path,
+.c12:focus:not(:focus-visible) > polygon,
+.c12:focus:not(:focus-visible) > polyline,
+.c12:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c10:focus:not(:focus-visible)::-moz-focus-inner {
+.c12:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c12 {
+.c14 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -198,47 +224,47 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c12:hover {
+.c14:hover {
   box-shadow: 0px 0px 0px 2px #0500e2;
 }
 
-.c12:focus {
+.c14:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c12:focus > circle,
-.c12:focus > ellipse,
-.c12:focus > line,
-.c12:focus > path,
-.c12:focus > polygon,
-.c12:focus > polyline,
-.c12:focus > rect {
+.c14:focus > circle,
+.c14:focus > ellipse,
+.c14:focus > line,
+.c14:focus > path,
+.c14:focus > polygon,
+.c14:focus > polyline,
+.c14:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c12:focus::-moz-focus-inner {
+.c14:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c12:focus:not(:focus-visible) {
+.c14:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c12:focus:not(:focus-visible) > circle,
-.c12:focus:not(:focus-visible) > ellipse,
-.c12:focus:not(:focus-visible) > line,
-.c12:focus:not(:focus-visible) > path,
-.c12:focus:not(:focus-visible) > polygon,
-.c12:focus:not(:focus-visible) > polyline,
-.c12:focus:not(:focus-visible) > rect {
+.c14:focus:not(:focus-visible) > circle,
+.c14:focus:not(:focus-visible) > ellipse,
+.c14:focus:not(:focus-visible) > line,
+.c14:focus:not(:focus-visible) > path,
+.c14:focus:not(:focus-visible) > polygon,
+.c14:focus:not(:focus-visible) > polyline,
+.c14:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c12:focus:not(:focus-visible)::-moz-focus-inner {
+.c14:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
@@ -366,20 +392,26 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
 
 }
 
+@media only screen and (max-width:768px) {
+  .c7 {
+    margin-top: 3px;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c1 {
     padding-top: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c11 {
+  .c13 {
     width: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c7 {
+  .c9 {
     height: 12px;
   }
 }
@@ -420,31 +452,61 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
             value=""
           />
         </div>
+        <div
+          class="c7"
+        >
+          <span
+            class="c8"
+          >
+            <span>
+              account.reclaimEscrow.reclaimableAmount
+               
+            </span>
+            <span>
+              <div
+                class="c2"
+                style="display: inline-flex; white-space: nowrap;"
+              >
+                0.000001
+              </div>
+              <span
+                class="c5"
+              >
+                <span
+                  class="notranslate"
+                  translate="no"
+                >
+                   
+                </span>
+              </span>
+            </span>
+          </span>
+        </div>
       </div>
       <div
-        class="c7"
+        class="c9"
       />
       <div
-        class="c8"
+        class="c10"
       >
         <div
-          class="c9"
+          class="c11"
         >
           <button
-            class="c10"
+            class="c12"
             type="submit"
           >
             account.reclaimEscrow.reclaim
           </button>
         </div>
         <div
-          class="c11"
+          class="c13"
         />
         <div
-          class="c9"
+          class="c11"
         >
           <button
-            class="c12"
+            class="c14"
             type="button"
           >
             account.reclaimEscrow.reclaimAll

src/app/components/ReclaimEscrowForm/index.tsx

@@ -19,6 +19,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { StringifiedBigInt } from 'types/StringifiedBigInt'
 import { TransactionStatus } from '../TransactionStatus'
 import { selectTicker } from '../../state/network/selectors'
+import { AmountFormatter } from '../AmountFormatter'
 
 interface Props {
   /** Currently delegated amount */
@@ -109,8 +110,14 @@ export const ReclaimEscrowForm = memo((props: Props) => {
             }
             reverse
           />
+          <Box align="end" margin={{ top: 'xsmall' }}>
+            <Text weight="bolder" size="small">
+              <span>{t('account.reclaimEscrow.reclaimableAmount', 'Available:')} </span>
+              <AmountFormatter amount={props.maxAmount} smallTicker />
+            </Text>
+          </Box>
         </Box>
-        <Box direction="row" gap="medium">
+        <Box direction="row" gap="medium" height="50px">
           <Box fill={isMobile}>
             <Button fill label={t('account.reclaimEscrow.reclaim', 'Reclaim')} type="submit" primary />
           </Box>

src/locales/en/translation.json

@@ -17,7 +17,8 @@
     "reclaimEscrow": {
       "convertedToShares": "Corresponding number of gigashares: {{shares}}",
       "reclaim": "Reclaim",
-      "reclaimAll": "Reclaim all"
+      "reclaimAll": "Reclaim all",
+      "reclaimableAmount": "Available:"
     },
     "sendTransaction": {
       "confirmSendingToValidator": {