mirrors/thunderhub
1
0
Fork 0
mirror of https://github.com/apotdevin/thunderhub.git synced 2025-02-23 22:46:35 +01:00
Code Issues Projects Releases Wiki Activity

chore: cleanup

Browse source
This commit is contained in:
AP 2019-11-30 22:30:23 +01:00
parent 64d2e9b7b1
commit 514b8ebe11
5 changed files with 367 additions and 345 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/account/AccountInfo.tsx
View file

@ -17,7 +17,6 @@ import {
Send, Send,
MoreVertical, MoreVertical,
Zap, Zap,
ZapOff,
Anchor, Anchor,
Pocket, Pocket,
DownArrow, DownArrow,

64
src/components/channels/pendingChannels/PendingCard.tsx
View file

@ -1,5 +1,5 @@
import React, { useContext, useState } from "react"; import React, { useContext } from 'react';
import { getPercent, getValue } from "../../../helpers/Helpers"; import { getPercent, getValue } from '../../../helpers/Helpers';
import { import {
Progress, Progress,
ProgressBar, ProgressBar,
@ -7,13 +7,13 @@ import {
NodeBar, NodeBar,
NodeDetails, NodeDetails,
StatusLine, StatusLine,
DetailLine DetailLine,
} from "../Channels.style"; } from '../Channels.style';
import ReactTooltip from "react-tooltip"; import ReactTooltip from 'react-tooltip';
import { SubCard, Separation } from "../../generic/Styled"; import { SubCard, Separation } from '../../generic/Styled';
import { SettingsContext } from "../../../context/SettingsContext"; import { SettingsContext } from '../../../context/SettingsContext';
import { getStatusDot, getTooltipType } from "../../generic/Helpers"; import { getStatusDot, getTooltipType } from '../../generic/Helpers';
import { getNodeLink } from "../../generic/Helpers"; import { getNodeLink } from '../../generic/Helpers';
interface PendingCardProps { interface PendingCardProps {
channelInfo: any; channelInfo: any;
@ -26,7 +26,7 @@ export const PendingCard = ({
channelInfo, channelInfo,
index, index,
setIndexOpen, setIndexOpen,
indexOpen indexOpen,
}: PendingCardProps) => { }: PendingCardProps) => {
const { price, symbol, currency, theme } = useContext(SettingsContext); const { price, symbol, currency, theme } = useContext(SettingsContext);
const priceProps = { price, symbol, currency }; const priceProps = { price, symbol, currency };
@ -36,7 +36,7 @@ export const PendingCard = ({
const getFormat = (amount: string) => const getFormat = (amount: string) =>
getValue({ getValue({
amount, amount,
...priceProps ...priceProps,
}); });
const { const {
@ -50,14 +50,14 @@ export const PendingCard = ({
remoteBalance, remoteBalance,
// remoteReserve, // remoteReserve,
sent, sent,
partnerNodeInfo partnerNodeInfo,
} = channelInfo; } = channelInfo;
const { const {
alias, alias,
// capacity: nodeCapacity, // capacity: nodeCapacity,
// channelCount, // channelCount,
color: nodeColor color: nodeColor,
// lastUpdate // lastUpdate
} = partnerNodeInfo; } = partnerNodeInfo;
@ -95,20 +95,34 @@ export const PendingCard = ({
return ( return (
<SubCard color={nodeColor} key={index} onClick={() => handleClick()}> <SubCard color={nodeColor} key={index} onClick={() => handleClick()}>
<StatusLine> <StatusLine>
{getStatusDot(isActive, "active")} {getStatusDot(isActive, 'active')}
{getStatusDot(isOpening, "opening")} {getStatusDot(isOpening, 'opening')}
{getStatusDot(isClosing, "closing")} {getStatusDot(isClosing, 'closing')}
</StatusLine> </StatusLine>
<NodeBar> <NodeBar>
<NodeTitle>{alias ? alias : "Unknown"}</NodeTitle> <NodeTitle>{alias ? alias : 'Unknown'}</NodeTitle>
<NodeDetails> <NodeDetails>
{formatBalance} {formatBalance}
<div> <div>
<Progress data-tip data-for={`node_balance_tip_${index}`}> <Progress
<ProgressBar percent={getPercent(localBalance, remoteBalance)} /> data-tip
data-for={`node_balance_tip_${index}`}
>
<ProgressBar
percent={getPercent(
localBalance,
remoteBalance,
)}
/>
</Progress> </Progress>
<Progress data-tip data-for={`node_activity_tip_${index}`}> <Progress
<ProgressBar order={2} percent={getPercent(received, sent)} /> data-tip
data-for={`node_activity_tip_${index}`}
>
<ProgressBar
order={2}
percent={getPercent(received, sent)}
/>
</Progress> </Progress>
</div> </div>
</NodeDetails> </NodeDetails>
@ -116,8 +130,8 @@ export const PendingCard = ({
{index === indexOpen && renderDetails()} {index === indexOpen && renderDetails()}
<ReactTooltip <ReactTooltip
id={`node_balance_tip_${index}`} id={`node_balance_tip_${index}`}
effect={"solid"} effect={'solid'}
place={"bottom"} place={'bottom'}
type={tooltipType} type={tooltipType}
> >
<div>{`Local Balance: ${formatLocal}`}</div> <div>{`Local Balance: ${formatLocal}`}</div>
@ -125,8 +139,8 @@ export const PendingCard = ({
</ReactTooltip> </ReactTooltip>
<ReactTooltip <ReactTooltip
id={`node_activity_tip_${index}`} id={`node_activity_tip_${index}`}
effect={"solid"} effect={'solid'}
place={"bottom"} place={'bottom'}
type={tooltipType} type={tooltipType}
> >
<div>{`received: ${formatreceived}`}</div> <div>{`received: ${formatreceived}`}</div>

42
src/components/invoices/InvoiceCard.tsx
View file

@ -1,16 +1,16 @@
import React, { useContext, useState } from "react"; import React, { useContext } from 'react';
import { getValue } from "../../helpers/Helpers"; import { getValue } from '../../helpers/Helpers';
import { SettingsContext } from "../../context/SettingsContext"; import { SettingsContext } from '../../context/SettingsContext';
import { Separation, SubCard } from "../generic/Styled"; import { Separation, SubCard } from '../generic/Styled';
import { import {
DetailLine, DetailLine,
StatusLine, StatusLine,
NodeBar, NodeBar,
NodeTitle, NodeTitle,
NodeDetails NodeDetails,
} from "../channels/Channels.style"; } from '../channels/Channels.style';
import { getStatusDot, getDateDif, getFormatDate } from "../generic/Helpers"; import { getStatusDot, getDateDif, getFormatDate } from '../generic/Helpers';
import styled from "styled-components"; import styled from 'styled-components';
interface InvoiceCardProps { interface InvoiceCardProps {
invoice: any; invoice: any;
@ -27,7 +27,7 @@ const DifLine = styled.div`
const formatDifference = ( const formatDifference = (
difference: string, difference: string,
numDif: number, numDif: number,
status: boolean status: boolean,
) => { ) => {
if (numDif > 0) { if (numDif > 0) {
return `+ ${difference}`; return `+ ${difference}`;
@ -42,7 +42,7 @@ export const InvoiceCard = ({
invoice, invoice,
index, index,
setIndexOpen, setIndexOpen,
indexOpen indexOpen,
}: InvoiceCardProps) => { }: InvoiceCardProps) => {
const { price, symbol, currency } = useContext(SettingsContext); const { price, symbol, currency } = useContext(SettingsContext);
const priceProps = { price, symbol, currency }; const priceProps = { price, symbol, currency };
@ -50,7 +50,7 @@ export const InvoiceCard = ({
const getFormat = (amount: string) => const getFormat = (amount: string) =>
getValue({ getValue({
amount, amount,
...priceProps ...priceProps,
}); });
const { const {
@ -60,7 +60,7 @@ export const InvoiceCard = ({
expiresAt, expiresAt,
isConfirmed, isConfirmed,
received, received,
tokens tokens,
// chainAddress, // chainAddress,
// descriptionHash, // descriptionHash,
// id, // id,
@ -93,16 +93,22 @@ export const InvoiceCard = ({
{isConfirmed && ( {isConfirmed && (
<DetailLine> <DetailLine>
<div>Confirmed</div> <div>Confirmed</div>
{`${getDateDif(confirmedAt)} ago (${getFormatDate(confirmedAt)})`} {`${getDateDif(confirmedAt)} ago (${getFormatDate(
confirmedAt,
)})`}
</DetailLine> </DetailLine>
)} )}
<DetailLine> <DetailLine>
<div>Created:</div> <div>Created:</div>
{`${getDateDif(createdAt)} ago (${getFormatDate(createdAt)})`} {`${getDateDif(createdAt)} ago (${getFormatDate(
createdAt,
)})`}
</DetailLine> </DetailLine>
<DetailLine> <DetailLine>
<div>Expires:</div> <div>Expires:</div>
{`${getDateDif(expiresAt)} ago (${getFormatDate(expiresAt)})`} {`${getDateDif(expiresAt)} ago (${getFormatDate(
expiresAt,
)})`}
</DetailLine> </DetailLine>
{/* <DetailLine>{chainAddress}</DetailLine> */} {/* <DetailLine>{chainAddress}</DetailLine> */}
{/* <DetailLine>{descriptionHash}</DetailLine> */} {/* <DetailLine>{descriptionHash}</DetailLine> */}
@ -120,11 +126,13 @@ export const InvoiceCard = ({
return ( return (
<SubCard key={index} onClick={() => handleClick()}> <SubCard key={index} onClick={() => handleClick()}>
<StatusLine>{getStatusDot(isConfirmed, "active")}</StatusLine> <StatusLine>{getStatusDot(isConfirmed, 'active')}</StatusLine>
<NodeBar> <NodeBar>
<NodeTitle> <NodeTitle>
{formatAmount} {formatAmount}
<DifLine>{formatDifference(formatDif, dif, isConfirmed)}</DifLine> <DifLine>
{formatDifference(formatDif, dif, isConfirmed)}
</DifLine>
</NodeTitle> </NodeTitle>
<NodeDetails>{description}</NodeDetails> <NodeDetails>{description}</NodeDetails>
</NodeBar> </NodeBar>

30
src/components/payments/PaymentsCards.tsx
View file

@ -1,21 +1,21 @@
import React, { useContext, useState } from "react"; import React, { useContext } from 'react';
import { getValue } from "../../helpers/Helpers"; import { getValue } from '../../helpers/Helpers';
import { SettingsContext } from "../../context/SettingsContext"; import { SettingsContext } from '../../context/SettingsContext';
import { Separation, SubCard } from "../generic/Styled"; import { Separation, SubCard } from '../generic/Styled';
import { import {
DetailLine, DetailLine,
StatusLine, StatusLine,
NodeBar, NodeBar,
NodeTitle, NodeTitle,
NodeDetails, NodeDetails,
MainInfo MainInfo,
} from "../channels/Channels.style"; } from '../channels/Channels.style';
import { import {
getStatusDot, getStatusDot,
getDateDif, getDateDif,
getFormatDate, getFormatDate,
getNodeLink getNodeLink,
} from "../generic/Helpers"; } from '../generic/Helpers';
interface PaymentsCardProps { interface PaymentsCardProps {
payment: any; payment: any;
@ -28,7 +28,7 @@ export const PaymentsCard = ({
payment, payment,
index, index,
setIndexOpen, setIndexOpen,
indexOpen indexOpen,
}: PaymentsCardProps) => { }: PaymentsCardProps) => {
const { price, symbol, currency } = useContext(SettingsContext); const { price, symbol, currency } = useContext(SettingsContext);
const priceProps = { price, symbol, currency }; const priceProps = { price, symbol, currency };
@ -36,7 +36,7 @@ export const PaymentsCard = ({
const getFormat = (amount: string) => const getFormat = (amount: string) =>
getValue({ getValue({
amount, amount,
...priceProps ...priceProps,
}); });
const { const {
@ -46,7 +46,7 @@ export const PaymentsCard = ({
feeMtokens, feeMtokens,
hops, hops,
isConfirmed, isConfirmed,
tokens tokens,
// id, // id,
// isOutgoing, // isOutgoing,
// mtokens, // mtokens,
@ -70,7 +70,9 @@ export const PaymentsCard = ({
<Separation /> <Separation />
<DetailLine> <DetailLine>
<div>Created:</div> <div>Created:</div>
{`${getDateDif(createdAt)} ago (${getFormatDate(createdAt)})`} {`${getDateDif(createdAt)} ago (${getFormatDate(
createdAt,
)})`}
</DetailLine> </DetailLine>
<DetailLine> <DetailLine>
<div>Destination Node:</div> <div>Destination Node:</div>
@ -91,7 +93,7 @@ export const PaymentsCard = ({
{hops.map((hop: any, index: number) => ( {hops.map((hop: any, index: number) => (
<DetailLine> <DetailLine>
<div>{`Hop ${index + 1}:`}</div> <div>{`Hop ${index + 1}:`}</div>
<div style={{ textAlign: "right" }} key={index}> <div style={{ textAlign: 'right' }} key={index}>
{hop} {hop}
</div> </div>
</DetailLine> </DetailLine>
@ -107,7 +109,7 @@ export const PaymentsCard = ({
return ( return (
<SubCard key={index}> <SubCard key={index}>
<MainInfo onClick={() => handleClick()}> <MainInfo onClick={() => handleClick()}>
<StatusLine>{getStatusDot(isConfirmed, "active")}</StatusLine> <StatusLine>{getStatusDot(isConfirmed, 'active')}</StatusLine>
<NodeBar> <NodeBar>
<NodeTitle> <NodeTitle>
{formatAmount} {formatAmount}

1
src/sections/navigation/Navigation.tsx
View file

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Card } from '../../components/generic/Styled';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { NodeInfo } from '../../components/nodeInfo/NodeInfo'; import { NodeInfo } from '../../components/nodeInfo/NodeInfo';
import { SideSettings } from '../../components/sideSettings/SideSettings'; import { SideSettings } from '../../components/sideSettings/SideSettings';