From d53900a680357d616da986150d8dbe22b0fbc306 Mon Sep 17 00:00:00 2001 From: thisconnect Date: Wed, 13 Nov 2024 14:23:33 +0100 Subject: [PATCH 1/4] frontend: refactor lightning wallet view - changed to use View component - cleaned up action-buttons - added global banners --- .../components/action-buttons.module.css | 67 +++++++++++++ .../action-buttons.tsx} | 4 +- .../src/routes/lightning/lightning.module.css | 94 +------------------ .../web/src/routes/lightning/lightning.tsx | 42 +++++---- 4 files changed, 96 insertions(+), 111 deletions(-) create mode 100644 frontends/web/src/routes/lightning/components/action-buttons.module.css rename frontends/web/src/routes/lightning/{actionButtons.tsx => components/action-buttons.tsx} (89%) diff --git a/frontends/web/src/routes/lightning/components/action-buttons.module.css b/frontends/web/src/routes/lightning/components/action-buttons.module.css new file mode 100644 index 0000000000..71f2cdf75a --- /dev/null +++ b/frontends/web/src/routes/lightning/components/action-buttons.module.css @@ -0,0 +1,67 @@ +.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); + 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) { + .actionsContainer { + flex: 0 0 91%; + /* justify-content: space-between; */ + margin-bottom: var(--space-default); + max-width: 91%; + transform: none; + width: 91%; + margin-left: auto; + margin-right: auto; + } + .actionsContainer a { + flex: 1 0 30%; + margin-right: 0; + max-width: 30%; + } + + .send, + .receive { + font-size: var(--size-small); + width: auto; + } +} diff --git a/frontends/web/src/routes/lightning/actionButtons.tsx b/frontends/web/src/routes/lightning/components/action-buttons.tsx similarity index 89% rename from frontends/web/src/routes/lightning/actionButtons.tsx rename to frontends/web/src/routes/lightning/components/action-buttons.tsx index a50c660d69..8a72f10eee 100644 --- a/frontends/web/src/routes/lightning/actionButtons.tsx +++ b/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')} )} - + {t('button.receive')} diff --git a/frontends/web/src/routes/lightning/lightning.module.css b/frontends/web/src/routes/lightning/lightning.module.css index 2f21e58709..db8eca639f 100644 --- a/frontends/web/src/routes/lightning/lightning.module.css +++ b/frontends/web/src/routes/lightning/lightning.module.css @@ -1,92 +1,6 @@ -.container { - max-width: 100%; - width: 100%; - min-height: 100%; - padding: 0; - margin: 0 auto; - display: flex; - flex-direction: column; - justify-content: flex-start; -} - .header { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-start; - flex: none; - margin: 0 auto; - padding: var(--spacing-large) var(--spacing-large) 0 var(--spacing-large); - width: 800px; -} - -.actionsContainer { - display: flex; - transform: translateY(-36%); - margin-top: var(--space-quarter); -} - -.buy, -.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); - 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-right: var(--space-quarter); -} - -.buy:hover, -.receive:hover, -.send:not(.disabled):hover { - background-color: var(--color-lightblue); -} - -.send.disabled { - cursor: default; - opacity: 0.4; -} - -.accountIcon { - width: 18px; - height: 18px; - margin-right: calc(var(--space-quarter) / 2); -} - -@media (max-width: 768px) { - .actionsContainer { - flex: 0 0 91%; - justify-content: space-between; - margin-bottom: var(--space-default); - max-width: 91%; - transform: none; - width: 91%; - margin-left: auto; - margin-right: auto; - } - .actionsContainer a { - flex: 1 0 30%; - margin-right: 0; - max-width: 30%; - } - - .send, - .receive, - .buy { - font-size: var(--size-small); - width: auto; - } + align-items: baseline; + display: flex; + justify-content: space-between; + flex-wrap: wrap; } diff --git a/frontends/web/src/routes/lightning/lightning.tsx b/frontends/web/src/routes/lightning/lightning.tsx index d91221e7a3..3ea0adb7d4 100644 --- a/frontends/web/src/routes/lightning/lightning.tsx +++ b/frontends/web/src/routes/lightning/lightning.tsx @@ -1,6 +1,6 @@ /** * Copyright 2018 Shift Devices AG - * Copyright 2022 Shift Crypto AG + * Copyright 2022-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. @@ -20,15 +20,18 @@ import { useTranslation } from 'react-i18next'; import * as accountApi from '../../api/account'; import { getListPayments, subscribeListPayments, subscribeNodeState, Payment, getLightningBalance } from '../../api/lightning'; import { Balance } from '../../components/balance/balance'; -import { View, ViewHeader } from '../../components/view/view'; +import { ContentWrapper } from '@/components/contentwrapper/contentwrapper'; +import { View, ViewContent, ViewHeader } from '../../components/view/view'; import { GuideWrapper, GuidedContent, Header, Main } from '../../components/layout'; import { Spinner } from '../../components/spinner/Spinner'; -import { ActionButtons } from './actionButtons'; +import { ActionButtons } from './components/action-buttons'; import { LightningGuide } from './guide'; import { Payments } from './components/payments'; import { unsubscribe } from '../../utils/subscriptions'; +import { GlobalBanners } from '@/components/banners'; import { Status } from '../../components/status/status'; import { HideAmountsButton } from '../../components/hideamountsbutton/hideamountsbutton'; +import styles from './lightning.module.css'; export function Lightning() { const { t } = useTranslation(); @@ -87,11 +90,14 @@ export function Lightning() {
- - This is an alpha release intended for preview and testing. Only use lightning with a small amount of funds! - + + + This is an alpha release intended for preview and testing. Only use lightning with a small amount of funds! + + +
@@ -101,23 +107,21 @@ export function Lightning() { >
-
-
-
- -
- - - -
+ + +
+ +
+ + {offlineErrorTextLines.length || !hasDataLoaded ? ( ) : ( )} -
-
+ +
From 5319b0705ab014d181dcd18533e14f0996d19bb2 Mon Sep 17 00:00:00 2001 From: thisconnect Date: Wed, 13 Nov 2024 17:11:45 +0100 Subject: [PATCH 2/4] frontend: use transaction component for lightning payments Transaction component expects TTransaction data, so this is a bit a hack but probably good enough for testing purposes. --- .../components/action-buttons.module.css | 18 +-- .../lightning/components/payment.module.css | 102 ------------- .../routes/lightning/components/payment.tsx | 68 --------- .../lightning/components/payments.module.css | 138 ------------------ .../routes/lightning/components/payments.tsx | 52 ------- .../src/routes/lightning/lightning.module.css | 12 +- .../web/src/routes/lightning/lightning.tsx | 67 ++++++++- 7 files changed, 72 insertions(+), 385 deletions(-) delete mode 100644 frontends/web/src/routes/lightning/components/payment.module.css delete mode 100644 frontends/web/src/routes/lightning/components/payment.tsx delete mode 100644 frontends/web/src/routes/lightning/components/payments.module.css delete mode 100644 frontends/web/src/routes/lightning/components/payments.tsx diff --git a/frontends/web/src/routes/lightning/components/action-buttons.module.css b/frontends/web/src/routes/lightning/components/action-buttons.module.css index 71f2cdf75a..3afb0ab96b 100644 --- a/frontends/web/src/routes/lightning/components/action-buttons.module.css +++ b/frontends/web/src/routes/lightning/components/action-buttons.module.css @@ -18,6 +18,7 @@ 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; @@ -43,25 +44,8 @@ } @media (max-width: 768px) { - .actionsContainer { - flex: 0 0 91%; - /* justify-content: space-between; */ - margin-bottom: var(--space-default); - max-width: 91%; - transform: none; - width: 91%; - margin-left: auto; - margin-right: auto; - } - .actionsContainer a { - flex: 1 0 30%; - margin-right: 0; - max-width: 30%; - } - .send, .receive { font-size: var(--size-small); - width: auto; } } diff --git a/frontends/web/src/routes/lightning/components/payment.module.css b/frontends/web/src/routes/lightning/components/payment.module.css deleted file mode 100644 index 56aeee7ad7..0000000000 --- a/frontends/web/src/routes/lightning/components/payment.module.css +++ /dev/null @@ -1,102 +0,0 @@ -.container { - margin: 0 0 1px 0; -} - -.row { - background-color: var(--background-secondary) !important; - min-height: 52px; -} - -.row * { - font-size: var(--size-default); - font-weight: 400; -} - -.description { - text-overflow: ellipsis; - overflow: hidden; -} - -.amount { - font-variant: tabular-nums; - max-width: 100%; -} - -.amountOverflow { - overflow: hidden; - position: relative; - text-overflow: ellipsis; -} - -/* invisible element that creates the exact space for the used unit */ -.amountOverflow::after { - content: attr(data-unit); - color: transparent; -} - -.send { - color: var(--color-softred) !important; -} - -.receive { - color: var(--color-success); -} - -.currency { - font-variant: tabular-nums; -} - -.currencyUnit { - color: var(--color-secondary); - font-variant: normal; -} - -.amountOverflow .currencyUnit { - position: absolute; - right: 0; - top: 0; -} - -.columnLabel { - color: var(--color-secondary); - font-size: var(--size-default); -} - -.columnLabel { - margin-right: var(--space-quarter); -} - -.columnLabel { - display: none; -} - -@media (max-width: 1080px), (min-width: 1200px) and (max-width: 1322px) { - .container { - margin: 0 0 var(--space-quarter) 0; - } - - .row { - height: auto; - padding: var(--space-half); - } - - .columnLabel { - display: inline; - } -} - -@media (max-width: 666px) { - .columnLabel { - display: none; - } - - .row { - padding: var(--space-half) var(--space-quarter); - } -} - -@media (max-width: 560px) { - .description { - display: none; - } -} diff --git a/frontends/web/src/routes/lightning/components/payment.tsx b/frontends/web/src/routes/lightning/components/payment.tsx deleted file mode 100644 index 1068375011..0000000000 --- a/frontends/web/src/routes/lightning/components/payment.tsx +++ /dev/null @@ -1,68 +0,0 @@ -/** - * Copyright 2024 Shift Devices 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 parentStyle from './payments.module.css'; -import style from './payment.module.css'; -import { Payment as LightningPayment, PaymentType } from '../../../api/lightning'; -import { ArrowIn, ArrowOut } from './icons'; -import { useTranslation } from 'react-i18next'; -import { i18n } from '../../../i18n/i18n'; -import { useState } from 'react'; -import { Amount } from '../../../components/amount/amount'; -import { toSat } from '../../../utils/conversion'; - -type TProps = { - index: number; - payment: LightningPayment; -}; - -export const Payment = ({ index, payment }: TProps) => { - const { t } = useTranslation(); - const [sign] = useState(payment.paymentType === PaymentType.RECEIVED ? '+' : '-'); - const [paymentDate] = useState( - new Date(payment.paymentTime * 1000).toLocaleString(i18n.language, { - year: 'numeric', - month: 'numeric', - day: 'numeric' - }) - ); - - return ( -
-
-
-
{payment.paymentType === PaymentType.RECEIVED ? : }
-
- {t('lightning.payments.header.date')}: - {paymentDate} -
-
- {payment.description || ''} -
-
-
-
- - {sign} - -  sat - -
-
-
-
- ); -}; diff --git a/frontends/web/src/routes/lightning/components/payments.module.css b/frontends/web/src/routes/lightning/components/payments.module.css deleted file mode 100644 index eab4707c21..0000000000 --- a/frontends/web/src/routes/lightning/components/payments.module.css +++ /dev/null @@ -1,138 +0,0 @@ -.container { - margin: calc(var(--space-default) * 1.5) 0; -} - -.columns { - align-items: center; - background-color: var(--background-secondary); - display: flex; - flex-direction: row; - justify-content: flex-start; - margin-bottom: 1px; - width: 100%; -} - -.headers { - font-weight: bold; - height: 48px; -} - -.columns > *, -.columnGroup > * { - display: flex; - flex-direction: row; - align-items: center; - font-size: var(--size-default); - padding: 0 var(--space-quarter); -} - -.columnGroup { - width: 100%; - padding: 0; -} - -.type { - min-width: 54px; - width: 54px; - justify-content: center; -} - -.date { - min-width: 98px; - width: 98px; -} - -.activity { - min-width: 334px; - width: 334px; - text-align: left; -} - -.currency { - justify-content: flex-end; -} - -.empty { - background-color: var(--background-secondary); - height: 52px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; -} - -.empty p { - font-size: var(--size-default); - font-weight: 400; - color: var(--color-secondary); -} - -@media (min-width: 1081px) and (max-width: 1199px), (min-width: 1323px) { - .activity { - padding: var(--space-quarter) 0; - } -} - -@media (max-width: 1080px), (min-width: 1200px) and (max-width: 1322px) { - .showOnMedium { - display: none; - } - - .columns { - flex-direction: column; - justify-content: center; - } - - .columns > *, - .columnGroup > * { - align-items: flex-start; - } - - .columnGroup:last-child { - margin-top: var(--space-quarter); - } - - .type { - min-width: 36px; - width: 36px; - justify-content: flex-start; - } - - .date { - min-width: 126px; - width: 126px; - } -} - -@media (max-width: 768px) { - .container { - margin: var(--space-default) 0; - } - - .currency { - min-width: 0; - width: auto; - } -} - -@media (max-width: 666px) { - .columns > *, - .columnGroup > * { - padding: 0 var(--space-eight); - } - - .type { - min-width: 26px; - width: 26px; - } - - .activity { - min-width: 0; - width: auto; - } - - .date { - min-width: 80px; - width: 80px; - } -} diff --git a/frontends/web/src/routes/lightning/components/payments.tsx b/frontends/web/src/routes/lightning/components/payments.tsx deleted file mode 100644 index 7deafee6f7..0000000000 --- a/frontends/web/src/routes/lightning/components/payments.tsx +++ /dev/null @@ -1,52 +0,0 @@ -/** - * Copyright 2018 Shift Devices AG - * Copyright 2022 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 { useTranslation } from 'react-i18next'; -import style from './payments.module.css'; -import { Payment as LightningPayment } from '../../../api/lightning'; -import { Payment } from './payment'; - -type TProps = { - payments?: LightningPayment[]; -}; - -export const Payments = ({ payments }: TProps) => { - const { t } = useTranslation(); - - return ( -
-
- -
-
-
{t('lightning.payments.header.type')}
-
{t('lightning.payments.header.date')}
-
{t('lightning.payments.header.description')}
-
{t('lightning.payments.header.amount')}
-
- {payments && payments.length > 0 ? ( - payments.map((payment, index) => ( - - )) - ) : ( -
-

{t('lightning.payments.placeholder')}

-
- )} -
- ); -}; diff --git a/frontends/web/src/routes/lightning/lightning.module.css b/frontends/web/src/routes/lightning/lightning.module.css index db8eca639f..69697a0661 100644 --- a/frontends/web/src/routes/lightning/lightning.module.css +++ b/frontends/web/src/routes/lightning/lightning.module.css @@ -1,6 +1,16 @@ .header { - align-items: baseline; + align-items: center; display: flex; justify-content: space-between; flex-wrap: wrap; + margin-bottom: var(--space-default); +} + +.empty { + background-color: var(--background-secondary); + height: 52px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; } diff --git a/frontends/web/src/routes/lightning/lightning.tsx b/frontends/web/src/routes/lightning/lightning.tsx index 3ea0adb7d4..768fdd80ae 100644 --- 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, getLightningBalance } from '../../api/lightning'; +import { getListPayments, subscribeListPayments, subscribeNodeState, Payment as TPayment, getLightningBalance } from '../../api/lightning'; import { Balance } from '../../components/balance/balance'; import { ContentWrapper } from '@/components/contentwrapper/contentwrapper'; import { View, ViewContent, ViewHeader } from '../../components/view/view'; @@ -26,18 +26,18 @@ import { GuideWrapper, GuidedContent, Header, Main } from '../../components/layo import { Spinner } from '../../components/spinner/Spinner'; import { ActionButtons } from './components/action-buttons'; import { LightningGuide } from './guide'; -import { Payments } from './components/payments'; import { unsubscribe } from '../../utils/subscriptions'; import { GlobalBanners } from '@/components/banners'; import { Status } from '../../components/status/status'; import { HideAmountsButton } from '../../components/hideamountsbutton/hideamountsbutton'; +import { Transaction } from '@/components/transactions/transaction'; import styles from './lightning.module.css'; -export function Lightning() { +export const Lightning = () => { const { t } = useTranslation(); const [balance, setBalance] = useState(); const [syncedAddressesCount] = useState(); - const [payments, setPayments] = useState(); + const [payments, setPayments] = useState(); const [error, setError] = useState(); const onStateChange = useCallback(async () => { @@ -114,11 +114,64 @@ export function Lightning() { - + {offlineErrorTextLines.length || !hasDataLoaded ? ( ) : ( - + payments && payments.length > 0 ? ( + payments + .map(payment => ({ // TODO: giant hack start + internalID: payment.id, + addresses: [], + amountAtTime: { + amount: (payment.amountMsat * 0.001).toString(), + conversions: {}, // TODO: add conversions + unit: 'sat' as accountApi.CoinUnit, + estimated: false + }, + amount: { + amount: payment.amountMsat.toString(), + unit: 'sat' as accountApi.CoinUnit, + estimated: false + }, + fee: { + amount: payment.feeMsat.toString(), + unit: 'sat' as accountApi.CoinUnit, + estimated: false + }, + feeRatePerKb: { + amount: '', + unit: 'sat' as accountApi.CoinUnit, + estimated: false + }, + type: payment.paymentType === 'received' ? 'receive' as accountApi.TTransactionType : 'send', // TODO: add payment.paymentType 'closedChannel' + txID: payment.id, + note: payment.description || '', + status: payment.status, + time: new Date(payment.paymentTime * 1000).toString(), // TODO: remove hack? + // most of these are not for lightning + gas: 0, + nonce: null, + numConfirmationsComplete: 0, + size: 0, + numConfirmations: 0, + vsize: 0, + weight: 0 + })) // TODO: giant hack end + .map((payment) => ( + { + console.log('show details', internalID); + }} + {...payment} + /> + )) + ) : ( +
+

{t('lightning.payments.placeholder')}

+
+ ) )} @@ -127,4 +180,4 @@ export function Lightning() { ); -} +}; From 21f92ecaf14e9a3e9ba4ab26302c37ce7b9df93e Mon Sep 17 00:00:00 2001 From: thisconnect Date: Wed, 13 Nov 2024 18:04:13 +0100 Subject: [PATCH 3/4] frontend: add lightning payment detail dialog --- .../lightning/components/payment-details.tsx | 146 ++++++++++++++++++ .../web/src/routes/lightning/lightning.tsx | 17 +- 2 files changed, 159 insertions(+), 4 deletions(-) create mode 100644 frontends/web/src/routes/lightning/components/payment-details.tsx diff --git a/frontends/web/src/routes/lightning/components/payment-details.tsx b/frontends/web/src/routes/lightning/components/payment-details.tsx new file mode 100644 index 0000000000..bed47f9a08 --- /dev/null +++ b/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 ( + + {payment && ( + <> + + {payment.description} + + + + {toSat(payment.amountMsat)} + {' '} + sat + + + + + + + + {payment.feeMsat} + {' '} + msat + + + {payment.paymentType} + + + {payment.status} + + { payment.paymentType !== 'closedChannel' && ( + + )} + { payment.paymentType !== 'closedChannel' && ( + + )} + + )} + + ); +}; + +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 ( + { + setOpen(false); + onClose(); + }} + payment={payment} + sign={getTxSign(payment.paymentType === 'received' ? 'receive' : 'send')} + /> + ); +}; diff --git a/frontends/web/src/routes/lightning/lightning.tsx b/frontends/web/src/routes/lightning/lightning.tsx index 768fdd80ae..7a3ef8b53a 100644 --- 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,17 @@ 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 { toSat } from '@/utils/conversion'; import styles from './lightning.module.css'; export const Lightning = () => { const { t } = useTranslation(); const [balance, setBalance] = useState(); const [syncedAddressesCount] = useState(); - const [payments, setPayments] = useState(); + const [payments, setPayments] = useState(); const [error, setError] = useState(); + const [detailID, setDetailID] = useState(null); const onStateChange = useCallback(async () => { try { @@ -124,7 +127,7 @@ export const Lightning = () => { internalID: payment.id, addresses: [], amountAtTime: { - amount: (payment.amountMsat * 0.001).toString(), + amount: toSat(payment.amountMsat).toString(), conversions: {}, // TODO: add conversions unit: 'sat' as accountApi.CoinUnit, estimated: false @@ -162,7 +165,7 @@ export const Lightning = () => { { - console.log('show details', internalID); + setDetailID(internalID); }} {...payment} /> @@ -173,6 +176,12 @@ export const Lightning = () => { ) )} + + payment.id === detailID)} + onClose={() => setDetailID(null)} + /> From 5cfe465515dc25648d1871915b1e9334232f8d1a Mon Sep 17 00:00:00 2001 From: thisconnect Date: Wed, 20 Nov 2024 15:59:12 +0100 Subject: [PATCH 4/4] frontend: temporary hide fiat for lightning transactions Until we have conversion rates for lightning. --- .../transactions/transaction.module.css | 3 ++ .../components/transactions/transaction.tsx | 46 ++++++++++++------- .../web/src/routes/lightning/lightning.tsx | 1 + 3 files changed, 34 insertions(+), 16 deletions(-) diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css index 870f31c5ed..7656c9d60a 100644 --- a/frontends/web/src/components/transactions/transaction.module.css +++ b/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; diff --git a/frontends/web/src/components/transactions/transaction.tsx b/frontends/web/src/components/transactions/transaction.tsx index f1c83dd716..8c21728b42 100644 --- a/frontends/web/src/components/transactions/transaction.tsx +++ b/frontends/web/src/components/transactions/transaction.tsx @@ -28,6 +28,7 @@ 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 } @@ -35,6 +36,7 @@ export const Transaction = ({ addresses, amountAtTime, onShowDetail, + hideFiat, internalID, note, numConfirmations, @@ -65,7 +67,11 @@ export const Transaction = ({ time={time} type={type} /> - +