add ability to change network and use custom rpc on each one

package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@invariant-labs/a0-sdk": "^0.2.17",
+    "@invariant-labs/a0-sdk": "^0.2.19",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "@nightlylabs/wallet-selector-polkadot": "^0.2.5",

src/components/Header/Header.stories.tsx

@@ -43,6 +43,8 @@ export const Primary: Story = {
       name: Chain.AlephZero,
       address: 'https://azero.invariant.app/swap'
     },
-    onChainSelect: fn()
+    onChainSelect: fn(),
+    network: Network.Testnet,
+    defaultMainnetRPC: 'https://rpc.moonbeam.network'
   }
 }

src/components/Header/Header.tsx

@@ -19,6 +19,7 @@ import { Network } from '@invariant-labs/a0-sdk'
 import SelectChainButton from './HeaderButton/SelectChainButton'
 import { ISelectChain } from '@store/consts/types'
 import SelectChain from '@components/Modals/SelectChain/SelectChain'
+import SelectMainnetRPC from '@components/Modals/SelectMainnetRPC/SelectMainnetRPC'
 
 export interface IHeader {
   address: string
@@ -35,6 +36,8 @@ export interface IHeader {
   onChangeWallet: () => void
   activeChain: ISelectChain
   onChainSelect: (chain: ISelectChain) => void
+  network: Network
+  defaultMainnetRPC: string
 }
 
 export const Header: React.FC<IHeader> = ({
@@ -51,7 +54,9 @@ export const Header: React.FC<IHeader> = ({
   onCopyAddress,
   onChangeWallet,
   activeChain,
-  onChainSelect
+  onChainSelect,
+  network,
+  defaultMainnetRPC
 }) => {
   const { classes } = useStyles()
   const buttonStyles = useButtonStyles()
@@ -81,7 +86,15 @@ export const Header: React.FC<IHeader> = ({
     {
       networkType: Network.Testnet,
       rpc: RPC.TEST,
-      rpcName: 'Aleph Zero'
+      rpcName: 'Aleph Zero Testnet'
+    }
+  ]
+
+  const mainnetRPCs = [
+    {
+      networkType: Network.Mainnet,
+      rpc: RPC.MAIN,
+      rpcName: 'Aleph Zero Mainnet'
     }
   ]
 
@@ -148,22 +161,23 @@ export const Header: React.FC<IHeader> = ({
 
         <Grid container item className={classes.buttons} wrap='nowrap'>
           <Grid container className={classes.leftButtons}>
-            {typeOfNetwork === Network.Testnet ? (
-              <Box sx={{ display: { xs: 'none', md: 'block' } }}>
-                <Button
-                  className={buttonStyles.classes.headerButton}
-                  variant='contained'
-                  sx={{ '& .MuiButton-label': buttonStyles.classes.label }}
-                  onClick={onFaucet}>
-                  Faucet
-                </Button>
-              </Box>
-            ) : null}
-            {typeOfNetwork === Network.Testnet ? (
-              <Box sx={{ display: { xs: 'none', md: 'block' } }}>
-                <SelectRPCButton rpc={rpc} networks={testnetRPCs} onSelect={onNetworkSelect} />
-              </Box>
-            ) : null}
+            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+              <Button
+                className={buttonStyles.classes.headerButton}
+                variant='contained'
+                sx={{ '& .MuiButton-label': buttonStyles.classes.label }}
+                onClick={onFaucet}>
+                Faucet
+              </Button>
+            </Box>
+            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+              <SelectRPCButton
+                rpc={rpc}
+                networks={network === Network.Testnet ? testnetRPCs : mainnetRPCs}
+                onSelect={onNetworkSelect}
+                network={network}
+              />
+            </Box>
             <Box sx={{ display: { xs: 'none', md: 'block' } }}>
               <SelectChainButton
                 activeChain={activeChain}
@@ -179,6 +193,12 @@ export const Header: React.FC<IHeader> = ({
                   rpc: defaultTestnetRPC,
                   rpcName:
                     testnetRPCs.find(data => data.rpc === defaultTestnetRPC)?.rpcName ?? 'Custom'
+                },
+                {
+                  networkType: Network.Mainnet,
+                  rpc: defaultMainnetRPC,
+                  rpcName:
+                    mainnetRPCs.find(data => data.rpc === defaultMainnetRPC)?.rpcName ?? 'Custom'
                 }
               ]}
               onSelect={onNetworkSelect}
@@ -231,9 +251,9 @@ export const Header: React.FC<IHeader> = ({
               setRoutesModalOpen(false)
               unblurContent()
             }}
-            onFaucet={typeOfNetwork === Network.Testnet && isMdDown ? onFaucet : undefined}
+            onFaucet={isMdDown ? onFaucet : undefined}
             onRPC={
-              typeOfNetwork === Network.Testnet && isMdDown
+              isMdDown
                 ? () => {
                     setRoutesModalOpen(false)
                     setTestnetRpcsOpen(true)
@@ -261,7 +281,19 @@ export const Header: React.FC<IHeader> = ({
               }}
               activeRPC={rpc}
             />
-          ) : null}
+          ) : (
+            <SelectMainnetRPC
+              networks={mainnetRPCs}
+              open={testnetRpcsOpen}
+              anchorEl={routesModalAnchor}
+              onSelect={onNetworkSelect}
+              handleClose={() => {
+                setTestnetRpcsOpen(false)
+                unblurContent()
+              }}
+              activeRPC={rpc}
+            />
+          )}
           <SelectChain
             chains={CHAINS}
             open={chainSelectOpen}

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

@@ -22,6 +22,7 @@ export const Primary: Story = {
         rpcName: 'Testnet'
       }
     ],
-    onSelect: (networkType, rpc) => action('chosen: ' + networkType + ' ' + rpc)()
+    onSelect: (networkType, rpc) => action('chosen: ' + networkType + ' ' + rpc)(),
+    network: Network.Testnet
   }
 }

src/components/Header/HeaderButton/SelectRPCButton.tsx

@@ -6,18 +6,21 @@ import { Button } from '@mui/material'
 import SelectTestnetRPC from '@components/Modals/SelectTestnetRPC/SelectTestnetRPC'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import { Network } from '@invariant-labs/a0-sdk'
+import SelectMainnetRPC from '@components/Modals/SelectMainnetRPC/SelectMainnetRPC'
 
 export interface IProps {
   rpc: string
   networks: ISelectNetwork[]
   onSelect: (networkType: Network, rpcAddress: string, rpcName?: string) => void
   disabled?: boolean
+  network: Network
 }
 export const SelectRPCButton: React.FC<IProps> = ({
   rpc,
   networks,
   onSelect,
-  disabled = false
+  disabled = false,
+  network
 }) => {
   const { classes } = useStyles()
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
@@ -45,14 +48,25 @@ export const SelectRPCButton: React.FC<IProps> = ({
         onClick={handleClick}>
         RPC
       </Button>
-      <SelectTestnetRPC
-        networks={networks}
-        open={openTestnetRpcs}
-        anchorEl={anchorEl}
-        onSelect={onSelect}
-        handleClose={handleClose}
-        activeRPC={rpc}
-      />
+      {network === Network.Testnet ? (
+        <SelectTestnetRPC
+          networks={networks}
+          open={openTestnetRpcs}
+          anchorEl={anchorEl}
+          onSelect={onSelect}
+          handleClose={handleClose}
+          activeRPC={rpc}
+        />
+      ) : (
+        <SelectMainnetRPC
+          networks={networks}
+          open={openTestnetRpcs}
+          anchorEl={anchorEl}
+          onSelect={onSelect}
+          handleClose={handleClose}
+          activeRPC={rpc}
+        />
+      )}
     </>
   )
 }

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import SelectMainnetRPC from './SelectMainnetRPC'
+import { Network } from '@invariant-labs/a0-sdk'
+
+const meta = {
+  title: 'Modals/SelectRPC',
+  component: SelectMainnetRPC,
+  args: {
+    activeRPC: 'https://mainnet-mock.com',
+    anchorEl: null,
+    handleClose: () => {},
+    networks: [
+      {
+        networkType: Network.Mainnet,
+        rpc: 'https://mainnet-mock.com',
+        rpcName: 'Mainnet'
+      }
+    ],
+    onSelect: () => {},
+    open: true
+  }
+} satisfies Meta<typeof SelectMainnetRPC>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {}