From 0c55859e08d727735b9c89aee1f9254cb04317a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Fri, 15 Mar 2024 12:36:10 +0900 Subject: [PATCH 1/7] refactor: handle type errors --- static/scripts/rewards/app-state.ts | 4 ++-- .../read-claim-data-from-url.ts | 19 +++++++++++++------ 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/static/scripts/rewards/app-state.ts b/static/scripts/rewards/app-state.ts index 00d5fdbe..61549f63 100644 --- a/static/scripts/rewards/app-state.ts +++ b/static/scripts/rewards/app-state.ts @@ -1,4 +1,4 @@ -import { JsonRpcProvider } from "@ethersproject/providers"; +import { JsonRpcProvider, JsonRpcSigner } from "@ethersproject/providers"; import { networkExplorers } from "./constants"; import { RewardPermit } from "./render-transaction/tx-type"; @@ -7,7 +7,7 @@ export class AppState { public claimTxs: Record = {}; private _provider!: JsonRpcProvider; private _currentIndex = 0; - private _signer; + private _signer: JsonRpcSigner | null = null; get signer() { return this._signer; diff --git a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts index e54fa2e2..99c1cca8 100644 --- a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts +++ b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts @@ -33,11 +33,14 @@ export async function readClaimDataFromUrl(app: AppState) { app.claimTxs = await getClaimedTxs(app); app.provider = await useFastestRpc(app); if (window.ethereum) { - app.signer = await connectWallet().catch(console.error); - window.ethereum.on("accountsChanged", () => { - checkRenderMakeClaimControl(app).catch(console.error); - checkRenderInvalidatePermitAdminControl(app).catch(console.error); - }); + try { + app.signer = await connectWallet(); + } catch (error) { + window.ethereum.on("accountsChanged", () => { + checkRenderMakeClaimControl(app).catch(console.error); + checkRenderInvalidatePermitAdminControl(app).catch(console.error); + }); + } } else { buttonController.hideAll(); toaster.create("info", "Please use a web3 enabled browser to collect this reward."); @@ -46,7 +49,11 @@ export async function readClaimDataFromUrl(app: AppState) { displayRewardPagination(); await renderTransaction(); - await verifyCurrentNetwork(app.networkId); + if (app.networkId !== null) { + await verifyCurrentNetwork(app.networkId); + } else { + throw new Error("Network ID is null"); + } } async function getClaimedTxs(app: AppState): Promise> { From 55f68840ab85bf6f184bfce959e0b5e12279ff5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Fri, 15 Mar 2024 12:36:32 +0900 Subject: [PATCH 2/7] fix: tsconfig complaining about js import --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 31f00cd4..31241232 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,5 @@ { - "include": ["src", "lib/chainlist/constants/extraRpcs.js", "static", "build", "scripts/typescript", "globals.d.ts"], + "include": ["src", "static", "build", "scripts/typescript", "globals.d.ts"], "compilerOptions": { /* Visit https://aka.ms/tsconfig to read more about this file */ /* Projects */ From 1f6f6064b17bda8fc5a97093918d0ba9695774ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Fri, 15 Mar 2024 12:39:38 +0900 Subject: [PATCH 3/7] refactor: window.ethereum to ethereum it is concise --- globals.d.ts | 7 ++++--- static/scripts/rewards/ButtonController.ts | 12 ++++++------ .../render-transaction/read-claim-data-from-url.ts | 4 ++-- .../rewards/render-transaction/render-transaction.ts | 2 +- static/scripts/rewards/web3/connect-wallet.ts | 2 +- .../scripts/rewards/web3/verify-current-network.ts | 6 +++--- 6 files changed, 17 insertions(+), 16 deletions(-) diff --git a/globals.d.ts b/globals.d.ts index 1a9ff4d3..475dd38f 100644 --- a/globals.d.ts +++ b/globals.d.ts @@ -1,7 +1,8 @@ import { Ethereum } from "ethereum-protocol"; declare global { - interface Window { - ethereum: Ethereum; - } + const ethereum: Ethereum; + // interface Window { + // ethereum: Ethereum; + // } } diff --git a/static/scripts/rewards/ButtonController.ts b/static/scripts/rewards/ButtonController.ts index 5f7372ef..8fea529d 100644 --- a/static/scripts/rewards/ButtonController.ts +++ b/static/scripts/rewards/ButtonController.ts @@ -11,10 +11,10 @@ export class ButtonController { } public showLoader(): void { - if (window.ethereum) { + if (ethereum) { this._controls.setAttribute(LOADER, "true"); } else { - throw new Error("Can not show loader without `window.ethereum`"); + throw new Error("Can not show loader without `ethereum`"); } } @@ -27,10 +27,10 @@ export class ButtonController { } public showMakeClaim(): void { - if (window.ethereum) { + if (ethereum) { this._controls.setAttribute(MAKE_CLAIM, "true"); } else { - throw new Error("Can not show make claim button without `window.ethereum`"); + throw new Error("Can not show make claim button without `ethereum`"); } } @@ -47,10 +47,10 @@ export class ButtonController { } public showInvalidator(): void { - if (window.ethereum) { + if (ethereum) { this._controls.setAttribute(INVALIDATOR, "true"); } else { - throw new Error("Can not show invalidator button without `window.ethereum`"); + throw new Error("Can not show invalidator button without `ethereum`"); } } diff --git a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts index 99c1cca8..fe499447 100644 --- a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts +++ b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts @@ -32,11 +32,11 @@ export async function readClaimDataFromUrl(app: AppState) { app.claims = decodeClaimData(base64encodedTxData).flat(); app.claimTxs = await getClaimedTxs(app); app.provider = await useFastestRpc(app); - if (window.ethereum) { + if (ethereum) { try { app.signer = await connectWallet(); } catch (error) { - window.ethereum.on("accountsChanged", () => { + ethereum.on("accountsChanged", () => { checkRenderMakeClaimControl(app).catch(console.error); checkRenderInvalidatePermitAdminControl(app).catch(console.error); }); diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts index b3a69a94..2bbc0346 100644 --- a/static/scripts/rewards/render-transaction/render-transaction.ts +++ b/static/scripts/rewards/render-transaction/render-transaction.ts @@ -53,7 +53,7 @@ export async function renderTransaction(): Promise { if (app.claimTxs[app.reward.permit.nonce.toString()] !== undefined) { buttonController.showViewClaim(); viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.permit.nonce.toString()]}`)); - } else if (window.ethereum) { + } else if (ethereum) { // requires wallet connection to claim buttonController.showMakeClaim(); getMakeClaimButton().addEventListener("click", claimErc20PermitHandlerWrapper(app)); diff --git a/static/scripts/rewards/web3/connect-wallet.ts b/static/scripts/rewards/web3/connect-wallet.ts index 81a29cb7..fcfae3df 100644 --- a/static/scripts/rewards/web3/connect-wallet.ts +++ b/static/scripts/rewards/web3/connect-wallet.ts @@ -4,7 +4,7 @@ import { buttonController, toaster } from "../toaster"; export async function connectWallet(): Promise { try { - const wallet = new ethers.providers.Web3Provider(window.ethereum); + const wallet = new ethers.providers.Web3Provider(ethereum); await wallet.send("eth_requestAccounts", []); diff --git a/static/scripts/rewards/web3/verify-current-network.ts b/static/scripts/rewards/web3/verify-current-network.ts index 8d1e530d..1f9b7a4e 100644 --- a/static/scripts/rewards/web3/verify-current-network.ts +++ b/static/scripts/rewards/web3/verify-current-network.ts @@ -5,18 +5,18 @@ import { notOnCorrectNetwork } from "./not-on-correct-network"; // verifyCurrentNetwork checks if the user is on the correct network and displays an error if not export async function verifyCurrentNetwork(desiredNetworkId: number) { - if (!window.ethereum) { + if (!ethereum) { buttonController.hideAll(); return; } - const web3provider = new ethers.providers.Web3Provider(window.ethereum); + const web3provider = new ethers.providers.Web3Provider(ethereum); const network = await web3provider.getNetwork(); const currentNetworkId = network.chainId; // watch for network changes - window.ethereum.on("chainChanged", (newNetworkId: T | string) => handleIfOnCorrectNetwork(parseInt(newNetworkId as string, 16), desiredNetworkId)); + ethereum.on("chainChanged", (newNetworkId: T | string) => handleIfOnCorrectNetwork(parseInt(newNetworkId as string, 16), desiredNetworkId)); // if its not on ethereum mainnet, gnosis, or goerli, display error notOnCorrectNetwork(currentNetworkId, desiredNetworkId, web3provider); From c5f2ad3b1daca323a723a5f204c1a95bd46f9c11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sun, 17 Mar 2024 22:17:28 +0900 Subject: [PATCH 4/7] chore: enhance details around how the background loads in --- static/scripts/rewards/init.ts | 7 ++++++- static/scripts/rewards/the-grid.ts | 10 ++++++---- static/styles/rewards/background.css | 23 ++++++++++++----------- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/static/scripts/rewards/init.ts b/static/scripts/rewards/init.ts index 07141cf3..bf9cf9bd 100644 --- a/static/scripts/rewards/init.ts +++ b/static/scripts/rewards/init.ts @@ -3,7 +3,7 @@ import { readClaimDataFromUrl } from "./render-transaction/read-claim-data-from- import { grid } from "./the-grid"; displayCommitHash(); // @DEV: display commit hash in footer -grid(document.getElementById("grid") as HTMLElement); // @DEV: display grid background +grid(document.getElementById("grid") as HTMLElement, gridLoadedCallback); // @DEV: display grid background readClaimDataFromUrl(app).catch(console.error); // @DEV: read claim data from URL @@ -14,3 +14,8 @@ function displayCommitHash() { buildElement.innerHTML = commitHash; buildElement.href = `https://github.com/ubiquity/pay.ubq.fi/commit/${commitHash}`; } + +// cSpell:ignore llback +function gridLoadedCallback() { + document.body.classList.add("grid-loaded"); +} diff --git a/static/scripts/rewards/the-grid.ts b/static/scripts/rewards/the-grid.ts index bd9832eb..02c651f7 100644 --- a/static/scripts/rewards/the-grid.ts +++ b/static/scripts/rewards/the-grid.ts @@ -1,4 +1,4 @@ -export function grid(node = document.body) { +export function grid(node = document.body, callback?: () => void) { // Create canvas and WebGL context const canvas = document.createElement("canvas"); const devicePixelRatio = window.devicePixelRatio || 1; @@ -151,10 +151,12 @@ export function grid(node = document.body) { } // Handle window resize - window.addEventListener("resize", () => { - resizeCanvasToDisplaySize(canvas); - }); + window.addEventListener("resize", () => resizeCanvasToDisplaySize(canvas)); + // Callback + if (callback) { + callback(); + } // Start the render loop render(); } diff --git a/static/styles/rewards/background.css b/static/styles/rewards/background.css index ad98f526..a0662605 100644 --- a/static/styles/rewards/background.css +++ b/static/styles/rewards/background.css @@ -10,30 +10,26 @@ background { } background #grid { - /* -webkit-mask-image: radial-gradient(#00000020 0, #00000080 100%); */ - /* mask-image: radial-gradient(#00000020 0, #00000080 100%); */ - /* opacity: 1; */ pointer-events: none; - opacity: 0.5; - - /* background-image: url(../../media/grid-1.png); */ - /* background-repeat: repeat; */ } -canvas { +background #grid canvas { width: 100%; height: 100%; + opacity: 0; + animation: background-grid-fade-in 2s ease-in-out forwards; } -.gradient { +background .gradient { width: 200vw; height: 200vh; position: absolute; - background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%); opacity: 0; +} +.grid-loaded background .gradient { + background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%); animation: background-gradients-fade-in 2s ease-in-out forwards; } - background > :nth-child(1) { transform: translateX(-100vw); } @@ -46,3 +42,8 @@ background > :nth-child(2) { opacity: 0.125; } } +@keyframes background-grid-fade-in { + to { + opacity: 0.5; + } +} From a61642364f94e8f4d73ac9edb42d0483498ce672 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Wed, 20 Mar 2024 21:21:25 +0900 Subject: [PATCH 5/7] fix: ethereum accounts changed handler --- .../render-transaction/read-claim-data-from-url.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts index fe499447..19bf9429 100644 --- a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts +++ b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts @@ -36,11 +36,12 @@ export async function readClaimDataFromUrl(app: AppState) { try { app.signer = await connectWallet(); } catch (error) { - ethereum.on("accountsChanged", () => { - checkRenderMakeClaimControl(app).catch(console.error); - checkRenderInvalidatePermitAdminControl(app).catch(console.error); - }); + /* empty */ } + ethereum.on("accountsChanged", () => { + checkRenderMakeClaimControl(app).catch(console.error); + checkRenderInvalidatePermitAdminControl(app).catch(console.error); + }); } else { buttonController.hideAll(); toaster.create("info", "Please use a web3 enabled browser to collect this reward."); From 98aed2e9c82f9a459ef658373940c8de651753fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Wed, 20 Mar 2024 21:22:14 +0900 Subject: [PATCH 6/7] chore: clean commented out code --- globals.d.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/globals.d.ts b/globals.d.ts index 475dd38f..e19d1266 100644 --- a/globals.d.ts +++ b/globals.d.ts @@ -2,7 +2,4 @@ import { Ethereum } from "ethereum-protocol"; declare global { const ethereum: Ethereum; - // interface Window { - // ethereum: Ethereum; - // } } From 3223ce83ff095ca59cddd37ab32fc97d2341b3bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Wed, 20 Mar 2024 21:23:57 +0900 Subject: [PATCH 7/7] chore: enhance details around how the background loads in --- static/scripts/rewards/init.ts | 7 ++++++- static/scripts/rewards/the-grid.ts | 10 ++++++---- static/styles/rewards/background.css | 23 ++++++++++++----------- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/static/scripts/rewards/init.ts b/static/scripts/rewards/init.ts index 07141cf3..bf9cf9bd 100644 --- a/static/scripts/rewards/init.ts +++ b/static/scripts/rewards/init.ts @@ -3,7 +3,7 @@ import { readClaimDataFromUrl } from "./render-transaction/read-claim-data-from- import { grid } from "./the-grid"; displayCommitHash(); // @DEV: display commit hash in footer -grid(document.getElementById("grid") as HTMLElement); // @DEV: display grid background +grid(document.getElementById("grid") as HTMLElement, gridLoadedCallback); // @DEV: display grid background readClaimDataFromUrl(app).catch(console.error); // @DEV: read claim data from URL @@ -14,3 +14,8 @@ function displayCommitHash() { buildElement.innerHTML = commitHash; buildElement.href = `https://github.com/ubiquity/pay.ubq.fi/commit/${commitHash}`; } + +// cSpell:ignore llback +function gridLoadedCallback() { + document.body.classList.add("grid-loaded"); +} diff --git a/static/scripts/rewards/the-grid.ts b/static/scripts/rewards/the-grid.ts index bd9832eb..02c651f7 100644 --- a/static/scripts/rewards/the-grid.ts +++ b/static/scripts/rewards/the-grid.ts @@ -1,4 +1,4 @@ -export function grid(node = document.body) { +export function grid(node = document.body, callback?: () => void) { // Create canvas and WebGL context const canvas = document.createElement("canvas"); const devicePixelRatio = window.devicePixelRatio || 1; @@ -151,10 +151,12 @@ export function grid(node = document.body) { } // Handle window resize - window.addEventListener("resize", () => { - resizeCanvasToDisplaySize(canvas); - }); + window.addEventListener("resize", () => resizeCanvasToDisplaySize(canvas)); + // Callback + if (callback) { + callback(); + } // Start the render loop render(); } diff --git a/static/styles/rewards/background.css b/static/styles/rewards/background.css index ad98f526..a0662605 100644 --- a/static/styles/rewards/background.css +++ b/static/styles/rewards/background.css @@ -10,30 +10,26 @@ background { } background #grid { - /* -webkit-mask-image: radial-gradient(#00000020 0, #00000080 100%); */ - /* mask-image: radial-gradient(#00000020 0, #00000080 100%); */ - /* opacity: 1; */ pointer-events: none; - opacity: 0.5; - - /* background-image: url(../../media/grid-1.png); */ - /* background-repeat: repeat; */ } -canvas { +background #grid canvas { width: 100%; height: 100%; + opacity: 0; + animation: background-grid-fade-in 2s ease-in-out forwards; } -.gradient { +background .gradient { width: 200vw; height: 200vh; position: absolute; - background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%); opacity: 0; +} +.grid-loaded background .gradient { + background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%); animation: background-gradients-fade-in 2s ease-in-out forwards; } - background > :nth-child(1) { transform: translateX(-100vw); } @@ -46,3 +42,8 @@ background > :nth-child(2) { opacity: 0.125; } } +@keyframes background-grid-fade-in { + to { + opacity: 0.5; + } +}