ubiquity · zugdev · Jan 6, 2025 · Jan 6, 2025 · Jan 6, 2025 · Jan 6, 2025
diff --git a/build/esbuild-watch.ts b/build/esbuild-watch.ts
@@ -8,6 +8,4 @@ async function watch() {
 }
 
 // The following expression MUST NOT be awaited.
-void watch().catch((err) => {
-  console.error("Error watching:", err);
-});
+void watch();
diff --git a/cypress/scripts/funding.ts b/cypress/scripts/funding.ts
@@ -21,7 +21,7 @@ class TestFunder {
   whale = "0xefC0e701A824943b469a694aC564Aa1efF7Ab7dd";
   expected = {
     allowance: "999999999999999111119999999999999999",
-    balance: "10000000000000000000000",
+    balance: "5000000000000000000000",
   };
 
   async execute() {

diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
   },
   "scripts": {
     "start": "run-s start:sign serve:watch",
-    "serve:watch": "run-p serve watch",
-    "serve": "npx wrangler pages dev static --port 8080",
+    "serve:watch": "run-p start-wrangler watch",
+    "start-wrangler": "npx wrangler pages dev static --port 8080",
     "watch": "tsx build/esbuild-watch.ts",
     "format": "run-s format:lint format:prettier format:cspell",
     "build": "run-s utils:build",

diff --git a/static/index.html b/static/index.html
@@ -49,137 +49,130 @@
           </div>
         </a>
       </header>
-      <div class="receipt-container">
-        <table class="receipt" data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
-          <thead>
-            <tr>
-              <th>
-                <div>Notice</div>
-              </th>
-              <td>
-                <div class="loading-message">Loading</div>
-              </td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr id="Amount">
-              <th>
-                <div>Amount</div>
-              </th>
-              <td id="rewardAmount">
-                <div class="loading-message">Loading</div>
-              </td>
-            </tr>
-            <tr id="Token">
-              <th>
-                <div>Token</div>
-              </th>
-              <td id="rewardToken">
-                <span class="full">
-                  <div></div>
-                </span>
-                <span class="short">
+      <div class="receipt-carrousel-wrapper">
+        <div class="receipt-container">
+          <div class="receipt" data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
+            <div class="body" id="mainDetailsTable">
+              <div class="row" id="Amount">
+                <div class="cell head">Amount</div>
+                <div class="cell" id="rewardAmount">
                   <div class="loading-message">Loading</div>
-                </span>
-              </td>
-            </tr>
-            <tr id="To">
-              <th>
-                <div>For</div>
-              </th>
-              <td id="rewardRecipient">
-                <span class="full">
-                  <div></div>
-                </span>
-                <span class="short">
-                  <div class="loading-message">Loading</div>
-                </span>
-                <span class="ens">
-                  <div></div>
-                </span>
-              </td>
-            </tr>
-            <tr id="additional-details-border">
-              <th>
-                <div>
-                  <button id="additionalDetails">
-                    <div>Details</div>
-                    <svg class="opener" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                      <path
-                        d="M480-134.616 313.078-301.539l43.383-43.383L480-221.384l123.539-123.538 43.383 43.383L480-134.616Zm-123.539-478L313.078-656 480-822.922 646.922-656l-43.383 43.384L480-736.155 356.461-612.616Z"
-                      />
-                    </svg>
-                    <svg class="closer" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                      <path
-                        d="M356-173.847 313.847-216 480-382.153 646.153-216 604-173.847l-124-124-124 124Zm124-404L313.847-744 356-786.153l124 124 124-124L646.153-744 480-577.847Z"
-                      />
-                    </svg>
-                  </button>
                 </div>
-              </th>
-              <td>
-                <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false" data-collect-gift-card="false">
-                  <button id="claim-loader">
-                    <svg
-                      version="1.1"
-                      id="L9"
-                      xmlns="http://www.w3.org/2000/svg"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
-                      width="33.33"
-                      height="33.33"
-                      viewBox="0 0 100 100"
-                      enable-background="new 0 0 0 0"
-                      xml:space="preserve"
-                    >
-                      <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"></path>
-                    </svg>
-                    <div id="claiming-message">Loading</div>
-                  </button>
-                  <button id="make-claim">
-                    <div class="claim-title">Collect</div>
-                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="claim-icon">
-                      <path
-                        d="M252.309-180.001q-30.308 0-51.308-21t-21-51.308V-360H240v107.691q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h455.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463V-360h59.999v107.691q0 30.308-21 51.308t-51.308 21H252.309ZM480-335.386 309.233-506.153l42.153-43.383 98.615 98.615v-336.001h59.998v336.001l98.615-98.615 42.153 43.383L480-335.386Z"
-                      />
-                    </svg>
-                  </button>
-
-                  <button id="view-claim">
-                    <div class="claim-title">View Claim</div>
-                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="link-icon">
-                      <path
-                        d="M212.309-140.001q-30.308 0-51.308-21t-21-51.308v-535.382q0-30.308 21-51.308t51.308-21h252.305V-760H212.309q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v535.382q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h535.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463v-252.305h59.999v252.305q0 30.308-21 51.308t-51.308 21H212.309Zm176.46-206.615-42.153-42.153L717.847-760H560v-59.999h259.999V-560H760v-157.847L388.769-346.616Z"
-                      />
-                    </svg>
-                  </button>
-                  <button id="invalidator">
-                    <div>Void</div>
-                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                      <path
-                        d="M256-213.847 213.847-256l224-224-224-224L256-746.153l224 224 224-224L746.153-704l-224 224 224 224L704-213.847l-224-224-224 224Z"
-                      />
-                    </svg>
-                  </button>
+              </div>
+              <div class="row" id="Token">
+                <div class="cell head">Token</div>
+                <div class="cell" id="rewardToken">
+                  <span class="full">
+                    <div></div>
+                  </span>
+                  <span class="short">
+                    <div class="loading-message">Loading</div>
+                  </span>
+                </div>
+              </div>
+              <div class="row" id="To">
+                <div class="cell head">For</div>
+                <div class="cell" id="rewardRecipient">
+                  <span class="full">
+                    <div></div>
+                  </span>
+                  <span class="short">
+                    <div class="loading-message">Loading</div>
+                  </span>
+                  <span class="ens">
+                    <div></div>
+                  </span>
                 </div>
-              </td>
-            </tr>
-          </tbody>
-          <tbody id="additionalDetailsTable"></tbody>
-        </table>
+              </div>
+            </div>
+            <div class="body" id="additionalDetailsTable"></div>
+            <div class="row" id="additional-details-border">
+              <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false" data-collect-gift-card="false">
+                <button id="additionalDetails">
+                  <div>Details</div>
+                  <svg class="opener" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                    <path
+                      d="M480-134.616 313.078-301.539l43.383-43.383L480-221.384l123.539-123.538 43.383 43.383L480-134.616Zm-123.539-478L313.078-656 480-822.922 646.922-656l-43.383 43.384L480-736.155 356.461-612.616Z"
+                    />
+                  </svg>
+                  <svg class="closer" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                    <path
+                      d="M356-173.847 313.847-216 480-382.153 646.153-216 604-173.847l-124-124-124 124Zm124-404L313.847-744 356-786.153l124 124 124-124L646.153-744 480-577.847Z"
+                    />
+                  </svg>
+                </button>
+                <button id="claim-loader">
+                  <svg
+                    version="1.1"
+                    id="L9"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    width="33.33"
+                    height="33.33"
+                    viewBox="0 0 100 100"
+                    enable-background="new 0 0 0 0"
+                    xml:space="preserve"
+                  >
+                    <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"></path>
+                  </svg>
+                  <div id="claiming-message">Loading</div>
+                </button>
+                <button id="make-claim">
+                  <div class="claim-title">Collect</div>
+                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="claim-icon">
+                    <path
+                      d="M252.309-180.001q-30.308 0-51.308-21t-21-51.308V-360H240v107.691q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h455.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463V-360h59.999v107.691q0 30.308-21 51.308t-51.308 21H252.309ZM480-335.386 309.233-506.153l42.153-43.383 98.615 98.615v-336.001h59.998v336.001l98.615-98.615 42.153 43.383L480-335.386Z"
+                    />
+                  </svg>
+                </button>
+
+                <button id="claim-card">
+                  <div class="claim-title">Mint Debit Card</div>
+                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24px" id="card-icon">
+                    <path 
+                      d="M880-720v480q0 33-23.5 56.5T800-160H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720Zm-720 80h640v-80H160v80Zm0 160v240h640v-240H160Zm0 240v-480 480Z"
+                    />
+                  </svg>
+                </button>
+
+                <button id="view-claim">
+                  <div class="claim-title">View Claim</div>
+                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="link-icon">
+                    <path
+                      d="M212.309-140.001q-30.308 0-51.308-21t-21-51.308v-535.382q0-30.308 21-51.308t51.308-21h252.305V-760H212.309q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v535.382q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h535.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463v-252.305h59.999v252.305q0 30.308-21 51.308t-51.308 21H212.309Zm176.46-206.615-42.153-42.153L717.847-760H560v-59.999h259.999V-560H760v-157.847L388.769-346.616Z"
+                    />
+                  </svg>
+                </button>
+                <button id="invalidator">
+                  <div>Void</div>
+                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                    <path
+                      d="M256-213.847 213.847-256l224-224-224-224L256-746.153l224 224 224-224L746.153-704l-224 224 224 224L704-213.847l-224-224-224 224Z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <figure id="carousel">
+          <div id="prevTx"></div>
+          <div id="rewardsCount"></div>
+          <div id="nextTx"></div>
+        </figure>
       </div>
-      <figure id="carousel">
-        <div id="prevTx"></div>
-        <div id="rewardsCount"></div>
-        <div id="nextTx"></div>
-      </figure>
-      <div>
-        <div id="gift-cards">Loading...</div>
-        <div class="disclaimer">
-          <h2>Disclaimer</h2>
-          <p>All Visa/Mastercard are non-exchangeable & non-refundable.</p>
-          <p>Exact value of a card can be slightly different due to exchange rate.</p>
+      <div id="card-container">
+        <div class="drag-handle"></div>
+        <div class="content">
+          <div id="gift-cards">Loading...</div>
+          <div class="disclaimer">
+            <h2>Disclaimer</h2>
+            <p>All Visa/Mastercard are non-exchangeable & non-refundable.</p>
+            <p>Exact value of a card can be slightly different due to exchange rate.</p>
+          </div>
         </div>
       </div>
+
       <footer>
         <div class="footer">
           <div id="build">

diff --git a/static/scripts/rewards/button-controller.ts b/static/scripts/rewards/button-controller.ts
@@ -1,3 +1,5 @@
+import { handleDrag } from "./render-transaction/card-container-drag";
+
 const LOADER = "data-loader";
 const MAKE_CLAIM = "data-make-claim";
 const VIEW_CLAIM = "data-view-claim";
@@ -94,5 +96,24 @@ const controls = document.getElementById("controls") as HTMLDivElement;
 export function getMakeClaimButton() {
   return document.getElementById("make-claim") as HTMLButtonElement;
 }
+export function getClaimCardButton() {
+  return document.getElementById("claim-card") as HTMLButtonElement;
+}
+
+export function openCardContainer() {
+  cardContainer.style.transform = "translateY(0)";
+  cardContainer.classList.add("visible");
+}
+
+const claimCardButton = getClaimCardButton();
+if (claimCardButton) {
+  claimCardButton.addEventListener("click", openCardContainer);
+}
+
+const cardContainer = document.getElementById("card-container") as HTMLDivElement;
+const dragHandle = cardContainer.querySelector(".drag-handle") as HTMLDivElement;
+
+handleDrag(cardContainer, dragHandle);
+
 export const viewClaimButton = document.getElementById("view-claim") as HTMLButtonElement;
 export const buttonController = new ButtonController(controls);
diff --git a/static/scripts/rewards/render-transaction/card-container-drag.ts b/static/scripts/rewards/render-transaction/card-container-drag.ts
@@ -0,0 +1,69 @@
+const DRAG_THRESHOLD = 100; // px to drag before closing
+
+/**
+ * Attach drag events to a handle that can pull the container down.
+ * @param container The #card-container element.
+ * @param handle The .drag-handle element at the top of the container.
+ */
+export function handleDrag(container: HTMLDivElement, handle: HTMLDivElement): void {
+  let startY = 0;
+  let currentY = 0;
+  let isDragging = false;
+
+  // Start drag
+  function onPointerDown(e: PointerEvent) {
+    // Only left-click or touch
+    if (e.pointerType === "mouse" && e.buttons !== 1) {
+      return;
+    }
+    isDragging = true;
+    startY = e.clientY;
+    currentY = startY;
+
+    // Disable container's transition so it follows the pointer directly
+    container.style.transition = "none";
+
+    // Set the pointer capture so we continue to get events
+    handle.setPointerCapture(e.pointerId);
+  }
+
+  // Move drag
+  function onPointerMove(e: PointerEvent) {
+    if (!isDragging) return;
+    currentY = e.clientY;
+    const deltaY = currentY - startY;
+
+    // Only move the panel downward if user drags down (deltaY > 0)
+    if (deltaY > 0) {
+      container.style.transform = `translateY(${deltaY}px)`;
+    }
+  }
+
+  // End drag
+  function onPointerUp(e: PointerEvent) {
+    if (!isDragging) return;
+    isDragging = false;
+
+    handle.releasePointerCapture(e.pointerId);
+
+    // Re-enable the transition
+    container.style.transition = "transform 0.5s ease-in-out, opacity 0.5s ease-in-out";
+
+    const deltaY = currentY - startY;
+
+    if (deltaY > DRAG_THRESHOLD) {
+      // If dragged sufficiently, close the panel
+      container.classList.remove("visible");
+      // Immediately reset transform so it is hidden
+      container.style.transform = "translateY(100%)";
+    } else {
+      // Otherwise, snap back to fully visible
+      container.style.transform = "translateY(0)";
+    }
+  }
+
+  // Attach pointer event listeners to the handle
+  handle.addEventListener("pointerdown", onPointerDown);
+  handle.addEventListener("pointermove", onPointerMove);
+  handle.addEventListener("pointerup", onPointerUp);
+}