From 5842191a54d98cff4a28e9e1c017f01ddec6c90c Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Thu, 13 Oct 2022 20:14:42 +0530
Subject: [PATCH 01/13] feat: swapping tokens functionality [WIP]

Integrated the API calls for the Swap Token functionality
---
 cysync/src/constants/routes.ts                |   3 +
 .../src/designSystem/iconGroups/changelly.tsx |  19 ++
 .../iconGroups/checkmarkSuccess.tsx           |  13 +
 .../src/designSystem/iconGroups/download.tsx  |  22 ++
 cysync/src/designSystem/iconGroups/swap.tsx   |  14 +
 cysync/src/pages/mainApp/index.tsx            |   3 +
 cysync/src/pages/mainApp/sidebar/index.tsx    |  19 +-
 .../mainApp/sidebar/swap/HorizontalTabs.tsx   |  58 ++++
 .../src/pages/mainApp/sidebar/swap/index.tsx  |  62 ++++
 .../sidebar/swap/panels/HistoryPanel.tsx      | 212 +++++++++++++
 .../panels/dialogs/SwapCompletedDialog.tsx    | 122 ++++++++
 .../dialogs/VerifySwapDetailsDialog.tsx       | 264 ++++++++++++++++
 .../swap/panels/dialogs/exchangeProgress.tsx  | 136 +++++++++
 .../sidebar/swap/panels/dialogs/received.tsx  | 161 ++++++++++
 .../panels/dialogs/transactionDetails.tsx     |  99 ++++++
 .../panels/exchange/NetworkFeeDetails.tsx     | 172 +++++++++++
 .../swap/panels/exchange/SwapDetailsForm.tsx  | 252 ++++++++++++++++
 .../sidebar/swap/panels/exchange/index.tsx    | 284 ++++++++++++++++++
 cysync/src/store/hooks/index.ts               |   1 +
 cysync/src/store/hooks/useExchange.ts         |  58 ++++
 20 files changed, 1973 insertions(+), 1 deletion(-)
 create mode 100644 cysync/src/designSystem/iconGroups/changelly.tsx
 create mode 100644 cysync/src/designSystem/iconGroups/checkmarkSuccess.tsx
 create mode 100644 cysync/src/designSystem/iconGroups/download.tsx
 create mode 100644 cysync/src/designSystem/iconGroups/swap.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/index.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/HistoryPanel.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/SwapCompletedDialog.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/VerifySwapDetailsDialog.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/exchangeProgress.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/received.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/transactionDetails.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
 create mode 100644 cysync/src/store/hooks/useExchange.ts

diff --git a/cysync/src/constants/routes.ts b/cysync/src/constants/routes.ts
index ead25673..bd09d0d6 100644
--- a/cysync/src/constants/routes.ts
+++ b/cysync/src/constants/routes.ts
@@ -26,6 +26,9 @@ const routes = {
   },
   tutorial: {
     index: '/tutorial'
+  },
+  swap: {
+    index: '/swap'
   }
 };
 
diff --git a/cysync/src/designSystem/iconGroups/changelly.tsx b/cysync/src/designSystem/iconGroups/changelly.tsx
new file mode 100644
index 00000000..1a665c4d
--- /dev/null
+++ b/cysync/src/designSystem/iconGroups/changelly.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const Changelly = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={28}
+    height={25}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12.907 21.018a4.69 4.69 0 0 1-.65.536c-.451.339-.92.625-1.426.893-.993.5-2.04.875-3.14 1.089-.272.053-.542.107-.813.143l-.415.053-.199.018-.199.018-.415.036-.415.018c-.27.017-.56.017-.83.035-.813 0-1.625-.035-2.437-.107.09-.125.18-.268.27-.41a14 14 0 0 0 .704-1.25c.398-.858.704-1.75.957-2.643.235-.875.524-1.715.849-2.572a20.6 20.6 0 0 1 1.137-2.482c-.307.34-.578.714-.83 1.107-.253.375-.506.786-.723 1.179-.45.803-.848 1.66-1.155 2.518-.325.839-.668 1.678-1.083 2.446-.415.768-.92 1.482-1.498 2.16L0 24.519l.939.125c1.155.16 2.328.25 3.502.214.289-.018.596-.018.884-.053l.434-.036.433-.054c.289-.035.577-.107.866-.142.29-.072.578-.125.867-.215.289-.071.56-.178.848-.268.271-.107.56-.214.83-.339a10.065 10.065 0 0 0 1.553-.857 8.056 8.056 0 0 0 1.354-1.125c.397-.429.758-.875 1.01-1.393-.198.25-.396.464-.613.643Zm6.463-15.41c.325-.322.758-.5 1.227-.5.452 0 .885.16 1.228.5.668.678.668 1.75 0 2.428-.668.66-1.77.66-2.455 0a1.692 1.692 0 0 1-.506-1.215c0-.464.18-.892.506-1.214Zm1.227 3.963c.722 0 1.426-.267 1.968-.803a2.76 2.76 0 0 0 0-3.91 2.81 2.81 0 0 0-3.935 0 2.727 2.727 0 0 0-.813 1.946c0 .732.29 1.428.813 1.946a2.731 2.731 0 0 0 1.967.821Zm.813 3.965c-3.99 3.482-5.65 3.803-7.311 3.053l1.805-2.25c.27-.321.451-.714.56-1.125l.722-3.018-3.033.715a2.934 2.934 0 0 0-1.138.553l-2.274 1.786c-.776-1.643-.433-3.286 3.069-7.232 3.321-3.732 10.325-4.59 12.402-4.768-.163 2.054-1.03 9-4.802 12.286Zm-2.654 5.393a.646.646 0 0 1-.27.41c-.416.286-1.066.679-1.643 1.036l.036-.107c.27-1.09.27-1.929 0-2.5.758-.232 1.57-.643 2.49-1.268-.234.84-.487 1.84-.613 2.429Zm-6.3-1.947a1.187 1.187 0 0 1-.993.447h-.921l3.141-3.75-3.79 3.107v-.911c-.019-.375.144-.75.45-.982l3.322-2.607c.217-.161.47-.286.722-.357l1.354-.322-.325 1.34c-.072.267-.18.517-.36.732l-2.6 3.303ZM7.04 10.518l-.108.036a30.54 30.54 0 0 1 1.029-1.625.654.654 0 0 1 .415-.268 75.867 75.867 0 0 0 2.455-.59c-.632.911-1.047 1.733-1.281 2.483-.56-.322-1.409-.322-2.51-.036ZM26.771.16c-.379.018-9.55.428-13.756 5.16-.397.447-.776.911-1.155 1.375-.614.161-2.744.733-3.682.929-.434.09-.83.34-1.084.714-.65.929-1.769 2.84-1.805 2.911l-.812 1.375 1.48-.643c.975-.41 2.6-.84 3.177-.5.09.054.199.16.217.429.018.678.199 1.339.541 2l-.198.16a2.216 2.216 0 0 0-.849 1.84v2.553h2.582a2.26 2.26 0 0 0 1.86-.839l.162-.196c.668.339 1.336.535 2.022.535.27.018.36.108.433.215.36.571-.072 2.196-.506 3.16l-.65 1.465 1.39-.804c.09-.053 2.004-1.16 2.943-1.803.361-.25.614-.625.704-1.072.199-.928.776-3.053.939-3.66.433-.34.884-.733 1.372-1.161 4.765-4.161 5.199-13.25 5.217-13.625l.018-.572-.56.054Z"
+      fill="#10D078"
+    />
+  </svg>
+);
+
+export default Changelly;
diff --git a/cysync/src/designSystem/iconGroups/checkmarkSuccess.tsx b/cysync/src/designSystem/iconGroups/checkmarkSuccess.tsx
new file mode 100644
index 00000000..f7698e5d
--- /dev/null
+++ b/cysync/src/designSystem/iconGroups/checkmarkSuccess.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+const checkmarkSuccess = () => (
+  <g>
+    <rect width={20} height={20} rx={10} fill="#2D3236" />
+    <path
+      d="M13.56 6.32a.65.65 0 0 0-.9.192l-3.646 5.62-1.778-1.644a.651.651 0 0 0-.884.956l2.335 2.158s.067.058.098.078a.649.649 0 0 0 .9-.192l4.067-6.268a.65.65 0 0 0-.192-.9Z"
+      fill="#65D023"
+    />
+  </g>
+);
+
+export default checkmarkSuccess;
diff --git a/cysync/src/designSystem/iconGroups/download.tsx b/cysync/src/designSystem/iconGroups/download.tsx
new file mode 100644
index 00000000..faf8f6a6
--- /dev/null
+++ b/cysync/src/designSystem/iconGroups/download.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const Download = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={18}
+    height={17}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M2.4 10.82a5.6 5.6 0 1 1 9.368-5.52H13.2a3.6 3.6 0 0 1 2 6.594M8.8 8.5v7.2m-3.2-3.2 3.2 3.2 3.2-3.2"
+      stroke="#C78D4E"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Download;
diff --git a/cysync/src/designSystem/iconGroups/swap.tsx b/cysync/src/designSystem/iconGroups/swap.tsx
new file mode 100644
index 00000000..22f0a492
--- /dev/null
+++ b/cysync/src/designSystem/iconGroups/swap.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const swap = (props: { color: string }) => {
+  return (
+    <g>
+      <path
+        d="M12.032 1.59998V8.09998C12.032 8.36519 11.9266 8.61955 11.7391 8.80708C11.5516 8.99462 11.2972 9.09998 11.032 9.09998H5.03198V10.1C5.03229 10.1987 5.00337 10.2953 4.94887 10.3776C4.89438 10.4599 4.81673 10.5242 4.72573 10.5625C4.66406 10.587 4.59834 10.5997 4.53198 10.6C4.39921 10.5994 4.27171 10.548 4.17573 10.4562L2.67573 8.95623C2.58184 8.86143 2.52917 8.7334 2.52917 8.59998C2.52917 8.46655 2.58184 8.33852 2.67573 8.24373L4.17573 6.74373C4.24803 6.6759 4.33805 6.62992 4.43538 6.61112C4.53271 6.59231 4.63338 6.60145 4.72573 6.63748C4.81673 6.67573 4.89438 6.74006 4.94887 6.82236C5.00337 6.90467 5.03229 7.00126 5.03198 7.09998V8.09998H11.032V1.59998H4.03198V2.09998C4.03198 2.23258 3.9793 2.35976 3.88554 2.45353C3.79177 2.5473 3.66459 2.59998 3.53198 2.59998C3.39937 2.59998 3.2722 2.5473 3.17843 2.45353C3.08466 2.35976 3.03198 2.23258 3.03198 2.09998V1.59998C3.03198 1.33476 3.13734 1.08041 3.32488 0.892869C3.51241 0.705332 3.76677 0.599976 4.03198 0.599976H11.032C11.2972 0.599976 11.5516 0.705332 11.7391 0.892869C11.9266 1.08041 12.032 1.33476 12.032 1.59998ZM8.53198 10.6C8.39937 10.6 8.2722 10.6527 8.17843 10.7464C8.08466 10.8402 8.03198 10.9674 8.03198 11.1V11.6H1.03198V5.09998H7.03198V6.09998C7.03248 6.19851 7.06173 6.29475 7.11613 6.3769C7.17052 6.45906 7.24771 6.52355 7.33823 6.56248C7.39991 6.58697 7.46562 6.59969 7.53198 6.59998C7.66475 6.59941 7.79225 6.54797 7.88823 6.45623L9.38823 4.95623C9.48212 4.86143 9.53479 4.7334 9.53479 4.59998C9.53479 4.46655 9.48212 4.33852 9.38823 4.24373L7.88823 2.74373C7.81676 2.67455 7.72669 2.62767 7.62903 2.60881C7.53137 2.58994 7.43033 2.5999 7.33823 2.63748C7.24723 2.67573 7.16959 2.74006 7.11509 2.82236C7.06059 2.90467 7.03167 3.00126 7.03198 3.09998V4.09998H1.03198C0.766766 4.09998 0.512412 4.20533 0.324876 4.39287C0.137339 4.58041 0.0319824 4.83476 0.0319824 5.09998V11.6C0.0319824 11.8652 0.137339 12.1195 0.324876 12.3071C0.512412 12.4946 0.766766 12.6 1.03198 12.6H8.03198C8.2972 12.6 8.55155 12.4946 8.73909 12.3071C8.92663 12.1195 9.03198 11.8652 9.03198 11.6V11.1C9.03198 10.9674 8.9793 10.8402 8.88554 10.7464C8.79177 10.6527 8.66459 10.6 8.53198 10.6Z"
+        fill={props.color}
+      />
+    </g>
+  );
+};
+
+export default swap;
diff --git a/cysync/src/pages/mainApp/index.tsx b/cysync/src/pages/mainApp/index.tsx
index f843238e..aa096baf 100644
--- a/cysync/src/pages/mainApp/index.tsx
+++ b/cysync/src/pages/mainApp/index.tsx
@@ -13,6 +13,7 @@ import Navbar from './navbar';
 import Sidebar from './sidebar';
 import Portfolio from './sidebar/portfolio';
 import Settings from './sidebar/settings';
+import Swap from './sidebar/swap';
 import Transaction from './sidebar/transaction';
 import Tutorial from './sidebar/tutorial';
 import Wallet from './sidebar/wallet';
@@ -127,6 +128,8 @@ const MainApp: React.FC = () => {
                     element={<Wallet />}
                   />
 
+                  <Route path={RouteLinks.swap.index} element={<Swap />} />
+
                   <Route
                     path={RouteLinks.transactions.index}
                     element={<Transaction />}
diff --git a/cysync/src/pages/mainApp/sidebar/index.tsx b/cysync/src/pages/mainApp/sidebar/index.tsx
index 86616588..9987b3ef 100644
--- a/cysync/src/pages/mainApp/sidebar/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/index.tsx
@@ -25,6 +25,7 @@ import colors from '../../../designSystem/designConstants/colors';
 import LastTransaction from '../../../designSystem/iconGroups/lastTransaction';
 import Portfolio from '../../../designSystem/iconGroups/portfolio';
 import Settings from '../../../designSystem/iconGroups/settings';
+import Swap from '../../../designSystem/iconGroups/swap';
 import Tutorial from '../../../designSystem/iconGroups/tutorial';
 import Wallet from '../../../designSystem/iconGroups/wallet';
 import { useFeedback, useWallets } from '../../../store/provider';
@@ -184,6 +185,10 @@ const TabValues = [
     tab: 2,
     route: Routes.wallet.index
   },
+  {
+    tab: 10, // this is a dummy value for the Swap tab
+    route: Routes.swap.index //TODO: Update the route
+  },
   {
     tab: 5,
     route: Routes.transactions.index
@@ -259,7 +264,6 @@ const Sidebar = () => {
   const handleChange = (_event: React.ChangeEvent | undefined, val: number) => {
     setValue(val);
     const tab = TabValues.find(elem => elem.tab === val);
-
     if (tab) {
       // If wallet tab is selected, route to the first wallet
       if (tab.tab === 2 && walletData && walletData.length > 0) {
@@ -376,6 +380,19 @@ const Sidebar = () => {
             </div>
           </CustomCollapse>
           <CustomDivider value={4} className={classes.divider} />
+          <Tab
+            label="Swap"
+            wrapped={true}
+            value={10} //TODO: Update with the true value
+            icon={
+              <Icon
+                size={21}
+                viewBox="0 0 24 21"
+                iconGroup={<Swap color="white" />} //TODO: Update the icon
+              />
+            }
+          />
+          <CustomDivider value={4} className={classes.divider} />
           <Tab
             label="Transactions"
             wrapped={true}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
new file mode 100644
index 00000000..6f4c123e
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
@@ -0,0 +1,58 @@
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import * as React from 'react';
+
+import ExchangePanel from './panels/exchange';
+import HistoryPanel from './panels/HistoryPanel';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+export default function HorizontalTabs() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box>
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          textColor="secondary"
+          indicatorColor="secondary"
+          aria-label="basic tabs example"
+        >
+          <Tab label="Exchange" />
+          <Tab label="History" />
+        </Tabs>
+      </Box>
+      <TabPanel value={value} index={0}>
+        <ExchangePanel />
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        <HistoryPanel />
+      </TabPanel>
+    </Box>
+  );
+}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/index.tsx
new file mode 100644
index 00000000..23b95dfc
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/index.tsx
@@ -0,0 +1,62 @@
+import Grid from '@mui/material/Grid';
+import { styled, useTheme } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+// import VerifyDialog from './dialogs/verifyDialog';
+// import PendingOperation from './dialogs/pendingOperation';
+// import Received from './dialogs/received';
+// import ExchangeProgress from './dialogs/exchangeProgress';
+// import TransactionDetails from './dialogs/transactionDetails';
+import HorizontalTabs from './HorizontalTabs';
+
+const PREFIX = 'Swap';
+
+const classes = {
+  root: `${PREFIX}-root`,
+  tab: `${PREFIX}-tab`,
+  loaderContainer: `${PREFIX}-loaderContainer`
+};
+
+const Root = styled(Grid)(({ theme }) => ({
+  [`& .${classes.root}`]: {
+    flexGrow: 1,
+    background: theme.palette.primary.main,
+    borderBottom: `1px solid ${theme.palette.primary.light}`
+  },
+  [`& .${classes.tab}`]: {
+    color: theme.palette.text.primary,
+    textTransform: 'none'
+  },
+  [`& .${classes.loaderContainer}`]: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: '4rem'
+  }
+}));
+
+const Swap = () => {
+  const theme = useTheme();
+  return (
+    <Root container>
+      <Grid item xs={12}>
+        <Typography
+          variant="h2"
+          style={{ color: theme.palette.secondary.dark }}
+          gutterBottom
+        >
+          Swap
+        </Typography>
+      </Grid>
+      <HorizontalTabs />
+      {/* <VerifyDialog /> */}
+      {/* <PendingOperation /> */}
+      {/* <Received /> */}
+      {/* <ExchangeProgress /> */}
+      {/* <TransactionDetails /> */}
+    </Root>
+  );
+};
+
+export default Swap;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/HistoryPanel.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/HistoryPanel.tsx
new file mode 100644
index 00000000..90841518
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/HistoryPanel.tsx
@@ -0,0 +1,212 @@
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { Grid, Typography } from '@mui/material';
+import React from 'react';
+
+import Icon from '../../../../../designSystem/designComponents/icons/Icon';
+import colors from '../../../../../designSystem/designConstants/colors';
+import Btc from '../../../../../designSystem/iconGroups/btc';
+import Download from '../../../../../designSystem/iconGroups/download';
+import Eth from '../../../../../designSystem/iconGroups/eth';
+import Swap from '../../../../../designSystem/iconGroups/swap';
+
+export default function HistoryPanel() {
+  type HistoryItem = {
+    date: string;
+    from: {
+      wallet: string;
+      icon: JSX.Element;
+    };
+    to: {
+      wallet: string;
+      icon: JSX.Element;
+    };
+    amount: number;
+    fees: number;
+    time: string;
+    service: string;
+  };
+
+  const history: HistoryItem[] = [
+    {
+      date: '15/11/2022 - Today',
+      from: {
+        wallet: 'Ethereum 1',
+        icon: <Eth />
+      },
+      to: {
+        wallet: 'Bitcoin 1',
+        icon: <Btc />
+      },
+      amount: 0.0001,
+      fees: 0.0001,
+      time: '12:00',
+      service: 'Changelly'
+    },
+    {
+      date: '15/11/2022 - Today',
+      from: {
+        wallet: 'Ethereum 1',
+        icon: <Eth />
+      },
+      to: {
+        wallet: 'Bitcoin 1',
+        icon: <Btc />
+      },
+      amount: 0.0001,
+      fees: 0.0001,
+      time: '12:00',
+      service: 'Changelly'
+    }
+  ];
+
+  return (
+    <Grid container xs={12}>
+      <Grid item xs={12}>
+        <Typography
+          variant="body1"
+          sx={{ color: 'secondary.dark' }}
+          textAlign={'right'}
+        >
+          <Download />
+          &nbsp; Export operations
+        </Typography>
+      </Grid>
+      <Grid
+        item
+        xs={12}
+        sx={{
+          marginTop: '13px',
+          padding: '12px 0px 12px 12px',
+          alignItems: 'center',
+          background: '#1C1F22',
+          display: 'flex'
+        }}
+      >
+        <Icon
+          size={20}
+          viewBox="0 0 30 30"
+          iconGroup={<InfoOutlinedIcon color="secondary" />}
+        />
+        <Typography variant="body1" sx={{ color: 'secondary.dark' }}>
+          Your swap desktop transactions are not synchronized with the Ledger
+          Live mobile application
+        </Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <Grid container marginTop={'40px'}>
+          {history.map((item, index) => (
+            <Grid item xs={12} key={index} marginTop={'20px'}>
+              <Typography variant="body1" color="textSecondary">
+                {item.date}
+              </Typography>
+              <Grid item xs={12} marginTop={'20px'}>
+                <Grid
+                  container
+                  display={'flex'}
+                  justifyContent="space-around"
+                  sx={{
+                    border: '0.5px solid #433F3B',
+                    borderRadius: '10px',
+                    padding: '9px 17px 8px'
+                  }}
+                >
+                  <Grid
+                    item
+                    xs={3}
+                    display="flex"
+                    alignContent={'center'}
+                    alignItems={'center'}
+                  >
+                    <Icon
+                      size={20}
+                      viewBox="0 0 16 15"
+                      iconGroup={<Swap color={colors.text.secondary} />}
+                    />
+                    <Grid item>
+                      <Typography variant="body1" color="textPrimary">
+                        {item.service}
+                      </Typography>
+                      <Typography variant="body2" color="textSecondary">
+                        {item.time}
+                      </Typography>
+                    </Grid>
+                  </Grid>
+                  <Grid
+                    item
+                    xs={6}
+                    display="flex"
+                    alignContent={'center'}
+                    alignItems={'center'}
+                  >
+                    <Grid
+                      container
+                      display={'flex'}
+                      justifyContent={'space-around'}
+                    >
+                      <Grid
+                        item
+                        display={'flex'}
+                        alignContent={'center'}
+                        alignItems={'center'}
+                      >
+                        <Icon
+                          size={35}
+                          viewBox="0 0 30 30"
+                          iconGroup={item.from.icon}
+                        />
+                        <Typography variant="body1" color="textPrimary">
+                          {item.from.wallet}
+                        </Typography>
+                      </Grid>
+                      <Grid
+                        item
+                        display={'flex'}
+                        alignContent={'center'}
+                        alignItems={'center'}
+                        marginLeft={'5px'}
+                      >
+                        <ArrowForwardIcon sx={{ color: 'text.secondary' }} />
+                      </Grid>
+                      <Grid
+                        item
+                        display={'flex'}
+                        alignContent={'center'}
+                        alignItems={'center'}
+                      >
+                        <Icon
+                          size={35}
+                          viewBox="0 0 30 30"
+                          iconGroup={item.to.icon}
+                        />
+                        <Typography variant="body1" color="textPrimary">
+                          {item.to.wallet}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                  <Grid item xs={3}>
+                    <Grid
+                      container
+                      display={'flex'}
+                      justifyContent={'flex-end'}
+                    >
+                      <Grid item textAlign={'right'}>
+                        <Typography variant="body1" sx={{ color: '#16953A' }}>
+                          +{item.amount}
+                        </Typography>
+                        <Typography variant="body2" color="textSecondary">
+                          -{item.fees} ETH
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Grid>
+            </Grid>
+          ))}
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/SwapCompletedDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/SwapCompletedDialog.tsx
new file mode 100644
index 00000000..e4a2a72f
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/SwapCompletedDialog.tsx
@@ -0,0 +1,122 @@
+import SecurityTwoToneIcon from '@mui/icons-material/SecurityTwoTone';
+import { Grid, Link, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import { shell } from 'electron';
+import React from 'react';
+
+import CustomDialog from '../../../../../../designSystem/designComponents/dialog/dialogBox';
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import CheckmarkSuccess from '../../../../../../designSystem/iconGroups/checkmarkSuccess';
+
+const CHANGELLY_TRACKING_URL = 'https://changelly.com/track/';
+
+type SwapCompletedDialogProps = {
+  open: boolean;
+  onClose: () => void;
+  toTokenName: string;
+  transactionId: string;
+};
+
+const getSwapCompletedDialogContent = (
+  toTokenName: string,
+  transactionId: string
+) => {
+  const openChangellyTracking = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    shell.openExternal(`${CHANGELLY_TRACKING_URL}/${transactionId}`);
+  };
+
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      padding={'70px 70px 50px 70px'}
+    >
+      <Box width={'460px'}>
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignContent="center"
+          alignItems="center"
+          sx={{ background: '#1C1F22', padding: '12px' }}
+        >
+          <Icon
+            size={50}
+            viewBox="0 0 30 30"
+            iconGroup={<CheckmarkSuccess />}
+          />
+          <Typography variant="h4" sx={{ color: 'secondary.dark' }}>
+            Pending Operation
+          </Typography>
+          <Typography variant="body2" color="textSecondary" marginTop={'10px'}>
+            Your Swap operation has been sent to the network for confirmation.
+            It may take up to an hour before you receive your {toTokenName}.
+          </Typography>
+        </Box>
+        <Grid container marginTop="50px">
+          <Grid
+            item
+            xs={8}
+            display="flex"
+            alignItems="center"
+            alignContent="center"
+            justifyContent={'space-between'}
+          >
+            <Icon
+              size={80}
+              viewBox="0 0 30 30"
+              iconGroup={<SecurityTwoToneIcon />}
+            />
+            <Typography variant="body2" color="textPrimary">
+              Take note of your Swap ID number in case you'd need assistance
+              from
+              <Link
+                href="#"
+                onClick={openChangellyTracking}
+                color="secondary"
+                underline="hover"
+                padding={1}
+              >
+                Track your transaction.
+              </Link>
+            </Typography>
+          </Grid>
+          <Grid item xs={4} display="flex" justifyContent={'flex-end'}>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography
+                variant="body1"
+                color="textPrimary"
+                sx={{
+                  background: '#2D3236',
+                  borderRadius: '27px',
+                  padding: '4px 8px'
+                }}
+              >
+                {transactionId}
+              </Typography>
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+    </Box>
+  );
+};
+
+const SwapCompletedDialog: React.FC<SwapCompletedDialogProps> = ({
+  open,
+  onClose,
+  toTokenName,
+  transactionId
+}) => {
+  return (
+    <CustomDialog
+      open={open}
+      handleClose={onClose}
+      isClosePresent={true}
+      disableEscapeKeyDown
+      restComponents={getSwapCompletedDialogContent(toTokenName, transactionId)}
+    />
+  );
+};
+
+export default SwapCompletedDialog;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/VerifySwapDetailsDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/VerifySwapDetailsDialog.tsx
new file mode 100644
index 00000000..9156de54
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/VerifySwapDetailsDialog.tsx
@@ -0,0 +1,264 @@
+import { InfoOutlined, OpenInNew } from '@mui/icons-material';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import LoadingIcon from '@mui/icons-material/Loop';
+import { Grid, Link, Typography } from '@mui/material';
+import { Box, keyframes } from '@mui/system';
+import React, { useEffect, useState } from 'react';
+
+import CustomDialog from '../../../../../../designSystem/designComponents/dialog/dialogBox';
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcons';
+import Changelly from '../../../../../../designSystem/iconGroups/changelly';
+
+const rotateKeyframe = keyframes`
+  0% {
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    transform: rotateZ(-360deg);
+  }
+`;
+
+enum VerificationStatus {
+  Pending,
+  PinEntered,
+  ReceivingAddressVerified,
+  SendingAddressVerified
+}
+
+type VerifySwapDetailsDialogProps = {
+  open: boolean;
+  onClose: () => void;
+  amountToSend: string;
+  amountToReceive: string;
+  networkFees: string;
+  sourceCoinSlug: string;
+  sourceCoinName: string;
+  targetCoinSlug: string;
+  targetCoinName: string;
+  cardTapped: boolean;
+  receiveAddressVerified: boolean;
+};
+
+const VerifySwapDetailsDialog: React.FC<VerifySwapDetailsDialogProps> = ({
+  open,
+  onClose,
+  amountToSend,
+  amountToReceive,
+  networkFees,
+  sourceCoinSlug,
+  sourceCoinName,
+  targetCoinSlug,
+  targetCoinName,
+  cardTapped,
+  receiveAddressVerified
+}) => {
+  const [status, setStatus] = useState<VerificationStatus>(
+    VerificationStatus.Pending
+  );
+
+  useEffect(() => {
+    if (cardTapped) {
+      setStatus(VerificationStatus.PinEntered);
+    }
+  }, [cardTapped]);
+
+  useEffect(() => {
+    if (receiveAddressVerified) {
+      setStatus(VerificationStatus.ReceivingAddressVerified);
+    }
+  }, [receiveAddressVerified]);
+
+  const getStatusIcon = (currentStage: VerificationStatus) => {
+    return currentStage <= status ? (
+      <CheckCircleOutlineIcon color="success" />
+    ) : (
+      <LoadingIcon
+        sx={{
+          animation: `${rotateKeyframe} 1500ms linear infinite`
+        }}
+      />
+    );
+  };
+
+  const getVerifySwapDetailsDialogContent = () => {
+    return (
+      <Box
+        display="flex"
+        justifyContent={'center'}
+        padding={'70px 70px 50px 70px'}
+      >
+        <Box width={'460px'}>
+          <Box display="flex" sx={{ background: '#1C1F22', padding: '12px' }}>
+            <Icon
+              size={70}
+              viewBox="0 0 30 30"
+              iconGroup={<InfoOutlined />}
+              color="textPrimary"
+            />
+            <Typography variant="body1">
+              Verify the Swap details on your device before sending it. The
+              addresses are exchanged securely so you don't have to verify them.
+              <Link href="#" color="secondary" underline="hover" padding={1}>
+                Learn more <OpenInNew fontSize="inherit" />
+              </Link>
+            </Typography>
+          </Box>
+          <Grid container xs={12}>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Amount to send
+              </Typography>
+              <Typography variant="body1" color="textPrimary">
+                {amountToSend} {sourceCoinSlug}
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Amount to receive
+              </Typography>
+              <Typography variant="body1" color="textPrimary">
+                {amountToReceive} {sourceCoinSlug}
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Provider
+              </Typography>
+              <Typography
+                variant="body1"
+                color="textPrimary"
+                display={'flex'}
+                alignItems={'center'}
+                gap={1}
+              >
+                <Changelly />
+                Changelly
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Network Fees
+              </Typography>
+              <Typography variant="body1" color="textPrimary">
+                {networkFees} {sourceCoinSlug}
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Source account
+              </Typography>
+              <Typography
+                variant="body1"
+                color="textPrimary"
+                display={'flex'}
+                alignItems={'center'}
+                gap={1}
+              >
+                <CoinIcons initial={sourceCoinSlug} size="sm" />
+                {sourceCoinName}
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Target account
+              </Typography>
+              <Typography
+                variant="body1"
+                color="textPrimary"
+                display={'flex'}
+                alignItems={'center'}
+                gap={1}
+              >
+                <CoinIcons initial={targetCoinSlug} size="sm" />
+                {targetCoinName}
+              </Typography>
+            </Grid>
+          </Grid>
+          <Typography
+            variant="body1"
+            color="textPrimary"
+            marginTop="20px"
+            display={'flex'}
+            alignItems={'center'}
+            gap={1}
+          >
+            {getStatusIcon(VerificationStatus.PinEntered)}
+            Pin entered and tapped a card
+          </Typography>
+          <Typography
+            variant="body1"
+            color="textPrimary"
+            marginTop="20px"
+            display={'flex'}
+            alignItems={'center'}
+            gap={1}
+          >
+            {getStatusIcon(VerificationStatus.ReceivingAddressVerified)}
+            Receiving address checked
+          </Typography>
+          <Typography
+            variant="body1"
+            color="textPrimary"
+            marginTop="20px"
+            display={'flex'}
+            alignItems={'center'}
+            gap={1}
+          >
+            {getStatusIcon(VerificationStatus.SendingAddressVerified)}
+            Checking sending address
+          </Typography>
+        </Box>
+      </Box>
+    );
+  };
+
+  return (
+    <CustomDialog
+      open={open}
+      handleClose={onClose}
+      isClosePresent={true}
+      disableEscapeKeyDown
+      restComponents={getVerifySwapDetailsDialogContent()}
+    />
+  );
+};
+
+export default VerifySwapDetailsDialog;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/exchangeProgress.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/exchangeProgress.tsx
new file mode 100644
index 00000000..93f19fee
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/exchangeProgress.tsx
@@ -0,0 +1,136 @@
+// import { CallReceived, ContentCopy } from '@mui/icons-material';
+import DownloadIcon from '@mui/icons-material/Download';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import LoadingIcon from '@mui/icons-material/Loop';
+import { Grid, Link, Typography } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import LinearProgress from '@mui/material/LinearProgress';
+import withStyles from '@mui/styles/withStyles';
+import { Box } from '@mui/system';
+import React from 'react';
+
+import CustomDialog from '../../../../../../designSystem/designComponents/dialog/dialogBox';
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+
+const CustomLinearProgress = withStyles(() => ({
+  root: {
+    height: 8,
+    borderRadius: 5
+  }
+}))(LinearProgress);
+
+const exchangeProgressContent = () => {
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      margin={'70px 70px 50px 70px'}
+    >
+      <Grid container width={'570px'} spacing={'20px'}>
+        <Grid item xs={12}>
+          <Typography variant="h5" sx={{ color: 'secondary.dark' }}>
+            Exchange
+          </Typography>
+          <CustomLinearProgress
+            variant="determinate"
+            value={50}
+            style={{ width: '100%' }}
+            color="secondary"
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container spacing={3}>
+            <Grid item xs={12} display="flex" gap={1}>
+              <CircularProgress
+                color="success"
+                size={30}
+                sx={{ marginLeft: '15px', marginRight: '15px' }}
+              />
+              <div>
+                <Typography variant="h6" color="textPrimary">
+                  Confirmation in progress
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  Once USDC is confirmed in the blockchain. we'll start
+                  exchanging it in ETH.
+                </Typography>
+                <Box display="flex" alignItems="center" padding={0}>
+                  <Typography variant="body2">
+                    <Link
+                      href="#"
+                      color="secondary"
+                      underline="hover"
+                      padding={1}
+                    >
+                      See input hash in explorer
+                    </Link>
+                  </Typography>
+                  <HelpOutlineIcon
+                    sx={{
+                      color: 'textSecondary',
+                      height: '18px',
+                      width: '18px'
+                    }}
+                  />
+                </Box>
+              </div>
+            </Grid>
+            <Grid item xs={12} display="flex" gap={1}>
+              <Icon
+                iconGroup={<LoadingIcon />}
+                size={40}
+                viewBox="0 0 30 30"
+                color="secondary"
+              />
+              <div>
+                <Typography variant="h6" color="textPrimary">
+                  Exchanging USDC to ETH
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  The process will take a few minutes. Please wait.
+                </Typography>
+              </div>
+            </Grid>
+            <Grid item xs={12} display="flex" gap={1}>
+              <Icon
+                iconGroup={<DownloadIcon />}
+                size={70}
+                viewBox="0 0 30 30"
+                color="secondary"
+              />
+              <div>
+                <Typography variant="h6" color="textPrimary">
+                  Sending funds to your wallet
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  Once the transaction is completed, your ETH will be sent to
+                  your crypto wallet. Typically, it takes a few minutes for your
+                  funds to show up.
+                </Typography>
+              </div>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default function exchangeProgress() {
+  const [isOpen, setIsOpen] = React.useState(true);
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <CustomDialog
+      maxWidth={'lg'}
+      open={isOpen}
+      handleClose={onClose}
+      isClosePresent={false}
+      disableEscapeKeyDown
+      restComponents={exchangeProgressContent()}
+    />
+  );
+}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/received.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/received.tsx
new file mode 100644
index 00000000..f60a7c5b
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/received.tsx
@@ -0,0 +1,161 @@
+import { CallReceived, ContentCopy } from '@mui/icons-material';
+import { Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import React from 'react';
+
+import Button from '../../../../../../designSystem/designComponents/buttons/button';
+import CustomDialog from '../../../../../../designSystem/designComponents/dialog/dialogBox';
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import Eth from '../../../../../../designSystem/iconGroups/eth';
+
+const receivedContent = () => {
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      margin={'70px 70px 50px 70px'}
+    >
+      <Grid container width={'570px'} spacing={'20px'}>
+        <Grid item xs={12}>
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="body2" color="textSecondary">
+                11/10/2022
+              </Typography>
+              <Typography variant="body2" color="textPrimary">
+                16:01:23
+              </Typography>
+            </Grid>
+            <Grid item xs={6} textAlign={'right'}>
+              <Typography variant="body2" color="textPrimary">
+                Wallet
+              </Typography>
+              <Typography variant="body2" color="textSecondary">
+                PRASHANT
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="body2" color="textSecondary">
+                Action
+              </Typography>
+              <Typography variant="body1" sx={{ color: 'secondary.dark' }}>
+                <Icon
+                  size={16}
+                  viewBox="0 0 30 30"
+                  iconGroup={<CallReceived />}
+                />
+                RESEND
+              </Typography>
+            </Grid>
+            <Grid item xs={6} textAlign={'right'}>
+              <Typography variant="body2" color="textSecondary">
+                Status
+              </Typography>
+              <Typography variant="body2" sx={{ color: 'secondary.dark' }}>
+                Success
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="body2" color="textSecondary">
+                Amount
+              </Typography>
+              <Typography variant="body2" color="textPrimary">
+                <Icon size={30} viewBox="0 0 30 30" iconGroup={<Eth />} />
+                USDC 1.28258 ($ 1.28)
+              </Typography>
+            </Grid>
+            <Grid item xs={6} textAlign={'right'}>
+              <Typography variant="body2" color="textSecondary">
+                Fee
+              </Typography>
+              <Typography variant="body2" color="textPrimary">
+                <Icon size={30} viewBox="0 0 30 30" iconGroup={<Eth />} />
+                ETH 0.00163 ($ 2.09)
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="body2" color="textSecondary">
+                Sender
+              </Typography>
+              <Typography variant="body2" color="textPrimary">
+                1.0xf0e0987897sf6097sd23q3erer45334a USDC 0
+              </Typography>
+            </Grid>
+            <Grid item xs={6} textAlign={'right'}>
+              <Typography variant="body2" color="textSecondary">
+                Receiver
+              </Typography>
+              <Typography variant="body2" sx={{ color: 'secondary.dark' }}>
+                1.0xf0e0987897sf6097sd23q3erer45334a USDC 0
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Typography variant="body2" color="textSecondary">
+            Transaction Hash
+            <Icon
+              size={16}
+              viewBox="0 0 30 30"
+              iconGroup={<ContentCopy color="secondary" />}
+            />
+          </Typography>
+          <Typography variant="body2" color="textPrimary">
+            0x30a0db8796142rhj1260712g10912631fsd-01273
+          </Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid
+            container
+            justifyContent={'center'}
+            alignContent={'center'}
+            alignItems={'center'}
+          >
+            <Grid item>
+              <Button>
+                <Typography
+                  variant="h6"
+                  color="white"
+                  sx={{ padding: '5px 30px' }}
+                >
+                  Exchange
+                </Typography>
+              </Button>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default function received() {
+  const [isOpen, setIsOpen] = React.useState(true);
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <CustomDialog
+      maxWidth={'lg'}
+      open={isOpen}
+      handleClose={onClose}
+      isClosePresent={false}
+      disableEscapeKeyDown
+      restComponents={receivedContent()}
+    />
+  );
+}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/transactionDetails.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/transactionDetails.tsx
new file mode 100644
index 00000000..a0e128fb
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/transactionDetails.tsx
@@ -0,0 +1,99 @@
+// import { CallReceived, ContentCopy } from '@mui/icons-material';
+import { Divider, Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import React from 'react';
+
+import CustomDialog from '../../../../../../designSystem/designComponents/dialog/dialogBox';
+
+const transactionDetailsContent = () => {
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      margin={'70px 70px 50px 70px'}
+    >
+      <Grid
+        container
+        width={'470px'}
+        spacing={'20px'}
+        display="flex"
+        flexDirection="column"
+      >
+        <Typography variant="h5" sx={{ color: 'secondary.dark' }}>
+          Transaction Details
+        </Typography>
+        <Divider
+          variant="middle"
+          style={{ margin: '20px 0px', background: 'secondary.dark' }}
+        />
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <Typography variant="body2" color="textSecondary">
+              Transaction ID
+            </Typography>
+            <Typography variant="h5" color="textPrimary">
+              dym93xarif1oh5qw
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="body2" color="textSecondary">
+              You Sent
+            </Typography>
+            <Typography variant="h5" color="textPrimary">
+              18 USDC
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="body2" color="textSecondary">
+              Changelly address (USDC)
+            </Typography>
+            <Typography variant="h5" color="textPrimary">
+              0xd46-087324h28323h2sacr4w5
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="body2" color="textSecondary">
+              Recipient
+            </Typography>
+            <Typography variant="h5" color="textPrimary">
+              0xfj3490had97634fd012-y31sfsd812
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Divider
+              variant="middle"
+              style={{ background: 'secondary.dark' }}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="body2" color="textSecondary">
+              Exchange Rate
+            </Typography>
+            <Typography variant="h5" color="textPrimary">
+              1 USDC ~ 0.00076757 ETH
+            </Typography>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default function transactionDetails() {
+  const [isOpen, setIsOpen] = React.useState(true);
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <CustomDialog
+      maxWidth={'lg'}
+      open={isOpen}
+      handleClose={onClose}
+      isClosePresent={false}
+      disableEscapeKeyDown
+      restComponents={transactionDetailsContent()}
+    />
+  );
+}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
new file mode 100644
index 00000000..f9742179
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
@@ -0,0 +1,172 @@
+import { InfoOutlined } from '@mui/icons-material';
+import { Divider, Grid, Link, Typography } from '@mui/material';
+import React from 'react';
+
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import Changelly from '../../../../../../designSystem/iconGroups/changelly';
+import formatDisplayAmount from '../../../../../../utils/formatDisplayAmount';
+
+type feeDetailsProps = {
+  fromToken: string;
+  toToken: string;
+  fees: string;
+  exchangeRate: string;
+  result: number;
+  price: number;
+};
+
+const NetworkFeeDetails: React.FC<feeDetailsProps> = ({
+  fromToken,
+  toToken,
+  fees,
+  exchangeRate,
+  result,
+  price
+}) => {
+  return (
+    <>
+      <Grid container>
+        <Grid item xs={12} sx={{ marginTop: '30px' }}>
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="h5" color="textSecondary">
+                NETWORK FEES
+              </Typography>
+            </Grid>
+            <Grid item xs={6}>
+              <Grid container direction="row" textAlign={'right'}>
+                <Typography
+                  variant="body1"
+                  color="textSecondary"
+                  display={'inline'}
+                >
+                  Medium &nbsp; &#x2022; &nbsp;
+                </Typography>
+                <Typography
+                  variant="body1"
+                  color="textPrimary"
+                  display={'inline'}
+                >
+                  {`${formatDisplayAmount(fees, 5, true)} ${fromToken}`}
+                  <Link
+                    href="#"
+                    color="secondary"
+                    underline="hover"
+                    padding={1}
+                  >
+                    Change
+                  </Link>
+                </Typography>
+              </Grid>
+            </Grid>
+          </Grid>
+          <Divider />
+        </Grid>
+        <Grid item xs={12} sx={{ marginTop: '20px' }}>
+          <Grid container>
+            <Grid item xs={5}>
+              <Typography variant="body1" color="textSecondary">
+                Provider
+                <Icon
+                  size={16}
+                  viewBox="0 0 24 21"
+                  iconGroup={<InfoOutlined />}
+                  color="textSecondary"
+                />
+              </Typography>
+            </Grid>
+            <Grid item xs={4}>
+              <Typography variant="body1" color="textSecondary">
+                Exchange Rate
+                <Icon
+                  size={16}
+                  viewBox="0 0 24 21"
+                  iconGroup={<InfoOutlined />}
+                  color="textSecondary"
+                />
+              </Typography>
+            </Grid>
+            <Grid item xs={3}>
+              <Typography
+                variant="body1"
+                color="textSecondary"
+                textAlign={'right'}
+              >
+                Receive
+                <Icon
+                  size={16}
+                  viewBox="0 0 24 21"
+                  iconGroup={<InfoOutlined />}
+                  color="textSecondary"
+                />
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12} paddingTop={2}>
+          <Grid
+            container
+            sx={{
+              padding: '9px 17px',
+              background: '#1F1D1B',
+              border: '0.5px solid #5F5143',
+              borderRadius: '10px'
+            }}
+          >
+            <Grid
+              container
+              xs={5}
+              display={'flex'}
+              alignItems={'center'}
+              spacing={2}
+            >
+              <Grid item>
+                <Changelly />
+              </Grid>
+              <Grid item>
+                <Typography variant="body1" color="textPrimary">
+                  Changelly
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  No registration required
+                </Typography>
+              </Grid>
+            </Grid>
+            <Grid item xs={4}>
+              <Grid item>
+                <Typography variant="body1" color="textPrimary">
+                  {`1 ${fromToken} = ${parseFloat(exchangeRate).toFixed(
+                    6
+                  )} ${toToken}`}
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  Fixed
+                </Typography>
+              </Grid>
+            </Grid>
+            <Grid item xs={3}>
+              <Grid item>
+                <Typography
+                  variant="body1"
+                  color="textPrimary"
+                  textAlign={'right'}
+                >
+                  {`${formatDisplayAmount(result, 5, true)} ${toToken}`}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  color="textSecondary"
+                  textAlign={'right'}
+                >
+                  {`$${(price * result).toFixed(2)}`}
+                </Typography>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+export default NetworkFeeDetails;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
new file mode 100644
index 00000000..b4e906ac
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
@@ -0,0 +1,252 @@
+import { COINS } from '@cypherock/communication';
+import { SwapVerticalCircle } from '@mui/icons-material';
+import {
+  //   Autocomplete,
+  FormControl,
+  Grid,
+  InputLabel,
+  ListItemText,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Typography
+  //   Box,
+  //   TextField
+} from '@mui/material';
+import React, { useState } from 'react';
+
+import SwitchButton from '../../../../../../designSystem/designComponents/buttons/switchButton';
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import Input from '../../../../../../designSystem/designComponents/input/input';
+import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcons';
+import { DisplayCoin } from '../../../../../../store/hooks';
+
+type swapDetailsFormProps = {
+  fromToken: DisplayCoin;
+  setFromToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
+  toToken: DisplayCoin;
+  setToToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
+  coinData: DisplayCoin[];
+  amountToSend: string;
+  handleChangeAmountToSend: (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  setAmountToSend: React.Dispatch<React.SetStateAction<string>>;
+  classesForm: string;
+};
+
+const SwapDetailsForm: React.FC<swapDetailsFormProps> = ({
+  fromToken,
+  setFromToken,
+  toToken,
+  setToToken,
+  coinData,
+  amountToSend,
+  setAmountToSend,
+  handleChangeAmountToSend,
+  classesForm
+}) => {
+  const [isAmountToSendMax, setIsAmountToSendMax] = useState(false);
+  const [fromTokenIndex, setFromTokenIndex] = useState('');
+  const [toTokenIndex, setToTokenIndex] = useState('');
+
+  //   const [fromTokenName, setFromTokenName] = useState('');
+
+  const handleChangeFromToken = (event: SelectChangeEvent) => {
+    setFromTokenIndex(event.target.value);
+    setFromToken(coinData[+event.target.value]);
+  };
+  const handleChangeToToken = (event: SelectChangeEvent) => {
+    setToTokenIndex(event.target.value);
+    setToToken(coinData[+event.target.value]);
+  };
+
+  return (
+    <>
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <Typography variant="h6" color="textSecondary">
+            From
+          </Typography>
+          <FormControl fullWidth className={classesForm}>
+            <InputLabel id="select-source-helper-label" shrink={false}>
+              {fromToken ? '' : 'Select Source'}
+            </InputLabel>
+            <Select
+              value={fromTokenIndex}
+              onChange={handleChangeFromToken}
+              variant="outlined"
+              labelId="select-source-helper-label"
+            >
+              {coinData.map((coin, index) => {
+                const coinSlugName = coin.slug.toUpperCase();
+                const coinName = COINS[coin.slug]?.name;
+                return (
+                  <MenuItem value={index} key={`from-${coin.slug}`}>
+                    <CoinIcons
+                      initial={coinSlugName}
+                      style={{ marginRight: '10px' }}
+                    />
+                    <ListItemText
+                      primary={coinName}
+                      secondary={`${coin.displayBalance} ${coinSlugName}`}
+                    />
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </FormControl>
+
+          {/* <Autocomplete
+            autoHighlight
+            value={fromToken}
+            onChange={(_event, newValue) => {
+              setFromToken(newValue as DisplayCoin);
+            }}
+            options={coinData}
+            getOptionLabel={(option: DisplayCoin) =>
+              COINS[option.slug]?.name || ''
+            }
+            renderOption={(props, option) => {
+              return (
+                <Box component={'li'} {...props}>
+                  <CoinIcons
+                    initial={option.slug.toUpperCase()}
+                    style={{ marginRight: '10px' }}
+                  />
+                  <ListItemText
+                    primary={COINS[option.slug]?.name}
+                    secondary={`${
+                      option.displayBalance
+                    } ${option.slug.toUpperCase()}`}
+                  />
+                </Box>
+              );
+            }}
+            renderInput={params => (
+              <TextField
+                {...params}
+                label=""
+                inputProps={{
+                  ...params.inputProps
+                }}
+              />
+            )}
+          /> */}
+        </Grid>
+        <Grid item xs={6}>
+          <Grid container xs={12}>
+            <Grid
+              container
+              display={'flex'}
+              justifyContent={'flex-end'}
+              alignContent={'center'}
+              alignItems={'center'}
+              gap={2}
+            >
+              <Grid item>
+                <Typography variant="h6" color="textSecondary">
+                  Max
+                </Typography>
+              </Grid>
+              <Grid item>
+                <SwitchButton
+                  completed={isAmountToSendMax}
+                  disabled={fromTokenIndex === ''}
+                  handleChange={() => {
+                    setIsAmountToSendMax(currVal => !currVal);
+                    setAmountToSend(fromToken?.displayBalance || '0');
+                  }}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+          <Input
+            fullWidth
+            type="number"
+            placeholder="0.00000000"
+            inputProps={{ 'aria-label': 'description' }}
+            value={amountToSend}
+            onChange={handleChangeAmountToSend}
+            className={classesForm}
+          />
+        </Grid>
+      </Grid>
+      <Typography
+        variant="h6"
+        textAlign={'center'}
+        color="textSecondary"
+        gutterBottom
+        sx={{ marginTop: '10px' }}
+      >
+        <Icon
+          size={40}
+          color="textSecondary"
+          viewBox="0 0 40 40"
+          iconGroup={<SwapVerticalCircle />}
+        />
+      </Typography>
+      <Grid container spacing={2} sx={{ marginTop: '-45px' }}>
+        <Grid item xs={6}>
+          <Typography variant="h6" color="textSecondary">
+            To
+          </Typography>
+          <FormControl fullWidth className={classesForm}>
+            <InputLabel id="select-target-helper-label" shrink={false}>
+              {toToken ? '' : 'Select Target'}
+            </InputLabel>
+            <Select
+              value={toTokenIndex}
+              onChange={handleChangeToToken}
+              labelId="select-target-helper-label"
+              variant="outlined"
+            >
+              {coinData.map((coin, index) => {
+                const coinSlugName = coin.slug.toUpperCase();
+                const coinName = COINS[coin.slug]?.name;
+                return (
+                  <MenuItem value={index} key={`to-${coin.slug}`}>
+                    <CoinIcons
+                      initial={coinSlugName}
+                      style={{ marginRight: '10px' }}
+                    />
+                    <ListItemText primary={coinName} secondary={coinSlugName} />
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs={6}>
+          <Grid container xs={12}>
+            <Grid
+              container
+              display={'flex'}
+              justifyContent={'flex-end'}
+              alignContent={'center'}
+              alignItems={'center'}
+              gap={2}
+            >
+              <Grid item>
+                <Typography variant="h6" color="textSecondary">
+                  Max
+                </Typography>
+              </Grid>
+              <Grid item>
+                <SwitchButton
+                  completed={false}
+                  handleChange={() => {
+                    //   empty
+                  }}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+          <Input fullWidth placeholder="0.00000000" className={classesForm} />
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+export default SwapDetailsForm;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
new file mode 100644
index 00000000..b4d6e60a
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -0,0 +1,284 @@
+import { COINS } from '@cypherock/communication';
+import { Wallet } from '@cypherock/database';
+import { Grid, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React, { useEffect, useState } from 'react';
+
+import Button from '../../../../../../designSystem/designComponents/buttons/button';
+import logger from '../../../../../../mainProcess/logger';
+import { customAccountDb } from '../../../../../../store/database';
+import {
+  changeFormatOfOutputList,
+  useExchange,
+  useReceiveTransaction,
+  useSendTransaction,
+  useWalletData
+} from '../../../../../../store/hooks';
+import { useConnection, useWallets } from '../../../../../../store/provider';
+import { RecipientData } from '../../../wallet/addAccount/formStepComponents/StepComponentProps';
+import SwapCompletedDialog from '../dialogs/SwapCompletedDialog';
+import VerifySwapDetailsDialog from '../dialogs/VerifySwapDetailsDialog';
+
+import NetworkFeeDetails from './NetworkFeeDetails';
+import SwapDetailsForm from './SwapDetailsForm';
+
+const PREFIX = 'ExchangePanel';
+
+const classes = {
+  root: `${PREFIX}-root`,
+  input: `${PREFIX}-input`,
+  debug: `${PREFIX}-debug`,
+  form: `${PREFIX}-form`
+};
+
+const Root = styled('div')(({ theme }) => ({
+  [`& .${classes.root}`]: {
+    height: 'min-content'
+  },
+  [`& .${classes.debug}`]: {
+    border: `2px solid ${theme.palette.error.main}`
+  },
+  [`& .${classes.form}`]: {
+    marginTop: '10px',
+    border: '0.5px solid #CDCDCD',
+    borderRadius: '5px',
+    '& .MuiSelect-select': {
+      display: 'flex',
+      alignItems: 'center',
+      alignContents: 'center',
+      width: '250px',
+      height: '20px'
+    }
+  }
+}));
+
+const ExchangePanel = () => {
+  const {
+    fromToken,
+    setFromToken,
+    toToken,
+    setToToken,
+    amountToSend,
+    setAmountToSend,
+    exchangeRate,
+    fees,
+    amountToReceive,
+    createSwapTransaction
+  } = useExchange();
+  const { allWallets, isLoading: isWalletLoading } = useWallets();
+
+  // By default selecting the first wallet
+  useEffect(() => {
+    if (!currentWalletId && !isWalletLoading) {
+      setCurrentWalletId(allWallets[0]._id);
+    }
+  }, [isWalletLoading, allWallets]);
+
+  const handleChangeAmountToSend = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setAmountToSend(event.target.value);
+  };
+
+  const { coinData, setCurrentWalletId, currentWalletId } = useWalletData();
+
+  // TODO: Remove hardcoded wallet id with the selected wallet id
+
+  const [currentWalletDetails, setCurrentWalletDetails] =
+    useState<Wallet | null>(null);
+
+  useEffect(() => {
+    if (isWalletLoading) return;
+
+    const wallet = allWallets.find(elem => elem._id === currentWalletId);
+    if (wallet) {
+      setCurrentWalletDetails(wallet);
+    }
+  }, [currentWalletId, isWalletLoading]);
+
+  const { deviceConnection, deviceSdkVersion, setIsInFlow } = useConnection();
+
+  const [isVerifySwapDetailsOpen, setIsVerifySwapDetailsOpen] = useState(false);
+  const [isSwapCompleted, setIsSwapCompleted] = useState(false);
+  const [swapTransactionId, setSwapTransactionId] = useState('');
+
+  const receiveTransaction = useReceiveTransaction();
+  const sendTransaction = useSendTransaction();
+
+  const startReceiveFlow = () => {
+    setIsVerifySwapDetailsOpen(true);
+    receiveTransaction
+      .handleReceiveTransaction({
+        connection: deviceConnection,
+        sdkVersion: deviceSdkVersion,
+        setIsInFlow,
+        walletId: currentWalletId,
+        coinType: toToken.slug,
+        coinName: COINS[toToken.slug]?.name,
+        xpub: toToken.xpub,
+        zpub: toToken.zpub
+      })
+      .then(() => {
+        logger.info('Swap Transaction: Receive Flow Started');
+      })
+      .catch(err => {
+        logger.error('Swap Transaction: Receive Flow Failed', err);
+      });
+  };
+
+  const startSendFlow = async () => {
+    const sendDetails = await createSwapTransaction(
+      receiveTransaction.receiveAddress
+    );
+
+    setSwapTransactionId(sendDetails.id);
+
+    logger.info('Swap Transaction: Changelly Transaction Created', sendDetails);
+
+    let customAccount: string | undefined;
+
+    if (fromToken.slug === 'near') {
+      const customAccounts = await customAccountDb.getAll({
+        coin: fromToken.slug,
+        walletId: fromToken.walletId
+      });
+      customAccount = customAccounts[0].name;
+    }
+
+    const recipientData: RecipientData = {
+      id: 0,
+      recipient: sendDetails.payinAddress,
+      amount: amountToSend,
+      errorRecipient: '',
+      errorAmount: ''
+    };
+
+    sendTransaction
+      .handleSendTransaction({
+        connection: deviceConnection,
+        sdkVersion: deviceSdkVersion,
+        setIsInFlow,
+        walletId: currentWalletId,
+        xpub: fromToken.xpub,
+        zpub: fromToken.zpub,
+        coinType: fromToken.slug,
+        fees: +fees,
+        pinExists: currentWalletDetails?.passwordSet,
+        passphraseExists: currentWalletDetails?.passphraseSet,
+        customAccount,
+        newAccountId: null,
+        outputList: changeFormatOfOutputList(
+          [recipientData],
+          fromToken.slug,
+          undefined
+        ),
+        data: {},
+        isSendAll: false
+      })
+      .then(() => {
+        logger.info('Swap Transaction: Send Flow Completed');
+      })
+      .catch(err => {
+        logger.error('Swap Transaction: Send Flow Failed', err);
+      });
+  };
+
+  useEffect(() => {
+    if (receiveTransaction.verified) {
+      startSendFlow();
+    }
+  }, [receiveTransaction.verified]);
+
+  useEffect(() => {
+    if (sendTransaction.signedTxn) {
+      setIsVerifySwapDetailsOpen(false);
+      setIsSwapCompleted(true);
+    }
+  }, [sendTransaction.signedTxn]);
+
+  return (
+    <Root>
+      {
+        <SwapDetailsForm
+          fromToken={fromToken}
+          setFromToken={setFromToken}
+          toToken={toToken}
+          setToToken={setToToken}
+          coinData={coinData}
+          amountToSend={amountToSend}
+          setAmountToSend={setAmountToSend}
+          handleChangeAmountToSend={handleChangeAmountToSend}
+          classesForm={classes.form}
+        />
+      }
+      {amountToReceive && (
+        <>
+          {
+            <NetworkFeeDetails
+              fromToken={fromToken.slug.toUpperCase()}
+              toToken={toToken.slug.toUpperCase()}
+              fees={fees}
+              exchangeRate={exchangeRate}
+              result={+amountToReceive}
+              price={toToken.price}
+            />
+          }
+          <Grid
+            container
+            xs={12}
+            justifyContent={'center'}
+            alignContent={'center'}
+            alignItems={'center'}
+            paddingTop={3}
+          >
+            <Grid item>
+              <Button onClick={startReceiveFlow}>
+                <Typography
+                  variant="h5"
+                  color="textPrimary"
+                  sx={{ padding: '5px 30px' }}
+                >
+                  Exchange
+                </Typography>
+              </Button>
+            </Grid>
+          </Grid>
+        </>
+      )}
+      {isVerifySwapDetailsOpen && (
+        <VerifySwapDetailsDialog
+          open={isVerifySwapDetailsOpen}
+          onClose={() => {
+            receiveTransaction.cancelReceiveTxn(deviceConnection);
+            logger.info('Swap Transaction: Receive Flow Cancelled');
+
+            sendTransaction.cancelSendTxn(deviceConnection);
+            logger.info('Swap Transaction: Receive Flow Cancelled');
+            setIsVerifySwapDetailsOpen(false);
+          }}
+          amountToSend={amountToSend}
+          amountToReceive={amountToReceive}
+          networkFees={fees}
+          sourceCoinSlug={fromToken.slug.toUpperCase()}
+          sourceCoinName={COINS[fromToken.slug]?.name}
+          targetCoinSlug={toToken.slug.toUpperCase()}
+          targetCoinName={COINS[toToken.slug]?.name}
+          cardTapped={receiveTransaction.cardTapped}
+          receiveAddressVerified={receiveTransaction.verified}
+        />
+      )}
+      {isSwapCompleted && (
+        <SwapCompletedDialog
+          open={isSwapCompleted}
+          onClose={() => {
+            setIsSwapCompleted(false);
+          }}
+          toTokenName={COINS[toToken.slug]?.name}
+          transactionId={swapTransactionId}
+        />
+      )}
+    </Root>
+  );
+};
+
+export default ExchangePanel;
diff --git a/cysync/src/store/hooks/index.ts b/cysync/src/store/hooks/index.ts
index 8745efe1..3c4432d3 100644
--- a/cysync/src/store/hooks/index.ts
+++ b/cysync/src/store/hooks/index.ts
@@ -7,3 +7,4 @@ export * from './useToken';
 export * from './useCustomAccount';
 export * from './useTransactionData';
 export * from './useWalletData';
+export * from './useExchange';
diff --git a/cysync/src/store/hooks/useExchange.ts b/cysync/src/store/hooks/useExchange.ts
new file mode 100644
index 00000000..07922e9c
--- /dev/null
+++ b/cysync/src/store/hooks/useExchange.ts
@@ -0,0 +1,58 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+
+import { DisplayCoin } from './types';
+
+const baseUrl = 'http://localhost:5000';
+
+export const useExchange = () => {
+  const [fromToken, setFromToken] = useState<DisplayCoin>();
+  const [toToken, setToToken] = useState<DisplayCoin>();
+  const [amountToSend, setAmountToSend] = useState('');
+  const [fees, setFees] = useState('');
+  const [amountToReceive, setAmountToReceive] = useState('');
+  const [exchangeRate, setExchangeRate] = useState('');
+
+  const getCurrentExchangeRate = async () => {
+    const { data } = await axios.get(`${baseUrl}/swap/exchangeDetails`, {
+      params: { from: fromToken.slug, to: toToken.slug, amount: amountToSend }
+    });
+    setExchangeRate(data.message.result[0].rate);
+    setFees(data.message.result[0].fee);
+    setAmountToReceive(data.message.result[0].result);
+  };
+
+  useEffect(() => {
+    if (fromToken && toToken && amountToSend) {
+      getCurrentExchangeRate();
+    }
+  }, [fromToken, toToken, amountToSend]);
+
+  const createSwapTransaction = async (receiveAddress: string) => {
+    const { data } = await axios.get(`${baseUrl}/swap/transaction`, {
+      params: {
+        from: fromToken.slug,
+        to: toToken.slug,
+        amount: amountToSend,
+        address: receiveAddress
+      }
+    });
+    return {
+      id: data.message.result.id,
+      payinAddress: data.message.result.payinAddress
+    };
+  };
+
+  return {
+    fromToken,
+    setFromToken,
+    toToken,
+    setToToken,
+    amountToSend,
+    setAmountToSend,
+    exchangeRate,
+    fees,
+    amountToReceive,
+    createSwapTransaction
+  };
+};

From 77e818b834059e8c0fd7c2d98723e041e765dd1e Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Thu, 3 Nov 2022 21:48:30 +0530
Subject: [PATCH 02/13] fix: the history panel is integrated with the API

---
 .../mainApp/sidebar/swap/HorizontalTabs.tsx   |  43 +++-
 .../sidebar/swap/panels/HistoryPanel.tsx      | 212 ----------------
 .../swap/panels/exchange/SwapDetailsForm.tsx  |   7 +-
 .../dialogs/SwapCompletedDialog.tsx           |   6 +-
 .../dialogs/VerifySwapDetailsDialog.tsx       |   8 +-
 .../sidebar/swap/panels/exchange/index.tsx    |  54 ++--
 .../sidebar/swap/panels/history/index.tsx     | 231 ++++++++++++++++++
 cysync/src/store/hooks/useExchange.ts         |  16 +-
 8 files changed, 310 insertions(+), 267 deletions(-)
 delete mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/HistoryPanel.tsx
 rename cysync/src/pages/mainApp/sidebar/swap/panels/{ => exchange}/dialogs/SwapCompletedDialog.tsx (92%)
 rename cysync/src/pages/mainApp/sidebar/swap/panels/{ => exchange}/dialogs/VerifySwapDetailsDialog.tsx (95%)
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx

diff --git a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
index 6f4c123e..e26b4f17 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
@@ -1,11 +1,14 @@
+import { Wallet } from '@cypherock/database';
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 
-import ExchangePanel from './panels/exchange';
-import HistoryPanel from './panels/HistoryPanel';
+import { useWalletData } from '../../../../store/hooks';
+import { useWallets } from '../../../../store/provider';
 
+import ExchangePanel from './panels/exchange';
+import HistoryPanel from './panels/history';
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
@@ -28,7 +31,32 @@ function TabPanel(props: TabPanelProps) {
 }
 
 export default function HorizontalTabs() {
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = useState(0);
+
+  const { allWallets, isLoading: isWalletLoading } = useWallets();
+
+  // By default selecting the first wallet
+  useEffect(() => {
+    if (!currentWalletId && !isWalletLoading) {
+      setCurrentWalletId(allWallets[0]._id);
+    }
+  }, [isWalletLoading, allWallets]);
+
+  const { coinData, setCurrentWalletId, currentWalletId } = useWalletData();
+
+  // TODO: Remove hardcoded wallet id with the selected wallet id
+
+  const [currentWalletDetails, setCurrentWalletDetails] =
+    useState<Wallet | null>(null);
+
+  useEffect(() => {
+    if (isWalletLoading) return;
+
+    const wallet = allWallets.find(elem => elem._id === currentWalletId);
+    if (wallet) {
+      setCurrentWalletDetails(wallet);
+    }
+  }, [currentWalletId, isWalletLoading]);
 
   const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
@@ -48,10 +76,13 @@ export default function HorizontalTabs() {
         </Tabs>
       </Box>
       <TabPanel value={value} index={0}>
-        <ExchangePanel />
+        <ExchangePanel
+          coinData={coinData}
+          currentWalletDetails={currentWalletDetails}
+        />
       </TabPanel>
       <TabPanel value={value} index={1}>
-        <HistoryPanel />
+        <HistoryPanel walletId={currentWalletId} />
       </TabPanel>
     </Box>
   );
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/HistoryPanel.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/HistoryPanel.tsx
deleted file mode 100644
index 90841518..00000000
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/HistoryPanel.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import { Grid, Typography } from '@mui/material';
-import React from 'react';
-
-import Icon from '../../../../../designSystem/designComponents/icons/Icon';
-import colors from '../../../../../designSystem/designConstants/colors';
-import Btc from '../../../../../designSystem/iconGroups/btc';
-import Download from '../../../../../designSystem/iconGroups/download';
-import Eth from '../../../../../designSystem/iconGroups/eth';
-import Swap from '../../../../../designSystem/iconGroups/swap';
-
-export default function HistoryPanel() {
-  type HistoryItem = {
-    date: string;
-    from: {
-      wallet: string;
-      icon: JSX.Element;
-    };
-    to: {
-      wallet: string;
-      icon: JSX.Element;
-    };
-    amount: number;
-    fees: number;
-    time: string;
-    service: string;
-  };
-
-  const history: HistoryItem[] = [
-    {
-      date: '15/11/2022 - Today',
-      from: {
-        wallet: 'Ethereum 1',
-        icon: <Eth />
-      },
-      to: {
-        wallet: 'Bitcoin 1',
-        icon: <Btc />
-      },
-      amount: 0.0001,
-      fees: 0.0001,
-      time: '12:00',
-      service: 'Changelly'
-    },
-    {
-      date: '15/11/2022 - Today',
-      from: {
-        wallet: 'Ethereum 1',
-        icon: <Eth />
-      },
-      to: {
-        wallet: 'Bitcoin 1',
-        icon: <Btc />
-      },
-      amount: 0.0001,
-      fees: 0.0001,
-      time: '12:00',
-      service: 'Changelly'
-    }
-  ];
-
-  return (
-    <Grid container xs={12}>
-      <Grid item xs={12}>
-        <Typography
-          variant="body1"
-          sx={{ color: 'secondary.dark' }}
-          textAlign={'right'}
-        >
-          <Download />
-          &nbsp; Export operations
-        </Typography>
-      </Grid>
-      <Grid
-        item
-        xs={12}
-        sx={{
-          marginTop: '13px',
-          padding: '12px 0px 12px 12px',
-          alignItems: 'center',
-          background: '#1C1F22',
-          display: 'flex'
-        }}
-      >
-        <Icon
-          size={20}
-          viewBox="0 0 30 30"
-          iconGroup={<InfoOutlinedIcon color="secondary" />}
-        />
-        <Typography variant="body1" sx={{ color: 'secondary.dark' }}>
-          Your swap desktop transactions are not synchronized with the Ledger
-          Live mobile application
-        </Typography>
-      </Grid>
-      <Grid item xs={12}>
-        <Grid container marginTop={'40px'}>
-          {history.map((item, index) => (
-            <Grid item xs={12} key={index} marginTop={'20px'}>
-              <Typography variant="body1" color="textSecondary">
-                {item.date}
-              </Typography>
-              <Grid item xs={12} marginTop={'20px'}>
-                <Grid
-                  container
-                  display={'flex'}
-                  justifyContent="space-around"
-                  sx={{
-                    border: '0.5px solid #433F3B',
-                    borderRadius: '10px',
-                    padding: '9px 17px 8px'
-                  }}
-                >
-                  <Grid
-                    item
-                    xs={3}
-                    display="flex"
-                    alignContent={'center'}
-                    alignItems={'center'}
-                  >
-                    <Icon
-                      size={20}
-                      viewBox="0 0 16 15"
-                      iconGroup={<Swap color={colors.text.secondary} />}
-                    />
-                    <Grid item>
-                      <Typography variant="body1" color="textPrimary">
-                        {item.service}
-                      </Typography>
-                      <Typography variant="body2" color="textSecondary">
-                        {item.time}
-                      </Typography>
-                    </Grid>
-                  </Grid>
-                  <Grid
-                    item
-                    xs={6}
-                    display="flex"
-                    alignContent={'center'}
-                    alignItems={'center'}
-                  >
-                    <Grid
-                      container
-                      display={'flex'}
-                      justifyContent={'space-around'}
-                    >
-                      <Grid
-                        item
-                        display={'flex'}
-                        alignContent={'center'}
-                        alignItems={'center'}
-                      >
-                        <Icon
-                          size={35}
-                          viewBox="0 0 30 30"
-                          iconGroup={item.from.icon}
-                        />
-                        <Typography variant="body1" color="textPrimary">
-                          {item.from.wallet}
-                        </Typography>
-                      </Grid>
-                      <Grid
-                        item
-                        display={'flex'}
-                        alignContent={'center'}
-                        alignItems={'center'}
-                        marginLeft={'5px'}
-                      >
-                        <ArrowForwardIcon sx={{ color: 'text.secondary' }} />
-                      </Grid>
-                      <Grid
-                        item
-                        display={'flex'}
-                        alignContent={'center'}
-                        alignItems={'center'}
-                      >
-                        <Icon
-                          size={35}
-                          viewBox="0 0 30 30"
-                          iconGroup={item.to.icon}
-                        />
-                        <Typography variant="body1" color="textPrimary">
-                          {item.to.wallet}
-                        </Typography>
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                  <Grid item xs={3}>
-                    <Grid
-                      container
-                      display={'flex'}
-                      justifyContent={'flex-end'}
-                    >
-                      <Grid item textAlign={'right'}>
-                        <Typography variant="body1" sx={{ color: '#16953A' }}>
-                          +{item.amount}
-                        </Typography>
-                        <Typography variant="body2" color="textSecondary">
-                          -{item.fees} ETH
-                        </Typography>
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Grid>
-              </Grid>
-            </Grid>
-          ))}
-        </Grid>
-      </Grid>
-    </Grid>
-  );
-}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
index b4e906ac..3faeb49c 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
@@ -50,8 +50,6 @@ const SwapDetailsForm: React.FC<swapDetailsFormProps> = ({
   const [fromTokenIndex, setFromTokenIndex] = useState('');
   const [toTokenIndex, setToTokenIndex] = useState('');
 
-  //   const [fromTokenName, setFromTokenName] = useState('');
-
   const handleChangeFromToken = (event: SelectChangeEvent) => {
     setFromTokenIndex(event.target.value);
     setFromToken(coinData[+event.target.value]);
@@ -96,7 +94,6 @@ const SwapDetailsForm: React.FC<swapDetailsFormProps> = ({
               })}
             </Select>
           </FormControl>
-
           {/* <Autocomplete
             autoHighlight
             value={fromToken}
@@ -135,7 +132,7 @@ const SwapDetailsForm: React.FC<swapDetailsFormProps> = ({
           /> */}
         </Grid>
         <Grid item xs={6}>
-          <Grid container xs={12}>
+          <Grid container>
             <Grid
               container
               display={'flex'}
@@ -218,7 +215,7 @@ const SwapDetailsForm: React.FC<swapDetailsFormProps> = ({
           </FormControl>
         </Grid>
         <Grid item xs={6}>
-          <Grid container xs={12}>
+          <Grid container>
             <Grid
               container
               display={'flex'}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/SwapCompletedDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/SwapCompletedDialog.tsx
similarity index 92%
rename from cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/SwapCompletedDialog.tsx
rename to cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/SwapCompletedDialog.tsx
index e4a2a72f..d62735bb 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/SwapCompletedDialog.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/SwapCompletedDialog.tsx
@@ -4,9 +4,9 @@ import { Box } from '@mui/system';
 import { shell } from 'electron';
 import React from 'react';
 
-import CustomDialog from '../../../../../../designSystem/designComponents/dialog/dialogBox';
-import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
-import CheckmarkSuccess from '../../../../../../designSystem/iconGroups/checkmarkSuccess';
+import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
+import Icon from '../../../../../../../designSystem/designComponents/icons/Icon';
+import CheckmarkSuccess from '../../../../../../../designSystem/iconGroups/checkmarkSuccess';
 
 const CHANGELLY_TRACKING_URL = 'https://changelly.com/track/';
 
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/VerifySwapDetailsDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
similarity index 95%
rename from cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/VerifySwapDetailsDialog.tsx
rename to cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
index 9156de54..e2f38314 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/VerifySwapDetailsDialog.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
@@ -5,10 +5,10 @@ import { Grid, Link, Typography } from '@mui/material';
 import { Box, keyframes } from '@mui/system';
 import React, { useEffect, useState } from 'react';
 
-import CustomDialog from '../../../../../../designSystem/designComponents/dialog/dialogBox';
-import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
-import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcons';
-import Changelly from '../../../../../../designSystem/iconGroups/changelly';
+import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
+import Icon from '../../../../../../../designSystem/designComponents/icons/Icon';
+import CoinIcons from '../../../../../../../designSystem/genericComponents/coinIcons';
+import Changelly from '../../../../../../../designSystem/iconGroups/changelly';
 
 const rotateKeyframe = keyframes`
   0% {
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
index b4d6e60a..c12d6335 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -1,24 +1,23 @@
 import { COINS } from '@cypherock/communication';
-import { Wallet } from '@cypherock/database';
 import { Grid, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React, { useEffect, useState } from 'react';
 
 import Button from '../../../../../../designSystem/designComponents/buttons/button';
 import logger from '../../../../../../mainProcess/logger';
-import { customAccountDb } from '../../../../../../store/database';
+import { customAccountDb, Wallet } from '../../../../../../store/database';
 import {
   changeFormatOfOutputList,
+  DisplayCoin,
   useExchange,
   useReceiveTransaction,
-  useSendTransaction,
-  useWalletData
+  useSendTransaction
 } from '../../../../../../store/hooks';
-import { useConnection, useWallets } from '../../../../../../store/provider';
+import { useConnection } from '../../../../../../store/provider';
 import { RecipientData } from '../../../wallet/addAccount/formStepComponents/StepComponentProps';
-import SwapCompletedDialog from '../dialogs/SwapCompletedDialog';
-import VerifySwapDetailsDialog from '../dialogs/VerifySwapDetailsDialog';
 
+import SwapCompletedDialog from './dialogs/SwapCompletedDialog';
+import VerifySwapDetailsDialog from './dialogs/VerifySwapDetailsDialog';
 import NetworkFeeDetails from './NetworkFeeDetails';
 import SwapDetailsForm from './SwapDetailsForm';
 
@@ -52,7 +51,15 @@ const Root = styled('div')(({ theme }) => ({
   }
 }));
 
-const ExchangePanel = () => {
+type exchangePanelProps = {
+  coinData: DisplayCoin[];
+  currentWalletDetails: Wallet;
+};
+
+const ExchangePanel: React.FC<exchangePanelProps> = ({
+  coinData,
+  currentWalletDetails
+}) => {
   const {
     fromToken,
     setFromToken,
@@ -65,14 +72,6 @@ const ExchangePanel = () => {
     amountToReceive,
     createSwapTransaction
   } = useExchange();
-  const { allWallets, isLoading: isWalletLoading } = useWallets();
-
-  // By default selecting the first wallet
-  useEffect(() => {
-    if (!currentWalletId && !isWalletLoading) {
-      setCurrentWalletId(allWallets[0]._id);
-    }
-  }, [isWalletLoading, allWallets]);
 
   const handleChangeAmountToSend = (
     event: React.ChangeEvent<HTMLInputElement>
@@ -80,22 +79,6 @@ const ExchangePanel = () => {
     setAmountToSend(event.target.value);
   };
 
-  const { coinData, setCurrentWalletId, currentWalletId } = useWalletData();
-
-  // TODO: Remove hardcoded wallet id with the selected wallet id
-
-  const [currentWalletDetails, setCurrentWalletDetails] =
-    useState<Wallet | null>(null);
-
-  useEffect(() => {
-    if (isWalletLoading) return;
-
-    const wallet = allWallets.find(elem => elem._id === currentWalletId);
-    if (wallet) {
-      setCurrentWalletDetails(wallet);
-    }
-  }, [currentWalletId, isWalletLoading]);
-
   const { deviceConnection, deviceSdkVersion, setIsInFlow } = useConnection();
 
   const [isVerifySwapDetailsOpen, setIsVerifySwapDetailsOpen] = useState(false);
@@ -112,7 +95,7 @@ const ExchangePanel = () => {
         connection: deviceConnection,
         sdkVersion: deviceSdkVersion,
         setIsInFlow,
-        walletId: currentWalletId,
+        walletId: currentWalletDetails._id,
         coinType: toToken.slug,
         coinName: COINS[toToken.slug]?.name,
         xpub: toToken.xpub,
@@ -128,7 +111,8 @@ const ExchangePanel = () => {
 
   const startSendFlow = async () => {
     const sendDetails = await createSwapTransaction(
-      receiveTransaction.receiveAddress
+      receiveTransaction.receiveAddress,
+      currentWalletDetails._id
     );
 
     setSwapTransactionId(sendDetails.id);
@@ -158,7 +142,7 @@ const ExchangePanel = () => {
         connection: deviceConnection,
         sdkVersion: deviceSdkVersion,
         setIsInFlow,
-        walletId: currentWalletId,
+        walletId: currentWalletDetails._id,
         xpub: fromToken.xpub,
         zpub: fromToken.zpub,
         coinType: fromToken.slug,
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
new file mode 100644
index 00000000..4e8b52e4
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
@@ -0,0 +1,231 @@
+import { COINS } from '@cypherock/communication';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { Grid, Typography } from '@mui/material';
+import React, { useEffect } from 'react';
+
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import colors from '../../../../../../designSystem/designConstants/colors';
+import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcons';
+import Download from '../../../../../../designSystem/iconGroups/download';
+import Swap from '../../../../../../designSystem/iconGroups/swap';
+import { useExchange } from '../../../../../../store/hooks';
+
+type HistoryItem = {
+  date: string;
+  txns: Array<{
+    id: string;
+    time: string;
+    fromToken: string;
+    toToken: string;
+    amount: string;
+    fees: string;
+    status: string;
+  }>;
+};
+
+type historyPanelProps = {
+  walletId: string;
+};
+
+const HistoryPanel: React.FC<historyPanelProps> = ({ walletId }) => {
+  const { getSwapTransactions } = useExchange();
+
+  const [historyItems, setHistoryItems] = React.useState<HistoryItem[]>([]);
+
+  useEffect(() => {
+    const getTransactions = async () => {
+      const transactions = await getSwapTransactions(walletId);
+      /* tslint:disable-next-line */
+      transactions.forEach((transaction: any) => {
+        const createdAt = new Date(transaction.createdAt * 1000);
+        const date = createdAt.toLocaleDateString();
+        const time = createdAt.toLocaleTimeString();
+        const newTxn = {
+          id: transaction.id,
+          time,
+          fromToken: transaction.currencyFrom,
+          toToken: transaction.currencyTo,
+          amount: transaction.amountExpectedFrom,
+          fees: transaction.changellyFee,
+          status: transaction.status
+        };
+        setHistoryItems(prev => {
+          const index = prev.findIndex(item => item.date === date);
+          if (index === -1) {
+            return [
+              ...prev,
+              {
+                date,
+                txns: [newTxn]
+              }
+            ];
+          } else {
+            const newTxns = [...prev[index].txns, newTxn];
+            return [
+              ...prev.slice(0, index),
+              {
+                date,
+                txns: newTxns
+              },
+              ...prev.slice(index + 1)
+            ];
+          }
+        });
+      });
+    };
+    getTransactions();
+  }, []);
+
+  return (
+    <Grid container>
+      <Grid item xs={12}>
+        <Typography
+          variant="body1"
+          sx={{ color: 'secondary.dark' }}
+          textAlign={'right'}
+        >
+          <Download />
+          &nbsp; Export operations
+        </Typography>
+      </Grid>
+      <Grid
+        item
+        xs={12}
+        sx={{
+          marginTop: '13px',
+          padding: '12px 0px 12px 12px',
+          alignItems: 'center',
+          background: '#1C1F22',
+          display: 'flex'
+        }}
+      >
+        <Icon
+          size={20}
+          viewBox="0 0 30 30"
+          iconGroup={<InfoOutlinedIcon color="secondary" />}
+        />
+        <Typography variant="body1" sx={{ color: 'secondary.dark' }}>
+          Your swap desktop transactions are not synchronized with the Ledger
+          Live mobile application
+        </Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <Grid container marginTop={'40px'}>
+          {historyItems.map((item, index) => (
+            <Grid item xs={12} key={index} marginTop={'20px'}>
+              <Typography variant="body1" color="textSecondary">
+                {item.date}
+              </Typography>
+              {item.txns.map(txn => (
+                <Grid key={txn.id} item xs={12} marginTop={'20px'}>
+                  <Grid
+                    container
+                    display={'flex'}
+                    justifyContent="space-around"
+                    sx={{
+                      border: '0.5px solid #433F3B',
+                      borderRadius: '10px',
+                      padding: '9px 17px 8px'
+                    }}
+                  >
+                    <Grid
+                      item
+                      xs={3}
+                      display="flex"
+                      alignContent={'center'}
+                      alignItems={'center'}
+                    >
+                      <Icon
+                        size={20}
+                        viewBox="0 0 16 15"
+                        iconGroup={<Swap color={colors.text.secondary} />}
+                      />
+                      <Grid item>
+                        <Typography variant="body1" color="textPrimary">
+                          Changelly
+                        </Typography>
+                        <Typography variant="body2" color="textSecondary">
+                          {txn.time}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                    <Grid
+                      item
+                      xs={6}
+                      display="flex"
+                      alignContent={'center'}
+                      alignItems={'center'}
+                    >
+                      <Grid
+                        container
+                        display={'flex'}
+                        justifyContent={'space-around'}
+                      >
+                        <Grid
+                          item
+                          display={'flex'}
+                          alignContent={'center'}
+                          alignItems={'center'}
+                        >
+                          <CoinIcons
+                            initial={txn.fromToken.toUpperCase()}
+                            style={{ marginRight: '10px' }}
+                          />
+                          <Typography variant="body1" color="textPrimary">
+                            {COINS[txn.fromToken]?.name}
+                          </Typography>
+                        </Grid>
+                        <Grid
+                          item
+                          display={'flex'}
+                          alignContent={'center'}
+                          alignItems={'center'}
+                          marginLeft={'5px'}
+                        >
+                          <ArrowForwardIcon sx={{ color: 'text.secondary' }} />
+                        </Grid>
+                        <Grid
+                          item
+                          display={'flex'}
+                          alignContent={'center'}
+                          alignItems={'center'}
+                        >
+                          <CoinIcons
+                            initial={txn.toToken.toUpperCase()}
+                            style={{ marginRight: '10px' }}
+                          />
+                          <Typography variant="body1" color="textPrimary">
+                            {COINS[txn.toToken]?.name}
+                          </Typography>
+                        </Grid>
+                      </Grid>
+                    </Grid>
+                    <Grid item xs={3}>
+                      <Grid
+                        container
+                        display={'flex'}
+                        justifyContent={'flex-end'}
+                      >
+                        <Grid item textAlign={'right'}>
+                          <Typography variant="body1" sx={{ color: '#16953A' }}>
+                            +{txn.amount}
+                          </Typography>
+                          <Typography variant="body2" color="textSecondary">
+                            -{txn.fees} {txn.fromToken.toUpperCase()}
+                          </Typography>
+                        </Grid>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              ))}
+            </Grid>
+          ))}
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default HistoryPanel;
diff --git a/cysync/src/store/hooks/useExchange.ts b/cysync/src/store/hooks/useExchange.ts
index 07922e9c..2fb09c0e 100644
--- a/cysync/src/store/hooks/useExchange.ts
+++ b/cysync/src/store/hooks/useExchange.ts
@@ -28,9 +28,13 @@ export const useExchange = () => {
     }
   }, [fromToken, toToken, amountToSend]);
 
-  const createSwapTransaction = async (receiveAddress: string) => {
+  const createSwapTransaction = async (
+    receiveAddress: string,
+    walletId: string
+  ) => {
     const { data } = await axios.get(`${baseUrl}/swap/transaction`, {
       params: {
+        walletId,
         from: fromToken.slug,
         to: toToken.slug,
         amount: amountToSend,
@@ -43,6 +47,13 @@ export const useExchange = () => {
     };
   };
 
+  const getSwapTransactions = async (walletId: string) => {
+    const { data } = await axios.get(`${baseUrl}/swap/transactions`, {
+      params: { walletId }
+    });
+    return data.message.result;
+  };
+
   return {
     fromToken,
     setFromToken,
@@ -53,6 +64,7 @@ export const useExchange = () => {
     exchangeRate,
     fees,
     amountToReceive,
-    createSwapTransaction
+    createSwapTransaction,
+    getSwapTransactions
   };
 };

From 5df62785a00a178659a4ccabaef110b510a2212b Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Fri, 4 Nov 2022 14:48:14 +0530
Subject: [PATCH 03/13] feat: updated the History UI to show all the txns

---
 .../mainApp/sidebar/swap/HorizontalTabs.tsx   |   2 +-
 .../src/pages/mainApp/sidebar/swap/index.tsx  |  10 -
 .../swap/panels/dialogs/exchangeProgress.tsx  | 136 --------
 .../panels/exchange/NetworkFeeDetails.tsx     |   4 +-
 .../swap/panels/exchange/SwapDetailsForm.tsx  |   4 +-
 .../sidebar/swap/panels/exchange/index.tsx    |   4 +-
 .../history/dialogs/ExchangeProgress.tsx      | 171 ++++++++++
 .../dialogs/TransactionDetails.tsx}           |   2 +-
 .../sidebar/swap/panels/history/index.tsx     | 303 ++++++++++--------
 9 files changed, 354 insertions(+), 282 deletions(-)
 delete mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/exchangeProgress.tsx
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx
 rename cysync/src/pages/mainApp/sidebar/swap/panels/{dialogs/transactionDetails.tsx => history/dialogs/TransactionDetails.tsx} (96%)

diff --git a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
index e26b4f17..9f29d670 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
@@ -31,7 +31,7 @@ function TabPanel(props: TabPanelProps) {
 }
 
 export default function HorizontalTabs() {
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(1);
 
   const { allWallets, isLoading: isWalletLoading } = useWallets();
 
diff --git a/cysync/src/pages/mainApp/sidebar/swap/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/index.tsx
index 23b95dfc..d28080cc 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/index.tsx
@@ -3,11 +3,6 @@ import { styled, useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 
-// import VerifyDialog from './dialogs/verifyDialog';
-// import PendingOperation from './dialogs/pendingOperation';
-// import Received from './dialogs/received';
-// import ExchangeProgress from './dialogs/exchangeProgress';
-// import TransactionDetails from './dialogs/transactionDetails';
 import HorizontalTabs from './HorizontalTabs';
 
 const PREFIX = 'Swap';
@@ -50,11 +45,6 @@ const Swap = () => {
         </Typography>
       </Grid>
       <HorizontalTabs />
-      {/* <VerifyDialog /> */}
-      {/* <PendingOperation /> */}
-      {/* <Received /> */}
-      {/* <ExchangeProgress /> */}
-      {/* <TransactionDetails /> */}
     </Root>
   );
 };
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/exchangeProgress.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/exchangeProgress.tsx
deleted file mode 100644
index 93f19fee..00000000
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/exchangeProgress.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-// import { CallReceived, ContentCopy } from '@mui/icons-material';
-import DownloadIcon from '@mui/icons-material/Download';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import LoadingIcon from '@mui/icons-material/Loop';
-import { Grid, Link, Typography } from '@mui/material';
-import CircularProgress from '@mui/material/CircularProgress';
-import LinearProgress from '@mui/material/LinearProgress';
-import withStyles from '@mui/styles/withStyles';
-import { Box } from '@mui/system';
-import React from 'react';
-
-import CustomDialog from '../../../../../../designSystem/designComponents/dialog/dialogBox';
-import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
-
-const CustomLinearProgress = withStyles(() => ({
-  root: {
-    height: 8,
-    borderRadius: 5
-  }
-}))(LinearProgress);
-
-const exchangeProgressContent = () => {
-  return (
-    <Box
-      display="flex"
-      justifyContent={'center'}
-      margin={'70px 70px 50px 70px'}
-    >
-      <Grid container width={'570px'} spacing={'20px'}>
-        <Grid item xs={12}>
-          <Typography variant="h5" sx={{ color: 'secondary.dark' }}>
-            Exchange
-          </Typography>
-          <CustomLinearProgress
-            variant="determinate"
-            value={50}
-            style={{ width: '100%' }}
-            color="secondary"
-          />
-        </Grid>
-        <Grid item xs={12}>
-          <Grid container spacing={3}>
-            <Grid item xs={12} display="flex" gap={1}>
-              <CircularProgress
-                color="success"
-                size={30}
-                sx={{ marginLeft: '15px', marginRight: '15px' }}
-              />
-              <div>
-                <Typography variant="h6" color="textPrimary">
-                  Confirmation in progress
-                </Typography>
-                <Typography variant="body2" color="textSecondary">
-                  Once USDC is confirmed in the blockchain. we'll start
-                  exchanging it in ETH.
-                </Typography>
-                <Box display="flex" alignItems="center" padding={0}>
-                  <Typography variant="body2">
-                    <Link
-                      href="#"
-                      color="secondary"
-                      underline="hover"
-                      padding={1}
-                    >
-                      See input hash in explorer
-                    </Link>
-                  </Typography>
-                  <HelpOutlineIcon
-                    sx={{
-                      color: 'textSecondary',
-                      height: '18px',
-                      width: '18px'
-                    }}
-                  />
-                </Box>
-              </div>
-            </Grid>
-            <Grid item xs={12} display="flex" gap={1}>
-              <Icon
-                iconGroup={<LoadingIcon />}
-                size={40}
-                viewBox="0 0 30 30"
-                color="secondary"
-              />
-              <div>
-                <Typography variant="h6" color="textPrimary">
-                  Exchanging USDC to ETH
-                </Typography>
-                <Typography variant="body2" color="textSecondary">
-                  The process will take a few minutes. Please wait.
-                </Typography>
-              </div>
-            </Grid>
-            <Grid item xs={12} display="flex" gap={1}>
-              <Icon
-                iconGroup={<DownloadIcon />}
-                size={70}
-                viewBox="0 0 30 30"
-                color="secondary"
-              />
-              <div>
-                <Typography variant="h6" color="textPrimary">
-                  Sending funds to your wallet
-                </Typography>
-                <Typography variant="body2" color="textSecondary">
-                  Once the transaction is completed, your ETH will be sent to
-                  your crypto wallet. Typically, it takes a few minutes for your
-                  funds to show up.
-                </Typography>
-              </div>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};
-
-export default function exchangeProgress() {
-  const [isOpen, setIsOpen] = React.useState(true);
-
-  const onClose = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <CustomDialog
-      maxWidth={'lg'}
-      open={isOpen}
-      handleClose={onClose}
-      isClosePresent={false}
-      disableEscapeKeyDown
-      restComponents={exchangeProgressContent()}
-    />
-  );
-}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
index f9742179..1a30847f 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
@@ -6,7 +6,7 @@ import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
 import Changelly from '../../../../../../designSystem/iconGroups/changelly';
 import formatDisplayAmount from '../../../../../../utils/formatDisplayAmount';
 
-type feeDetailsProps = {
+type FeeDetailsProps = {
   fromToken: string;
   toToken: string;
   fees: string;
@@ -15,7 +15,7 @@ type feeDetailsProps = {
   price: number;
 };
 
-const NetworkFeeDetails: React.FC<feeDetailsProps> = ({
+const NetworkFeeDetails: React.FC<FeeDetailsProps> = ({
   fromToken,
   toToken,
   fees,
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
index 3faeb49c..91c93f5c 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
@@ -21,7 +21,7 @@ import Input from '../../../../../../designSystem/designComponents/input/input';
 import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcons';
 import { DisplayCoin } from '../../../../../../store/hooks';
 
-type swapDetailsFormProps = {
+type SwapDetailsFormProps = {
   fromToken: DisplayCoin;
   setFromToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
   toToken: DisplayCoin;
@@ -35,7 +35,7 @@ type swapDetailsFormProps = {
   classesForm: string;
 };
 
-const SwapDetailsForm: React.FC<swapDetailsFormProps> = ({
+const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
   fromToken,
   setFromToken,
   toToken,
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
index c12d6335..15d76222 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -51,12 +51,12 @@ const Root = styled('div')(({ theme }) => ({
   }
 }));
 
-type exchangePanelProps = {
+type ExchangePanelProps = {
   coinData: DisplayCoin[];
   currentWalletDetails: Wallet;
 };
 
-const ExchangePanel: React.FC<exchangePanelProps> = ({
+const ExchangePanel: React.FC<ExchangePanelProps> = ({
   coinData,
   currentWalletDetails
 }) => {
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx
new file mode 100644
index 00000000..13cf345c
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx
@@ -0,0 +1,171 @@
+// import { CallReceived, ContentCopy } from '@mui/icons-material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import DownloadIcon from '@mui/icons-material/Download';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import LoadingIcon from '@mui/icons-material/Loop';
+import { Grid, Link, Typography } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import LinearProgress from '@mui/material/LinearProgress';
+import withStyles from '@mui/styles/withStyles';
+import { Box } from '@mui/system';
+import React, { useEffect, useState } from 'react';
+
+import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
+
+const CustomLinearProgress = withStyles(() => ({
+  root: {
+    height: 8,
+    borderRadius: 5
+  }
+}))(LinearProgress);
+
+const steps = [
+  {
+    icon: <CheckCircleIcon fontSize="inherit" />,
+    title: 'Confirmation in progress',
+    component: (
+      <>
+        <Typography variant="body2" color="textSecondary">
+          Once USDC is confirmed in the blockchain. we'll start exchanging it in
+          ETH.
+        </Typography>
+        <Box display="flex" alignItems="center" padding={0}>
+          <Typography variant="body2">
+            <Link href="#" color="secondary" underline="hover" padding={1}>
+              See input hash in explorer
+            </Link>
+          </Typography>
+          <HelpOutlineIcon
+            sx={{
+              color: 'textSecondary',
+              height: '18px',
+              width: '18px'
+            }}
+          />
+        </Box>
+      </>
+    )
+  },
+  {
+    icon: <LoadingIcon fontSize="inherit" />,
+    title: 'Exchanging USDC to ETH',
+    component: (
+      <>
+        <Typography variant="body2" color="textSecondary">
+          The process will take a few minutes. Please wait.
+        </Typography>
+      </>
+    )
+  },
+  {
+    icon: <DownloadIcon fontSize="inherit" />,
+    title: 'Sending funds to your wallet',
+    component: (
+      <>
+        <Typography variant="body2" color="textSecondary">
+          Once the transaction is completed, your ETH will be sent to your
+          crypto wallet. Typically, it takes a few minutes for your funds to
+          show up.
+        </Typography>
+      </>
+    )
+  }
+];
+
+const getExchangeProgressContent = (currrentStatus: number): JSX.Element => {
+  const [progress, setProgress] = useState(0);
+  const totalStatus = steps.length;
+
+  useEffect(() => {
+    setProgress(+((currrentStatus / totalStatus) * 100).toFixed(0));
+  }, [currrentStatus]);
+
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      margin={'70px 70px 50px 70px'}
+    >
+      <Grid container width={'570px'} spacing={'20px'}>
+        <Grid item xs={12}>
+          <Typography variant="h5" sx={{ color: 'secondary.dark' }}>
+            Exchange
+          </Typography>
+          <CustomLinearProgress
+            variant="determinate"
+            value={+progress}
+            style={{ width: '100%' }}
+            color="secondary"
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container spacing={3}>
+            {steps.map((step, index) => (
+              <Grid
+                item
+                xs={12}
+                display="flex"
+                gap={1}
+                key={`exchangeProgess-${index}`}
+              >
+                <Typography
+                  variant="h1"
+                  color={
+                    index <= currrentStatus ? 'textPrimary' : 'textSecondary'
+                  }
+                  display="flex"
+                  alignItems="center"
+                >
+                  {index === currrentStatus ? (
+                    <CircularProgress
+                      color="success"
+                      size={30}
+                      sx={{ marginLeft: '6px', marginRight: '4px' }}
+                    />
+                  ) : (
+                    { ...step.icon }
+                  )}
+                </Typography>
+                <Box>
+                  <Typography
+                    variant="h6"
+                    color={
+                      index <= currrentStatus ? 'textPrimary' : 'textSecondary'
+                    }
+                  >
+                    {step.title}
+                  </Typography>
+                  {step.component}
+                </Box>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+type ExchangeProgressProps = {
+  open: boolean;
+  onClose: () => void;
+  progress: number;
+};
+
+const ExchangeProgress: React.FC<ExchangeProgressProps> = ({
+  open,
+  onClose,
+  progress
+}) => {
+  return (
+    <CustomDialog
+      maxWidth={'lg'}
+      open={open}
+      handleClose={onClose}
+      isClosePresent={true}
+      restComponents={getExchangeProgressContent(progress)}
+    />
+  );
+};
+
+export default ExchangeProgress;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/transactionDetails.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/TransactionDetails.tsx
similarity index 96%
rename from cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/transactionDetails.tsx
rename to cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/TransactionDetails.tsx
index a0e128fb..77cd639c 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/transactionDetails.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/TransactionDetails.tsx
@@ -3,7 +3,7 @@ import { Divider, Grid, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import React from 'react';
 
-import CustomDialog from '../../../../../../designSystem/designComponents/dialog/dialogBox';
+import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
 
 const transactionDetailsContent = () => {
   return (
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
index 4e8b52e4..559eb603 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
@@ -2,7 +2,7 @@ import { COINS } from '@cypherock/communication';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { Grid, Typography } from '@mui/material';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
 import colors from '../../../../../../designSystem/designConstants/colors';
@@ -11,6 +11,8 @@ import Download from '../../../../../../designSystem/iconGroups/download';
 import Swap from '../../../../../../designSystem/iconGroups/swap';
 import { useExchange } from '../../../../../../store/hooks';
 
+import ExchangeProgress from './dialogs/ExchangeProgress';
+
 type HistoryItem = {
   date: string;
   txns: Array<{
@@ -31,12 +33,15 @@ type historyPanelProps = {
 const HistoryPanel: React.FC<historyPanelProps> = ({ walletId }) => {
   const { getSwapTransactions } = useExchange();
 
-  const [historyItems, setHistoryItems] = React.useState<HistoryItem[]>([]);
+  const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
+  const [transactionProgress, setTransactionProgress] = useState(0);
+  const [isExchangeProgressOpen, setIsExchangeProgressOpen] =
+    useState<boolean>(false);
 
   useEffect(() => {
     const getTransactions = async () => {
       const transactions = await getSwapTransactions(walletId);
-      /* tslint:disable-next-line */
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       transactions.forEach((transaction: any) => {
         const createdAt = new Date(transaction.createdAt * 1000);
         const date = createdAt.toLocaleDateString();
@@ -74,157 +79,199 @@ const HistoryPanel: React.FC<historyPanelProps> = ({ walletId }) => {
         });
       });
     };
-    getTransactions();
-  }, []);
+    if (walletId) getTransactions();
+  }, [walletId]);
 
   return (
-    <Grid container>
-      <Grid item xs={12}>
-        <Typography
-          variant="body1"
-          sx={{ color: 'secondary.dark' }}
-          textAlign={'right'}
+    <>
+      <Grid container>
+        <Grid item xs={12}>
+          <Typography
+            variant="body1"
+            sx={{ color: 'secondary.dark' }}
+            textAlign={'right'}
+          >
+            <Download />
+            &nbsp; Export operations
+          </Typography>
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          sx={{
+            marginTop: '13px',
+            padding: '12px 0px 12px 12px',
+            alignItems: 'center',
+            background: '#1C1F22',
+            display: 'flex'
+          }}
         >
-          <Download />
-          &nbsp; Export operations
-        </Typography>
-      </Grid>
-      <Grid
-        item
-        xs={12}
-        sx={{
-          marginTop: '13px',
-          padding: '12px 0px 12px 12px',
-          alignItems: 'center',
-          background: '#1C1F22',
-          display: 'flex'
-        }}
-      >
-        <Icon
-          size={20}
-          viewBox="0 0 30 30"
-          iconGroup={<InfoOutlinedIcon color="secondary" />}
-        />
-        <Typography variant="body1" sx={{ color: 'secondary.dark' }}>
-          Your swap desktop transactions are not synchronized with the Ledger
-          Live mobile application
-        </Typography>
-      </Grid>
-      <Grid item xs={12}>
-        <Grid container marginTop={'40px'}>
-          {historyItems.map((item, index) => (
-            <Grid item xs={12} key={index} marginTop={'20px'}>
-              <Typography variant="body1" color="textSecondary">
-                {item.date}
-              </Typography>
-              {item.txns.map(txn => (
-                <Grid key={txn.id} item xs={12} marginTop={'20px'}>
+          <Icon
+            size={20}
+            viewBox="0 0 30 30"
+            iconGroup={<InfoOutlinedIcon color="secondary" />}
+          />
+          <Typography variant="body1" sx={{ color: 'secondary.dark' }}>
+            Your swap desktop transactions are not synchronized with the Ledger
+            Live mobile application
+          </Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid
+            container
+            marginTop={'40px'}
+            sx={{ maxHeight: '45vh', overflow: 'auto' }}
+          >
+            {historyItems.map((item, index) => (
+              <Grid
+                item
+                xs={12}
+                key={index}
+                marginTop={'20px'}
+                sx={{ cursor: 'pointer' }}
+              >
+                <Typography variant="body1" color="textSecondary">
+                  {item.date}
+                </Typography>
+                {item.txns.map(txn => (
                   <Grid
-                    container
-                    display={'flex'}
-                    justifyContent="space-around"
-                    sx={{
-                      border: '0.5px solid #433F3B',
-                      borderRadius: '10px',
-                      padding: '9px 17px 8px'
+                    key={txn.id}
+                    item
+                    xs={12}
+                    marginTop={'20px'}
+                    onClick={() => {
+                      // Possible Changelly status from:
+                      // https://github.com/changelly/api-changelly#getting-exchange-status
+                      switch (txn.status) {
+                        case 'finished':
+                          setTransactionProgress(2);
+                          break;
+                        case 'sending' || 'exchanging':
+                          setTransactionProgress(3);
+                          break;
+                        default:
+                          setTransactionProgress(0);
+                      }
+                      setIsExchangeProgressOpen(true);
                     }}
                   >
                     <Grid
-                      item
-                      xs={3}
-                      display="flex"
-                      alignContent={'center'}
-                      alignItems={'center'}
-                    >
-                      <Icon
-                        size={20}
-                        viewBox="0 0 16 15"
-                        iconGroup={<Swap color={colors.text.secondary} />}
-                      />
-                      <Grid item>
-                        <Typography variant="body1" color="textPrimary">
-                          Changelly
-                        </Typography>
-                        <Typography variant="body2" color="textSecondary">
-                          {txn.time}
-                        </Typography>
-                      </Grid>
-                    </Grid>
-                    <Grid
-                      item
-                      xs={6}
-                      display="flex"
-                      alignContent={'center'}
-                      alignItems={'center'}
+                      container
+                      display={'flex'}
+                      justifyContent="space-around"
+                      sx={{
+                        border: '0.5px solid #433F3B',
+                        borderRadius: '10px',
+                        padding: '9px 17px 8px'
+                      }}
                     >
                       <Grid
-                        container
-                        display={'flex'}
-                        justifyContent={'space-around'}
+                        item
+                        xs={3}
+                        display="flex"
+                        alignContent={'center'}
+                        alignItems={'center'}
                       >
-                        <Grid
-                          item
-                          display={'flex'}
-                          alignContent={'center'}
-                          alignItems={'center'}
-                        >
-                          <CoinIcons
-                            initial={txn.fromToken.toUpperCase()}
-                            style={{ marginRight: '10px' }}
-                          />
+                        <Icon
+                          size={20}
+                          viewBox="0 0 16 15"
+                          iconGroup={<Swap color={colors.text.secondary} />}
+                        />
+                        <Grid item>
                           <Typography variant="body1" color="textPrimary">
-                            {COINS[txn.fromToken]?.name}
+                            Changelly
+                          </Typography>
+                          <Typography variant="body2" color="textSecondary">
+                            {txn.time}
                           </Typography>
                         </Grid>
+                      </Grid>
+                      <Grid
+                        item
+                        xs={6}
+                        display="flex"
+                        alignContent={'center'}
+                        alignItems={'center'}
+                      >
                         <Grid
-                          item
+                          container
                           display={'flex'}
-                          alignContent={'center'}
-                          alignItems={'center'}
-                          marginLeft={'5px'}
+                          justifyContent={'space-around'}
                         >
-                          <ArrowForwardIcon sx={{ color: 'text.secondary' }} />
+                          <Grid
+                            item
+                            display={'flex'}
+                            alignContent={'center'}
+                            alignItems={'center'}
+                          >
+                            <CoinIcons
+                              initial={txn.fromToken.toUpperCase()}
+                              style={{ marginRight: '10px' }}
+                            />
+                            <Typography variant="body1" color="textPrimary">
+                              {COINS[txn.fromToken]?.name}
+                            </Typography>
+                          </Grid>
+                          <Grid
+                            item
+                            display={'flex'}
+                            alignContent={'center'}
+                            alignItems={'center'}
+                            marginLeft={'5px'}
+                          >
+                            <ArrowForwardIcon
+                              sx={{ color: 'text.secondary' }}
+                            />
+                          </Grid>
+                          <Grid
+                            item
+                            display={'flex'}
+                            alignContent={'center'}
+                            alignItems={'center'}
+                          >
+                            <CoinIcons
+                              initial={txn.toToken.toUpperCase()}
+                              style={{ marginRight: '10px' }}
+                            />
+                            <Typography variant="body1" color="textPrimary">
+                              {COINS[txn.toToken]?.name}
+                            </Typography>
+                          </Grid>
                         </Grid>
+                      </Grid>
+                      <Grid item xs={3}>
                         <Grid
-                          item
+                          container
                           display={'flex'}
-                          alignContent={'center'}
-                          alignItems={'center'}
+                          justifyContent={'flex-end'}
                         >
-                          <CoinIcons
-                            initial={txn.toToken.toUpperCase()}
-                            style={{ marginRight: '10px' }}
-                          />
-                          <Typography variant="body1" color="textPrimary">
-                            {COINS[txn.toToken]?.name}
-                          </Typography>
-                        </Grid>
-                      </Grid>
-                    </Grid>
-                    <Grid item xs={3}>
-                      <Grid
-                        container
-                        display={'flex'}
-                        justifyContent={'flex-end'}
-                      >
-                        <Grid item textAlign={'right'}>
-                          <Typography variant="body1" sx={{ color: '#16953A' }}>
-                            +{txn.amount}
-                          </Typography>
-                          <Typography variant="body2" color="textSecondary">
-                            -{txn.fees} {txn.fromToken.toUpperCase()}
-                          </Typography>
+                          <Grid item textAlign={'right'}>
+                            <Typography
+                              variant="body1"
+                              sx={{ color: '#16953A' }}
+                            >
+                              +{txn.amount}
+                            </Typography>
+                            <Typography variant="body2" color="textSecondary">
+                              -{txn.fees} {txn.fromToken.toUpperCase()}
+                            </Typography>
+                          </Grid>
                         </Grid>
                       </Grid>
                     </Grid>
                   </Grid>
-                </Grid>
-              ))}
-            </Grid>
-          ))}
+                ))}
+              </Grid>
+            ))}
+          </Grid>
         </Grid>
       </Grid>
-    </Grid>
+      <ExchangeProgress
+        open={isExchangeProgressOpen}
+        onClose={() => setIsExchangeProgressOpen(false)}
+        progress={transactionProgress}
+      />
+    </>
   );
 };
 

From 7d9f458477b8f81d3dd5457a56719bbd97352223 Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Fri, 4 Nov 2022 23:49:41 +0530
Subject: [PATCH 04/13] feat: added wallet selected chips on the exchange UI
 panel

---
 .../mainApp/sidebar/swap/HorizontalTabs.tsx   |  7 +--
 .../swap/panels/exchange/SwapDetailsForm.tsx  | 43 +++++++++++++++++--
 .../sidebar/swap/panels/exchange/index.tsx    |  9 +++-
 3 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
index 9f29d670..c2fbc37b 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
@@ -31,9 +31,10 @@ function TabPanel(props: TabPanelProps) {
 }
 
 export default function HorizontalTabs() {
-  const [value, setValue] = useState(1);
+  const [value, setValue] = useState(0);
 
   const { allWallets, isLoading: isWalletLoading } = useWallets();
+  const { coinData, setCurrentWalletId, currentWalletId } = useWalletData();
 
   // By default selecting the first wallet
   useEffect(() => {
@@ -42,8 +43,6 @@ export default function HorizontalTabs() {
     }
   }, [isWalletLoading, allWallets]);
 
-  const { coinData, setCurrentWalletId, currentWalletId } = useWalletData();
-
   // TODO: Remove hardcoded wallet id with the selected wallet id
 
   const [currentWalletDetails, setCurrentWalletDetails] =
@@ -79,6 +78,8 @@ export default function HorizontalTabs() {
         <ExchangePanel
           coinData={coinData}
           currentWalletDetails={currentWalletDetails}
+          allWallets={allWallets}
+          setCurrentWalletId={setCurrentWalletId}
         />
       </TabPanel>
       <TabPanel value={value} index={1}>
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
index 91c93f5c..123a13c4 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
@@ -1,6 +1,8 @@
 import { COINS } from '@cypherock/communication';
 import { SwapVerticalCircle } from '@mui/icons-material';
 import {
+  Box,
+  Chip,
   //   Autocomplete,
   FormControl,
   Grid,
@@ -9,6 +11,7 @@ import {
   MenuItem,
   Select,
   SelectChangeEvent,
+  Tooltip,
   Typography
   //   Box,
   //   TextField
@@ -19,8 +22,16 @@ import SwitchButton from '../../../../../../designSystem/designComponents/button
 import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
 import Input from '../../../../../../designSystem/designComponents/input/input';
 import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcons';
+import { Wallet } from '../../../../../../store/database';
 import { DisplayCoin } from '../../../../../../store/hooks';
 
+const trimString = (str: string, length: number) => {
+  if (str.length > length) {
+    return str.substring(0, length - 3) + '...';
+  }
+  return str;
+};
+
 type SwapDetailsFormProps = {
   fromToken: DisplayCoin;
   setFromToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
@@ -33,6 +44,9 @@ type SwapDetailsFormProps = {
   ) => void;
   setAmountToSend: React.Dispatch<React.SetStateAction<string>>;
   classesForm: string;
+  allWallets: Wallet[];
+  setCurrentWalletId: React.Dispatch<React.SetStateAction<string>>;
+  currentWalletId: string;
 };
 
 const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
@@ -44,7 +58,10 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
   amountToSend,
   setAmountToSend,
   handleChangeAmountToSend,
-  classesForm
+  classesForm,
+  allWallets,
+  setCurrentWalletId,
+  currentWalletId
 }) => {
   const [isAmountToSendMax, setIsAmountToSendMax] = useState(false);
   const [fromTokenIndex, setFromTokenIndex] = useState('');
@@ -63,9 +80,27 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
     <>
       <Grid container spacing={2}>
         <Grid item xs={6}>
-          <Typography variant="h6" color="textSecondary">
-            From
-          </Typography>
+          <Box display="flex" gap={1}>
+            <Typography variant="h6" color="textSecondary">
+              From
+            </Typography>
+            {allWallets.map(wallet => (
+              <Tooltip title={wallet.name} key={wallet._id}>
+                <Chip
+                  sx={{ fontSize: '10px', width: '50px' }}
+                  size="small"
+                  color="secondary"
+                  variant={
+                    currentWalletId === wallet._id ? 'filled' : 'outlined'
+                  }
+                  label={trimString(wallet.name, 6)}
+                  onClick={() => {
+                    setCurrentWalletId(wallet._id);
+                  }}
+                />
+              </Tooltip>
+            ))}
+          </Box>
           <FormControl fullWidth className={classesForm}>
             <InputLabel id="select-source-helper-label" shrink={false}>
               {fromToken ? '' : 'Select Source'}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
index 15d76222..a0634ff8 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -54,11 +54,15 @@ const Root = styled('div')(({ theme }) => ({
 type ExchangePanelProps = {
   coinData: DisplayCoin[];
   currentWalletDetails: Wallet;
+  allWallets: Wallet[];
+  setCurrentWalletId: React.Dispatch<React.SetStateAction<string>>;
 };
 
 const ExchangePanel: React.FC<ExchangePanelProps> = ({
   coinData,
-  currentWalletDetails
+  currentWalletDetails,
+  allWallets,
+  setCurrentWalletId
 }) => {
   const {
     fromToken,
@@ -193,6 +197,9 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
           setAmountToSend={setAmountToSend}
           handleChangeAmountToSend={handleChangeAmountToSend}
           classesForm={classes.form}
+          allWallets={allWallets}
+          setCurrentWalletId={setCurrentWalletId}
+          currentWalletId={currentWalletDetails?._id}
         />
       }
       {amountToReceive && (

From 122270be7984c590ae3e0174d02afb1c9493aa7e Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Sat, 5 Nov 2022 14:26:49 +0530
Subject: [PATCH 05/13] feat: added a pane to verify send address before send
 flow starts

---
 .../dialogs/VerifySendAddressDialog.tsx       |  74 ++++++
 .../dialogs/VerifySwapDetailsDialog.tsx       | 211 ++++++++++++------
 .../sidebar/swap/panels/exchange/index.tsx    |  43 +++-
 3 files changed, 255 insertions(+), 73 deletions(-)
 create mode 100644 cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx

diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx
new file mode 100644
index 00000000..404e511d
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx
@@ -0,0 +1,74 @@
+import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Box, Typography } from '@mui/material';
+import { shell } from 'electron';
+import React from 'react';
+
+import Button from '../../../../../../../designSystem/designComponents/buttons/button';
+import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
+
+const getVerifySendAddressDialogContent = (
+  url: string,
+  onClose: () => void
+): JSX.Element => {
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      padding={'70px 70px 50px 70px'}
+    >
+      <Box
+        width={'400px'}
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+      >
+        <CheckCircleOutlinedIcon color="secondary" fontSize="large" />
+        <Typography variant="h4" sx={{ color: 'secondary.dark' }}>
+          Verify Send Address
+        </Typography>
+        <Typography variant="body2" color="textSecondary" marginTop={'10px'}>
+          Visit the changelly website to verify the address you are sending to.
+        </Typography>
+        <Button
+          onClick={() => {
+            shell.openExternal(url);
+            onClose();
+          }}
+          sx={{ marginTop: '20px' }}
+        >
+          <Typography
+            variant="body1"
+            color="textPrimary"
+            sx={{ padding: '5px 10px' }}
+          >
+            Visit Website <OpenInNewIcon fontSize="inherit" />
+          </Typography>
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+type VerifySendAddressDialogProps = {
+  open: boolean;
+  onClose: () => void;
+  url: string;
+};
+
+const VerifySendAddressDialog: React.FC<VerifySendAddressDialogProps> = ({
+  open,
+  onClose,
+  url
+}): JSX.Element => {
+  return (
+    <CustomDialog
+      open={open}
+      handleClose={onClose}
+      isClosePresent={true}
+      restComponents={getVerifySendAddressDialogContent(url, onClose)}
+    />
+  );
+};
+
+export default VerifySendAddressDialog;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
index e2f38314..95d2c6b5 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
@@ -20,13 +20,74 @@ const rotateKeyframe = keyframes`
   }
 `;
 
-enum VerificationStatus {
-  Pending,
-  PinEntered,
-  ReceivingAddressVerified,
-  SendingAddressVerified
+enum ReceiveFlowSteps {
+  EnterPinAndTapCard,
+  VerifyReceiveAddress,
+  Completed
 }
 
+const receiveFlowStepsMessages: {
+  [key in ReceiveFlowSteps]: string;
+} = {
+  [ReceiveFlowSteps.EnterPinAndTapCard]: 'Pin entered and card tapped',
+  [ReceiveFlowSteps.VerifyReceiveAddress]: 'Receive address verified',
+  [ReceiveFlowSteps.Completed]: 'Receive flow completed'
+};
+
+enum SendFlowSteps {
+  Waiting,
+  VerifySendAddress,
+  EnterPin,
+  TapCard,
+  SignTransaction,
+  Completed
+}
+
+const sendFlowStepsMessages: {
+  [key in SendFlowSteps]: string;
+} = {
+  [SendFlowSteps.Waiting]: 'Waiting for receive flow',
+  [SendFlowSteps.VerifySendAddress]: 'Verify sending address',
+  [SendFlowSteps.EnterPin]: 'Pin entered',
+  [SendFlowSteps.TapCard]: 'Card tapped',
+  [SendFlowSteps.SignTransaction]: 'Signing transaction',
+  [SendFlowSteps.Completed]: 'Send flow completed'
+};
+
+function getFlowSteps<Type extends number>(
+  currentStep: Type,
+  lastStep: Type,
+  messages: {
+    [key in Type]: string;
+  }
+): JSX.Element {
+  return (
+    <Box>
+      <Typography
+        variant="body1"
+        color="textPrimary"
+        marginTop="20px"
+        display={'flex'}
+        alignItems={'center'}
+        gap={1}
+      >
+        {currentStep === lastStep ? (
+          <CheckCircleOutlineIcon color="success" />
+        ) : (
+          <LoadingIcon
+            sx={{
+              animation: `${rotateKeyframe} 1500ms linear infinite`
+            }}
+          />
+        )}
+        {messages[currentStep]}
+      </Typography>
+    </Box>
+  );
+}
+
+// enum SendFlowSteps {}
+
 type VerifySwapDetailsDialogProps = {
   open: boolean;
   onClose: () => void;
@@ -37,8 +98,12 @@ type VerifySwapDetailsDialogProps = {
   sourceCoinName: string;
   targetCoinSlug: string;
   targetCoinName: string;
-  cardTapped: boolean;
+  receiveFlowCardTapped: boolean;
   receiveAddressVerified: boolean;
+  receiveAddress: string;
+  sendAddressVerified: boolean;
+  sendFlowPinEntered: boolean;
+  sendFlowCardTapped: boolean;
 };
 
 const VerifySwapDetailsDialog: React.FC<VerifySwapDetailsDialogProps> = ({
@@ -51,36 +116,51 @@ const VerifySwapDetailsDialog: React.FC<VerifySwapDetailsDialogProps> = ({
   sourceCoinName,
   targetCoinSlug,
   targetCoinName,
-  cardTapped,
-  receiveAddressVerified
+  receiveFlowCardTapped,
+  receiveAddressVerified,
+  receiveAddress,
+  sendAddressVerified,
+  sendFlowPinEntered,
+  sendFlowCardTapped
 }) => {
-  const [status, setStatus] = useState<VerificationStatus>(
-    VerificationStatus.Pending
+  const [receiveFlowStep, setReceiveFlowStep] = useState<ReceiveFlowSteps>(
+    ReceiveFlowSteps.EnterPinAndTapCard
+  );
+
+  const [sendFlowStep, setSendFlowStep] = useState<SendFlowSteps>(
+    SendFlowSteps.Waiting
   );
 
   useEffect(() => {
-    if (cardTapped) {
-      setStatus(VerificationStatus.PinEntered);
+    if (receiveFlowCardTapped) {
+      setReceiveFlowStep(ReceiveFlowSteps.VerifyReceiveAddress);
     }
-  }, [cardTapped]);
+  }, [receiveFlowCardTapped]);
 
   useEffect(() => {
     if (receiveAddressVerified) {
-      setStatus(VerificationStatus.ReceivingAddressVerified);
+      setReceiveFlowStep(ReceiveFlowSteps.Completed);
+      setSendFlowStep(SendFlowSteps.VerifySendAddress);
     }
   }, [receiveAddressVerified]);
 
-  const getStatusIcon = (currentStage: VerificationStatus) => {
-    return currentStage <= status ? (
-      <CheckCircleOutlineIcon color="success" />
-    ) : (
-      <LoadingIcon
-        sx={{
-          animation: `${rotateKeyframe} 1500ms linear infinite`
-        }}
-      />
-    );
-  };
+  useEffect(() => {
+    if (sendAddressVerified) {
+      setSendFlowStep(SendFlowSteps.EnterPin);
+    }
+  }, [sendAddressVerified]);
+
+  useEffect(() => {
+    if (sendFlowPinEntered) {
+      setSendFlowStep(SendFlowSteps.TapCard);
+    }
+  }, [sendFlowPinEntered]);
+
+  useEffect(() => {
+    if (sendFlowCardTapped) {
+      setSendFlowStep(SendFlowSteps.SignTransaction);
+    }
+  }, [sendFlowCardTapped]);
 
   const getVerifySwapDetailsDialogContent = () => {
     return (
@@ -211,53 +291,54 @@ const VerifySwapDetailsDialog: React.FC<VerifySwapDetailsDialogProps> = ({
                 {targetCoinName}
               </Typography>
             </Grid>
+            {receiveAddress && (
+              <Grid
+                item
+                xs={12}
+                display="flex"
+                justifyContent={'space-between'}
+                marginTop="20px"
+              >
+                <Typography variant="body1" color="textSecondary">
+                  Receiving address
+                </Typography>
+                <Typography
+                  variant="body1"
+                  color="textPrimary"
+                  display={'flex'}
+                  alignItems={'center'}
+                  gap={1}
+                >
+                  {receiveAddress}
+                </Typography>
+              </Grid>
+            )}
           </Grid>
-          <Typography
-            variant="body1"
-            color="textPrimary"
-            marginTop="20px"
-            display={'flex'}
-            alignItems={'center'}
-            gap={1}
-          >
-            {getStatusIcon(VerificationStatus.PinEntered)}
-            Pin entered and tapped a card
-          </Typography>
-          <Typography
-            variant="body1"
-            color="textPrimary"
-            marginTop="20px"
-            display={'flex'}
-            alignItems={'center'}
-            gap={1}
-          >
-            {getStatusIcon(VerificationStatus.ReceivingAddressVerified)}
-            Receiving address checked
-          </Typography>
-          <Typography
-            variant="body1"
-            color="textPrimary"
-            marginTop="20px"
-            display={'flex'}
-            alignItems={'center'}
-            gap={1}
-          >
-            {getStatusIcon(VerificationStatus.SendingAddressVerified)}
-            Checking sending address
-          </Typography>
+          {getFlowSteps<ReceiveFlowSteps>(
+            receiveFlowStep,
+            ReceiveFlowSteps.Completed,
+            receiveFlowStepsMessages
+          )}
+          {getFlowSteps<SendFlowSteps>(
+            sendFlowStep,
+            SendFlowSteps.Completed,
+            sendFlowStepsMessages
+          )}
         </Box>
       </Box>
     );
   };
 
   return (
-    <CustomDialog
-      open={open}
-      handleClose={onClose}
-      isClosePresent={true}
-      disableEscapeKeyDown
-      restComponents={getVerifySwapDetailsDialogContent()}
-    />
+    <>
+      <CustomDialog
+        open={open}
+        handleClose={onClose}
+        isClosePresent={true}
+        disableEscapeKeyDown
+        restComponents={getVerifySwapDetailsDialogContent()}
+      />
+    </>
   );
 };
 
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
index a0634ff8..d86c439b 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -17,6 +17,7 @@ import { useConnection } from '../../../../../../store/provider';
 import { RecipientData } from '../../../wallet/addAccount/formStepComponents/StepComponentProps';
 
 import SwapCompletedDialog from './dialogs/SwapCompletedDialog';
+import VerifySendAddressDialog from './dialogs/VerifySendAddressDialog';
 import VerifySwapDetailsDialog from './dialogs/VerifySwapDetailsDialog';
 import NetworkFeeDetails from './NetworkFeeDetails';
 import SwapDetailsForm from './SwapDetailsForm';
@@ -86,8 +87,16 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
   const { deviceConnection, deviceSdkVersion, setIsInFlow } = useConnection();
 
   const [isVerifySwapDetailsOpen, setIsVerifySwapDetailsOpen] = useState(false);
+  const [isVerifySendAddressDialogOpen, setIsVerifySendAddressDialogOpen] =
+    useState(false);
   const [isSwapCompleted, setIsSwapCompleted] = useState(false);
-  const [swapTransactionId, setSwapTransactionId] = useState('');
+  const [swapTransaction, setSwapTransaction] = useState<{
+    id: string;
+    payinAddress: string;
+  }>({
+    id: '',
+    payinAddress: ''
+  });
 
   const receiveTransaction = useReceiveTransaction();
   const sendTransaction = useSendTransaction();
@@ -113,15 +122,20 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
       });
   };
 
-  const startSendFlow = async () => {
+  const createChangellyTransaction = async () => {
     const sendDetails = await createSwapTransaction(
       receiveTransaction.receiveAddress,
       currentWalletDetails._id
     );
 
-    setSwapTransactionId(sendDetails.id);
+    setSwapTransaction(sendDetails);
+  };
 
-    logger.info('Swap Transaction: Changelly Transaction Created', sendDetails);
+  const startSendFlow = async () => {
+    logger.info(
+      'Swap Transaction: Changelly Transaction Created',
+      swapTransaction
+    );
 
     let customAccount: string | undefined;
 
@@ -135,7 +149,7 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
 
     const recipientData: RecipientData = {
       id: 0,
-      recipient: sendDetails.payinAddress,
+      recipient: swapTransaction.payinAddress,
       amount: amountToSend,
       errorRecipient: '',
       errorAmount: ''
@@ -173,7 +187,8 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
 
   useEffect(() => {
     if (receiveTransaction.verified) {
-      startSendFlow();
+      createChangellyTransaction();
+      setIsVerifySendAddressDialogOpen(true);
     }
   }, [receiveTransaction.verified]);
 
@@ -254,8 +269,12 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
           sourceCoinName={COINS[fromToken.slug]?.name}
           targetCoinSlug={toToken.slug.toUpperCase()}
           targetCoinName={COINS[toToken.slug]?.name}
-          cardTapped={receiveTransaction.cardTapped}
+          receiveFlowCardTapped={receiveTransaction.cardTapped}
           receiveAddressVerified={receiveTransaction.verified}
+          receiveAddress={receiveTransaction?.receiveAddress}
+          sendAddressVerified={sendTransaction.verified}
+          sendFlowPinEntered={sendTransaction.pinEntered}
+          sendFlowCardTapped={sendTransaction.cardsTapped}
         />
       )}
       {isSwapCompleted && (
@@ -265,9 +284,17 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
             setIsSwapCompleted(false);
           }}
           toTokenName={COINS[toToken.slug]?.name}
-          transactionId={swapTransactionId}
+          transactionId={swapTransaction.id}
         />
       )}
+      <VerifySendAddressDialog
+        open={isVerifySendAddressDialogOpen}
+        onClose={() => {
+          setIsVerifySendAddressDialogOpen(false);
+          startSendFlow();
+        }}
+        url={`https://changelly.com/track/${swapTransaction.id}`}
+      />
     </Root>
   );
 };

From 87d6a88ff2d9df811f2ed33c61585d5468817e57 Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Sun, 6 Nov 2022 22:01:34 +0530
Subject: [PATCH 06/13] refactor: shifted logic from component to hook

---
 .../mainApp/sidebar/swap/HorizontalTabs.tsx   |   2 +-
 .../panels/exchange/NetworkFeeDetails.tsx     |  45 ++--
 .../swap/panels/exchange/SwapDetailsForm.tsx  | 115 ++++-----
 .../exchange/dialogs/SwapCompletedDialog.tsx  |  10 +-
 .../dialogs/VerifySendAddressDialog.tsx       |  19 +-
 .../dialogs/VerifySwapDetailsDialog.tsx       |  94 ++-----
 .../sidebar/swap/panels/exchange/index.tsx    | 227 +++++------------
 .../history/dialogs/ExchangeProgress.tsx      |   8 +-
 .../history/dialogs/TransactionDetails.tsx    |   1 -
 .../sidebar/swap/panels/history/index.tsx     |  17 +-
 cysync/src/store/hooks/helper/FlowSteps.ts    |  14 +
 cysync/src/store/hooks/useExchange.ts         | 240 ++++++++++++++++--
 12 files changed, 451 insertions(+), 341 deletions(-)
 create mode 100644 cysync/src/store/hooks/helper/FlowSteps.ts

diff --git a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
index c2fbc37b..6c43efe7 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
@@ -83,7 +83,7 @@ export default function HorizontalTabs() {
         />
       </TabPanel>
       <TabPanel value={value} index={1}>
-        <HistoryPanel walletId={currentWalletId} />
+        <HistoryPanel currentWalletDetails={currentWalletDetails} />
       </TabPanel>
     </Box>
   );
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
index 1a30847f..b164ee9e 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
@@ -1,5 +1,6 @@
 import { InfoOutlined } from '@mui/icons-material';
 import { Divider, Grid, Link, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
@@ -113,23 +114,24 @@ const NetworkFeeDetails: React.FC<FeeDetailsProps> = ({
               borderRadius: '10px'
             }}
           >
-            <Grid
-              container
-              xs={5}
-              display={'flex'}
-              alignItems={'center'}
-              spacing={2}
-            >
-              <Grid item>
-                <Changelly />
-              </Grid>
-              <Grid item>
-                <Typography variant="body1" color="textPrimary">
-                  Changelly
-                </Typography>
-                <Typography variant="body2" color="textSecondary">
-                  No registration required
-                </Typography>
+            <Grid item xs={5}>
+              <Grid
+                container
+                display={'flex'}
+                alignItems={'center'}
+                spacing={2}
+              >
+                <Grid item>
+                  <Changelly />
+                </Grid>
+                <Grid item>
+                  <Typography variant="body1" color="textPrimary">
+                    Changelly
+                  </Typography>
+                  <Typography variant="body2" color="textSecondary">
+                    No registration required
+                  </Typography>
+                </Grid>
               </Grid>
             </Grid>
             <Grid item xs={4}>
@@ -169,4 +171,13 @@ const NetworkFeeDetails: React.FC<FeeDetailsProps> = ({
   );
 };
 
+NetworkFeeDetails.propTypes = {
+  fromToken: PropTypes.string.isRequired,
+  toToken: PropTypes.string.isRequired,
+  fees: PropTypes.string.isRequired,
+  exchangeRate: PropTypes.string.isRequired,
+  result: PropTypes.number.isRequired,
+  price: PropTypes.number.isRequired
+};
+
 export default NetworkFeeDetails;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
index 123a13c4..61c4f4d0 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
@@ -3,7 +3,6 @@ import { SwapVerticalCircle } from '@mui/icons-material';
 import {
   Box,
   Chip,
-  //   Autocomplete,
   FormControl,
   Grid,
   InputLabel,
@@ -13,9 +12,8 @@ import {
   SelectChangeEvent,
   Tooltip,
   Typography
-  //   Box,
-  //   TextField
 } from '@mui/material';
+import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 
 import SwitchButton from '../../../../../../designSystem/designComponents/buttons/switchButton';
@@ -47,6 +45,8 @@ type SwapDetailsFormProps = {
   allWallets: Wallet[];
   setCurrentWalletId: React.Dispatch<React.SetStateAction<string>>;
   currentWalletId: string;
+  amountToReceive: string;
+  price: number;
 };
 
 const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
@@ -61,7 +61,9 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
   classesForm,
   allWallets,
   setCurrentWalletId,
-  currentWalletId
+  currentWalletId,
+  amountToReceive,
+  price
 }) => {
   const [isAmountToSendMax, setIsAmountToSendMax] = useState(false);
   const [fromTokenIndex, setFromTokenIndex] = useState('');
@@ -111,60 +113,26 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
               variant="outlined"
               labelId="select-source-helper-label"
             >
-              {coinData.map((coin, index) => {
-                const coinSlugName = coin.slug.toUpperCase();
-                const coinName = COINS[coin.slug]?.name;
-                return (
-                  <MenuItem value={index} key={`from-${coin.slug}`}>
-                    <CoinIcons
-                      initial={coinSlugName}
-                      style={{ marginRight: '10px' }}
-                    />
-                    <ListItemText
-                      primary={coinName}
-                      secondary={`${coin.displayBalance} ${coinSlugName}`}
-                    />
-                  </MenuItem>
-                );
-              })}
+              {coinData
+                .filter(coin => coin.totalBalance !== '0')
+                .map((coin, index) => {
+                  const coinSlugName = coin.slug.toUpperCase();
+                  const coinName = COINS[coin.slug]?.name;
+                  return (
+                    <MenuItem value={index} key={`from-${coin.slug}`}>
+                      <CoinIcons
+                        initial={coinSlugName}
+                        style={{ marginRight: '10px' }}
+                      />
+                      <ListItemText
+                        primary={coinName}
+                        secondary={`${coin.displayBalance} ${coinSlugName}`}
+                      />
+                    </MenuItem>
+                  );
+                })}
             </Select>
           </FormControl>
-          {/* <Autocomplete
-            autoHighlight
-            value={fromToken}
-            onChange={(_event, newValue) => {
-              setFromToken(newValue as DisplayCoin);
-            }}
-            options={coinData}
-            getOptionLabel={(option: DisplayCoin) =>
-              COINS[option.slug]?.name || ''
-            }
-            renderOption={(props, option) => {
-              return (
-                <Box component={'li'} {...props}>
-                  <CoinIcons
-                    initial={option.slug.toUpperCase()}
-                    style={{ marginRight: '10px' }}
-                  />
-                  <ListItemText
-                    primary={COINS[option.slug]?.name}
-                    secondary={`${
-                      option.displayBalance
-                    } ${option.slug.toUpperCase()}`}
-                  />
-                </Box>
-              );
-            }}
-            renderInput={params => (
-              <TextField
-                {...params}
-                label=""
-                inputProps={{
-                  ...params.inputProps
-                }}
-              />
-            )}
-          /> */}
         </Grid>
         <Grid item xs={6}>
           <Grid container>
@@ -196,8 +164,7 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
           <Input
             fullWidth
             type="number"
-            placeholder="0.00000000"
-            inputProps={{ 'aria-label': 'description' }}
+            placeholder="0"
             value={amountToSend}
             onChange={handleChangeAmountToSend}
             className={classesForm}
@@ -274,11 +241,41 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
               </Grid>
             </Grid>
           </Grid>
-          <Input fullWidth placeholder="0.00000000" className={classesForm} />
+          <Box
+            border={'0.5px solid #CDCDCD'}
+            borderRadius="5px"
+            marginTop="10px"
+            padding="5px 10px"
+            textAlign="right"
+          >
+            <Typography variant="body1" color="textSecondary">
+              {amountToReceive}
+            </Typography>
+            <Typography variant="body2" color="textSecondary">
+              $ {(+amountToReceive * price).toFixed(2)}
+            </Typography>
+          </Box>
         </Grid>
       </Grid>
     </>
   );
 };
 
+SwapDetailsForm.propTypes = {
+  fromToken: PropTypes.any,
+  setFromToken: PropTypes.func.isRequired,
+  toToken: PropTypes.any,
+  setToToken: PropTypes.func.isRequired,
+  coinData: PropTypes.array.isRequired,
+  amountToSend: PropTypes.string.isRequired,
+  handleChangeAmountToSend: PropTypes.func.isRequired,
+  setAmountToSend: PropTypes.func.isRequired,
+  classesForm: PropTypes.string.isRequired,
+  allWallets: PropTypes.array.isRequired,
+  setCurrentWalletId: PropTypes.func.isRequired,
+  currentWalletId: PropTypes.string,
+  amountToReceive: PropTypes.string.isRequired,
+  price: PropTypes.number.isRequired
+};
+
 export default SwapDetailsForm;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/SwapCompletedDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/SwapCompletedDialog.tsx
index d62735bb..4d476223 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/SwapCompletedDialog.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/SwapCompletedDialog.tsx
@@ -2,13 +2,14 @@ import SecurityTwoToneIcon from '@mui/icons-material/SecurityTwoTone';
 import { Grid, Link, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { shell } from 'electron';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
 import Icon from '../../../../../../../designSystem/designComponents/icons/Icon';
 import CheckmarkSuccess from '../../../../../../../designSystem/iconGroups/checkmarkSuccess';
 
-const CHANGELLY_TRACKING_URL = 'https://changelly.com/track/';
+const CHANGELLY_TRACKING_URL = 'https://changelly.com/track';
 
 type SwapCompletedDialogProps = {
   open: boolean;
@@ -119,4 +120,11 @@ const SwapCompletedDialog: React.FC<SwapCompletedDialogProps> = ({
   );
 };
 
+SwapCompletedDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  toTokenName: PropTypes.string.isRequired,
+  transactionId: PropTypes.string.isRequired
+};
+
 export default SwapCompletedDialog;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx
index 404e511d..d627c6cc 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx
@@ -2,6 +2,7 @@ import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Box, Typography } from '@mui/material';
 import { shell } from 'electron';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import Button from '../../../../../../../designSystem/designComponents/buttons/button';
@@ -9,7 +10,7 @@ import CustomDialog from '../../../../../../../designSystem/designComponents/dia
 
 const getVerifySendAddressDialogContent = (
   url: string,
-  onClose: () => void
+  onVerify: () => void
 ): JSX.Element => {
   return (
     <Box
@@ -33,7 +34,7 @@ const getVerifySendAddressDialogContent = (
         <Button
           onClick={() => {
             shell.openExternal(url);
-            onClose();
+            onVerify();
           }}
           sx={{ marginTop: '20px' }}
         >
@@ -52,23 +53,29 @@ const getVerifySendAddressDialogContent = (
 
 type VerifySendAddressDialogProps = {
   open: boolean;
-  onClose: () => void;
+  onVerify: () => void;
   url: string;
 };
 
 const VerifySendAddressDialog: React.FC<VerifySendAddressDialogProps> = ({
   open,
-  onClose,
+  onVerify,
   url
 }): JSX.Element => {
   return (
     <CustomDialog
       open={open}
-      handleClose={onClose}
+      handleClose={onVerify}
       isClosePresent={true}
-      restComponents={getVerifySendAddressDialogContent(url, onClose)}
+      restComponents={getVerifySendAddressDialogContent(url, onVerify)}
     />
   );
 };
 
+VerifySendAddressDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onVerify: PropTypes.func.isRequired,
+  url: PropTypes.string.isRequired
+};
+
 export default VerifySendAddressDialog;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
index 95d2c6b5..6168202a 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
@@ -3,12 +3,17 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import LoadingIcon from '@mui/icons-material/Loop';
 import { Grid, Link, Typography } from '@mui/material';
 import { Box, keyframes } from '@mui/system';
-import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
 import Icon from '../../../../../../../designSystem/designComponents/icons/Icon';
 import CoinIcons from '../../../../../../../designSystem/genericComponents/coinIcons';
 import Changelly from '../../../../../../../designSystem/iconGroups/changelly';
+import {
+  ReceiveFlowSteps,
+  SendFlowSteps
+} from '../../../../../../../store/hooks/helper/FlowSteps';
 
 const rotateKeyframe = keyframes`
   0% {
@@ -20,12 +25,6 @@ const rotateKeyframe = keyframes`
   }
 `;
 
-enum ReceiveFlowSteps {
-  EnterPinAndTapCard,
-  VerifyReceiveAddress,
-  Completed
-}
-
 const receiveFlowStepsMessages: {
   [key in ReceiveFlowSteps]: string;
 } = {
@@ -34,15 +33,6 @@ const receiveFlowStepsMessages: {
   [ReceiveFlowSteps.Completed]: 'Receive flow completed'
 };
 
-enum SendFlowSteps {
-  Waiting,
-  VerifySendAddress,
-  EnterPin,
-  TapCard,
-  SignTransaction,
-  Completed
-}
-
 const sendFlowStepsMessages: {
   [key in SendFlowSteps]: string;
 } = {
@@ -86,8 +76,6 @@ function getFlowSteps<Type extends number>(
   );
 }
 
-// enum SendFlowSteps {}
-
 type VerifySwapDetailsDialogProps = {
   open: boolean;
   onClose: () => void;
@@ -98,12 +86,9 @@ type VerifySwapDetailsDialogProps = {
   sourceCoinName: string;
   targetCoinSlug: string;
   targetCoinName: string;
-  receiveFlowCardTapped: boolean;
-  receiveAddressVerified: boolean;
   receiveAddress: string;
-  sendAddressVerified: boolean;
-  sendFlowPinEntered: boolean;
-  sendFlowCardTapped: boolean;
+  receiveFlowStep: ReceiveFlowSteps;
+  sendFlowStep: SendFlowSteps;
 };
 
 const VerifySwapDetailsDialog: React.FC<VerifySwapDetailsDialogProps> = ({
@@ -116,52 +101,10 @@ const VerifySwapDetailsDialog: React.FC<VerifySwapDetailsDialogProps> = ({
   sourceCoinName,
   targetCoinSlug,
   targetCoinName,
-  receiveFlowCardTapped,
-  receiveAddressVerified,
   receiveAddress,
-  sendAddressVerified,
-  sendFlowPinEntered,
-  sendFlowCardTapped
+  receiveFlowStep,
+  sendFlowStep
 }) => {
-  const [receiveFlowStep, setReceiveFlowStep] = useState<ReceiveFlowSteps>(
-    ReceiveFlowSteps.EnterPinAndTapCard
-  );
-
-  const [sendFlowStep, setSendFlowStep] = useState<SendFlowSteps>(
-    SendFlowSteps.Waiting
-  );
-
-  useEffect(() => {
-    if (receiveFlowCardTapped) {
-      setReceiveFlowStep(ReceiveFlowSteps.VerifyReceiveAddress);
-    }
-  }, [receiveFlowCardTapped]);
-
-  useEffect(() => {
-    if (receiveAddressVerified) {
-      setReceiveFlowStep(ReceiveFlowSteps.Completed);
-      setSendFlowStep(SendFlowSteps.VerifySendAddress);
-    }
-  }, [receiveAddressVerified]);
-
-  useEffect(() => {
-    if (sendAddressVerified) {
-      setSendFlowStep(SendFlowSteps.EnterPin);
-    }
-  }, [sendAddressVerified]);
-
-  useEffect(() => {
-    if (sendFlowPinEntered) {
-      setSendFlowStep(SendFlowSteps.TapCard);
-    }
-  }, [sendFlowPinEntered]);
-
-  useEffect(() => {
-    if (sendFlowCardTapped) {
-      setSendFlowStep(SendFlowSteps.SignTransaction);
-    }
-  }, [sendFlowCardTapped]);
-
   const getVerifySwapDetailsDialogContent = () => {
     return (
       <Box
@@ -185,7 +128,7 @@ const VerifySwapDetailsDialog: React.FC<VerifySwapDetailsDialogProps> = ({
               </Link>
             </Typography>
           </Box>
-          <Grid container xs={12}>
+          <Grid container>
             <Grid
               item
               xs={12}
@@ -342,4 +285,19 @@ const VerifySwapDetailsDialog: React.FC<VerifySwapDetailsDialogProps> = ({
   );
 };
 
+VerifySwapDetailsDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  amountToSend: PropTypes.string.isRequired,
+  amountToReceive: PropTypes.string.isRequired,
+  networkFees: PropTypes.string.isRequired,
+  sourceCoinSlug: PropTypes.string.isRequired,
+  sourceCoinName: PropTypes.string.isRequired,
+  targetCoinSlug: PropTypes.string.isRequired,
+  targetCoinName: PropTypes.string.isRequired,
+  receiveAddress: PropTypes.string,
+  receiveFlowStep: PropTypes.number.isRequired,
+  sendFlowStep: PropTypes.number.isRequired
+};
+
 export default VerifySwapDetailsDialog;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
index d86c439b..2cba403c 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -1,20 +1,13 @@
 import { COINS } from '@cypherock/communication';
+import { Wallet } from '@cypherock/database';
 import { Grid, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 
 import Button from '../../../../../../designSystem/designComponents/buttons/button';
-import logger from '../../../../../../mainProcess/logger';
-import { customAccountDb, Wallet } from '../../../../../../store/database';
-import {
-  changeFormatOfOutputList,
-  DisplayCoin,
-  useExchange,
-  useReceiveTransaction,
-  useSendTransaction
-} from '../../../../../../store/hooks';
-import { useConnection } from '../../../../../../store/provider';
-import { RecipientData } from '../../../wallet/addAccount/formStepComponents/StepComponentProps';
+import { DisplayCoin, useExchange } from '../../../../../../store/hooks';
+import { ReceiveFlowSteps } from '../../../../../../store/hooks/helper/FlowSteps';
 
 import SwapCompletedDialog from './dialogs/SwapCompletedDialog';
 import VerifySendAddressDialog from './dialogs/VerifySendAddressDialog';
@@ -25,19 +18,10 @@ import SwapDetailsForm from './SwapDetailsForm';
 const PREFIX = 'ExchangePanel';
 
 const classes = {
-  root: `${PREFIX}-root`,
-  input: `${PREFIX}-input`,
-  debug: `${PREFIX}-debug`,
   form: `${PREFIX}-form`
 };
 
-const Root = styled('div')(({ theme }) => ({
-  [`& .${classes.root}`]: {
-    height: 'min-content'
-  },
-  [`& .${classes.debug}`]: {
-    border: `2px solid ${theme.palette.error.main}`
-  },
+const Root = styled('div')(() => ({
   [`& .${classes.form}`]: {
     marginTop: '10px',
     border: '0.5px solid #CDCDCD',
@@ -48,6 +32,9 @@ const Root = styled('div')(({ theme }) => ({
       alignContents: 'center',
       width: '250px',
       height: '20px'
+    },
+    '& .MuiOutlinedInput-input': {
+      textAlign: 'right'
     }
   }
 }));
@@ -75,129 +62,43 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
     exchangeRate,
     fees,
     amountToReceive,
-    createSwapTransaction
-  } = useExchange();
-
-  const handleChangeAmountToSend = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setAmountToSend(event.target.value);
-  };
-
-  const { deviceConnection, deviceSdkVersion, setIsInFlow } = useConnection();
-
-  const [isVerifySwapDetailsOpen, setIsVerifySwapDetailsOpen] = useState(false);
-  const [isVerifySendAddressDialogOpen, setIsVerifySendAddressDialogOpen] =
+    startReceiveFlow,
+    cancelSwapTransaction,
+    receiveFlowStep,
+    sendFlowStep,
+    receiveAddress,
+    isSwapCompleted,
+    swapTransaction,
+    handleUserVerifiedSendAddress
+  } = useExchange(currentWalletDetails);
+
+  const [showSwapCompletedDialog, setSwapCompletedDialog] = useState(false);
+  const [showSendAddressVerifyDialog, setShowSendAddressVerifyDialog] =
+    useState(false);
+  const [showSwapDetailsVerifyDialog, setShowSwapDetailsVerifyDialog] =
     useState(false);
-  const [isSwapCompleted, setIsSwapCompleted] = useState(false);
-  const [swapTransaction, setSwapTransaction] = useState<{
-    id: string;
-    payinAddress: string;
-  }>({
-    id: '',
-    payinAddress: ''
-  });
-
-  const receiveTransaction = useReceiveTransaction();
-  const sendTransaction = useSendTransaction();
-
-  const startReceiveFlow = () => {
-    setIsVerifySwapDetailsOpen(true);
-    receiveTransaction
-      .handleReceiveTransaction({
-        connection: deviceConnection,
-        sdkVersion: deviceSdkVersion,
-        setIsInFlow,
-        walletId: currentWalletDetails._id,
-        coinType: toToken.slug,
-        coinName: COINS[toToken.slug]?.name,
-        xpub: toToken.xpub,
-        zpub: toToken.zpub
-      })
-      .then(() => {
-        logger.info('Swap Transaction: Receive Flow Started');
-      })
-      .catch(err => {
-        logger.error('Swap Transaction: Receive Flow Failed', err);
-      });
-  };
-
-  const createChangellyTransaction = async () => {
-    const sendDetails = await createSwapTransaction(
-      receiveTransaction.receiveAddress,
-      currentWalletDetails._id
-    );
-
-    setSwapTransaction(sendDetails);
-  };
-
-  const startSendFlow = async () => {
-    logger.info(
-      'Swap Transaction: Changelly Transaction Created',
-      swapTransaction
-    );
-
-    let customAccount: string | undefined;
-
-    if (fromToken.slug === 'near') {
-      const customAccounts = await customAccountDb.getAll({
-        coin: fromToken.slug,
-        walletId: fromToken.walletId
-      });
-      customAccount = customAccounts[0].name;
-    }
-
-    const recipientData: RecipientData = {
-      id: 0,
-      recipient: swapTransaction.payinAddress,
-      amount: amountToSend,
-      errorRecipient: '',
-      errorAmount: ''
-    };
-
-    sendTransaction
-      .handleSendTransaction({
-        connection: deviceConnection,
-        sdkVersion: deviceSdkVersion,
-        setIsInFlow,
-        walletId: currentWalletDetails._id,
-        xpub: fromToken.xpub,
-        zpub: fromToken.zpub,
-        coinType: fromToken.slug,
-        fees: +fees,
-        pinExists: currentWalletDetails?.passwordSet,
-        passphraseExists: currentWalletDetails?.passphraseSet,
-        customAccount,
-        newAccountId: null,
-        outputList: changeFormatOfOutputList(
-          [recipientData],
-          fromToken.slug,
-          undefined
-        ),
-        data: {},
-        isSendAll: false
-      })
-      .then(() => {
-        logger.info('Swap Transaction: Send Flow Completed');
-      })
-      .catch(err => {
-        logger.error('Swap Transaction: Send Flow Failed', err);
-      });
-  };
 
   useEffect(() => {
-    if (receiveTransaction.verified) {
-      createChangellyTransaction();
-      setIsVerifySendAddressDialogOpen(true);
+    if (isSwapCompleted) {
+      setShowSwapDetailsVerifyDialog(false);
+      setSwapCompletedDialog(true);
     }
-  }, [receiveTransaction.verified]);
+  }, [isSwapCompleted]);
 
   useEffect(() => {
-    if (sendTransaction.signedTxn) {
-      setIsVerifySwapDetailsOpen(false);
-      setIsSwapCompleted(true);
+    if (
+      swapTransaction.payinAddress &&
+      receiveFlowStep === ReceiveFlowSteps.Completed
+    ) {
+      setShowSendAddressVerifyDialog(true);
     }
-  }, [sendTransaction.signedTxn]);
+  }, [swapTransaction, receiveFlowStep]);
+
+  const handleChangeAmountToSend = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setAmountToSend(event.target.value);
+  };
 
   return (
     <Root>
@@ -215,6 +116,8 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
           allWallets={allWallets}
           setCurrentWalletId={setCurrentWalletId}
           currentWalletId={currentWalletDetails?._id}
+          amountToReceive={amountToReceive || '0'}
+          price={toToken?.price || 0}
         />
       }
       {amountToReceive && (
@@ -231,14 +134,18 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
           }
           <Grid
             container
-            xs={12}
             justifyContent={'center'}
             alignContent={'center'}
             alignItems={'center'}
             paddingTop={3}
           >
             <Grid item>
-              <Button onClick={startReceiveFlow}>
+              <Button
+                onClick={() => {
+                  setShowSwapDetailsVerifyDialog(true);
+                  startReceiveFlow();
+                }}
+              >
                 <Typography
                   variant="h5"
                   color="textPrimary"
@@ -251,16 +158,12 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
           </Grid>
         </>
       )}
-      {isVerifySwapDetailsOpen && (
+      {showSwapDetailsVerifyDialog && (
         <VerifySwapDetailsDialog
-          open={isVerifySwapDetailsOpen}
+          open={showSwapDetailsVerifyDialog}
           onClose={() => {
-            receiveTransaction.cancelReceiveTxn(deviceConnection);
-            logger.info('Swap Transaction: Receive Flow Cancelled');
-
-            sendTransaction.cancelSendTxn(deviceConnection);
-            logger.info('Swap Transaction: Receive Flow Cancelled');
-            setIsVerifySwapDetailsOpen(false);
+            cancelSwapTransaction();
+            setShowSwapDetailsVerifyDialog(false);
           }}
           amountToSend={amountToSend}
           amountToReceive={amountToReceive}
@@ -269,29 +172,26 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
           sourceCoinName={COINS[fromToken.slug]?.name}
           targetCoinSlug={toToken.slug.toUpperCase()}
           targetCoinName={COINS[toToken.slug]?.name}
-          receiveFlowCardTapped={receiveTransaction.cardTapped}
-          receiveAddressVerified={receiveTransaction.verified}
-          receiveAddress={receiveTransaction?.receiveAddress}
-          sendAddressVerified={sendTransaction.verified}
-          sendFlowPinEntered={sendTransaction.pinEntered}
-          sendFlowCardTapped={sendTransaction.cardsTapped}
+          receiveAddress={receiveAddress}
+          receiveFlowStep={receiveFlowStep}
+          sendFlowStep={sendFlowStep}
         />
       )}
-      {isSwapCompleted && (
+      {showSwapCompletedDialog && (
         <SwapCompletedDialog
-          open={isSwapCompleted}
+          open={showSwapCompletedDialog}
           onClose={() => {
-            setIsSwapCompleted(false);
+            setSwapCompletedDialog(false);
           }}
           toTokenName={COINS[toToken.slug]?.name}
           transactionId={swapTransaction.id}
         />
       )}
       <VerifySendAddressDialog
-        open={isVerifySendAddressDialogOpen}
-        onClose={() => {
-          setIsVerifySendAddressDialogOpen(false);
-          startSendFlow();
+        open={showSendAddressVerifyDialog}
+        onVerify={() => {
+          handleUserVerifiedSendAddress();
+          setShowSendAddressVerifyDialog(false);
         }}
         url={`https://changelly.com/track/${swapTransaction.id}`}
       />
@@ -299,4 +199,11 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
   );
 };
 
+ExchangePanel.propTypes = {
+  coinData: PropTypes.array.isRequired,
+  currentWalletDetails: PropTypes.any, //! FIXME
+  allWallets: PropTypes.array.isRequired,
+  setCurrentWalletId: PropTypes.func.isRequired
+};
+
 export default ExchangePanel;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx
index 13cf345c..dc111689 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx
@@ -1,4 +1,3 @@
-// import { CallReceived, ContentCopy } from '@mui/icons-material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import DownloadIcon from '@mui/icons-material/Download';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
@@ -8,6 +7,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import LinearProgress from '@mui/material/LinearProgress';
 import withStyles from '@mui/styles/withStyles';
 import { Box } from '@mui/system';
+import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 
 import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
@@ -168,4 +168,10 @@ const ExchangeProgress: React.FC<ExchangeProgressProps> = ({
   );
 };
 
+ExchangeProgress.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  progress: PropTypes.number.isRequired
+};
+
 export default ExchangeProgress;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/TransactionDetails.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/TransactionDetails.tsx
index 77cd639c..911d14b7 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/TransactionDetails.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/TransactionDetails.tsx
@@ -1,4 +1,3 @@
-// import { CallReceived, ContentCopy } from '@mui/icons-material';
 import { Divider, Grid, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import React from 'react';
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
index 559eb603..23c1c623 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
@@ -1,4 +1,5 @@
 import { COINS } from '@cypherock/communication';
+import { Wallet } from '@cypherock/database';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { Grid, Typography } from '@mui/material';
@@ -27,11 +28,13 @@ type HistoryItem = {
 };
 
 type historyPanelProps = {
-  walletId: string;
+  currentWalletDetails: Wallet;
 };
 
-const HistoryPanel: React.FC<historyPanelProps> = ({ walletId }) => {
-  const { getSwapTransactions } = useExchange();
+const HistoryPanel: React.FC<historyPanelProps> = ({
+  currentWalletDetails
+}) => {
+  const { getSwapTransactions } = useExchange(currentWalletDetails);
 
   const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
   const [transactionProgress, setTransactionProgress] = useState(0);
@@ -40,8 +43,8 @@ const HistoryPanel: React.FC<historyPanelProps> = ({ walletId }) => {
 
   useEffect(() => {
     const getTransactions = async () => {
-      const transactions = await getSwapTransactions(walletId);
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const transactions = await getSwapTransactions();
+      /* tslint:disable-next-line */
       transactions.forEach((transaction: any) => {
         const createdAt = new Date(transaction.createdAt * 1000);
         const date = createdAt.toLocaleDateString();
@@ -79,8 +82,8 @@ const HistoryPanel: React.FC<historyPanelProps> = ({ walletId }) => {
         });
       });
     };
-    if (walletId) getTransactions();
-  }, [walletId]);
+    if (currentWalletDetails) getTransactions();
+  }, [currentWalletDetails]);
 
   return (
     <>
diff --git a/cysync/src/store/hooks/helper/FlowSteps.ts b/cysync/src/store/hooks/helper/FlowSteps.ts
new file mode 100644
index 00000000..5444519f
--- /dev/null
+++ b/cysync/src/store/hooks/helper/FlowSteps.ts
@@ -0,0 +1,14 @@
+export enum ReceiveFlowSteps {
+  EnterPinAndTapCard,
+  VerifyReceiveAddress,
+  Completed
+}
+
+export enum SendFlowSteps {
+  Waiting,
+  VerifySendAddress,
+  EnterPin,
+  TapCard,
+  SignTransaction,
+  Completed
+}
diff --git a/cysync/src/store/hooks/useExchange.ts b/cysync/src/store/hooks/useExchange.ts
index 2fb09c0e..efd3abe3 100644
--- a/cysync/src/store/hooks/useExchange.ts
+++ b/cysync/src/store/hooks/useExchange.ts
@@ -1,20 +1,103 @@
+import { COINS } from '@cypherock/communication';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 
-import { DisplayCoin } from './types';
+import logger from '../../mainProcess/logger';
+import { customAccountDb, Wallet } from '../database';
+import {
+  changeFormatOfOutputList,
+  DisplayCoin,
+  useReceiveTransaction,
+  useSendTransaction
+} from '../hooks';
+import { useConnection } from '../provider';
 
-const baseUrl = 'http://localhost:5000';
+import { ReceiveFlowSteps, SendFlowSteps } from './helper/FlowSteps';
+
+// TODO: get the base URL from the config
+const baseUrl = 'http://localhost:5000/swap';
+
+export const useExchange = (currentWalletDetails: Wallet) => {
+  const { deviceConnection, deviceSdkVersion, setIsInFlow } = useConnection();
+  const receiveTransaction = useReceiveTransaction();
+  const sendTransaction = useSendTransaction();
 
-export const useExchange = () => {
   const [fromToken, setFromToken] = useState<DisplayCoin>();
   const [toToken, setToToken] = useState<DisplayCoin>();
   const [amountToSend, setAmountToSend] = useState('');
   const [fees, setFees] = useState('');
   const [amountToReceive, setAmountToReceive] = useState('');
   const [exchangeRate, setExchangeRate] = useState('');
+  const [receiveAddress, setReceiveAddress] = useState('');
+  const [isSwapCompleted, setIsSwapCompleted] = useState(false);
+  const [swapTransaction, setSwapTransaction] = useState({
+    id: '',
+    payinAddress: ''
+  });
+  const [receiveFlowStep, setReceiveFlowStep] = useState<ReceiveFlowSteps>(
+    ReceiveFlowSteps.EnterPinAndTapCard
+  );
+  const [sendFlowStep, setSendFlowStep] = useState<SendFlowSteps>(
+    SendFlowSteps.Waiting
+  );
+
+  // Set the receive address once the card is tapped
+  useEffect(() => {
+    if (receiveTransaction.cardTapped) {
+      setReceiveFlowStep(ReceiveFlowSteps.VerifyReceiveAddress);
+      setReceiveAddress(receiveTransaction?.receiveAddress);
+    }
+  }, [receiveTransaction.cardTapped]);
+
+  useEffect(() => {
+    if (receiveTransaction.verified) {
+      setReceiveFlowStep(ReceiveFlowSteps.Completed);
+      setSendFlowStep(SendFlowSteps.VerifySendAddress);
+    }
+  }, [receiveTransaction.verified]);
+
+  useEffect(() => {
+    if (sendTransaction.verified) {
+      setSendFlowStep(SendFlowSteps.EnterPin);
+    }
+  }, [sendTransaction.verified]);
+
+  useEffect(() => {
+    if (sendTransaction.pinEntered) {
+      setSendFlowStep(SendFlowSteps.TapCard);
+    }
+  }, [sendTransaction.pinEntered]);
 
+  useEffect(() => {
+    if (sendTransaction.cardsTapped) {
+      setSendFlowStep(SendFlowSteps.SignTransaction);
+    }
+  }, [sendTransaction.cardsTapped]);
+
+  useEffect(() => {
+    if (fromToken && toToken && amountToSend) {
+      getCurrentExchangeRate();
+    }
+  }, [fromToken, toToken, amountToSend]);
+
+  useEffect(() => {
+    if (receiveTransaction.verified) {
+      generateSwapTransaction();
+    }
+  }, [receiveTransaction.verified]);
+
+  useEffect(() => {
+    if (sendTransaction.signedTxn) {
+      setIsSwapCompleted(true);
+    }
+  }, [sendTransaction.signedTxn]);
+
+  /**
+   * Fetches the rate of exchanging tokens from `fromToken` to `toToken` for an
+   * amount of `amountToSend`. Also updates the `fees` and `amountToReceive`.
+   */
   const getCurrentExchangeRate = async () => {
-    const { data } = await axios.get(`${baseUrl}/swap/exchangeDetails`, {
+    const { data } = await axios.get(`${baseUrl}/exchangeDetails`, {
       params: { from: fromToken.slug, to: toToken.slug, amount: amountToSend }
     });
     setExchangeRate(data.message.result[0].rate);
@@ -22,17 +105,15 @@ export const useExchange = () => {
     setAmountToReceive(data.message.result[0].result);
   };
 
-  useEffect(() => {
-    if (fromToken && toToken && amountToSend) {
-      getCurrentExchangeRate();
-    }
-  }, [fromToken, toToken, amountToSend]);
-
-  const createSwapTransaction = async (
-    receiveAddress: string,
-    walletId: string
-  ) => {
-    const { data } = await axios.get(`${baseUrl}/swap/transaction`, {
+  /**
+   *  Creates a swap transaction between `fromToken` and `toToken` for an amount
+   *
+   * @param walletId The wallet to use for the swap
+   * @returns The transaction ID to later check the status of the swap and the
+   * payment address to send the tokens to.
+   */
+  const createSwapTransaction = async (walletId: string) => {
+    const { data } = await axios.get(`${baseUrl}/transaction`, {
       params: {
         walletId,
         from: fromToken.slug,
@@ -47,13 +128,123 @@ export const useExchange = () => {
     };
   };
 
-  const getSwapTransactions = async (walletId: string) => {
-    const { data } = await axios.get(`${baseUrl}/swap/transactions`, {
-      params: { walletId }
+  /**
+   * Fetches all the transactions for a given wallet.
+   *
+   * @param walletId The wallet to fetch the transactions for.
+   * @returns An array of transactions.
+   */
+  const getSwapTransactions = async () => {
+    const { data } = await axios.get(`${baseUrl}/transactions`, {
+      params: { walletId: currentWalletDetails?._id }
     });
     return data.message.result;
   };
 
+  /**
+   * Starts the first part of the swap process i.e the receive flow.
+   */
+  const startReceiveFlow = () => {
+    receiveTransaction
+      .handleReceiveTransaction({
+        connection: deviceConnection,
+        sdkVersion: deviceSdkVersion,
+        setIsInFlow,
+        walletId: currentWalletDetails._id,
+        coinType: toToken.slug,
+        coinName: COINS[toToken.slug]?.name,
+        xpub: toToken.xpub,
+        zpub: toToken.zpub
+      })
+      .then(() => {
+        logger.info('Swap Transaction: Receive Flow Started');
+      })
+      .catch(err => {
+        logger.error('Swap Transaction: Receive Flow Failed', err);
+      });
+  };
+
+  /**
+   * Creates a swap transaction.
+   */
+  const generateSwapTransaction = async () => {
+    const sendDetails = await createSwapTransaction(currentWalletDetails._id);
+
+    setSwapTransaction(sendDetails);
+  };
+
+  /**
+   * Starts the second part of the swap process i.e the send flow.
+   */
+  const startSendFlow = async () => {
+    logger.info('Swap Transaction: Swap Transaction Created', swapTransaction);
+
+    let customAccount: string | undefined;
+
+    if (fromToken.slug === 'near') {
+      const customAccounts = await customAccountDb.getAll({
+        coin: fromToken.slug,
+        walletId: fromToken.walletId
+      });
+      customAccount = customAccounts[0].name;
+    }
+
+    const recipientData = {
+      id: 0,
+      recipient: swapTransaction.payinAddress,
+      amount: amountToSend,
+      errorRecipient: '',
+      errorAmount: ''
+    };
+
+    sendTransaction
+      .handleSendTransaction({
+        connection: deviceConnection,
+        sdkVersion: deviceSdkVersion,
+        setIsInFlow,
+        walletId: currentWalletDetails._id,
+        xpub: fromToken.xpub,
+        zpub: fromToken.zpub,
+        coinType: fromToken.slug,
+        fees: +fees,
+        pinExists: currentWalletDetails?.passwordSet,
+        passphraseExists: currentWalletDetails?.passphraseSet,
+        customAccount,
+        newAccountId: null,
+        outputList: changeFormatOfOutputList(
+          [recipientData],
+          fromToken.slug,
+          undefined
+        ),
+        data: {},
+        isSendAll: false
+      })
+      .then(() => {
+        logger.info('Swap Transaction: Send Flow Completed');
+      })
+      .catch(err => {
+        logger.error('Swap Transaction: Send Flow Failed', err);
+      });
+  };
+
+  /**
+   * Cancel the receive and send flow.
+   */
+  const cancelSwapTransaction = () => {
+    receiveTransaction.cancelReceiveTxn(deviceConnection);
+    logger.info('Swap Transaction: Receive Flow Cancelled');
+
+    sendTransaction.cancelSendTxn(deviceConnection);
+    logger.info('Swap Transaction: Send Flow Cancelled');
+  };
+
+  /**
+   * Start the send flow once the user verifies the send address.
+   */
+  const handleUserVerifiedSendAddress = () => {
+    startSendFlow();
+  };
+
   return {
     fromToken,
     setFromToken,
@@ -64,7 +255,16 @@ export const useExchange = () => {
     exchangeRate,
     fees,
     amountToReceive,
-    createSwapTransaction,
-    getSwapTransactions
+    receiveAddress,
+    getSwapTransactions,
+    startReceiveFlow,
+    generateSwapTransaction,
+    startSendFlow,
+    cancelSwapTransaction,
+    receiveFlowStep,
+    sendFlowStep,
+    isSwapCompleted,
+    swapTransaction,
+    handleUserVerifiedSendAddress
   };
 };

From 67e8d6f95414140f0e4533c78c69f4cd31973c7b Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Mon, 7 Nov 2022 16:44:30 +0530
Subject: [PATCH 07/13] feat: implemented the export operations

Added a new method that downloads a JS object as a CSV file.
It is used to download the swap transactions that took place.
---
 .../sidebar/swap/panels/history/index.tsx     | 64 +++++++++++++++++--
 cysync/src/utils/csvDownloader.ts             | 34 ++++++++++
 2 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 cysync/src/utils/csvDownloader.ts

diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
index 23c1c623..115fcb37 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
@@ -2,7 +2,7 @@ import { COINS } from '@cypherock/communication';
 import { Wallet } from '@cypherock/database';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import { Grid, Typography } from '@mui/material';
+import { Button, Grid, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
@@ -11,6 +11,7 @@ import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcon
 import Download from '../../../../../../designSystem/iconGroups/download';
 import Swap from '../../../../../../designSystem/iconGroups/swap';
 import { useExchange } from '../../../../../../store/hooks';
+import csvDownloader from '../../../../../../utils/csvDownloader';
 
 import ExchangeProgress from './dialogs/ExchangeProgress';
 
@@ -31,11 +32,31 @@ type historyPanelProps = {
   currentWalletDetails: Wallet;
 };
 
+// tslint:disable-next-line: no-any
+const formatRawTransactions = (rawTransactions: any[], columns: string[]) => {
+  const formattedRawTransactions = rawTransactions.map(
+    // tslint:disable-next-line: no-any
+    (rawTransaction: any) => {
+      const txn: {
+        [key in string]: string | number | null;
+      } = {};
+      columns.forEach(key => (txn[key] = rawTransaction[key]));
+      return txn;
+    }
+  );
+
+  const headers: { [key in string]: string } = {};
+  columns.forEach(key => (headers[key] = key));
+
+  formattedRawTransactions.unshift(headers);
+  return formattedRawTransactions;
+};
+
 const HistoryPanel: React.FC<historyPanelProps> = ({
   currentWalletDetails
 }) => {
   const { getSwapTransactions } = useExchange(currentWalletDetails);
-
+  const [rawTransactions, setRawTransactions] = useState([]);
   const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
   const [transactionProgress, setTransactionProgress] = useState(0);
   const [isExchangeProgressOpen, setIsExchangeProgressOpen] =
@@ -44,6 +65,7 @@ const HistoryPanel: React.FC<historyPanelProps> = ({
   useEffect(() => {
     const getTransactions = async () => {
       const transactions = await getSwapTransactions();
+      setRawTransactions(transactions);
       /* tslint:disable-next-line */
       transactions.forEach((transaction: any) => {
         const createdAt = new Date(transaction.createdAt * 1000);
@@ -91,11 +113,43 @@ const HistoryPanel: React.FC<historyPanelProps> = ({
         <Grid item xs={12}>
           <Typography
             variant="body1"
-            sx={{ color: 'secondary.dark' }}
+            sx={{
+              color: 'secondary.dark'
+            }}
             textAlign={'right'}
           >
-            <Download />
-            &nbsp; Export operations
+            <Button
+              startIcon={<Download />}
+              color="secondary"
+              onClick={() => {
+                csvDownloader(
+                  formatRawTransactions(rawTransactions, [
+                    'id',
+                    'createdAt',
+                    'moneyReceived',
+                    'moneySent',
+                    'rate',
+                    'status',
+                    'currencyFrom',
+                    'currencyTo',
+                    'payinAddress',
+                    'payoutAddress',
+                    'amountExpectedFrom',
+                    'amountExpectedTo',
+                    'networkFee',
+                    'changellyFee'
+                  ]),
+                  `CySync-Swap-History-${currentWalletDetails.name}`
+                );
+              }}
+              sx={{
+                borderRadius: '40px',
+                padding: '10px 20px'
+              }}
+            >
+              {/* <Download /> */}
+              &nbsp; Export operations
+            </Button>
           </Typography>
         </Grid>
         <Grid
diff --git a/cysync/src/utils/csvDownloader.ts b/cysync/src/utils/csvDownloader.ts
new file mode 100644
index 00000000..cfcde4ac
--- /dev/null
+++ b/cysync/src/utils/csvDownloader.ts
@@ -0,0 +1,34 @@
+// tslint:disable-next-line: no-any
+const jsonToCSV = (objArray: any) => {
+  const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
+  let str = '';
+
+  for (let i = 0; i < array.length; i++) {
+    let line = '';
+    for (const index of Object.keys(array[i])) {
+      if (line !== '') line += ',';
+
+      line += array[i][index];
+    }
+
+    str += line + '\r\n';
+  }
+
+  return str;
+};
+
+// tslint:disable-next-line: no-any
+export default function csvDownloader(data: any, filename: string) {
+  const csvContent = jsonToCSV(data);
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const link = document.createElement('a');
+  if (link.download !== undefined) {
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', filename);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}

From 8e6aa2f117ef8ab5dcaf735757da1d60f867eb4a Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Wed, 9 Nov 2022 12:58:55 +0530
Subject: [PATCH 08/13] feat: add dropdown to select wallet name

In the Swap History panel, a drop down
will list all the wallet that are
available and selecting them will list
only the transactions in that wallet
---
 .../mainApp/sidebar/swap/HorizontalTabs.tsx   |  39 +--
 .../swap/panels/exchange/SwapDetailsForm.tsx  |  91 ++++---
 .../sidebar/swap/panels/exchange/index.tsx    |  47 ++--
 .../sidebar/swap/panels/history/index.tsx     | 244 +++++++++++-------
 cysync/src/store/hooks/useExchange.ts         | 125 +++++++--
 cysync/src/store/hooks/useWalletData.ts       |   4 +-
 6 files changed, 340 insertions(+), 210 deletions(-)

diff --git a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
index 6c43efe7..cac9647a 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
@@ -1,11 +1,7 @@
-import { Wallet } from '@cypherock/database';
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
-import React, { useEffect, useState } from 'react';
-
-import { useWalletData } from '../../../../store/hooks';
-import { useWallets } from '../../../../store/provider';
+import React, { useState } from 'react';
 
 import ExchangePanel from './panels/exchange';
 import HistoryPanel from './panels/history';
@@ -33,30 +29,6 @@ function TabPanel(props: TabPanelProps) {
 export default function HorizontalTabs() {
   const [value, setValue] = useState(0);
 
-  const { allWallets, isLoading: isWalletLoading } = useWallets();
-  const { coinData, setCurrentWalletId, currentWalletId } = useWalletData();
-
-  // By default selecting the first wallet
-  useEffect(() => {
-    if (!currentWalletId && !isWalletLoading) {
-      setCurrentWalletId(allWallets[0]._id);
-    }
-  }, [isWalletLoading, allWallets]);
-
-  // TODO: Remove hardcoded wallet id with the selected wallet id
-
-  const [currentWalletDetails, setCurrentWalletDetails] =
-    useState<Wallet | null>(null);
-
-  useEffect(() => {
-    if (isWalletLoading) return;
-
-    const wallet = allWallets.find(elem => elem._id === currentWalletId);
-    if (wallet) {
-      setCurrentWalletDetails(wallet);
-    }
-  }, [currentWalletId, isWalletLoading]);
-
   const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
@@ -75,15 +47,10 @@ export default function HorizontalTabs() {
         </Tabs>
       </Box>
       <TabPanel value={value} index={0}>
-        <ExchangePanel
-          coinData={coinData}
-          currentWalletDetails={currentWalletDetails}
-          allWallets={allWallets}
-          setCurrentWalletId={setCurrentWalletId}
-        />
+        <ExchangePanel />
       </TabPanel>
       <TabPanel value={value} index={1}>
-        <HistoryPanel currentWalletDetails={currentWalletDetails} />
+        <HistoryPanel />
       </TabPanel>
     </Box>
   );
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
index 61c4f4d0..31fe25d6 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
@@ -14,7 +14,7 @@ import {
   Typography
 } from '@mui/material';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import SwitchButton from '../../../../../../designSystem/designComponents/buttons/switchButton';
 import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
@@ -35,7 +35,6 @@ type SwapDetailsFormProps = {
   setFromToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
   toToken: DisplayCoin;
   setToToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
-  coinData: DisplayCoin[];
   amountToSend: string;
   handleChangeAmountToSend: (
     event: React.ChangeEvent<HTMLInputElement>
@@ -43,10 +42,14 @@ type SwapDetailsFormProps = {
   setAmountToSend: React.Dispatch<React.SetStateAction<string>>;
   classesForm: string;
   allWallets: Wallet[];
-  setCurrentWalletId: React.Dispatch<React.SetStateAction<string>>;
-  currentWalletId: string;
   amountToReceive: string;
   price: number;
+  toWallet: Wallet;
+  setToWallet: React.Dispatch<React.SetStateAction<Wallet>>;
+  fromWallet: Wallet;
+  setFromWallet: React.Dispatch<React.SetStateAction<Wallet>>;
+  fromWalletCoinData: DisplayCoin[];
+  toWalletCoinData: DisplayCoin[];
 };
 
 const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
@@ -54,28 +57,33 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
   setFromToken,
   toToken,
   setToToken,
-  coinData,
   amountToSend,
   setAmountToSend,
   handleChangeAmountToSend,
   classesForm,
   allWallets,
-  setCurrentWalletId,
-  currentWalletId,
   amountToReceive,
-  price
+  price,
+  toWallet,
+  setToWallet,
+  fromWallet,
+  setFromWallet,
+  fromWalletCoinData,
+  toWalletCoinData
 }) => {
   const [isAmountToSendMax, setIsAmountToSendMax] = useState(false);
-  const [fromTokenIndex, setFromTokenIndex] = useState('');
-  const [toTokenIndex, setToTokenIndex] = useState('');
+  const [fromTokenSlug, setFromTokenSlug] = useState('');
+  const [toTokenSlug, setToTokenSlug] = useState('');
 
   const handleChangeFromToken = (event: SelectChangeEvent) => {
-    setFromTokenIndex(event.target.value);
-    setFromToken(coinData[+event.target.value]);
+    setFromTokenSlug(event.target.value);
+    setFromToken(
+      fromWalletCoinData.find(coin => coin.slug === event.target.value)
+    );
   };
   const handleChangeToToken = (event: SelectChangeEvent) => {
-    setToTokenIndex(event.target.value);
-    setToToken(coinData[+event.target.value]);
+    setToTokenSlug(event.target.value);
+    setToToken(toWalletCoinData.find(coin => coin.slug === event.target.value));
   };
 
   return (
@@ -93,11 +101,11 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
                   size="small"
                   color="secondary"
                   variant={
-                    currentWalletId === wallet._id ? 'filled' : 'outlined'
+                    fromWallet?._id === wallet._id ? 'filled' : 'outlined'
                   }
                   label={trimString(wallet.name, 6)}
                   onClick={() => {
-                    setCurrentWalletId(wallet._id);
+                    setFromWallet(wallet);
                   }}
                 />
               </Tooltip>
@@ -108,18 +116,18 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
               {fromToken ? '' : 'Select Source'}
             </InputLabel>
             <Select
-              value={fromTokenIndex}
+              value={fromTokenSlug}
               onChange={handleChangeFromToken}
               variant="outlined"
               labelId="select-source-helper-label"
             >
-              {coinData
+              {fromWalletCoinData
                 .filter(coin => coin.totalBalance !== '0')
-                .map((coin, index) => {
+                .map(coin => {
                   const coinSlugName = coin.slug.toUpperCase();
                   const coinName = COINS[coin.slug]?.name;
                   return (
-                    <MenuItem value={index} key={`from-${coin.slug}`}>
+                    <MenuItem value={coin.slug} key={`from-${coin.slug}`}>
                       <CoinIcons
                         initial={coinSlugName}
                         style={{ marginRight: '10px' }}
@@ -152,10 +160,10 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
               <Grid item>
                 <SwitchButton
                   completed={isAmountToSendMax}
-                  disabled={fromTokenIndex === ''}
+                  disabled={fromTokenSlug === ''}
                   handleChange={() => {
                     setIsAmountToSendMax(currVal => !currVal);
-                    setAmountToSend(fromToken?.displayBalance || '0');
+                    setAmountToSend(fromToken?.totalBalance || '0');
                   }}
                 />
               </Grid>
@@ -187,24 +195,40 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
       </Typography>
       <Grid container spacing={2} sx={{ marginTop: '-45px' }}>
         <Grid item xs={6}>
-          <Typography variant="h6" color="textSecondary">
-            To
-          </Typography>
+          <Box display="flex" gap={1}>
+            <Typography variant="h6" color="textSecondary">
+              To
+            </Typography>
+            {allWallets.map(wallet => (
+              <Tooltip title={wallet.name} key={wallet._id}>
+                <Chip
+                  sx={{ fontSize: '10px', width: '50px' }}
+                  size="small"
+                  color="secondary"
+                  variant={toWallet?._id === wallet._id ? 'filled' : 'outlined'}
+                  label={trimString(wallet.name, 6)}
+                  onClick={() => {
+                    setToWallet(wallet);
+                  }}
+                />
+              </Tooltip>
+            ))}
+          </Box>
           <FormControl fullWidth className={classesForm}>
             <InputLabel id="select-target-helper-label" shrink={false}>
               {toToken ? '' : 'Select Target'}
             </InputLabel>
             <Select
-              value={toTokenIndex}
+              value={toTokenSlug}
               onChange={handleChangeToToken}
               labelId="select-target-helper-label"
               variant="outlined"
             >
-              {coinData.map((coin, index) => {
+              {toWalletCoinData.map(coin => {
                 const coinSlugName = coin.slug.toUpperCase();
                 const coinName = COINS[coin.slug]?.name;
                 return (
-                  <MenuItem value={index} key={`to-${coin.slug}`}>
+                  <MenuItem value={coin.slug} key={`to-${coin.slug}`}>
                     <CoinIcons
                       initial={coinSlugName}
                       style={{ marginRight: '10px' }}
@@ -266,16 +290,19 @@ SwapDetailsForm.propTypes = {
   setFromToken: PropTypes.func.isRequired,
   toToken: PropTypes.any,
   setToToken: PropTypes.func.isRequired,
-  coinData: PropTypes.array.isRequired,
   amountToSend: PropTypes.string.isRequired,
   handleChangeAmountToSend: PropTypes.func.isRequired,
   setAmountToSend: PropTypes.func.isRequired,
   classesForm: PropTypes.string.isRequired,
   allWallets: PropTypes.array.isRequired,
-  setCurrentWalletId: PropTypes.func.isRequired,
-  currentWalletId: PropTypes.string,
   amountToReceive: PropTypes.string.isRequired,
-  price: PropTypes.number.isRequired
+  price: PropTypes.number.isRequired,
+  toWallet: PropTypes.any,
+  setToWallet: PropTypes.func.isRequired,
+  fromWallet: PropTypes.any,
+  setFromWallet: PropTypes.func.isRequired,
+  fromWalletCoinData: PropTypes.array.isRequired,
+  toWalletCoinData: PropTypes.array.isRequired
 };
 
 export default SwapDetailsForm;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
index 2cba403c..bda35140 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -1,12 +1,10 @@
 import { COINS } from '@cypherock/communication';
-import { Wallet } from '@cypherock/database';
 import { Grid, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 
 import Button from '../../../../../../designSystem/designComponents/buttons/button';
-import { DisplayCoin, useExchange } from '../../../../../../store/hooks';
+import { useExchange } from '../../../../../../store/hooks';
 import { ReceiveFlowSteps } from '../../../../../../store/hooks/helper/FlowSteps';
 
 import SwapCompletedDialog from './dialogs/SwapCompletedDialog';
@@ -39,19 +37,7 @@ const Root = styled('div')(() => ({
   }
 }));
 
-type ExchangePanelProps = {
-  coinData: DisplayCoin[];
-  currentWalletDetails: Wallet;
-  allWallets: Wallet[];
-  setCurrentWalletId: React.Dispatch<React.SetStateAction<string>>;
-};
-
-const ExchangePanel: React.FC<ExchangePanelProps> = ({
-  coinData,
-  currentWalletDetails,
-  allWallets,
-  setCurrentWalletId
-}) => {
+const ExchangePanel = () => {
   const {
     fromToken,
     setFromToken,
@@ -69,8 +55,15 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
     receiveAddress,
     isSwapCompleted,
     swapTransaction,
-    handleUserVerifiedSendAddress
-  } = useExchange(currentWalletDetails);
+    handleUserVerifiedSendAddress,
+    toWallet,
+    setToWallet,
+    fromWallet,
+    setFromWallet,
+    fromWalletCoinData,
+    toWalletCoinData,
+    allWallets
+  } = useExchange();
 
   const [showSwapCompletedDialog, setSwapCompletedDialog] = useState(false);
   const [showSendAddressVerifyDialog, setShowSendAddressVerifyDialog] =
@@ -108,16 +101,21 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
           setFromToken={setFromToken}
           toToken={toToken}
           setToToken={setToToken}
-          coinData={coinData}
           amountToSend={amountToSend}
           setAmountToSend={setAmountToSend}
           handleChangeAmountToSend={handleChangeAmountToSend}
           classesForm={classes.form}
           allWallets={allWallets}
-          setCurrentWalletId={setCurrentWalletId}
-          currentWalletId={currentWalletDetails?._id}
           amountToReceive={amountToReceive || '0'}
           price={toToken?.price || 0}
+          // toWalletId={toWalletId}
+          // setToWalletId={setToWalletId}
+          toWallet={toWallet}
+          setToWallet={setToWallet}
+          fromWallet={fromWallet}
+          fromWalletCoinData={fromWalletCoinData}
+          toWalletCoinData={toWalletCoinData}
+          setFromWallet={setFromWallet}
         />
       }
       {amountToReceive && (
@@ -199,11 +197,4 @@ const ExchangePanel: React.FC<ExchangePanelProps> = ({
   );
 };
 
-ExchangePanel.propTypes = {
-  coinData: PropTypes.array.isRequired,
-  currentWalletDetails: PropTypes.any, //! FIXME
-  allWallets: PropTypes.array.isRequired,
-  setCurrentWalletId: PropTypes.func.isRequired
-};
-
 export default ExchangePanel;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
index 115fcb37..26f0e924 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
@@ -1,16 +1,17 @@
 import { COINS } from '@cypherock/communication';
-import { Wallet } from '@cypherock/database';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { Button, Grid, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import DropMenu from '../../../../../../designSystem/designComponents/menu/DropMenu';
 import colors from '../../../../../../designSystem/designConstants/colors';
 import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcons';
 import Download from '../../../../../../designSystem/iconGroups/download';
 import Swap from '../../../../../../designSystem/iconGroups/swap';
 import { useExchange } from '../../../../../../store/hooks';
+import { useWallets } from '../../../../../../store/provider';
 import csvDownloader from '../../../../../../utils/csvDownloader';
 
 import ExchangeProgress from './dialogs/ExchangeProgress';
@@ -20,18 +21,14 @@ type HistoryItem = {
   txns: Array<{
     id: string;
     time: string;
-    fromToken: string;
-    toToken: string;
+    currencyFrom: string;
+    currencyTo: string;
     amount: string;
     fees: string;
     status: string;
   }>;
 };
 
-type historyPanelProps = {
-  currentWalletDetails: Wallet;
-};
-
 // tslint:disable-next-line: no-any
 const formatRawTransactions = (rawTransactions: any[], columns: string[]) => {
   const formattedRawTransactions = rawTransactions.map(
@@ -52,105 +49,160 @@ const formatRawTransactions = (rawTransactions: any[], columns: string[]) => {
   return formattedRawTransactions;
 };
 
-const HistoryPanel: React.FC<historyPanelProps> = ({
-  currentWalletDetails
-}) => {
-  const { getSwapTransactions } = useExchange(currentWalletDetails);
+const groupTransactionsByDate = (
+  transactions: Array<{
+    date: string;
+    walletId: string;
+    id: string;
+    time: string;
+    currencyFrom: string;
+    currencyTo: string;
+    amountExpectedFrom: string;
+    changellyFee: string;
+    status: string;
+  }>
+) => {
+  const groupedTransactions: HistoryItem[] = [];
+  transactions.forEach(transaction => {
+    const date = transaction.date;
+    const newTxn = {
+      id: transaction.id,
+      time: transaction.time,
+      currencyFrom: transaction.currencyFrom,
+      currencyTo: transaction.currencyTo,
+      amount: transaction.amountExpectedFrom,
+      fees: transaction.changellyFee,
+      status: transaction.status
+    };
+    const index = groupedTransactions.findIndex(
+      groupedTransaction => groupedTransaction.date === date
+    );
+
+    if (index === -1) {
+      groupedTransactions.push({
+        date,
+        txns: [newTxn]
+      });
+    } else {
+      groupedTransactions[index].txns.push(newTxn);
+    }
+  });
+  return groupedTransactions;
+};
+
+const HistoryPanel = () => {
+  const { allWallets, isLoading } = useWallets();
+  const { getSwapTransactions } = useExchange();
   const [rawTransactions, setRawTransactions] = useState([]);
+  const [selectedWalletIndex, setSelectedWalletIndex] = useState(0);
   const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
   const [transactionProgress, setTransactionProgress] = useState(0);
   const [isExchangeProgressOpen, setIsExchangeProgressOpen] =
     useState<boolean>(false);
 
   useEffect(() => {
-    const getTransactions = async () => {
-      const transactions = await getSwapTransactions();
-      setRawTransactions(transactions);
-      /* tslint:disable-next-line */
-      transactions.forEach((transaction: any) => {
-        const createdAt = new Date(transaction.createdAt * 1000);
-        const date = createdAt.toLocaleDateString();
-        const time = createdAt.toLocaleTimeString();
-        const newTxn = {
-          id: transaction.id,
-          time,
-          fromToken: transaction.currencyFrom,
-          toToken: transaction.currencyTo,
-          amount: transaction.amountExpectedFrom,
-          fees: transaction.changellyFee,
-          status: transaction.status
-        };
-        setHistoryItems(prev => {
-          const index = prev.findIndex(item => item.date === date);
-          if (index === -1) {
-            return [
-              ...prev,
-              {
-                date,
-                txns: [newTxn]
-              }
-            ];
-          } else {
-            const newTxns = [...prev[index].txns, newTxn];
-            return [
-              ...prev.slice(0, index),
-              {
-                date,
-                txns: newTxns
-              },
-              ...prev.slice(index + 1)
-            ];
+    const getTransactions = async (walletIds: string[]) => {
+      // tslint:disable-next-line: no-any
+      const txns: any[] = [];
+      for (const walletId of walletIds) {
+        const transactions = await getSwapTransactions(walletId);
+        /* tslint:disable-next-line */
+        const newTxns = transactions.map(
+          ({ createdAt, ...transaction }: any) => {
+            const txnCreatedAt = new Date(createdAt * 1000);
+            const date = txnCreatedAt.toLocaleDateString();
+            const time = txnCreatedAt.toLocaleTimeString();
+            return {
+              date,
+              time,
+              ...transaction
+            };
           }
-        });
-      });
+        );
+        txns.push(...newTxns);
+      }
+      setRawTransactions(txns);
+      setHistoryItems(groupTransactionsByDate(txns));
     };
-    if (currentWalletDetails) getTransactions();
-  }, [currentWalletDetails]);
+
+    if (isLoading) return;
+
+    if (selectedWalletIndex === 0)
+      getTransactions(allWallets.map(wallet => wallet._id));
+    else getTransactions([allWallets[selectedWalletIndex - 1]._id]);
+  }, [isLoading, allWallets, selectedWalletIndex]);
+
+  const handleWalletChange = (selectedIndex: number) => {
+    setSelectedWalletIndex(selectedIndex);
+  };
 
   return (
     <>
       <Grid container>
         <Grid item xs={12}>
-          <Typography
-            variant="body1"
-            sx={{
-              color: 'secondary.dark'
-            }}
-            textAlign={'right'}
+          <Grid
+            container
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
           >
-            <Button
-              startIcon={<Download />}
-              color="secondary"
-              onClick={() => {
-                csvDownloader(
-                  formatRawTransactions(rawTransactions, [
-                    'id',
-                    'createdAt',
-                    'moneyReceived',
-                    'moneySent',
-                    'rate',
-                    'status',
-                    'currencyFrom',
-                    'currencyTo',
-                    'payinAddress',
-                    'payoutAddress',
-                    'amountExpectedFrom',
-                    'amountExpectedTo',
-                    'networkFee',
-                    'changellyFee'
-                  ]),
-                  `CySync-Swap-History-${currentWalletDetails.name}`
-                );
-              }}
-              sx={{
-                borderRadius: '40px',
-                padding: '10px 20px'
-              }}
-            >
-              {/* <Download /> */}
-              &nbsp; Export operations
-            </Button>
-          </Typography>
+            <Grid item>
+              {allWallets[0].name !== '' && (
+                <DropMenu
+                  options={[
+                    'All Wallets',
+                    ...allWallets.map(wallet => wallet.name)
+                  ]}
+                  handleMenuItemSelectionChange={handleWalletChange}
+                  index={selectedWalletIndex}
+                  bg={false}
+                  style={{ marginRight: '10px' }}
+                />
+              )}
+            </Grid>
+            <Grid item>
+              <Typography
+                variant="body1"
+                sx={{
+                  color: 'secondary.dark'
+                }}
+                textAlign={'right'}
+              >
+                <Button
+                  startIcon={<Download />}
+                  color="secondary"
+                  onClick={() => {
+                    csvDownloader(
+                      formatRawTransactions(rawTransactions, [
+                        'id',
+                        'createdAt',
+                        'moneyReceived',
+                        'moneySent',
+                        'rate',
+                        'status',
+                        'currencyFrom',
+                        'currencyTo',
+                        'payinAddress',
+                        'payoutAddress',
+                        'amountExpectedFrom',
+                        'amountExpectedTo',
+                        'networkFee',
+                        'changellyFee'
+                      ]),
+                      `CySync-Swap-History-${new Date().toLocaleDateString()}.csv`
+                    );
+                  }}
+                  sx={{
+                    borderRadius: '40px',
+                    padding: '10px 20px'
+                  }}
+                >
+                  {/* <Download /> */}
+                  &nbsp; Export operations
+                </Button>
+              </Typography>
+            </Grid>
+          </Grid>
         </Grid>
         <Grid
           item
@@ -262,11 +314,11 @@ const HistoryPanel: React.FC<historyPanelProps> = ({
                             alignItems={'center'}
                           >
                             <CoinIcons
-                              initial={txn.fromToken.toUpperCase()}
+                              initial={txn.currencyFrom.toUpperCase()}
                               style={{ marginRight: '10px' }}
                             />
                             <Typography variant="body1" color="textPrimary">
-                              {COINS[txn.fromToken]?.name}
+                              {COINS[txn.currencyFrom]?.name}
                             </Typography>
                           </Grid>
                           <Grid
@@ -287,11 +339,11 @@ const HistoryPanel: React.FC<historyPanelProps> = ({
                             alignItems={'center'}
                           >
                             <CoinIcons
-                              initial={txn.toToken.toUpperCase()}
+                              initial={txn.currencyTo.toUpperCase()}
                               style={{ marginRight: '10px' }}
                             />
                             <Typography variant="body1" color="textPrimary">
-                              {COINS[txn.toToken]?.name}
+                              {COINS[txn.currencyTo]?.name}
                             </Typography>
                           </Grid>
                         </Grid>
@@ -310,7 +362,7 @@ const HistoryPanel: React.FC<historyPanelProps> = ({
                               +{txn.amount}
                             </Typography>
                             <Typography variant="body2" color="textSecondary">
-                              -{txn.fees} {txn.fromToken.toUpperCase()}
+                              -{txn.fees} {txn.currencyFrom.toUpperCase()}
                             </Typography>
                           </Grid>
                         </Grid>
diff --git a/cysync/src/store/hooks/useExchange.ts b/cysync/src/store/hooks/useExchange.ts
index efd3abe3..9727feea 100644
--- a/cysync/src/store/hooks/useExchange.ts
+++ b/cysync/src/store/hooks/useExchange.ts
@@ -3,27 +3,71 @@ import axios from 'axios';
 import { useEffect, useState } from 'react';
 
 import logger from '../../mainProcess/logger';
-import { customAccountDb, Wallet } from '../database';
+import { coinDb, customAccountDb, Wallet } from '../database';
 import {
   changeFormatOfOutputList,
   DisplayCoin,
   useReceiveTransaction,
-  useSendTransaction
+  useSendTransaction,
+  useWalletData
 } from '../hooks';
-import { useConnection } from '../provider';
+import { useConnection, useWallets } from '../provider';
 
 import { ReceiveFlowSteps, SendFlowSteps } from './helper/FlowSteps';
 
 // TODO: get the base URL from the config
 const baseUrl = 'http://localhost:5000/swap';
 
-export const useExchange = (currentWalletDetails: Wallet) => {
+export interface UseExchangeValues {
+  fromToken: DisplayCoin;
+  setFromToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
+  toToken: DisplayCoin;
+  setToToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
+  amountToSend: string;
+  setAmountToSend: React.Dispatch<React.SetStateAction<string>>;
+  exchangeRate: string;
+  fees: string;
+  amountToReceive: string;
+  receiveAddress: string;
+  // tslint:disable-next-line: no-any
+  getSwapTransactions: (walletId: string) => Promise<any>;
+  startReceiveFlow: () => void;
+  generateSwapTransaction: () => Promise<void>;
+  startSendFlow: () => void;
+  cancelSwapTransaction: () => void;
+  isSwapCompleted: boolean;
+  // tslint:disable-next-line: no-any
+  swapTransaction: any;
+  handleUserVerifiedSendAddress: () => void;
+  toWallet: Wallet;
+  setToWallet: React.Dispatch<React.SetStateAction<Wallet>>;
+  fromWallet: Wallet;
+  setFromWallet: React.Dispatch<React.SetStateAction<Wallet>>;
+  fromWalletCoinData: DisplayCoin[];
+  toWalletCoinData: DisplayCoin[];
+  allWallets: Wallet[];
+  receiveFlowStep: ReceiveFlowSteps;
+  sendFlowStep: SendFlowSteps;
+}
+
+export type UseExchange = () => UseExchangeValues;
+
+export const useExchange: UseExchange = () => {
+  const { allWallets, isLoading: isWalletLoading } = useWallets();
+  const { getCoinsWithPrices } = useWalletData();
+
   const { deviceConnection, deviceSdkVersion, setIsInFlow } = useConnection();
   const receiveTransaction = useReceiveTransaction();
   const sendTransaction = useSendTransaction();
 
   const [fromToken, setFromToken] = useState<DisplayCoin>();
   const [toToken, setToToken] = useState<DisplayCoin>();
+  const [toWallet, setToWallet] = useState<Wallet>();
+  const [fromWallet, setFromWallet] = useState<Wallet>();
+  const [fromWalletCoinData, setFromWalletCoinData] = useState<DisplayCoin[]>(
+    []
+  );
+  const [toWalletCoinData, setToWalletCoinData] = useState<DisplayCoin[]>([]);
   const [amountToSend, setAmountToSend] = useState('');
   const [fees, setFees] = useState('');
   const [amountToReceive, setAmountToReceive] = useState('');
@@ -41,6 +85,32 @@ export const useExchange = (currentWalletDetails: Wallet) => {
     SendFlowSteps.Waiting
   );
 
+  // Fetch the coins from the database when the source wallet changes
+  useEffect(() => {
+    const setCoinListFromWallet = async () => {
+      const coins = await getAllCoinsFromWallet(fromWallet?._id);
+      setFromWalletCoinData(coins);
+    };
+    setCoinListFromWallet();
+  }, [fromWallet]);
+
+  // Fetch the coins from the database when the destination wallet changes
+  useEffect(() => {
+    const setCoinListToWallet = async () => {
+      const coins = await getAllCoinsFromWallet(toWallet?._id);
+      setToWalletCoinData(coins);
+    };
+    setCoinListToWallet();
+  }, [toWallet]);
+
+  // Set the first wallet as the default from and to wallet
+  useEffect(() => {
+    if (!isWalletLoading) {
+      setFromWallet(allWallets[0]);
+      setToWallet(allWallets[0]);
+    }
+  }, [isWalletLoading, allWallets]);
+
   // Set the receive address once the card is tapped
   useEffect(() => {
     if (receiveTransaction.cardTapped) {
@@ -134,9 +204,9 @@ export const useExchange = (currentWalletDetails: Wallet) => {
    * @param walletId The wallet to fetch the transactions for.
    * @returns An array of transactions.
    */
-  const getSwapTransactions = async () => {
+  const getSwapTransactions = async (walletId: string) => {
     const { data } = await axios.get(`${baseUrl}/transactions`, {
-      params: { walletId: currentWalletDetails?._id }
+      params: { walletId }
     });
     return data.message.result;
   };
@@ -150,11 +220,12 @@ export const useExchange = (currentWalletDetails: Wallet) => {
         connection: deviceConnection,
         sdkVersion: deviceSdkVersion,
         setIsInFlow,
-        walletId: currentWalletDetails._id,
+        walletId: toWallet._id,
         coinType: toToken.slug,
         coinName: COINS[toToken.slug]?.name,
         xpub: toToken.xpub,
-        zpub: toToken.zpub
+        zpub: toToken.zpub,
+        passphraseExists: toWallet.passphraseSet
       })
       .then(() => {
         logger.info('Swap Transaction: Receive Flow Started');
@@ -165,11 +236,10 @@ export const useExchange = (currentWalletDetails: Wallet) => {
   };
 
   /**
-   * Creates a swap transaction.
+   * Creates a swap transaction with the toWallet id as the receiving wallet.
    */
   const generateSwapTransaction = async () => {
-    const sendDetails = await createSwapTransaction(currentWalletDetails._id);
-
+    const sendDetails = await createSwapTransaction(toWallet?._id);
     setSwapTransaction(sendDetails);
   };
 
@@ -202,13 +272,13 @@ export const useExchange = (currentWalletDetails: Wallet) => {
         connection: deviceConnection,
         sdkVersion: deviceSdkVersion,
         setIsInFlow,
-        walletId: currentWalletDetails._id,
+        walletId: fromWallet?._id,
         xpub: fromToken.xpub,
         zpub: fromToken.zpub,
         coinType: fromToken.slug,
         fees: +fees,
-        pinExists: currentWalletDetails?.passwordSet,
-        passphraseExists: currentWalletDetails?.passphraseSet,
+        pinExists: fromWallet?.passwordSet,
+        passphraseExists: fromWallet?.passphraseSet,
         customAccount,
         newAccountId: null,
         outputList: changeFormatOfOutputList(
@@ -245,6 +315,20 @@ export const useExchange = (currentWalletDetails: Wallet) => {
     startSendFlow();
   };
 
+  /**
+   * Get all the coins that are added to a wallet.
+   *
+   * @param walletId The wallet to fetch the coins for.
+   * @returns A promise that resolves to an array of DisplayCoins.
+   */
+  const getAllCoinsFromWallet = async (
+    walletId: string
+  ): Promise<DisplayCoin[]> => {
+    const res = await coinDb.getAll({ walletId });
+    const unsortedCoins = await getCoinsWithPrices(res);
+    return unsortedCoins;
+  };
+
   return {
     fromToken,
     setFromToken,
@@ -261,10 +345,17 @@ export const useExchange = (currentWalletDetails: Wallet) => {
     generateSwapTransaction,
     startSendFlow,
     cancelSwapTransaction,
-    receiveFlowStep,
-    sendFlowStep,
     isSwapCompleted,
     swapTransaction,
-    handleUserVerifiedSendAddress
+    handleUserVerifiedSendAddress,
+    toWallet,
+    setToWallet,
+    fromWallet,
+    setFromWallet,
+    fromWalletCoinData,
+    toWalletCoinData,
+    allWallets,
+    receiveFlowStep,
+    sendFlowStep
   };
 };
diff --git a/cysync/src/store/hooks/useWalletData.ts b/cysync/src/store/hooks/useWalletData.ts
index 13a7f27f..679173ee 100644
--- a/cysync/src/store/hooks/useWalletData.ts
+++ b/cysync/src/store/hooks/useWalletData.ts
@@ -31,6 +31,7 @@ export interface UseWalletDataValues {
   setSortIndex: React.Dispatch<React.SetStateAction<number>>;
   sortCoinData: (coins: DisplayCoin[], index: number) => void;
   sortCoinsByIndex: (index: number) => void;
+  getCoinsWithPrices: (coins: Coin[]) => Promise<DisplayCoin[]>;
 }
 
 export type UseWalletData = () => UseWalletDataValues;
@@ -253,6 +254,7 @@ export const useWalletData: UseWalletData = () => {
     sortIndex,
     setSortIndex,
     sortCoinData,
-    sortCoinsByIndex
+    sortCoinsByIndex,
+    getCoinsWithPrices
   };
 };

From aa159aba68ba0a33b4174f0a973c8aea72dc7bb1 Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Wed, 9 Nov 2022 15:24:44 +0530
Subject: [PATCH 09/13] feat: added a screen when there are no wallets

---
 .../src/pages/mainApp/sidebar/swap/index.tsx  | 68 ++++++++++++++++++-
 .../swap/panels/exchange/SwapDetailsForm.tsx  |  2 +-
 .../sidebar/swap/panels/exchange/index.tsx    |  2 -
 3 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/cysync/src/pages/mainApp/sidebar/swap/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/index.tsx
index d28080cc..4a141a33 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/index.tsx
@@ -1,7 +1,12 @@
 import Grid from '@mui/material/Grid';
 import { styled, useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Routes from '../../../../constants/routes';
+import CustomButton from '../../../../designSystem/designComponents/buttons/button';
+import { useWallets } from '../../../../store/provider';
 
 import HorizontalTabs from './HorizontalTabs';
 
@@ -32,9 +37,70 @@ const Root = styled(Grid)(({ theme }) => ({
 }));
 
 const Swap = () => {
+  const { allWallets } = useWallets();
+
+  const navigate = useNavigate();
   const theme = useTheme();
+  const [open, setOpen] = React.useState(true);
+  const onAddWallet = () => {
+    setOpen(false);
+    navigate(Routes.wallet.index + '?openImportWalletForm=true');
+  };
+
+  useEffect(() => {
+    if (allWallets[0]._id === '') setOpen(true);
+    else {
+      setOpen(false);
+    }
+  }, [allWallets]);
   return (
     <Root container>
+      {open && (
+        <div
+          style={{
+            width: '80%',
+            height: '88%',
+            position: 'absolute',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 100,
+            display: 'flex'
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              width: '101%',
+              height: '101%',
+              backdropFilter: 'blur(5px)'
+            }}
+          />
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexDirection: 'column',
+              zIndex: 100
+            }}
+          >
+            <Typography
+              variant="h2"
+              color="textPrimary"
+              style={{ marginBottom: '2rem' }}
+            >
+              Import a wallet account from X1 wallet
+            </Typography>
+            <CustomButton
+              style={{ padding: '0.5rem 2rem ' }}
+              onClick={onAddWallet}
+            >
+              Import Wallet
+            </CustomButton>
+          </div>
+        </div>
+      )}
       <Grid item xs={12}>
         <Typography
           variant="h2"
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
index 31fe25d6..84629879 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
@@ -14,7 +14,7 @@ import {
   Typography
 } from '@mui/material';
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import SwitchButton from '../../../../../../designSystem/designComponents/buttons/switchButton';
 import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
index bda35140..85bbae2d 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -108,8 +108,6 @@ const ExchangePanel = () => {
           allWallets={allWallets}
           amountToReceive={amountToReceive || '0'}
           price={toToken?.price || 0}
-          // toWalletId={toWalletId}
-          // setToWalletId={setToWalletId}
           toWallet={toWallet}
           setToWallet={setToWallet}
           fromWallet={fromWallet}

From 470681b62401321352177813d0453a48e73a1678 Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Sat, 7 Jan 2023 10:58:13 +0530
Subject: [PATCH 10/13] feat: integrated swap transaction

---
 cysync/src/errors/types.ts                    |   2 +
 cysync/src/store/hooks/flows/index.ts         |   1 +
 .../store/hooks/flows/useSwapTransaction.ts   | 860 ++++++++++++++++++
 cysync/src/store/hooks/useExchange.ts         |  47 +-
 4 files changed, 891 insertions(+), 19 deletions(-)
 create mode 100644 cysync/src/store/hooks/flows/useSwapTransaction.ts

diff --git a/cysync/src/errors/types.ts b/cysync/src/errors/types.ts
index b2a74118..774662ed 100644
--- a/cysync/src/errors/types.ts
+++ b/cysync/src/errors/types.ts
@@ -68,6 +68,8 @@ export enum CysyncError {
   RECEIVE_TXN_CANCEL_FAILED = 'DS_OPTS_1507',
   RECEIVE_TXN_UNKNOWN_ERROR = 'DS_MISC_5502',
 
+  SWAP_TXN_UNKNOWN_ERROR = 'TODO_1234', // TODO: add error code
+
   DEVICE_HAS_INITIAL_FIRMWARE = 'HD_INIT_2100',
   DEVICE_IN_BOOTLOADER = 'HD_INIT_2101',
   LAST_DEVICE_AUTH_FAILED = 'HD_INIT_2102',
diff --git a/cysync/src/store/hooks/flows/index.ts b/cysync/src/store/hooks/flows/index.ts
index 1d39a1b2..27850632 100644
--- a/cysync/src/store/hooks/flows/index.ts
+++ b/cysync/src/store/hooks/flows/index.ts
@@ -5,5 +5,6 @@ export * from './useDeviceAuth';
 export * from './useDeviceUpgrade';
 export * from './useSendTransaction';
 export * from './useReceiveTransation';
+export * from './useSwapTransaction';
 export * from './useLogFetcher';
 export * from './useGetDeviceInfo';
diff --git a/cysync/src/store/hooks/flows/useSwapTransaction.ts b/cysync/src/store/hooks/flows/useSwapTransaction.ts
new file mode 100644
index 00000000..2eea3956
--- /dev/null
+++ b/cysync/src/store/hooks/flows/useSwapTransaction.ts
@@ -0,0 +1,860 @@
+import {
+  COINS,
+  DeviceConnection,
+  DeviceError,
+  DeviceErrorType
+} from '@cypherock/communication';
+import {
+  SWAP_TRANSACTION_EVENTS,
+  TransactionSwapper,
+  WalletStates
+} from '@cypherock/protocols';
+import { WalletErrorType } from '@cypherock/wallet';
+import { useEffect, useRef, useState } from 'react';
+
+import {
+  CyError,
+  CysyncError,
+  handleAxiosErrors,
+  handleDeviceErrors,
+  handleErrors
+} from '../../../errors';
+import Analytics from '../../../utils/analytics';
+import { DeferredReference } from '../../../utils/deferredReference';
+import logger from '../../../utils/logger';
+import { addressDb, receiveAddressDb, transactionDb } from '../../database';
+import { useSocket } from '../../provider';
+
+import * as flowHandlers from './handlers';
+import { TxInputOutput } from './useSendTransaction';
+
+export interface HandleSwapTransactionOptions {
+  connection: DeviceConnection;
+  sdkVersion: string;
+  setIsInFlow: (val: boolean) => void;
+  sendAmount: string;
+  receiveAmount: string;
+  changellyFee: string;
+  sendFlow: {
+    walletId: string;
+    pinExists: boolean;
+    passphraseExists: boolean;
+    coinType: string;
+    xpub: string;
+    zpub?: string;
+    customAccount?: string;
+    newAccountId?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    outputList: any[];
+    fees: number;
+    isSendAll?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data: any;
+  };
+  receiveFlow: {
+    walletId: string;
+    coinType: string;
+    coinName: string;
+    xpub: string;
+    zpub?: string;
+    contractAbbr?: string;
+    passphraseExists?: boolean;
+    customAccount?: string;
+  };
+}
+
+export interface UseSwapTransactionValues {
+  handleSwapTransaction: (
+    options: HandleSwapTransactionOptions
+  ) => Promise<void>;
+  cancelSwapTransaction: (connection: DeviceConnection) => void;
+  receiveFlow: {
+    receiveAddress: string;
+    transactionMetadataSent: boolean;
+    receiveFlowCardTapped: boolean;
+    receiveAddressVerified: boolean;
+    receiveFlowPassphraseEntered: boolean;
+  };
+  sendFlow: {
+    sendCoinsConfirmed: boolean;
+    totalFees: string;
+    txnInputs: TxInputOutput[];
+    txnOutputs: TxInputOutput[];
+    sendFlowVerified: boolean;
+    sendFlowPassphraseEntered: boolean;
+    sendFlowPinEntered: boolean;
+    sendFlowCardsTapped: boolean;
+    signedTxn: string;
+    completed: boolean;
+  };
+}
+
+export type UseSwapTransaction = () => UseSwapTransactionValues;
+
+const flowName = Analytics.Categories.RECEIVE_ADDR;
+export const useSwapTransaction: UseSwapTransaction = () => {
+  const [receiveCoinsConfirmed, setReceiveCoinsConfirmed] = useState(false);
+  const [receiveAccountExists, setReceiveAccountExists] = useState(false);
+  const [transactionMetadataSent, setTransactionMetadataSent] = useState(false);
+  const [receiveAddressVerified, setReceiveAddressVerified] = useState(false);
+  const [receiveAddress, setReceiveAddress] = useState('');
+  const [isCancelled, setIsCancelled] = useState(false);
+  const [receiveFlowPassphraseEntered, setReceiveFlowPassphraseEntered] =
+    useState(false);
+  const [receiveFlowCardTapped, setReceiveFlowCardTapped] = useState(false);
+
+  const [sendCoinsConfirmed, setSendCoinsConfirmed] = useState(false);
+  const [totalFees, setTotalFees] = useState('0');
+  const [txnInputs, setTxnInputs] = useState<TxInputOutput[]>([]);
+  const [txnOutputs, setTxnOutputs] = useState<TxInputOutput[]>([]);
+  const [sendFlowVerified, setSendFlowVerified] = useState(false);
+  const [sendFlowPassphraseEntered, setSendFlowPassphraseEntered] =
+    useState(false);
+  const [sendFlowPinEntered, setSendFlowPinEntered] = useState(false);
+  const [sendFlowCardsTapped, setSendFlowCardsTapped] = useState(false);
+  const [signedTxn, setSignedTxn] = useState('');
+  const [completed, setCompleted] = useState(false);
+
+  let recAddr: string | undefined;
+
+  const { addReceiveAddressHook } = useSocket();
+
+  const [errorObj, setErrorObj] = useState<CyError>(new CyError());
+  const swapTransaction = new TransactionSwapper();
+  const userAction = useRef<DeferredReference<void>>(
+    new DeferredReference<void>()
+  );
+  const replaceAccountAction = useRef<DeferredReference<void>>(
+    new DeferredReference<void>()
+  );
+  const resetHooks = () => {
+    setReceiveCoinsConfirmed(false);
+    setSendCoinsConfirmed(false);
+    // setCoinsConfirmed(false);
+    setReceiveAddressVerified(false);
+    // setVerified(false);
+    setCompleted(false);
+    setReceiveAddress('');
+    setTransactionMetadataSent(false);
+    // setPathSent(false);
+    // setCardTapped(false);
+    setReceiveFlowCardTapped(false);
+    setSendFlowCardsTapped(false);
+    setReceiveFlowPassphraseEntered(false);
+    setSendFlowPassphraseEntered(false);
+    // setXpubMissing(false);
+    setReceiveAccountExists(false);
+    // setAccountExists(false);
+    // setReplaceAccount(false);
+    // setVerifiedAccountId(false);
+    // setVerifiedReplaceAccount(false);
+    // setReplaceAccountStarted(false);
+    setTotalFees('0');
+    setSendFlowVerified(false);
+    setSendFlowPinEntered(false);
+    setSignedTxn('');
+    userAction.current = new DeferredReference<void>();
+    replaceAccountAction.current = new DeferredReference<void>();
+    swapTransaction.removeAllListeners();
+  };
+
+  const clearAll = () => {
+    setIsCancelled(false);
+    // clearErrorObj();
+    resetHooks();
+  };
+
+  const onNewReceiveAddr = (
+    addr: string,
+    walletId: string,
+    coinType: string
+  ) => {
+    logger.info('New receive address', { coinType, walletId, addr });
+    addReceiveAddressHook(addr, walletId, coinType);
+    receiveAddressDb.insert({ address: addr, walletId, coinType });
+  };
+
+  const handleSwapTransactionError = (coinType: string, error: CysyncError) => {
+    const cyError = new CyError(error);
+    setErrorObj(
+      handleErrors(errorObj, cyError, flowName, {
+        coinType
+      })
+    );
+  };
+
+  const handleSwapTransaction: UseSwapTransactionValues['handleSwapTransaction'] =
+    async ({
+      connection,
+      sdkVersion,
+      setIsInFlow,
+      sendAmount,
+      receiveAmount,
+      changellyFee,
+      receiveFlow,
+      sendFlow
+    }) => {
+      clearAll();
+
+      logger.info(`SwapTransaction: Initiated`);
+      // logger.info('Swap Transaction Send Flow Details', {
+      //     walletId: sendFlow.walletId,
+      //     coinType: sendFlow.coinType,
+      //     contactAbbr: sendFlow.data.contractAbbr,
+      // });
+      logger.debug('SwapTransaction: Receive Flow Details', {
+        walletId: receiveFlow.walletId,
+        coinType: receiveFlow.coinType,
+        contactAbbr: receiveFlow.contractAbbr
+      });
+
+      logger.debug('SwapTransaction: ReceiveAddress Xpub', {
+        xpud: receiveFlow.xpub,
+        zpub: receiveFlow.zpub
+      });
+
+      logger.info('SwapTransaction: SendTransaction Data', {
+        walletId: sendFlow.walletId,
+        pinExists: sendFlow.pinExists,
+        coinType: sendFlow.coinType,
+        outputList: sendFlow.outputList,
+        fees: sendFlow.fees,
+        isSendAll: sendFlow.isSendAll,
+        data: sendFlow.data
+      });
+      logger.debug('SwapTransaction: SendTransaction Xpub', {
+        xpub: sendFlow.xpub,
+        zpub: sendFlow.zpub
+      });
+
+      if (!connection) {
+        const cyError = new CyError(DeviceErrorType.NOT_CONNECTED);
+        setErrorObj(
+          handleErrors(errorObj, cyError, flowName, {
+            connection,
+            sendCoinType: sendFlow.coinType,
+            receiveCoinType: receiveFlow.coinType
+          })
+        );
+        return;
+      }
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.CONNECTION_OPEN, () => {
+        logger.info('SwapTransaction: Connection Opened');
+      });
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.CONNECTION_CLOSE, () => {
+        logger.info('SwapTransaction: Connection Closed');
+      });
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.RECEIVE_FLOW_CARD_ERROR,
+        () => {
+          handleSwapTransactionError(
+            receiveFlow.coinType,
+            CysyncError.UNKNOWN_CARD_ERROR
+          );
+        }
+      );
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.SEND_FLOW_CARD_ERROR, () => {
+        handleSwapTransactionError(
+          sendFlow.coinType,
+          CysyncError.UNKNOWN_CARD_ERROR
+        );
+      });
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.ERROR, err => {
+        const cyError = new CyError();
+        if (err.isAxiosError) {
+          handleAxiosErrors(cyError, err);
+        } else if (err instanceof DeviceError) {
+          handleDeviceErrors(cyError, err, flowName);
+        } else {
+          cyError.setError(CysyncError.SWAP_TXN_UNKNOWN_ERROR);
+        }
+        setErrorObj(handleErrors(errorObj, cyError, flowName, err));
+      });
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.RECEIVE_WALLET_LOCKED, () => {
+        handleSwapTransactionError(
+          receiveFlow.coinType,
+          CysyncError.WALLET_IS_LOCKED
+        );
+      });
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.LOCKED, () => {
+        handleSwapTransactionError(
+          sendFlow.coinType,
+          CysyncError.WALLET_IS_LOCKED
+        );
+      });
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.NOT_READY, () => {
+        const cyError = new CyError(CysyncError.DEVICE_NOT_READY);
+        setErrorObj(
+          handleErrors(errorObj, cyError, flowName, {
+            sendCoinType: sendFlow.coinType,
+            receiveCoinType: receiveFlow.coinType
+          })
+        );
+      });
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.NO_RECEIVE_WALLET_FOUND,
+        (walletState: WalletStates) => {
+          const cyError = flowHandlers.noWalletFound(walletState);
+          setErrorObj(
+            handleErrors(errorObj, cyError, flowName, {
+              coinType: receiveFlow.coinType,
+              walletState
+            })
+          );
+        }
+      );
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.NO_RECEIVE_WALLET_ON_CARD,
+        () => {
+          const cyError = new CyError(CysyncError.WALLET_NOT_FOUND_IN_CARD);
+          setErrorObj(handleErrors(errorObj, cyError, flowName));
+        }
+      );
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.RECEIVE_COINS_CONFIRMED,
+        coins => {
+          if (coins) {
+            logger.verbose(
+              'SwapTransaction: ReceiveAddress: Confirmed on device',
+              { coinType: receiveFlow.coinType }
+            );
+            setReceiveCoinsConfirmed(true);
+          } else {
+            const cyError = new CyError(
+              CysyncError.RECEIVE_TXN_REJECTED,
+              receiveFlow.coinName
+            );
+            setErrorObj(
+              handleErrors(errorObj, cyError, flowName, {
+                coinType: receiveFlow.coinType
+              })
+            );
+          }
+        }
+      );
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.RECEIVE_FLOW_CUSTOM_ACCOUNT_EXISTS,
+        exists => {
+          if (exists) {
+            logger.verbose(
+              'SwapTransaction: ReceiveAddress: Custom Account exits on device',
+              {
+                coinType: receiveFlow.coinType
+              }
+            );
+            setReceiveAccountExists(true);
+          }
+        }
+      );
+
+      // EVENT CURRENTLY DOESN'T EXIST
+      // receiveTransaction.on('replaceAccountRequired', value => {
+      //     if (value) {
+      //         logger.verbose(
+      //             'ReceiveAddress: Device needs to replace an account to add a new one',
+      //             {
+      //                 coinType
+      //             }
+      //         );
+      //         setReplaceAccount(true);
+      //     }
+      // });
+
+      // EVENT CURRENTLY DOESN'T EXIST
+      // receiveTransaction.on('accountVerified', value => {
+      //     if (value) {
+      //         logger.verbose('ReceiveAddress: Account confirmed on device', {
+      //             coinType
+      //         });
+      //         setVerifiedAccountId(true);
+      //     } else {
+      //         const cyError = new CyError(
+      //             CysyncError.RECEIVE_TXN_REJECTED,
+      //             coinName
+      //         );
+      //         setErrorObj(handleErrors(errorObj, cyError, flowName, { coinType }));
+      //     }
+      // });
+
+      // EVENT CURRENTLY DOESN'T EXIST
+      // receiveTransaction.on('replaceAccountSelected', value => {
+      //     if (value) {
+      //         logger.verbose('ReceiveAddress: Replace account selected on device', {
+      //             coinType
+      //         });
+      //         setReplaceAccountSelected(true);
+      //     } else {
+      //         setReplaceAccountSelected(false);
+      //     }
+      // });
+
+      // EVENT CURRENTLY DOESN'T EXIST
+      // receiveTransaction.on('replaceAccountVerified', value => {
+      //     if (value) {
+      //         logger.verbose(
+      //             'ReceiveAddress: Replace account confirmed on device',
+      //             { coinType }
+      //         );
+      //         setVerifiedReplaceAccount(true);
+      //     } else {
+      //         const cyError = new CyError(
+      //             CysyncError.RECEIVE_TXN_REJECTED,
+      //             coinName
+      //         );
+      //         setErrorObj(handleErrors(errorObj, cyError, flowName, { coinType }));
+      //     }
+      // });
+
+      // EVENT WAS ONLY ON RUN LEGACY
+      // receiveTransaction.on('noXpub', () => {
+      //     setTimeout(() => {
+      //         setXpubMissing(true);
+      //         const cyError = new CyError(
+      //             CysyncError.RECEIVE_TXN_DEVICE_MISCONFIGURED
+      //         );
+      //         cyError.pushSubErrors(
+      //             CysyncError.RECEIVE_TXN_XPUB_MISSING,
+      //             'Xpub missing on device'
+      //         );
+      //         setErrorObj(handleErrors(errorObj, cyError, flowName, { coinType }));
+      //     }, 3000);
+      // });
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.SWAP_TRANSACTION_METADATA_SENT,
+        () => {
+          logger.verbose('SwapTransaction: Swap Details sent', {
+            sendCoinType: sendFlow.coinType,
+            receiveCoinType: receiveFlow.coinType
+          });
+          setTransactionMetadataSent(true);
+        }
+      );
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.RECEIVE_ADDRESS_VERIFIED,
+        val => {
+          const cyError = new CyError();
+          if (val) {
+            logger.verbose(
+              'ReceiveAddress: Received address generated on device',
+              {
+                deviceAddress: val,
+                coinType: receiveFlow.coinType,
+                desktopAddress: recAddr
+              }
+            );
+
+            if (
+              !receiveFlow.customAccount &&
+              (!recAddr || recAddr.toLowerCase() !== val.toLowerCase())
+            ) {
+              cyError.setError(
+                CysyncError.RECEIVE_TXN_DIFFERENT_ADDRESS_FROM_DEVICE
+              );
+              cyError.pushSubErrors(
+                CysyncError.RECEIVE_TXN_UNKNOWN_ERROR,
+                `This could happen 
+              either when user has wrongly verified yes to the address shown on the
+              display or the device sent an incorrect address from the one shown on the device`
+              );
+            } else {
+              setReceiveAddressVerified(true);
+              onNewReceiveAddr(
+                recAddr,
+                receiveFlow.walletId,
+                receiveFlow.coinType
+              );
+            }
+            if (receiveFlow.customAccount) {
+              logger.verbose(
+                'ReceiveAddress: Address comparison skipped, found customAccount',
+                receiveFlow.coinType
+              );
+            }
+
+            setReceiveAddressVerified(true);
+            onNewReceiveAddr(
+              recAddr,
+              receiveFlow.walletId,
+              receiveFlow.coinType
+            );
+          } else {
+            cyError.setError(CysyncError.RECEIVE_TXN_DIFFERENT_ADDRESS_BY_USER);
+          }
+          if (cyError.isSet)
+            setErrorObj(
+              handleErrors(errorObj, cyError, flowName, {
+                coinType: receiveFlow.coinType
+              })
+            );
+        }
+      );
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.RECEIVE_ADDRESS, address => {
+        logger.info('ReceiveAddress: Address generated', {
+          coinType: receiveFlow.coinType,
+          address
+        });
+        setReceiveAddress(address);
+        recAddr = address;
+      });
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.RECEIVE_FLOW_PASSPHRASE_ENTERED,
+        () => {
+          logger.info('SwapTransaction: ReceiveAddress: Passphrase entered', {
+            coinType: receiveFlow.coinType
+          });
+          setReceiveFlowPassphraseEntered(true);
+        }
+      );
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.RECEIVE_FLOW_PIN_ENTERED,
+        pin => {
+          if (pin) {
+            logger.verbose('SwapTransaction: ReceiveAddress: Pin entered', {
+              coinType: receiveFlow.coinType
+            });
+            setReceiveFlowCardTapped(true);
+          } else {
+            const cyError = new CyError(
+              CysyncError.WALLET_LOCKED_DUE_TO_INCORRECT_PIN
+            );
+            setErrorObj(handleErrors(errorObj, cyError, flowName));
+          }
+        }
+      );
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.RECEIVE_FLOW_CARD_TAPPED,
+        () => {
+          logger.verbose('SwapTransaction: ReceiveAddress: Card Tapped', {
+            coinType: receiveFlow.coinType
+          });
+          setReceiveFlowCardTapped(true);
+        }
+      );
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.SEND_COINS_CONFIRMED,
+        coins => {
+          if (coins) {
+            logger.verbose('SendTransaction: Txn confirmed', {
+              coinType: sendFlow.coinType
+            });
+            setSendCoinsConfirmed(true);
+          } else {
+            const cyError = new CyError(
+              CysyncError.SEND_TXN_REJECTED,
+              COINS[sendFlow.coinType].name
+            );
+            setErrorObj(
+              handleErrors(errorObj, cyError, flowName, {
+                coinType: sendFlow.coinType
+              })
+            );
+          }
+        }
+      );
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.TRANSACTION_TOO_LARGE, () => {
+        const cyError = new CyError(CysyncError.SEND_TXN_SIZE_TOO_LARGE);
+        setErrorObj(
+          handleErrors(errorObj, cyError, flowName, {
+            coinType: sendFlow.coinType
+          })
+        );
+      });
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.NO_SEND_WALLET_FOUND,
+        (walletState: WalletStates) => {
+          const cyError = flowHandlers.noWalletFound(walletState);
+          setErrorObj(
+            handleErrors(errorObj, cyError, flowName, {
+              coinType: sendFlow.coinType,
+              walletState
+            })
+          );
+        }
+      );
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.NO_SEND_WALLET_ON_CARD, () => {
+        const cyError = new CyError(CysyncError.WALLET_NOT_FOUND_IN_CARD);
+        setErrorObj(handleErrors(errorObj, cyError, flowName));
+      });
+
+      swapTransaction.on('totalFees', fee => {
+        logger.info('SendTransaction: Total fee generated', {
+          coinType: sendFlow.coinType,
+          fee
+        });
+        setTotalFees(fee);
+      });
+
+      swapTransaction.on('inputOutput', ({ inputs, outputs }) => {
+        logger.info('SendTransaction: Txn input output generated', {
+          coinType: sendFlow.coinType,
+          inputs,
+          outputs
+        });
+        setTxnInputs(inputs);
+        setTxnOutputs(outputs);
+      });
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.INSUFFICIENT_FUNDS, funds => {
+        if (funds) {
+          const cyError = new CyError(
+            WalletErrorType.INSUFFICIENT_FUNDS,
+            COINS[sendFlow.coinType].name
+          );
+          setErrorObj(
+            handleErrors(errorObj, cyError, flowName, {
+              coinType: sendFlow.coinType,
+              funds
+            })
+          );
+        }
+      });
+
+      // Verified receives `true` if verified, otherwise the index of the rejection screen
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.SEND_FLOW_VERIFIED, val => {
+        if (val === true) {
+          logger.verbose('SendTransaction: Txn verified', {
+            coinType: sendFlow.coinType
+          });
+          setSendFlowVerified(true);
+        } else {
+          const cyError = new CyError(CysyncError.SEND_TXN_REJECTED);
+
+          logger.info('SendTransaction: Txn rejected from device', {
+            coinType: sendFlow.coinType,
+            command: val
+          });
+
+          if (val === 0) {
+            cyError.pushSubErrors(CysyncError.SEND_TXN_REJECTED_AT_ADDRESS);
+          } else if (val === 2) {
+            cyError.pushSubErrors(CysyncError.SEND_TXN_REJECTED_AT_AMOUNT);
+          } else if (val === 3) {
+            cyError.pushSubErrors(CysyncError.SEND_TXN_REJECTED_AT_FEE);
+          } else {
+            cyError.pushSubErrors(CysyncError.SEND_TXN_REJECTED_AT_UNKNOWN);
+          }
+          setErrorObj(handleErrors(errorObj, cyError, flowName));
+        }
+      });
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.SEND_FLOW_PASSPHRASE_ENTERED,
+        () => {
+          logger.verbose(
+            'SwapTransaction: SendTransaction: Passphrase entered',
+            { coinType: sendFlow.coinType }
+          );
+          setSendFlowPassphraseEntered(true);
+        }
+      );
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.SEND_FLOW_PIN_ENTERED, pin => {
+        if (pin) {
+          logger.verbose('SwapTransaction: SendTransaction: Pin entered', {
+            coinType: sendFlow.coinType
+          });
+          setSendFlowPinEntered(true);
+        } else {
+          const cyError = new CyError(
+            CysyncError.WALLET_LOCKED_DUE_TO_INCORRECT_PIN
+          );
+          setErrorObj(
+            handleErrors(errorObj, cyError, flowName, {
+              coinType: sendFlow.coinType
+            })
+          );
+        }
+      });
+
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.SEND_FLOW_CARD_TAPPED,
+        cards => {
+          if (cards) {
+            logger.verbose('SendTransaction: Cards tapped', {
+              coinType: sendFlow.coinType
+            });
+            setSendFlowCardsTapped(true);
+          }
+        }
+      );
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.SIGNED_TRANSACTION, txn => {
+        if (txn) {
+          logger.verbose(
+            'SwapTransaction: SendTransaction: Signed txn generated',
+            { coinType: sendFlow.coinType }
+          );
+          setSignedTxn(txn);
+        } else {
+          const cyError = new CyError(CysyncError.SEND_TXN_UNKNOWN_ERROR);
+          cyError.pushSubErrors(CysyncError.SEND_TXN_SIGNED_TXN_NOT_FOUND);
+          setErrorObj(
+            handleErrors(errorObj, cyError, flowName, {
+              txn,
+              coinType: sendFlow.coinType
+            })
+          );
+        }
+      });
+
+      // Why is this not treated as an error?
+      swapTransaction.on(
+        SWAP_TRANSACTION_EVENTS.SIGNATURE_VERIFY,
+        ({ isVerified, index, error }) => {
+          if (error) {
+            logger.warn(
+              `${CysyncError.SEND_TXN_VERIFICATION_FAILED} SwapTransaction: Error in verifying txn signature.`
+            );
+            logger.warn(error);
+            return;
+          }
+
+          if (isVerified) {
+            logger.info('Txn signature verified successfully');
+          } else {
+            logger.warn(
+              `Txn signature was not verified at input index ${index}`
+            );
+          }
+        }
+      );
+
+      try {
+        setIsInFlow(true);
+
+        await swapTransaction.run({
+          connection,
+          sdkVersion,
+          sendAmount,
+          receiveAmount,
+          changellyFee,
+          transactionReceiverRunOptions: {
+            connection,
+            sdkVersion,
+            addressDB: addressDb,
+            walletId: receiveFlow.walletId,
+            coinType: receiveFlow.coinType,
+            xpub: receiveFlow.xpub,
+            zpub: receiveFlow.zpub,
+            contractAbbr: receiveFlow.contractAbbr || receiveFlow.coinType,
+            passphraseExists: receiveFlow.passphraseExists,
+            customAccount: receiveFlow.customAccount,
+            userAction: userAction.current,
+            replaceAccountAction: replaceAccountAction.current
+          },
+          transactionSenderRunOptions: {
+            connection,
+            sdkVersion,
+            addressDB: addressDb,
+            transactionDB: transactionDb,
+            walletId: sendFlow.walletId,
+            pinExists: sendFlow.pinExists,
+            passphraseExists: sendFlow.passphraseExists,
+            xpub: sendFlow.xpub,
+            zpub: sendFlow.zpub,
+            customAccount: sendFlow.customAccount,
+            newAccountId: sendFlow.newAccountId,
+            coinType: sendFlow.coinType,
+            outputList: sendFlow.outputList,
+            fee: sendFlow.fees,
+            isSendAll: sendFlow.isSendAll,
+            data: sendFlow.data
+          }
+        });
+
+        setIsInFlow(false);
+        logger.info('SendTransaction: Completed', {
+          sendCoinType: sendFlow.coinType,
+          receiveCoinType: receiveFlow.coinType
+        });
+        setCompleted(true);
+      } catch (error) {
+        setIsInFlow(false);
+        const cyError = new CyError(CysyncError.RECEIVE_TXN_UNKNOWN_ERROR);
+        setErrorObj(
+          handleErrors(errorObj, cyError, flowName, {
+            error,
+            receiveCoinType: receiveFlow.coinType,
+            sendCoinType: sendFlow.coinType
+          })
+        );
+        swapTransaction.removeAllListeners();
+      }
+    };
+
+  const cancelSwapTransaction = async (connection: DeviceConnection) => {
+    setIsCancelled(true);
+    return swapTransaction
+      .cancel(connection)
+      .then(cancelled => {
+        if (cancelled) {
+          logger.info('SwapTransaction: Cancelled');
+        }
+      })
+      .catch(e => {
+        logger.error(
+          `${CysyncError.RECEIVE_TXN_CANCEL_FAILED}  SwapTransaction: Error in flow cancel`
+        );
+        logger.error(e);
+      });
+  };
+
+  // I think this will work, reset the error obj if its cancelled
+  useEffect(() => {
+    if (isCancelled && errorObj.isSet) {
+      clearErrorObj();
+    }
+  }, [errorObj]);
+
+  const clearErrorObj = () => {
+    setErrorObj(new CyError());
+  };
+
+  return {
+    handleSwapTransaction,
+    cancelSwapTransaction,
+    receiveFlow: {
+      receiveAddress,
+      transactionMetadataSent,
+      receiveFlowCardTapped,
+      receiveAddressVerified,
+      receiveFlowPassphraseEntered,
+      receiveCoinsConfirmed,
+      receiveAccountExists
+    },
+    sendFlow: {
+      sendCoinsConfirmed,
+      totalFees,
+      txnInputs,
+      txnOutputs,
+      sendFlowVerified,
+      sendFlowPassphraseEntered,
+      sendFlowPinEntered,
+      sendFlowCardsTapped,
+      signedTxn,
+      completed
+    }
+  };
+};
diff --git a/cysync/src/store/hooks/useExchange.ts b/cysync/src/store/hooks/useExchange.ts
index 9727feea..a7887cc5 100644
--- a/cysync/src/store/hooks/useExchange.ts
+++ b/cysync/src/store/hooks/useExchange.ts
@@ -1,4 +1,4 @@
-import { COINS } from '@cypherock/communication';
+// import { COINS } from '@cypherock/communication';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 
@@ -9,6 +9,7 @@ import {
   DisplayCoin,
   useReceiveTransaction,
   useSendTransaction,
+  useSwapTransaction,
   useWalletData
 } from '../hooks';
 import { useConnection, useWallets } from '../provider';
@@ -59,6 +60,7 @@ export const useExchange: UseExchange = () => {
   const { deviceConnection, deviceSdkVersion, setIsInFlow } = useConnection();
   const receiveTransaction = useReceiveTransaction();
   const sendTransaction = useSendTransaction();
+  const fswapTransaction = useSwapTransaction();
 
   const [fromToken, setFromToken] = useState<DisplayCoin>();
   const [toToken, setToToken] = useState<DisplayCoin>();
@@ -215,24 +217,31 @@ export const useExchange: UseExchange = () => {
    * Starts the first part of the swap process i.e the receive flow.
    */
   const startReceiveFlow = () => {
-    receiveTransaction
-      .handleReceiveTransaction({
-        connection: deviceConnection,
-        sdkVersion: deviceSdkVersion,
-        setIsInFlow,
-        walletId: toWallet._id,
-        coinType: toToken.slug,
-        coinName: COINS[toToken.slug]?.name,
-        xpub: toToken.xpub,
-        zpub: toToken.zpub,
-        passphraseExists: toWallet.passphraseSet
-      })
-      .then(() => {
-        logger.info('Swap Transaction: Receive Flow Started');
-      })
-      .catch(err => {
-        logger.error('Swap Transaction: Receive Flow Failed', err);
-      });
+    fswapTransaction.handleSwapTransaction({
+      connection: deviceConnection,
+      sdkVersion: deviceSdkVersion,
+      setIsInFlow,
+      sendFlow,
+      receiveFlow
+    });
+    // receiveTransaction
+    //   .handleReceiveTransaction({
+    //     connection: deviceConnection,
+    //     sdkVersion: deviceSdkVersion,
+    //     setIsInFlow,
+    //     walletId: toWallet._id,
+    //     coinType: toToken.slug,
+    //     coinName: COINS[toToken.slug]?.name,
+    //     xpub: toToken.xpub,
+    //     zpub: toToken.zpub,
+    //     passphraseExists: toWallet.passphraseSet
+    //   })
+    //   .then(() => {
+    //     logger.info('Swap Transaction: Receive Flow Started');
+    //   })
+    //   .catch(err => {
+    //     logger.error('Swap Transaction: Receive Flow Failed', err);
+    //   });
   };
 
   /**

From 7731450972ab935346501df92434c28afbb54b5b Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Tue, 17 Jan 2023 10:48:38 +0530
Subject: [PATCH 11/13] feat: integrated the swap transaction flow

---
 cysync/src/errors/helpers.ts                  |   4 +
 .../dialogs/VerifySwapDetailsDialog.tsx       |   3 +-
 .../sidebar/swap/panels/exchange/index.tsx    |  28 +-
 .../store/hooks/flows/useSwapTransaction.ts   | 142 ++++-------
 cysync/src/store/hooks/helper/FlowSteps.ts    |   3 +-
 cysync/src/store/hooks/useExchange.ts         | 240 +++++++-----------
 6 files changed, 142 insertions(+), 278 deletions(-)

diff --git a/cysync/src/errors/helpers.ts b/cysync/src/errors/helpers.ts
index be02b5ee..5dc7346d 100644
--- a/cysync/src/errors/helpers.ts
+++ b/cysync/src/errors/helpers.ts
@@ -129,6 +129,10 @@ const handleWalletErrors = (
 
 export const getMap = (langStrings: I18nStrings): CodeToErrorMap => {
   return {
+    [DeviceErrorType.SWAP_TXN_UNKNOWN_ERROR]: {
+      parent: CysyncError.SWAP_TXN_UNKNOWN_ERROR,
+      message: 'Swap Transaction Unknown Error'
+    },
     [DeviceErrorType.CONNECTION_CLOSED]: {
       parent: DeviceErrorType.DEVICE_DISCONNECTED_IN_FLOW,
       message: 'Device connection closed'
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
index 6168202a..d6d4bd26 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
@@ -28,7 +28,8 @@ const rotateKeyframe = keyframes`
 const receiveFlowStepsMessages: {
   [key in ReceiveFlowSteps]: string;
 } = {
-  [ReceiveFlowSteps.EnterPinAndTapCard]: 'Pin entered and card tapped',
+  [ReceiveFlowSteps.EnterPin]: 'Pin entered',
+  [ReceiveFlowSteps.TapCard]: 'Card tapped',
   [ReceiveFlowSteps.VerifyReceiveAddress]: 'Receive address verified',
   [ReceiveFlowSteps.Completed]: 'Receive flow completed'
 };
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
index 85bbae2d..cc909974 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -5,10 +5,8 @@ import React, { useEffect, useState } from 'react';
 
 import Button from '../../../../../../designSystem/designComponents/buttons/button';
 import { useExchange } from '../../../../../../store/hooks';
-import { ReceiveFlowSteps } from '../../../../../../store/hooks/helper/FlowSteps';
 
 import SwapCompletedDialog from './dialogs/SwapCompletedDialog';
-import VerifySendAddressDialog from './dialogs/VerifySendAddressDialog';
 import VerifySwapDetailsDialog from './dialogs/VerifySwapDetailsDialog';
 import NetworkFeeDetails from './NetworkFeeDetails';
 import SwapDetailsForm from './SwapDetailsForm';
@@ -48,14 +46,13 @@ const ExchangePanel = () => {
     exchangeRate,
     fees,
     amountToReceive,
-    startReceiveFlow,
+    startSwapFlow,
     cancelSwapTransaction,
     receiveFlowStep,
     sendFlowStep,
     receiveAddress,
     isSwapCompleted,
     swapTransaction,
-    handleUserVerifiedSendAddress,
     toWallet,
     setToWallet,
     fromWallet,
@@ -66,8 +63,6 @@ const ExchangePanel = () => {
   } = useExchange();
 
   const [showSwapCompletedDialog, setSwapCompletedDialog] = useState(false);
-  const [showSendAddressVerifyDialog, setShowSendAddressVerifyDialog] =
-    useState(false);
   const [showSwapDetailsVerifyDialog, setShowSwapDetailsVerifyDialog] =
     useState(false);
 
@@ -78,15 +73,6 @@ const ExchangePanel = () => {
     }
   }, [isSwapCompleted]);
 
-  useEffect(() => {
-    if (
-      swapTransaction.payinAddress &&
-      receiveFlowStep === ReceiveFlowSteps.Completed
-    ) {
-      setShowSendAddressVerifyDialog(true);
-    }
-  }, [swapTransaction, receiveFlowStep]);
-
   const handleChangeAmountToSend = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -139,7 +125,7 @@ const ExchangePanel = () => {
               <Button
                 onClick={() => {
                   setShowSwapDetailsVerifyDialog(true);
-                  startReceiveFlow();
+                  startSwapFlow();
                 }}
               >
                 <Typography
@@ -180,17 +166,9 @@ const ExchangePanel = () => {
             setSwapCompletedDialog(false);
           }}
           toTokenName={COINS[toToken.slug]?.name}
-          transactionId={swapTransaction.id}
+          transactionId={swapTransaction.changellyTxnId}
         />
       )}
-      <VerifySendAddressDialog
-        open={showSendAddressVerifyDialog}
-        onVerify={() => {
-          handleUserVerifiedSendAddress();
-          setShowSendAddressVerifyDialog(false);
-        }}
-        url={`https://changelly.com/track/${swapTransaction.id}`}
-      />
     </Root>
   );
 };
diff --git a/cysync/src/store/hooks/flows/useSwapTransaction.ts b/cysync/src/store/hooks/flows/useSwapTransaction.ts
index 2eea3956..a1a8faa9 100644
--- a/cysync/src/store/hooks/flows/useSwapTransaction.ts
+++ b/cysync/src/store/hooks/flows/useSwapTransaction.ts
@@ -10,6 +10,7 @@ import {
   WalletStates
 } from '@cypherock/protocols';
 import { WalletErrorType } from '@cypherock/wallet';
+import BigNumber from 'bignumber.js';
 import { useEffect, useRef, useState } from 'react';
 
 import {
@@ -44,8 +45,7 @@ export interface HandleSwapTransactionOptions {
     zpub?: string;
     customAccount?: string;
     newAccountId?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    outputList: any[];
+    outputList: any;
     fees: number;
     isSendAll?: boolean;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -71,6 +71,7 @@ export interface UseSwapTransactionValues {
   receiveFlow: {
     receiveAddress: string;
     transactionMetadataSent: boolean;
+    receiveFlowPinEntered: boolean;
     receiveFlowCardTapped: boolean;
     receiveAddressVerified: boolean;
     receiveFlowPassphraseEntered: boolean;
@@ -87,6 +88,8 @@ export interface UseSwapTransactionValues {
     signedTxn: string;
     completed: boolean;
   };
+  changellyAddress: string;
+  changellyTxnId: string;
 }
 
 export type UseSwapTransaction = () => UseSwapTransactionValues;
@@ -102,6 +105,10 @@ export const useSwapTransaction: UseSwapTransaction = () => {
   const [receiveFlowPassphraseEntered, setReceiveFlowPassphraseEntered] =
     useState(false);
   const [receiveFlowCardTapped, setReceiveFlowCardTapped] = useState(false);
+  const [receiveFlowPinEntered, setReceiveFlowPinEntered] = useState(false);
+
+  const [changellyAddress, setChangellyAddress] = useState('');
+  const [changellyTxnId, setChangellyTxnId] = useState('');
 
   const [sendCoinsConfirmed, setSendCoinsConfirmed] = useState(false);
   const [totalFees, setTotalFees] = useState('0');
@@ -130,29 +137,22 @@ export const useSwapTransaction: UseSwapTransaction = () => {
   const resetHooks = () => {
     setReceiveCoinsConfirmed(false);
     setSendCoinsConfirmed(false);
-    // setCoinsConfirmed(false);
     setReceiveAddressVerified(false);
-    // setVerified(false);
     setCompleted(false);
     setReceiveAddress('');
     setTransactionMetadataSent(false);
-    // setPathSent(false);
-    // setCardTapped(false);
     setReceiveFlowCardTapped(false);
+    setReceiveFlowPinEntered(false);
     setSendFlowCardsTapped(false);
     setReceiveFlowPassphraseEntered(false);
     setSendFlowPassphraseEntered(false);
-    // setXpubMissing(false);
     setReceiveAccountExists(false);
-    // setAccountExists(false);
-    // setReplaceAccount(false);
-    // setVerifiedAccountId(false);
-    // setVerifiedReplaceAccount(false);
-    // setReplaceAccountStarted(false);
     setTotalFees('0');
     setSendFlowVerified(false);
     setSendFlowPinEntered(false);
     setSignedTxn('');
+    setChangellyAddress('');
+    setChangellyTxnId('');
     userAction.current = new DeferredReference<void>();
     replaceAccountAction.current = new DeferredReference<void>();
     swapTransaction.removeAllListeners();
@@ -160,7 +160,6 @@ export const useSwapTransaction: UseSwapTransaction = () => {
 
   const clearAll = () => {
     setIsCancelled(false);
-    // clearErrorObj();
     resetHooks();
   };
 
@@ -169,7 +168,11 @@ export const useSwapTransaction: UseSwapTransaction = () => {
     walletId: string,
     coinType: string
   ) => {
-    logger.info('New receive address', { coinType, walletId, addr });
+    logger.info('SwapTransaction: New receive address', {
+      coinType,
+      walletId,
+      addr
+    });
     addReceiveAddressHook(addr, walletId, coinType);
     receiveAddressDb.insert({ address: addr, walletId, coinType });
   };
@@ -197,11 +200,7 @@ export const useSwapTransaction: UseSwapTransaction = () => {
       clearAll();
 
       logger.info(`SwapTransaction: Initiated`);
-      // logger.info('Swap Transaction Send Flow Details', {
-      //     walletId: sendFlow.walletId,
-      //     coinType: sendFlow.coinType,
-      //     contactAbbr: sendFlow.data.contractAbbr,
-      // });
+
       logger.debug('SwapTransaction: Receive Flow Details', {
         walletId: receiveFlow.walletId,
         coinType: receiveFlow.coinType,
@@ -209,7 +208,7 @@ export const useSwapTransaction: UseSwapTransaction = () => {
       });
 
       logger.debug('SwapTransaction: ReceiveAddress Xpub', {
-        xpud: receiveFlow.xpub,
+        xpub: receiveFlow.xpub,
         zpub: receiveFlow.zpub
       });
 
@@ -359,79 +358,6 @@ export const useSwapTransaction: UseSwapTransaction = () => {
         }
       );
 
-      // EVENT CURRENTLY DOESN'T EXIST
-      // receiveTransaction.on('replaceAccountRequired', value => {
-      //     if (value) {
-      //         logger.verbose(
-      //             'ReceiveAddress: Device needs to replace an account to add a new one',
-      //             {
-      //                 coinType
-      //             }
-      //         );
-      //         setReplaceAccount(true);
-      //     }
-      // });
-
-      // EVENT CURRENTLY DOESN'T EXIST
-      // receiveTransaction.on('accountVerified', value => {
-      //     if (value) {
-      //         logger.verbose('ReceiveAddress: Account confirmed on device', {
-      //             coinType
-      //         });
-      //         setVerifiedAccountId(true);
-      //     } else {
-      //         const cyError = new CyError(
-      //             CysyncError.RECEIVE_TXN_REJECTED,
-      //             coinName
-      //         );
-      //         setErrorObj(handleErrors(errorObj, cyError, flowName, { coinType }));
-      //     }
-      // });
-
-      // EVENT CURRENTLY DOESN'T EXIST
-      // receiveTransaction.on('replaceAccountSelected', value => {
-      //     if (value) {
-      //         logger.verbose('ReceiveAddress: Replace account selected on device', {
-      //             coinType
-      //         });
-      //         setReplaceAccountSelected(true);
-      //     } else {
-      //         setReplaceAccountSelected(false);
-      //     }
-      // });
-
-      // EVENT CURRENTLY DOESN'T EXIST
-      // receiveTransaction.on('replaceAccountVerified', value => {
-      //     if (value) {
-      //         logger.verbose(
-      //             'ReceiveAddress: Replace account confirmed on device',
-      //             { coinType }
-      //         );
-      //         setVerifiedReplaceAccount(true);
-      //     } else {
-      //         const cyError = new CyError(
-      //             CysyncError.RECEIVE_TXN_REJECTED,
-      //             coinName
-      //         );
-      //         setErrorObj(handleErrors(errorObj, cyError, flowName, { coinType }));
-      //     }
-      // });
-
-      // EVENT WAS ONLY ON RUN LEGACY
-      // receiveTransaction.on('noXpub', () => {
-      //     setTimeout(() => {
-      //         setXpubMissing(true);
-      //         const cyError = new CyError(
-      //             CysyncError.RECEIVE_TXN_DEVICE_MISCONFIGURED
-      //         );
-      //         cyError.pushSubErrors(
-      //             CysyncError.RECEIVE_TXN_XPUB_MISSING,
-      //             'Xpub missing on device'
-      //         );
-      //         setErrorObj(handleErrors(errorObj, cyError, flowName, { coinType }));
-      //     }, 3000);
-      // });
-
       swapTransaction.on(
         SWAP_TRANSACTION_EVENTS.SWAP_TRANSACTION_METADATA_SENT,
         () => {
@@ -449,7 +375,7 @@ export const useSwapTransaction: UseSwapTransaction = () => {
           const cyError = new CyError();
           if (val) {
             logger.verbose(
-              'ReceiveAddress: Received address generated on device',
+              'SwapTransaction: Received address generated on device',
               {
                 deviceAddress: val,
                 coinType: receiveFlow.coinType,
@@ -494,6 +420,7 @@ export const useSwapTransaction: UseSwapTransaction = () => {
           } else {
             cyError.setError(CysyncError.RECEIVE_TXN_DIFFERENT_ADDRESS_BY_USER);
           }
+
           if (cyError.isSet)
             setErrorObj(
               handleErrors(errorObj, cyError, flowName, {
@@ -504,7 +431,7 @@ export const useSwapTransaction: UseSwapTransaction = () => {
       );
 
       swapTransaction.on(SWAP_TRANSACTION_EVENTS.RECEIVE_ADDRESS, address => {
-        logger.info('ReceiveAddress: Address generated', {
+        logger.info('SwapTransaction: ReceiveAddress: Address generated', {
           coinType: receiveFlow.coinType,
           address
         });
@@ -529,7 +456,7 @@ export const useSwapTransaction: UseSwapTransaction = () => {
             logger.verbose('SwapTransaction: ReceiveAddress: Pin entered', {
               coinType: receiveFlow.coinType
             });
-            setReceiveFlowCardTapped(true);
+            setReceiveFlowPinEntered(true);
           } else {
             const cyError = new CyError(
               CysyncError.WALLET_LOCKED_DUE_TO_INCORRECT_PIN
@@ -549,6 +476,24 @@ export const useSwapTransaction: UseSwapTransaction = () => {
         }
       );
 
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.CHANGELLY_ADDRESS, address => {
+        logger.verbose('SwapTransaction: ChangellyAddress: Address generated', {
+          receiveCoinType: receiveFlow.coinType,
+          sendCoinType: sendFlow.coinType,
+          address
+        });
+        setChangellyAddress(address);
+      });
+
+      swapTransaction.on(SWAP_TRANSACTION_EVENTS.CHANGELLY_ID, id => {
+        logger.verbose('SwapTransaction: ChangellyId: Id generated', {
+          receiveCoinType: receiveFlow.coinType,
+          sendCoinType: sendFlow.coinType,
+          id
+        });
+        setChangellyTxnId(id);
+      });
+
       swapTransaction.on(
         SWAP_TRANSACTION_EVENTS.SEND_COINS_CONFIRMED,
         coins => {
@@ -838,6 +783,7 @@ export const useSwapTransaction: UseSwapTransaction = () => {
     receiveFlow: {
       receiveAddress,
       transactionMetadataSent,
+      receiveFlowPinEntered,
       receiveFlowCardTapped,
       receiveAddressVerified,
       receiveFlowPassphraseEntered,
@@ -855,6 +801,8 @@ export const useSwapTransaction: UseSwapTransaction = () => {
       sendFlowCardsTapped,
       signedTxn,
       completed
-    }
+    },
+    changellyAddress,
+    changellyTxnId
   };
 };
diff --git a/cysync/src/store/hooks/helper/FlowSteps.ts b/cysync/src/store/hooks/helper/FlowSteps.ts
index 5444519f..39629006 100644
--- a/cysync/src/store/hooks/helper/FlowSteps.ts
+++ b/cysync/src/store/hooks/helper/FlowSteps.ts
@@ -1,5 +1,6 @@
 export enum ReceiveFlowSteps {
-  EnterPinAndTapCard,
+  EnterPin,
+  TapCard,
   VerifyReceiveAddress,
   Completed
 }
diff --git a/cysync/src/store/hooks/useExchange.ts b/cysync/src/store/hooks/useExchange.ts
index a7887cc5..b3af820e 100644
--- a/cysync/src/store/hooks/useExchange.ts
+++ b/cysync/src/store/hooks/useExchange.ts
@@ -1,5 +1,5 @@
-// import { COINS } from '@cypherock/communication';
-import axios from 'axios';
+import { COINS } from '@cypherock/communication';
+import Server from '@cypherock/server-wrapper';
 import { useEffect, useState } from 'react';
 
 import logger from '../../mainProcess/logger';
@@ -7,18 +7,14 @@ import { coinDb, customAccountDb, Wallet } from '../database';
 import {
   changeFormatOfOutputList,
   DisplayCoin,
-  useReceiveTransaction,
-  useSendTransaction,
   useSwapTransaction,
+  UseSwapTransactionValues,
   useWalletData
 } from '../hooks';
 import { useConnection, useWallets } from '../provider';
 
 import { ReceiveFlowSteps, SendFlowSteps } from './helper/FlowSteps';
 
-// TODO: get the base URL from the config
-const baseUrl = 'http://localhost:5000/swap';
-
 export interface UseExchangeValues {
   fromToken: DisplayCoin;
   setFromToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
@@ -32,14 +28,10 @@ export interface UseExchangeValues {
   receiveAddress: string;
   // tslint:disable-next-line: no-any
   getSwapTransactions: (walletId: string) => Promise<any>;
-  startReceiveFlow: () => void;
-  generateSwapTransaction: () => Promise<void>;
-  startSendFlow: () => void;
+  startSwapFlow: () => void;
   cancelSwapTransaction: () => void;
   isSwapCompleted: boolean;
-  // tslint:disable-next-line: no-any
-  swapTransaction: any;
-  handleUserVerifiedSendAddress: () => void;
+  swapTransaction: UseSwapTransactionValues;
   toWallet: Wallet;
   setToWallet: React.Dispatch<React.SetStateAction<Wallet>>;
   fromWallet: Wallet;
@@ -58,9 +50,7 @@ export const useExchange: UseExchange = () => {
   const { getCoinsWithPrices } = useWalletData();
 
   const { deviceConnection, deviceSdkVersion, setIsInFlow } = useConnection();
-  const receiveTransaction = useReceiveTransaction();
-  const sendTransaction = useSendTransaction();
-  const fswapTransaction = useSwapTransaction();
+  const swapTransaction = useSwapTransaction();
 
   const [fromToken, setFromToken] = useState<DisplayCoin>();
   const [toToken, setToToken] = useState<DisplayCoin>();
@@ -76,12 +66,9 @@ export const useExchange: UseExchange = () => {
   const [exchangeRate, setExchangeRate] = useState('');
   const [receiveAddress, setReceiveAddress] = useState('');
   const [isSwapCompleted, setIsSwapCompleted] = useState(false);
-  const [swapTransaction, setSwapTransaction] = useState({
-    id: '',
-    payinAddress: ''
-  });
+
   const [receiveFlowStep, setReceiveFlowStep] = useState<ReceiveFlowSteps>(
-    ReceiveFlowSteps.EnterPinAndTapCard
+    ReceiveFlowSteps.EnterPin
   );
   const [sendFlowStep, setSendFlowStep] = useState<SendFlowSteps>(
     SendFlowSteps.Waiting
@@ -113,38 +100,45 @@ export const useExchange: UseExchange = () => {
     }
   }, [isWalletLoading, allWallets]);
 
+  useEffect(() => {
+    if (swapTransaction.receiveFlow.receiveFlowCardTapped) {
+      setReceiveFlowStep(ReceiveFlowSteps.TapCard);
+      setReceiveAddress(swapTransaction.receiveFlow.receiveAddress);
+    }
+  }, [swapTransaction.receiveFlow.receiveFlowPinEntered]);
+
   // Set the receive address once the card is tapped
   useEffect(() => {
-    if (receiveTransaction.cardTapped) {
+    if (swapTransaction.receiveFlow.receiveFlowCardTapped) {
       setReceiveFlowStep(ReceiveFlowSteps.VerifyReceiveAddress);
-      setReceiveAddress(receiveTransaction?.receiveAddress);
+      setReceiveAddress(swapTransaction.receiveFlow.receiveAddress);
     }
-  }, [receiveTransaction.cardTapped]);
+  }, [swapTransaction.receiveFlow.receiveFlowCardTapped]);
 
   useEffect(() => {
-    if (receiveTransaction.verified) {
+    if (swapTransaction.receiveFlow.receiveAddressVerified) {
       setReceiveFlowStep(ReceiveFlowSteps.Completed);
       setSendFlowStep(SendFlowSteps.VerifySendAddress);
     }
-  }, [receiveTransaction.verified]);
+  }, [swapTransaction.receiveFlow.receiveAddressVerified]);
 
   useEffect(() => {
-    if (sendTransaction.verified) {
-      setSendFlowStep(SendFlowSteps.EnterPin);
+    if (swapTransaction.sendFlow.sendFlowCardsTapped) {
+      setSendFlowStep(SendFlowSteps.VerifySendAddress);
     }
-  }, [sendTransaction.verified]);
+  }, [swapTransaction.sendFlow.sendFlowCardsTapped]);
 
   useEffect(() => {
-    if (sendTransaction.pinEntered) {
-      setSendFlowStep(SendFlowSteps.TapCard);
+    if (swapTransaction.sendFlow.sendFlowVerified) {
+      setSendFlowStep(SendFlowSteps.EnterPin);
     }
-  }, [sendTransaction.pinEntered]);
+  }, [swapTransaction.sendFlow.sendFlowVerified]);
 
   useEffect(() => {
-    if (sendTransaction.cardsTapped) {
-      setSendFlowStep(SendFlowSteps.SignTransaction);
+    if (swapTransaction.sendFlow.sendFlowPinEntered) {
+      setSendFlowStep(SendFlowSteps.TapCard);
     }
-  }, [sendTransaction.cardsTapped]);
+  }, [swapTransaction.sendFlow.sendFlowPinEntered]);
 
   useEffect(() => {
     if (fromToken && toToken && amountToSend) {
@@ -153,53 +147,29 @@ export const useExchange: UseExchange = () => {
   }, [fromToken, toToken, amountToSend]);
 
   useEffect(() => {
-    if (receiveTransaction.verified) {
-      generateSwapTransaction();
-    }
-  }, [receiveTransaction.verified]);
-
-  useEffect(() => {
-    if (sendTransaction.signedTxn) {
+    if (swapTransaction.sendFlow.signedTxn) {
       setIsSwapCompleted(true);
     }
-  }, [sendTransaction.signedTxn]);
+  }, [swapTransaction.sendFlow.signedTxn]);
 
   /**
    * Fetches the rate of exchanging tokens from `fromToken` to `toToken` for an
    * amount of `amountToSend`. Also updates the `fees` and `amountToReceive`.
    */
   const getCurrentExchangeRate = async () => {
-    const { data } = await axios.get(`${baseUrl}/exchangeDetails`, {
-      params: { from: fromToken.slug, to: toToken.slug, amount: amountToSend }
-    });
+    const { data } = await Server.swap
+      .getExchangeRate({
+        from: fromToken.slug,
+        to: toToken.slug,
+        amount: amountToSend
+      })
+      .request();
+
     setExchangeRate(data.message.result[0].rate);
     setFees(data.message.result[0].fee);
     setAmountToReceive(data.message.result[0].result);
   };
 
-  /**
-   *  Creates a swap transaction between `fromToken` and `toToken` for an amount
-   *
-   * @param walletId The wallet to use for the swap
-   * @returns The transaction ID to later check the status of the swap and the
-   * payment address to send the tokens to.
-   */
-  const createSwapTransaction = async (walletId: string) => {
-    const { data } = await axios.get(`${baseUrl}/transaction`, {
-      params: {
-        walletId,
-        from: fromToken.slug,
-        to: toToken.slug,
-        amount: amountToSend,
-        address: receiveAddress
-      }
-    });
-    return {
-      id: data.message.result.id,
-      payinAddress: data.message.result.payinAddress
-    };
-  };
-
   /**
    * Fetches all the transactions for a given wallet.
    *
@@ -207,57 +177,12 @@ export const useExchange: UseExchange = () => {
    * @returns An array of transactions.
    */
   const getSwapTransactions = async (walletId: string) => {
-    const { data } = await axios.get(`${baseUrl}/transactions`, {
-      params: { walletId }
-    });
+    const { data } = await Server.swap.getTransactions({ walletId }).request();
     return data.message.result;
   };
 
-  /**
-   * Starts the first part of the swap process i.e the receive flow.
-   */
-  const startReceiveFlow = () => {
-    fswapTransaction.handleSwapTransaction({
-      connection: deviceConnection,
-      sdkVersion: deviceSdkVersion,
-      setIsInFlow,
-      sendFlow,
-      receiveFlow
-    });
-    // receiveTransaction
-    //   .handleReceiveTransaction({
-    //     connection: deviceConnection,
-    //     sdkVersion: deviceSdkVersion,
-    //     setIsInFlow,
-    //     walletId: toWallet._id,
-    //     coinType: toToken.slug,
-    //     coinName: COINS[toToken.slug]?.name,
-    //     xpub: toToken.xpub,
-    //     zpub: toToken.zpub,
-    //     passphraseExists: toWallet.passphraseSet
-    //   })
-    //   .then(() => {
-    //     logger.info('Swap Transaction: Receive Flow Started');
-    //   })
-    //   .catch(err => {
-    //     logger.error('Swap Transaction: Receive Flow Failed', err);
-    //   });
-  };
-
-  /**
-   * Creates a swap transaction with the toWallet id as the receiving wallet.
-   */
-  const generateSwapTransaction = async () => {
-    const sendDetails = await createSwapTransaction(toWallet?._id);
-    setSwapTransaction(sendDetails);
-  };
-
-  /**
-   * Starts the second part of the swap process i.e the send flow.
-   */
-  const startSendFlow = async () => {
-    logger.info('Swap Transaction: Swap Transaction Created', swapTransaction);
-
+  const startSwapFlow = async () => {
+    logger.info('SwapTransaction: Swap Flow Started');
     let customAccount: string | undefined;
 
     if (fromToken.slug === 'near') {
@@ -270,58 +195,68 @@ export const useExchange: UseExchange = () => {
 
     const recipientData = {
       id: 0,
-      recipient: swapTransaction.payinAddress,
+      recipient: '', // will be set to changelly address by the protocol
       amount: amountToSend,
       errorRecipient: '',
       errorAmount: ''
     };
 
-    sendTransaction
-      .handleSendTransaction({
+    swapTransaction
+      .handleSwapTransaction({
         connection: deviceConnection,
         sdkVersion: deviceSdkVersion,
         setIsInFlow,
-        walletId: fromWallet?._id,
-        xpub: fromToken.xpub,
-        zpub: fromToken.zpub,
-        coinType: fromToken.slug,
-        fees: +fees,
-        pinExists: fromWallet?.passwordSet,
-        passphraseExists: fromWallet?.passphraseSet,
-        customAccount,
-        newAccountId: null,
-        outputList: changeFormatOfOutputList(
-          [recipientData],
-          fromToken.slug,
-          undefined
-        ),
-        data: {},
-        isSendAll: false
+        sendAmount: amountToSend,
+        receiveAmount: amountToReceive,
+        changellyFee: fees,
+        sendFlow: {
+          walletId: fromWallet?._id,
+          xpub: fromToken.xpub,
+          zpub: fromToken.zpub,
+          coinType: fromToken.slug,
+          fees: +fees,
+          pinExists: fromWallet?.passwordSet,
+          passphraseExists: fromWallet?.passphraseSet,
+          customAccount,
+          newAccountId: null,
+          outputList: changeFormatOfOutputList(
+            [recipientData],
+            fromToken.slug,
+            undefined
+          ),
+          data: {},
+          isSendAll: false
+        },
+        receiveFlow: {
+          walletId: toWallet._id,
+          coinType: toToken.slug,
+          coinName: COINS[toToken.slug]?.name,
+          xpub: toToken.xpub,
+          zpub: toToken.zpub,
+          passphraseExists: toWallet.passphraseSet
+        }
       })
       .then(() => {
-        logger.info('Swap Transaction: Send Flow Completed');
+        logger.info('SwapTransaction: Started');
+        setIsSwapCompleted(true);
       })
       .catch(err => {
-        logger.error('Swap Transaction: Send Flow Failed', err);
+        logger.error('SwapTransaction: Failed', err);
       });
   };
 
-  /**
-   * Cancel the receive and send flow.
-   */
-  const cancelSwapTransaction = () => {
-    receiveTransaction.cancelReceiveTxn(deviceConnection);
-    logger.info('Swap Transaction: Receive Flow Cancelled');
-
-    sendTransaction.cancelSendTxn(deviceConnection);
-    logger.info('Swap Transaction: Send Flow Cancelled');
+  const resetStates = () => {
+    setReceiveFlowStep(ReceiveFlowSteps.EnterPin);
+    setSendFlowStep(SendFlowSteps.Waiting);
   };
 
   /**
-   * Start the send flow once the user verifies the send address.
+   * Cancel the receive and send flow.
    */
-  const handleUserVerifiedSendAddress = () => {
-    startSendFlow();
+  const cancelSwapTransaction = () => {
+    resetStates();
+    swapTransaction.cancelSwapTransaction(deviceConnection);
+    logger.info('SwapTransaction: Cancelled');
   };
 
   /**
@@ -350,13 +285,10 @@ export const useExchange: UseExchange = () => {
     amountToReceive,
     receiveAddress,
     getSwapTransactions,
-    startReceiveFlow,
-    generateSwapTransaction,
-    startSendFlow,
+    startSwapFlow,
     cancelSwapTransaction,
     isSwapCompleted,
     swapTransaction,
-    handleUserVerifiedSendAddress,
     toWallet,
     setToWallet,
     fromWallet,

From e2b91c9bd1a2080b2903b551003130da8a586b31 Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Thu, 16 Feb 2023 17:37:23 +0530
Subject: [PATCH 12/13] chore: swap integration updated

---
 .../swap/panels/exchange/SwapDetailsForm.tsx  | 29 +--------
 .../sidebar/swap/panels/exchange/index.tsx    |  4 +-
 .../sidebar/swap/panels/history/index.tsx     | 10 ++--
 .../store/hooks/flows/useSwapTransaction.ts   |  7 ++-
 cysync/src/store/hooks/useExchange.ts         | 60 +++++++++++++++++--
 5 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
index f2e992f3..b5510e12 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
@@ -168,7 +168,7 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
                   disabled={fromTokenSlug === ''}
                   handleChange={() => {
                     setIsAmountToSendMax(currVal => !currVal);
-                    setAmountToSend(fromToken?.totalBalance || '0');
+                    setAmountToSend(fromToken.displayBalance || '0');
                   }}
                 />
               </Grid>
@@ -181,6 +181,7 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
             value={amountToSend}
             onChange={handleChangeAmountToSend}
             className={classesForm}
+            disabled={isAmountToSendMax}
           />
         </Grid>
       </Grid>
@@ -250,34 +251,10 @@ const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
           </FormControl>
         </Grid>
         <Grid item xs={6}>
-          <Grid container>
-            <Grid
-              container
-              display={'flex'}
-              justifyContent={'flex-end'}
-              alignContent={'center'}
-              alignItems={'center'}
-              gap={2}
-            >
-              <Grid item>
-                <Typography variant="h6" color="textSecondary">
-                  Max
-                </Typography>
-              </Grid>
-              <Grid item>
-                <SwitchButton
-                  completed={false}
-                  handleChange={() => {
-                    //   empty
-                  }}
-                />
-              </Grid>
-            </Grid>
-          </Grid>
           <Box
             border={'0.5px solid #CDCDCD'}
             borderRadius="5px"
-            marginTop="10px"
+            marginTop="35px"
             padding="5px 10px"
             textAlign="right"
           >
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
index 68d78cae..cab4cf22 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -59,7 +59,8 @@ const ExchangePanel = () => {
     setFromWallet,
     fromWalletCoinData,
     toWalletCoinData,
-    allWallets
+    allWallets,
+    deviceSerial
   } = useExchange();
 
   const [showSwapCompletedDialog, setSwapCompletedDialog] = useState(false);
@@ -127,6 +128,7 @@ const ExchangePanel = () => {
                   setShowSwapDetailsVerifyDialog(true);
                   startSwapFlow();
                 }}
+                disabled={!deviceSerial}
               >
                 <Typography
                   variant="h5"
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
index 26f0e924..7e6886ea 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
@@ -92,7 +92,7 @@ const groupTransactionsByDate = (
 
 const HistoryPanel = () => {
   const { allWallets, isLoading } = useWallets();
-  const { getSwapTransactions } = useExchange();
+  const { getSwapTransactions, changellyCoinId } = useExchange();
   const [rawTransactions, setRawTransactions] = useState([]);
   const [selectedWalletIndex, setSelectedWalletIndex] = useState(0);
   const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
@@ -314,11 +314,11 @@ const HistoryPanel = () => {
                             alignItems={'center'}
                           >
                             <CoinIcons
-                              initial={txn.currencyFrom.toUpperCase()}
+                              initial={changellyCoinId(txn.currencyFrom)}
                               style={{ marginRight: '10px' }}
                             />
                             <Typography variant="body1" color="textPrimary">
-                              {COINS[txn.currencyFrom]?.name}
+                              {txn.currencyFrom}
                             </Typography>
                           </Grid>
                           <Grid
@@ -339,11 +339,11 @@ const HistoryPanel = () => {
                             alignItems={'center'}
                           >
                             <CoinIcons
-                              initial={txn.currencyTo.toUpperCase()}
+                              initial={changellyCoinId(txn.currencyTo)}
                               style={{ marginRight: '10px' }}
                             />
                             <Typography variant="body1" color="textPrimary">
-                              {COINS[txn.currencyTo]?.name}
+                              {txn.currencyTo}
                             </Typography>
                           </Grid>
                         </Grid>
diff --git a/cysync/src/store/hooks/flows/useSwapTransaction.ts b/cysync/src/store/hooks/flows/useSwapTransaction.ts
index 2f8a9c80..6da878d5 100644
--- a/cysync/src/store/hooks/flows/useSwapTransaction.ts
+++ b/cysync/src/store/hooks/flows/useSwapTransaction.ts
@@ -69,6 +69,7 @@ export interface HandleSwapTransactionOptions {
     passphraseExists?: boolean;
     customAccount?: string;
   };
+  deviceSerialId: string;
 }
 
 export interface UseSwapTransactionValues {
@@ -200,7 +201,8 @@ export const useSwapTransaction: UseSwapTransaction = () => {
       receiveAmount,
       changellyFee,
       receiveFlow,
-      sendFlow
+      sendFlow,
+      deviceSerialId
     }) => {
       clearAll();
 
@@ -735,7 +737,8 @@ export const useSwapTransaction: UseSwapTransaction = () => {
             fee: sendFlow.fees,
             isSendAll: sendFlow.isSendAll,
             data: sendFlow.data
-          }
+          },
+          deviceSerialId
         });
 
         setIsInFlow(false);
diff --git a/cysync/src/store/hooks/useExchange.ts b/cysync/src/store/hooks/useExchange.ts
index ac72ffe3..e764b90e 100644
--- a/cysync/src/store/hooks/useExchange.ts
+++ b/cysync/src/store/hooks/useExchange.ts
@@ -1,4 +1,4 @@
-import { COINS } from '@cypherock/communication';
+import { COINS, Erc20CoinData } from '@cypherock/communication';
 import Server from '@cypherock/server-wrapper';
 import { useEffect, useState } from 'react';
 
@@ -41,6 +41,18 @@ export interface UseExchangeValues {
   allWallets: Wallet[];
   receiveFlowStep: ReceiveFlowSteps;
   sendFlowStep: SendFlowSteps;
+  changellyCoinId: (
+    coinId: string
+  ) =>
+    | 'bitcoin'
+    | 'ethereum'
+    | 'solana'
+    | 'polygon'
+    | 'bitcoin-testnet'
+    | 'near'
+    | 'litecoin'
+    | 'dogecoin';
+  deviceSerial: string;
 }
 
 export type UseExchange = () => UseExchangeValues;
@@ -49,7 +61,8 @@ export const useExchange: UseExchange = () => {
   const { allWallets, isLoading: isWalletLoading } = useWallets();
   const { getCoinsWithPrices } = useWalletData();
 
-  const { deviceConnection, deviceSdkVersion, setIsInFlow } = useConnection();
+  const { deviceConnection, deviceSdkVersion, setIsInFlow, deviceSerial } =
+    useConnection();
   const swapTransaction = useSwapTransaction();
 
   const [fromToken, setFromToken] = useState<DisplayCoin>();
@@ -192,6 +205,15 @@ export const useExchange: UseExchange = () => {
       errorAmount: ''
     };
 
+    const coinAbbr = fromToken
+      ? COINS[fromToken.coinId]?.tokenList[fromToken.coinId]?.abbr
+      : COINS[fromToken.coinId].abbr;
+
+    let contractAddress: string | undefined;
+    if (fromToken && fromToken instanceof Erc20CoinData) {
+      contractAddress = fromToken.address;
+    }
+
     swapTransaction
       .handleSwapTransaction({
         connection: deviceConnection,
@@ -218,9 +240,11 @@ export const useExchange: UseExchange = () => {
             undefined
           ),
           data: {
-            gasLimit: 21000
+            gasLimit: 21000,
+            contractAddress,
+            contractAbbr: coinAbbr ? coinAbbr.toUpperCase() : undefined
           },
-          isSendAll: false
+          isSendAll: true
         },
         receiveFlow: {
           walletId: toWallet._id,
@@ -231,7 +255,8 @@ export const useExchange: UseExchange = () => {
           coinName: COINS[toToken.coinId]?.name,
           xpub: toToken.xpub,
           passphraseExists: toWallet.passphraseSet
-        }
+        },
+        deviceSerialId: deviceSerial
       })
       .then(() => {
         logger.info('SwapTransaction: Started');
@@ -271,6 +296,27 @@ export const useExchange: UseExchange = () => {
     return unsortedCoins;
   };
 
+  const changellyCoinId = (coinId: string) => {
+    switch (coinId) {
+      case 'btc':
+        return 'bitcoin';
+      case 'eth':
+        return 'ethereum';
+      case 'sol':
+        return 'solana';
+      case 'matic':
+        return 'polygon';
+      case 'btct':
+        return 'bitcoin-testnet';
+      case 'near':
+        return 'near';
+      case 'ltc':
+        return 'litecoin';
+      case 'doge':
+        return 'dogecoin';
+    }
+  };
+
   return {
     fromToken,
     setFromToken,
@@ -295,6 +341,8 @@ export const useExchange: UseExchange = () => {
     toWalletCoinData,
     allWallets,
     receiveFlowStep,
-    sendFlowStep
+    sendFlowStep,
+    changellyCoinId,
+    deviceSerial
   };
 };

From aab270554cd7f91cb11a41a8848c5c287a35e8bc Mon Sep 17 00:00:00 2001
From: Arnab Sen <arnab@cypherock.com>
Date: Thu, 9 Mar 2023 11:40:16 +0530
Subject: [PATCH 13/13] chore: fix merge conflicts

---
 cysync/src/errors/helpers.ts                                   | 2 +-
 .../mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx   | 3 +--
 cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx | 1 -
 cysync/src/store/hooks/useExchange.ts                          | 3 +--
 4 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/cysync/src/errors/helpers.ts b/cysync/src/errors/helpers.ts
index 097c749c..c7a69f04 100644
--- a/cysync/src/errors/helpers.ts
+++ b/cysync/src/errors/helpers.ts
@@ -129,7 +129,7 @@ const handleWalletErrors = (
 
 export const getMap = (langStrings: I18nStrings): CodeToErrorMap => {
   return {
-    [DeviceErrorType.SWAP_TXN_UNKNOWN_ERROR]: {
+    [CysyncError.SWAP_TXN_UNKNOWN_ERROR]: {
       parent: CysyncError.SWAP_TXN_UNKNOWN_ERROR,
       message: 'Swap Transaction Unknown Error'
     },
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
index b5510e12..5bf68f09 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
@@ -20,8 +20,7 @@ import SwitchButton from '../../../../../../designSystem/designComponents/button
 import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
 import Input from '../../../../../../designSystem/designComponents/input/input';
 import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcons';
-import { Wallet } from '../../../../../../store/database';
-import { DisplayCoin } from '../../../../../../store/hooks';
+import { DisplayCoin, Wallet } from '../../../../../../store/database';
 
 const trimString = (str: string, length: number) => {
   if (str.length > length) {
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
index 7e6886ea..db4cf28f 100644
--- a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
@@ -1,4 +1,3 @@
-import { COINS } from '@cypherock/communication';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { Button, Grid, Typography } from '@mui/material';
diff --git a/cysync/src/store/hooks/useExchange.ts b/cysync/src/store/hooks/useExchange.ts
index e764b90e..064133de 100644
--- a/cysync/src/store/hooks/useExchange.ts
+++ b/cysync/src/store/hooks/useExchange.ts
@@ -3,10 +3,9 @@ import Server from '@cypherock/server-wrapper';
 import { useEffect, useState } from 'react';
 
 import logger from '../../mainProcess/logger';
-import { accountDb, Wallet } from '../database';
+import { accountDb, DisplayCoin, Wallet } from '../database';
 import {
   changeFormatOfOutputList,
-  DisplayCoin,
   useSwapTransaction,
   UseSwapTransactionValues,
   useWalletData