From 647df562cc4b2a9b3e3574c2de68bd0f04506c7a Mon Sep 17 00:00:00 2001
From: Miral Suthar <57826091+miralsuthar@users.noreply.github.com>
Date: Fri, 22 Oct 2021 19:01:54 +0530
Subject: [PATCH] add redirect button in swaplist

---
 .../react-app/src/components/SwapItem.jsx     |  5 +++--
 packages/react-app/src/views/SwapList.jsx     | 19 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/react-app/src/components/SwapItem.jsx b/packages/react-app/src/components/SwapItem.jsx
index dab0748..a7e5f1c 100644
--- a/packages/react-app/src/components/SwapItem.jsx
+++ b/packages/react-app/src/components/SwapItem.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useThemeSwitcher } from "react-css-theme-switcher";
-import { Typography } from "antd";
+import { Typography, Button } from "antd";
 import { NETWORK } from "../constants";
 
-export default function SwapItem({ hash, localProvider, chainId, ...props }) {
+export default function SwapItem({ onClick, hash, localProvider, chainId, ...props }) {
   const { currentTheme } = useThemeSwitcher();
   const [loading, updateLoading] = useState(true);
   const [txData, updateTxData] = useState({});
@@ -47,6 +47,7 @@ export default function SwapItem({ hash, localProvider, chainId, ...props }) {
               {hash}
             </a>
           </Typography.Text>
+          <Button onClick={onClick}>Commit Swap</Button>
         </div>
         {loading ? <div style={{ fontStyle: "italic", color: "#efefef" }}>Loading...</div> : <button></button>}
       </div>
diff --git a/packages/react-app/src/views/SwapList.jsx b/packages/react-app/src/views/SwapList.jsx
index 3d994b8..fea34d8 100644
--- a/packages/react-app/src/views/SwapList.jsx
+++ b/packages/react-app/src/views/SwapList.jsx
@@ -3,6 +3,8 @@ import { SyncOutlined, SettingOutlined, ArrowDownOutlined } from "@ant-design/ic
 import { utils, BigNumber } from "ethers";
 import { Button, Divider, Input, List, Row, Col, Tabs, Card, Form, Checkbox } from "antd";
 import { Address, Balance, SwapItem, AddressInput } from "../components";
+import { useParams, useHistory } from "react-router-dom";
+import { Router } from "@uniswap/sdk";
 
 export default function SwapList({
   purpose,
@@ -17,18 +19,25 @@ export default function SwapList({
   writeContracts,
   chainId,
 }) {
+  const history = useHistory();
+  const { id } = useParams();
   const [activeSwaps, setActiveSwaps] = useState([]);
+  const [swapIds, setSwapIds] = useState([]);
 
   const getActiveSwaps = async () => {
     let swaps = null;
     let temp = [];
+    let tempIds = [];
     if (readContracts?.MoonSwap) {
       swaps = await readContracts.MoonSwap.getActiveSwaps();
+
       swaps.forEach(swap => {
         temp.push(utils.keccak256(swap));
+        tempIds.push(swap.toNumber());
       });
       console.log("viewswap ", swaps, temp);
       setActiveSwaps(temp);
+      setSwapIds(tempIds);
     }
   };
 
@@ -50,7 +59,15 @@ export default function SwapList({
                     width: "80%",
                   }}
                 >
-                  <SwapItem hash={item} localProvider={localProvider} chainId={chainId} fontSize={14} />
+                  <SwapItem
+                    onClick={() => {
+                      history.push(`/swap/${swapIds[index]}`);
+                    }}
+                    hash={item}
+                    localProvider={localProvider}
+                    chainId={chainId}
+                    fontSize={14}
+                  />
                 </div>
               </List.Item>
             )}