Frontend lightning transactions

frontends/web/src/components/transactions/transaction.module.css

@@ -61,6 +61,9 @@
   padding: 0 var(--space-quarter) 0 48px;
   text-align: right;
 }
+.txAmountsColumn.hideFiat {
+  align-content: center;
+}
 @media (max-width: 560px) {
   .txAmountsColumn {
     padding-left: 24px;

frontends/web/src/components/transactions/transaction.tsx

@@ -28,13 +28,15 @@ import { getTxSign } from './utils';
 import styles from './transaction.module.css';
 
 type TTransactionProps = ITransaction & {
+  hideFiat?: boolean; // TODO: temp added for lighning to hide conversion until implemented
   onShowDetail: (internalID: ITransaction['internalID']) => void
 }
 
 export const Transaction = ({
   addresses,
   amountAtTime,
   onShowDetail,
+  hideFiat,
   internalID,
   note,
   numConfirmations,
@@ -65,7 +67,11 @@ export const Transaction = ({
           time={time}
           type={type}
         />
-        <Amounts amount={amountAtTime} type={type} />
+        <Amounts
+          amount={amountAtTime}
+          hideFiat={hideFiat}
+          type={type}
+        />
         <button
           className={styles.txShowDetailBtn}
           onClick={() => !isMobile && onShowDetail(internalID)}
@@ -146,11 +152,13 @@ const Status = ({
 
 type TAmountsProps = {
   amount: IAmount;
+  hideFiat?: boolean;
   type: TTransactionType;
 }
 
 const Amounts = ({
   amount,
+  hideFiat,
   type,
 }: TAmountsProps) => {
   const { defaultCurrency } = useContext(RatesContext);
@@ -159,7 +167,11 @@ const Amounts = ({
   const txTypeClass = `txAmount-${type}`;
   const conversionPrefix = amount.estimated ? '\u2248' : null; // ≈
   return (
-    <span className={`${styles.txAmountsColumn} ${styles[txTypeClass]}`}>
+    <span className={`
+      ${styles.txAmountsColumn}
+      ${styles[txTypeClass]}
+      ${hideFiat ? styles.hideFiat : ''}
+    `}>
       {/* <data value={amount.amount}> */}
       <span className={styles.txAmount}>
         {sign}
@@ -173,23 +185,25 @@ const Amounts = ({
         </span>
       </span>
       {/* </data> */}
-      <span className={styles.txConversionAmount}>
-        {conversionPrefix && (
-          <span className={styles.txPrefix}>
-            {conversionPrefix}
+      {!hideFiat ? (
+        <span className={styles.txConversionAmount}>
+          {conversionPrefix && (
+            <span className={styles.txPrefix}>
+              {conversionPrefix}
+              {' '}
+            </span>
+          )}
+          {conversion && sign}
+          <Amount
+            amount={conversion || ''}
+            unit={defaultCurrency}
+          />
+          <span className={styles.txUnit}>
             {' '}
+            {defaultCurrency}
           </span>
-        )}
-        {conversion && sign}
-        <Amount
-          amount={conversion || ''}
-          unit={defaultCurrency}
-        />
-        <span className={styles.txUnit}>
-          {' '}
-          {defaultCurrency}
         </span>
-      </span>
+      ) : null}
     </span>
   );
 };

frontends/web/src/routes/lightning/components/action-buttons.module.css

@@ -0,0 +1,51 @@
+.actionsContainer {
+    --size-default: 14px;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    /* margin-top: var(--space-half); */
+    padding-bottom: 0;
+}
+
+.receive,
+.send {
+    background-color: var(--color-blue);
+    border-radius: 2px;
+    color: var(--color-alt);
+    display: inline-block;
+    font-size: var(--size-default);
+    height: calc(var(--item-height) / 1.5);
+    line-height: calc(var(--item-height) / 1.5);
+    min-width: calc(var(--item-height) * 2);
+    padding: 0 var(--space-half);
+    text-align: center;
+    text-decoration: none;
+    transition: background-color ease-out 0.2s;
+    width: calc(var(--item-height) * 2);
+    will-change: background-color;
+}
+
+.receive,
+.send {
+    margin-left: var(--space-quarter);
+}
+
+.buy:hover,
+.receive:hover,
+.send:not(.disabled):hover {
+    background-color: var(--color-lightblue);
+}
+
+.send.disabled {
+    cursor: default;
+    opacity: 0.4;
+}
+
+@media (max-width: 768px) {
+    .send,
+    .receive {
+        font-size: var(--size-small);
+    }
+}

frontends/web/src/routes/lightning/actionButtons.tsx → frontends/web/src/routes/lightning/components/action-buttons.tsx

@@ -17,7 +17,7 @@
 
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import style from './lightning.module.css';
+import style from './action-buttons.module.css';
 
 type TProps = {
   canSend?: boolean;
@@ -36,7 +36,7 @@ export const ActionButtons = ({ canSend }: TProps) => {
           {t('button.send')}
         </span>
       )}
-      <Link key="receive" to={'/lightning/receive'} className={`${style.receive} ${style.disabled}`}>
+      <Link key="receive" to={'/lightning/receive'} className={style.receive}>
         <span>{t('button.receive')}</span>
       </Link>
     </div>

frontends/web/src/routes/lightning/components/payment-details.tsx

@@ -0,0 +1,146 @@
+/**
+ * Copyright 2024 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { Payment as IPayment, LnPaymentDetails } from '@/api/lightning';
+import { Dialog } from '@/components/dialog/dialog';
+import { FiatConversion } from '@/components/rates/rates';
+import { TxDetail } from '@/components/transactions/components/detail';
+import { TxDateDetail } from '@/components/transactions/components/date';
+import { TxDetailCopyableValues } from '@/components/transactions/components/address-or-txid';
+import { getTxSign } from '@/components/transactions/utils';
+import { toSat } from '@/utils/conversion';
+import styles from '@/components/transactions/components/details.module.css';
+
+type TTxDetailsDialog = {
+  open: boolean;
+  onClose: () => void;
+  payment: IPayment;
+  sign: string;
+}
+
+export const PaymentDetailsDialog = ({
+  open,
+  onClose,
+  payment,
+  sign,
+}: TTxDetailsDialog) => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog
+      open={open}
+      title={t('transaction.details.title')}
+      onClose={onClose}
+      slim
+      medium>
+      {payment && (
+        <>
+          <TxDetail label="Memo">
+            {payment.description}
+          </TxDetail>
+          <TxDateDetail
+            time={new Date(payment.paymentTime * 1000).toString()}
+          />
+          <TxDetail label="Amount">
+            {toSat(payment.amountMsat)}
+            {' '}
+            sat
+          </TxDetail>
+          <TxDetail label={t('transaction.details.fiat')}>
+            <span className={styles.fiat}>
+              <FiatConversion
+                amount={{
+                  amount: `${toSat(payment.amountMsat)}`,
+                  unit: 'sat',
+                  estimated: false
+                }}
+                sign={sign}
+                noAction
+              />
+            </span>
+          </TxDetail>
+          <TxDetail label="fee">
+            {payment.feeMsat}
+            {' '}
+            msat
+          </TxDetail>
+          <TxDetail label="type">
+            {payment.paymentType}
+          </TxDetail>
+          <TxDetail label="status">
+            {payment.status}
+          </TxDetail>
+          { payment.paymentType !== 'closedChannel' && (
+            <TxDetailCopyableValues
+              key="paymentPreimage"
+              label="paymentPreimage"
+              values={[
+                (payment.details.data as LnPaymentDetails).paymentPreimage
+              ]}
+            />
+          )}
+          { payment.paymentType !== 'closedChannel' && (
+            <TxDetailCopyableValues
+              key="paymentHash"
+              label="paymentHash"
+              values={[
+                (payment.details.data as LnPaymentDetails).paymentHash
+              ]}
+            />
+          )}
+        </>
+      )}
+    </Dialog>
+  );
+};
+
+type TTransactionDetails = {
+  id: string | null;
+  payment?: IPayment;
+  onClose: () => void;
+}
+
+export const PaymentDetails = ({
+  id,
+  payment,
+  onClose,
+}: TTransactionDetails) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (id) {
+      setOpen(true);
+    }
+  }, [id]);
+
+  if (!payment) {
+    return null;
+  }
+
+  return (
+    <PaymentDetailsDialog
+      open={open}
+      onClose={() => {
+        setOpen(false);
+        onClose();
+      }}
+      payment={payment}
+      sign={getTxSign(payment.paymentType === 'received' ? 'receive' : 'send')}
+    />
+  );
+};