chore: initialize

src/main.ts

@@ -1,6 +1,7 @@
 import * as wallet from "./scripts/connect-wallet";
 import * as ui from "./scripts/ui";
 import * as mint from "./scripts/mint";
+import * as redeem from "./scripts/redeem";
 
 export async function mainModule() {
   ui.initUiEvents();
@@ -10,6 +11,8 @@ export async function mainModule() {
   await wallet.connectIfAuthorized();
   await mint.initCollateralList();
   await mint.initUiEvents();
+  await redeem.initCollateralList();
+  await redeem.initUiEvents();
 }
 
 mainModule()

src/scripts/connect-wallet.ts

@@ -65,6 +65,12 @@ export async function connectWallet(providerType: "metamask" | "trust" | "coinba
       if (providersModal.open) {
         providersModal.close();
       }
+
+      const currentChain = await provider.request<string>({ method: "eth_chainId" });
+
+      if (currentChain !== "0x1") {
+        await provider.request<null>({ method: "wallet_switchEthereumChain", params: [{ chainId: "0x1" }] });
+      }
     } catch (error) {
       updateConnectButtonText("");
     }
@@ -118,6 +124,12 @@ export async function connectIfAuthorized() {
       updateConnectButtonText(truncateString(account as string));
       connectPrompt.classList.add("hidden");
       whiteContainer.classList.replace("hidden", "flex");
+
+      const currentChain = await provider.request<string>({ method: "eth_chainId" });
+
+      if (currentChain !== "0x1") {
+        await provider.request<null>({ method: "wallet_switchEthereumChain", params: [{ chainId: "0x1" }] });
+      }
     }
   }
 }

src/scripts/faucet.ts

@@ -11,6 +11,8 @@ const publicClient = createPublicClient({
   transport: http(),
 });
 
+const CLIENT_OR_ACCOUNT_ERROR = "Client or account not initialized";
+
 export async function getAllCollaterals() {
   const contract = getContract({
     abi,
@@ -98,6 +100,48 @@ export async function mintDollar(collateralIndex: bigint, dollarAmount: bigint,
       return Promise.reject(error);
     }
   } else {
-    return Promise.reject(new Error("Client or account not initialized"));
+    return Promise.reject(new Error(CLIENT_OR_ACCOUNT_ERROR));
+  }
+}
+
+export async function redeemDollar(collateralIndex: bigint, dollarAmount: bigint) {
+  const client = getConnectedClient();
+
+  if (client !== null && client.account) {
+    try {
+      return await client.writeContract({
+        abi,
+        address,
+        functionName: "redeemDollar",
+        args: [collateralIndex, dollarAmount, BigInt(0), BigInt(0)],
+        chain: mainnet,
+        account: client.account,
+      });
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(new Error(CLIENT_OR_ACCOUNT_ERROR));
+  }
+}
+
+export async function collectionRedemption(collateralIndex: bigint) {
+  const client = getConnectedClient();
+
+  if (client !== null && client.account) {
+    try {
+      return await client.writeContract({
+        abi,
+        address,
+        functionName: "collectRedemption",
+        args: [collateralIndex],
+        chain: mainnet,
+        account: client.account,
+      });
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(new Error(CLIENT_OR_ACCOUNT_ERROR));
   }
 }

src/scripts/mint.ts

@@ -15,6 +15,10 @@ let isOneToOne = false;
 
 const collateralRecord: Record<string | number, `0x${string}`> = {};
 const toastActions = new ToastActions();
+const pubClient = createPublicClient({
+  chain: mainnet,
+  transport: http(),
+});
 
 (() => {
   setInterval(() => {
@@ -30,11 +34,6 @@ const toastActions = new ToastActions();
 })();
 
 void (async () => {
-  const pubClient = createPublicClient({
-    chain: mainnet,
-    transport: http(),
-  });
-
   pubClient.watchBlocks({
     onBlock: async (block) => {
       toastActions.showToast({
@@ -135,19 +134,19 @@ export async function initUiEvents() {
   }
 
   if (governanceInput !== null) {
-    governanceInput.addEventListener("change", (ev) => {
+    governanceInput.addEventListener("input", (ev) => {
       maxGovernanceIn = Number((ev.target as HTMLInputElement).value || "0");
     });
   }
 
   if (dollarInput !== null) {
-    dollarInput.addEventListener("change", (ev) => {
+    dollarInput.addEventListener("input", (ev) => {
       dollarAmount = Number((ev.target as HTMLInputElement).value || "0");
     });
   }
 
   if (collateralInput !== null) {
-    collateralInput.addEventListener("change", (ev) => {
+    collateralInput.addEventListener("input", (ev) => {
       maxCollateralIn = Number((ev.target as HTMLInputElement).value || "0");
     });
   }
@@ -167,7 +166,7 @@ export async function initUiEvents() {
         const err = error as Error;
         toastActions.showToast({
           toastType: "error",
-          msg: err.message,
+          msg: err.name,
         });
       }
     });
@@ -186,14 +185,14 @@ export async function initUiEvents() {
         mintButton.disabled = false;
         toastActions.showToast({
           toastType: "success",
-          msg: `Successfully approved: <a href="https://etherscan.io/tx/${txHash}" target="_blank">View on explorer</a>`,
+          msg: `Successfully minted: <a href="https://etherscan.io/tx/${txHash}" target="_blank">View on explorer</a>`,
         });
       } catch (error) {
         mintButton.disabled = false;
         const err = error as Error;
         toastActions.showToast({
           toastType: "error",
-          msg: err.message,
+          msg: err.name,
         });
       }
     });

src/scripts/redeem.ts

@@ -0,0 +1,124 @@
+import { type WriteContractErrorType, createPublicClient, http, parseUnits } from "viem";
+import { collectionRedemption, getAllCollaterals, getCollateralInformation, redeemDollar } from "./faucet";
+import { collateralSelect, collectRedemptionButton, dollarInput, redeemDollarButton } from "./ui";
+import { mainnet } from "viem/chains";
+import { ToastActions } from "./toast";
+
+let selectedCollateralIndex = 0;
+let dollarAmount = 0;
+let blockOfRedemption = BigInt(0);
+
+const toastActions = new ToastActions();
+const pubClient = createPublicClient({
+  chain: mainnet,
+  transport: http(),
+});
+
+(() => {
+  setInterval(() => {
+    if (redeemDollarButton !== null) {
+      redeemDollarButton.disabled = dollarAmount <= 0;
+    }
+  }, 500);
+})();
+
+void (async () => {
+  pubClient.watchBlocks({
+    onBlock: async (block) => {
+      const currentBlock = Number(block.number);
+      toastActions.showToast({
+        toastType: "info",
+        msg: `New block mined: ${currentBlock}`,
+      });
+
+      try {
+        const bOfRedemption = Number(blockOfRedemption);
+        collectRedemptionButton.disabled = bOfRedemption === 0 || currentBlock - bOfRedemption < 2;
+      } catch (error) {
+        const err = error as Error;
+        toastActions.showToast({
+          toastType: "error",
+          msg: err.message,
+        });
+      }
+    },
+  });
+})();
+
+export async function initCollateralList() {
+  if (collateralSelect !== null) {
+    const collaterals = await getAllCollaterals();
+    const collateralInformation = await Promise.all(collaterals.map(getCollateralInformation));
+
+    const options = collateralInformation.map((info) => {
+      const option = document.createElement("option");
+
+      option.value = String(info.index);
+      option.innerText = info.symbol;
+
+      return option;
+    });
+
+    options.forEach((option) => {
+      collateralSelect.appendChild(option);
+    });
+  }
+}
+
+export async function initUiEvents() {
+  if (collateralSelect !== null) {
+    collateralSelect.addEventListener("change", (ev) => {
+      selectedCollateralIndex = Number((ev.target as HTMLSelectElement).value);
+    });
+  }
+
+  if (dollarInput !== null) {
+    dollarInput.addEventListener("input", (ev) => {
+      dollarAmount = Number((ev.target as HTMLInputElement).value || "0");
+    });
+  }
+
+  if (redeemDollarButton !== null) {
+    redeemDollarButton.addEventListener("click", async () => {
+      try {
+        redeemDollarButton.disabled = true;
+        const dollarAmountBi = parseUnits(dollarAmount.toString(), 18);
+        const txHash = await redeemDollar(BigInt(selectedCollateralIndex), dollarAmountBi);
+        redeemDollarButton.disabled = false;
+        blockOfRedemption = await pubClient.getBlockNumber();
+        toastActions.showToast({
+          toastType: "success",
+          msg: `Successfully redeemed: <a href="https://etherscan.io/tx/${txHash}" target="_blank">View on explorer</a>`,
+        });
+      } catch (error) {
+        redeemDollarButton.disabled = false;
+        const err = error as WriteContractErrorType;
+        toastActions.showToast({
+          toastType: "error",
+          msg: err.name,
+        });
+      }
+    });
+  }
+
+  if (collectRedemptionButton !== null) {
+    collectRedemptionButton.addEventListener("click", async () => {
+      try {
+        collectRedemptionButton.disabled = true;
+        const txHash = await collectionRedemption(BigInt(selectedCollateralIndex));
+        collectRedemptionButton.disabled = false;
+        toastActions.showToast({
+          toastType: "success",
+          msg: `Successfully collected redemption: <a href="https://etherscan.io/tx/${txHash}" target="_blank">View on explorer</a>`,
+        });
+      } catch (error) {
+        collectRedemptionButton.disabled = false;
+        const err = error as WriteContractErrorType;
+        toastActions.showToast({
+          toastType: "error",
+          msg: err.name,
+        });
+      }
+    });
+  }
+}

src/scripts/ui.ts

@@ -18,6 +18,10 @@ export const allowanceButton = document.querySelector("#allowance-button") as HT
 export const mintButton = document.querySelector("#mint-button") as HTMLButtonElement;
 export const governanceCheckBox = document.querySelector("#governance-check") as HTMLInputElement;
 
+// Redeem UI
+export const redeemDollarButton = document.querySelector("#redeem-dollar-button") as HTMLButtonElement;
+export const collectRedemptionButton = document.querySelector("#collect-redemption-button") as HTMLButtonElement;
+
 // Providers
 const metamaskConnectButton = document.querySelector("#mm-button") as HTMLButtonElement;
 const cbConnectButton = document.querySelector("#cb-button") as HTMLButtonElement;

static/index.html

@@ -12,8 +12,7 @@
       <div class="hidden lg:flex w-full border-b border-b-[#fff] justify-evenly items-center gap-3 py-3">
         <a href="/">Home</a>
         <a href="/mint.html">Mint</a>
-        <a href="#">Redeem</a>
-        <a href="#">Stake</a>
+        <a href="/redeem.html">Redeem</a>
         <button class="btn btn-primary btn-md px-3 py-2" connectButton></button>
       </div>
 
@@ -22,8 +21,7 @@
         <ul class="menu min-h-screen w-64 bg-[#000] px-4 py-5">
           <li><a href="/">Home</a></li>
           <li><a href="/mint.html">Mint</a></li>
-          <li><a href="#">Redeem</a></li>
-          <li><a href="#">Stake</a></li>
+          <li><a href="/redeem.html">Redeem</a></li>
           <li class="w-full">
             <button class="btn btn-primary btn-sm px-3 py-2 w-full" connectButton></button>
           </li>

static/mint.html

@@ -15,8 +15,7 @@
       <div class="hidden lg:flex w-full border-b border-b-[#fff] justify-evenly items-center gap-3 py-3">
         <a href="/">Home</a>
         <a href="/mint.html">Mint</a>
-        <a href="#">Redeem</a>
-        <a href="#">Stake</a>
+        <a href="/redeem.html">Redeem</a>
         <button class="btn btn-primary btn-md px-3 py-2" connectButton></button>
       </div>
 
@@ -25,8 +24,7 @@
         <ul class="menu min-h-screen w-64 bg-[#000] px-4 py-5">
           <li><a href="/">Home</a></li>
           <li><a href="/mint.html">Mint</a></li>
-          <li><a href="#">Redeem</a></li>
-          <li><a href="#">Stake</a></li>
+          <li><a href="/redeem.html">Redeem</a></li>
           <li class="w-full">
             <button class="btn btn-primary btn-sm px-3 py-2 w-full" connectButton></button>
           </li>
@@ -411,15 +409,15 @@
           </select>
           <label class="input input-bordered input-primary flex items-center gap-2 capitalize w-full py-1">
             dollar amount
-            <input class="grow" type="number" />
+            <input id="dollar-input" class="grow" type="number" />
           </label>
           <label class="input input-bordered input-primary flex items-center gap-2 capitalize w-full py-1">
             max. collateral amount
-            <input class="grow" type="number" />
+            <input id="collateral-input" class="grow" type="number" />
           </label>
-          <label id="governance-input" class="input input-bordered input-primary flex items-center gap-2 capitalize w-full py-1">
+          <label class="input input-bordered input-primary flex items-center gap-2 capitalize w-full py-1">
             max. governance amount
-            <input class="grow" type="number" />
+            <input id="governance-input" class="grow" type="number" />
           </label>
           <label class="label cursor-pointer w-full">
             <span class="label-text font-[500]">Mint with governance</span>