diff --git a/src/components/account/AccountInfo.tsx b/src/components/account/AccountInfo.tsx index 55f61219..cf80dcbb 100644 --- a/src/components/account/AccountInfo.tsx +++ b/src/components/account/AccountInfo.tsx @@ -17,7 +17,6 @@ import { Send, MoreVertical, Zap, - ZapOff, Anchor, Pocket, DownArrow, diff --git a/src/components/channels/pendingChannels/PendingCard.tsx b/src/components/channels/pendingChannels/PendingCard.tsx index a1bdd69e..ae89d2a5 100644 --- a/src/components/channels/pendingChannels/PendingCard.tsx +++ b/src/components/channels/pendingChannels/PendingCard.tsx @@ -1,137 +1,151 @@ -import React, { useContext, useState } from "react"; -import { getPercent, getValue } from "../../../helpers/Helpers"; +import React, { useContext } from 'react'; +import { getPercent, getValue } from '../../../helpers/Helpers'; import { - Progress, - ProgressBar, - NodeTitle, - NodeBar, - NodeDetails, - StatusLine, - DetailLine -} from "../Channels.style"; -import ReactTooltip from "react-tooltip"; -import { SubCard, Separation } from "../../generic/Styled"; -import { SettingsContext } from "../../../context/SettingsContext"; -import { getStatusDot, getTooltipType } from "../../generic/Helpers"; -import { getNodeLink } from "../../generic/Helpers"; + Progress, + ProgressBar, + NodeTitle, + NodeBar, + NodeDetails, + StatusLine, + DetailLine, +} from '../Channels.style'; +import ReactTooltip from 'react-tooltip'; +import { SubCard, Separation } from '../../generic/Styled'; +import { SettingsContext } from '../../../context/SettingsContext'; +import { getStatusDot, getTooltipType } from '../../generic/Helpers'; +import { getNodeLink } from '../../generic/Helpers'; interface PendingCardProps { - channelInfo: any; - index: number; - setIndexOpen: (index: number) => void; - indexOpen: number; + channelInfo: any; + index: number; + setIndexOpen: (index: number) => void; + indexOpen: number; } export const PendingCard = ({ - channelInfo, - index, - setIndexOpen, - indexOpen + channelInfo, + index, + setIndexOpen, + indexOpen, }: PendingCardProps) => { - const { price, symbol, currency, theme } = useContext(SettingsContext); - const priceProps = { price, symbol, currency }; + const { price, symbol, currency, theme } = useContext(SettingsContext); + const priceProps = { price, symbol, currency }; - const tooltipType = getTooltipType(theme); + const tooltipType = getTooltipType(theme); - const getFormat = (amount: string) => - getValue({ - amount, - ...priceProps - }); + const getFormat = (amount: string) => + getValue({ + amount, + ...priceProps, + }); - const { - isActive, - isClosing, - isOpening, - localBalance, - // localReserve, - partnerPublicKey, - received, - remoteBalance, - // remoteReserve, - sent, - partnerNodeInfo - } = channelInfo; + const { + isActive, + isClosing, + isOpening, + localBalance, + // localReserve, + partnerPublicKey, + received, + remoteBalance, + // remoteReserve, + sent, + partnerNodeInfo, + } = channelInfo; - const { - alias, - // capacity: nodeCapacity, - // channelCount, - color: nodeColor - // lastUpdate - } = partnerNodeInfo; + const { + alias, + // capacity: nodeCapacity, + // channelCount, + color: nodeColor, + // lastUpdate + } = partnerNodeInfo; - const formatBalance = getFormat(localBalance + remoteBalance); - const formatLocal = getFormat(localBalance); - const formatRemote = getFormat(remoteBalance); - const formatreceived = getFormat(received); - const formatSent = getFormat(sent); + const formatBalance = getFormat(localBalance + remoteBalance); + const formatLocal = getFormat(localBalance); + const formatRemote = getFormat(remoteBalance); + const formatreceived = getFormat(received); + const formatSent = getFormat(sent); - const handleClick = () => { - if (indexOpen === index) { - setIndexOpen(0); - } else { - setIndexOpen(index); - } - }; + const handleClick = () => { + if (indexOpen === index) { + setIndexOpen(0); + } else { + setIndexOpen(index); + } + }; + + const renderDetails = () => { + return ( + <> + + +
Node Public Key:
+ {getNodeLink(partnerPublicKey)} + + {/* {localReserve} */} + {/* {remoteReserve} */} + {/* {nodeCapacity} */} + {/* {channelCount} */} + {/* {lastUpdate} */} + + ); + }; - const renderDetails = () => { return ( - <> - - -
Node Public Key:
- {getNodeLink(partnerPublicKey)} - - {/* {localReserve} */} - {/* {remoteReserve} */} - {/* {nodeCapacity} */} - {/* {channelCount} */} - {/* {lastUpdate} */} - + handleClick()}> + + {getStatusDot(isActive, 'active')} + {getStatusDot(isOpening, 'opening')} + {getStatusDot(isClosing, 'closing')} + + + {alias ? alias : 'Unknown'} + + {formatBalance} +
+ + + + + + +
+ + + {index === indexOpen && renderDetails()} + +
{`Local Balance: ${formatLocal}`}
+
{`Remote Balance: ${formatRemote}`}
+ + +
{`received: ${formatreceived}`}
+
{`Sent: ${formatSent}`}
+ + ); - }; - - return ( - handleClick()}> - - {getStatusDot(isActive, "active")} - {getStatusDot(isOpening, "opening")} - {getStatusDot(isClosing, "closing")} - - - {alias ? alias : "Unknown"} - - {formatBalance} -
- - - - - - -
- - - {index === indexOpen && renderDetails()} - -
{`Local Balance: ${formatLocal}`}
-
{`Remote Balance: ${formatRemote}`}
- - -
{`received: ${formatreceived}`}
-
{`Sent: ${formatSent}`}
- - - ); }; diff --git a/src/components/invoices/InvoiceCard.tsx b/src/components/invoices/InvoiceCard.tsx index 6c9aa700..15ac6e81 100644 --- a/src/components/invoices/InvoiceCard.tsx +++ b/src/components/invoices/InvoiceCard.tsx @@ -1,134 +1,142 @@ -import React, { useContext, useState } from "react"; -import { getValue } from "../../helpers/Helpers"; -import { SettingsContext } from "../../context/SettingsContext"; -import { Separation, SubCard } from "../generic/Styled"; +import React, { useContext } from 'react'; +import { getValue } from '../../helpers/Helpers'; +import { SettingsContext } from '../../context/SettingsContext'; +import { Separation, SubCard } from '../generic/Styled'; import { - DetailLine, - StatusLine, - NodeBar, - NodeTitle, - NodeDetails -} from "../channels/Channels.style"; -import { getStatusDot, getDateDif, getFormatDate } from "../generic/Helpers"; -import styled from "styled-components"; + DetailLine, + StatusLine, + NodeBar, + NodeTitle, + NodeDetails, +} from '../channels/Channels.style'; +import { getStatusDot, getDateDif, getFormatDate } from '../generic/Helpers'; +import styled from 'styled-components'; interface InvoiceCardProps { - invoice: any; - index: number; - setIndexOpen: (index: number) => void; - indexOpen: number; + invoice: any; + index: number; + setIndexOpen: (index: number) => void; + indexOpen: number; } const DifLine = styled.div` - font-size: 12px; - color: #bfbfbf; + font-size: 12px; + color: #bfbfbf; `; const formatDifference = ( - difference: string, - numDif: number, - status: boolean + difference: string, + numDif: number, + status: boolean, ) => { - if (numDif > 0) { - return `+ ${difference}`; - } else if (numDif < 0 && status) { - return `- ${difference}`; - } else { - return null; - } + if (numDif > 0) { + return `+ ${difference}`; + } else if (numDif < 0 && status) { + return `- ${difference}`; + } else { + return null; + } }; export const InvoiceCard = ({ - invoice, - index, - setIndexOpen, - indexOpen + invoice, + index, + setIndexOpen, + indexOpen, }: InvoiceCardProps) => { - const { price, symbol, currency } = useContext(SettingsContext); - const priceProps = { price, symbol, currency }; + const { price, symbol, currency } = useContext(SettingsContext); + const priceProps = { price, symbol, currency }; - const getFormat = (amount: string) => - getValue({ - amount, - ...priceProps - }); + const getFormat = (amount: string) => + getValue({ + amount, + ...priceProps, + }); - const { - confirmedAt, - createdAt, - description, - expiresAt, - isConfirmed, - received, - tokens - // chainAddress, - // descriptionHash, - // id, - // isCanceled, - // isHeld, - // isOutgoing, - // isPrivate, - // payments, - // receivedMtokens, - // request, - // secret, - } = invoice; + const { + confirmedAt, + createdAt, + description, + expiresAt, + isConfirmed, + received, + tokens, + // chainAddress, + // descriptionHash, + // id, + // isCanceled, + // isHeld, + // isOutgoing, + // isPrivate, + // payments, + // receivedMtokens, + // request, + // secret, + } = invoice; - const formatAmount = getFormat(tokens); - const dif = received - tokens; - const formatDif = getFormat(`${dif}`); + const formatAmount = getFormat(tokens); + const dif = received - tokens; + const formatDif = getFormat(`${dif}`); - const handleClick = () => { - if (indexOpen === index) { - setIndexOpen(0); - } else { - setIndexOpen(index); - } - }; + const handleClick = () => { + if (indexOpen === index) { + setIndexOpen(0); + } else { + setIndexOpen(index); + } + }; + + const renderDetails = () => { + return ( + <> + + {isConfirmed && ( + +
Confirmed
+ {`${getDateDif(confirmedAt)} ago (${getFormatDate( + confirmedAt, + )})`} + + )} + +
Created:
+ {`${getDateDif(createdAt)} ago (${getFormatDate( + createdAt, + )})`} + + +
Expires:
+ {`${getDateDif(expiresAt)} ago (${getFormatDate( + expiresAt, + )})`} + + {/* {chainAddress} */} + {/* {descriptionHash} */} + {/* {isCanceled} */} + {/* {isHeld} */} + {/* {isOutgoing} */} + {/* {isPrivate} */} + {/* {payments} */} + {/* {receivedMtokens} */} + {/* {request} */} + {/* {secret} */} + + ); + }; - const renderDetails = () => { return ( - <> - - {isConfirmed && ( - -
Confirmed
- {`${getDateDif(confirmedAt)} ago (${getFormatDate(confirmedAt)})`} - - )} - -
Created:
- {`${getDateDif(createdAt)} ago (${getFormatDate(createdAt)})`} - - -
Expires:
- {`${getDateDif(expiresAt)} ago (${getFormatDate(expiresAt)})`} - - {/* {chainAddress} */} - {/* {descriptionHash} */} - {/* {isCanceled} */} - {/* {isHeld} */} - {/* {isOutgoing} */} - {/* {isPrivate} */} - {/* {payments} */} - {/* {receivedMtokens} */} - {/* {request} */} - {/* {secret} */} - + handleClick()}> + {getStatusDot(isConfirmed, 'active')} + + + {formatAmount} + + {formatDifference(formatDif, dif, isConfirmed)} + + + {description} + + {index === indexOpen && renderDetails()} + ); - }; - - return ( - handleClick()}> - {getStatusDot(isConfirmed, "active")} - - - {formatAmount} - {formatDifference(formatDif, dif, isConfirmed)} - - {description} - - {index === indexOpen && renderDetails()} - - ); }; diff --git a/src/components/payments/PaymentsCards.tsx b/src/components/payments/PaymentsCards.tsx index 47d9bad0..19f07326 100644 --- a/src/components/payments/PaymentsCards.tsx +++ b/src/components/payments/PaymentsCards.tsx @@ -1,124 +1,126 @@ -import React, { useContext, useState } from "react"; -import { getValue } from "../../helpers/Helpers"; -import { SettingsContext } from "../../context/SettingsContext"; -import { Separation, SubCard } from "../generic/Styled"; +import React, { useContext } from 'react'; +import { getValue } from '../../helpers/Helpers'; +import { SettingsContext } from '../../context/SettingsContext'; +import { Separation, SubCard } from '../generic/Styled'; import { - DetailLine, - StatusLine, - NodeBar, - NodeTitle, - NodeDetails, - MainInfo -} from "../channels/Channels.style"; + DetailLine, + StatusLine, + NodeBar, + NodeTitle, + NodeDetails, + MainInfo, +} from '../channels/Channels.style'; import { - getStatusDot, - getDateDif, - getFormatDate, - getNodeLink -} from "../generic/Helpers"; + getStatusDot, + getDateDif, + getFormatDate, + getNodeLink, +} from '../generic/Helpers'; interface PaymentsCardProps { - payment: any; - index: number; - setIndexOpen: (index: number) => void; - indexOpen: number; + payment: any; + index: number; + setIndexOpen: (index: number) => void; + indexOpen: number; } export const PaymentsCard = ({ - payment, - index, - setIndexOpen, - indexOpen + payment, + index, + setIndexOpen, + indexOpen, }: PaymentsCardProps) => { - const { price, symbol, currency } = useContext(SettingsContext); - const priceProps = { price, symbol, currency }; + const { price, symbol, currency } = useContext(SettingsContext); + const priceProps = { price, symbol, currency }; - const getFormat = (amount: string) => - getValue({ - amount, - ...priceProps - }); + const getFormat = (amount: string) => + getValue({ + amount, + ...priceProps, + }); - const { - createdAt, - destination, - fee, - feeMtokens, - hops, - isConfirmed, - tokens - // id, - // isOutgoing, - // mtokens, - // request, - // secret, - } = payment; + const { + createdAt, + destination, + fee, + feeMtokens, + hops, + isConfirmed, + tokens, + // id, + // isOutgoing, + // mtokens, + // request, + // secret, + } = payment; - const formatAmount = getFormat(tokens); + const formatAmount = getFormat(tokens); - const handleClick = () => { - if (indexOpen === index) { - setIndexOpen(0); - } else { - setIndexOpen(index); - } - }; + const handleClick = () => { + if (indexOpen === index) { + setIndexOpen(0); + } else { + setIndexOpen(index); + } + }; + + const renderDetails = () => { + return ( + <> + + +
Created:
+ {`${getDateDif(createdAt)} ago (${getFormatDate( + createdAt, + )})`} + + +
Destination Node:
+ {getNodeLink(destination)} + + +
Fee:
+ {getFormat(fee)} + + +
Fee msats:
+ {`${feeMtokens} sats`} + + +
Hops:
+ {hops.length} + + {hops.map((hop: any, index: number) => ( + +
{`Hop ${index + 1}:`}
+
+ {hop} +
+ + ))} + {/* {id} */} + {/* {isOutgoing ? 'true': 'false'} */} + {/* {secret} */} + {/* {request} */} + + ); + }; - const renderDetails = () => { return ( - <> - - -
Created:
- {`${getDateDif(createdAt)} ago (${getFormatDate(createdAt)})`} - - -
Destination Node:
- {getNodeLink(destination)} - - -
Fee:
- {getFormat(fee)} - - -
Fee msats:
- {`${feeMtokens} sats`} - - -
Hops:
- {hops.length} - - {hops.map((hop: any, index: number) => ( - -
{`Hop ${index + 1}:`}
-
- {hop} -
- - ))} - {/* {id} */} - {/* {isOutgoing ? 'true': 'false'} */} - {/* {secret} */} - {/* {request} */} - - ); - }; - - return ( - - handleClick()}> - {getStatusDot(isConfirmed, "active")} - - - {formatAmount} - {/* + + handleClick()}> + {getStatusDot(isConfirmed, 'active')} + + + {formatAmount} + {/* {formatDifference(formatDif, dif, isConfirmed)} */} - - - {/* {description} */} - {/* {formatBalance} */} - {/*
+ + + {/* {description} */} + {/* {formatBalance} */} + {/*
*/} - - - - {index === indexOpen && renderDetails()} - - ); + + + + {index === indexOpen && renderDetails()} + + ); }; diff --git a/src/sections/navigation/Navigation.tsx b/src/sections/navigation/Navigation.tsx index 658e9766..63e1630e 100644 --- a/src/sections/navigation/Navigation.tsx +++ b/src/sections/navigation/Navigation.tsx @@ -1,6 +1,5 @@ import React from 'react'; import styled from 'styled-components'; -import { Card } from '../../components/generic/Styled'; import { Link, useLocation } from 'react-router-dom'; import { NodeInfo } from '../../components/nodeInfo/NodeInfo'; import { SideSettings } from '../../components/sideSettings/SideSettings';