Merge pull request #206 from pavlovcik/chore/enhance-loading-backgrou…

…nd-on-load

globals.d.ts

@@ -1,7 +1,5 @@
 import { Ethereum } from "ethereum-protocol";
 
 declare global {
-  interface Window {
-    ethereum: Ethereum;
-  }
+  const ethereum: Ethereum;
 }

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`");
     }
   }
 

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<string, string> = {};
   private _provider!: JsonRpcProvider;
   private _currentIndex = 0;
-  private _signer;
+  private _signer: JsonRpcSigner | null = null;
 
   get signer() {
     return this._signer;

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");
+}

static/scripts/rewards/render-transaction/read-claim-data-from-url.ts

@@ -32,9 +32,13 @@ export async function readClaimDataFromUrl(app: AppState) {
   app.claims = decodeClaimData(base64encodedTxData).flat();
   app.claimTxs = await getClaimedTxs(app);
   app.provider = await useFastestRpc(app);
-  if (window.ethereum) {
-    app.signer = await connectWallet().catch(console.error);
-    window.ethereum.on("accountsChanged", () => {
+  if (ethereum) {
+    try {
+      app.signer = await connectWallet();
+    } catch (error) {
+      /* empty */
+    }
+    ethereum.on("accountsChanged", () => {
       checkRenderMakeClaimControl(app).catch(console.error);
       checkRenderInvalidatePermitAdminControl(app).catch(console.error);
     });
@@ -46,7 +50,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<Record<string, string>> {

static/scripts/rewards/render-transaction/render-transaction.ts

@@ -53,7 +53,7 @@ export async function renderTransaction(): Promise<Success> {
     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));

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();
 }

static/scripts/rewards/web3/connect-wallet.ts

@@ -4,7 +4,7 @@ import { buttonController, toaster } from "../toaster";
 
 export async function connectWallet(): Promise<JsonRpcSigner | null> {
   try {
-    const wallet = new ethers.providers.Web3Provider(window.ethereum);
+    const wallet = new ethers.providers.Web3Provider(ethereum);
 
     await wallet.send("eth_requestAccounts", []);
 

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", <T>(newNetworkId: T | string) => handleIfOnCorrectNetwork(parseInt(newNetworkId as string, 16), desiredNetworkId));
+  ethereum.on("chainChanged", <T>(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);

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;
+  }
+}

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 */