feat: [GSFE-47] Add Interactions to HomeSwap Component. (#41)

gnoswap-labs · Mar 24, 2023 · f908460 · f908460
1 parent 388b700
commit f908460
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 13 deletions.
diff --git a/packages/web/src/components/home/home-swap/HomeSwap.stories.tsx b/packages/web/src/components/home/home-swap/HomeSwap.stories.tsx
@@ -16,14 +16,14 @@ const Template: ComponentStory<typeof HomeSwap> = args => (
 export const Default = Template.bind({});
 Default.args = {
   from: {
-    token: "ETH",
+    token: "GNOT",
     amount: "121",
     price: "$0.00",
     balence: "0",
   },
   to: {
-    token: "BTC",
-    amount: "5,000",
+    token: "GNOS",
+    amount: "5000",
     price: "$0.00",
     balence: "0",
   },

diff --git a/packages/web/src/components/home/home-swap/HomeSwap.styles.ts b/packages/web/src/components/home/home-swap/HomeSwap.styles.ts
@@ -1,4 +1,4 @@
-import mixins from "@/styles/mixins";
+import mixins from "@styles/mixins";
 import { css, Theme } from "@emotion/react";
 
 export const wrapper = (theme: Theme) => css`
@@ -20,7 +20,7 @@ export const wrapper = (theme: Theme) => css`
     }
 
     .icon * {
-      fill: ${theme.colors.gray01};
+      fill: ${theme.colors.gray40};
     }
   }
 

diff --git a/packages/web/src/components/home/home-swap/HomeSwap.tsx b/packages/web/src/components/home/home-swap/HomeSwap.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { wrapper } from "./HomeSwap.styles";
 import IconSettings from "@components/common/icons/IconSettings";
 import Button from "@components/common/button/Button";
@@ -20,7 +20,45 @@ interface HomeSwapProps {
   swapNow: () => void;
 }
 
+function isAmount(str: string) {
+  const regex = /^\d+(\.\d*)?$/;
+  return regex.test(str);
+}
+
 const HomeSwap: React.FC<HomeSwapProps> = ({ from, to, swapNow }) => {
+  const [fromAmount, setFromAmount] = useState(from.amount);
+  const [toAmount, setToAmount] = useState(to.amount);
+
+  const onChangeFromAmount = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+
+      if (value !== "" && !isAmount(value)) return;
+
+      setFromAmount(value);
+      // TODO
+      // - mapT0AmountToT0Price
+      // - mapT0AmpuntT1Amount
+      // - mapT1AmpuntT1Price
+    },
+    [],
+  );
+
+  const onChangeToAmount = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+
+      if (value !== "" && !isAmount(value)) return;
+
+      setToAmount(value);
+      // TODO
+      // - mapT1AmountToT1Price
+      // - mapT1AmpuntT0Amount
+      // - mapT0AmpuntT0Price
+    },
+    [],
+  );
+
   const onClickSwapNow = useCallback(() => {
     swapNow();
   }, [swapNow]);
@@ -29,14 +67,19 @@ const HomeSwap: React.FC<HomeSwapProps> = ({ from, to, swapNow }) => {
     <div css={wrapper}>
       <div className="header">
         <span className="title">Swap</span>
-        <button>
+        <button disabled>
           <IconSettings className="icon" />
         </button>
       </div>
       <div className="inputs">
         <div className="from">
           <div className="amount">
-            <span className="amount-text">{from.amount}</span>
+            <input
+              className="amount-text"
+              value={fromAmount}
+              onChange={onChangeFromAmount}
+              placeholder={fromAmount === "" ? "0" : ""}
+            />
             <span className="token">{from.token}</span>
           </div>
           <div className="info">
@@ -46,7 +89,12 @@ const HomeSwap: React.FC<HomeSwapProps> = ({ from, to, swapNow }) => {
         </div>
         <div className="to">
           <div className="amount">
-            <span className="amount-text">{to.amount}</span>
+            <input
+              className="amount-text"
+              value={toAmount}
+              onChange={onChangeToAmount}
+              placeholder={toAmount === "" ? "0" : ""}
+            />
             <span className="token">{to.token}</span>
           </div>
           <div className="info">

diff --git a/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx b/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx
@@ -1,12 +1,19 @@
 import HomeSwap from "@components/home/home-swap/HomeSwap";
-import React from "react";
+import { useRouter } from "next/router";
+import React, { useCallback } from "react";
 
 const HomeSwapContainer: React.FC = () => {
+  const router = useRouter();
+
+  const swapNow = useCallback(() => {
+    router.push("/swap?from=GNOT&to=GNOS");
+  }, [router]);
+
   return (
     <HomeSwap
-      from={{ token: "ETH", amount: "121", price: "$0.00", balence: "0" }}
-      to={{ token: "BTC", amount: "5,000", price: "$0.00", balence: "0" }}
-      swapNow={() => {}}
+      from={{ token: "GNOT", amount: "121", price: "$0.00", balence: "0" }}
+      to={{ token: "GNOS", amount: "5000", price: "$0.00", balence: "0" }}
+      swapNow={swapNow}
     />
   );
 };