add rpc warning

src/components/Header/Header.tsx

@@ -19,6 +19,7 @@ import classNames from 'classnames'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import useStyles from './style'
+import { RpcStatus } from '@reducers/solanaConnection'
 
 export interface IHeader {
   address: PublicKey
@@ -33,6 +34,7 @@ export interface IHeader {
   defaultMainnetRPC: string
   recentPriorityFee: string
   onPrioritySave: () => void
+  rpcStatus: RpcStatus
 }
 
 export const Header: React.FC<IHeader> = ({
@@ -47,7 +49,8 @@ export const Header: React.FC<IHeader> = ({
   onDisconnectWallet,
   defaultMainnetRPC,
   recentPriorityFee,
-  onPrioritySave
+  onPrioritySave,
+  rpcStatus
 }) => {
   const classes = useStyles()
   const buttonClasses = useButtonStyles()
@@ -162,7 +165,12 @@ export const Header: React.FC<IHeader> = ({
           </Hidden>
           <Hidden xsDown>
             {typeOfNetwork === NetworkType.MAINNET ? (
-              <SelectRPCButton rpc={rpc} networks={mainnetRPCs} onSelect={onNetworkSelect} />
+              <SelectRPCButton
+                rpc={rpc}
+                networks={mainnetRPCs}
+                rpcStatus={rpcStatus}
+                onSelect={onNetworkSelect}
+              />
             ) : null}
           </Hidden>
           <SelectNetworkButton
@@ -269,6 +277,7 @@ export const Header: React.FC<IHeader> = ({
                 unblurContent()
               }}
               activeRPC={rpc}
+              rpcStatus={rpcStatus}
             />
           ) : null}
         </Hidden>

src/components/HeaderButton/SelectRPCButton.tsx

@@ -4,18 +4,22 @@ import useStyles from './style'
 import { blurContent, unblurContent } from '@consts/uiUtils'
 import { ISelectNetwork } from '@components/Modals/SelectNetwork/SelectNetwork'
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'
-import { NetworkType } from '@consts/static'
+import { NetworkType, RECOMMENDED_RPC_ADDRESS } from '@consts/static'
 import SelectMainnetRPC from '@components/Modals/SelectMainnetRPC/SelectMainnetRPC'
+import { RpcStatus } from '@reducers/solanaConnection'
+import icons from '@static/icons'
 
 export interface IProps {
   rpc: string
   networks: ISelectNetwork[]
+  rpcStatus: RpcStatus
   onSelect: (networkType: NetworkType, rpcAddress: string, rpcName?: string) => void
   disabled?: boolean
 }
 export const SelectRPCButton: React.FC<IProps> = ({
   rpc,
   networks,
+  rpcStatus,
   onSelect,
   disabled = false
 }) => {
@@ -43,6 +47,9 @@ export const SelectRPCButton: React.FC<IProps> = ({
         disabled={disabled}
         endIcon={<KeyboardArrowDownIcon id='downIcon' />}
         onClick={handleClick}>
+        {rpcStatus === RpcStatus.IgnoredWithError && rpc !== RECOMMENDED_RPC_ADDRESS && (
+          <img className={classes.warningIcon} src={icons.warningIcon} alt='Warning icon' />
+        )}
         RPC
       </Button>
       <SelectMainnetRPC
@@ -52,6 +59,7 @@ export const SelectRPCButton: React.FC<IProps> = ({
         onSelect={onSelect}
         handleClose={handleClose}
         activeRPC={rpc}
+        rpcStatus={rpcStatus}
       />
     </>
   )

src/components/HeaderButton/style.ts

@@ -90,6 +90,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   innerEndIcon: {
     marginLeft: 0,
     marginBottom: 3
+  },
+  warningIcon: {
+    height: 16,
+    marginRight: 4
   }
 }))
 

src/components/Modals/SelectMainnetRPC/SelectMainnetRPC.tsx

@@ -1,11 +1,12 @@
-import { NetworkType } from '@consts/static'
-import { Button, Grid, Input, Popover, Typography } from '@material-ui/core'
+import { NetworkType, RECOMMENDED_RPC_ADDRESS } from '@consts/static'
+import { Box, Button, Grid, Input, Popover, Typography } from '@material-ui/core'
 import DotIcon from '@material-ui/icons/FiberManualRecordRounded'
 import icons from '@static/icons'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 import { ISelectNetwork } from '../SelectNetwork/SelectNetwork'
 import useStyles from './styles'
+import { RpcStatus } from '@reducers/solanaConnection'
 
 export interface ISelectMainnetRpc {
   networks: ISelectNetwork[]
@@ -14,14 +15,16 @@ export interface ISelectMainnetRpc {
   onSelect: (networkType: NetworkType, rpcAddress: string, rpcName?: string) => void
   handleClose: () => void
   activeRPC: string
+  rpcStatus: RpcStatus
 }
 export const SelectMainnetRPC: React.FC<ISelectMainnetRpc> = ({
   networks,
   anchorEl,
   open,
   onSelect,
   handleClose,
-  activeRPC
+  activeRPC,
+  rpcStatus
 }) => {
   const classes = useStyles()
 
@@ -51,6 +54,14 @@ export const SelectMainnetRPC: React.FC<ISelectMainnetRpc> = ({
       }}>
       <Grid className={classes.root}>
         <Typography className={classes.title}>Select mainnet RPC to use</Typography>
+        {rpcStatus === RpcStatus.IgnoredWithError && activeRPC !== RECOMMENDED_RPC_ADDRESS && (
+          <Box display='flex' sx={{ margin: 10 }}>
+            <img className={classes.warningIcon} src={icons.warningIcon} alt='Warning icon' />
+            <Typography className={classes.warningText}>
+              Current RPC might not work properly
+            </Typography>
+          </Box>
+        )}
         <Grid className={classes.list} container alignContent='space-around' direction='column'>
           {networks.map(({ networkType, rpc, rpcName }) => (
             <Grid
@@ -66,8 +77,12 @@ export const SelectMainnetRPC: React.FC<ISelectMainnetRpc> = ({
                 src={icons[`${networkType}Icon`]}
                 alt={`${networkType} icon`}
               />
-
-              <Typography className={classes.name}>{rpcName}</Typography>
+              <Box width='100%' display='flex' justifyContent='space-between' alignItems='center'>
+                <Typography className={classes.name}>{rpcName} </Typography>
+                <Typography className={classes.recommendedText}>
+                  {RECOMMENDED_RPC_ADDRESS === rpc && 'RECOMMENDED'}
+                </Typography>
+              </Box>
               <DotIcon className={classes.dotIcon} />
             </Grid>
           ))}

src/components/Modals/SelectMainnetRPC/styles.ts

@@ -42,12 +42,11 @@ const useStyles = makeStyles(() => ({
   },
   dotIcon: {
     width: 12,
-    marginLeft: 'auto',
+    marginLeft: 8,
     color: colors.invariant.green,
     display: 'none'
   },
   name: {
-    textTransform: 'capitalize',
     ...typography.body2,
     paddingTop: '1px'
   },
@@ -107,6 +106,18 @@ const useStyles = makeStyles(() => ({
       background: colors.invariant.light,
       color: colors.invariant.black
     }
+  },
+  warningIcon: {
+    height: 16,
+    marginRight: 4
+  },
+  warningText: {
+    ...typography.caption2,
+    color: colors.invariant.yellow
+  },
+  recommendedText: {
+    ...typography.caption3,
+    color: colors.white.main
   }
 }))
 

src/components/RpcErrorModal/RpcErrorModal.tsx

@@ -0,0 +1,52 @@
+import { Box, Button, Typography } from '@material-ui/core'
+import useStyles from './style'
+import icons from '@static/icons'
+import { useState } from 'react'
+
+interface Props {
+  rpcAddress: string
+  useDefaultRpc: () => void
+  useCurrentRpc: () => void
+}
+
+export const RpcErrorModal: React.FC<Props> = ({ rpcAddress, useDefaultRpc, useCurrentRpc }) => {
+  const [rpc] = useState(rpcAddress)
+
+  const classes = useStyles()
+
+  return (
+    <>
+      <div className={classes.background}></div>
+      <div className={classes.container}>
+        <img className={classes.warningIcon} src={icons.warningIcon} alt='Warning icon' />
+        <Typography className={classes.title}>RPC Connection Error</Typography>
+        <Box
+          display='flex'
+          flexDirection='column'
+          alignItems='center'
+          /* @ts-expect-error */
+          sx={{ gap: 8, marginTop: 16 }}>
+          <Typography className={classes.rpcText}>
+            Your RPC might not be working due to one of the following reasons:
+            <ul>
+              <li>The RPC server is down or not responding.</li>
+              <li>Your RPC subscription expired, causing the server to stop working.</li>
+              <li>Your RPC plan may not support certain calls.</li>
+            </ul>
+          </Typography>
+          <Typography className={classes.currentRpcText}>
+            Current RPC: <span className={classes.currentRpc}>{rpc}</span>
+          </Typography>
+        </Box>
+        <Box className={classes.buttonsContainer}>
+          <Button className={classes.mainButton} onClick={useDefaultRpc}>
+            Change to default RPC
+          </Button>
+          <Button className={classes.otherButton} onClick={useCurrentRpc}>
+            Use current RPC anyway
+          </Button>
+        </Box>
+      </div>
+    </>
+  )
+}

src/components/RpcErrorModal/style.ts

@@ -0,0 +1,97 @@
+import { makeStyles } from '@material-ui/core/styles'
+import { colors, typography } from '@static/theme'
+
+const useStyles = makeStyles(theme => ({
+  background: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 51,
+    backdropFilter: 'blur(16px)'
+  },
+  container: {
+    position: 'absolute',
+    top: 300,
+    width: 480,
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    backgroundColor: colors.invariant.component,
+    padding: 32,
+    borderRadius: 20,
+    color: colors.white.main,
+    zIndex: 52,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+
+    [theme.breakpoints.down('xs')]: {
+      width: 'calc(100% - 96px)',
+      left: 16,
+      right: 16,
+      transform: 'none'
+    }
+  },
+  warningIcon: {
+    height: 48
+  },
+  title: {
+    ...typography.heading3,
+    marginTop: 16,
+    textAlign: 'center'
+  },
+  rpcText: {
+    color: colors.invariant.lightGrey,
+    fontWeight: 'normal'
+  },
+  currentRpcText: {
+    color: colors.invariant.lightGrey,
+    fontWeight: 'normal',
+    textAlign: 'center'
+  },
+  currentRpc: {
+    color: colors.white.main,
+    fontWeight: 'bold'
+  },
+  mainButton: {
+    width: 240,
+    height: 40,
+    color: colors.invariant.black,
+    ...typography.body1,
+    textTransform: 'none',
+    background: colors.invariant.pinkLinearGradientOpacity,
+    borderRadius: 14,
+
+    '&:hover': {
+      background: colors.invariant.pinkLinearGradient,
+      boxShadow: `0 0 16px ${colors.invariant.pink}`
+    }
+  },
+  otherButton: {
+    width: 240,
+    height: 40,
+    color: colors.white.main,
+    ...typography.body1,
+    textTransform: 'none',
+    background: colors.invariant.light,
+    borderRadius: 14,
+
+    '&:hover': {
+      background: colors.invariant.light,
+      boxShadow: `0 0 16px ${colors.invariant.light}`
+    }
+  },
+  buttonsContainer: {
+    marginTop: 16,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+
+    [theme.breakpoints.down('xs')]: {
+      flexDirection: 'column'
+    }
+  }
+}))
+
+export default useStyles

src/components/Swap/Swap.tsx

@@ -662,7 +662,7 @@ export const Swap: React.FC<ISwap> = ({
         <TransactionDetailsBox
           open={getStateMessage() !== 'Loading' ? detailsOpen && canShowDetails : prevOpenState}
           fee={{
-            v: canShowDetails ? pools[simulateResult.poolIndex].fee.v : new BN(0)
+            v: canShowDetails ? pools[simulateResult.poolIndex]?.fee.v ?? new BN(0) : new BN(0)
           }}
           exchangeRate={{
             val: rateReversed ? 1 / swapRate : swapRate,