Add index and resolve the swap list loading issue

packages/react-app/src/App.jsx

@@ -497,20 +497,24 @@ function App(props) {
 
         <Switch>
           <Route exact path="/">
-            <SwapList
-              address={address}
-              userSigner={userSigner}
-              mainnetProvider={mainnetProvider}
-              localProvider={localProvider}
-              yourLocalBalance={yourLocalBalance}
-              price={price}
-              tx={tx}
-              writeContracts={writeContracts}
-              readContracts={readContracts}
-              purpose={purpose}
-              setPurposeEvents={setPurposeEvents}
-              chainId={selectedChainId}
-            />
+            {readContracts.MoonSwap ? (
+              <SwapList
+                address={address}
+                userSigner={userSigner}
+                mainnetProvider={mainnetProvider}
+                localProvider={localProvider}
+                yourLocalBalance={yourLocalBalance}
+                price={price}
+                tx={tx}
+                writeContracts={writeContracts}
+                readContracts={readContracts}
+                purpose={purpose}
+                setPurposeEvents={setPurposeEvents}
+                chainId={selectedChainId}
+              />
+            ) : (
+              <h1>Loading...</h1>
+            )}
           </Route>
           <Route exact path="/swap">
             <TokenSwap

packages/react-app/src/components/SwapItem.jsx

@@ -3,7 +3,7 @@ import { useThemeSwitcher } from "react-css-theme-switcher";
 import { Typography, Button } from "antd";
 import { NETWORK } from "../constants";
 
-export default function SwapItem({ onClick, hash, localProvider, chainId, ...props }) {
+export default function SwapItem({ onClick, hash, index, localProvider, chainId, ...props }) {
   const { currentTheme } = useThemeSwitcher();
   const [loading, updateLoading] = useState(true);
   const [txData, updateTxData] = useState({});
@@ -36,7 +36,8 @@ export default function SwapItem({ onClick, hash, localProvider, chainId, ...pro
           fontSize: props.fontSize ? props.fontSize : 20,
         }}
       >
-        <div>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }}>
+          <Typography>{index}</Typography>
           <Typography.Text copyable={{ text: hash }}>
             <a
               style={{ color: currentTheme === "light" ? "#222222" : "#ddd" }}
@@ -49,7 +50,6 @@ export default function SwapItem({ onClick, hash, localProvider, chainId, ...pro
           </Typography.Text>
           <Button onClick={onClick}>Commit Swap</Button>
         </div>
-        {loading ? <div style={{ fontStyle: "italic", color: "#efefef" }}>Loading...</div> : <button></button>}
       </div>
     </div>
   );

packages/react-app/src/views/SwapList.jsx

@@ -20,7 +20,7 @@ export default function SwapList({
   chainId,
 }) {
   const history = useHistory();
-  const { id } = useParams();
+
   const [activeSwaps, setActiveSwaps] = useState([]);
   const [swapIds, setSwapIds] = useState([]);
 
@@ -41,6 +41,14 @@ export default function SwapList({
     }
   };
 
+  useEffect(() => {
+    console.log("active Swaps", activeSwaps);
+  }, []);
+
+  useEffect(() => {
+    console.log("readContract", readContracts);
+  }, []);
+
   useEffect(async () => {
     getActiveSwaps();
   }, [activeSwaps]);
@@ -57,9 +65,11 @@ export default function SwapList({
                 <div
                   style={{
                     width: "80%",
+                    margin: "auto",
                   }}
                 >
                   <SwapItem
+                    index={swapIds[index]}
                     onClick={() => {
                       history.push(`/swap/${swapIds[index]}`);
                     }}