added crypto denomination to amount field (#4582)

brave-intl · Jan 29, 2025 · 9aa2fa5 · 9aa2fa5
1 parent 9ad44ee
commit 9aa2fa5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/nextjs/src/app/[locale]/c/[public_identifier]/CryptoPaymentWidget.jsx b/nextjs/src/app/[locale]/c/[public_identifier]/CryptoPaymentWidget.jsx
@@ -29,6 +29,7 @@ import {
 } from "@solana/spl-token";
 
 import Icon from '@brave/leo/react/icon';
+import Input from '@brave/leo/react/input';
 import Select, { components } from 'react-select';
 import Dialog from '@brave/leo/react/dialog';
 import Button from '@brave/leo/react/button';
@@ -548,12 +549,15 @@ export default function CryptoPaymentWidget({title, cryptoAddresses, cryptoConst
                 )
               })}
               <input
-                type="number"
+                inputmode='numeric'
+                type='number'
+                min={0}
                 onChange={handleInputChange}
                 className={`${currentAmount === customAmount ? styles['selected'] : ''} ${displayCrypto ? styles['amount-full-width'] : ''} ${styles['amount-input']}`}
                 placeholder={placeholder}
                 value={customAmount}
               />
+              <span className={`${styles['amount-input-denomination']}`}>{displayCrypto && displayChain}</span>
             </div>
             <div className="col-span-12 md:col-span-5 text-right align-top">
               <h2 className={`${styles['large-currency-display']}`}>

diff --git a/nextjs/src/styles/PublicChannelPage.module.css b/nextjs/src/styles/PublicChannelPage.module.css
@@ -293,6 +293,15 @@
   border-radius: 8px;
 }
 
+.amount-input-denomination {
+  position: relative;
+  top: -35px;
+  font-size: 13px;
+  color: rgb(63 72 85);
+  float: right;
+  padding-right: 15px;
+}
+
 .success-wrapper {
   width: 520px;
   height: 542px;