Merge pull request #9 from glitch-hackathon-2023/develop

Fix: Confirm 수정
team-byof · May 20, 2023 · 3ee3462 · 3ee3462
2 parents b4eb636 + b60b888
commit 3ee3462
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 24 deletions.
diff --git a/src/constant/colors.tsx b/src/constant/colors.tsx
@@ -2,4 +2,5 @@ export const colors = {
   deepBlue: "#4134D7",
   black: "#000",
   white: "#FFF",
+  red: "#FF0000",
 } as const;
diff --git a/src/pages/confirm.tsx b/src/pages/confirm.tsx
@@ -23,22 +23,29 @@ const Confirm = () => {
         {"Does your transaction look correct?"}
       </ConfirmDescription>
 
-      <AmountContainer>
+      {/* <AmountContainer>
         <FromContainer>From</FromContainer>
         <FromValueContainer>{200}</FromValueContainer>
         <ToContainer>To</ToContainer>
-      </AmountContainer>
-      <span>
-        <TfiArrowsHorizontal size={60} />
-      </span>
+      </AmountContainer> */}
+      <TotalFeeContainer>
+        {"200MATIC"}
+        <TfiArrowsHorizontal
+          size={30}
+          style={{ color: colors.black, marginLeft: 5 }}
+        />
+        {"10ETH"}
+      </TotalFeeContainer>
+
       {/* <ToContainer>{"ETH"}</ToContainer> */}
 
-      <TotalFeeContainer>
-        {"Total Gas Fee"}
-        <p>
+      <GasFeeContainer>
+        <p style={{ fontSize: 30 }}>
           <BsFire size={30} />
+          {"Total Gas Fee"}
         </p>
-      </TotalFeeContainer>
+        <span>{0.00087}</span>
+      </GasFeeContainer>
       <ConfirmBtn>{"Confirm"}</ConfirmBtn>
       {/* <Footer /> */}
     </Container>
@@ -59,9 +66,7 @@ const ConfirmDescription = styled.div`
   margin-bottom: 20px;
 `;
 
-const FromContainer = styled.span`
-  width: 50px;
-`;
+const FromContainer = styled.p``;
 const FromValueContainer = styled.span`
   width: 50px;
 `;
@@ -70,23 +75,29 @@ const ToContainer = styled.span`
 `;
 
 const AmountContainer = styled.div`
-  // margin: 0 auto;
-  // width: 332px;
-  // height: 96px;
   flex-direction: column;
   border-radius: 15px;
   background-color: ${colors.white};
 `;
 
 const TotalFeeContainer = styled.div`
   margin: 0 auto;
-  margin-top: 20px;
   width: 332px;
   height: 96px;
   border-radius: 15px;
   background-color: ${colors.white};
+  font-size: 30px;
+  color: ${colors.red};
+`;
+const GasFeeContainer = styled.div`
+  margin: 0 auto;
+  width: 332px;
+  height: 96px;
+  border-radius: 15px;
+  background-color: ${colors.white};
+  font-size: 30px;
+  color: ${colors.black};
 `;
-const GasFeeContainer = styled.div``;
 const ConfirmBtn = styled.button`
   width: 332px;
   height: 36px;

diff --git a/src/pages/swap.tsx b/src/pages/swap.tsx
@@ -15,7 +15,7 @@ import { useRouter } from "next/router";
 
 const Swap = () => {
   const [value, setValue] = useState(0);
-  const [gasFee, setGasFee] = useState("");
+  const [gasFee, setGasFee] = useState(0.00087);
   const [matic, setMatic] = useState(200);
   const [eth, setEth] = useState(10);
   const router = useRouter();
@@ -24,12 +24,12 @@ const Swap = () => {
   // const signer = new ethers.Wallet("WALLET_PRIVATE_KEY", provider);
   // const SwapContract = new ethers.Contract("", swapAbi, signer);
 
-  useEffect(() => {
-    getGasFee().then((res) => {
-      console.log("res", res.fast);
-      setGasFee(res.fast);
-    });
-  }, []);
+  // useEffect(() => {
+  //   getGasFee().then((res) => {
+  //     console.log("res", res.fast);
+  //     setGasFee(res.fast);
+  //   });
+  // }, []);
 
   // TODO: contract function call
   // const func = await SwapContract.func();