Skip to content

Commit

Permalink
fix: 🐛 remove header query
Browse files Browse the repository at this point in the history
  • Loading branch information
@apotdevin
apotdevin committed May 31, 2020
1 parent 50a118e commit a05d1d7
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 51 deletions.
16 changes: 15 additions & 1 deletion src/components/statusCheck/StatusCheck.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,16 @@ export const StatusCheck = () => {
getChannelBalance,
getNodeInfo,
} = data;
const { alias, is_synced_to_chain, version } = getNodeInfo;
const {
alias,
color,
is_synced_to_chain,
version,
active_channels_count,
pending_channels_count,
closed_channels_count,
peers_count,
} = getNodeInfo;
const { confirmedBalance, pendingBalance } = getChannelBalance;

const versionNumber = version.split(' ');
Expand All @@ -42,6 +51,7 @@ export const StatusCheck = () => {

const state = {
alias,
color,
syncedToChain: is_synced_to_chain,
version: versionNumber[0],
mayorVersion: Number(numbers[0]),
Expand All @@ -51,6 +61,10 @@ export const StatusCheck = () => {
chainPending: getPendingChainBalance,
channelBalance: confirmedBalance,
channelPending: pendingBalance,
activeChannelCount: active_channels_count,
pendingChannelCount: pending_channels_count,
closedChannelCount: closed_channels_count,
peersCount: peers_count,
};

dispatch({ type: 'connected', state });
Expand Down
10 changes: 10 additions & 0 deletions src/context/StatusContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ type StateStatus = {

type State = {
alias: string;
color: string;
syncedToChain: boolean;
version: string;
mayorVersion: number;
Expand All @@ -15,6 +16,10 @@ type State = {
chainPending: number;
channelBalance: number;
channelPending: number;
activeChannelCount: number;
pendingChannelCount: number;
closedChannelCount: number;
peersCount: number;
};

type CompleteState = State & StateStatus;
Expand All @@ -32,6 +37,7 @@ const DispatchContext = createContext<Dispatch | undefined>(undefined);
const initialState = {
connected: false,
alias: '',
color: '',
syncedToChain: false,
version: '',
mayorVersion: 0,
Expand All @@ -41,6 +47,10 @@ const initialState = {
chainPending: 0,
channelBalance: 0,
channelPending: 0,
activeChannelCount: 0,
pendingChannelCount: 0,
closedChannelCount: 0,
peersCount: 0,
};

const stateReducer = (state: State, action: ActionType): CompleteState => {
Expand Down
73 changes: 23 additions & 50 deletions src/layouts/navigation/nodeInfo/NodeInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
import React from 'react';
import { Zap, Anchor, Circle } from 'react-feather';
import { toast } from 'react-toastify';
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
import ScaleLoader from 'react-spinners/ScaleLoader';
import { getPrice, Price } from 'src/components/price/Price';
import { AnimatedNumber } from 'src/components/animated/AnimatedNumber';
import { useAccountState } from 'src/context/AccountContext';
import { useGetNodeInfoQuery } from 'src/graphql/queries/__generated__/getNodeInfo.generated';
import { textColorMap, unSelectedNavButton } from '../../../styles/Themes';
import { getErrorContent } from '../../../utils/error';
import { unSelectedNavButton } from '../../../styles/Themes';
import { getTooltipType } from '../../../components/generic/helpers';
import {
Separation,
Expand Down Expand Up @@ -69,45 +64,26 @@ interface NodeInfoProps {

export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
const {
alias,
color,
version,
syncedToChain,
chainBalance,
chainPending,
channelBalance,
channelPending,
activeChannelCount,
pendingChannelCount,
closedChannelCount,
peersCount,
} = useStatusState();

const { auth } = useAccountState();

const { loading, data } = useGetNodeInfoQuery({
skip: !auth,
variables: { auth },
onError: error => toast.error(getErrorContent(error)),
});

const { theme, currency, displayValues } = useConfigState();
const priceContext = usePriceState();
const format = getPrice(currency, displayValues, priceContext);

const tooltipType: any = getTooltipType(theme);

if (loading || !data || !data.getNodeInfo) {
return (
<Closed>
<ScaleLoader height={10} width={2} color={textColorMap[theme]} />
</Closed>
);
}

const {
color,
active_channels_count,
closed_channels_count,
alias,
peers_count,
pending_channels_count,
version,
} = data.getNodeInfo;

const formatCB = format({ amount: chainBalance });
const formatPB = format({ amount: chainPending });
const formatCCB = format({ amount: channelBalance });
Expand All @@ -126,7 +102,7 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
</SingleLine>
<SingleLine>
<Sub4Title>Channels</Sub4Title>
{`${active_channels_count} / ${pending_channels_count} / ${closed_channels_count} / ${peers_count}`}
{`${activeChannelCount} / ${pendingChannelCount} / ${closedChannelCount} / ${peersCount}`}
</SingleLine>
<SingleLine>
<Zap
Expand Down Expand Up @@ -182,10 +158,10 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
/>
</div>
<div data-tip data-for="full_node_tip">
<SingleLine>{active_channels_count}</SingleLine>
<SingleLine>{pending_channels_count}</SingleLine>
<SingleLine>{closed_channels_count}</SingleLine>
<SingleLine>{peers_count}</SingleLine>
<SingleLine>{activeChannelCount}</SingleLine>
<SingleLine>{pendingChannelCount}</SingleLine>
<SingleLine>{closedChannelCount}</SingleLine>
<SingleLine>{peersCount}</SingleLine>
</div>
</Closed>
<Separation lineColor={unSelectedNavButton} />
Expand All @@ -206,10 +182,10 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
place={'right'}
type={tooltipType}
>
<div>{`Active Channels: ${active_channels_count}`}</div>
<div>{`Pending Channels: ${pending_channels_count}`}</div>
<div>{`Closed Channels: ${closed_channels_count}`}</div>
<div>{`Peers: ${peers_count}`}</div>
<div>{`Active Channels: ${activeChannelCount}`}</div>
<div>{`Pending Channels: ${pendingChannelCount}`}</div>
<div>{`Closed Channels: ${closedChannelCount}`}</div>
<div>{`Peers: ${peersCount}`}</div>
</ReactTooltip>
</>
);
Expand All @@ -218,10 +194,7 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
return (
<>
<Title>
<Alias
bottomColor={color}
data-tip={`Version: ${version.split(' ')[0]}`}
>
<Alias bottomColor={color} data-tip={`Version: ${version}`}>
{alias}
</Alias>
</Title>
Expand All @@ -239,7 +212,7 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
<Balance
data-tip
data-for="node_tip"
>{`${active_channels_count} / ${pending_channels_count} / ${closed_channels_count} / ${peers_count}`}</Balance>
>{`${activeChannelCount} / ${pendingChannelCount} / ${closedChannelCount} / ${peersCount}`}</Balance>
<Balance>
<Info bottomColor={syncedToChain ? '#95de64' : '#ff7875'}>
{syncedToChain ? 'Synced' : 'Not Synced'}
Expand Down Expand Up @@ -271,10 +244,10 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
place={'right'}
type={tooltipType}
>
<div>{`Active Channels: ${active_channels_count}`}</div>
<div>{`Pending Channels: ${pending_channels_count}`}</div>
<div>{`Closed Channels: ${closed_channels_count}`}</div>
<div>{`Peers: ${peers_count}`}</div>
<div>{`Active Channels: ${activeChannelCount}`}</div>
<div>{`Pending Channels: ${pendingChannelCount}`}</div>
<div>{`Closed Channels: ${closedChannelCount}`}</div>
<div>{`Peers: ${peersCount}`}</div>
</ReactTooltip>
</>
);
Expand Down

0 comments on commit a05d1d7

Please sign in to comment.