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

[Feat] Fix Swap page

src/components/Status.tsx

@@ -16,13 +16,13 @@ const Status = (props: StatusProps) => {
   return (
     <Container>
       <GlobalStyle />
-      <Header />
+      {/* <Header /> */}
       <TokenBalance>{"$" + balance}</TokenBalance>
       <BalanceContainer>
         <CtaSmallBtn key="Deposit" title="Deposit"></CtaSmallBtn>
         <CtaSmallBtn key="Send" title="Send"></CtaSmallBtn>
       </BalanceContainer>
-      <Footer />
+      {/* <Footer /> */}
     </Container>
   );
 };

src/pages/confirm.tsx

@@ -9,20 +9,29 @@ const Confirm = () => {
   return (
     <Container>
       <GlobalStyle />
-      <Header />
+      {/* <Header /> */}
       <ConfirmTitle>{"Confirm"}</ConfirmTitle>
+      <br />
+      <ConfirmDescription>
+        {"Does your transaction look correct?"}
+      </ConfirmDescription>
       <ToAddressContainer>{"TO"}</ToAddressContainer>
       <TotalFeeContainer>{"Total Gas Fee"}</TotalFeeContainer>
-      <Footer />
+      {/* <Footer /> */}
     </Container>
   );
 };
 export default Confirm;
 
-const ConfirmTitle = styled.div`
+const ConfirmTitle = styled.text`
   justify-content: flex-start;
-  color: ${colors.white};
   font-size: 70px;
+  color: ${colors.white};
+`;
+
+const ConfirmDescription = styled.text`
+  font-size: 18px;
+  color: ${colors.white};
 `;
 
 const ToAddressContainer = styled.div`

src/pages/connect.tsx

@@ -11,7 +11,7 @@ const Main = () => {
   return (
     <Container>
       <GlobalStyle />
-      <Header />
+      {/* <Header /> */}
       <ConnectDescription>{CONNECT_DES}</ConnectDescription>
       <ConnectPolygonBtn
         onClick={() => {

src/pages/main.tsx

@@ -25,7 +25,7 @@ const Main = () => {
   return (
     <Container>
       <GlobalStyle />
-      <Header />
+      {/* <Header /> */}
       <TokenContainer>
         <TokenBalance>{balance}</TokenBalance>
         <TokenUnit>{"MATIC"}</TokenUnit>
@@ -35,7 +35,7 @@ const Main = () => {
         <CtaSmallBtn key="Deposit" title="Deposit"></CtaSmallBtn>
         <CtaSmallBtn key="Send" title="Send"></CtaSmallBtn>
       </BalanceContainer>
-      <Footer />
+      {/* <Footer /> */}
     </Container>
   );
 };

src/pages/send.tsx

@@ -1,45 +1,149 @@
 import { Container, Header, CtaSmallBtn, Footer } from "@/components";
 import { colors } from "@/constant/colors";
 import { GlobalStyle } from "@/styles/global.style";
-import { useState } from "react";
+import { swapAbi } from "@/types/swap.abi";
+import { getGasFee } from "@/utils";
+import { ethers } from "ethers";
+import { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
+import Image from "next/image";
+import EtherIcon from "../../public/svgs/Ether.svg";
+import MaticIcon from "../../public/svgs/Matic.svg";
+import UpArrow from "../../public/svgs/UpArrow.svg";
+import DownArrow from "../../public/svgs/DownArrow.svg";
+import { useRouter } from "next/navigation";
 
 const Send = () => {
-  const [balance, setBalance] = useState(0);
+  const [value, setValue] = useState(0);
+  const [gasFee, setGasFee] = useState("");
+  const router = useRouter();
+  // TODO: swap contract call
+  // const provider = new ethers.JsonRpcApiProvider("", 1);
+  // const signer = new ethers.Wallet("WALLET_PRIVATE_KEY", provider);
+  // const SwapContract = new ethers.Contract("", swapAbi, signer);
+
+  useEffect(() => {
+    getGasFee().then((res) => {
+      setGasFee(res.fast);
+    });
+  }, []);
+
+  // TODO: contract function call
+  // const func = await SwapContract.func();
   return (
     <Container>
       <GlobalStyle />
-      <Header />
-      <SendAmountInput />
-      <SendAddressInput />
-      {/* <SetGasLimit type={} /> */}
-      <SubmitBtn type="submit">{"Next"}</SubmitBtn>
-      <Footer />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+      />
+      {/* <Header /> */}
+      {/* TODO: key 값으로 토큰변경 */}
+      <SwapInputContainer>
+        <SendAmountInput />
+        <Image
+          src={MaticIcon}
+          alt={"MaticIcon"}
+          style={{
+            width: 30,
+            height: 30,
+            justifyContent: "center",
+            alignItems: "center",
+            marginRight: 5,
+          }}
+        />
+        <SwapTokenTitle>{"Matic"}</SwapTokenTitle>
+      </SwapInputContainer>
+
+      <Image src={UpArrow} alt="UpArrow" />
+      <Image src={DownArrow} alt="DownArrow" />
+      <SwapInputContainer>
+        <SendAddressInput />
+        <Image
+          src={EtherIcon}
+          alt={"EtherIcon"}
+          style={{
+            width: 30,
+            height: 30,
+            justifyContent: "center",
+            alignItems: "center",
+            marginRight: 5,
+          }}
+        />
+        <SwapTokenTitle>{"Ether"}</SwapTokenTitle>
+      </SwapInputContainer>
+
+      {/* <GasFeeContainer>
+        <GasFeeInfo>{"Gas Fee"}</GasFeeInfo>
+        <SetGasLimit type="number"></SetGasLimit>
+      </GasFeeContainer> */}
+      <SubmitBtn
+        onClick={() => {
+          router.push("/status");
+        }}
+      >
+        {"Next"}
+      </SubmitBtn>
+      {/* <Footer /> */}
     </Container>
   );
 };
 export default Send;
 
-const BalanceContainer = styled.div``;
-
-const SendAmountInput = styled.input`
-  margin-top: 40px;
+const SwapInputContainer = styled.div`
   width: 295px;
   height: 61px;
+  margin: 0 auto;
+  margin-top: 5px;
+  text-align: center;
+  margin-bottom: 20px;
   border-radius: 15px;
+  background-color: ${colors.white};
+`;
+
+const SwapTokenTitle = styled.text`
+  color: ${colors.black};
+  font-size: 18px;
+`;
+
+const SendAmountInput = styled.input`
+  font-size: 14px;
+  border: none;
+  padding: 20px;
+  justify-content: center;
+  align-items: center;
 `;
 
 const SendAddressInput = styled.input`
+  font-size: 14px;
+  border: none;
+  padding: 20px;
+  justify-content: center;
+  align-items: center;
+`;
+const GasFeeInfo = styled.div`
+  color: ${colors.black};
+  font-size: 30px;
+`;
+const SetGasLimit = styled.button`
+  width: 291px;
+  height: 182px;
+  background-color: ${colors.white};
+`;
+
+const SubmitBtn = styled.button`
   margin-top: 20px;
-  width: 295px;
-  height: 61px;
-  border-radius: 15px;
+  width: 291px;
+  height: 51px;
+  font-size: 30px;
+  color: ${colors.white};
+  background-color: ${colors.deepBlue};
+  border: none;
 `;
 
-const SetGasLimit = styled.input`
+const GasFeeContainer = styled.form`
   width: 291px;
   height: 182px;
+  margin: 0 auto;
+  background-color: ${colors.white};
 `;
-
-const SubmitBtn = styled.button``;
-const GasFeeContainer = styled.div``;

src/types/swap.abi.ts

@@ -0,0 +1,3 @@
+import { ContractInterface } from "ethers";
+
+export const swapAbi = [];

src/utils/index.ts

@@ -1,25 +1,27 @@
 import axios from "axios";
+import { ethers } from "ethers";
 
 interface balanceInput {
   address: string;
   tag: string;
 }
 
+export const getProvider = async () => {
+  // const provider = new ethers.JsonRpcApiProvider()
+};
+
 export const getMaticBalance = async (data: balanceInput) => {
   const response = await axios.post(
     // TODO: call url
     `https://api-testnet.polygonscan.com/api?module=account&action=balance&address=${data.address}&apikey=${process.env.API_KEY}`
   );
-  //   const response = await axios.post(
-  //     // TODO: call url
-  //     `https://api-testnet.polygonscan.com/api
-  //  ?module=account
-  //  &action=balance
-  //  &address=${data.address}
-  //  &apikey=${process.env.API_KEY}`
-  //   );
 
   return response.data;
 };
 
-export const getGasFee = async () => {};
+export const getGasFee = async () => {
+  const gasFee = await axios(
+    "https://gasstation-testnet.polygon.technology/zkevm"
+  );
+  return gasFee.data;
+};