Skip to content

Commit

Permalink
Merge pull request ubiquity#190 from pavlovcik/fix/visible-buttons-on…
Browse files Browse the repository at this point in the history
…-load

Fix/visible buttons on load
  • Loading branch information
0x4007 authored Mar 10, 2024
2 parents d193e6d + 777671e commit e902770
Show file tree
Hide file tree
Showing 18 changed files with 366 additions and 240 deletions.
84 changes: 56 additions & 28 deletions static/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<link href="styles/rewards/claim-table.css" rel="stylesheet" />
<link href="styles/rewards/media-queries.css" rel="stylesheet" />
<link href="styles/rewards/light-mode.css" rel="stylesheet" />

<link rel="canonical" href="https://pay.ubq.fi" />
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Expand All @@ -28,11 +27,7 @@
<meta property="twitter:domain" content="dao.ubq.fi" />
<meta property="twitter:url" content="https://dao.ubq.fi" />
<title>Ubiquity Rewards | Ubiquity DAO</title>
<!--
icons from: https://fonts.google.com/icons
weight: 300
optical-size: 24
-->
<!-- icons from: https://fonts.google.com/icons weight: 300 optical-size: 24 -->
</head>
<body>
<background>
Expand Down Expand Up @@ -62,32 +57,52 @@
<table>
<thead>
<tr>
<th><div>Notice</div></th>
<td><div>Loading...</div></td>
<th>
<div>Notice</div>
</th>
<td>
<div>Loading...</div>
</td>
</tr>
</thead>
<tbody>
<tr id="Amount">
<th><div>Amount</div></th>
<td id="rewardAmount"><div>Loading...</div></td>
<th>
<div>Amount</div>
</th>
<td id="rewardAmount">
<div>Loading...</div>
</td>
</tr>
<tr id="Token">
<th><div>Token</div></th>
<th>
<div>Token</div>
</th>
<td id="rewardToken">
<span class="full"><div></div></span>
<span class="short"><div>Loading...</div></span>
<span class="full">
<div></div>
</span>
<span class="short">
<div>Loading...</div>
</span>
</td>
</tr>
<tr id="To">
<th><div>For</div></th>
<th>
<div>For</div>
</th>
<td id="rewardRecipient">
<span class="full"><div></div></span>
<span class="short"><div>Loading...</div></span>
<span class="full">
<div></div>
</span>
<span class="short">
<div>Loading...</div>
</span>
</td>
</tr>
<tr id="additional-details-border">
<th
><div>
<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">
Expand All @@ -99,13 +114,15 @@
<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>
</svg>
</button>
</div>
</th>
<td>
<div id="controls">
<button id="claimButton" class="hide-cl">
<div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
<button id="claim-loader">
<svg
class="claim-loader"
id="claim-loader"
version="1.1"
id="L9"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -128,28 +145,40 @@
/>
</path>
</svg>
<div id="claiming-message">Claiming</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" class="claim-icon">
<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="viewClaimButton" class="hide-cl">

<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" class="link-icon">
<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>
</td>
</tr>
</tbody>
<tbody id="additionalDetailsTable"></tbody>
</table>

<figure id="carousel">
<div id="prevTx"></div>
<div id="rewardsCount"></div>
Expand All @@ -162,7 +191,6 @@
</div>
</footer>
</main>

<ul class="notifications"></ul>
<script src="out/init.js" type="application/javascript"></script>
<link href="styles/proxima.css" rel="stylesheet" />
Expand Down
91 changes: 91 additions & 0 deletions static/scripts/rewards/ButtonController.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
const LOADER = "data-loader";
const MAKE_CLAIM = "data-make-claim";
const VIEW_CLAIM = "data-view-claim";
const INVALIDATOR = "data-invalidator";
export class ButtonController {
private _controls: HTMLDivElement;

constructor(controls: HTMLDivElement) {
this._controls = controls;
this.hideAll();
}

public showLoader(): void {
if (window.ethereum) {
this._controls.setAttribute(LOADER, "true");
} else {
throw new Error("Can not show loader without `window.ethereum`");
}
}

public hideLoader(): void {
this._controls.setAttribute(LOADER, "false");
}

public hideMakeClaim(): void {
this._controls.setAttribute(MAKE_CLAIM, "false");
}

public showMakeClaim(): void {
if (window.ethereum) {
this._controls.setAttribute(MAKE_CLAIM, "true");
} else {
throw new Error("Can not show make claim button without `window.ethereum`");
}
}

public hideViewClaim(): void {
this._controls.setAttribute(VIEW_CLAIM, "false");
}

public showViewClaim(): void {
this._controls.setAttribute(VIEW_CLAIM, "true");
}

public hideInvalidator(): void {
this._controls.setAttribute(INVALIDATOR, "false");
}

public showInvalidator(): void {
if (window.ethereum) {
this._controls.setAttribute(INVALIDATOR, "true");
} else {
throw new Error("Can not show invalidator button without `window.ethereum`");
}
}

public onlyShowLoader(): void {
this.hideMakeClaim();
this.hideViewClaim();
this.hideInvalidator();
this.showLoader();
}

public onlyShowMakeClaim(): void {
this.hideLoader();
this.showMakeClaim();
this.hideViewClaim();
this.hideInvalidator();
}

public onlyShowViewClaim(): void {
this.hideLoader();
this.hideMakeClaim();
this.showViewClaim();
this.hideInvalidator();
}

public onlyShowInvalidator(): void {
this.hideLoader();
this.hideMakeClaim();
this.hideViewClaim();
this.showInvalidator();
}

public hideAll(): void {
this.hideLoader();
this.hideMakeClaim();
this.hideViewClaim();
this.hideInvalidator();
}
}
12 changes: 0 additions & 12 deletions static/scripts/rewards/invalidate-component.ts

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { app } from "../app-state";
import { claimButton } from "../toaster";
import { makeClaimButton } from "../toaster";
import { table } from "./read-claim-data-from-url";
import { renderTransaction } from "./render-transaction";
import { removeAllEventListeners } from "./utils";
Expand All @@ -9,24 +9,13 @@ 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"));
}

if (nextTxButton) {
nextTxButton.addEventListener("click", () => {
claimButton.element = removeAllEventListeners(claimButton.element) as HTMLButtonElement;
app.nextPermit();
rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
table.setAttribute(`data-claim`, "error");
renderTransaction().catch(console.error);
});
}

if (prevTxButton) {
prevTxButton.addEventListener("click", () => {
claimButton.element = removeAllEventListeners(claimButton.element) as HTMLButtonElement;
app.previousPermit();
rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
table.setAttribute(`data-claim`, "error");
renderTransaction().catch(console.error);
});
}
export function transactionHandler(direction: "next" | "previous") {
removeAllEventListeners(makeClaimButton) as HTMLButtonElement;
direction === "next" ? app.nextPermit() : app.previousPermit();
table.setAttribute(`data-make-claim`, "error");
renderTransaction().catch(console.error);
}
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function insertErc20PermitTableData(
{ name: "Balance", value: treasury.balance.gte(0) ? `${ethers.utils.formatUnits(treasury.balance, treasury.decimals)} ${treasury.symbol}` : "N/A" },
{ name: "Allowance", value: treasury.allowance.gte(0) ? `${ethers.utils.formatUnits(treasury.allowance, treasury.decimals)} ${treasury.symbol}` : "N/A" },
]);
table.setAttribute(`data-claim-rendered`, "true");
table.setAttribute(`data-make-claim-rendered`, "true");
return requestedAmountElement;
}

Expand Down Expand Up @@ -63,7 +63,7 @@ export function insertErc721PermitTableData(reward: Erc721Permit, table: Element
},
{ name: "Contribution Type", value: GITHUB_CONTRIBUTION_TYPE.split(",").join(", ") },
]);
table.setAttribute(`data-claim-rendered`, "true");
table.setAttribute(`data-make-claim-rendered`, "true");
return requestedAmountElement;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Type } from "@sinclair/typebox";
import { Value } from "@sinclair/typebox/value";
import { createClient } from "@supabase/supabase-js";
import { AppState, app } from "../app-state";
import { useFastestRpc } from "../rpc-optimization/get-optimal-provider";
import { connectWallet } from "../web3/connect-wallet";
Expand All @@ -7,8 +9,7 @@ import { claimRewardsPagination } from "./claim-rewards-pagination";
import { renderTransaction } from "./render-transaction";
import { setClaimMessage } from "./set-claim-message";
import { RewardPermit, claimTxT } from "./tx-type";
import { Type } from "@sinclair/typebox";
import { createClient } from "@supabase/supabase-js";
import { buttonController, toaster } from "../toaster";

declare const SUPABASE_URL: string;
declare const SUPABASE_ANON_KEY: string;
Expand All @@ -23,22 +24,25 @@ export async function readClaimDataFromUrl(app: AppState) {
if (!base64encodedTxData) {
// No claim data found
setClaimMessage({ type: "Notice", message: `No claim data found.` });
table.setAttribute(`data-claim`, "error");
table.setAttribute(`data-make-claim`, "error");
return;
}

app.claims = decodeClaimData(base64encodedTxData).flat();
app.claimTxs = await getClaimedTxs(app);
app.provider = await useFastestRpc(app);
const networkId = app.reward?.networkId || app.networkId;
app.signer = await connectWallet().catch(console.error);

if (window.ethereum) {
app.signer = await connectWallet().catch(console.error);
window.ethereum.on("accountsChanged", () => buttonController.showMakeClaim());
} else {
buttonController.hideAll();
toaster.create("info", "Please use a web3 enabled browser to collect this reward.");
}
displayRewardDetails();
displayRewardPagination();

renderTransaction()
.then(() => verifyCurrentNetwork(networkId as number))
.catch(console.error);
await renderTransaction();
await verifyCurrentNetwork(app.networkId);
}

async function getClaimedTxs(app: AppState): Promise<Record<string, string>> {
Expand All @@ -61,15 +65,15 @@ function decodeClaimData(base64encodedTxData: string): RewardPermit[] {
} catch (error) {
console.error(error);
setClaimMessage({ type: "Error", message: `1. Invalid claim data passed in URL` });
table.setAttribute(`data-claim`, "error");
table.setAttribute(`data-make-claim`, "error");
throw error;
}
try {
return [Value.Decode(Type.Array(claimTxT), permit)];
} catch (error) {
console.error(error);
setClaimMessage({ type: "Error", message: `2. Invalid claim data passed in URL` });
table.setAttribute(`data-claim`, "error");
table.setAttribute(`data-make-claim`, "error");
throw error;
}
}
Expand Down
Loading

0 comments on commit e902770

Please sign in to comment.