Offramp link to docs

cypress/e2e/claim-portal-success.cy.ts

@@ -34,8 +34,8 @@ describe("Claims Portal Success", () => {
       cy.get("#view-claim").should("be.visible").and("include.text", "View Claim");
 
       // anvil confirms it instantly so there is two notifications
-      cy.get("body").should("contain.text", "Transaction sent");
-      cy.get("body").should("contain.text", "Claim Complete");
+      cy.get("body", { timeout: 15000 }).should("contain.text", "Transaction sent");
+      cy.get("body", { timeout: 15000 }).should("contain.text", "Claim Complete");
 
       cy.window().then((win) => {
         win.open = cy.stub().as("open");
@@ -65,7 +65,7 @@ describe("Claims Portal Success", () => {
 
       cy.get("#view-claim").should("not.be.visible");
 
-      cy.get("body").should("contain.text", "This reward is not for you");
+      cy.get("body", { timeout: 15000 }).should("contain.text", "This reward is not for you");
     });
   });
 
@@ -87,7 +87,7 @@ describe("Claims Portal Success", () => {
       cy.get("#claim-loader").should("not.be.visible");
       cy.get("#view-claim").should("not.be.visible");
 
-      cy.get("body").should("contain.text", "Nonce invalidation transaction sent");
+      cy.get("body", { timeout: 15000 }).should("contain.text", "Nonce invalidation transaction sent");
     });
   });
 });

static/index.html

@@ -179,8 +179,19 @@
           <div id="rewardsCount"></div>
           <div id="nextTx"></div>
         </figure>
-        <div id="build">
-          <a target="_blank" rel="noopener noreferrer"></a>
+        <div class="footer">
+          <div id="build">
+            <a target="_blank" rel="noopener noreferrer"></a>
+          </div>
+          <a class="faq-icon" href="https://github.com/ubiquity/work.ubq.fi/discussions/53" target="_blank">
+            <div>
+              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808080">
+                <path
+                  d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+                />
+              </svg>
+            </div>
+          </a>
         </div>
       </footer>
     </main>

static/scripts/rewards/init.ts

@@ -1,18 +1,14 @@
 import { app } from "./app-state";
+import { displayCommitHash } from "./render-transaction/display-commit-hash";
 import { readClaimDataFromUrl } from "./render-transaction/read-claim-data-from-url";
 import { grid } from "./the-grid";
 
-displayCommitHash(); // @DEV: display commit hash in footer
+displayCommitHash();
 grid(document.getElementById("grid") as HTMLElement, gridLoadedCallback); // @DEV: display grid background
 readClaimDataFromUrl(app).catch(console.error); // @DEV: read claim data from URL
 
-declare const commitHash: string; // @DEV: passed in at build time check build/esbuild-build.ts
-function displayCommitHash() {
-  // display commit hash in footer
-  const buildElement = document.querySelector(`#build a`) as HTMLAnchorElement;
-  buildElement.innerHTML = commitHash;
-  buildElement.href = `https://github.com/ubiquity/pay.ubq.fi/commit/${commitHash}`;
-}
+const footer = document.querySelector(".footer") as Element;
+footer.classList.add("animate");
 
 // cSpell:ignore llback
 function gridLoadedCallback() {

static/scripts/rewards/render-transaction/display-commit-hash.ts

@@ -0,0 +1,7 @@
+declare const commitHash: string; // @DEV: passed in at build time check build/esbuild-build.ts
+export function displayCommitHash() {
+  // display commit hash in footer
+  const buildElement = document.querySelector(`#build a`) as HTMLAnchorElement;
+  buildElement.innerHTML = commitHash;
+  buildElement.href = `https://github.com/ubiquity/pay.ubq.fi/commit/${commitHash}`;
+}

static/styles/rewards/pay.css

@@ -193,3 +193,29 @@ footer {
   border-bottom-color: transparent;
   border-left-color: transparent;
 }
+
+.faq-icon {
+  position: fixed;
+  right: 20px;
+  cursor: pointer;
+}
+
+a.faq-icon > div {
+  font-size: 12px;
+  color: #fff;
+}
+
+a.faq-icon > div:hover {
+  opacity: 1;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 1s;
+}
+
+.footer.animate {
+  opacity: 1;
+}

yarn.lock

@@ -8613,4 +8613,4 @@ __metadata:
   resolution: "zod@npm:3.23.8"
   checksum: 10c0/8f14c87d6b1b53c944c25ce7a28616896319d95bc46a9660fe441adc0ed0a81253b02b5abdaeffedbeb23bdd25a0bf1c29d2c12dd919aef6447652dd295e3e69
   languageName: node
-  linkType: hard
+  linkType: hard