Skip to content

Commit c50c86d

Browse files
zielvnazielvna
authored
Merge pull request #319 from invariant-labs/rpc-warning
add rpc warning modal
2 parents fb3f602 + 4e4e89a commit c50c86d

File tree

23 files changed

+472
-93
lines changed

23 files changed

+472
-93
lines changed

‎package-lock.json‎

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"dependencies": {
1818
"@emotion/react": "^11.11.4",
1919
"@emotion/styled": "^11.11.5",
20-
"@invariant-labs/a0-sdk": "^0.2.24",
20+
"@invariant-labs/a0-sdk": "^0.2.27",
2121
"@mui/icons-material": "^5.15.15",
2222
"@mui/material": "^5.15.15",
2323
"@nightlylabs/wallet-selector-polkadot": "^0.2.5",

‎src/components/Header/Header.stories.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Network } from '@invariant-labs/a0-sdk'
66
import { Chain } from '@store/consts/types'
77
import { Provider } from 'react-redux'
88
import { store } from '@store/index'
9+
import { RpcStatus } from '@store/reducers/connection'
910

1011
const meta = {
1112
title: 'Layout/Header',
@@ -45,6 +46,7 @@ export const Primary: Story = {
4546
},
4647
onChainSelect: fn(),
4748
network: Network.Testnet,
48-
defaultMainnetRPC: 'https://rpc.moonbeam.network'
49+
defaultMainnetRPC: 'https://rpc.moonbeam.network',
50+
rpcStatus: RpcStatus.Uninitialized
4951
}
5052
}

‎src/components/Header/Header.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import SelectChainButton from './HeaderButton/SelectChainButton'
2020
import { ISelectChain } from '@store/consts/types'
2121
import SelectChain from '@components/Modals/SelectChain/SelectChain'
2222
import SelectMainnetRPC from '@components/Modals/SelectMainnetRPC/SelectMainnetRPC'
23+
import { RpcStatus } from '@store/reducers/connection'
2324

2425
export interface IHeader {
2526
address: string
@@ -38,6 +39,7 @@ export interface IHeader {
3839
onChainSelect: (chain: ISelectChain) => void
3940
network: Network
4041
defaultMainnetRPC: string
42+
rpcStatus: RpcStatus
4143
}
4244

4345
export const Header: React.FC<IHeader> = ({
@@ -56,7 +58,8 @@ export const Header: React.FC<IHeader> = ({
5658
activeChain,
5759
onChainSelect,
5860
network,
59-
defaultMainnetRPC
61+
defaultMainnetRPC,
62+
rpcStatus
6063
}) => {
6164
const { classes } = useStyles()
6265
const buttonStyles = useButtonStyles()
@@ -176,6 +179,7 @@ export const Header: React.FC<IHeader> = ({
176179
networks={network === Network.Testnet ? testnetRPCs : mainnetRPCs}
177180
onSelect={onNetworkSelect}
178181
network={network}
182+
rpcStatus={rpcStatus}
179183
/>
180184
</Box>
181185
<Box sx={{ display: { xs: 'none', md: 'block' } }}>
@@ -280,6 +284,7 @@ export const Header: React.FC<IHeader> = ({
280284
unblurContent()
281285
}}
282286
activeRPC={rpc}
287+
rpcStatus={rpcStatus}
283288
/>
284289
) : (
285290
<SelectMainnetRPC
@@ -292,6 +297,7 @@ export const Header: React.FC<IHeader> = ({
292297
unblurContent()
293298
}}
294299
activeRPC={rpc}
300+
rpcStatus={rpcStatus}
295301
/>
296302
)}
297303
<SelectChain

‎src/components/Header/HeaderButton/SelectRPCButton.stories.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import SelectRPCButton from './SelectRPCButton'
33
import { Network } from '@invariant-labs/a0-sdk'
44
import { RPC } from '@store/consts/static'
55
import { action } from '@storybook/addon-actions'
6+
import { RpcStatus } from '@store/reducers/connection'
67

78
const meta = {
89
title: 'Buttons/SelectRPCButton',
@@ -23,6 +24,7 @@ export const Primary: Story = {
2324
}
2425
],
2526
onSelect: (networkType, rpc) => action('chosen: ' + networkType + ' ' + rpc)(),
26-
network: Network.Testnet
27+
network: Network.Testnet,
28+
rpcStatus: RpcStatus.Uninitialized
2729
}
2830
}

‎src/components/Header/HeaderButton/SelectRPCButton.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,25 @@ import SelectTestnetRPC from '@components/Modals/SelectTestnetRPC/SelectTestnetR
77
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
88
import { Network } from '@invariant-labs/a0-sdk'
99
import SelectMainnetRPC from '@components/Modals/SelectMainnetRPC/SelectMainnetRPC'
10+
import { RpcStatus } from '@store/reducers/connection'
11+
import { RECOMMENDED_RPC_ADDRESS } from '@store/consts/static'
12+
import icons from '@static/icons'
1013

1114
export interface IProps {
1215
rpc: string
1316
networks: ISelectNetwork[]
1417
onSelect: (networkType: Network, rpcAddress: string, rpcName?: string) => void
1518
disabled?: boolean
1619
network: Network
20+
rpcStatus: RpcStatus
1721
}
1822
export const SelectRPCButton: React.FC<IProps> = ({
1923
rpc,
2024
networks,
2125
onSelect,
2226
disabled = false,
23-
network
27+
network,
28+
rpcStatus
2429
}) => {
2530
const { classes } = useStyles()
2631
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
@@ -46,6 +51,9 @@ export const SelectRPCButton: React.FC<IProps> = ({
4651
disabled={disabled}
4752
endIcon={<KeyboardArrowDownIcon id='downIcon' />}
4853
onClick={handleClick}>
54+
{rpcStatus === RpcStatus.IgnoredWithError && rpc !== RECOMMENDED_RPC_ADDRESS[network] && (
55+
<img className={classes.warningIcon} src={icons.warningIcon} alt='Warning icon' />
56+
)}
4957
RPC
5058
</Button>
5159
{network === Network.Testnet ? (
@@ -56,6 +64,7 @@ export const SelectRPCButton: React.FC<IProps> = ({
5664
onSelect={onSelect}
5765
handleClose={handleClose}
5866
activeRPC={rpc}
67+
rpcStatus={rpcStatus}
5968
/>
6069
) : (
6170
<SelectMainnetRPC
@@ -65,6 +74,7 @@ export const SelectRPCButton: React.FC<IProps> = ({
6574
onSelect={onSelect}
6675
handleClose={handleClose}
6776
activeRPC={rpc}
77+
rpcStatus={rpcStatus}
6878
/>
6979
)}
7080
</>

‎src/components/Header/HeaderButton/style.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,10 @@ const useStyles = makeStyles()((theme: Theme) => {
9797
innerEndIcon: {
9898
marginLeft: 0,
9999
marginBottom: 3
100+
},
101+
warningIcon: {
102+
height: 16,
103+
marginRight: 4
100104
}
101105
}
102106
})

‎src/components/Modals/SelectMainnetRPC/SelectMainnetRPC.stories.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Meta, StoryObj } from '@storybook/react'
22
import SelectMainnetRPC from './SelectMainnetRPC'
33
import { Network } from '@invariant-labs/a0-sdk'
4+
import { RpcStatus } from '@store/reducers/connection'
45

56
const meta = {
67
title: 'Modals/SelectRPC',
@@ -17,7 +18,8 @@ const meta = {
1718
}
1819
],
1920
onSelect: () => {},
20-
open: true
21+
open: true,
22+
rpcStatus: RpcStatus.Uninitialized
2123
}
2224
} satisfies Meta<typeof SelectMainnetRPC>
2325

‎src/components/Modals/SelectMainnetRPC/SelectMainnetRPC.tsx‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { Network } from '@invariant-labs/a0-sdk'
22
import DotIcon from '@mui/icons-material/FiberManualRecord'
3-
import { Button, Grid, Input, Popover, Typography } from '@mui/material'
3+
import { Box, Button, Grid, Input, Popover, Typography } from '@mui/material'
44
import { ISelectNetwork } from '@store/consts/types'
55
import classNames from 'classnames'
66
import React, { useEffect, useRef, useState } from 'react'
77
import useStyles from './styles'
8+
import { RpcStatus } from '@store/reducers/connection'
9+
import { RECOMMENDED_RPC_ADDRESS } from '@store/consts/static'
10+
import icons from '@static/icons'
811

912
export interface ISelectMainnetRPC {
1013
networks: ISelectNetwork[]
@@ -13,14 +16,16 @@ export interface ISelectMainnetRPC {
1316
onSelect: (networkType: Network, rpcAddress: string, rpcName?: string) => void
1417
handleClose: () => void
1518
activeRPC: string
19+
rpcStatus: RpcStatus
1620
}
1721
export const SelectMainnetRPC: React.FC<ISelectMainnetRPC> = ({
1822
networks,
1923
anchorEl,
2024
open,
2125
onSelect,
2226
handleClose,
23-
activeRPC
27+
activeRPC,
28+
rpcStatus
2429
}) => {
2530
const { classes } = useStyles()
2631

@@ -50,8 +55,13 @@ export const SelectMainnetRPC: React.FC<ISelectMainnetRPC> = ({
5055
setButtonApplied(true)
5156
setActiveCustom(true)
5257
setAddress(activeRPC)
58+
} else {
59+
setCustomApplied(false)
60+
setButtonApplied(false)
61+
setActiveCustom(false)
62+
setAddress('')
5363
}
54-
}, [])
64+
}, [activeRPC])
5565

5666
return (
5767
<Popover
@@ -72,6 +82,15 @@ export const SelectMainnetRPC: React.FC<ISelectMainnetRPC> = ({
7282
}}>
7383
<Grid className={classes.root}>
7484
<Typography className={classes.title}>Select mainnet RPC to use</Typography>
85+
{rpcStatus === RpcStatus.IgnoredWithError &&
86+
activeRPC !== RECOMMENDED_RPC_ADDRESS[Network.Mainnet] && (
87+
<div className={classes.warningContainer}>
88+
<img className={classes.warningIcon} src={icons.warningIcon} alt='Warning icon' />
89+
<Typography className={classes.warningText}>
90+
Current RPC might not work properly
91+
</Typography>
92+
</div>
93+
)}
7594
<Grid className={classes.list} container alignContent='space-around' direction='column'>
7695
{networks.map(({ networkType, rpc, rpcName }) => (
7796
<Grid
@@ -89,7 +108,12 @@ export const SelectMainnetRPC: React.FC<ISelectMainnetRPC> = ({
89108
setButtonApplied(false)
90109
handleClose()
91110
}}>
92-
<Typography className={classes.name}>{rpcName}</Typography>
111+
<Box width='100%' display='flex' justifyContent='space-between' alignItems='center'>
112+
<Typography className={classes.name}>{rpcName} </Typography>
113+
<Typography className={classes.recommendedText}>
114+
{RECOMMENDED_RPC_ADDRESS[Network.Mainnet] === rpc && 'RECOMMENDED'}
115+
</Typography>
116+
</Box>
93117
<DotIcon className={classes.dotIcon} />
94118
</Grid>
95119
))}
@@ -105,7 +129,9 @@ export const SelectMainnetRPC: React.FC<ISelectMainnetRPC> = ({
105129
setActiveCustom(true)
106130
inputRef.current?.focus()
107131
}}>
108-
<Typography className={classes.name}>Custom RPC</Typography>
132+
<Box width='100%' display='flex' justifyContent='space-between' alignItems='center'>
133+
<Typography className={classes.name}>Custom RPC</Typography>
134+
</Box>
109135
<DotIcon className={classes.dotIcon} />
110136
</Grid>
111137
</Grid>

‎src/components/Modals/SelectMainnetRPC/styles.ts‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const useStyles = makeStyles()(() => {
4747
},
4848
dotIcon: {
4949
width: 12,
50-
marginLeft: 'auto',
50+
marginLeft: 8,
5151
color: colors.invariant.green,
5252
visibility: 'hidden'
5353
},
@@ -149,6 +149,28 @@ const useStyles = makeStyles()(() => {
149149
color: colors.invariant.text,
150150
cursor: 'default'
151151
}
152+
},
153+
warningIcon: {
154+
height: 16,
155+
marginRight: 4
156+
},
157+
warningText: {
158+
...typography.caption2,
159+
color: colors.invariant.yellow
160+
},
161+
recommendedText: {
162+
...typography.caption3,
163+
color: colors.white.main
164+
},
165+
warningContainer: {
166+
padding: '0 8px',
167+
display: 'flex'
168+
},
169+
rpcContainer: {
170+
width: '100%',
171+
display: 'flex',
172+
alignItems: 'center',
173+
justifyContent: 'space-between'
152174
}
153175
}
154176
})

0 commit comments

Comments
 (0)