From 5c918539c4e91dd1a0ffe8d91908cf0fccd12b24 Mon Sep 17 00:00:00 2001
From: Chris Ling <81092286+chrisling-dev@users.noreply.github.com>
Date: Mon, 7 Oct 2024 16:49:13 +0800
Subject: [PATCH] fix: swap page infinite rerender (#1185)

---
 apps/portal/src/domains/common/recoils/api.ts | 14 +++++++++++---
 apps/portal/src/routes/layout.tsx             |  4 ++--
 apps/portal/src/routes/transport/index.tsx    |  3 +--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/portal/src/domains/common/recoils/api.ts b/apps/portal/src/domains/common/recoils/api.ts
index 26b909c65..48658c7c2 100644
--- 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
index 27694f2a7..dd6c49c0c 100644
--- 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
index 16b70b5ee..131996541 100644
--- 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