feat: create swap modal (#224)

src/components/Modal/SwapModal/index.tsx

@@ -0,0 +1,47 @@
+import ReactModal from "react-modal";
+import { useScreenClass } from "react-grid-system";
+import { useNavigate } from "react-router-dom";
+import SwapPage from "pages/Trade/Swap";
+import IconButton from "components/IconButton";
+import { MOBILE_SCREEN_CLASS } from "constants/layout";
+import useSettingsModal from "hooks/modals/useSettingsModal";
+import Modal from "components/Modal";
+
+import iconSetting from "assets/icons/icon-setting.svg";
+import iconSettingHover from "assets/icons/icon-setting-hover.svg";
+
+function SwapModal(props: ReactModal.Props) {
+  const navigate = useNavigate();
+  const screenClass = useScreenClass();
+  const settingsModal = useSettingsModal();
+
+  const {
+    onRequestClose = () => {
+      navigate("..", { replace: true, relative: "route" });
+    },
+    ...modalProps
+  } = props;
+
+  return (
+    <Modal
+      id="swap-modal"
+      className="modal-parent"
+      title="Swap"
+      hasCloseButton
+      drawer={screenClass === MOBILE_SCREEN_CLASS}
+      onRequestClose={onRequestClose}
+      headerExtra={
+        <IconButton
+          size={38}
+          icons={{ default: iconSetting, hover: iconSettingHover }}
+          onClick={() => settingsModal.open()}
+        />
+      }
+      {...modalProps}
+    >
+      <SwapPage />
+    </Modal>
+  );
+}
+
+export default SwapModal;

src/pages/Tokens/TokenDetail/index.tsx

@@ -17,7 +17,7 @@ import {
   Visible,
   useScreenClass,
 } from "react-grid-system";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, Outlet, useNavigate, useParams } from "react-router-dom";
 
 import iconBookmark from "assets/icons/icon-bookmark-default.svg";
 import iconBookmarkSelected from "assets/icons/icon-bookmark-selected.svg";
@@ -124,12 +124,12 @@ function TokenDetailPage() {
           )}
         </Col>
         <Col xs={6}>
-          {tokenAddress && (
+          {asset?.token && (
             <Link
               to={{
-                pathname: "/trade/swap",
+                pathname: "swap",
                 search: new URLSearchParams({
-                  q: tokenAddress,
+                  q: asset.token,
                 }).toString(),
               }}
             >
@@ -141,7 +141,7 @@ function TokenDetailPage() {
         </Col>
       </Row>
     ),
-    [asset, tokenAddress],
+    [asset],
   );
 
   return (
@@ -352,6 +352,7 @@ function TokenDetailPage() {
         />
         {tokenAddress && <TokenTransactions tokenAddress={tokenAddress} />}
       </Container>
+      <Outlet />
     </Wrapper>
   );
 }

src/pages/Wallet/Assets.tsx

@@ -248,7 +248,7 @@ function Assets() {
                   {typeof row.token === "string" && (
                     <Link
                       to={{
-                        pathname: "/trade/swap",
+                        pathname: "swap",
                         search: new URLSearchParams({
                           q: row.token,
                         }).toString(),

src/pages/Wallet/MobileAssetItem.tsx

@@ -128,7 +128,7 @@ function MobileAssetItem({
           <div>
             <Link
               to={{
-                pathname: "/trade/swap",
+                pathname: "swap",
                 search: new URLSearchParams({
                   q: asset.token,
                 }).toString(),

src/routes.tsx

@@ -20,6 +20,7 @@ import TokenDetailPage from "pages/Tokens/TokenDetail";
 import PoolDetailPage from "pages/Earn/Pools/PoolDetail";
 import MainLayout from "layout/Main";
 import withDisclaimerAgreement from "hocs/withDisclaimerAgreement";
+import SwapPageAsModal from "components/Modal/SwapModal";
 // TODO: uncomment when lockdrop is ready
 // import LockdropPage from "pages/Earn/Lockdrop";
 // import StakePage from "pages/Earn/Lockdrop/Stake";
@@ -56,13 +57,15 @@ const routes = createBrowserRouter([
       {
         path: "tokens/:tokenAddress",
         element: <TokenDetailPage />,
+        children: [{ path: "swap", element: <SwapPageAsModal isOpen /> }],
       },
       {
         path: "wallet",
         element: <WalletPage />,
         children: [
           { path: ":poolAddress/add", element: <ProvidePage /> },
           { path: ":poolAddress/remove", element: <WithdrawPage /> },
+          { path: "swap", element: <SwapPageAsModal isOpen /> },
         ],
       },
       {