Skip to content

Commit 88838f1

Browse files
BilbBilb
authored
Merge pull request #1439 from session-foundation/feat/ses-2601/session_network-audric
feat: added session network page
2 parents ca5e911 + c17c3fd commit 88838f1

File tree

13 files changed

+239
-248
lines changed

13 files changed

+239
-248
lines changed

‎ts/components/SessionWrapperModal2.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,10 @@ const StyledModal = styled.div<{
7171
}
7272
7373
${StyledModalHeader} {
74-
${props =>
75-
props.scrolled &&
76-
`margin-bottom: ${props.bigHeader ? 'var(--margins-sm)' : 'var(--margins-xs)'}; border-bottom: 1px solid var(--border-color); box-shadow: 0px 0px 20px 8px var(--modal-shadow-color);`}
74+
box-shadow: ${props => (props.scrolled ? '0px 0px 20px 8px var(--modal-shadow-color)' : '')};
75+
border-bottom: ${props =>
76+
props.scrolled ? '1px solid var(--border-color)' : '1px solid var(--transparent-color)'};
77+
margin-bottom: ${props => (props.bigHeader ? 'var(--margins-sm)' : 'var(--margins-xs)')};
7778
}
7879
`;
7980

‎ts/components/dialog/network/NodeImage.tsx‎

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { NodeGraph6 } from './nodes/NodeGraph6';
1313
import { NodeGraph7 } from './nodes/NodeGraph7';
1414
import { NodeGraph8 } from './nodes/NodeGraph8';
1515
import { NodeGraph9 } from './nodes/NodeGraph9';
16-
import { useIsOnline } from '../../../state/selectors/onions';
16+
import { useSecuringNodesCount } from './sections/network/hooks/useSecuringNodesCount';
1717

1818
const StyledNodeImage = styled(Block)`
1919
display: flex;
@@ -42,39 +42,33 @@ type Props = {
4242
width: string;
4343
height: string;
4444
loading?: boolean;
45-
error?: Error;
4645
};
4746

48-
export const NodeImage = (props: Props) => {
49-
const { count, width, height, loading, error } = props;
50-
const isOnline = useIsOnline();
51-
52-
if (error) {
53-
window.log.error(`[NodeImage] node count error: ${error}`);
54-
}
47+
const nodeComps: Record<number, (props: NodeGraphProps) => JSX.Element> = {
48+
1: NodeGraph1,
49+
2: NodeGraph2,
50+
3: NodeGraph3,
51+
4: NodeGraph4,
52+
5: NodeGraph5,
53+
6: NodeGraph6,
54+
7: NodeGraph7,
55+
8: NodeGraph8,
56+
9: NodeGraph9,
57+
10: NodeGraph10,
58+
};
5559

56-
const nodeComps: Record<number, (props: NodeGraphProps) => JSX.Element> = {
57-
1: NodeGraph1,
58-
2: NodeGraph2,
59-
3: NodeGraph3,
60-
4: NodeGraph4,
61-
5: NodeGraph5,
62-
6: NodeGraph6,
63-
7: NodeGraph7,
64-
8: NodeGraph8,
65-
9: NodeGraph9,
66-
10: NodeGraph10,
67-
};
60+
export const NodeImage = ({ width, height, loading }: Props) => {
61+
const { swarmNodeCount } = useSecuringNodesCount();
6862

69-
const NodeComp = nodeComps[count];
63+
const NodeComp = nodeComps[swarmNodeCount ?? 0];
7064
const sharedNodeProps = {
7165
nodeColor: 'var(--primary-color)',
7266
pathColor: 'var(--text-primary-color)',
7367
width,
7468
height,
7569
};
7670

77-
const ready = isOnline && !loading && !error && NodeComp;
71+
const ready = !loading && NodeComp;
7872

7973
return (
8074
<StyledNodeImage

‎ts/components/dialog/network/SessionNetworkModal.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,18 @@ import { StakeSection } from './sections/StakeSection';
88
import { ExtraSmallText, LastRefreshedText } from './components';
99
import { SpacerMD, SpacerXL, SpacerXS } from '../../basic/Text';
1010
import {
11+
useInfoFakeRefreshing,
1112
useInfoLoading,
1213
useLastRefreshedTimestamp,
13-
useNodesLoading,
1414
} from '../../../state/selectors/networkModal';
1515
import { NetworkSection } from './sections/network/NetworkSection';
1616
import { networkDataActions } from '../../../state/ducks/networkData';
17-
import { useIsOnline } from '../../../state/selectors/onions';
17+
import { useDataIsStale } from '../../../state/selectors/networkData';
1818

1919
export function SessionNetworkModal() {
20-
const isOnline = useIsOnline();
21-
2220
const infoLoading = useInfoLoading();
23-
const nodesLoading = useNodesLoading();
21+
const isFakeRefreshing = useInfoFakeRefreshing();
22+
const dataIsStale = useDataIsStale();
2423

2524
const lastRefreshedTimestamp = useLastRefreshedTimestamp();
2625

@@ -30,35 +29,35 @@ export function SessionNetworkModal() {
3029
dispatch(updateSessionNetworkModal(null));
3130
};
3231

32+
const loading = infoLoading || isFakeRefreshing;
33+
3334
return (
3435
<AnimatePresence>
3536
<SessionWrapperModal2
3637
title={LOCALE_DEFAULTS.network_name}
38+
bigHeader={true}
3739
onClose={onClose}
3840
contentBorder={false}
3941
shouldOverflow={true}
4042
showExitIcon={true}
4143
headerIconButtons={[
4244
{
43-
rotateDuration: infoLoading ? 1.5 : undefined,
45+
rotateDuration: loading ? 1.5 : undefined,
4446
iconType: 'resend',
4547
onClick: () => {
46-
if (infoLoading) {
48+
if (loading) {
4749
return;
4850
}
49-
dispatch(
50-
networkDataActions.refreshInfoFromSeshServer({ forceRefresh: !isOnline }) as any
51-
);
51+
dispatch(networkDataActions.refreshInfoFromSeshServer() as any);
5252
},
5353
dataTestIdIcon: 'refresh-button',
54-
disabled: infoLoading,
54+
disabled: loading,
5555
},
5656
]}
57-
bigHeader={true}
5857
>
59-
<NetworkSection loading={infoLoading} />
60-
<StakeSection loading={infoLoading} />
61-
{lastRefreshedTimestamp && !infoLoading && !nodesLoading ? (
58+
<NetworkSection />
59+
<StakeSection />
60+
{!dataIsStale && lastRefreshedTimestamp && !loading ? (
6261
<>
6362
<SpacerXL />
6463
<ExtraSmallText color={'var(--text-secondary-color)'} textAlignment="center">

‎ts/components/dialog/network/sections/StakeSection.tsx‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,12 @@ import { showLinkVisitWarningDialog } from '../../OpenUrlModal';
1212
import { formatNumber } from '../../../../util/i18n/formatting/generics';
1313
import { useIsDarkTheme } from '../../../../state/theme/selectors/theme';
1414
import { useHTMLDirection } from '../../../../util/i18n/rtlSupport';
15-
import { useStakingRewardPool, useUSDMarketCap } from '../../../../state/selectors/networkData';
16-
import { useIsOnline } from '../../../../state/selectors/onions';
15+
import {
16+
useDataIsStale,
17+
useStakingRewardPool,
18+
useUSDMarketCap,
19+
} from '../../../../state/selectors/networkData';
20+
import { useInfoFakeRefreshing, useInfoLoading } from '../../../../state/selectors/networkModal';
1721

1822
const StyledTokenSection = styled(Flex)<{ loading: boolean }>`
1923
font-size: var(--font-display-size-lg);
@@ -58,36 +62,40 @@ const TokenSection = ({
5862
);
5963
};
6064

61-
export function StakeSection({ loading }: { loading: boolean }) {
62-
const isOnline = useIsOnline();
65+
export function StakeSection() {
6366
const htmlDirection = useHTMLDirection();
6467
const isDarkTheme = useIsDarkTheme();
68+
const infoLoading = useInfoLoading();
6569

6670
const stakingRewardPool = useStakingRewardPool();
6771
const usdMarketCap = useUSDMarketCap();
72+
const dataIsStale = useDataIsStale();
6873

6974
const dispatch = useDispatch();
75+
const isFakeRefreshing = useInfoFakeRefreshing();
7076

71-
const stakingRewardPoolValue = loading
72-
? localize('loading').toString()
73-
: isOnline && stakingRewardPool
77+
const stakingRewardPoolValue =
78+
stakingRewardPool && !isFakeRefreshing && !dataIsStale
7479
? `${formatNumber(stakingRewardPool, {
7580
minimumFractionDigits: 0,
7681
maximumFractionDigits: 0,
7782
useGrouping: true,
7883
})} ${LOCALE_DEFAULTS.token_name_short}`
79-
: localize('unavailable').toString();
84+
: infoLoading || isFakeRefreshing
85+
? localize('loading').toString()
86+
: localize('unavailable').toString();
8087

81-
const networkMarketCapValue = loading
82-
? localize('loading').toString()
83-
: isOnline && usdMarketCap
88+
const networkMarketCapValue =
89+
usdMarketCap && !isFakeRefreshing && !dataIsStale
8490
? `$${formatNumber(usdMarketCap, {
8591
currency: LOCALE_DEFAULTS.usd_name_short,
8692
minimumFractionDigits: 0,
8793
maximumFractionDigits: 0,
8894
useGrouping: true,
8995
})} ${LOCALE_DEFAULTS.usd_name_short}`
90-
: localize('unavailable').toString();
96+
: infoLoading || isFakeRefreshing
97+
? localize('loading').toString()
98+
: localize('unavailable').toString();
9199

92100
return (
93101
<Flex
@@ -108,13 +116,13 @@ export function StakeSection({ loading }: { loading: boolean }) {
108116
<TokenSection
109117
text={LOCALE_DEFAULTS.staking_reward_pool}
110118
value={stakingRewardPoolValue}
111-
loading={loading || !stakingRewardPool}
119+
loading={infoLoading || !stakingRewardPool || isFakeRefreshing || dataIsStale}
112120
dataTestId={'staking-reward-pool-amount'}
113121
/>
114122
<TokenSection
115123
text={localize('sessionNetworkMarketCap').toString()}
116124
value={networkMarketCapValue}
117-
loading={loading || !usdMarketCap}
125+
loading={infoLoading || !usdMarketCap || isFakeRefreshing || dataIsStale}
118126
dataTestId={'market-cap-amount'}
119127
/>
120128
</Flex>

0 commit comments

Comments
 (0)