mirror of https://github.com/lukechilds/polar.git
jamaljsr
5 years ago
5 changed files with 0 additions and 205 deletions
@ -1,12 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { LightningNode } from 'shared/types'; |
|
||||
|
|
||||
interface Props { |
|
||||
node: LightningNode; |
|
||||
} |
|
||||
|
|
||||
const ConnectTab: React.FC<Props> = ({ node }) => { |
|
||||
return <div>Actions {node.name}</div>; |
|
||||
}; |
|
||||
|
|
||||
export default ConnectTab; |
|
||||
@ -1,12 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { LightningNode } from 'shared/types'; |
|
||||
|
|
||||
interface Props { |
|
||||
node: LightningNode; |
|
||||
} |
|
||||
|
|
||||
const ConnectTab: React.FC<Props> = ({ node }) => { |
|
||||
return <div>Connect {node.name}</div>; |
|
||||
}; |
|
||||
|
|
||||
export default ConnectTab; |
|
||||
@ -1,96 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { Alert, Tooltip } from 'antd'; |
|
||||
import { usePrefixedTranslation } from 'hooks'; |
|
||||
import { LightningNode, Status } from 'shared/types'; |
|
||||
import { useStoreState } from 'store'; |
|
||||
import { ellipseInner } from 'utils/strings'; |
|
||||
import { format } from 'utils/units'; |
|
||||
import { StatusBadge } from 'components/common'; |
|
||||
import CopyIcon from 'components/common/CopyIcon'; |
|
||||
import DetailsList, { DetailValues } from 'components/common/DetailsList'; |
|
||||
|
|
||||
interface Props { |
|
||||
node: LightningNode; |
|
||||
} |
|
||||
|
|
||||
const InfoTab: React.FC<Props> = ({ node }) => { |
|
||||
const { l } = usePrefixedTranslation('cmps.designer.lightning.InfoTab'); |
|
||||
const { nodes } = useStoreState(s => s.lightning); |
|
||||
const details: DetailValues = [ |
|
||||
{ label: l('nodeType'), value: node.type }, |
|
||||
{ label: l('implementation'), value: node.implementation }, |
|
||||
{ label: l('version'), value: `v${node.version}` }, |
|
||||
{ |
|
||||
label: l('status'), |
|
||||
value: ( |
|
||||
<StatusBadge |
|
||||
status={node.status} |
|
||||
text={l(`enums.status.${Status[node.status]}`)} |
|
||||
/> |
|
||||
), |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
let synced = false; |
|
||||
const nodeState = nodes[node.name]; |
|
||||
if (node.status === Status.Started && nodeState) { |
|
||||
if (nodeState.balances) { |
|
||||
const { confirmed, unconfirmed } = nodeState.balances; |
|
||||
details.push({ |
|
||||
label: l('confirmedBalance'), |
|
||||
value: `${format(confirmed)} sats`, |
|
||||
}); |
|
||||
details.push({ |
|
||||
label: l('unconfirmedBalance'), |
|
||||
value: `${format(unconfirmed)} sats`, |
|
||||
}); |
|
||||
} |
|
||||
if (nodeState.info) { |
|
||||
const { |
|
||||
pubkey, |
|
||||
alias, |
|
||||
syncedToChain, |
|
||||
numPendingChannels, |
|
||||
numActiveChannels, |
|
||||
numInactiveChannels, |
|
||||
} = nodeState.info; |
|
||||
const pubkeyCmp = ( |
|
||||
<> |
|
||||
{ellipseInner(pubkey)} |
|
||||
<CopyIcon value={pubkey} label="PubKey" /> |
|
||||
</> |
|
||||
); |
|
||||
const channels = ( |
|
||||
<Tooltip title={l('channelsTooltip')}> |
|
||||
{`${numActiveChannels} / ${numPendingChannels} / ${numInactiveChannels}`} |
|
||||
</Tooltip> |
|
||||
); |
|
||||
details.push( |
|
||||
{ label: l('alias'), value: alias }, |
|
||||
{ label: l('pubkey'), value: pubkeyCmp }, |
|
||||
{ label: l('channels'), value: channels }, |
|
||||
); |
|
||||
synced = syncedToChain; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
return ( |
|
||||
<> |
|
||||
{!synced && ( |
|
||||
<Alert type="warning" message={l('syncWarning')} closable={false} showIcon /> |
|
||||
)} |
|
||||
{node.status === Status.Error && node.errorMsg && ( |
|
||||
<Alert |
|
||||
type="error" |
|
||||
message={l('startError', { implementation: node.implementation })} |
|
||||
description={node.errorMsg} |
|
||||
closable={false} |
|
||||
showIcon |
|
||||
/> |
|
||||
)} |
|
||||
<DetailsList details={details} /> |
|
||||
</> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default InfoTab; |
|
||||
@ -1,82 +0,0 @@ |
|||||
import React, { ReactNode, useState } from 'react'; |
|
||||
import { useAsync } from 'react-async-hook'; |
|
||||
import { Alert, Icon } from 'antd'; |
|
||||
import { usePrefixedTranslation } from 'hooks'; |
|
||||
import { LightningNode, Status } from 'shared/types'; |
|
||||
import { useStoreActions, useStoreState } from 'store'; |
|
||||
import { abbreviate } from 'utils/numbers'; |
|
||||
import { Loader } from 'components/common'; |
|
||||
import SidebarCard from '../SidebarCard'; |
|
||||
import { ActionsTab, ConnectTab, InfoTab } from './'; |
|
||||
|
|
||||
interface Props { |
|
||||
node: LightningNode; |
|
||||
} |
|
||||
|
|
||||
const LightningDetails: React.FC<Props> = ({ node }) => { |
|
||||
const { l } = usePrefixedTranslation('cmps.designer.lightning.LightningNodeDetails'); |
|
||||
const [activeTab, setActiveTab] = useState('info'); |
|
||||
const { getInfo, getBalances } = useStoreActions(s => s.lightning); |
|
||||
|
|
||||
const getInfoAsync = useAsync( |
|
||||
async (node: LightningNode) => { |
|
||||
if (node.status === Status.Started) { |
|
||||
await getInfo(node); |
|
||||
await getBalances(node); |
|
||||
} |
|
||||
}, |
|
||||
[node], |
|
||||
); |
|
||||
|
|
||||
let extra: ReactNode | undefined; |
|
||||
const { nodes } = useStoreState(s => s.lightning); |
|
||||
const nodeState = nodes[node.name]; |
|
||||
if (node.status === Status.Started && nodeState) { |
|
||||
if (nodeState.balances) { |
|
||||
const { confirmed } = nodeState.balances; |
|
||||
extra = <strong>{abbreviate(confirmed)} sats</strong>; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const tabHeaders = [ |
|
||||
{ key: 'info', tab: l('info') }, |
|
||||
{ key: 'connect', tab: l('connect') }, |
|
||||
{ key: 'actions', tab: l('actions') }, |
|
||||
]; |
|
||||
const tabContents: Record<string, ReactNode> = { |
|
||||
info: <InfoTab node={node} />, |
|
||||
connect: <ConnectTab node={node} />, |
|
||||
actions: <ActionsTab node={node} />, |
|
||||
}; |
|
||||
return ( |
|
||||
<SidebarCard |
|
||||
title={node.name} |
|
||||
extra={extra} |
|
||||
tabList={tabHeaders} |
|
||||
activeTabKey={activeTab} |
|
||||
onTabChange={setActiveTab} |
|
||||
> |
|
||||
{node.status === Status.Starting && ( |
|
||||
<Alert |
|
||||
type="info" |
|
||||
showIcon |
|
||||
icon={<Icon type="loading" />} |
|
||||
closable={false} |
|
||||
message={l('waitingNotice', { implementation: node.implementation })} |
|
||||
/> |
|
||||
)} |
|
||||
{node.status !== Status.Started && !nodeState && getInfoAsync.loading && <Loader />} |
|
||||
{getInfoAsync.error && node.status === Status.Started && ( |
|
||||
<Alert |
|
||||
type="error" |
|
||||
closable={false} |
|
||||
message={l('connectError')} |
|
||||
description={getInfoAsync.error.message} |
|
||||
/> |
|
||||
)} |
|
||||
{tabContents[activeTab]} |
|
||||
</SidebarCard> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default LightningDetails; |
|
||||
@ -1,3 +0,0 @@ |
|||||
export { default as InfoTab } from './InfoTab'; |
|
||||
export { default as ConnectTab } from './ConnectTab'; |
|
||||
export { default as ActionsTab } from './ActionsTab'; |
|
||||
Loading…
Reference in new issue