Update staging env

src/components/Header/Header.stories.tsx

@@ -40,7 +40,6 @@ export const Primary: Story = {
     walletConnected: true,
     onFaucet: fn(),
     onCopyAddress: fn(),
-    onChangeWallet: fn(),
     activeChain: {
       name: Chain.Eclipse,
       address: 'https://exlipse.invariant.app'

src/components/Header/Header.tsx

@@ -35,7 +35,6 @@ export interface IHeader {
   onDisconnectWallet: () => void
   defaultTestnetRPC: string
   onCopyAddress: () => void
-  onChangeWallet: () => void
   activeChain: ISelectChain
   onChainSelect: (chain: ISelectChain) => void
   network: NetworkType
@@ -59,7 +58,6 @@ export const Header: React.FC<IHeader> = ({
   onDisconnectWallet,
   defaultDevnetRPC,
   onCopyAddress,
-  onChangeWallet,
   activeChain,
   onChainSelect,
   network,
@@ -277,7 +275,6 @@ export const Header: React.FC<IHeader> = ({
               walletConnected ? <DotIcon className={classes.connectedWalletIcon} /> : undefined
             }
             onCopyAddress={onCopyAddress}
-            onChangeWallet={onChangeWallet}
           />
         </Grid>
 

src/components/Header/HeaderButton/ChangeWalletButton.tsx

@@ -5,6 +5,7 @@ import { Button, Typography } from '@mui/material'
 import { blurContent, unblurContent } from '@utils/uiUtils'
 import ConnectWallet from '@components/Modals/ConnectWallet/ConnectWallet'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import SelectWalletModal from '@components/Modals/SelectWalletModal/SelectWalletModal'
 
 export interface IProps {
   name: string
@@ -15,7 +16,7 @@ export interface IProps {
   hideArrow?: boolean
   className?: string
   onCopyAddress?: () => void
-  onChangeWallet?: () => void
+  textClassName?: string
 }
 export const ChangeWalletButton: React.FC<IProps> = ({
   name,
@@ -26,20 +27,32 @@ export const ChangeWalletButton: React.FC<IProps> = ({
   onDisconnect,
   className,
   onCopyAddress = () => {},
-  onChangeWallet = () => {}
+  textClassName
 }) => {
   const { classes } = useStyles()
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
   const [open, setOpen] = React.useState<boolean>(false)
+  const [isOpenSelectWallet, setIsOpenSelectWallet] = React.useState<boolean>(false)
+  const [isChangeWallet, setIsChangeWallet] = React.useState<boolean>(false)
+
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    console.log('connected', connected)
     if (!connected) {
-      onConnect()
-      return
+      setIsOpenSelectWallet(true)
+      setAnchorEl(event.currentTarget)
+      blurContent()
+    } else {
+      setAnchorEl(event.currentTarget)
+      blurContent()
+      setOpen(true)
     }
+  }
 
-    setAnchorEl(event.currentTarget)
-    blurContent()
-    setOpen(true)
+  const handleConnect = async () => {
+    onConnect()
+    setIsOpenSelectWallet(false)
+    unblurContent()
+    setIsChangeWallet(false)
   }
 
   const handleClose = () => {
@@ -51,12 +64,17 @@ export const ChangeWalletButton: React.FC<IProps> = ({
     onDisconnect()
     unblurContent()
     setOpen(false)
+    localStorage.setItem('WALLET_TYPE', '')
   }
 
   const handleChangeWallet = () => {
-    onChangeWallet()
+    setIsChangeWallet(true)
     unblurContent()
     setOpen(false)
+    setIsOpenSelectWallet(true)
+    blurContent()
+
+    localStorage.setItem('WALLET_TYPE', '')
   }
 
   const handleCopyAddress = () => {
@@ -70,8 +88,8 @@ export const ChangeWalletButton: React.FC<IProps> = ({
       <Button
         id='connect-wallet-button'
         className={classNames(
-          className,
-          connected ? classes.headerButtonConnected : classes.headerButtonConnect
+          connected ? classes.headerButtonConnected : classes.headerButtonConnect,
+          className
         )}
         variant='contained'
         classes={{
@@ -85,15 +103,33 @@ export const ChangeWalletButton: React.FC<IProps> = ({
         endIcon={
           connected && !hideArrow ? <ExpandMoreIcon className={classes.endIcon} /> : undefined
         }>
-        <Typography className={classes.headerButtonTextEllipsis}>{name}</Typography>
+        <Typography className={classNames(classes.headerButtonTextEllipsis, textClassName)}>
+          {name}
+        </Typography>
       </Button>
+      <SelectWalletModal
+        anchorEl={anchorEl}
+        handleClose={() => {
+          setIsOpenSelectWallet(false)
+          unblurContent()
+        }}
+        setIsOpenSelectWallet={() => {
+          setIsOpenSelectWallet(false)
+          unblurContent()
+        }}
+        handleConnect={handleConnect}
+        open={isOpenSelectWallet}
+        isChangeWallet={isChangeWallet}
+        onDisconnect={handleDisconnect}
+      />
       <ConnectWallet
         open={open}
         anchorEl={anchorEl}
         handleClose={handleClose}
         callDisconect={handleDisconnect}
         callCopyAddress={handleCopyAddress}
         callChangeWallet={handleChangeWallet}
+        isChangeWallet={isChangeWallet}
       />
     </>
   )

src/components/Modals/ConnectWallet/ConnectWallet.stories.tsx

@@ -17,5 +17,11 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
-  args: { open: true, anchorEl: null, handleClose: fn(), callDisconect: fn() }
+  args: {
+    open: true,
+    anchorEl: null,
+    handleClose: fn(),
+    callDisconect: fn(),
+    isChangeWallet: false
+  }
 }

src/components/Modals/ConnectWallet/ConnectWallet.tsx

@@ -11,6 +11,7 @@ export interface IConnectWalletModal {
   callDisconect: () => void
   callCopyAddress?: () => void
   callChangeWallet?: () => void
+  isChangeWallet: boolean
 }
 export const ConnectWallet: React.FC<IConnectWalletModal> = ({
   open,

src/components/Modals/SelectWalletModal/SelectWalletModal.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import { Button, Grid, Popover, Typography, Divider, Box } from '@mui/material'
+import useStyles from './styles'
+import { walletNames } from '@store/consts/static'
+import { WalletType } from '@store/consts/types'
+import { openWalletSelectorModal } from '@utils/web3/selector'
+import { changeToNightlyAdapter, connectStaticWallet } from '@utils/web3/wallet'
+import icons from '@static/icons'
+export interface ISelectWalletModal {
+  open: boolean
+  anchorEl: HTMLButtonElement | null
+  handleConnect: () => void
+  handleClose: () => void
+  isChangeWallet: boolean
+  onDisconnect: () => void
+  setIsOpenSelectWallet: (isOpen: boolean) => void
+}
+
+export const SelectWalletModal: React.FC<ISelectWalletModal> = ({
+  open,
+  handleConnect,
+  handleClose,
+  isChangeWallet,
+  setIsOpenSelectWallet,
+  onDisconnect
+}) => {
+  const { classes } = useStyles()
+
+  const setWallet = (wallet: WalletType) => {
+    localStorage.setItem('WALLET_TYPE', wallet.toString())
+  }
+
+  const handleConnectStaticWallet = async (wallet: WalletType) => {
+    setIsOpenSelectWallet(false)
+    setTimeout(async () => {
+      if (isChangeWallet) {
+        await (async () => onDisconnect())()
+        await new Promise(resolve => setTimeout(resolve, 100))
+      }
+
+      await connectStaticWallet(wallet)
+      handleConnect()
+      setWallet(wallet)
+    }, 300)
+  }
+
+  return (
+    <div className={classes.modalContainer}>
+      <Popover
+        open={open}
+        anchorReference='none'
+        classes={{
+          root: classes.popoverRoot,
+          paper: classes.paper
+        }}
+        onClose={handleClose}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+        <Box className={classes.root}>
+          <Grid
+            className={classes.topCloseButton}
+            onClick={() => {
+              setIsOpenSelectWallet(false)
+            }}>
+            <img width={16} src={icons.closeIcon} alt='Close'></img>
+          </Grid>
+          <Typography className={classes.title}>Connect your wallet</Typography>
+
+          <Grid className={classes.buttonWrapper}>
+            <Typography className={classes.subTitle}>Connect with popular wallets </Typography>
+            <Grid className={classes.buttonList}>
+              <Grid
+                item
+                className={classes.button}
+                onClick={() => {
+                  handleConnectStaticWallet(WalletType.PHANTOM)
+                }}>
+                <Typography className={classes.buttonName}>
+                  {' '}
+                  <img width={45} rel='preload' src={icons.PhantomWallet} alt='Close'></img>
+                  {walletNames[WalletType.PHANTOM]}
+                </Typography>
+              </Grid>
+              <Grid
+                item
+                className={classes.button}
+                onClick={async () => {
+                  handleConnectStaticWallet(WalletType.BACKPACK)
+                }}>
+                <Typography className={classes.buttonName}>
+                  <img width={40} rel='preload' src={icons.BackpackWallet} alt='Close'></img>
+
+                  {walletNames[WalletType.BACKPACK]}
+                </Typography>
+              </Grid>
+              <Grid
+                item
+                className={classes.button}
+                onClick={async () => {
+                  handleConnectStaticWallet(WalletType.SOLFLARE)
+                }}>
+                <Typography className={classes.buttonName}>
+                  <img width={45} rel='preload' src={icons.SolflareWallet} alt='Close'></img>
+
+                  {walletNames[WalletType.SOLFLARE]}
+                </Typography>
+              </Grid>
+            </Grid>
+          </Grid>
+
+          <Divider className={classes.divider} />
+
+          <Grid className={classes.buttonWrapper}>
+            <Typography className={classes.subTitle}>
+              Or connect using Nightly's auto-detection
+            </Typography>
+            <Grid className={classes.buttonList}>
+              <Grid
+                item
+                className={classes.button}
+                onClick={() => {
+                  setIsOpenSelectWallet(false)
+                  setTimeout(async () => {
+                    if (isChangeWallet) {
+                      await (async () => onDisconnect())()
+                      await new Promise(resolve => setTimeout(resolve, 100))
+                    }
+                    changeToNightlyAdapter()
+                    await openWalletSelectorModal()
+                    handleConnect()
+                    setWallet(WalletType.NIGHTLY)
+                  }, 300)
+                }}>
+                <Typography className={classes.buttonName}>
+                  {' '}
+                  <img width={35} rel='preload' src={icons.NightlyConnect} alt='Close'></img>
+                  {walletNames[WalletType.NIGHTLY]}
+                </Typography>
+              </Grid>
+            </Grid>
+          </Grid>
+
+          <Divider className={classes.divider} />
+
+          <Grid className={classes.modalFooter}>
+            <Typography className={classes.footerTitle}>Don't have a wallet?</Typography>
+            <a href={' https://nightly.app/'} target='_blank'>
+              <Button className={classes.buttonPrimary} variant='contained'>
+                Download one!
+              </Button>
+            </a>
+          </Grid>
+        </Box>
+      </Popover>
+    </div>
+  )
+}
+
+export default SelectWalletModal