network auto change bug fix (#306)

jediswaplabs · Jul 2, 2024 · 79845b5 · 79845b5
1 parent 33fac84
commit 79845b5
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -149,6 +149,7 @@
     "graphql": "^14.5.6",
     "graphql-tag": "^2.10.1",
     "react-apollo": "^3.1.5",
+    "react-query": "^3.39.3",
     "starknetkit": "^1.1.3",
     "vite-plugin-svgr": "^2.2.0",
     "wido-widget": "1.5.3"

diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx
@@ -127,7 +127,6 @@ export default function WalletModal({
   ENSName?: string
 }) {
   // important that these are destructed from the account-specific web3-react context
-  const { active, error } = useStarknetReact(NetworkContextName)
   const { connectors, connect } = useConnect()
   const { getAvailableWallets } = getStarknet()
 
@@ -187,13 +186,13 @@ export default function WalletModal({
   }, [walletModalOpen])
 
   // close modal when a connection is successful
-  const activePrevious = usePrevious(active)
+  // const activePrevious = usePrevious(active)
   const connectorPrevious = usePrevious(connector)
   useEffect(() => {
-    if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
+    if (walletModalOpen || (connector && connector !== connectorPrevious)) {
       setWalletView(WALLET_VIEWS.ACCOUNT)
     }
-  }, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
+  }, [setWalletView, connector, walletModalOpen, connectorPrevious])
 
   const tryActivation = async (option: Connector) => {
     if (!option) return
@@ -259,7 +258,7 @@ export default function WalletModal({
   }
 
   function getModalContent() {
-    if (error || chainError) {
+    if (chainError) {
       return (
         <UpperSection>
           <CloseIcon onClick={toggleWalletModal}>

diff --git a/src/components/Web3ReactManager/index.tsx b/src/components/Web3ReactManager/index.tsx
@@ -15,19 +15,3 @@ const MessageWrapper = styled.div`
 const Message = styled.h2`
   color: ${({ theme }) => theme.secondary1};
 `
-export default function Web3ReactManager({ children }: { children: JSX.Element }) {
-  const { t } = useTranslation()
-  const { active } = useStarknetReact(NetworkContextName)
-  const { error: networkError } = useStarknetReact(NetworkContextName)
-
-  // if the account context isn't active, and there's an error on the network context, it's an irrecoverable error
-  if (!active && networkError) {
-    return (
-      <MessageWrapper>
-        <Message>{t('unknownError')}</Message>
-      </MessageWrapper>
-    )
-  }
-
-  return children
-}
diff --git a/src/components/Web3Status/index.tsx b/src/components/Web3Status/index.tsx
@@ -192,7 +192,6 @@ function StatusIcon({ connector }: { connector: Connector }) {
 
 function Web3StatusInner({ starkID }: { starkID?: string }) {
   const { t } = useTranslation()
-  const { error } = useStarknetReact(NetworkContextName)
   const { address, connector } = useAccountDetails()
   // console.log('🚀 ~ file: index.tsx:198 ~ Web3StatusInner ~ provider:', provider.get)
 
@@ -225,13 +224,6 @@ function Web3StatusInner({ starkID }: { starkID?: string }) {
         )}
       </Web3StatusConnected>
     )
-  } else if (error) {
-    return (
-      <Web3StatusError onClick={toggleWalletModal}>
-        <NetworkIcon src={WrongNetwork} />
-        <Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
-      </Web3StatusError>
-    )
   } else {
     return (
       <Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal}>
@@ -243,7 +235,6 @@ function Web3StatusInner({ starkID }: { starkID?: string }) {
 
 export default function Web3Status() {
   const { address, chainId } = useAccountDetails()
-  const contextNetwork = useStarknetReact(NetworkContextName)
 
   type DomainToAddrData = { domain: string; domain_expiry: number }
 

diff --git a/src/context/StarknetProvider.tsx b/src/context/StarknetProvider.tsx
@@ -11,7 +11,7 @@ import rpcProvider from '../utils/getLibrary'
 import { isTestnetEnvironment } from '../connectors'
 
 export function StarknetProvider({ children }: { children: React.ReactNode }) {
-  const chains = [mainnet, goerli, sepolia]
+  const chains = [mainnet]
   const connectors = useMemo(
     () => [
       new InjectedConnector({

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,13 +1,37 @@
 import { useMemo } from 'react'
-import { useAccount } from '@starknet-react/core'
+import { AccountStatus, Connector, useAccount, useProvider } from '@starknet-react/core'
 import { ChainId } from '@jediswap/sdk'
-import {useChain} from "react-spring";
+import { useChain } from 'react-spring'
+import { AccountInterface } from 'starknet'
+import { useQuery } from 'react-query'
 
-export const useAccountDetails = () => {
-  const { account, address, connector, status } = useAccount()
-  const chainId = account?.chainId ?? account?.provider?.chainId;
+export const useAccountDetails = (): {
+  account: AccountInterface | undefined
+  address: string | undefined
+  isConnected: boolean | undefined
+  chainId: ChainId | undefined
+  connector: Connector | undefined
+  status: AccountStatus
+} => {
+  const { account, address, isConnected, status, connector } = useAccount()
 
-  return useMemo(() => {
-    return { address, connector, chainId, account, status }
-  }, [account, chainId])
+  const { provider } = useProvider()
+
+  const connectedChainId = useQuery({
+    queryKey: [`get_chainId/${address}`],
+    queryFn: async () => {
+      if (!address) return
+      const results: any = await provider.getChainId()
+      return results
+    }
+  })
+
+  console.log(connectedChainId.data, 'dfkdnkfn')
+
+  const chainId = useMemo(() => {
+    if (!connectedChainId || !connectedChainId.data) return undefined
+    return connectedChainId.data
+  }, [connectedChainId, address])
+
+  return { account, address, isConnected, chainId, connector, status }
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -27,8 +27,9 @@ import { isTestnetEnvironment } from './connectors'
 import { StarknetProvider } from './context/StarknetProvider'
 import { ApolloProvider } from 'react-apollo'
 import { jediSwapClient } from './apollo/client'
+import { QueryClient, QueryClientProvider } from 'react-query'
 
-const StarknetProviderNetwork = createStarknetReactRoot(NetworkContextName)
+const queryClient = new QueryClient()
 
 function Updaters() {
   return (
@@ -47,15 +48,17 @@ ReactDOM.render(
     <FixedGlobalStyle />
     <StarknetProvider>
       <Provider store={store}>
-        <ApolloProvider client={jediSwapClient}>
-          <Updaters />
-          <ThemeProvider>
-            <ThemedGlobalStyle />
-            <HashRouter>
-              <App />
-            </HashRouter>
-          </ThemeProvider>
-        </ApolloProvider>
+        <QueryClientProvider client={queryClient}>
+          <ApolloProvider client={jediSwapClient}>
+            <Updaters />
+            <ThemeProvider>
+              <ThemedGlobalStyle />
+              <HashRouter>
+                <App />
+              </HashRouter>
+            </ThemeProvider>
+          </ApolloProvider>
+        </QueryClientProvider>
       </Provider>
     </StarknetProvider>
   </StrictMode>,

diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -3,7 +3,6 @@ import { Route, Switch } from 'react-router-dom'
 import styled from 'styled-components'
 import Header from '../components/Header'
 import Popups from '../components/Popups'
-import Web3ReactManager from '../components/Web3ReactManager'
 import DarkModeQueryParamReader from '../theme/DarkModeQueryParamReader'
 
 import Swap from './Swap'
@@ -106,25 +105,23 @@ export default function App() {
           <Popups />
           <MainnetWarningModal />
 
-          <Web3ReactManager>
-            <Switch>
-              <Route exact strict path="/swap" component={Swap} />
-              <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
-              <Route exact strict path="/pool" component={Pool} />
-              <Route exact path="/add" component={RedirectToAddLiquidity} />
-              <Route exact path="/add/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
-              <Route exact path="/add/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
-              <Route exact path="/create" component={RedirectToAddLiquidity} />
-              <Route exact path="/create/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
-              <Route exact path="/create/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
-              <Route exact path="/zap" component={Zap} />
-              <Route exact path="/rewards" component={Rewards} />
-              {/* <Route exact path="/bridge" component={Bridge} /> */}
-              <Route exact path="/stake" component={ComingSoon} />
-              <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
-              <Route component={RedirectPathToSwapOnly} />
-            </Switch>
-          </Web3ReactManager>
+          <Switch>
+            <Route exact strict path="/swap" component={Swap} />
+            <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
+            <Route exact strict path="/pool" component={Pool} />
+            <Route exact path="/add" component={RedirectToAddLiquidity} />
+            <Route exact path="/add/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
+            <Route exact path="/add/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
+            <Route exact path="/create" component={RedirectToAddLiquidity} />
+            <Route exact path="/create/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
+            <Route exact path="/create/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
+            <Route exact path="/zap" component={Zap} />
+            <Route exact path="/rewards" component={Rewards} />
+            {/* <Route exact path="/bridge" component={Bridge} /> */}
+            <Route exact path="/stake" component={ComingSoon} />
+            <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
+            <Route component={RedirectPathToSwapOnly} />
+          </Switch>
           <Marginer />
         </BodyWrapper>
         <Footer />

diff --git a/src/utils/getLibrary.ts b/src/utils/getLibrary.ts
@@ -17,13 +17,8 @@ const provider = jsonRpcProvider({
     const chainType: string = networks[chain.name]
 
     let nodeUrl = 'https://rpc.starknet-testnet.lava.build/'
-    if (chainType === 'sepolia') {
-      nodeUrl = 'https://starknet-sepolia.public.blastapi.io'
-    } else if (chainType === 'mainnet') {
+    if (chainType === 'mainnet')
       nodeUrl = 'https://api-starknet-mainnet.dwellir.com/dd28e566-3260-4d8d-8180-6ef1a161e41c'
-    } else if (chainType === 'goerli') {
-      nodeUrl = 'https://rpc.starknet-testnet.lava.build/'
-    }
 
     return {
       nodeUrl,