{FIAT_CURRENCIES.map((fiat, i) =>
-
+
{ fiat.symbol ?
:
}
-
+
{fiat.currency}
diff --git a/apps/frontend/src/components/shared/InvalidInputMessage/InvalidInputMessage.tsx b/apps/frontend/src/components/shared/InvalidInputMessage/InvalidInputMessage.tsx
index 98b2e03a..148b1942 100755
--- a/apps/frontend/src/components/shared/InvalidInputMessage/InvalidInputMessage.tsx
+++ b/apps/frontend/src/components/shared/InvalidInputMessage/InvalidInputMessage.tsx
@@ -1,4 +1,3 @@
-import './InvalidInputMessage.scss';
import { motion } from 'framer-motion';
import { STAGERRED_SPRING_VARIANTS_2 } from '../../../utilities/constants';
import { InformationSVG } from '../../../svgs/Information';
diff --git a/apps/frontend/src/components/shared/StatusAlert/StatusAlert.scss b/apps/frontend/src/components/shared/StatusAlert/StatusAlert.scss
index 32d30d5c..6b39618f 100644
--- a/apps/frontend/src/components/shared/StatusAlert/StatusAlert.scss
+++ b/apps/frontend/src/components/shared/StatusAlert/StatusAlert.scss
@@ -1,4 +1,5 @@
-@import '../../../styles/constants.scss';
+@use 'sass:color';
+@use '../../../styles/constants' as *;
.alert {
padding: 0.75rem;
@@ -14,7 +15,7 @@
}
&:hover {
& path {
- stroke: darken($danger, 25%);
+ stroke: color.adjust($danger, $lightness: -25%);
}
}
}
@@ -26,7 +27,7 @@
}
&:hover {
& path {
- stroke: darken($success, 25%);
+ stroke: color.adjust($success, $lightness: -25%);
}
}
}
diff --git a/apps/frontend/src/components/shared/StatusAlert/StatusAlert.tsx b/apps/frontend/src/components/shared/StatusAlert/StatusAlert.tsx
index a13229be..d1012cb5 100755
--- a/apps/frontend/src/components/shared/StatusAlert/StatusAlert.tsx
+++ b/apps/frontend/src/components/shared/StatusAlert/StatusAlert.tsx
@@ -1,4 +1,3 @@
-import './StatusAlert.scss';
import { motion } from 'framer-motion';
import { Spinner, Col } from 'react-bootstrap';
diff --git a/apps/frontend/src/components/shared/ToastMessage/ToastMessage.scss b/apps/frontend/src/components/shared/ToastMessage/ToastMessage.scss
index 105f9711..569198c8 100644
--- a/apps/frontend/src/components/shared/ToastMessage/ToastMessage.scss
+++ b/apps/frontend/src/components/shared/ToastMessage/ToastMessage.scss
@@ -1,4 +1,5 @@
-@import '../../../styles/constants.scss';
+@use 'sass:color';
+@use '../../../styles/constants' as *;
.toast-container {
& .toast {
@@ -26,7 +27,7 @@
}
&:hover {
& svg path {
- stroke: darken($light, 15%);
+ stroke: color.adjust($light, $lightness: -15%);
}
}
}
@@ -74,7 +75,7 @@
span.btn-toast-close {
&:hover {
& svg path {
- stroke: lighten($light-dark, 15%);
+ stroke: color.adjust($light-dark, $lightness: 15%);
}
}
}
diff --git a/apps/frontend/src/components/shared/ToastMessage/ToastMessage.tsx b/apps/frontend/src/components/shared/ToastMessage/ToastMessage.tsx
index b7193b5c..e7f9b54e 100755
--- a/apps/frontend/src/components/shared/ToastMessage/ToastMessage.tsx
+++ b/apps/frontend/src/components/shared/ToastMessage/ToastMessage.tsx
@@ -1,4 +1,3 @@
-import './ToastMessage.scss';
import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
diff --git a/apps/frontend/src/components/shared/ToggleSwitch/ToggleSwitch.scss b/apps/frontend/src/components/shared/ToggleSwitch/ToggleSwitch.scss
index 549ca93a..f6411e08 100644
--- a/apps/frontend/src/components/shared/ToggleSwitch/ToggleSwitch.scss
+++ b/apps/frontend/src/components/shared/ToggleSwitch/ToggleSwitch.scss
@@ -1,4 +1,6 @@
-@import '../../../styles/constants.scss';
+@use 'sass:color';
+@use '../../../styles/constants' as *;
+@import 'bootstrap/scss/mixins';
.toggle {
color: $dark;
@@ -37,8 +39,8 @@
border-bottom-right-radius: 0.5rem;
}
&:hover {
- background-color: lighten($primary, 5%);
- border-color: lighten($primary, 5%);
+ background-color: color.adjust($primary, $lightness: 5%);
+ border-color: color.adjust($primary, $lightness: 5%);
}
}
&[data-isswitchon='true'] {
@@ -49,7 +51,7 @@
@include color-mode(dark) {
.toggle {
color: $white;
- background: lighten($card-bg-dark, 10%);
+ background: color.adjust($card-bg-dark, $lightness: 10%);
& .toggle-switch {
color: $card-bg-dark;
diff --git a/apps/frontend/src/components/ui/Header/Header.scss b/apps/frontend/src/components/ui/Header/Header.scss
index 94e2032f..b14c34ba 100644
--- a/apps/frontend/src/components/ui/Header/Header.scss
+++ b/apps/frontend/src/components/ui/Header/Header.scss
@@ -1,5 +1,5 @@
@use 'sass:math';
-@import '../../../styles/constants.scss';
+@use '../../../styles/constants' as *;
.header {
& .header-info-logo {
diff --git a/apps/frontend/src/components/ui/Menu/Menu.scss b/apps/frontend/src/components/ui/Menu/Menu.scss
index d3c258c5..2e6aeddb 100644
--- a/apps/frontend/src/components/ui/Menu/Menu.scss
+++ b/apps/frontend/src/components/ui/Menu/Menu.scss
@@ -1,6 +1,7 @@
-@import '../../../styles/constants.scss';
+@use '../../../styles/constants' as *;
.menu-dropdown.dropdown {
+ text-decoration: none;
& .dropdown-toggle.btn-menu {
background-color: $primary;
width: 8rem;
diff --git a/apps/frontend/src/components/ui/Settings/Settings.scss b/apps/frontend/src/components/ui/Settings/Settings.scss
index 6ce93e58..b76d2654 100644
--- a/apps/frontend/src/components/ui/Settings/Settings.scss
+++ b/apps/frontend/src/components/ui/Settings/Settings.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/constants.scss';
+@use '../../../styles/constants' as *;
.settings-menu.dropdown {
& .dropdown-toggle.btn-settings-menu {
@@ -25,7 +25,6 @@
@include color-mode(light) {
.settings-menu.dropdown {
- margin-left: 0.5rem;
& .dropdown-toggle.btn-settings-menu {
color: $white;
& svg path {
diff --git a/apps/frontend/src/index.tsx b/apps/frontend/src/index.tsx
index 97109845..26e97631 100755
--- a/apps/frontend/src/index.tsx
+++ b/apps/frontend/src/index.tsx
@@ -1,6 +1,7 @@
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { RouterProvider } from 'react-router-dom';
+import { Loading } from './components/ui/Loading/Loading';
import { createRootRouter } from './routes/router.config';
import { HttpService, RootService } from './services/http.service';
import logger from './services/logger.service';
@@ -38,7 +39,10 @@ async function bootstrapApp() {
const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
-
+ }
+ />
);
}
diff --git a/apps/frontend/src/routes/dataLoader.tsx b/apps/frontend/src/routes/dataLoader.tsx
index 045e9b78..2e766934 100644
--- a/apps/frontend/src/routes/dataLoader.tsx
+++ b/apps/frontend/src/routes/dataLoader.tsx
@@ -6,13 +6,11 @@ import { AppState } from "../store/store.type";
export async function rootLoader({}: LoaderFunctionArgs) {
const state = appStore.getState() as AppState;
if (state.root.authStatus.isAuthenticated) {
- const [connectwalletData, rootData] = await Promise.all([
- RootService.getConnectWallet(),
- RootService.fetchRootData()
- ]);
- return { ...rootData, connectWallet: connectwalletData };
+ const rootData = await RootService.fetchRootData();
+ const refreshData = await RootService.refreshData();
+ return [rootData, refreshData];
}
- return null
+ return null;
}
export async function clnLoader({}: LoaderFunctionArgs) {
diff --git a/apps/frontend/src/routes/router.config.tsx b/apps/frontend/src/routes/router.config.tsx
index f9e74478..ca11c938 100644
--- a/apps/frontend/src/routes/router.config.tsx
+++ b/apps/frontend/src/routes/router.config.tsx
@@ -4,8 +4,8 @@ import { Loading } from '../components/ui/Loading/Loading';
import AccountEventsRoot from '../components/bookkeeper/AccountEvents/AccountEventsRoot';
import SatsFlowRoot from '../components/bookkeeper/SatsFlow/SatsFlowRoot';
import VolumeRoot from '../components/bookkeeper/Volume/VolumeRoot';
-import { bkprLoader, clnLoader, rootLoader } from './dataLoader';
-import { RootRouterReduxSync, CLNRouterReduxSync, BKPRRouterReduxSync } from './routerReduxSync';
+import { rootLoader } from './dataLoader';
+import { RootRouterReduxSync } from './routerReduxSync';
const App = lazy(() => import('../components/App/App'));
const CLNHome = lazy(() => import('../components/cln/CLNHome/CLNHome'));
@@ -20,6 +20,7 @@ export const rootRouteConfig = [
),
+ HydrateFallback: () =>
,
loader: rootLoader,
children: [
{
@@ -27,20 +28,16 @@ export const rootRouteConfig = [
element: (
}>
-
),
- loader: clnLoader,
},
{
path: 'bookkeeper',
element: (
}>
-
),
- loader: bkprLoader,
children: [
{
path: 'accountevents',
@@ -78,6 +75,7 @@ export function createRootRouter() {
v7_relativeSplatPath: true,
v7_normalizeFormMethod: true,
v7_startTransition: true,
+ v7_partialHydration: true,
} as any
});
}
diff --git a/apps/frontend/src/routes/routerReduxSync.tsx b/apps/frontend/src/routes/routerReduxSync.tsx
index 59354a7d..a4b4fac0 100644
--- a/apps/frontend/src/routes/routerReduxSync.tsx
+++ b/apps/frontend/src/routes/routerReduxSync.tsx
@@ -1,50 +1,19 @@
-import { useLoaderData } from 'react-router-dom';
import { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
-import { clearBKPRStore, setAccountEvents, setSatsFlow, setVolume } from '../store/bkprSlice';
-import { clearCLNStore, setFeeRate, setListBitcoinTransactions, setListInvoices, setListOffers, setListPayments } from '../store/clnSlice';
-import { setListChannels, setListFunds, setListPeers, setNodeInfo, setConnectWallet } from '../store/rootSlice';
+import { clearBKPRStore } from '../store/bkprSlice';
+import { clearCLNStore } from '../store/clnSlice';
import { APP_WAIT_TIME } from '../utilities/constants';
import { useDispatch, useSelector } from 'react-redux';
-import { RootService } from '../services/http.service';
-import { RootLoaderData } from '../types/root.type';
-import { CLNLoaderData } from '../types/cln.type';
-import { BKPRLoaderData } from '../types/bookkeeper.type';
+import { BookkeeperService, CLNService, RootService } from '../services/http.service';
import { selectAuthStatus } from '../store/rootSelectors';
import logger from '../services/logger.service';
export function RootRouterReduxSync() {
const navigate = useNavigate();
- const rootData = useLoaderData() as RootLoaderData;
const dispatch = useDispatch();
const { pathname } = useLocation();
const authStatus = useSelector(selectAuthStatus);
-
- useEffect(() => {
- if (!rootData) return;
-
- if (authStatus.isAuthenticated && authStatus.isValidPassword) {
- if (rootData.nodeInfo) {
- dispatch(setNodeInfo(rootData.nodeInfo));
- }
- if (rootData.listChannels && rootData.listNodes) {
- dispatch(setListChannels({
- listChannels: rootData.listChannels,
- listNodes: rootData.listNodes
- }));
- }
- if (rootData.listPeers) {
- dispatch(setListPeers(rootData.listPeers));
- }
- if (rootData.listFunds) {
- dispatch(setListFunds(rootData.listFunds));
- }
- if (rootData.connectWallet) {
- dispatch(setConnectWallet(rootData.connectWallet));
- }
- }
- }, [authStatus.isAuthenticated, authStatus.isValidPassword, rootData, dispatch, pathname]);
-
+
// Handle polling
useEffect(() => {
if (!authStatus?.isAuthenticated || !authStatus?.isValidPassword) return;
@@ -52,11 +21,7 @@ export function RootRouterReduxSync() {
const interval = setInterval(async () => {
if (document.visibilityState === 'visible' && authStatus?.isAuthenticated) {
try {
- const rootData = await RootService.fetchRootData();
- dispatch(setNodeInfo(rootData?.nodeInfo));
- dispatch(setListChannels({listChannels: rootData?.listChannels, listNodes: rootData?.listNodes}));
- dispatch(setListPeers(rootData?.listPeers));
- dispatch(setListFunds(rootData?.listFunds));
+ await RootService.refreshData();
} catch (error) {
logger.error('Error fetching root data:', error);
}
@@ -68,7 +33,24 @@ export function RootRouterReduxSync() {
// Handle navigation for authenticated users
useEffect(() => {
+ const fetchRouteData = async () => {
+ if (pathname.includes('/cln')) {
+ try {
+ await CLNService.fetchCLNData();
+ } catch (error) {
+ logger.error('Error fetching CLN data:', error);
+ }
+ }
+ else if (pathname.includes('/bookkeeper')) {
+ try {
+ await BookkeeperService.fetchBKPRData();
+ } catch (error) {
+ logger.error('Error fetching BKPR data:', error);
+ }
+ }
+ };
const targetPath = pathname.includes('/bookkeeper') ? pathname : '/cln';
+ fetchRouteData();
if (pathname !== targetPath) {
navigate(targetPath, { replace: true });
}
@@ -88,65 +70,3 @@ export function RootRouterReduxSync() {
return null;
}
-
-export function CLNRouterReduxSync() {
- const clnData = useLoaderData() as CLNLoaderData;
- const dispatch = useDispatch();
- const authStatus = useSelector(selectAuthStatus);
-
- useEffect(() => {
- if (!clnData) return;
- if (authStatus.isAuthenticated && authStatus.isValidPassword) {
- if (clnData.listInvoices) {
- dispatch(setListInvoices(clnData.listInvoices));
- }
- if (clnData.listSendPays) {
- dispatch(setListPayments(clnData.listSendPays));
- }
- if (clnData.listOffers) {
- dispatch(setListOffers(clnData.listOffers));
- }
- if (clnData.listAccountEvents) {
- dispatch(setListBitcoinTransactions(clnData.listAccountEvents));
- }
- if (clnData.feeRates) {
- dispatch(setFeeRate(clnData.feeRates));
- }
- }
- }, [authStatus.isAuthenticated, authStatus.isValidPassword, clnData, dispatch]);
-
- return null;
-}
-
-export function BKPRRouterReduxSync() {
- const bkprData = useLoaderData() as BKPRLoaderData;
- const dispatch = useDispatch();
- const authStatus = useSelector(selectAuthStatus);
-
- useEffect(() => {
- if (!bkprData) return;
- if (authStatus.isAuthenticated && authStatus.isValidPassword) {
- if (bkprData.satsFlow) {
- dispatch(setSatsFlow({
- satsFlow: bkprData.satsFlow,
- timeGranularity: bkprData.timeGranularity,
- startTimestamp: bkprData.startTimestamp,
- endTimestamp: bkprData.endTimestamp
- }));
- }
- if (bkprData.accountEvents) {
- dispatch(setAccountEvents({
- accountEvents: bkprData.accountEvents,
- timeGranularity: bkprData.timeGranularity,
- startTimestamp: bkprData.startTimestamp,
- endTimestamp: bkprData.endTimestamp
- }));
- }
- if (bkprData.volume) {
- dispatch(setVolume({ volume: bkprData.volume }));
- }
- }
- }, [authStatus.isAuthenticated, authStatus.isValidPassword, bkprData, dispatch]);
-
- return null;
-}
diff --git a/apps/frontend/src/services/data-transform.service.ts b/apps/frontend/src/services/data-transform.service.ts
index 0c160aab..77a151e2 100644
--- a/apps/frontend/src/services/data-transform.service.ts
+++ b/apps/frontend/src/services/data-transform.service.ts
@@ -10,7 +10,10 @@ import {
BkprSummaryInfo,
SummaryRoute,
} from '../types/bookkeeper.type';
+import { BTCTransaction, LightningTransaction, Offer } from '../types/cln.type';
+import { PeerChannel } from '../types/root.type';
import { getPeriodKey, getTimestampFromPeriodKey, getTimestampWithGranularity, secondsForTimeGranularity, TimeGranularity } from '../utilities/constants';
+import { sortDescByKey } from '../utilities/data-formatters';
export function calculateAllPeriodKeys(
calculateFor: string,
@@ -358,8 +361,8 @@ const mapToAccountEventsAccounts = (row: (string | null | number)[]): AccountEve
balance_msat: 0 as number,
});
-export const convertArrayToAccountEventsObj = (raw: any[]): AccountEventsAccount[] => {
- return raw.map(mapToAccountEventsAccounts).sort((a, b) => a.timestamp - b.timestamp);
+export const convertArrayToAccountEventsObj = (row: any[]): AccountEventsAccount[] => {
+ return row.map(mapToAccountEventsAccounts).sort((a, b) => a.timestamp - b.timestamp);
};
const mapToSatsFlowEvents = (row: (string | number)[]): SatsFlowEvent => ({
@@ -375,8 +378,8 @@ const mapToSatsFlowEvents = (row: (string | number)[]): SatsFlowEvent => ({
payment_id: row[9] as string,
});
-export const convertArrayToSatsFlowObj = (raw: any[]): SatsFlowEvent[] => {
- return raw.map(mapToSatsFlowEvents).sort((a, b) => a.timestamp - b.timestamp);
+export const convertArrayToSatsFlowObj = (row: any[]): SatsFlowEvent[] => {
+ return row.map(mapToSatsFlowEvents).sort((a, b) => a.timestamp - b.timestamp);
};
const mapToVolume = (row: (string | number)[]): VolumeRow => ({
@@ -391,6 +394,188 @@ const mapToVolume = (row: (string | number)[]): VolumeRow => ({
fee_msat: row[8] as number,
});
-export const convertArrayToVolumeObj = (raw: any[]): VolumeRow[] => {
- return raw.map(mapToVolume).sort((a, b) => a.fee_msat - b.fee_msat);
+export const convertArrayToVolumeObj = (row: any[]): VolumeRow[] => {
+ return row.map(mapToVolume).sort((a, b) => a.fee_msat - b.fee_msat);
+};
+
+export const convertArrayToPeerChannelsObj = (rows: any[]): PeerChannel[] => {
+ const channels = rows.map((row: any[]) => ({
+ node_alias: row[0],
+ peer_id: row[1],
+ channel_id: row[2],
+ short_channel_id: row[3],
+ state: row[4],
+ peer_connected: row[5],
+ to_us_msat: row[6],
+ total_msat: row[7],
+ their_to_self_delay: row[8],
+ opener: row[9],
+ private: row[10],
+ dust_limit_msat: row[11],
+ spendable_msat: row[12],
+ receivable_msat: row[13],
+ funding_txid: row[14],
+ current_state: '',
+ total_sat: Math.floor((row[7] || 0) / 1000),
+ to_us_sat: Math.floor((row[6] || 0) / 1000),
+ to_them_sat: Math.floor(((row[7] || 0) - (row[6] || 0)) / 1000)
+ }));
+
+ return channels;
+};
+
+const paymentReducer = (accumulator, currentLightningTx) => {
+ const currPayHash = currentLightningTx.payment_hash;
+ currentLightningTx = { ...currentLightningTx };
+ if(currentLightningTx.type === 'PAYMENT') {
+ if (!currentLightningTx.partid) { currentLightningTx.partid = 0; }
+ if (!accumulator[currPayHash]) {
+ accumulator[currPayHash] = [currentLightningTx];
+ } else {
+ accumulator[currPayHash].push(currentLightningTx);
+ }
+ } else {
+ accumulator[currPayHash] = [currentLightningTx];
+ }
+ return accumulator;
+};
+
+const summaryReducer = (accumulator, mpp) => {
+ if (mpp.status?.toLowerCase() === 'complete') {
+ accumulator.amount_msat = accumulator.amount_msat + mpp.amount_msat;
+ accumulator.amount_sent_msat = accumulator.amount_sent_msat + mpp.amount_sent_msat;
+ accumulator.status = mpp.status;
+ }
+ if (mpp.bolt11 && !accumulator.bolt11) { accumulator.bolt11 = mpp.bolt11; }
+ if (mpp.bolt12 && !accumulator.bolt12) { accumulator.bolt12 = mpp.bolt12; }
+ if (mpp.label && !accumulator.label) { accumulator.label = mpp.label; }
+ if (mpp.description && !accumulator.description) { accumulator.description = mpp.description; }
+ if (mpp.payment_preimage && !accumulator.payment_preimage) { accumulator.payment_preimage = mpp.payment_preimage; }
+ return accumulator;
+};
+
+const groupBy = (lightningTxs) => {
+ const lightningTxsInGroups = lightningTxs?.reduce(paymentReducer, {});
+ const lightningTxsGrpArray = Object.keys(lightningTxsInGroups)?.map((key) => (
+ lightningTxsInGroups[key][0].type === 'PAYMENT'
+ && lightningTxsInGroups[key].length
+ && lightningTxsInGroups[key].length > 1)
+ ? sortDescByKey(lightningTxsInGroups[key], 'partid') : lightningTxsInGroups[key]);
+ return lightningTxsGrpArray?.reduce((acc, curr) => {
+ let temp: any = {};
+ if (curr.length && curr.length === 1) {
+ // For PAYMENT & INVOICE both
+ temp = JSON.parse(JSON.stringify(curr[0]));
+ if (curr[0].type === 'PAYMENT') {
+ temp.is_group = false;
+ temp.is_expanded = false;
+ temp.total_parts = 1;
+ delete temp.partid;
+ }
+ } else {
+ // Only applies on MPP PAYMENTS
+ const paySummary = curr?.reduce(summaryReducer, { amount_msat: 0, amount_sent_msat: 0, status: (curr[0] && curr[0].status) ? curr[0].status : 'failed' });
+ temp = {
+ type: 'PAYMENT', is_group: true, is_expanded: false, total_parts: (curr.length ? curr.length : 0), status: paySummary.status, payment_hash: curr[0].payment_hash,
+ destination: curr[0].destination, amount_msat: paySummary.amount_msat, amount_sent_msat: paySummary.amount_sent_msat, created_at: curr[0].created_at,
+ mpps: curr
+ };
+ if (paySummary.bolt11) { temp.bolt11 = paySummary.bolt11; }
+ if (paySummary.bolt12) { temp.bolt12 = paySummary.bolt12; }
+ if (paySummary.bolt11 && !temp.bolt11) { temp.bolt11 = paySummary.bolt11; }
+ if (paySummary.bolt12 && !temp.bolt12) { temp.bolt12 = paySummary.bolt12; }
+ if (paySummary.label && !temp.label) { temp.label = paySummary.label; }
+ if (paySummary.description && !temp.description) { temp.description = paySummary.description; }
+ if (paySummary.payment_preimage && !temp.payment_preimage) { temp.payment_preimage = paySummary.payment_preimage; }
+ }
+ return acc.concat(temp);
+ }, []);
+};
+
+export const convertArrayToLightningTransactionsObj = (rows: any[]): LightningTransaction[] => {
+ if (!rows || rows.length === 0) { return []; }
+ const lightningTransactions = rows.map((row: any[]) => {
+ const type = row[0];
+ if (type === 'INVOICE') {
+ return {
+ type: 'INVOICE',
+ payment_hash: row[1],
+ status: row[2],
+ label: row[3],
+ description: row[4],
+ bolt11: row[5],
+ bolt12: row[6],
+ payment_preimage: row[7],
+ amount_msat: row[8],
+ amount_received_msat: row[9],
+ expires_at: row[10],
+ paid_at: row[11],
+ } as LightningTransaction;
+ } else {
+ return {
+ type: 'PAYMENT',
+ payment_hash: row[1],
+ status: row[2],
+ label: row[3],
+ description: row[4],
+ bolt11: row[5],
+ bolt12: row[6],
+ payment_preimage: row[7],
+ amount_msat: row[8],
+ amount_sent_msat: row[9],
+ created_at: row[10],
+ completed_at: row[11],
+ destination: row[12],
+ groupid: row[13],
+ partid: row[14],
+ } as LightningTransaction;
+ }
+ });
+ const lightningTransactionsAfterGroupedPayments = groupBy(lightningTransactions);
+ return lightningTransactionsAfterGroupedPayments;
+};
+
+export const convertArrayToOffersObj = (rows: any[]): Offer[] => {
+ if (!rows || rows.length === 0) { return []; }
+ const offers = rows.map((row: any[]) => ({
+ offer_id: row[0],
+ active: row[1],
+ single_use: row[2],
+ bolt12: row[3],
+ used: row[4],
+ label: row[5],
+ description: row[6],
+ }));
+
+ return offers;
+};
+
+export const convertArrayToBTCTransactionsObj = (rows: any[]): BTCTransaction[] => {
+ if (!rows || rows.length === 0) { return []; }
+ const transactions: BTCTransaction[] = rows.map((row: any[]) => ({
+ account: 'wallet',
+ blockheight: row[0],
+ credit_msat: row[1] || 0,
+ currency: 'bcrt',
+ debit_msat: row[2] || 0,
+ outpoint: row[3],
+ tag: row[4],
+ timestamp: row[5],
+ txid: row[6],
+ type: 'chain'
+ }));
+
+ // Merge change outputs with their withdrawal transactions
+ return transactions.reduce((acc: BTCTransaction[], tx) => {
+ const lastTx = acc[acc.length - 1];
+ // Check if this deposit is change from the previous withdrawal
+ const isChangeOutput = lastTx && lastTx.tag?.toLowerCase() === 'withdrawal' && tx.tag?.toLowerCase() === 'deposit' && lastTx.timestamp === tx.timestamp && tx.outpoint?.includes(lastTx.txid || '');
+ if (isChangeOutput) {
+ // Subtract change from withdrawal to get net amount
+ lastTx.debit_msat = (lastTx.debit_msat as number) - (tx.credit_msat as number);
+ } else {
+ acc.push(tx);
+ }
+ return acc;
+ }, []);
};
diff --git a/apps/frontend/src/services/http.service.ts b/apps/frontend/src/services/http.service.ts
index c764ecf5..79d8878e 100644
--- a/apps/frontend/src/services/http.service.ts
+++ b/apps/frontend/src/services/http.service.ts
@@ -1,17 +1,22 @@
import axios from 'axios';
import moment from 'moment';
-import { ApplicationConfiguration, AuthResponse } from '../types/root.type';
-import { API_BASE_URL, API_VERSION, APP_WAIT_TIME, PaymentType, TimeGranularity, getTimestampWithGranularity, SATS_MSAT } from '../utilities/constants';
+import { ApplicationConfiguration, AuthResponse, Peer } from '../types/root.type';
+import { API_BASE_URL, API_VERSION, APP_WAIT_TIME, PaymentType, TimeGranularity, getTimestampWithGranularity, SATS_MSAT, SCROLL_PAGE_SIZE } from '../utilities/constants';
import { AccountEventsSQL, SatsFlowSQL, VolumeSQL } from '../utilities/bookkeeper-sql';
import logger from './logger.service';
-import { convertArrayToAccountEventsObj, convertArrayToSatsFlowObj, convertArrayToVolumeObj } from './data-transform.service';
+import { convertArrayToAccountEventsObj, convertArrayToBTCTransactionsObj, convertArrayToLightningTransactionsObj, convertArrayToOffersObj, convertArrayToSatsFlowObj, convertArrayToVolumeObj } from './data-transform.service';
import { defaultRootState } from '../store/rootSelectors';
import { AppState } from '../store/store.type';
import { appStore } from '../store/appStore';
+import { AccountEventsAccount, SatsFlowEvent, VolumeRow } from '../types/bookkeeper.type';
+import { listBTCTransactionsSQL, listLightningTransactionsSQL, ListOffersSQL } from '../utilities/cln-sql';
+import { setConnectWallet, setListChannels, setListFunds, setNodeInfo } from '../store/rootSlice';
+import { setFeeRate, setListBitcoinTransactions, setListLightningTransactions, setListOffers } from '../store/clnSlice';
+import { setAccountEvents, setSatsFlow, setVolume } from '../store/bkprSlice';
const axiosInstance = axios.create({
baseURL: API_BASE_URL + API_VERSION,
- timeout: APP_WAIT_TIME * 5,
+ timeout: APP_WAIT_TIME * 10,
withCredentials: true,
});
@@ -24,18 +29,42 @@ function handleAxiosError(error) {
}
async function executeRequests
>>(
- requests: T
+ requests: T,
+ onEachComplete?: (key: keyof T, data: any) => void
): Promise {
const entries = Object.entries(requests) as [keyof T, T[keyof T]][];
- const settledResults = await Promise.allSettled(entries.map(([item, promise]) => {
- logger.info(item);
- return promise;
- }));
-
+ const settledResults = await Promise.allSettled(
+ entries.map(([key, promise]) => {
+ logger.info(key);
+
+ return promise
+ .then((value) => {
+ if (onEachComplete) {
+ onEachComplete(key, {
+ ...value,
+ error: null,
+ isLoading: false,
+ });
+ }
+ return value;
+ })
+ .catch((error) => {
+ if (onEachComplete) {
+ onEachComplete(key, {
+ error: handleAxiosError(error),
+ isLoading: false,
+ });
+ }
+ throw error;
+ });
+ })
+ );
+
+ // Still return the combined results for the caller
return entries.reduce((acc, [name], index) => {
const result = settledResults[index];
acc[name] = {
- ...result.status === 'fulfilled' ? result.value : null,
+ ...(result.status === 'fulfilled' ? result.value : null),
error: result.status === 'rejected' ? handleAxiosError(result.reason) : null,
isLoading: false,
};
@@ -97,7 +126,7 @@ export class HttpService {
}
}
- static async clnCall(method: string, params: Record = {}) {
+ static async clnCall(method: string, params: Record = {}): Promise {
try {
return await this.post('/cln/call', { method, params });
} catch (error) {
@@ -170,18 +199,26 @@ export class RootService {
}
static async listChannels() {
- return HttpService.clnCall('listpeerchannels');
- }
-
- static async listNodes() {
- return HttpService.clnCall('listnodes');
- }
-
- static async listPeers() {
- return HttpService.clnCall('listpeers');
+ const [peerChannels, nodes]: [any, any] = await Promise.all([
+ HttpService.clnCall('listpeerchannels'),
+ HttpService.clnCall('listnodes')
+ ]);
+ const nodesMap = new Map(
+ nodes.nodes?.map(node => [node.nodeid, node]) || []
+ );
+ const merged = peerChannels.channels?.map(channel => ({
+ ...channel,
+ node_alias: nodesMap.get(channel.peer_id)?.alias ?? ''
+ })) || [];
+ return { channels: merged };
+ // // No pagination, need full data for active, pending and inactive channels calculations
+ // // Un-comment after sql plugin improvements
+ // const listChannelsArr: any = await HttpService.clnCall('sql', { query: ListPeerChannelsSQL });
+ // return { channels: convertArrayToPeerChannelsObj(listChannelsArr.rows ? listChannelsArr.rows : []) };
}
static async listFunds() {
+ // No pagination, need full data for balance calculations
return HttpService.clnCall('listfunds');
}
@@ -208,40 +245,56 @@ export class RootService {
}
static async fetchRootData() {
- const nodeResult = await executeRequests({
+ const results = await executeRequests({
nodeInfo: this.getNodeInfo(),
+ connectWallet: this.getConnectWallet(),
+ },
+ (key, data) => {
+ switch(key) {
+ case 'nodeInfo':
+ appStore.dispatch(setNodeInfo(data));
+ break;
+ case 'connectWallet':
+ appStore.dispatch(setConnectWallet(data));
+ break;
+ }
});
+ return results;
+ }
+
+ static async refreshData() {
const results = await executeRequests({
- listChannels: this.listChannels(),
- listNodes: this.listNodes(),
- listPeers: this.listPeers(),
listFunds: this.listFunds(),
+ listChannels: this.listChannels(),
+ },
+ (key, data) => {
+ switch(key) {
+ case 'listFunds':
+ appStore.dispatch(setListFunds(data));
+ break;
+ case 'listChannels':
+ appStore.dispatch(setListChannels(data));
+ break;
+ }
});
- return {
- nodeInfo: nodeResult.nodeInfo,
- listChannels: results.listChannels,
- listNodes: results.listNodes,
- listPeers: results.listPeers,
- listFunds: results.listFunds,
- };
+ return results;
}
}
export class CLNService {
- static async listInvoices() {
- return HttpService.clnCall('listinvoices');
+ static async listLightningTransactions(offset: number) {
+ const listCLNTransactionsArr: any = await HttpService.clnCall('sql', { query: listLightningTransactionsSQL(SCROLL_PAGE_SIZE, offset) });
+ return { clnTransactions: convertArrayToLightningTransactionsObj(listCLNTransactionsArr.rows ? listCLNTransactionsArr.rows : []) };
}
- static async listSendPays() {
- return HttpService.clnCall('listsendpays');
+ static async listOffers(offset: number) {
+ const listOffersArr: any = await HttpService.clnCall('sql', { query: ListOffersSQL(SCROLL_PAGE_SIZE, offset) });
+ return { offers: convertArrayToOffersObj(listOffersArr.rows ? listOffersArr.rows : []) };
}
- static async listOffers() {
- return HttpService.clnCall('listoffers');
- }
-
- static async listAccountEvents() {
- return HttpService.clnCall('bkpr-listaccountevents');
+ static async listBTCTransactions(offset: number) {
+ const listBTCTransactionsArr: any = await HttpService.clnCall('sql', { query: listBTCTransactionsSQL(SCROLL_PAGE_SIZE, offset) });
+ return { btcTransactions: convertArrayToBTCTransactionsObj(listBTCTransactionsArr.rows ? listBTCTransactionsArr.rows : []) };
}
static async getFeeRates() {
@@ -312,30 +365,69 @@ export class CLNService {
static async fetchCLNData() {
const state = appStore.getState() as AppState;
if (state.root.authStatus.isAuthenticated) {
- const results = await executeRequests({
- listInvoices: this.listInvoices(),
- listSendPays: this.listSendPays(),
- listOffers: this.listOffers(),
- listAccountEvents: this.listAccountEvents(),
- feeRates: this.getFeeRates()
- });
-
+ const results = await executeRequests(
+ {
+ feeRates: this.getFeeRates(),
+ listBtcTransactions: this.listBTCTransactions(0),
+ listOffers: this.listOffers(0),
+ listLightningTransactions: this.listLightningTransactions(0),
+ },
+ (key, data) => {
+ switch(key) {
+ case 'feeRates':
+ appStore.dispatch(setFeeRate(data));
+ break;
+ case 'listBtcTransactions':
+ appStore.dispatch(setListBitcoinTransactions({
+ ...data,
+ page: 1,
+ hasMore: data.btcTransactions?.length >= SCROLL_PAGE_SIZE, // Could be greater also due to payment_hash aggregation
+ }));
+ break;
+ case 'listOffers':
+ appStore.dispatch(setListOffers({
+ ...data,
+ page: 1,
+ hasMore: data.offers?.length === SCROLL_PAGE_SIZE,
+ }));
+ break;
+ case 'listLightningTransactions':
+ appStore.dispatch(setListLightningTransactions({
+ ...data,
+ page: 1,
+ hasMore: data.clnTransactions?.length >= SCROLL_PAGE_SIZE, // Could be greater also due to unique_timestamps aggregation
+ }));
+ break;
+ }
+ }
+ );
+
return {
- listInvoices: results.listInvoices,
- listSendPays: results.listSendPays,
- listOffers: results.listOffers,
- listAccountEvents: results.listAccountEvents,
feeRates: results.feeRates,
+ listBitcoinTransactions: {
+ ...results.listBtcTransactions,
+ page: 1,
+ hasMore: results.listBtcTransactions.btcTransactions?.length >= SCROLL_PAGE_SIZE,
+ },
+ listOffers: {
+ ...results.listOffers,
+ page: 1,
+ hasMore: results.listOffers.offers?.length === SCROLL_PAGE_SIZE,
+ },
+ listLightningTransactions: {
+ ...results.listLightningTransactions,
+ page: 1,
+ hasMore: results.listLightningTransactions.clnTransactions?.length >= SCROLL_PAGE_SIZE,
+ }
};
}
}
-
}
export class BookkeeperService {
static async getAccountEvents() {
try {
- const accountEvents = await HttpService.clnCall('sql', [AccountEventsSQL]);
+ const accountEvents = await HttpService.clnCall('sql', { query: AccountEventsSQL }) as { events: AccountEventsAccount[], rows?: [], error?: any };
if (accountEvents.rows) {
accountEvents.events = convertArrayToAccountEventsObj(accountEvents.rows);
delete accountEvents.rows;
@@ -349,7 +441,7 @@ export class BookkeeperService {
static async getSatsFlow(startTimestamp: number, endTimestamp: number) {
try {
- const satsFlow = await HttpService.clnCall('sql', [SatsFlowSQL(startTimestamp, endTimestamp)]);
+ const satsFlow = await HttpService.clnCall('sql', { query: SatsFlowSQL(startTimestamp, endTimestamp) }) as { satsFlowEvents: SatsFlowEvent[], rows?: [], error?: any };
if (satsFlow.rows) {
satsFlow.satsFlowEvents = convertArrayToSatsFlowObj(satsFlow.rows);
delete satsFlow.rows;
@@ -363,7 +455,7 @@ export class BookkeeperService {
static async getVolume() {
try {
- const volume = await HttpService.clnCall('sql', [VolumeSQL]);
+ const volume = await HttpService.clnCall('sql', { query: VolumeSQL }) as { forwards: VolumeRow[], rows?: [], error?: any };
if (volume.rows) {
volume.forwards = convertArrayToVolumeObj(volume.rows);
delete volume.rows;
@@ -383,12 +475,36 @@ export class BookkeeperService {
const oneMonthBack = moment(currentDate).subtract(1, 'month').add(1, 'day').toDate();
const startTimestamp = getTimestampWithGranularity(timeGranularity, oneMonthBack, 'start');
const endTimestamp = getTimestampWithGranularity(timeGranularity, currentDate, 'end');
-
- const results = await executeRequests({
- accountEvents: this.getAccountEvents(),
- satsFlow: this.getSatsFlow(startTimestamp, endTimestamp),
- volume: this.getVolume()
- });
+ const results = await executeRequests(
+ {
+ accountEvents: this.getAccountEvents(),
+ satsFlow: this.getSatsFlow(startTimestamp, endTimestamp),
+ volume: this.getVolume()
+ },
+ (key, data) => {
+ switch(key) {
+ case 'accountEvents':
+ appStore.dispatch(setAccountEvents({
+ accountEvents: data,
+ timeGranularity,
+ startTimestamp,
+ endTimestamp
+ }));
+ break;
+ case 'satsFlow':
+ appStore.dispatch(setSatsFlow({
+ satsFlow: data,
+ timeGranularity,
+ startTimestamp,
+ endTimestamp
+ }));
+ break;
+ case 'volume':
+ appStore.dispatch(setVolume({ volume: data }));
+ break;
+ }
+ }
+ );
return {
timeGranularity,
@@ -400,5 +516,5 @@ export class BookkeeperService {
};
}
}
-
+
}
diff --git a/apps/frontend/src/setupTests.ts b/apps/frontend/src/setupTests.ts
index 68a68b82..8b48554b 100644
--- a/apps/frontend/src/setupTests.ts
+++ b/apps/frontend/src/setupTests.ts
@@ -1,5 +1,5 @@
import '@testing-library/jest-dom';
-import { spyOnBKPRGetAccountEvents, spyOnBKPRGetSatsFlow, spyOnBKPRGetVolume, spyOnGetInfo, spyOnListChannels, spyOnListFunds, spyOnListNodes, spyOnListPeers } from './utilities/test-utilities/mockService';
+import { spyOnBKPRGetAccountEvents, spyOnBKPRGetSatsFlow, spyOnBKPRGetVolume, spyOnGetInfo, spyOnListChannels, spyOnListFunds } from './utilities/test-utilities/mockService';
import { TextEncoder, TextDecoder } from 'util';
global.TextEncoder = TextEncoder;
@@ -19,9 +19,7 @@ beforeEach(() => {
jest.clearAllMocks();
jest.useFakeTimers();
spyOnGetInfo();
- spyOnListNodes();
spyOnListChannels();
- spyOnListPeers();
spyOnListFunds();
spyOnBKPRGetAccountEvents();
spyOnBKPRGetSatsFlow();
diff --git a/apps/frontend/src/store/bkprSlice.tsx b/apps/frontend/src/store/bkprSlice.tsx
index a333c71d..cb645b87 100644
--- a/apps/frontend/src/store/bkprSlice.tsx
+++ b/apps/frontend/src/store/bkprSlice.tsx
@@ -1,6 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { TimeGranularity } from '../utilities/constants';
-import { AccountEvents, SatsFlow, VolumeData } from '../types/bookkeeper.type';
+import { AccountEvents, SatsFlowEvent, VolumeData } from '../types/bookkeeper.type';
import { transformAccountEventsByPeriods, transformSatsFlowByPeriods, transformVolumeData } from '../services/data-transform.service';
import { defaultBKPRState } from './bkprSelectors';
@@ -35,7 +35,7 @@ const bkprSlice = createSlice({
setSatsFlow: (
state,
action: PayloadAction<{
- satsFlow: SatsFlow;
+ satsFlow: { satsFlowEvents: SatsFlowEvent[], error?: any };
timeGranularity: TimeGranularity;
startTimestamp: number;
endTimestamp: number;
diff --git a/apps/frontend/src/store/clnSelectors.tsx b/apps/frontend/src/store/clnSelectors.tsx
index 2c9aa4aa..26eb9b48 100644
--- a/apps/frontend/src/store/clnSelectors.tsx
+++ b/apps/frontend/src/store/clnSelectors.tsx
@@ -2,26 +2,14 @@ import { createSelector } from '@reduxjs/toolkit';
import { CLNState } from '../types/cln.type';
export const defaultCLNState: CLNState = {
- listInvoices: { isLoading: true, invoices: [] },
- listPayments: { isLoading: true, payments: [] },
- listOffers: { isLoading: true, offers: [] },
- listLightningTransactions: { isLoading: true, clnTransactions: [] },
- listBitcoinTransactions: { isLoading: true, btcTransactions: [] },
+ listOffers: { isLoading: true, page: 0, hasMore: true, offers: [] },
+ listLightningTransactions: { isLoading: true, page: 0, hasMore: true, clnTransactions: [] },
+ listBitcoinTransactions: { isLoading: true, page: 0, hasMore: true, btcTransactions: [] },
feeRate: { isLoading: true },
};
const selectCLNState = (state: { cln: CLNState }) => state.cln || defaultCLNState;
-export const selectListInvoices = createSelector(
- selectCLNState,
- (cln) => cln.listInvoices
-);
-
-export const selectListPayments = createSelector(
- selectCLNState,
- (cln) => cln.listPayments
-);
-
export const selectListOffers = createSelector(
selectCLNState,
(cln) => cln.listOffers
@@ -43,13 +31,13 @@ export const selectFeeRate = createSelector(
);
export const selectInvoiceByHash = (paymentHash: string) => createSelector(
- selectListInvoices,
- (data) => data.invoices?.find(inv => inv.payment_hash === paymentHash)
+ selectListLightningTransactions,
+ (data) => data.clnTransactions?.find(inv => inv.payment_hash === paymentHash)
);
export const selectPaymentByHash = (paymentHash: string) => createSelector(
- selectListPayments,
- (data) => data.payments?.find(pay => pay.payment_hash === paymentHash)
+ selectListLightningTransactions,
+ (data) => data.clnTransactions?.find(pay => pay.payment_hash === paymentHash)
);
export const selectCurrentFeeRate = createSelector(
diff --git a/apps/frontend/src/store/clnSlice.tsx b/apps/frontend/src/store/clnSlice.tsx
index a2c2aa31..c8ef9a8b 100644
--- a/apps/frontend/src/store/clnSlice.tsx
+++ b/apps/frontend/src/store/clnSlice.tsx
@@ -1,171 +1,100 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { ListInvoices, ListPayments, ListOffers, BkprTransaction, NodeFeeRate, Invoice, Payment, AccountEvents } from '../types/cln.type';
-import { sortDescByKey } from '../utilities/data-formatters';
+import { ListOffers, NodeFeeRate, ListLightningTransactions, ListBitcoinTransactions } from '../types/cln.type';
import { defaultCLNState } from './clnSelectors';
-const paymentReducer = (accumulator, currentPayment) => {
- const currPayHash = currentPayment.payment_hash;
- currentPayment = { ...currentPayment };
- if (!currentPayment.partid) { currentPayment.partid = 0; }
- if (!accumulator[currPayHash]) {
- accumulator[currPayHash] = [currentPayment];
- } else {
- accumulator[currPayHash].push(currentPayment);
- }
- return accumulator;
-};
-
-const summaryReducer = (accumulator, mpp) => {
- if (mpp.status?.toLowerCase() === 'complete') {
- accumulator.amount_msat = accumulator.amount_msat + mpp.amount_msat;
- accumulator.amount_sent_msat = accumulator.amount_sent_msat + mpp.amount_sent_msat;
- accumulator.status = mpp.status;
- }
- if (mpp.bolt11 && !accumulator.bolt11) { accumulator.bolt11 = mpp.bolt11; }
- if (mpp.bolt12 && !accumulator.bolt12) { accumulator.bolt12 = mpp.bolt12; }
- if (mpp.label && !accumulator.label) { accumulator.label = mpp.label; }
- if (mpp.description && !accumulator.description) { accumulator.description = mpp.description; }
- if (mpp.payment_preimage && !accumulator.payment_preimage) { accumulator.payment_preimage = mpp.payment_preimage; }
- return accumulator;
-};
-
-const groupBy = (payments) => {
- const paymentsInGroups = payments?.reduce(paymentReducer, {});
- const paymentsGrpArray = Object.keys(paymentsInGroups)?.map((key) => ((paymentsInGroups[key].length && paymentsInGroups[key].length > 1) ? sortDescByKey(paymentsInGroups[key], 'partid') : paymentsInGroups[key]));
- return paymentsGrpArray?.reduce((acc, curr) => {
- let temp: any = {};
- if (curr.length && curr.length === 1) {
- temp = JSON.parse(JSON.stringify(curr[0]));
- temp.is_group = false;
- temp.is_expanded = false;
- temp.total_parts = 1;
- delete temp.partid;
- } else {
- const paySummary = curr?.reduce(summaryReducer, { amount_msat: 0, amount_sent_msat: 0, status: (curr[0] && curr[0].status) ? curr[0].status : 'failed' });
- temp = {
- is_group: true, is_expanded: false, total_parts: (curr.length ? curr.length : 0), status: paySummary.status, payment_hash: curr[0].payment_hash,
- destination: curr[0].destination, amount_msat: paySummary.amount_msat, amount_sent_msat: paySummary.amount_sent_msat, created_at: curr[0].created_at,
- mpps: curr
- };
- if (paySummary.bolt11) { temp.bolt11 = paySummary.bolt11; }
- if (paySummary.bolt12) { temp.bolt12 = paySummary.bolt12; }
- if (paySummary.bolt11 && !temp.bolt11) { temp.bolt11 = paySummary.bolt11; }
- if (paySummary.bolt12 && !temp.bolt12) { temp.bolt12 = paySummary.bolt12; }
- if (paySummary.label && !temp.label) { temp.label = paySummary.label; }
- if (paySummary.description && !temp.description) { temp.description = paySummary.description; }
- if (paySummary.payment_preimage && !temp.payment_preimage) { temp.payment_preimage = paySummary.payment_preimage; }
- }
- return acc.concat(temp);
- }, []);
-};
-
-const mergeLightningTransactions = (invoices: Invoice[], payments: Payment[]) => {
- let mergedTransactions: any[] = [];
- let totalTransactionsLength = (invoices?.length || 0) + (payments?.length || 0);
- for (let i = 0, v = 0, p = 0; i < totalTransactionsLength; i++) {
- if (v === (invoices?.length || 0)) {
- payments.slice(p)?.map(payment => {
- mergedTransactions.push({ type: 'PAYMENT', payment_hash: payment.payment_hash, status: payment.status, amount_msat: (payment.amount_msat || payment.msatoshi), label: payment.label, bolt11: payment.bolt11, description: payment.description, bolt12: payment.bolt12, payment_preimage: payment.payment_preimage, created_at: payment.created_at, amount_sent_msat: (payment.amount_sent_msat || payment.msatoshi_sent), destination: payment.destination, expires_at: null, amount_received_msat: null, paid_at: null });
- return payment;
- })
- i = totalTransactionsLength;
- } else if (p === (payments?.length || 0)) {
- invoices.slice(v)?.map(invoice => {
- if (invoice.status !== 'expired') {
- mergedTransactions.push({ type: 'INVOICE', payment_hash: invoice.payment_hash, status: invoice.status, amount_msat: (invoice.amount_msat || invoice.msatoshi), label: invoice.label, bolt11: invoice.bolt11, description: invoice.description, bolt12: invoice.bolt12, payment_preimage: invoice.payment_preimage, created_at: null, amount_sent_msat: null, destination: null, expires_at: invoice.expires_at, amount_received_msat: (invoice.amount_received_msat || invoice.msatoshi_received), paid_at: invoice.paid_at });
- }
- return invoice;
- });
- i = totalTransactionsLength;
- } else if ((payments[p].created_at || 0) >= (invoices[v].paid_at || invoices[v].expires_at || 0)) {
- mergedTransactions.push({ type: 'PAYMENT', payment_hash: payments[p].payment_hash, status: payments[p].status, amount_msat: (payments[p].amount_msat || payments[p].msatoshi), label: payments[p].label, bolt11: payments[p].bolt11, description: payments[p].description, bolt12: payments[p].bolt12, payment_preimage: payments[p].payment_preimage, created_at: payments[p].created_at, amount_sent_msat: (payments[p].amount_sent_msat || payments[p].msatoshi_sent), destination: payments[p].destination, expires_at: null, amount_received_msat: null, paid_at: null });
- p++;
- } else if ((payments[p].created_at || 0) < (invoices[v].paid_at || invoices[v].expires_at || 0)) {
- if (invoices[v].status !== 'expired') {
- mergedTransactions.push({ type: 'INVOICE', payment_hash: invoices[v].payment_hash, status: invoices[v].status, amount_msat: (invoices[v].amount_msat || invoices[v].msatoshi), label: invoices[v].label, bolt11: invoices[v].bolt11, description: invoices[v].description, bolt12: invoices[v].bolt12, payment_preimage: invoices[v].payment_preimage, created_at: null, amount_sent_msat: null, destination: null, expires_at: invoices[v].expires_at, amount_received_msat: (invoices[v].amount_received_msat || invoices[v].msatoshi_received), paid_at: invoices[v].paid_at });
- }
- v++;
- }
- }
- return mergedTransactions;
-};
-
-const filterOnChainTransactions = (events: BkprTransaction[]) => {
- if (!events) {
- return [];
- } else {
- return events.reduce((acc: any[], event) => {
- event = { ...event };
- if (event.account?.toLowerCase() === 'wallet' && (event.tag?.toLowerCase() === 'deposit' || event.tag?.toLowerCase() === 'withdrawal')) {
- event.credit_msat = event.credit_msat || 0;
- event.debit_msat = event.debit_msat || 0;
- const lastTx = acc.length && acc.length > 0 ? acc[acc.length - 1] : { tag: '' };
- if (lastTx.tag?.toLowerCase() === 'withdrawal' && event.tag?.toLowerCase() === 'deposit' && lastTx.timestamp === event.timestamp && event.outpoint?.includes(lastTx.txid)) {
- // Calculate the net amount from the last withdrawal and this deposit
- lastTx.debit_msat = (lastTx.debit_msat - +event.credit_msat);
- } else {
- acc.push(event);
- }
- }
- return acc;
- }, []);
- }
-};
-
const clnSlice = createSlice({
name: 'cln',
initialState: defaultCLNState,
reducers: {
- setListInvoices(state, action: PayloadAction) {
+ setListLightningTransactions(state, action: PayloadAction) {
if (action.payload.error) {
- state.listInvoices = { ...state.listInvoices, error: action.payload.error };
+ state.listLightningTransactions = { ...state.listLightningTransactions, error: action.payload.error };
return;
}
- const sortedInvoices = [...(action.payload.invoices ?? [])].sort((i1, i2) => {
- const c1 = i1.paid_at || i1.expires_at || 0;
- const c2 = i2.paid_at || i2.expires_at || 0;
- return c2 - c1;
- });
-
- state.listInvoices = { ...action.payload, invoices: sortedInvoices };
- if (!state.listPayments.isLoading && !state.listInvoices.isLoading) {
- const merged = mergeLightningTransactions(sortedInvoices, state.listPayments?.payments ?? []);
- state.listLightningTransactions = { isLoading: false, clnTransactions: merged };
+ if (action.payload.page === 1) {
+ // Replace array for page 1
+ state.listLightningTransactions = {
+ ...state.listLightningTransactions,
+ ...action.payload,
+ };
+ } else {
+ // Append to existing array for page > 1
+ state.listLightningTransactions = {
+ ...state.listLightningTransactions,
+ ...action.payload,
+ clnTransactions: [
+ ...state.listLightningTransactions.clnTransactions,
+ ...action.payload.clnTransactions,
+ ],
+ };
}
},
- setListPayments(state, action: PayloadAction) {
- if (action.payload.error) {
- state.listPayments = { ...state.listPayments, error: action.payload.error };
- return;
- }
- const sortedPayments = action.payload.payments?.sort((a, b) => (b.created_at ?? 0) - (a.created_at ?? 0)) ?? [];
- const grouped = groupBy(sortedPayments);
- state.listPayments = { ...action.payload, payments: grouped };
- if (!state.listPayments.isLoading && !state.listInvoices.isLoading) {
- const merged = mergeLightningTransactions(state.listInvoices.invoices ?? [], grouped);
- state.listLightningTransactions = { isLoading: false, clnTransactions: merged };
- }
+ setListLightningTransactionsLoading(state, action: PayloadAction) {
+ state.listLightningTransactions.isLoading = action.payload;
+ },
+ resetListLightningTransactions(state) {
+ state.listLightningTransactions = defaultCLNState.listLightningTransactions;
},
setListOffers(state, action: PayloadAction) {
if (action.payload.error) {
state.listOffers = { ...state.listOffers, error: action.payload.error };
return;
}
- state.listOffers = action.payload;
+
+ if (action.payload.page === 1) {
+ // Replace array for page 1
+ state.listOffers = {
+ ...state.listOffers,
+ ...action.payload,
+ };
+ } else {
+ // Append to existing array for page > 1
+ state.listOffers = {
+ ...state.listOffers,
+ ...action.payload,
+ offers: [
+ ...state.listOffers.offers,
+ ...action.payload.offers,
+ ],
+ };
+ }
+ },
+ setListOffersLoading(state, action: PayloadAction) {
+ state.listOffers.isLoading = action.payload;
},
- setListBitcoinTransactions(state, action: PayloadAction) {
+ resetListOffers(state) {
+ state.listOffers = defaultCLNState.listOffers;
+ },
+ setListBitcoinTransactions(state, action: PayloadAction) {
if (action.payload.error) {
state.listBitcoinTransactions = { ...state.listBitcoinTransactions, error: action.payload.error };
return;
}
- if (action.payload.events && action.payload.events.length >= 0) {
- const sorted = action.payload.events?.sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0)) ?? [];
+
+ if (action.payload.page === 1) {
+ // Replace array for page 1
state.listBitcoinTransactions = {
- isLoading: false,
- btcTransactions: filterOnChainTransactions(sorted),
+ ...state.listBitcoinTransactions,
+ ...action.payload,
+ };
+ } else {
+ // Append to existing array for page > 1
+ state.listBitcoinTransactions = {
+ ...state.listBitcoinTransactions,
+ ...action.payload,
+ btcTransactions: [
+ ...state.listBitcoinTransactions.btcTransactions,
+ ...action.payload.btcTransactions,
+ ],
};
}
},
+ setListBitcoinTransactionsLoading(state, action: PayloadAction) {
+ state.listBitcoinTransactions.isLoading = action.payload;
+ },
+ resetListBitcoinTransactions(state) {
+ state.listBitcoinTransactions = defaultCLNState.listBitcoinTransactions;
+ },
setFeeRate(state, action: PayloadAction) {
if (action.payload.error) {
state.feeRate = { ...state.feeRate, error: action.payload.error };
@@ -180,10 +109,15 @@ const clnSlice = createSlice({
});
export const {
- setListInvoices,
- setListPayments,
+ setListLightningTransactionsLoading,
+ setListLightningTransactions,
+ resetListLightningTransactions,
+ setListOffersLoading,
setListOffers,
+ resetListOffers,
+ setListBitcoinTransactionsLoading,
setListBitcoinTransactions,
+ resetListBitcoinTransactions,
setFeeRate,
clearCLNStore
} = clnSlice.actions;
diff --git a/apps/frontend/src/store/rootSelectors.tsx b/apps/frontend/src/store/rootSelectors.tsx
index 6d9dd902..7a299414 100644
--- a/apps/frontend/src/store/rootSelectors.tsx
+++ b/apps/frontend/src/store/rootSelectors.tsx
@@ -24,9 +24,8 @@ export const defaultRootState: RootState = {
btcSpendableBalance: 0,
btcReservedBalance: 0,
},
- nodeInfo: { isLoading: true, alias: '', version: '', error: null },
+ nodeInfo: { isLoading: true, alias: '', version: '', num_peers: 0, error: null },
listFunds: { isLoading: true, channels: [], outputs: [] },
- listPeers: { isLoading: true, peers: [] },
listChannels: { isLoading: true, activeChannels: [], pendingChannels: [], inactiveChannels: [], mergedChannels: [] },
};
@@ -87,9 +86,9 @@ export const selectListFunds = createSelector(
(root) => root.listFunds
);
-export const selectListPeers = createSelector(
+export const selectNumPeers = createSelector(
selectRootState,
- (root) => root.listPeers
+ (root) => root.nodeInfo.num_peers
);
export const selectListChannels = createSelector(
diff --git a/apps/frontend/src/store/rootSlice.tsx b/apps/frontend/src/store/rootSlice.tsx
index 750a6b72..1d971e16 100644
--- a/apps/frontend/src/store/rootSlice.tsx
+++ b/apps/frontend/src/store/rootSlice.tsx
@@ -1,10 +1,10 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { Node, Fund, FundChannel, FundOutput, RootState } from '../types/root.type';
+import { Fund, FundChannel, FundOutput, RootState } from '../types/root.type';
import { SATS_MSAT } from '../utilities/constants';
import { sortDescByKey } from '../utilities/data-formatters';
import { defaultRootState } from './rootSelectors';
-const aggregatePeerChannels = (listPeerChannels: any, listNodes: Node[]) => {
+const aggregatePeerChannels = (listPeerChannels: any) => {
const aggregatedChannels: any = { activeChannels: [], pendingChannels: [], inactiveChannels: [], mergedChannels: [] };
if (!listPeerChannels || !listPeerChannels.channels) {
return aggregatedChannels;
@@ -12,7 +12,6 @@ const aggregatePeerChannels = (listPeerChannels: any, listNodes: Node[]) => {
listPeerChannels.channels.forEach((peerChannel: any) => {
peerChannel = {
...peerChannel,
- node_alias: listNodes.find((node) => node?.nodeid === peerChannel.peer_id)?.alias?.replace(/-\d+-.*$/, '') || 'Unknown',
to_us_sat: Math.floor((peerChannel.to_us_msat || 0) / SATS_MSAT),
total_sat: Math.floor((peerChannel.total_msat || 0) / SATS_MSAT),
to_them_sat: Math.floor(((peerChannel.total_msat || 0) - (peerChannel.to_us_msat || 0)) / SATS_MSAT),
@@ -110,19 +109,16 @@ const rootSlice = createSlice({
state.walletBalances = calculateBalances(action.payload);
state.listFunds = action.payload;
},
- setListPeers(state, action: PayloadAction) {
- state.listPeers = action.payload;
- },
setListChannels(
state,
- action: PayloadAction<{ listChannels: any; listNodes: any }>
+ action: PayloadAction
) {
- const { listChannels, listNodes } = action.payload;
- if (listChannels.error || listNodes.error) {
- state.listChannels = { ...state.listChannels, error: (listChannels.error || listNodes.error) };
+ const listChannels = action.payload;
+ if (listChannels.error) {
+ state.listChannels = { ...state.listChannels, error: listChannels.error };
return;
}
- const aggr = aggregatePeerChannels(listChannels, listNodes.nodes);
+ const aggr = aggregatePeerChannels(listChannels);
state.listChannels = { ...aggr, isLoading: false };
},
clearRootStore(state) {
@@ -141,7 +137,6 @@ export const {
setFiatConfig,
setNodeInfo,
setListFunds,
- setListPeers,
setListChannels,
clearRootStore,
} = rootSlice.actions;
diff --git a/apps/frontend/src/styles/bootstrap-custom.scss b/apps/frontend/src/styles/bootstrap-custom.scss
deleted file mode 100644
index 773eeaf9..00000000
--- a/apps/frontend/src/styles/bootstrap-custom.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import 'constants';
-
-$theme-colors: (
- primary: $primary,
- secondary: $secondary,
- success: $success,
- warning: $warning,
- danger: $danger,
- dark: $dark,
- light: $light,
-);
-
-@import '~bootstrap';
diff --git a/apps/frontend/src/styles/constants.scss b/apps/frontend/src/styles/constants.scss
index 04adca83..dcad530a 100644
--- a/apps/frontend/src/styles/constants.scss
+++ b/apps/frontend/src/styles/constants.scss
@@ -1,9 +1,9 @@
-@import './fonts.scss';
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins';
+@use 'sass:color';
+@use './fonts.scss';
@import 'react-perfect-scrollbar/dist/css/styles.css';
+@import 'bootstrap/scss/functions';
+// define custom variables BEFORE importing Bootstrap variables
$transition-time: 300ms;
$theme-transition: 500ms;
$color-mode-type: data;
@@ -15,35 +15,30 @@ $font-family-base: -apple-system, BlinkMacSystemFont, 'Inter', 'DM Sans', 'Helve
'Segoe UI', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
-$font-size-base: 14px;
+$font-size-base: 0.875rem;
$font-weight-base: 500;
-$btn-font-size: 14px;
+$btn-font-size: 0.875rem;
+// Define theme colors BEFORE importing Bootstrap variables
+$white: #ffffff;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
$primary: #e1ba2d;
-$primary-darker: #cca103;
-$secondary: $gray-100;
+$secondary: #ffffff;
$success: #33db95;
$warning: #fe8e02;
$danger: #dc3545;
-$blue: #1b2559;
-$darker-blue: #141c44;
-$light: #9f9f9f;
-$dark: #3a4247;
-$light-dark: #b7bbc2;
-$card-bg-dark: #2a2a2c;
-$text-dark: #131314;
-$form-ctrl-bg-dark: #303032;
-$dark-blue: #101828;
-$border-color-dark: #495057;
-$border-color: #dee2e6;
-$tooltip-bg-dark: #1b1b1d;
+$btn-bg: $primary;
-$body-bg-light: #ebeff9;
-$body-bg: $white;
-$body-color: $dark;
-$body-tertiary-bg: $white;
-$body-bg-dark: #0c0c0f;
-$body-color-dark: $white;
+$theme-colors: (
+ primary: $primary,
+ secondary: $secondary,
+ success: $success,
+ warning: $warning,
+ danger: $danger,
+ dark: #3a4247,
+ light: #9f9f9f,
+);
$border-radius: 1.25rem;
$btn-link-color: $primary;
@@ -51,11 +46,10 @@ $btn-padding-x: 0.625rem;
$form-check-input-checked-bg-color: $primary;
$form-check-input-checked-border-color: $primary;
-$form-check-input-focus-border: lighten($primary, 10%);
-$form-check-input-focus-box-shadow: 0 0 0 0.25rem rgba(lighten($primary, 10%), 0.25);
+$form-check-input-focus-border: color.adjust($primary, $lightness: 10%);
+$form-check-input-focus-box-shadow: 0 0 0 0.25rem rgba(color.adjust($primary, $lightness: 10%), 0.25);
$card-border-width: 0.5px;
-$card-border-color: rgba($light, 0.1);
$card-border-radius: $border-radius;
$card-cap-bg: transparent;
@@ -63,17 +57,44 @@ $dropdown-min-width: 5rem;
$dropdown-box-shadow: none;
$dropdown-border-radius: 0.5rem;
-$input-color: $dark;
-$input-disabled-bg: $gray-200;
$modal-backdrop-opacity: 0.2;
-
+
$form-range-track-height: 0.25rem;
$form-range-track-bg: $success;
+
+$toast-max-width: 25rem;
+
+// Custom variables that depend on Bootstrap variables
+$primary-darker: #cca103;
+$blue: #1b2559;
+$darker-blue: #141c44;
+$light: #9f9f9f;
+$dark: #3a4247;
+$light-dark: #b7bbc2;
+$card-bg-dark: #2a2a2c;
+$text-dark: #131314;
+$form-ctrl-bg-dark: #303032;
+$dark-blue: #101828;
+$border-color-dark: #495057;
+$border-color: #dee2e6;
+$tooltip-bg-dark: #1b1b1d;
+
+$body-bg-light: #ebeff9;
+$body-bg: $white;
+$body-color: $dark;
+$body-tertiary-bg: $white;
+$body-bg-dark: #0c0c0f;
+$body-color-dark: $white;
+
$form-range-thumb-bg: $white;
$form-range-thumb-border: 0.5px solid $gray-300;
$form-range-thumb-focus-box-shadow:
0 0 0 1px $body-bg,
$primary;
-$form-range-thumb-active-bg: tint-color($primary, 70%);
+$form-range-thumb-active-bg: color.scale($primary, $lightness: 70%);
-$toast-max-width: 25rem;
+$input-color: $dark;
+$input-disabled-bg: $gray-200;
+
+// Import Bootstrap
+@import 'bootstrap/scss/bootstrap';
diff --git a/apps/frontend/src/styles/mode-dark.scss b/apps/frontend/src/styles/mode-dark.scss
index 14c33a9f..21c24031 100644
--- a/apps/frontend/src/styles/mode-dark.scss
+++ b/apps/frontend/src/styles/mode-dark.scss
@@ -1,4 +1,5 @@
-@import 'constants';
+@use 'sass:color';
+@import 'bootstrap/scss/mixins';
@include color-mode(dark) {
.text-light {
@@ -30,11 +31,32 @@
}
.card {
+ color: $text-dark;
background-color: $card-bg-dark;
- box-shadow: none;
+ border: none;
+ transition:
+ background-color $theme-transition ease,
+ box-shadow $theme-transition ease;
&.bg-primary {
color: $text-dark;
}
+ & .card-header {
+ background-color: $card-bg-dark;
+ transition: all $theme-transition ease;
+ border-bottom: none;
+ }
+ & .card-body {
+ transition: all $theme-transition ease;
+ }
+ & .card-footer {
+ background-color: $card-bg-dark;
+ transition: all $theme-transition ease;
+ border-top: none;
+ }
+ }
+
+ .inner-box-shadow {
+ box-shadow: 1px 1px 2px 2px rgba($light-dark, 0.20);
}
.list-group-item,
@@ -91,6 +113,10 @@
stroke: $primary;
}
+ .card.overview-balance-card {
+ box-shadow: 1px 1px 2px 2px rgba($light-dark, 0.20);
+ }
+
span.span-close-svg {
cursor: pointer;
border-radius: $border-radius;
@@ -100,7 +126,7 @@
&:hover, &:focus-visible {
outline: none;
& svg path {
- stroke: lighten($light-dark, 15%);
+ stroke: color.adjust($light-dark, $lightness: 15%);
}
}
}
@@ -205,7 +231,7 @@
}
.switch {
- border: 1px solid lighten($white, 20%);
+ border: 1px solid color.adjust($white, $lightness: 20%);
& .handle {
background-color: $dark;
@@ -216,7 +242,7 @@
}
&[data-isswitchon='true'] {
- border: 1px solid darken($success, 10%);
+ border: 1px solid color.adjust($success, $lightness: -20%);;
}
}
@@ -277,6 +303,10 @@
}
}
+ .modal-content {
+ background-color: $card-bg-dark;
+ }
+
.ps.ps--active-y > .ps__rail-y {
background-color: $dark;
}
diff --git a/apps/frontend/src/styles/mode-light.scss b/apps/frontend/src/styles/mode-light.scss
index 6570a045..74250edf 100644
--- a/apps/frontend/src/styles/mode-light.scss
+++ b/apps/frontend/src/styles/mode-light.scss
@@ -1,4 +1,5 @@
-@import 'constants';
+@use 'sass:color';
+@import 'bootstrap/scss/mixins';
@include color-mode(light) {
.text-contrast {
@@ -9,6 +10,10 @@
color: $white;
}
+ .text-light {
+ color: $light !important;
+ }
+
.text-light-white {
color: $light !important;
}
@@ -64,10 +69,36 @@
stroke: $white;
}
+ .bg-light {
+ background-color: $light !important;
+ }
+
.card {
+ border: none;
+ transition:
+ background-color $theme-transition ease,
+ box-shadow $theme-transition ease;
&.bg-primary {
color: $white;
}
+ & .card-header {
+ background-color: $card-bg;
+ transition: all $theme-transition ease;
+ border-bottom: none;
+ }
+ & .card-body {
+ transition: all $theme-transition ease;
+ }
+ & .card-footer {
+ background-color: $card-bg;
+ transition: all $theme-transition ease;
+ border-top: none;
+ }
+ }
+
+ .card.overview-balance-card {
+ box-shadow: 0px 4px 8px 0px $gray-400;
+ color: $white;
}
.list-group-item,
@@ -84,7 +115,7 @@
&:hover, &:focus-visible {
outline: none;
& svg path {
- stroke: darken($light, 15%);
+ stroke: color.adjust($light, $lightness: -15%);;
}
}
}
diff --git a/apps/frontend/src/styles/shared.scss b/apps/frontend/src/styles/shared.scss
index 86f498c9..e53f62be 100755
--- a/apps/frontend/src/styles/shared.scss
+++ b/apps/frontend/src/styles/shared.scss
@@ -1,5 +1,8 @@
+@use 'sass:color';
+@import './constants';
@import './mode-dark.scss';
@import './mode-light.scss';
+@import 'bootstrap/scss/mixins';
@import 'react-perfect-scrollbar/dist/css/styles.css';
@import 'react-datepicker/dist/react-datepicker.css';
@@ -135,6 +138,7 @@ a {
}
.btn.btn-primary {
+ background-color: $primary;
transition: color $theme-transition ease;
color: var(--bs-body-color);
font-weight: 600;
@@ -148,8 +152,8 @@ a {
&:hover,
&:focus-visible {
outline: none;
- background-color: darken($primary, 8%);
- border-color: darken($primary, 8%);
+ background-color: color.adjust($primary, $lightness: -8%);
+ border-color: color.adjust($primary, $lightness: -8%);
}
}
@@ -165,7 +169,7 @@ a {
&:focus-visible {
outline: none;
transform: scale(1.01);
- color: darken($primary, 10%);
+ color: color.adjust($primary, $lightness: -10%);
}
}
@@ -210,8 +214,8 @@ button.btn-rounded {
&:hover,
&:focus-visible {
outline: none;
- background-color: darken($primary, 8%) !important;
- border-color: darken($primary, 8%) !important;
+ background-color: color.adjust($primary, $lightness: -8%) !important;
+ border-color: color.adjust($primary, $lightness: -8%) !important;
}
}
&.btn-primary,
@@ -219,8 +223,8 @@ button.btn-rounded {
&:hover,
&:focus-visible {
outline: none;
- background-color: darken($primary, 8%) !important;
- border-color: darken($primary, 8%) !important;
+ background-color: color.adjust($primary, $lightness: -8%) !important;
+ border-color: color.adjust($primary, $lightness: -8%) !important;
}
}
&:disabled {
@@ -337,7 +341,7 @@ button.btn-rounded {
svg {
& circle,
- & path:not(.path-settings),
+ & path,
& line,
& defs > linearGradient > stop {
transition:
@@ -359,18 +363,36 @@ svg {
display: inline-flex;
&.fa-xl {
height: 1.25rem;
+ width: 1.25rem;
}
&.fa-lg {
height: 1rem;
+ width: 1rem;
}
&.fa-md {
height: 0.75rem;
+ width: 0.75rem;
}
&.fa-sm {
height: 0.5rem;
+ width: 0.5rem;
}
&.fa-xs {
height: 0.25rem;
+ width: 0.25rem;
+ }
+ }
+}
+
+.span-refresh {
+ cursor: pointer;
+ & .svg-refresh {
+ transition: transform $transition-time ease;
+ &:hover {
+ transform: rotate(0.5turn);
+ & > path {
+ fill: $primary;
+ }
}
}
}
@@ -389,7 +411,7 @@ svg {
border-radius: 1.25rem;
padding: 0.25rem;
background-color: $white;
- border: 1px solid lighten($light, 20%);
+ border: 1px solid color.adjust($light, $lightness: 20%);
& .handle {
background-color: $light;
@@ -405,7 +427,7 @@ svg {
&[data-isswitchon='true'] {
justify-content: flex-end;
background-color: $success;
- border: 1px solid lighten($success, 20%);
+ border: 1px solid color.adjust($success, $lightness: 20%);
& .handle {
background-color: $white;
}
@@ -415,22 +437,6 @@ svg {
}
}
-.card {
- transition:
- background-color $theme-transition ease,
- box-shadow $theme-transition ease;
- border: none;
- & .card-header {
- border-bottom: none;
- }
- & .card-body {
- transition: color $theme-transition ease;
- }
- & .card-footer {
- border-top: none;
- }
-}
-
.cards-container {
height: 67vh;
margin-bottom: 1.5rem;
@@ -465,6 +471,10 @@ svg {
overflow: hidden;
}
+.ps > .ps__rail-y {
+ transition: background-color $theme-transition ease;
+}
+
.ps.ps--active-y > .ps__rail-y {
opacity: 1;
z-index: 99;
@@ -571,10 +581,10 @@ label.form-label {
}
&:hover {
svg path {
- stroke: darken($primary, 10%);
+ stroke: color.adjust($primary, $lightness: -10%);
&.svg-add {
stroke: none;
- fill: darken($primary, 10%);
+ fill: color.adjust($primary, $lightness: -10%);
}
}
}
@@ -586,7 +596,7 @@ label.form-label {
}
&:hover {
& path {
- fill: darken($primary, 10%);
+ fill: color.adjust($primary, $lightness: -10%);
}
}
}
@@ -666,11 +676,18 @@ label.form-label {
}
}
-.wallet-card {
+.card.wallet-card {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
+ border: none;
+}
+
+.card.overview-balance-card {
+ padding-left: 0.5rem !important;
+ background-color: $primary;
+ flex-grow: 1 !important;
}
.information-svg {
diff --git a/apps/frontend/src/svgs/Currency.tsx b/apps/frontend/src/svgs/Currency.tsx
index 9e8a2f8d..da3af3e9 100755
--- a/apps/frontend/src/svgs/Currency.tsx
+++ b/apps/frontend/src/svgs/Currency.tsx
@@ -1,6 +1,25 @@
import React from 'react';
export const CurrencySVG = props => {
+ const krSVG = (
+
+ );
+
const currencies = {
PLN:
,
- DKK:
- ,
+ DKK: krSVG,
IDR: