feat: descriptive error message

ubiquity · Apr 6, 2023 · 636029d · 636029d
1 parent cf2fb4e
commit 636029d
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 115 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "scripts": {
     "start": "run-s utils:hash start:sign start:ui",
-    "start:ui": "static static",
+    "start:ui": "tsx serve.ts",
     "start:sign": "tsx ./generate-permit/generate-permit2-url.ts",
     "utils:build": "tsx build.ts",
     "utils:hash": "git rev-parse HEAD > static/commit.txt",
@@ -15,9 +15,8 @@
     "dotenv": "^16.0.3",
     "esbuild": "^0.17.15",
     "ethers": "^5.7.2",
-    "node-static": "^0.7.11",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.7",
     "tsx": "^3.12.6"
   }
-}
+}
diff --git a/serve.ts b/serve.ts
@@ -0,0 +1,25 @@
+import esbuild from "esbuild";
+
+const init = async () => {
+  const ctx = await esbuild.context({
+    entryPoints: ["static/scripts/app.ts", "static/styles/app.css"],
+    bundle: true,
+    minify: false,
+    sourcemap: true,
+    loader: {
+      ".png": "dataurl",
+      ".woff": "dataurl",
+      ".woff2": "dataurl",
+      ".eot": "dataurl",
+      ".ttf": "dataurl",
+      ".svg": "dataurl",
+    },
+    outdir: "static/out",
+  });
+
+  const { host, port } = await ctx.serve({
+    servedir: "static",
+    port: 8080,
+  });
+};
+init();
diff --git a/static/index.html b/static/index.html
@@ -1,57 +1,104 @@
 <!DOCTYPE html>
-<html
-	><head
-		><title>DevPool Claims | Ubiquity DAO</title
-		><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link href="out/styles/app.css" rel="stylesheet" /><link
-			rel="apple-touch-icon"
-			sizes="180x180"
-			href="apple-touch-icon.png" /><link rel="icon" type="image/png" sizes="32x32" href="media/favicon.png" /></head
-	><body
-		><background
-			><div id="pre-grid"></div><div id="grid"></div
-			><header
-				><a href="http://ubq.fi/"
-					><div id="logo"
-						><div id="logo-icon"
-							><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 151" fill="currentColor">
-								<path
-									d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z"
-								></path></svg></div
-						><div id="logo-text"><span>Ubiquity DAO</span><span>DevPool Claims</span></div></div
-					></a
-				></header
-			></background
-		><main
-			><table
-				><thead
-					><tr><th>Notice</th><td>Loading...</td></tr></thead
-				><tbody
-					><tr id="Amount"><th>Amount</th><td id="transferDetails.requestedAmount">Loading...</td></tr
-					><tr id="Token"
-						><th>Token</th><td id="permit.permitted.token"><span class="full"></span><span class="short">Loading...</span></td></tr
-					><tr id="To"
-						><th>To</th><td id="transferDetails.to"><span class="full"></span><span class="short">Loading...</span></td></tr
-					><tr id="additional-details-border"
-						><th></th
-						><td
-							><div id="controls"
-								><!--<button id="btnConnectWallet">Connect Wallet</button> --><button id="additionalDetails"
-									><div>Details</div
-									><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24">
-										<path
-											d="M481.915 798Q497 798 507.5 787.584q10.5-10.415 10.5-25.5Q518 747 507.585 736.5q-10.416-10.5-25.5-10.5Q467 726 456.5 736.416q-10.5 10.415-10.5 25.5Q446 777 456.415 787.5q10.416 10.5 25.5 10.5ZM454 658h52q2-28.648 9.5-46.824T552 564q27-25 40.5-47.919 13.5-22.919 13.5-52.642Q606 413 569.754 383.5 533.507 354 484 354q-48 0-81 25.5T356 440l48 20q8-22 25-40t53-18q38 0 56 21t18 45q0 21-12 37t-30 33q-38 35-49 58t-11 62Zm26.174 298q-78.814 0-148.212-29.911-69.399-29.912-120.734-81.188-51.336-51.277-81.282-120.595Q100 654.988 100 576.174q0-79.07 29.97-148.694 29.971-69.623 81.348-121.126 51.378-51.502 120.594-80.928Q401.128 196 479.826 196q79.06 0 148.676 29.391 69.615 29.392 121.13 80.848 51.516 51.457 80.942 121.018Q860 496.819 860 575.909q0 79.091-29.391 148.149-29.392 69.059-80.835 120.496-51.443 51.436-120.987 81.441Q559.244 956 480.174 956ZM480 902q136.513 0 231.256-94.744Q806 712.513 806 576t-94.744-231.256Q616.513 250 480 250t-231.256 94.744Q154 439.487 154 576t94.744 231.256Q343.487 902 480 902Zm0-326Z"
-										/></svg></button
-								><button id="claimButton"
-									><div>Claim</div
-									><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24">
-										<path d="M382 802 168 588l38-38 176 176 374-374 38 38-412 412Z" /></svg></button
-								><!--<aside></aside> --></div
-							></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></tr
-					><tr id="Nonce"><th>Nonce</th><td id="permit.nonce"></td></tr><tr id="Deadline"><th>Deadline</th><td id="permit.deadline"></td></tr
-					><tr id="Signature"><th>Signature</th><td id="signature"></td></tr></tbody></table></main
-		><footer
-			><code></code><div id="build"><a target="_blank" rel="noopener noreferrer"></a></div></footer
-		><script src="out/scripts/app.js" type="application/javascript"></script></body
-></html>
+<html>
+  <head>
+    <title>DevPool Claims | Ubiquity DAO</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="out/styles/app.css" rel="stylesheet" />
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="media/favicon.png" />
+  </head>
+
+  <body>
+    <background>
+      <div id="pre-grid"></div>
+      <div id="grid"></div>
+      <header
+        ><a href="http://ubq.fi/">
+          <div id="logo">
+            <div id="logo-icon"
+              ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 151" fill="currentColor">
+                <path
+                  d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z"
+                ></path></svg
+            ></div>
+            <div id="logo-text"><span>Ubiquity DAO</span><span>DevPool Claims</span></div>
+          </div>
+        </a></header
+      >
+    </background>
+    <main>
+      <table>
+        <thead>
+          <tr>
+            <th>Notice</th>
+            <td>Loading...</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr id="Amount">
+            <th>Amount</th>
+            <td id="transferDetails.requestedAmount">Loading...</td>
+          </tr>
+          <tr id="Token">
+            <th>Token</th>
+            <td id="permit.permitted.token"><span class="full"></span><span class="short">Loading...</span></td>
+          </tr>
+          <tr id="To">
+            <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>
+              <div id="controls"
+                ><!--<button id="btnConnectWallet">Connect Wallet</button> --><button id="additionalDetails">
+                  <div>Details</div
+                  ><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24">
+                    <path
+                      d="M481.915 798Q497 798 507.5 787.584q10.5-10.415 10.5-25.5Q518 747 507.585 736.5q-10.416-10.5-25.5-10.5Q467 726 456.5 736.416q-10.5 10.415-10.5 25.5Q446 777 456.415 787.5q10.416 10.5 25.5 10.5ZM454 658h52q2-28.648 9.5-46.824T552 564q27-25 40.5-47.919 13.5-22.919 13.5-52.642Q606 413 569.754 383.5 533.507 354 484 354q-48 0-81 25.5T356 440l48 20q8-22 25-40t53-18q38 0 56 21t18 45q0 21-12 37t-30 33q-38 35-49 58t-11 62Zm26.174 298q-78.814 0-148.212-29.911-69.399-29.912-120.734-81.188-51.336-51.277-81.282-120.595Q100 654.988 100 576.174q0-79.07 29.97-148.694 29.971-69.623 81.348-121.126 51.378-51.502 120.594-80.928Q401.128 196 479.826 196q79.06 0 148.676 29.391 69.615 29.392 121.13 80.848 51.516 51.457 80.942 121.018Q860 496.819 860 575.909q0 79.091-29.391 148.149-29.392 69.059-80.835 120.496-51.443 51.436-120.987 81.441Q559.244 956 480.174 956ZM480 902q136.513 0 231.256-94.744Q806 712.513 806 576t-94.744-231.256Q616.513 250 480 250t-231.256 94.744Q154 439.487 154 576t94.744 231.256Q343.487 902 480 902Zm0-326Z"
+                    />
+                  </svg> </button
+                ><button id="claimButton">
+                  <div class="claim-title">Claim</div
+                  ><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24" class="claim-icon">
+                    <path d="M382 802 168 588l38-38 176 176 374-374 38 38-412 412Z" />
+                  </svg> </button
+                ><!--<aside></aside> --></div
+              >
+            </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>
+          </tr>
+          <tr id="Nonce">
+            <th>Nonce</th>
+            <td id="permit.nonce"></td>
+          </tr>
+          <tr id="Deadline">
+            <th>Deadline</th>
+            <td id="permit.deadline"></td>
+          </tr>
+          <tr id="Signature">
+            <th>Signature</th>
+            <td id="signature"></td>
+          </tr>
+        </tbody>
+      </table>
+    </main>
+    <footer
+      ><code></code>
+      <div id="build"><a target="_blank" rel="noopener noreferrer"></a></div>
+    </footer>
+    <script src="out/scripts/app.js" type="application/javascript"></script>
+  </body>
+</html>
diff --git a/static/scripts/pay.ts b/static/scripts/pay.ts
@@ -1,6 +1,6 @@
 import { ethers } from "ethers";
 import { JsonRpcSigner } from "@ethersproject/providers";
-import { permit2Abi } from "./abis";
+import { daiAbi, permit2Abi } from "./abis";
 import { TxType, txData } from "./render-transaction";
 
 window.onerror = function (error: any) {
@@ -22,6 +22,21 @@ const withdraw = async (signer: JsonRpcSigner, txData: TxType) => {
   await permit2Contract.permitTransferFrom(txData.permit, txData.transferDetails, txData.owner, txData.signature).catch(window.onerror);
 };
 
+const fetchTreasury = async (): Promise<number> => {
+  const tokenAddress = txData.permit.permitted.token;
+  const tokenContract = new ethers.Contract(tokenAddress, daiAbi, new ethers.providers.Web3Provider((window as any).ethereum));
+  const balance = await tokenContract.balanceOf(txData.owner);
+  return balance;
+};
+
+const toggleStatus = async (balance: number) => {
+  const treasuryValue = document.querySelector(".treasury-value") as Element;
+  treasuryValue.innerHTML =
+    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`;
+};
+
 export const pay = async (): Promise<void> => {
   let detailsVisible = false;
 
@@ -38,12 +53,21 @@ export const pay = async (): Promise<void> => {
   claimButtonElem.addEventListener("click", async () => {
     try {
       const signer = await connectWallet();
-      await withdraw(signer, txData);
+      const balance = await fetchTreasury();
+      await toggleStatus(balance);
+      if (balance >= Number(txData.permit.permitted.amount)) {
+        await withdraw(signer, txData);
+      } else {
+        throw new Error("Not enough funds on treasury to claim");
+      }
     } catch (error: unknown) {
       console.error(error);
     }
   });
 
+  const balance = await fetchTreasury();
+  await toggleStatus(balance);
+
   // display commit hash
   const commit = await fetch("commit.txt");
   if (commit.ok) {

diff --git a/static/styles/pay.css b/static/styles/pay.css
@@ -127,4 +127,12 @@ div#build>a {
 
 div#build>a:hover {
     opacity: 1;
+}
+
+#value-red {
+    color: #ff1919;
+}
+
+#value-green {
+    color: #17d117;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1027,13 +1027,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colors@npm:>=0.6.0":
-  version: 1.4.0
-  resolution: "colors@npm:1.4.0"
-  checksum: 98aa2c2418ad87dedf25d781be69dc5fc5908e279d9d30c34d8b702e586a0474605b3a189511482b9d5ed0d20c867515d22749537f7bc546256c6014f3ebdcec
-  languageName: node
-  linkType: hard
-
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -2009,15 +2002,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime@npm:^1.2.9":
-  version: 1.6.0
-  resolution: "mime@npm:1.6.0"
-  bin:
-    mime: cli.js
-  checksum: fef25e39263e6d207580bdc629f8872a3f9772c923c7f8c7e793175cee22777bbe8bba95e5d509a40aaa292d8974514ce634ae35769faa45f22d17edda5e8557
-  languageName: node
-  linkType: hard
-
 "minimalistic-assert@npm:^1.0.0, minimalistic-assert@npm:^1.0.1":
   version: 1.0.1
   resolution: "minimalistic-assert@npm:1.0.1"
@@ -2050,13 +2034,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:~0.0.1":
-  version: 0.0.10
-  resolution: "minimist@npm:0.0.10"
-  checksum: f7b2cb17af165d042bb3d2803f5e6c38d137f0c36a62230fdb643058c25b56749d2c335b17d4de0b0f08f19cb868cac40df207ff7a4c59fd0771e8762e9b783c
-  languageName: node
-  linkType: hard
-
 "minipass-collect@npm:^1.0.2":
   version: 1.0.2
   resolution: "minipass-collect@npm:1.0.2"
@@ -2191,19 +2168,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-static@npm:^0.7.11":
-  version: 0.7.11
-  resolution: "node-static@npm:0.7.11"
-  dependencies:
-    colors: ">=0.6.0"
-    mime: ^1.2.9
-    optimist: ">=0.3.4"
-  bin:
-    static: bin/cli.js
-  checksum: 73c0163595b58871c4870cf46fc8039bc065e79d558eb09026339b83def52a293dd6329de2a68b0c70c1a65044066a02deffb403bf00d9fa334e4e48f0fece68
-  languageName: node
-  linkType: hard
-
 "nopt@npm:^6.0.0":
   version: 6.0.0
   resolution: "nopt@npm:6.0.0"
@@ -2295,16 +2259,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"optimist@npm:>=0.3.4":
-  version: 0.6.1
-  resolution: "optimist@npm:0.6.1"
-  dependencies:
-    minimist: ~0.0.1
-    wordwrap: ~0.0.2
-  checksum: 191ab2b119b2908a229065119349d9cbd295217a8777febd2812fc7b95c5f31f5f6ecb4fd0222351466cb33af8410299373229e78dd96713ed5348fcebfb96f4
-  languageName: node
-  linkType: hard
-
 "p-map@npm:^4.0.0":
   version: 4.0.0
   resolution: "p-map@npm:4.0.0"
@@ -2483,7 +2437,6 @@ __metadata:
     dotenv: ^16.0.3
     esbuild: ^0.17.15
     ethers: ^5.7.2
-    node-static: ^0.7.11
     npm-run-all: ^4.1.5
     prettier: ^2.8.7
     tsx: ^3.12.6
@@ -2917,13 +2870,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wordwrap@npm:~0.0.2":
-  version: 0.0.3
-  resolution: "wordwrap@npm:0.0.3"
-  checksum: dfc2d3512e857ae4b3bc2e8d4e5d2c285c28a4b87cd1d81c977ce9a1a99152d355807e046851a3d61148f39d877fbb889352e07b65a9cbdd2256aa928e159026
-  languageName: node
-  linkType: hard
-
 "wrappy@npm:1":
   version: 1.0.2
   resolution: "wrappy@npm:1.0.2"