Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "feat: vertically stacked permits" #296

Merged
merged 1 commit into from
Sep 9, 2024
Merged

Revert "feat: vertically stacked permits" #296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions cypress/e2e/claim-portal-failure.cy.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading