Merge pull request #1347 from buberdds/mz/paraTimeTooltip

ParaTimes: add tooltip to max button

src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap

@@ -196,7 +196,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   flex-direction: column;
 }
 
-.c13 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -214,7 +214,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   flex-direction: column;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -230,7 +230,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   padding-bottom: 24px;
 }
 
-.c17 {
+.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -248,7 +248,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   flex-direction: column;
 }
 
-.c19 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -262,7 +262,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   flex-direction: column;
 }
 
-.c21 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -287,13 +287,13 @@ exports[`<TransactionAmount /> should render component 1`] = `
   text-align: center;
 }
 
-.c14 {
+.c15 {
   font-size: 14px;
   line-height: 20px;
   font-weight: bolder;
 }
 
-.c15 {
+.c16 {
   font-size: 12px;
   line-height: 18px;
   color: lightText;
@@ -355,7 +355,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   border: 0;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -381,48 +381,48 @@ exports[`<TransactionAmount /> should render component 1`] = `
   transition-timing-function: ease-in-out;
 }
 
-.c18:hover {
+.c19:hover {
   box-shadow: 0px 0px 0px 2px #7D4CDB;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c18:focus > circle,
-.c18:focus > ellipse,
-.c18:focus > line,
-.c18:focus > path,
-.c18:focus > polygon,
-.c18:focus > polyline,
-.c18:focus > rect {
+.c19:focus > circle,
+.c19:focus > ellipse,
+.c19:focus > line,
+.c19:focus > path,
+.c19:focus > polygon,
+.c19:focus > polyline,
+.c19:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c18:focus::-moz-focus-inner {
+.c19:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c18:focus:not(:focus-visible) {
+.c19:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c18:focus:not(:focus-visible) > circle,.c18:focus:not(:focus-visible) > ellipse,
-.c18:focus:not(:focus-visible) > line,.c18:focus:not(:focus-visible) > path,
-.c18:focus:not(:focus-visible) > polygon,.c18:focus:not(:focus-visible) > polyline,
-.c18:focus:not(:focus-visible) > rect {
+.c19:focus:not(:focus-visible) > circle,.c19:focus:not(:focus-visible) > ellipse,
+.c19:focus:not(:focus-visible) > line,.c19:focus:not(:focus-visible) > path,
+.c19:focus:not(:focus-visible) > polygon,.c19:focus:not(:focus-visible) > polyline,
+.c19:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c18:focus:not(:focus-visible)::-moz-focus-inner {
+.c19:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c22 {
+.c23 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -451,48 +451,48 @@ exports[`<TransactionAmount /> should render component 1`] = `
   width: 100%;
 }
 
-.c22:hover {
+.c23:hover {
   box-shadow: 0px 0px 0px 2px #7D4CDB;
 }
 
-.c22:focus {
+.c23:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c22:focus > circle,
-.c22:focus > ellipse,
-.c22:focus > line,
-.c22:focus > path,
-.c22:focus > polygon,
-.c22:focus > polyline,
-.c22:focus > rect {
+.c23:focus > circle,
+.c23:focus > ellipse,
+.c23:focus > line,
+.c23:focus > path,
+.c23:focus > polygon,
+.c23:focus > polyline,
+.c23:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c22:focus::-moz-focus-inner {
+.c23:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c22:focus:not(:focus-visible) {
+.c23:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c22:focus:not(:focus-visible) > circle,.c22:focus:not(:focus-visible) > ellipse,
-.c22:focus:not(:focus-visible) > line,.c22:focus:not(:focus-visible) > path,
-.c22:focus:not(:focus-visible) > polygon,.c22:focus:not(:focus-visible) > polyline,
-.c22:focus:not(:focus-visible) > rect {
+.c23:focus:not(:focus-visible) > circle,.c23:focus:not(:focus-visible) > ellipse,
+.c23:focus:not(:focus-visible) > line,.c23:focus:not(:focus-visible) > path,
+.c23:focus:not(:focus-visible) > polygon,.c23:focus:not(:focus-visible) > polyline,
+.c23:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c22:focus:not(:focus-visible)::-moz-focus-inner {
+.c23:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c20 {
+.c21 {
   -webkit-transition: max-height 200ms,opacity 200ms;
   transition: max-height 200ms,opacity 200ms;
   opacity: 0;
@@ -557,6 +557,15 @@ exports[`<TransactionAmount /> should render component 1`] = `
   width: 100%;
 }
 
+.c13 {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  z-index: 2;
+  background-color: #FFFFFF;
+  font-weight: bold;
+}
+
 @media only screen and (max-width:768px) {
   .c2 {
     margin-bottom: 24px;
@@ -594,14 +603,14 @@ exports[`<TransactionAmount /> should render component 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c16 {
+  .c17 {
     padding-top: 12px;
     padding-bottom: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c21 {
+  .c22 {
     margin-bottom: 24px;
   }
 }
@@ -682,25 +691,24 @@ exports[`<TransactionAmount /> should render component 1`] = `
                 </div>
               </div>
               <button
-                class="c12"
-                style="font-weight: bold; z-index: 2; position: absolute; top: 15px; right: 0px;"
+                class="c12 c13"
                 type="button"
               >
                 MAX
               </button>
             </div>
             <div
-              class="c13"
+              class="c14"
             >
               <span
-                class="c14"
+                class="c15"
               >
                 Available:
                  
                 <span>
                   1.0
                   <span
-                    class="c15"
+                    class="c16"
                   >
                      
                   </span>
@@ -709,31 +717,31 @@ exports[`<TransactionAmount /> should render component 1`] = `
             </div>
           </div>
           <div
-            class="c16"
+            class="c17"
           >
             <div
-              class="c17"
+              class="c18"
             >
               <button
-                class="c18"
+                class="c19"
                 type="button"
               >
                 Advanced
               </button>
             </div>
             <div
               aria-hidden="true"
-              class="c19 c20"
+              class="c20 c21"
             />
           </div>
           <div
-            class="c21"
+            class="c22"
           >
             <div
               class="c5"
             >
               <button
-                class="c22"
+                class="c23"
                 type="submit"
               >
                 Next

src/app/pages/ParaTimesPage/TransactionAmount/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
-import { Box, Button, Form, FormField, Text, TextInput } from 'grommet'
+import { Box, Button, Form, FormField, Text, TextInput, Tip } from 'grommet'
 import { Trans, useTranslation } from 'react-i18next'
 
 import {
@@ -17,6 +17,17 @@ import { ParaTimeFormFooter } from '../ParaTimeFormFooter'
 import { useParaTimes } from '../useParaTimes'
 import { useParaTimesNavigation } from '../useParaTimesNavigation'
 import { FeesSection } from './FeesSection'
+import styled from 'styled-components'
+import { normalizeColor } from 'grommet/es6/utils'
+
+const StyledMaxButton = styled(Button)`
+  position: absolute;
+  top: 10px;
+  right: 0;
+  z-index: 2;
+  background-color: ${({ theme }) => normalizeColor('background-front', theme)};
+  font-weight: bold;
+`
 
 export const TransactionAmount = () => {
   const { t } = useTranslation()
@@ -120,21 +131,22 @@ export const TransactionAmount = () => {
                 />
               </FormField>
               {balance && (
-                <Button
-                  disabled={disabled}
-                  style={{
-                    fontWeight: 'bold',
-                    zIndex: 2,
-                    position: 'absolute',
-                    top: '15px',
-                    right: 0,
-                  }}
-                  plain
-                  label={t('paraTimes.amount.max', 'MAX')}
-                  onClick={() =>
-                    setTransactionForm({ ...transactionForm, amount: formatter(balance).replaceAll(',', '') })
-                  }
-                />
+                <Tip
+                  content={t('paraTimes.amount.tooltip', 'Max value may be decreased by the fee')}
+                  dropProps={{ align: { bottom: 'top' } }}
+                >
+                  <StyledMaxButton
+                    disabled={disabled}
+                    plain
+                    label={t('paraTimes.amount.max', 'MAX')}
+                    onClick={() =>
+                      setTransactionForm({
+                        ...transactionForm,
+                        amount: formatter(balance).replaceAll(',', ''),
+                      })
+                    }
+                  />
+                </Tip>
               )}
             </Box>
 

src/locales/en/translation.json

@@ -260,6 +260,7 @@
       "feeGasPlaceholder": "Fee Gas",
       "max": "MAX",
       "receiving": "to the receiving",
+      "tooltip": "Max value may be decreased by the fee",
       "withdrawing": "from the withdrawing"
     },
     "common": {