chore: change copy and add tests

src/app/(home)/page.tsx

@@ -14,15 +14,10 @@ import AmountInput from "@/components/Swap/AmountInput";
 import SwapButton from "@/components/Button/SwapButton";
 import { safeGetWethAddress } from "@/lib/config";
 import { truncateTo7Digits } from "@/lib/utils";
-import { EXCHANGE_RATE } from "@/lib/contants";
+import { EXCHANGE_RATE, WETH_ABI } from "@/lib/constants";
 
 // TODO: use the correct WETH contract ABI without parsing it
-const abi = parseAbi([
-  // only adding the relevant WETH contract ABI here
-  "function deposit() public payable",
-  "function withdraw(uint wad) public",
-  "function balanceOf(address owner) view returns (uint)",
-]);
+const abi = parseAbi(WETH_ABI);
 
 export default function Home() {
   const [ethAmount, setEthAmount] = useState("0.0001");

src/app/middleware.ts

@@ -10,6 +10,5 @@ export async function middleware(request: NextRequest, event: NextFetchEvent) {
   return NextResponse.next()
 }
 
-
 export const config = {
 }

src/components/Button/SwapButton.tsx

@@ -1,4 +1,4 @@
-import { ButtonText } from "@/lib/contants";
+import { ButtonText } from "@/lib/constants";
 import cn from "classnames";
 
 type SwapButtonProps = {

src/components/Dialog/Error.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect } from "vitest";
 import ErrorDialog from "./Error";
 import "@testing-library/jest-dom";
-import { mockDialogFn, RECEIPT } from "./helper";
+import { mockDialogFn } from "./helper";
 
 describe("ErrorDialog", () => {
   beforeAll(mockDialogFn);

src/components/Dialog/helper.ts

@@ -40,13 +40,25 @@ export const RECEIPT: NonNullable<UseWaitForTransactionReceiptReturnType["data"]
   type: "eip1559",
 };
 
+/**
+ * Mocks the `showModal` and `close` methods of the HTMLDialogElement prototype.
+ * Vitest/jest/jsdom has not have support for dialog elements yet.
+ */
 export const mockDialogFn = () => {
+  /**
+   * Mocks the `showModal` method of the HTMLDialogElement prototype.
+   * Sets the `open` property of the dialog element to `true`.
+   */
   HTMLDialogElement.prototype.showModal = vi.fn(function mock(
     this: HTMLDialogElement
   ) {
     this.open = true;
   });
 
+  /**
+   * Mocks the `close` method of the HTMLDialogElement prototype.
+   * Sets the `open` property of the dialog element to `false`.
+   */
   HTMLDialogElement.prototype.close = vi.fn(function mock(
     this: HTMLDialogElement
   ) {

src/hooks/useWethBalance.ts

@@ -1,12 +1,13 @@
 import { useSimulateContract } from "wagmi";
 import { parseAbi } from "viem";
+import { WETH_ABI } from "@/lib/constants";
 
-const WETH_ABI = [
-  "function deposit() public payable",
-  "function withdraw(uint wad) public",
-  "function balanceOf(address owner) view returns (uint)",
-];
-
+/**
+ * Custom hook to get the WETH balance of a given address.
+ * 
+ * @param address - The Ethereum address for which to retrieve the WETH balance.
+ * @returns The WETH balance of the specified address.
+ */
 export const useWethBalance = (address: string) => {
   return useSimulateContract({
     abi: parseAbi(WETH_ABI),

src/lib/abi.ts

@@ -1,4 +1,5 @@
 // TODO: we may be able to cut down some items with only the ones we need for the swap
+// This is WETH's ABI from the Ethereum mainnet
 export const ABI = [
   {
     "constant": true,

src/lib/config.ts

@@ -12,6 +12,10 @@ export const config = createConfig({
   },
 })
 
+/**
+ * Retrieves the WETH contract address from the environment variable or uses a default address.
+ * @returns The WETH contract address.
+ */
 export function safeGetWethAddress(): Address {
   const log = new Logger();
   const defaultAddress = "0x82af49447d8a07e3bd95bd0d56f35241523fbab1"; // hardcoded WETH contract address

src/lib/contants.ts → src/lib/constants.ts

@@ -10,3 +10,10 @@ export enum ButtonText {
 
 // TODO: since no 0x api can be used, we will hardcode the exchange rate
 export const EXCHANGE_RATE = 0.9; // 1 ETH = 0.9 WETH
+
+// methods that we would be using for interacting with WETH
+export const WETH_ABI = [
+  "function deposit() public payable",
+  "function withdraw(uint wad) public",
+  "function balanceOf(address owner) view returns (uint)",
+];