Merge pull request #1857 from oasisprotocol/lw/ticker-input

Show ticker hint in inputs
oasisprotocol · Mar 27, 2024 · 4970403 · 4970403
2 parents 2b910da + 8a61bd7
commit 4970403
Show file tree

Hide file tree

Showing 8 changed files with 304 additions and 143 deletions.
diff --git a/.changelog/1857.trivial.md b/.changelog/1857.trivial.md
@@ -0,0 +1 @@
+Show ticker hint in inputs
diff --git a/internals/jest/setupTests.ts b/internals/jest/setupTests.ts
@@ -5,7 +5,7 @@ import 'react-app-polyfill/stable'
 // react-testing-library renders your components to document.body,
 // this adds jest-dom's custom assertions
 import '@testing-library/jest-dom'
-import 'jest-styled-components'
+import 'jest-styled-components' // Snapshot serializer
 
 // Init i18n for the tests needing it
 import 'locales/i18n'

diff --git a/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c5 {
+.c7 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -42,7 +42,14 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
   width: 12px;
 }
 
-.c6 {
+.c5 {
+  font-size: 12px;
+  line-height: 18px;
+  color: #a3a3a3;
+  font-weight: 600;
+}
+
+.c8 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -71,48 +78,48 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c6:hover {
+.c8:hover {
   box-shadow: 0px 0px 0px 2px #0092f6;
 }
 
-.c6:focus {
+.c8:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c6:focus > circle,
-.c6:focus > ellipse,
-.c6:focus > line,
-.c6:focus > path,
-.c6:focus > polygon,
-.c6:focus > polyline,
-.c6:focus > rect {
+.c8:focus > circle,
+.c8:focus > ellipse,
+.c8:focus > line,
+.c8:focus > path,
+.c8:focus > polygon,
+.c8:focus > polyline,
+.c8:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c6:focus::-moz-focus-inner {
+.c8:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c6:focus:not(:focus-visible) {
+.c8:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c6:focus:not(:focus-visible) > circle,.c6:focus:not(:focus-visible) > ellipse,
-.c6:focus:not(:focus-visible) > line,.c6:focus:not(:focus-visible) > path,
-.c6:focus:not(:focus-visible) > polygon,.c6:focus:not(:focus-visible) > polyline,
-.c6:focus:not(:focus-visible) > rect {
+.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 {
   outline: none;
   box-shadow: none;
 }
 
-.c6:focus:not(:focus-visible)::-moz-focus-inner {
+.c8:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c4 {
+.c6 {
   box-sizing: border-box;
   font-size: inherit;
   font-family: inherit;
@@ -126,51 +133,52 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
   margin: 0;
   border: 1px solid rgba(0,0,0,0.33);
   border-radius: 4px;
+  padding-right: 48px;
 }
 
-.c4:focus {
+.c6:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c4:focus > circle,
-.c4:focus > ellipse,
-.c4:focus > line,
-.c4:focus > path,
-.c4:focus > polygon,
-.c4:focus > polyline,
-.c4:focus > rect {
+.c6:focus > circle,
+.c6:focus > ellipse,
+.c6:focus > line,
+.c6:focus > path,
+.c6:focus > polygon,
+.c6:focus > polyline,
+.c6:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c4:focus::-moz-focus-inner {
+.c6:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c4::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: #AAAAAA;
 }
 
-.c4::-moz-placeholder {
+.c6::-moz-placeholder {
   color: #AAAAAA;
 }
 
-.c4:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: #AAAAAA;
 }
 
-.c4::-webkit-search-decoration {
+.c6::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c4::-moz-focus-inner {
+.c6::-moz-focus-inner {
   border: none;
   outline: none;
 }
 
-.c4:-moz-placeholder,
-.c4::-moz-placeholder {
+.c6:-moz-placeholder,
+.c6::-moz-placeholder {
   opacity: 1;
 }
 
@@ -179,6 +187,24 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
   width: 100%;
 }
 
+.c4 {
+  position: absolute;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-packjustify: center;
+  -webkit-justify: center;
+  -ms-flex-packjustify: center;
+  justify: center;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  pointer-events: none;
+  right: 12px;
+}
+
 .c0 {
   font-family: Rubik,sans-serif;
   font-size: 18px;
@@ -199,7 +225,7 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c5 {
+  .c7 {
     width: 6px;
   }
 }
@@ -218,9 +244,16 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
         <div
           class="c3"
         >
+          <div
+            class="c4"
+          >
+            <span
+              class="c5"
+            />
+          </div>
           <input
             autocomplete="off"
-            class="c4"
+            class="c6"
             data-testid="amount"
             id="amount-id"
             min="0"
@@ -234,10 +267,10 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c5"
+        class="c7"
       />
       <button
-        class="c6"
+        class="c8"
         type="submit"
       >
         account.addEscrow.delegate

diff --git a/src/app/components/AddEscrowForm/index.tsx b/src/app/components/AddEscrowForm/index.tsx
@@ -5,7 +5,7 @@
  */
 import { useModal } from 'app/components/Modal'
 import { parseRoseStringToBaseUnitString } from 'app/lib/helpers'
-import { selectMinStaking } from 'app/state/network/selectors'
+import { selectMinStaking, selectTicker } from 'app/state/network/selectors'
 import { Validator } from 'app/state/staking/types'
 import { transactionActions } from 'app/state/transaction'
 import { selectTransaction } from 'app/state/transaction/selectors'
@@ -37,6 +37,7 @@ export const AddEscrowForm = memo((props: Props) => {
   const [amount, setAmount] = useState('')
   const dispatch = useDispatch()
   const minStaking = useSelector(selectMinStaking)
+  const ticker = useSelector(selectTicker)
   const isMobile = useContext(ResponsiveContext) === 'small'
   const delegate = () => {
     dispatch(
@@ -104,6 +105,12 @@ export const AddEscrowForm = memo((props: Props) => {
                 value={amount}
                 onChange={event => setAmount(event.target.value)}
                 required
+                icon={
+                  <Text size="xsmall" weight={600} color="lightText">
+                    {ticker}
+                  </Text>
+                }
+                reverse
               />
             </Box>
             <Button label={t('account.addEscrow.delegate', 'Delegate')} type="submit" primary />