frontend: add lightning payment detail dialog

BitBoxSwiss · Nov 13, 2024 · beca437 · beca437
1 parent cf36470
commit beca437
Show file tree

Hide file tree

Showing 2 changed files with 153 additions and 3 deletions.
diff --git a/frontends/web/src/routes/lightning/components/payment-details.tsx b/frontends/web/src/routes/lightning/components/payment-details.tsx
@@ -0,0 +1,141 @@
+/**
+ * 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 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">
+            {payment.amountMsat * 0.001} sat
+          </TxDetail>
+          <TxDetail label={t('transaction.details.fiat')}>
+            <span className={styles.fiat}>
+              <FiatConversion
+                amount={{
+                  amount: `${payment.amountMsat * 0.001}`,
+                  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 === 'sent' ? 'send' : 'receive')}
+    />
+  );
+};
diff --git a/frontends/web/src/routes/lightning/lightning.tsx b/frontends/web/src/routes/lightning/lightning.tsx
@@ -18,7 +18,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as accountApi from '../../api/account';
-import { getListPayments, subscribeListPayments, subscribeNodeState, Payment as TPayment, getLightningBalance } from '../../api/lightning';
+import { getListPayments, subscribeListPayments, subscribeNodeState, Payment as IPayment, getLightningBalance } from '../../api/lightning';
 import { Balance } from '../../components/balance/balance';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { View, ViewContent, ViewHeader } from '../../components/view/view';
@@ -31,14 +31,16 @@ import { GlobalBanners } from '@/components/banners';
 import { Status } from '../../components/status/status';
 import { HideAmountsButton } from '../../components/hideamountsbutton/hideamountsbutton';
 import { Transaction } from '@/components/transactions/transaction';
+import { PaymentDetails } from './components/payment-details';
 import styles from './lightning.module.css';
 
 export const Lightning = () => {
   const { t } = useTranslation();
   const [balance, setBalance] = useState<accountApi.IBalance>();
   const [syncedAddressesCount] = useState<number>();
-  const [payments, setPayments] = useState<TPayment[]>();
+  const [payments, setPayments] = useState<IPayment[]>();
   const [error, setError] = useState<string>();
+  const [detailID, setDetailID] = useState<accountApi.ITransaction['internalID'] | null>(null);
 
   const onStateChange = useCallback(async () => {
     try {
@@ -86,6 +88,7 @@ export const Lightning = () => {
 
   const offlineErrorTextLines: string[] = [];
 
+  console.log('detailID', detailID);
   return (
     <GuideWrapper>
       <GuidedContent>
@@ -162,7 +165,7 @@ export const Lightning = () => {
                       <Transaction
                         key={payment.internalID}
                         onShowDetail={(internalID: string) => {
-                          console.log('show details', internalID);
+                          setDetailID(internalID);
                         }}
                         {...payment}
                       />
@@ -173,6 +176,12 @@ export const Lightning = () => {
                   </div>
                 )
               )}
+
+              <PaymentDetails
+                id={detailID}
+                payment={payments?.find(payment => payment.id === detailID)}
+                onClose={() => setDetailID(null)}
+              />
             </ViewContent>
           </View>
         </Main>