frontend: add hideamount toggle for ln screens

BitBoxSwiss · Mar 6, 2024 · 1448032 · 1448032
1 parent 8d0ba96
commit 1448032
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 8 deletions.
diff --git a/frontends/web/src/components/qrcode/qrcode.module.css b/frontends/web/src/components/qrcode/qrcode.module.css
@@ -12,7 +12,7 @@
 }
 
 .copiedText {
-  margin-top: 16px;
+  margin-top: 16px !important;
   transition: opacity 250ms;
 }
 

diff --git a/frontends/web/src/components/qrcode/qrcode.tsx b/frontends/web/src/components/qrcode/qrcode.tsx
@@ -86,15 +86,15 @@ const TapToCopyQRCode = ({ data, qrCodeData, size }: TTapToCopyQRCodeProps) => {
 
 
   return (
-    <div onClick={handleCopy}>
+    <>
       <input className={style.hiddenInput} ref={inputRef} value={data} readOnly/>
       <div style={{ width: size, height: size }} className={style.outerContainer}>
-        <img className={`${style.qrCodeContainer}  ${success ? style.hide : style.show}`} width={size} height={size} src={qrCodeData} />
+        <img onClick={handleCopy} className={`${style.qrCodeContainer}  ${success ? style.hide : style.show}`} width={size} height={size} src={qrCodeData} />
         <div className={`${style.checkContainer} ${style.show}`}>
           <Check width={size / 2} height={size / 2} />
         </div>
       </div>
       <p className={`${style.copiedText} ${success ? style.show : style.hide}`}>{t('receive.qrCodeCopiedMessage')}</p>
-    </div>
+    </>
   );
 };
diff --git a/frontends/web/src/routes/lightning/lightning.tsx b/frontends/web/src/routes/lightning/lightning.tsx
@@ -28,6 +28,7 @@ import { LightningGuide } from './guide';
 import { Payments } from './components/payments';
 import { unsubscribe } from '../../utils/subscriptions';
 import { Status } from '../../components/status/status';
+import { HideAmountsButton } from '../../components/hideamountsbutton/hideamountsbutton';
 
 export function Lightning() {
   const { t } = useTranslation();
@@ -97,7 +98,9 @@ export function Lightning() {
                 <span>{t('lightning.accountLabel')}</span>
               </h2>
             }
-          ></Header>
+          >
+            <HideAmountsButton />
+          </Header>
           <div className="innerContainer scrollableContainer">
             <div className="content padded">
               <div className="flex flex-column flex-reverse-mobile">

diff --git a/frontends/web/src/routes/lightning/receive/receive.tsx b/frontends/web/src/routes/lightning/receive/receive.tsx
@@ -159,7 +159,7 @@ export function Receive() {
             <Grid col="1">
               <Column>
                 <h1 className={styles.title}>{t('lightning.receive.subtitle')}</h1>
-                <span>{t('lightning.receive.amountSats.label')} ({<FiatConversion amount={invoiceAmount} noBtcZeroes />})</span>
+                <span>{t('lightning.receive.amountSats.label')} ({<FiatConversion alwaysShowAmounts amount={invoiceAmount} noBtcZeroes />})</span>
                 <Input
                   type="number"
                   min="0"
@@ -206,7 +206,7 @@ export function Receive() {
                   <QRCode data={receivePaymentResponse?.lnInvoice.bolt11} />
                 </div>
                 <div className={styles.invoiceSummary}>
-                  {inputSatsText} sats (<FiatConversion amount={invoiceAmount} noBtcZeroes />)
+                  {inputSatsText} sats (<FiatConversion alwaysShowAmounts amount={invoiceAmount} noBtcZeroes />)
                   {description && ` / ${description}`}
                 </div>
                 <ColumnButtons>
@@ -233,7 +233,7 @@ export function Receive() {
         <View fitContent textCenter verticallyCentered>
           <ViewContent withIcon="success">
             <p>{t('lightning.receive.success.message')}</p>
-            <span>{inputSatsText} sats (<FiatConversion amount={invoiceAmount} noBtcZeroes />)</span>
+            <span>{inputSatsText} sats (<FiatConversion alwaysShowAmounts amount={invoiceAmount} noBtcZeroes />)</span>
             <br />
             {description && ` / ${description}`}
           </ViewContent>