feat: update design schema

ubiquity · Apr 12, 2023 · 77bff2a · 77bff2a
1 parent 3a018e6
commit 77bff2a
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -1,4 +1,5 @@
 {
+  "license": "ISC",
   "scripts": {
     "start": "run-s utils:hash start:sign start:ui",
     "start:ui": "tsx serve.ts",
@@ -19,4 +20,4 @@
     "prettier": "^2.8.7",
     "tsx": "^3.12.6"
   }
-}
+}
diff --git a/static/index.html b/static/index.html
@@ -48,10 +48,6 @@
             <th>To</th>
             <td id="transferDetails.to"><span class="full"></span><span class="short">Loading...</span></td>
           </tr>
-          <tr id="treasury-id">
-            <th>Treasury</th>
-            <td class="treasury-value">Loading...</td>
-          </tr>
           <tr id="additional-details-border">
             <th></th>
             <td>
@@ -72,10 +68,6 @@
               >
             </td>
           </tr>
-          <tr id="Allowance">
-            <th>Allowance</th>
-            <td id="permit.permitted.amount"></td>
-          </tr>
           <tr id="From">
             <th>From</th>
             <td id="owner"></td>
@@ -92,6 +84,14 @@
             <th>Signature</th>
             <td id="signature"></td>
           </tr>
+          <tr id="Balance">
+            <th>Balance</th>
+            <td class="tr-balance">Loading...</span></td>
+          </tr>
+          <tr id="Allowance">
+            <th>Allowance</th>
+            <td class="tr-allowance">Loading...</span></td>
+          </tr>
         </tbody>
       </table>
     </main>

diff --git a/static/scripts/draw.ts b/static/scripts/draw.ts
@@ -1,8 +1,5 @@
-//@ts-nocheck
-//@todo make it ts compatible
-
 export const drawInit = (): void => {
-  var Cell = function Cell(settings) {
+  var Cell: any = function Cell(settings: any): any {
     var keys = Object.keys(settings),
       x = keys.length;
     while (x--) this[keys[x]] = settings[keys[x]];
@@ -40,7 +37,7 @@ export const drawInit = (): void => {
       target.fillRect(settings.cell_resolution * cell.x, settings.cell_resolution * cell.y, settings.point_resolution, settings.point_resolution);
     },
   };
-  var prep = function (target, settings) {
+  var prep = function (target, settings, temp_resize_switch) {
     var x = settings.cells_per_row;
     while (x--) {
       var y = settings.cells_per_column;
@@ -106,7 +103,7 @@ export const drawInit = (): void => {
       return fps;
     }
   };
-  var local_settings = null;
+  var local_settings: any = null;
   var resize_handler_set = false;
 
   (window as any).draw = function draw(settings) {
@@ -119,16 +116,16 @@ export const drawInit = (): void => {
       requestAnimationFrame(function () {
         offset = setTimeout(function () {
           local_settings.target.innerHTML = "";
-          window.draw(local_settings);
+          (window as any).draw(local_settings);
         }, local_settings.refresh);
       });
     }
 
     if (settings == void 0) {
       throw Error("No settings for grid");
     }
-    var canvas = document.createElement("CANVAS"),
-      context = canvas.getContext("2d");
+    var canvas = document.createElement("canvas");
+    var context = canvas.getContext("2d") as CanvasRenderingContext2D;
     if (settings.shade) {
       settings.red = settings.shade;
       settings.green = settings.shade;
@@ -168,7 +165,7 @@ export const drawInit = (): void => {
     var i = -1; //  index
     while (++x < settings.cells_per_row) {
       var y = -1; //  column (actual cell)
-      var row = [];
+      var row: any[] = [];
       while (++y < settings.cells_per_column) {
         var o = Math.random();
         row.push(
@@ -184,7 +181,7 @@ export const drawInit = (): void => {
       }
       settings.model.push(row);
     }
-    temp_resize_switch && prep(context, settings);
+    temp_resize_switch && prep(context, settings, temp_resize_switch);
     //  <== out
   };
 };
diff --git a/static/scripts/pay.ts b/static/scripts/pay.ts
@@ -5,10 +5,14 @@ import { TxType, txData } from "./render-transaction";
 
 const permit2Address = "0x000000000022D473030F116dDEE9F6B43aC78BA3";
 
-const ErrorHandler = (error: any) => {
+const ErrorHandler = (error: any, extra: string | undefined = undefined) => {
   const output = document.querySelector(`footer>code`) as Element;
   delete error.stack;
-  output.innerHTML = JSON.stringify(error, null, 2);
+  let ErrorData = JSON.stringify(error, null, 2);
+  if (extra !== undefined) {
+    ErrorData = extra + "\n\n" + ErrorData;
+  }
+  output.innerHTML = ErrorData;
 };
 
 const connectWallet = async (): Promise<JsonRpcSigner> => {
@@ -18,9 +22,11 @@ const connectWallet = async (): Promise<JsonRpcSigner> => {
   return signer;
 };
 
-const withdraw = async (signer: JsonRpcSigner, txData: TxType) => {
+const withdraw = async (signer: JsonRpcSigner, txData: TxType, predefined: string | undefined = undefined) => {
   const permit2Contract = new ethers.Contract(permit2Address, permit2Abi, signer);
-  await permit2Contract.permitTransferFrom(txData.permit, txData.transferDetails, txData.owner, txData.signature).catch((error: any) => ErrorHandler(error));
+  await permit2Contract
+    .permitTransferFrom(txData.permit, txData.transferDetails, txData.owner, txData.signature)
+    .catch((error: any) => ErrorHandler(error, predefined));
 };
 
 const fetchTreasury = async (): Promise<{ balance: number; allowance: number }> => {
@@ -32,17 +38,10 @@ const fetchTreasury = async (): Promise<{ balance: number; allowance: number }>
 };
 
 const toggleStatus = async (balance: number, allowance: number) => {
-  const treasuryValue = document.querySelector(".treasury-value") as Element;
-  const balanceElem =
-    balance >= Number(txData.permit.permitted.amount)
-      ? `<span id="value-green">$${ethers.utils.formatUnits(balance, 18)}</span>`
-      : `<span id="value-red">$${ethers.utils.formatUnits(balance, 18)}</span>`;
-  const arrowElem = `<span id="value-cyan">${balance > allowance ? ">" : balance < allowance ? "<" : "="}</span>`;
-  const allowanceElem =
-    allowance >= Number(txData.permit.permitted.amount)
-      ? `<span id="value-green">$${ethers.utils.formatUnits(allowance, 18)}</span>`
-      : `<span id="value-red">$${ethers.utils.formatUnits(allowance, 18)}</span>`;
-  treasuryValue.innerHTML = `<div id="treasury-flex">` + balanceElem + arrowElem + allowanceElem + `</div>`;
+  const trBalance = document.querySelector(".tr-balance") as Element;
+  const trAllowance = document.querySelector(".tr-allowance") as Element;
+  trBalance.textContent = `$${ethers.utils.formatUnits(balance, 18)}`;
+  trAllowance.textContent = `$${ethers.utils.formatUnits(allowance, 18)}`;
 };
 
 export const pay = async (): Promise<void> => {
@@ -63,13 +62,16 @@ export const pay = async (): Promise<void> => {
       const signer = await connectWallet();
       const { balance, allowance } = await fetchTreasury();
       await toggleStatus(balance, allowance);
-      if (balance >= Number(txData.permit.permitted.amount) && allowance >= Number(txData.permit.permitted.amount)) {
-        await withdraw(signer, txData);
-      } else if (balance >= Number(txData.permit.permitted.amount)) {
-        ErrorHandler("Error: Not enough allowance to claim.");
-      } else {
-        ErrorHandler("Error: Not enough funds on treasury to claim.");
+      let predefined: string | undefined = undefined;
+
+      if (!(balance >= Number(txData.permit.permitted.amount) && allowance >= Number(txData.permit.permitted.amount))) {
+        if (balance >= Number(txData.permit.permitted.amount)) {
+          predefined = "Error: Not enough allowance to claim.";
+        } else {
+          predefined = "Error: Not enough funds on treasury to claim.";
+        }
       }
+      await withdraw(signer, txData, predefined);
     } catch (error: unknown) {
       console.error(error);
     }

diff --git a/static/scripts/render-transaction.ts b/static/scripts/render-transaction.ts
@@ -78,8 +78,6 @@ const insertTableData = async (table: Element): Promise<Element> => {
   const tokenBoth = document.getElementById(`permit.permitted.token`) as Element;
   tokenBoth.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="https://etherscan.io/token/${txData.permit.permitted.token}">${tokenBoth.innerHTML}</a>`;
 
-  const amountElem = document.getElementById("permit.permitted.amount") as Element;
-  amountElem.textContent = (Number(txData.permit.permitted.amount) / 1e18).toString();
   const ownerElem = document.getElementById("owner") as Element;
   ownerElem.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="https://etherscan.io/address/${txData.owner}">${txData.owner}</a>`;
   const nonceELem = document.getElementById("permit.nonce") as Element;

diff --git a/static/styles/pay.css b/static/styles/pay.css
@@ -127,22 +127,4 @@ div#build>a {
 
 div#build>a:hover {
     opacity: 1;
-}
-
-#value-red {
-    color: #ff1919;
-}
-
-#value-green {
-    color: #17d117;
-}
-
-#value-cyan {
-    color: #5ff8ff;
-}
-
-#treasury-flex {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
 }