From 0320291f5a6b04c0a8d52775c874d880a4d30eaa Mon Sep 17 00:00:00 2001
From: brusher_ru <brusher.designer@gmail.com>
Date: Fri, 19 Jul 2024 03:05:02 +0300
Subject: [PATCH] tweak(SendTx): improve hints and unit for gas price

---
 src/components/FormInput.tsx          |  2 +-
 src/components/sendTx/SendTxModal.tsx | 36 ++++++++++++++++++++-------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx
index 24acb3c..43f2394 100644
--- a/src/components/FormInput.tsx
+++ b/src/components/FormInput.tsx
@@ -24,7 +24,7 @@ type Props<T extends FieldValues> = PropsWithChildren<{
   isSubmitted?: boolean;
   inputAddon?: ReactNode;
   inputProps?: InputProps;
-  hint?: string;
+  hint?: ReactNode;
 }>;
 
 function FormInput<T extends FieldValues>({
diff --git a/src/components/sendTx/SendTxModal.tsx b/src/components/sendTx/SendTxModal.tsx
index 4fcb3b3..b4ec0c5 100644
--- a/src/components/sendTx/SendTxModal.tsx
+++ b/src/components/sendTx/SendTxModal.tsx
@@ -1153,13 +1153,24 @@ function SendTxModal({ isOpen, onClose }: SendTxModalProps): JSX.Element {
                     errors={errors}
                     isSubmitted={isSubmitted}
                     inputAddon={
-                      <InputRightElement mr={2}>
-                        <Text fontSize="xs">Smidge</Text>
+                      <InputRightElement w="auto" pr={2}>
+                        <Text fontSize="xs">Smidge per unit</Text>
                       </InputRightElement>
                     }
-                    // eslint-disable-next-line max-len
-                    hint="How much to pay for gas: During high network traffic, 
-                    transactions with higher gas fees are prioritized."
+                    hint={
+                      <>
+                        <Text mb={2}>
+                          <strong>How much to pay per gas unit</strong>
+                          <br />
+                          During high network traffic, transactions with higher
+                          gas prices are prioritized.
+                        </Text>
+                        <Text>
+                          Example: transaction costs 25,000 gas units, gas price
+                          is 2 smidges, the total fee will be 50,000 smidges.
+                        </Text>
+                      </>
+                    }
                   />
                 </Box>
                 <Box ml={2} w="50%">
@@ -1178,10 +1189,17 @@ function SendTxModal({ isOpen, onClose }: SendTxModalProps): JSX.Element {
                     })}
                     errors={errors}
                     isSubmitted={isSubmitted}
-                    // eslint-disable-next-line max-len
-                    hint="The number is used only once to ensure each transaction is unique. 
-                    It increments automatically,
-                    but can also be set manually if needed."
+                    hint={
+                      <Text>
+                        <strong>The transaction counter</strong>
+                        <br />
+                        The number is used only to ensure each transaction is
+                        unique.
+                        <br />
+                        It increments automatically, but can be set manually if
+                        needed.
+                      </Text>
+                    }
                   />
                 </Box>
               </Flex>