mirror of
https://github.com/apotdevin/thunderhub.git
synced 2025-02-23 06:35:05 +01:00
chore: cleanup
This commit is contained in:
AP
parent
64d2e9b7b1
commit
514b8ebe11
5 changed files with 367 additions and 345 deletions
|
|
@ -17,7 +17,6 @@ import {
|
|||
Send,
|
||||
MoreVertical,
|
||||
Zap,
|
||||
ZapOff,
|
||||
Anchor,
|
||||
Pocket,
|
||||
DownArrow,
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<Separation />
|
||||
<DetailLine>
|
||||
<div>Node Public Key:</div>
|
||||
{getNodeLink(partnerPublicKey)}
|
||||
</DetailLine>
|
||||
{/* <DetailLine>{localReserve}</DetailLine> */}
|
||||
{/* <DetailLine>{remoteReserve}</DetailLine> */}
|
||||
{/* <DetailLine>{nodeCapacity}</DetailLine> */}
|
||||
{/* <DetailLine>{channelCount}</DetailLine> */}
|
||||
{/* <DetailLine>{lastUpdate}</DetailLine> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDetails = () => {
|
||||
return (
|
||||
<>
|
||||
<Separation />
|
||||
<DetailLine>
|
||||
<div>Node Public Key:</div>
|
||||
{getNodeLink(partnerPublicKey)}
|
||||
</DetailLine>
|
||||
{/* <DetailLine>{localReserve}</DetailLine> */}
|
||||
{/* <DetailLine>{remoteReserve}</DetailLine> */}
|
||||
{/* <DetailLine>{nodeCapacity}</DetailLine> */}
|
||||
{/* <DetailLine>{channelCount}</DetailLine> */}
|
||||
{/* <DetailLine>{lastUpdate}</DetailLine> */}
|
||||
</>
|
||||
<SubCard color={nodeColor} key={index} onClick={() => handleClick()}>
|
||||
<StatusLine>
|
||||
{getStatusDot(isActive, 'active')}
|
||||
{getStatusDot(isOpening, 'opening')}
|
||||
{getStatusDot(isClosing, 'closing')}
|
||||
</StatusLine>
|
||||
<NodeBar>
|
||||
<NodeTitle>{alias ? alias : 'Unknown'}</NodeTitle>
|
||||
<NodeDetails>
|
||||
{formatBalance}
|
||||
<div>
|
||||
<Progress
|
||||
data-tip
|
||||
data-for={`node_balance_tip_${index}`}
|
||||
>
|
||||
<ProgressBar
|
||||
percent={getPercent(
|
||||
localBalance,
|
||||
remoteBalance,
|
||||
)}
|
||||
/>
|
||||
</Progress>
|
||||
<Progress
|
||||
data-tip
|
||||
data-for={`node_activity_tip_${index}`}
|
||||
>
|
||||
<ProgressBar
|
||||
order={2}
|
||||
percent={getPercent(received, sent)}
|
||||
/>
|
||||
</Progress>
|
||||
</div>
|
||||
</NodeDetails>
|
||||
</NodeBar>
|
||||
{index === indexOpen && renderDetails()}
|
||||
<ReactTooltip
|
||||
id={`node_balance_tip_${index}`}
|
||||
effect={'solid'}
|
||||
place={'bottom'}
|
||||
type={tooltipType}
|
||||
>
|
||||
<div>{`Local Balance: ${formatLocal}`}</div>
|
||||
<div>{`Remote Balance: ${formatRemote}`}</div>
|
||||
</ReactTooltip>
|
||||
<ReactTooltip
|
||||
id={`node_activity_tip_${index}`}
|
||||
effect={'solid'}
|
||||
place={'bottom'}
|
||||
type={tooltipType}
|
||||
>
|
||||
<div>{`received: ${formatreceived}`}</div>
|
||||
<div>{`Sent: ${formatSent}`}</div>
|
||||
</ReactTooltip>
|
||||
</SubCard>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SubCard color={nodeColor} key={index} onClick={() => handleClick()}>
|
||||
<StatusLine>
|
||||
{getStatusDot(isActive, "active")}
|
||||
{getStatusDot(isOpening, "opening")}
|
||||
{getStatusDot(isClosing, "closing")}
|
||||
</StatusLine>
|
||||
<NodeBar>
|
||||
<NodeTitle>{alias ? alias : "Unknown"}</NodeTitle>
|
||||
<NodeDetails>
|
||||
{formatBalance}
|
||||
<div>
|
||||
<Progress data-tip data-for={`node_balance_tip_${index}`}>
|
||||
<ProgressBar percent={getPercent(localBalance, remoteBalance)} />
|
||||
</Progress>
|
||||
<Progress data-tip data-for={`node_activity_tip_${index}`}>
|
||||
<ProgressBar order={2} percent={getPercent(received, sent)} />
|
||||
</Progress>
|
||||
</div>
|
||||
</NodeDetails>
|
||||
</NodeBar>
|
||||
{index === indexOpen && renderDetails()}
|
||||
<ReactTooltip
|
||||
id={`node_balance_tip_${index}`}
|
||||
effect={"solid"}
|
||||
place={"bottom"}
|
||||
type={tooltipType}
|
||||
>
|
||||
<div>{`Local Balance: ${formatLocal}`}</div>
|
||||
<div>{`Remote Balance: ${formatRemote}`}</div>
|
||||
</ReactTooltip>
|
||||
<ReactTooltip
|
||||
id={`node_activity_tip_${index}`}
|
||||
effect={"solid"}
|
||||
place={"bottom"}
|
||||
type={tooltipType}
|
||||
>
|
||||
<div>{`received: ${formatreceived}`}</div>
|
||||
<div>{`Sent: ${formatSent}`}</div>
|
||||
</ReactTooltip>
|
||||
</SubCard>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<Separation />
|
||||
{isConfirmed && (
|
||||
<DetailLine>
|
||||
<div>Confirmed</div>
|
||||
{`${getDateDif(confirmedAt)} ago (${getFormatDate(
|
||||
confirmedAt,
|
||||
)})`}
|
||||
</DetailLine>
|
||||
)}
|
||||
<DetailLine>
|
||||
<div>Created:</div>
|
||||
{`${getDateDif(createdAt)} ago (${getFormatDate(
|
||||
createdAt,
|
||||
)})`}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Expires:</div>
|
||||
{`${getDateDif(expiresAt)} ago (${getFormatDate(
|
||||
expiresAt,
|
||||
)})`}
|
||||
</DetailLine>
|
||||
{/* <DetailLine>{chainAddress}</DetailLine> */}
|
||||
{/* <DetailLine>{descriptionHash}</DetailLine> */}
|
||||
{/* <DetailLine>{isCanceled}</DetailLine> */}
|
||||
{/* <DetailLine>{isHeld}</DetailLine> */}
|
||||
{/* <DetailLine>{isOutgoing}</DetailLine> */}
|
||||
{/* <DetailLine>{isPrivate}</DetailLine> */}
|
||||
{/* <DetailLine>{payments}</DetailLine> */}
|
||||
{/* <DetailLine>{receivedMtokens}</DetailLine> */}
|
||||
{/* <DetailLine>{request}</DetailLine> */}
|
||||
{/* <DetailLine>{secret}</DetailLine> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDetails = () => {
|
||||
return (
|
||||
<>
|
||||
<Separation />
|
||||
{isConfirmed && (
|
||||
<DetailLine>
|
||||
<div>Confirmed</div>
|
||||
{`${getDateDif(confirmedAt)} ago (${getFormatDate(confirmedAt)})`}
|
||||
</DetailLine>
|
||||
)}
|
||||
<DetailLine>
|
||||
<div>Created:</div>
|
||||
{`${getDateDif(createdAt)} ago (${getFormatDate(createdAt)})`}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Expires:</div>
|
||||
{`${getDateDif(expiresAt)} ago (${getFormatDate(expiresAt)})`}
|
||||
</DetailLine>
|
||||
{/* <DetailLine>{chainAddress}</DetailLine> */}
|
||||
{/* <DetailLine>{descriptionHash}</DetailLine> */}
|
||||
{/* <DetailLine>{isCanceled}</DetailLine> */}
|
||||
{/* <DetailLine>{isHeld}</DetailLine> */}
|
||||
{/* <DetailLine>{isOutgoing}</DetailLine> */}
|
||||
{/* <DetailLine>{isPrivate}</DetailLine> */}
|
||||
{/* <DetailLine>{payments}</DetailLine> */}
|
||||
{/* <DetailLine>{receivedMtokens}</DetailLine> */}
|
||||
{/* <DetailLine>{request}</DetailLine> */}
|
||||
{/* <DetailLine>{secret}</DetailLine> */}
|
||||
</>
|
||||
<SubCard key={index} onClick={() => handleClick()}>
|
||||
<StatusLine>{getStatusDot(isConfirmed, 'active')}</StatusLine>
|
||||
<NodeBar>
|
||||
<NodeTitle>
|
||||
{formatAmount}
|
||||
<DifLine>
|
||||
{formatDifference(formatDif, dif, isConfirmed)}
|
||||
</DifLine>
|
||||
</NodeTitle>
|
||||
<NodeDetails>{description}</NodeDetails>
|
||||
</NodeBar>
|
||||
{index === indexOpen && renderDetails()}
|
||||
</SubCard>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SubCard key={index} onClick={() => handleClick()}>
|
||||
<StatusLine>{getStatusDot(isConfirmed, "active")}</StatusLine>
|
||||
<NodeBar>
|
||||
<NodeTitle>
|
||||
{formatAmount}
|
||||
<DifLine>{formatDifference(formatDif, dif, isConfirmed)}</DifLine>
|
||||
</NodeTitle>
|
||||
<NodeDetails>{description}</NodeDetails>
|
||||
</NodeBar>
|
||||
{index === indexOpen && renderDetails()}
|
||||
</SubCard>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<Separation />
|
||||
<DetailLine>
|
||||
<div>Created:</div>
|
||||
{`${getDateDif(createdAt)} ago (${getFormatDate(
|
||||
createdAt,
|
||||
)})`}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Destination Node:</div>
|
||||
{getNodeLink(destination)}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Fee:</div>
|
||||
{getFormat(fee)}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Fee msats:</div>
|
||||
{`${feeMtokens} sats`}
|
||||
</DetailLine>
|
||||
<DetailLine data-tip data-for={`payment_hops_${index}`}>
|
||||
<div>Hops:</div>
|
||||
{hops.length}
|
||||
</DetailLine>
|
||||
{hops.map((hop: any, index: number) => (
|
||||
<DetailLine>
|
||||
<div>{`Hop ${index + 1}:`}</div>
|
||||
<div style={{ textAlign: 'right' }} key={index}>
|
||||
{hop}
|
||||
</div>
|
||||
</DetailLine>
|
||||
))}
|
||||
{/* <DetailLine>{id}</DetailLine> */}
|
||||
{/* <DetailLine>{isOutgoing ? 'true': 'false'}</DetailLine> */}
|
||||
{/* <DetailLine>{secret}</DetailLine> */}
|
||||
{/* <DetailLine>{request}</DetailLine> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDetails = () => {
|
||||
return (
|
||||
<>
|
||||
<Separation />
|
||||
<DetailLine>
|
||||
<div>Created:</div>
|
||||
{`${getDateDif(createdAt)} ago (${getFormatDate(createdAt)})`}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Destination Node:</div>
|
||||
{getNodeLink(destination)}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Fee:</div>
|
||||
{getFormat(fee)}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Fee msats:</div>
|
||||
{`${feeMtokens} sats`}
|
||||
</DetailLine>
|
||||
<DetailLine data-tip data-for={`payment_hops_${index}`}>
|
||||
<div>Hops:</div>
|
||||
{hops.length}
|
||||
</DetailLine>
|
||||
{hops.map((hop: any, index: number) => (
|
||||
<DetailLine>
|
||||
<div>{`Hop ${index + 1}:`}</div>
|
||||
<div style={{ textAlign: "right" }} key={index}>
|
||||
{hop}
|
||||
</div>
|
||||
</DetailLine>
|
||||
))}
|
||||
{/* <DetailLine>{id}</DetailLine> */}
|
||||
{/* <DetailLine>{isOutgoing ? 'true': 'false'}</DetailLine> */}
|
||||
{/* <DetailLine>{secret}</DetailLine> */}
|
||||
{/* <DetailLine>{request}</DetailLine> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SubCard key={index}>
|
||||
<MainInfo onClick={() => handleClick()}>
|
||||
<StatusLine>{getStatusDot(isConfirmed, "active")}</StatusLine>
|
||||
<NodeBar>
|
||||
<NodeTitle>
|
||||
{formatAmount}
|
||||
{/* <DifLine>
|
||||
<SubCard key={index}>
|
||||
<MainInfo onClick={() => handleClick()}>
|
||||
<StatusLine>{getStatusDot(isConfirmed, 'active')}</StatusLine>
|
||||
<NodeBar>
|
||||
<NodeTitle>
|
||||
{formatAmount}
|
||||
{/* <DifLine>
|
||||
{formatDifference(formatDif, dif, isConfirmed)}
|
||||
</DifLine> */}
|
||||
</NodeTitle>
|
||||
<NodeDetails>
|
||||
{/* {description} */}
|
||||
{/* {formatBalance} */}
|
||||
{/* <div>
|
||||
</NodeTitle>
|
||||
<NodeDetails>
|
||||
{/* {description} */}
|
||||
{/* {formatBalance} */}
|
||||
{/* <div>
|
||||
<Progress
|
||||
data-tip
|
||||
data-for={`node_balance_tip_${index}`}
|
||||
|
|
@ -140,10 +142,10 @@ export const PaymentsCard = ({
|
|||
/>
|
||||
</Progress>
|
||||
</div> */}
|
||||
</NodeDetails>
|
||||
</NodeBar>
|
||||
</MainInfo>
|
||||
{index === indexOpen && renderDetails()}
|
||||
</SubCard>
|
||||
);
|
||||
</NodeDetails>
|
||||
</NodeBar>
|
||||
</MainInfo>
|
||||
{index === indexOpen && renderDetails()}
|
||||
</SubCard>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue