hotfix: clear selected assets

- Clear selected assets when the user changes the network.
- Resolved #112

src/components/SwapPage.tsx

@@ -1,4 +1,12 @@
-import { FC, PropsWithChildren, ReactNode } from "react"
+import { NetworkInfo, useWallet } from "@terra-money/wallet-provider"
+import {
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  useLayoutEffect,
+  useRef,
+} from "react"
+import { useSearchParams } from "react-router-dom"
 import Container from "./Container"
 import styles from "./SwapPage.module.scss"
 
@@ -16,6 +24,34 @@ const Page: FC<PropsWithChildren<Props>> = ({
 }) => {
   const { sm } = props
 
+  const lastNetworkRef = useRef<NetworkInfo>()
+  const { network } = useWallet()
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  useLayoutEffect(() => {
+    const timerId = setTimeout(() => {
+      if (
+        network &&
+        lastNetworkRef.current &&
+        network?.name !== lastNetworkRef.current?.name &&
+        window.location.pathname.includes("/swap") &&
+        searchParams &&
+        setSearchParams
+      ) {
+        searchParams.set("from", "")
+        searchParams.set("to", "")
+        setSearchParams(searchParams, { replace: true })
+      }
+      lastNetworkRef.current = network
+    }, 10)
+
+    return () => {
+      clearTimeout(timerId)
+    }
+    // #112: Do not add searchParams, setSearchParams to deps for performance reasons.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [network])
+
   return (
     <article className={styles.article}>
       {sm ? <Container sm>{children}</Container> : children}

src/forms/SwapTokens.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect, useMemo, useRef, useState } from "react"
 import classNames from "classnames/bind"
 import SwapToken from "./SwapToken"
 import styles from "./SwapTokens.module.scss"
-import { lpTokenInfos } from "../rest/usePairs"
+import usePairs, { lpTokenInfos } from "../rest/usePairs"
 import { Type } from "../pages/Swap"
 import { tokenInfos } from "../rest/usePairs"
 import Loading from "components/Loading"
@@ -58,6 +58,7 @@ const SwapTokens = ({
   formatTokenName,
 }: Props) => {
   const listRef = useRef<HTMLUListElement>(null)
+  const { isLoading: isPairsLoading } = usePairs()
 
   /* search */
   const [searchKeyword, setSearchKeyword] = useState("")
@@ -146,7 +147,7 @@ const SwapTokens = ({
       </section>
 
       <ul ref={listRef} className={classNames(styles.list)}>
-        {assetElements ? (
+        {assetElements && !isPairsLoading ? (
           <>
             {assetElements?.length ? (
               <VariableSizeList
@@ -181,7 +182,7 @@ const SwapTokens = ({
               left: 0,
             }}
           >
-            <Loading />
+            <Loading color="#0222ba" />
           </div>
         )}
       </ul>

src/index.tsx

@@ -11,13 +11,13 @@ const container = document.getElementById("terraswap")
 const root = createRoot(container!)
 root.render(
   <StrictMode>
-    <WalletConnectProvider>
-      <Network>
-        <Router>
+    <Router>
+      <WalletConnectProvider>
+        <Network>
           <ScrollToTop />
           <App />
-        </Router>
-      </Network>
-    </WalletConnectProvider>
+        </Network>
+      </WalletConnectProvider>
+    </Router>
   </StrictMode>
 )

src/layouts/ConnectList.tsx

@@ -28,6 +28,11 @@ const ConnectList = () => {
   const connectModal = useConnectModal()
   const supportModal = useModal()
 
+  const handleConnectClick = (type: ConnectType, identifier?: string) => {
+    connect(type, identifier)
+    connectModal.close()
+  }
+
   const buttons: Button[] = [
     ...availableConnections
       .filter(({ type }) => type !== ConnectType.READONLY)
@@ -36,8 +41,7 @@ const ConnectList = () => {
         image: <img src={icon} {...size} alt={name} />,
         isInstalled: true,
         onClick: () => {
-          connect(type, identifier)
-          connectModal.close()
+          handleConnectClick(type, identifier)
         },
       })),
     ...availableInstallations

src/layouts/Connected.tsx

@@ -13,27 +13,17 @@ interface Props {
 
 const Connected = ({ className, icon }: Props) => {
   const ref = useRef(null)
-  // const [isOpen, setIsOpen] = useState(false);
-  // const close = () => setIsOpen(false);
-  // const toggle = () => setIsOpen((current) => !current);
-
   const { name } = useNetwork()
 
-  /* close wallet on click outside */
   const { disconnect } = useWallet()
   const address = useAddress()
-  // useOnClickOutside(ref, close);
-  // useEffect(() => {
-  //   close();
-  // }, [address]);
-
   const convertName = name[0].toUpperCase() + name.slice(1, name.length)
 
   return (
     <div className={styles.wrapper} ref={ref}>
       <button
         className={classNames(styles.connected, className)}
-        onClick={disconnect}
+        onClick={() => disconnect()}
       >
         {icon}
         <span className={styles.address}>

src/rest/usePairs.ts

@@ -120,6 +120,7 @@ const usePairs = () => {
       }
       setIsLoading(true)
       setCurrentNetworkName(networkName)
+      setResult({ pairs: [] })
 
       const fetchTokensInfo = async () => {
         try {