fix: swap page infinite rerender (#1185)

TalismanSociety · Oct 7, 2024 · 5c91853 · 5c91853
1 parent 315fc70
commit 5c91853
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/apps/portal/src/domains/common/recoils/api.ts b/apps/portal/src/domains/common/recoils/api.ts
@@ -2,7 +2,7 @@ import { useSubstrateApiEndpoint } from '..'
 import { ApiPromise, WsProvider } from '@polkadot/api'
 import * as AvailJsSdk from 'avail-js-sdk'
 import { atom, useAtom } from 'jotai'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { selectorFamily, useRecoilCallback } from 'recoil'
 
 export const substrateApiState = selectorFamily<ApiPromise, string | undefined>({
@@ -27,9 +27,12 @@ export const substrateApiState = selectorFamily<ApiPromise, string | undefined>(
 
 export const useSubstrateApiState = () => substrateApiState(useSubstrateApiEndpoint())
 
-export const substrateApiGetterAtom = atom<{ getApi: (endpoint: string) => Promise<ApiPromise> } | null>(null)
+export const substrateApiGetterAtom = atom<{
+  getApi: (endpoint: string) => Promise<ApiPromise>
+} | null>(null)
 
 export const useSetJotaiSubstrateApiState = () => {
+  const initRef = useRef(false)
   const [substrateApiGetter, setSubstrateApiGetter] = useAtom(substrateApiGetterAtom)
 
   const getSubstrateApi = useRecoilCallback(
@@ -39,6 +42,11 @@ export const useSetJotaiSubstrateApiState = () => {
   )
 
   useEffect(() => {
-    if (substrateApiGetter === null) setSubstrateApiGetter({ getApi: getSubstrateApi })
+    if (substrateApiGetter === null && !initRef.current) {
+      // somehow this causes infinite rerender and substrateApiGetter is always null
+      setSubstrateApiGetter({ getApi: getSubstrateApi })
+      // this is a hack to prevent infinite rerender
+      initRef.current = true
+    }
   }, [getSubstrateApi, setSubstrateApiGetter, substrateApiGetter])
 }
diff --git a/apps/portal/src/routes/layout.tsx b/apps/portal/src/routes/layout.tsx
@@ -270,7 +270,7 @@ const Layout = () => {
           <Link to="/staking">
             <NavigationBar.Item label="Staking" icon={<Zap />} />
           </Link>
-          <Link to="/transport">
+          <Link to="/transport/swap">
             <NavigationBar.Item label="Swap" icon={<Repeat />} />
           </Link>
           <Link to="/crowdloans/participated">
@@ -295,7 +295,7 @@ const Layout = () => {
           <Link to="/staking">
             <NavigationRail.Item label="Staking" icon={<Zap />} />
           </Link>
-          <Link to="/transport">
+          <Link to="/transport/swap">
             <NavigationRail.Item label="Swap" icon={<Repeat />} />
           </Link>
           <Link to="/explore">

diff --git a/apps/portal/src/routes/transport/index.tsx b/apps/portal/src/routes/transport/index.tsx
@@ -1,14 +1,13 @@
 import Layout from './layout'
 import Swap from './swap'
 import Xcm from './xcm'
-import { Navigate, type RouteObject } from 'react-router-dom'
+import { type RouteObject } from 'react-router-dom'
 
 const routes = {
   element: <Layout />,
   children: [
     { path: 'swap', element: <Swap /> },
     { path: 'xcm', element: <Xcm /> },
-    { path: '', element: <Navigate to="swap" /> },
   ],
 } satisfies RouteObject