feat: add swap box

src/app/(home)/page.tsx

@@ -1,3 +1,4 @@
+import TokenSwap from "@/components/Swap/Swap";
 import WrapEth from "@/components/Swap/WethInput";
 
 export default function Home() {

src/components/Dialog/Success.tsx

@@ -1,10 +1,15 @@
 import React, { useEffect, useRef } from "react";
+import { type UseWaitForTransactionReceiptReturnType } from "wagmi";
 
 interface SuccessDialogProps {
   open: boolean;
+  receipt: UseWaitForTransactionReceiptReturnType["data"];
 }
 
-export const SuccessDialog: React.FC<SuccessDialogProps> = ({ open }) => {
+export const SuccessDialog: React.FC<SuccessDialogProps> = ({
+  open,
+  receipt,
+}) => {
   const dialogRef = useRef<HTMLDialogElement>(null);
 
   useEffect(() => {
@@ -19,8 +24,16 @@ export const SuccessDialog: React.FC<SuccessDialogProps> = ({ open }) => {
 
   return (
     <dialog ref={dialogRef}>
-      <h2>Transaction successful!</h2>
-      <button onClick={() => dialogRef.current?.close()}>Close</button>
+      <div className="bg-white p-4 rounded shadow-lg max-w-sm mx-auto text-center">
+        <h2 className="text-2xl font-bold mb-4">Transaction successful!</h2>
+        <p className="mb-4">Transaction hash: {receipt?.transactionHash}</p>
+        <button
+          onClick={() => dialogRef.current?.close()}
+          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        >
+          Close
+        </button>
+      </div>
     </dialog>
   );
 };

src/components/Swap/Swap.tsx

@@ -0,0 +1,58 @@
+"use client";
+import React, { ChangeEvent, useState } from "react";
+
+const TokenSwap = () => {
+  const [isEthToWeth, setIsEthToWeth] = useState(true);
+  const [amount, setAmount] = useState("");
+
+  const handleSwapDirection = () => {
+    setIsEthToWeth(!isEthToWeth);
+  };
+
+  const handleAmountChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setAmount(e.target.value);
+  };
+
+  return (
+    <div className="flex flex-col items-center p-6 bg-gray-900 text-white rounded-lg max-w-md mx-auto">
+      <h2 className="text-2xl mb-6">Swap</h2>
+      <div className="flex flex-col items-center space-y-4">
+        <div className="flex items-center space-x-4">
+          <div className="flex flex-col items-center">
+            <label className="mb-2">Sell</label>
+            <input
+              type="number"
+              value={isEthToWeth ? amount : ""}
+              onChange={handleAmountChange}
+              className="w-24 p-2 mb-2 text-black"
+              placeholder="Enter ETH amount"
+            />
+            <span className="text-xl">ETH</span>
+          </div>
+          <button
+            className="text-2xl cursor-pointer transform transition-transform hover:scale-110"
+            onClick={handleSwapDirection}
+          >
+            ⇅
+          </button>
+          <div className="flex flex-col items-center">
+            <label className="mb-2">Buy</label>
+            <input
+              type="number"
+              value={!isEthToWeth ? amount : ""}
+              onChange={handleAmountChange}
+              className="w-24 p-2 mb-2 text-black"
+              placeholder="Enter WETH amount"
+            />
+            <span className="text-xl">WETH</span>
+          </div>
+        </div>
+        <button className="py-2 px-4 bg-blue-600 hover:bg-blue-700 rounded-md">
+          {isEthToWeth ? "Wrap" : "Unwrap"}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default TokenSwap;

src/components/Swap/WethInput.tsx

@@ -29,6 +29,8 @@ const WrapEth = () => {
     hash,
     pollingInterval: 1_000, // 1 second
   });
+  const [isWrap, setIsWrap] = useState(false); // wrap is true, unwrap is false
+  const arrow = isWrap ? "↓" : "↑";
 
   // will have to hardcode function name for viem to parse the function signature
   const handleWrap = () => {
@@ -51,24 +53,38 @@ const WrapEth = () => {
 
   return (
     <div className="flex flex-col items-center justify-between p-24 space-y-4">
-      <input
-        type="text"
-        placeholder="Amount in ETH"
-        value={amount}
-        onChange={(e) => setAmount(e.target.value)}
-        className="border border-gray-300 p-2 w-48 rounded-md"
-      />
+      <div>
+        <input
+          type="text"
+          placeholder="Amount in ETH"
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+          className="border border-gray-300 p-2 w-24 rounded-md mr-4"
+        />
+        ETH
+      </div>
+
       <button
-        onClick={handleWrap}
+        onClick={() => setIsWrap(!isWrap)}
         className="border border-gray-300 p-2 rounded-md"
       >
-        Wrap
+        {arrow}
       </button>
+      <div className="flex-row">
+        <input
+          type="text"
+          placeholder="Amount in WETH"
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+          className="border border-gray-300 p-2 w-24 rounded-md mr-4"
+        />
+        WETH
+      </div>
       <button
-        onClick={handleUnwrap}
+        onClick={isWrap ? handleWrap : handleUnwrap}
         className="border border-gray-300 p-2 rounded-md"
       >
-        Unwrap
+        Swap
       </button>
       {hash && ( // TODO: decouple this loading and waiting for transaction receipt logic into a separate component
         <div>
@@ -83,7 +99,8 @@ const WrapEth = () => {
           </Link>
         </div>
       )}
-      <SuccessDialog open={status === "success"} />
+
+      <SuccessDialog open={status === "success"} receipt={receipt} />
     </div>
   );
 };