Bump Feat: Csi 1413 create UI for exchange

cysync/src/constants/routes.ts

@@ -26,6 +26,9 @@ const routes = {
   },
   tutorial: {
     index: '/tutorial'
+  },
+  swap: {
+    index: '/swap'
   }
 };
 

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;

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;

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;

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;

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 />}

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}

cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx

@@ -0,0 +1,57 @@
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import React, { useState } from 'react';
+
+import ExchangePanel from './panels/exchange';
+import HistoryPanel from './panels/history';
+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] = 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>
+  );
+}

cysync/src/pages/mainApp/sidebar/swap/index.tsx

@@ -0,0 +1,118 @@
+import Grid from '@mui/material/Grid';
+import { styled, useTheme } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+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';
+
+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 { 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"
+          style={{ color: theme.palette.secondary.dark }}
+          gutterBottom
+        >
+          Swap
+        </Typography>
+      </Grid>
+      <HorizontalTabs />
+    </Root>
+  );
+};
+
+export default Swap;