set LUX as initial network

Author: foxier25

src/components/NavBar/ChainSelector.tsx

@@ -11,7 +11,7 @@ import { TokenWarningRedIcon } from 'nft/components/icons'
 import { subhead } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useIsMobile } from 'nft/hooks'
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useRef, useState, useEffect } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { useTheme } from 'styled-components/macro'
 
@@ -20,20 +20,21 @@ import ChainSelectorRow from './ChainSelectorRow'
 import { NavDropdown } from './NavDropdown'
 
 const NETWORK_SELECTOR_CHAINS = [
+  SupportedChainId.LUX,
   SupportedChainId.MAINNET,
   SupportedChainId.POLYGON,
   SupportedChainId.OPTIMISM,
   SupportedChainId.ARBITRUM_ONE,
   SupportedChainId.CELO,
-  SupportedChainId.LUX,
 ]
 
 interface ChainSelectorProps {
   leftAlign?: boolean
 }
 
 export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
-  const { chainId } = useWeb3React()
+  const { account, chainId, connector } = useWeb3React() 
+
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const isMobile = useIsMobile()
 
@@ -49,6 +50,10 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
   useSyncChainQuery()
 
   const [pendingChainId, setPendingChainId] = useState<SupportedChainId | undefined>(undefined)
+  const [lastchainId, setlastchainId] = useState<SupportedChainId | undefined>(undefined)
+  const [lastAccount, setLastAccount] = useState<string | undefined>(undefined)
+  const [lastRequesting, setLastRequesting] = useState<boolean>(false)
+  const [netChangeRequesting, setNetChangeRequesting] = useState<boolean>(false)
 
   const onSelectChain = useCallback(
     async (targetChainId: SupportedChainId) => {
@@ -60,6 +65,23 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
     [selectChain, setIsOpen]
   )
 
+  useEffect(() => {
+      
+      if(chainId == 1 && !lastRequesting) {
+        setLastRequesting(true);
+        onSelectChain(SupportedChainId.LUX);
+      }
+      else if(lastchainId && lastchainId != chainId && !lastAccount && account && account != lastAccount) {    
+          if(!netChangeRequesting) {
+            setNetChangeRequesting(true);
+              onSelectChain(lastchainId).finally(() => {
+                setNetChangeRequesting(false);
+              })
+            }
+      }
+      setLastAccount(account);
+    }, [chainId, account, lastchainId]);
+    
   if (!chainId) {
     return null
   }
@@ -73,6 +95,7 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
           <ChainSelectorRow
             onSelectChain={onSelectChain}
             targetChain={chainId}
+            setLastchainId={setlastchainId}
             key={chainId}
             isPending={chainId === pendingChainId}
           />

src/components/NavBar/ChainSelectorRow.tsx

@@ -63,10 +63,12 @@ const Logo = styled.img`
 export default function ChainSelectorRow({
   targetChain,
   onSelectChain,
+  setLastchainId,
   isPending,
 }: {
   targetChain: SupportedChainId
   onSelectChain: (targetChain: number) => void
+  setLastchainId: React.Dispatch<React.SetStateAction<SupportedChainId | undefined>> 
   isPending: boolean
 }) {
   const { chainId } = useWeb3React()
@@ -76,7 +78,7 @@ export default function ChainSelectorRow({
   const theme = useTheme()
 
   return (
-    <Container onClick={() => onSelectChain(targetChain)} data-testid={`chain-selector-option-${label.toLowerCase()}`}>
+    <Container onClick={() => {setLastchainId(targetChain); onSelectChain(targetChain); }} data-testid={`chain-selector-option-${label.toLowerCase()}`}>
       <Logo src={logoUrl} alt={label} />
       <Label>{label}</Label>
       {isPending && <ApproveText>Approve in wallet</ApproveText>}

src/constants/chains.ts

@@ -2,6 +2,8 @@
  * List of all the networks supported by the LX Interface
  */
 export enum SupportedChainId {
+  LUX = 7777,
+
   MAINNET = 1,
   ROPSTEN = 3,
   RINKEBY = 4,
@@ -19,8 +21,6 @@ export enum SupportedChainId {
 
   CELO = 42220,
   CELO_ALFAJORES = 44787,
-
-  LUX = 7777,
 }
 
 export const CHAIN_IDS_TO_NAMES = {