diff --git a/public/svgs/DownArrow.svg b/public/svgs/DownArrow.svg
new file mode 100644
index 0000000..016742e
--- /dev/null
+++ b/public/svgs/DownArrow.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/svgs/Ether.svg b/public/svgs/Ether.svg
new file mode 100644
index 0000000..83ff1ec
--- /dev/null
+++ b/public/svgs/Ether.svg
@@ -0,0 +1,18 @@
+
+
+
\ No newline at end of file
diff --git a/public/svgs/Matic.svg b/public/svgs/Matic.svg
new file mode 100644
index 0000000..a5bb612
--- /dev/null
+++ b/public/svgs/Matic.svg
@@ -0,0 +1,16 @@
+
+
+
diff --git a/public/svgs/UpArrow.svg b/public/svgs/UpArrow.svg
new file mode 100644
index 0000000..3bfa816
--- /dev/null
+++ b/public/svgs/UpArrow.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Status.tsx b/src/components/Status.tsx
index d4063f7..681e3cb 100644
--- a/src/components/Status.tsx
+++ b/src/components/Status.tsx
@@ -16,13 +16,13 @@ const Status = (props: StatusProps) => {
return (
-
+ {/* */}
{"$" + balance}
-
+ {/* */}
);
};
diff --git a/src/pages/confirm.tsx b/src/pages/confirm.tsx
index 88666f1..659d52b 100644
--- a/src/pages/confirm.tsx
+++ b/src/pages/confirm.tsx
@@ -9,20 +9,29 @@ const Confirm = () => {
return (
-
+ {/* */}
{"Confirm"}
+
+
+ {"Does your transaction look correct?"}
+
{"TO"}
{"Total Gas Fee"}
-
+ {/* */}
);
};
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`
diff --git a/src/pages/connect.tsx b/src/pages/connect.tsx
index ef31889..677cc3c 100644
--- a/src/pages/connect.tsx
+++ b/src/pages/connect.tsx
@@ -11,7 +11,7 @@ const Main = () => {
return (
-
+ {/* */}
{CONNECT_DES}
{
diff --git a/src/pages/main.tsx b/src/pages/main.tsx
index 2bbaea6..9d2e20f 100644
--- a/src/pages/main.tsx
+++ b/src/pages/main.tsx
@@ -25,7 +25,7 @@ const Main = () => {
return (
-
+ {/* */}
{balance}
{"MATIC"}
@@ -35,7 +35,7 @@ const Main = () => {
-
+ {/* */}
);
};
diff --git a/src/pages/send.tsx b/src/pages/send.tsx
index 771d107..da3e280 100644
--- a/src/pages/send.tsx
+++ b/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 (
-
-
-
- {/* */}
- {"Next"}
-
+
+ {/* */}
+ {/* TODO: key 값으로 토큰변경 */}
+
+
+
+ {"Matic"}
+
+
+
+
+
+
+
+ {"Ether"}
+
+
+ {/*
+ {"Gas Fee"}
+
+ */}
+ {
+ router.push("/status");
+ }}
+ >
+ {"Next"}
+
+ {/* */}
);
};
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``;
diff --git a/src/types/swap.abi.ts b/src/types/swap.abi.ts
new file mode 100644
index 0000000..54c2593
--- /dev/null
+++ b/src/types/swap.abi.ts
@@ -0,0 +1,3 @@
+import { ContractInterface } from "ethers";
+
+export const swapAbi = [];
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 92ea629..02d981b 100644
--- a/src/utils/index.ts
+++ b/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;
+};