Skip to content

Commit

Permalink
Merge pull request #296 from ubiquity/revert-274-rewrite-transactions
Browse files Browse the repository at this point in the history
  • Loading branch information
@0x4007
0x4007 authored Sep 9, 2024
2 parents 7c6d302 + 86936e0 commit ca0f4bd
Show file tree
Hide file tree
Showing 25 changed files with 455 additions and 475 deletions.
18 changes: 9 additions & 9 deletions cypress/e2e/claim-portal-failure.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ describe("Claims Portal Failures", () => {
});

it("should handle no connected signer", () => {
cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");

cy.get("button.make-claim").first().should("be.visible").click();
cy.get(".invalidator").should("not.be.visible");
cy.get(".claim-loader").should("not.be.visible");
cy.get(".view-claim").should("not.be.visible").and("include.text", "View Claim");
cy.get("button[id='make-claim']").should("be.visible").click();
cy.get("#invalidator").should("not.be.visible");
cy.get("#claim-loader").should("not.be.visible");
cy.get("#view-claim").should("not.be.visible").and("include.text", "View Claim");

cy.get("body").should("contain.text", "Please connect your wallet to claim this reward.");
});
Expand All @@ -46,11 +46,11 @@ describe("Claims Portal Failures", () => {
});

it("should handle feedback for a failed wallet provider transaction", () => {
cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");

cy.get("button.make-claim").first().should("be.visible").click();
cy.get(".claim-loader").first().should("be.visible");
cy.get(".invalidator").first().should("not.be.visible");
cy.get("button[id='make-claim']").should("be.visible").click();
cy.get("#claim-loader").should("be.visible");
cy.get("#invalidator").should("not.be.visible");
// cy.get("#claim-loader").should("not.be.visible"); // gets stuck here
});
});
Expand Down
12 changes: 6 additions & 6 deletions cypress/e2e/claim-portal-non-web3.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ describe("Claims Portal Non-Web3", () => {
cy.visit(`/${claimUrl}`);
cy.wait(2000);

cy.get(".invalidator").should("not.be.visible");
cy.get(".claim-loader").should("not.be.visible");
cy.get(".view-claim").should("not.be.visible");
cy.get("#invalidator").should("not.be.visible");
cy.get("#claim-loader").should("not.be.visible");
cy.get("#view-claim").should("not.be.visible");

cy.get("body", { timeout: 3000 }).should("contain.text", "Please use a web3 enabled browser to collect this reward.");
});
Expand Down Expand Up @@ -79,9 +79,9 @@ function testUserAgent(userAgent: string) {
});

cy.wait(2000);
cy.get(".invalidator").should("not.be.visible");
cy.get(".claim-loader").should("not.be.visible");
cy.get(".view-claim").should("not.be.visible");
cy.get("#invalidator").should("not.be.visible");
cy.get("#claim-loader").should("not.be.visible");
cy.get("#view-claim").should("not.be.visible");

cy.get("body", { timeout: 3000 }).should("contain.text", "Please use a mobile-friendly Web3 browser such as MetaMask to collect this reward");
}
Expand Down
45 changes: 21 additions & 24 deletions cypress/e2e/claim-portal-success.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,21 @@ describe("Claims Portal Success", () => {
});
describe("Success", () => {
it("should successfully claim a permit", () => {
cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");

cy.get('table[data-make-claim="ok"]').first().should("exist").and("include.text", "337888.4 WXDAI");
cy.get('table[data-make-claim="ok"]').should("exist").and("include.text", "337888.4 WXDAI");

cy.get("button[class='make-claim']").first().invoke("click");
cy.get("button[id='make-claim']").invoke("click");

cy.get(".invalidator").first().should("not.be.visible");
cy.get("#invalidator").should("not.be.visible");

cy.get(".claim-loader").first().should("be.visible").as("loader");
cy.get("#claim-loader").should("be.visible").as("loader");

cy.wait(5000); // required for the action to complete

cy.get("@loader").first().should("not.be.visible");
cy.get("@loader").should("not.be.visible");

cy.get(".view-claim").first().should("be.visible").and("include.text", "View Claim");
cy.get("#view-claim").should("be.visible").and("include.text", "View Claim");

// anvil confirms it instantly so there is two notifications
cy.get("body", { timeout: 15000 }).should("contain.text", "Transaction sent");
Expand All @@ -41,13 +41,10 @@ describe("Claims Portal Success", () => {
win.open = cy.stub().as("open");
});

cy.get(".view-claim")
.first()
cy.get("#view-claim")
.invoke("click")
.then(() => {
cy.get("@open")
.first()
.should("be.calledWithMatch", /https:\/\/blockscan.com\/tx/);
cy.get("@open").should("be.calledWithMatch", /https:\/\/blockscan.com\/tx/);
});
});
});
Expand All @@ -57,17 +54,17 @@ describe("Claims Portal Success", () => {
cy.visit(`/${notMeantForYouPermit}`).then(() => {
cy.wait(2000);
});
cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");

cy.get('table[data-make-claim="ok"]').first().should("exist");
cy.get('table[data-make-claim="ok"]').should("exist");

cy.get("button[class='make-claim']").first().invoke("click");
cy.get("button[id='make-claim']").invoke("click");

cy.get(".invalidator").first().should("not.be.visible");
cy.get("#invalidator").should("not.be.visible");

cy.get(".claim-loader").first().should("be.visible");
cy.get("#claim-loader").should("be.visible");

cy.get(".view-claim").first().should("not.be.visible");
cy.get("#view-claim").should("not.be.visible");

cy.get("body", { timeout: 15000 }).should("contain.text", "This reward is not for you");
});
Expand All @@ -82,16 +79,16 @@ describe("Claims Portal Success", () => {
cy.visit(`/${notMeantForYouPermit}`).then(() => {
cy.wait(2000);
});
cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");

cy.get('table[data-make-claim="ok"]').first().should("exist");
cy.get('table[data-make-claim="ok"]').should("exist");

cy.get(".invalidator").should("be.visible").first().invoke("click");
cy.get("#invalidator").should("be.visible").invoke("click");

cy.get(".claim-loader").first().should("not.be.visible");
cy.get(".view-claim").first().should("not.be.visible");
cy.get("#claim-loader").should("not.be.visible");
cy.get("#view-claim").should("not.be.visible");

cy.get("body", { timeout: 15000 }).first().should("contain.text", "Nonce invalidation transaction sent");
cy.get("body", { timeout: 15000 }).should("contain.text", "Nonce invalidation transaction sent");
});
});
});
Expand Down
61 changes: 34 additions & 27 deletions static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
<title>Ubiquity Rewards | Ubiquity DAO</title>
<!-- icons from: https://fonts.google.com/icons weight: 300 optical-size: 24 -->
</head>

<body>
<background>
<div class="gradient"></div>
Expand Down Expand Up @@ -63,19 +62,19 @@
</tr>
</thead>
<tbody>
<tr class="amount detail">
<tr id="Amount">
<th>
<div>Amount</div>
</th>
<td class="reward-amount">
<td id="rewardAmount">
<div class="loading-message">Loading</div>
</td>
</tr>
<tr class="token detail">
<tr id="Token">
<th>
<div>Token</div>
</th>
<td class="reward-token">
<td id="rewardToken">
<span class="full">
<div></div>
</span>
Expand All @@ -84,11 +83,11 @@
</span>
</td>
</tr>
<tr class="to detail">
<tr id="To">
<th>
<div>For</div>
</th>
<td class="reward-recipient">
<td id="rewardRecipient">
<span class="full">
<div></div>
</span>
Expand All @@ -100,10 +99,10 @@
</span>
</td>
</tr>
<tr class="additional-details-border">
<tr id="additional-details-border">
<th>
<div>
<button class="additional-details">
<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
Expand All @@ -119,8 +118,8 @@
</div>
</th>
<td>
<div class="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
<button class="claim-loader">
<div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
<button id="claim-loader">
<svg
version="1.1"
id="L9"
Expand All @@ -134,9 +133,9 @@
>
<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 class="claiming-message">Claiming</div>
<div id="claiming-message">Claiming</div>
</button>
<button class="make-claim">
<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
Expand All @@ -145,7 +144,7 @@
</svg>
</button>

<button class="view-claim">
<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
Expand All @@ -154,7 +153,7 @@
</svg>
</button>

<button class="invalidator">
<button id="invalidator">
<div>Void</div>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path
Expand All @@ -166,20 +165,28 @@
</td>
</tr>
</tbody>
<tbody id="additionalDetailsTable"></tbody>
</table>
</div>
<footer>
<div id="build">
<a target="_blank" rel="noopener noreferrer"></a>
</div>
<div id="faq-icon">
<a href="https://github.com/ubiquity/work.ubq.fi/discussions/53" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
<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>
</a>
<footer
><figure id="carousel">
<div id="prevTx"></div>
<div id="rewardsCount"></div>
<div id="nextTx"></div>
</figure>
<div class="footer">
<div id="build">
<a target="_blank" rel="noopener noreferrer"></a>
</div>
<div id="faq-icon">
<a href="https://github.com/ubiquity/work.ubq.fi/discussions/53" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
<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>
</a>
</div>
</div>
</footer>
</main>
Expand Down
28 changes: 25 additions & 3 deletions static/scripts/rewards/app-state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export class AppState {
this._signer = value;
}

get networkId(): number | null {
return this.reward?.networkId || null;
}

get provider(): JsonRpcProvider {
return this._provider;
}
Expand All @@ -29,11 +33,29 @@ export class AppState {
return this._currentIndex;
}

getCurrentExplorerUrl(claim: Permit): string {
if (!claim) {
get reward(): Permit {
return this.rewardIndex < this.claims.length ? this.claims[this.rewardIndex] : this.claims[0];
}

get permitNetworkId() {
return this.reward?.networkId;
}

get currentExplorerUrl(): string {
if (!this.reward) {
return "https://blockscan.com";
}
return networkExplorers[claim.networkId] || "https://blockscan.com";
return networkExplorers[this.reward.networkId] || "https://blockscan.com";
}

nextPermit(): Permit | null {
this._currentIndex = Math.min(this.claims.length - 1, this.rewardIndex + 1);
return this.reward;
}

previousPermit(): Permit | null {
this._currentIndex = Math.max(0, this._currentIndex - 1);
return this.reward;
}
}

Expand Down
2 changes: 1 addition & 1 deletion static/scripts/rewards/init.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ displayCommitHash();
grid(document.getElementById("grid") as HTMLElement, gridLoadedCallback); // @DEV: display grid background
readClaimDataFromUrl(app).catch(console.error); // @DEV: read claim data from URL

const footer = document.querySelector("footer") as Element;
const footer = document.querySelector(".footer") as Element;
footer.classList.add("ready");

// cSpell:ignore llback
Expand Down
21 changes: 21 additions & 0 deletions static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { app } from "../app-state";
import { getMakeClaimButton } from "../toaster";
import { table } from "./read-claim-data-from-url";
import { renderTransaction } from "./render-transaction";
import { removeAllEventListeners } from "./utils";

const nextTxButton = document.getElementById("nextTx");
const prevTxButton = document.getElementById("prevTx");

export function claimRewardsPagination(rewardsCount: HTMLElement) {
rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
if (nextTxButton) nextTxButton.addEventListener("click", () => transactionHandler("next"));
if (prevTxButton) prevTxButton.addEventListener("click", () => transactionHandler("previous"));
}

function transactionHandler(direction: "next" | "previous") {
removeAllEventListeners(getMakeClaimButton()) as HTMLButtonElement;
direction === "next" ? app.nextPermit() : app.previousPermit();
table.setAttribute(`data-make-claim`, "error");
renderTransaction().catch(console.error);
}
Loading

0 comments on commit ca0f4bd

Please sign in to comment.