Skip to content

Commit caea5ae

Browse files
vojtechsimetkavojtechsimetka
authored
feat: info page redesign (#390)
* feat: info page redesign * feat: add chequebook card
1 parent 41432bc commit caea5ae

File tree

5 files changed

+214
-50
lines changed

5 files changed

+214
-50
lines changed

‎src/components/Card.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
2+
import { ReactElement } from 'react'
3+
import { AlertCircle, Check } from 'react-feather'
4+
import { SwarmButton, SwarmButtonProps } from './SwarmButton'
5+
6+
interface Props {
7+
icon: ReactElement
8+
title: string
9+
subtitle: string
10+
buttonProps: SwarmButtonProps
11+
status: 'ok' | 'error'
12+
}
13+
14+
const useStyles = (backgroundColor: string) =>
15+
makeStyles((theme: Theme) =>
16+
createStyles({
17+
root: {
18+
flexGrow: 1,
19+
flexBasis: '100px',
20+
},
21+
wrapper: {
22+
backgroundColor,
23+
padding: '16px',
24+
display: 'flex',
25+
flexDirection: 'column',
26+
alignItems: 'center',
27+
textAlign: 'center',
28+
},
29+
iconWrapper: {
30+
display: 'flex',
31+
alignItems: 'flex-start',
32+
marginBottom: '18px',
33+
},
34+
button: {
35+
width: '100%',
36+
marginTop: '2px',
37+
backgroundColor,
38+
'&:hover': {
39+
backgroundColor: theme.palette.primary.main,
40+
color: 'white',
41+
boxShadow: 'none',
42+
// https://github.com/mui-org/material-ui/issues/22543
43+
'@media (hover: none)': {
44+
backgroundColor: theme.palette.primary.main,
45+
color: 'white',
46+
boxShadow: 'none',
47+
},
48+
},
49+
},
50+
}),
51+
)
52+
53+
export default function Card({ buttonProps, icon, title, subtitle, status }: Props): ReactElement {
54+
const backgroundColor = status === 'error' ? 'white' : '#f3f3f3'
55+
const { className, ...rest } = buttonProps
56+
const classes = useStyles(backgroundColor)()
57+
58+
return (
59+
<div className={classes.root}>
60+
<div className={classes.wrapper}>
61+
<div className={classes.iconWrapper}>
62+
{icon}
63+
{status === 'ok' ? (
64+
<Check size="13" stroke="#09ca6c" />
65+
) : (
66+
<AlertCircle size="13" fill="#f44336" stroke="white" />
67+
)}
68+
</div>
69+
<Typography variant="h2" style={{ marginBottom: '8px' }}>
70+
{title}
71+
</Typography>
72+
<Typography variant="caption">{subtitle}</Typography>
73+
</div>
74+
<SwarmButton className={[classes.button, className].join(' ')} {...rest} />
75+
</div>
76+
)
77+
}

‎src/components/Map.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { ReactElement, CSSProperties } from 'react'
2+
3+
interface Props {
4+
style?: CSSProperties
5+
}
6+
7+
export default function Card({ style }: Props): ReactElement {
8+
return <div style={Object.assign({}, style, { width: '100%', height: '380px', backgroundColor: '#f3f3f3' })}></div>
9+
}

‎src/components/SwarmButton.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
1+
import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
22
import React, { ReactElement } from 'react'
33
import { IconProps } from 'react-feather'
44

5-
interface Props {
6-
onClick: () => void
5+
export interface SwarmButtonProps extends ButtonProps {
76
iconType: React.ComponentType<IconProps>
8-
children: string
9-
className?: string
10-
disabled?: boolean
117
loading?: boolean
128
cancel?: boolean
139
variant?: 'text' | 'contained' | 'outlined'
@@ -51,7 +47,9 @@ export function SwarmButton({
5147
loading,
5248
cancel,
5349
variant = 'contained',
54-
}: Props): ReactElement {
50+
style,
51+
...other
52+
}: SwarmButtonProps): ReactElement {
5553
const classes = useStyles()
5654

5755
function getIconColor() {
@@ -73,14 +71,18 @@ export function SwarmButton({
7371

7472
return (
7573
<Button
74+
style={style}
7675
className={getButtonClassName()}
7776
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
78-
onClick()
79-
event.currentTarget.blur()
77+
if (onClick) {
78+
onClick(event)
79+
event.currentTarget.blur()
80+
}
8081
}}
8182
variant={variant}
8283
startIcon={icon}
8384
disabled={disabled}
85+
{...other}
8486
>
8587
{children}
8688
{loading && (

‎src/pages/info/index.tsx‎

Lines changed: 116 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { ReactElement, useContext } from 'react'
22
import { Button } from '@material-ui/core'
3+
import { Globe, Briefcase, Search, Settings, ArrowUp, RefreshCcw } from 'react-feather'
34

4-
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
5-
import { CheckState, Context as BeeContext } from '../../providers/Bee'
6-
import ExpandableList from '../../components/ExpandableList'
5+
import { Context as BeeContext } from '../../providers/Bee'
6+
import Card from '../../components/Card'
7+
import Map from '../../components/Map'
78
import ExpandableListItem from '../../components/ExpandableListItem'
8-
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
9-
import TopologyStats from '../../components/TopologyStats'
9+
import { useNavigate } from 'react-router'
10+
import { ROUTES } from '../../routes'
1011

1112
export default function Status(): ReactElement {
1213
const {
@@ -15,48 +16,123 @@ export default function Status(): ReactElement {
1516
isLatestBeeVersion,
1617
latestBeeVersionUrl,
1718
topology,
18-
nodeAddresses,
19-
chequebookAddress,
2019
nodeInfo,
20+
balance,
21+
chequebookBalance,
2122
} = useContext(BeeContext)
22-
23-
if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
23+
const navigate = useNavigate()
2424

2525
return (
2626
<div>
27-
<ExpandableList label="Bee Node" defaultOpen>
28-
<ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
29-
<ExpandableListItem
30-
label="Agent"
31-
value={
32-
<div>
33-
<a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
34-
Bee
35-
</a>
36-
{` ${latestUserVersion || '-'} `}
37-
<Button size="small" variant="outlined" href={latestBeeVersionUrl} target="_blank">
27+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
28+
{status.all ? (
29+
<Card
30+
buttonProps={{ iconType: Search, children: 'Access Content', onClick: () => navigate(ROUTES.DOWNLOAD) }}
31+
icon={<Globe />}
32+
title="Your node is connected."
33+
subtitle="You can now access content hosted on Swarm."
34+
status="ok"
35+
/>
36+
) : (
37+
<Card
38+
buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
39+
icon={<Globe />}
40+
title="Your node is not connected…"
41+
subtitle="You’re not connected to Swarm."
42+
status="error"
43+
/>
44+
)}
45+
<div style={{ width: '8px' }}></div>
46+
{nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (
47+
<Card
48+
buttonProps={{
49+
iconType: Briefcase,
50+
children: 'Manage your wallet',
51+
onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
52+
}}
53+
icon={<Briefcase />}
54+
title={`${balance?.bzz.toSignificantDigits(4)} xBZZ | ${balance?.dai.toSignificantDigits(4)} xDAI`}
55+
subtitle="Current wallet balance."
56+
status="ok"
57+
/>
58+
) : (
59+
<Card
60+
buttonProps={{
61+
iconType: Settings,
62+
children: 'Setup wallet',
63+
onClick: () => navigate(ROUTES.WALLET),
64+
}}
65+
icon={<ArrowUp />}
66+
title="Your wallet is not setup."
67+
subtitle="To share content on Swarm, please setup your wallet."
68+
status="error"
69+
/>
70+
)}
71+
{nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) && (
72+
<>
73+
<div style={{ width: '8px' }} />
74+
{chequebookBalance?.availableBalance !== undefined &&
75+
chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
76+
<Card
77+
buttonProps={{
78+
iconType: RefreshCcw,
79+
children: 'View chequebook',
80+
onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
81+
}}
82+
icon={<RefreshCcw />}
83+
title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
84+
subtitle="Your chequebook is setup and has balance"
85+
status="ok"
86+
/>
87+
) : (
88+
<Card
89+
buttonProps={{
90+
iconType: RefreshCcw,
91+
children: 'View chequebook',
92+
onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
93+
}}
94+
icon={<RefreshCcw />}
95+
title={
96+
chequebookBalance?.availableBalance
97+
? `${chequebookBalance.availableBalance.toFixedDecimal(4)} xBZZ`
98+
: 'No available balance'
99+
}
100+
subtitle="Your chequebook is not setup or has no balance."
101+
status="error"
102+
/>
103+
)}
104+
</>
105+
)}
106+
</div>
107+
<div style={{ height: '16px' }} />
108+
<Map />
109+
<div style={{ height: '2px' }} />
110+
<ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
111+
<ExpandableListItem label="Depth" value={topology?.depth ?? '-'} />
112+
<div style={{ height: '16px' }} />
113+
<ExpandableListItem
114+
label="Bee version"
115+
value={
116+
<div>
117+
<a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
118+
Bee
119+
</a>
120+
{` ${latestUserVersion ?? '-'} `}
121+
{latestUserVersion && (
122+
<Button
123+
size="small"
124+
variant="outlined"
125+
href={latestBeeVersionUrl}
126+
target="_blank"
127+
style={{ height: '26px' }}
128+
>
38129
{isLatestBeeVersion ? 'latest' : 'update'}
39130
</Button>
40-
</div>
41-
}
42-
/>
43-
<ExpandableListItemKey label="Public key" value={nodeAddresses?.publicKey || ''} />
44-
<ExpandableListItemKey label="PSS public key" value={nodeAddresses?.pssPublicKey || ''} />
45-
<ExpandableListItemKey label="Overlay address (Peer ID)" value={nodeAddresses?.overlay || ''} />
46-
47-
<ExpandableList level={1} label="Underlay addresses">
48-
{nodeAddresses?.underlay.map(addr => (
49-
<ExpandableListItem key={addr} value={addr} />
50-
))}
51-
</ExpandableList>
52-
</ExpandableList>
53-
<ExpandableList label="Blockchain" defaultOpen>
54-
<ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
55-
<ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
56-
</ExpandableList>
57-
<ExpandableList label="Connectivity" defaultOpen>
58-
<TopologyStats topology={topology} />
59-
</ExpandableList>
131+
)}
132+
</div>
133+
}
134+
/>
135+
<ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
60136
</div>
61137
)
62138
}

‎src/theme.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export const theme = createTheme({
174174
palette: {
175175
type: 'light',
176176
background: {
177-
default: '#efefef',
177+
default: '#ededed',
178178
},
179179
primary: {
180180
light: '#fcf2e8',

0 commit comments

Comments
 (0)