feat: balance writing and allowance log

ubiquity · Jan 31, 2025 · 6e963be · 6e963be
1 parent 1dae8a8
commit 6e963be
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 5 deletions.
diff --git a/src/pages/mint.ts b/src/pages/mint.ts
@@ -206,6 +206,10 @@ function displayMintOutput(
   }
 }
 
+/**
+ * Links the mint button logic, checks allowances, updates button text (Approve Collateral, Approve UBQ, or Mint).
+ * Also fetches & displays user balance for the selected collateral.
+ */
 async function linkMintButton(collateralOptions: CollateralOption[]) {
   const mintButton = document.getElementById("mintButton") as HTMLButtonElement;
   const collateralSelect = document.getElementById("collateralSelect") as HTMLSelectElement;
@@ -216,6 +220,8 @@ async function linkMintButton(collateralOptions: CollateralOption[]) {
   const maxCollateralInInput = document.getElementById("maxCollateralIn") as HTMLInputElement;
   const maxGovernanceInInput = document.getElementById("maxGovernanceIn") as HTMLInputElement;
 
+  const balanceToFill = document.querySelector("#balance") as HTMLElement;
+
   // Helper to set a quick loading state on the button
   const setButtonLoading = (isLoading: boolean, loadingText?: string) => {
     if (isLoading) {
@@ -273,18 +279,33 @@ async function linkMintButton(collateralOptions: CollateralOption[]) {
     try {
       setButtonLoading(true, "Checking Allowances...");
       const userAddress = await userSigner.getAddress();
+      const collateralContract = new ethers.Contract(selectedCollateral.address, erc20Abi, userSigner);
+      const rawCollateralBalance: ethers.BigNumber = await collateralContract.balanceOf(userAddress);
+      const formattedCollateralBalance = parseFloat(ethers.utils.formatUnits(rawCollateralBalance, 18 - selectedCollateral.missingDecimals)).toFixed(2);
+      const rawGovernanceBalance: ethers.BigNumber = await governanceContract.connect(userSigner).balanceOf(userAddress);
+      const formattedGovernanceBalance = parseFloat(ethers.utils.formatUnits(rawGovernanceBalance, 18)).toFixed(2);
+
+      // Put the user balance in the page: "123.45 LUSD | 678.90 UBQ"
+      if (balanceToFill) {
+        balanceToFill.textContent = `Your balance: ${formattedCollateralBalance} ${selectedCollateral.name} | ${formattedGovernanceBalance} UBQ`;
+      }
 
       // Collateral allowance check
       let isCollateralAllowanceOk = true;
       if (neededCollateral.gt(0)) {
-        const collateralContract = new ethers.Contract(selectedCollateral.address, erc20Abi, userSigner);
         const allowanceCollateral: ethers.BigNumber = await collateralContract.allowance(userAddress, diamondContract.address);
+
+        console.log("Collateral allowance is:", allowanceCollateral.toString());
+
         isCollateralAllowanceOk = allowanceCollateral.gte(neededCollateral);
       }
       // Governance allowance check
       let isGovernanceAllowanceOk = true;
       if (neededGovernance.gt(0)) {
         const allowanceGovernance: ethers.BigNumber = await governanceContract.connect(userSigner).allowance(userAddress, diamondContract.address);
+
+        console.log("Governance allowance is:", allowanceGovernance.toString());
+
         isGovernanceAllowanceOk = allowanceGovernance.gte(neededGovernance);
       }
 

diff --git a/src/pages/redeem.ts b/src/pages/redeem.ts
@@ -211,6 +211,8 @@ async function linkRedeemButton(collateralOptions: CollateralOption[]) {
   const collateralOutMinInput = document.getElementById("collateralOutMin") as HTMLInputElement;
   const governanceOutMinInput = document.getElementById("governanceOutMin") as HTMLInputElement;
 
+  const balanceToFill = document.querySelector("#balance") as HTMLElement;
+
   // We'll track the button label state: "Approve UUSD" or "Redeem".
   type ButtonAction = "APPROVE_UUSD" | "REDEEM" | "DISABLED";
   let buttonAction: ButtonAction = "DISABLED";
@@ -255,13 +257,22 @@ async function linkRedeemButton(collateralOptions: CollateralOption[]) {
     // If the user is redeeming X UUSD, we need to check if allowance >= X
     try {
       setButtonLoading(true, "Checking allowance...");
+      const userAddress = await userSigner.getAddress();
+      const rawDollarBalance: ethers.BigNumber = await dollarContract.balanceOf(userAddress);
+      const formattedDollarBalance = ethers.utils.formatUnits(rawDollarBalance, 18);
+
+      // Put the user balance in the page: "123.45 UUSD"
+      if (balanceToFill) {
+        balanceToFill.textContent = `Your balance: ${formattedDollarBalance} UUSD`;
+      }
+
       const neededUusd = ethers.utils.parseUnits(dollarAmountRaw, 18);
       if (neededUusd.isZero()) {
         return;
       }
 
-      const userAddress = await userSigner.getAddress();
       const allowance = await dollarContract.connect(userSigner).allowance(userAddress, diamondContract.address);
+      console.log("UUSD allowance is: ", allowance.toString());
 
       if (allowance.lt(neededUusd)) {
         buttonAction = "APPROVE_UUSD";

diff --git a/static/mint.html b/static/mint.html
@@ -10,6 +10,8 @@ <h2>Mint Dollars</h2>
           <option value="">Select a collateral</option>
         </select>
 
+        <p id="balance"></p>
+
         <label for="dollarAmount">UUSD Amount</label>
         <input type="number" id="dollarAmount" placeholder="Enter dollar amount" />
 

diff --git a/static/pages.css b/static/pages.css
@@ -75,6 +75,12 @@
   display: none;
 }
 
+#balance {
+  margin: 0;
+  font-size: 12px;
+  color: #808080;
+}
+
 #slippageSettings {
   margin-top: 10px;
   padding-top: 10px;

diff --git a/static/redeem.html b/static/redeem.html
@@ -5,14 +5,16 @@
       <div id="redeemInput" class="column actionInput">
         <h2>Redeem Dollars</h2>
 
+        <label for="dollarAmount">UUSD Amount</label>
+        <input type="number" id="dollarAmount" placeholder="Enter dollar amount to redeem" />
+
+        <p id="balance"></p>
+
         <label for="collateralSelect">Select Collateral</label>
         <select id="collateralSelect">
           <option value="">Select a collateral</option>
         </select>
 
-        <label for="dollarAmount">UUSD Amount</label>
-        <input type="number" id="dollarAmount" placeholder="Enter dollar amount to redeem" />
-
         <button id="toggleSlippageSettings" type="button">Slippage Settings</button>
 
         <div id="slippageSettings" class="hidden">