Merge pull request #76 from Venoox/improvements

feat: support for gnosis chain
ubiquity · Jul 5, 2023 · ed640bd · ed640bd
2 parents 8cba080 + 499807f
commit ed640bd
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 92 deletions.
diff --git a/static/scripts/constants.ts b/static/scripts/constants.ts
@@ -0,0 +1,28 @@
+export enum Network {
+  Mainnet = "0x1",
+  Goerli = "0x5",
+  Gnosis = "0x64",
+}
+
+export enum Token {
+  DAI = "0x6b175474e89094c44da98b954eedeac495271d0f",
+  WXDAI = "0xe91d153e0b41518a2ce8dd3d7944fa863463a97d",
+}
+
+export const networkName = {
+  [Network.Mainnet]: "Ethereum Mainnet",
+  [Network.Goerli]: "Goerli Testnet",
+  [Network.Gnosis]: "Gnosis Chain",
+};
+
+export const networkExplorer = {
+  [Network.Mainnet]: "https://etherscan.io",
+  [Network.Goerli]: "https://goerli.etherscan.io",
+  [Network.Gnosis]: "https://gnosisscan.io",
+};
+
+export const networkRpc = {
+  [Network.Mainnet]: "https://rpc-pay.ubq.fi/v1/mainnet",
+  [Network.Goerli]: "https://rpc-pay.ubq.fi/v1/goerli",
+  [Network.Gnosis]: "https://rpc.gnosischain.com",
+};
diff --git a/static/scripts/draw.ts b/static/scripts/draw.ts
@@ -1,29 +1,57 @@
-export const drawInit = (): void => {
-  var Cell: any = function Cell(settings: any): any {
-    var keys = Object.keys(settings),
-      x = keys.length;
-    while (x--) this[keys[x]] = settings[keys[x]];
-    return this;
+export interface DrawConfig {
+  id?: string;
+  cell_resolution: number;
+  point_resolution: number;
+  shade: number;
+  step: number;
+  refresh: number;
+  target: HTMLElement;
+}
+
+export interface DrawSettings extends DrawConfig {
+  resolution: {
+    width: number;
+    height: number;
   };
+  red: number;
+  green: number;
+  blue: number;
+  canvas: HTMLCanvasElement;
+  cells_per_row: number;
+  cells_per_column: number;
+  total_cell_count: number;
+  model: Cell[][];
+}
+
+interface Cell {
+  opacity: number;
+  x: number;
+  y: number;
+  index: number;
+  direction: number;
+  speed: number;
+}
+
+export const drawInit = (): void => {
   var render = {
-    point: function (cell, target, settings) {
+    point: function (cell: Cell, target: CanvasRenderingContext2D, settings: DrawSettings) {
       target.fillStyle = ["rgba(", settings.red, ",", settings.green, ",", settings.blue, ",", 1, ")"].join("");
       target.fillRect(settings.cell_resolution * cell.x, settings.cell_resolution * cell.y, settings.point_resolution, settings.point_resolution);
     },
-    fill: function (cell, target, settings) {
+    fill: function (cell: Cell, target: CanvasRenderingContext2D, settings: DrawSettings) {
       var darker_red = Math.ceil(settings.red / 16);
       var darker_green = Math.ceil(settings.green / 16);
       var darker_blue = Math.ceil(settings.blue / 16);
       target.fillStyle = ["rgba(", darker_red, ",", darker_green, ",", darker_blue, ",", cell.opacity, ")"].join("");
       target.fillRect(settings.cell_resolution * cell.x, settings.cell_resolution * cell.y, settings.cell_resolution, settings.cell_resolution);
     },
-    border: function (cell, target, settings) {
+    border: function (cell: Cell, target: CanvasRenderingContext2D, settings: DrawSettings) {
       var ss = ["rgba(", settings.red, ",", settings.green, ",", settings.blue, ", ", 1 / 16, ")"].join("");
       target.lineWidth = 0.5;
       target.strokeStyle = ss;
       target.strokeRect(settings.cell_resolution * cell.x, settings.cell_resolution * cell.y, settings.cell_resolution, settings.cell_resolution);
     },
-    animate: function (cell, target, settings) {
+    animate: function (cell: Cell, target: CanvasRenderingContext2D, settings: DrawSettings) {
       var step = settings.step;
       if (cell.direction == 1) cell.opacity += step * cell.speed;
       if (cell.direction == -1) cell.opacity -= step * cell.speed;
@@ -37,7 +65,7 @@ export const drawInit = (): void => {
       target.fillRect(settings.cell_resolution * cell.x, settings.cell_resolution * cell.y, settings.point_resolution, settings.point_resolution);
     },
   };
-  var prep = function (target, settings, temp_resize_switch) {
+  var prep = function (target: CanvasRenderingContext2D, settings: DrawSettings, temp_resize_switch: boolean) {
     var x = settings.cells_per_row;
     while (x--) {
       var y = settings.cells_per_column;
@@ -50,7 +78,7 @@ export const drawInit = (): void => {
 
     function looper() {
       var canvas = settings.canvas,
-        c = canvas.getContext("2d");
+        c = canvas.getContext("2d")!;
 
       // console.log({ "looping": true });
 
@@ -106,7 +134,19 @@ export const drawInit = (): void => {
   var local_settings: any = null;
   var resize_handler_set = false;
 
-  (window as any).draw = function draw(settings) {
+  window.draw = function draw(config) {
+    let settings: DrawSettings = {
+      ...config,
+      red: 0,
+      green: 0,
+      blue: 0,
+      canvas: document.createElement("canvas"),
+      model: [],
+      resolution: { width: 0, height: 0 },
+      cells_per_row: 0,
+      cells_per_column: 0,
+      total_cell_count: 0,
+    };
     var temp_resize_switch = true;
     var offset;
 
@@ -116,32 +156,28 @@ export const drawInit = (): void => {
       requestAnimationFrame(function () {
         offset = setTimeout(function () {
           local_settings.target.innerHTML = "";
-          (window as any).draw(local_settings);
+          window.draw(local_settings);
         }, local_settings.refresh);
       });
     }
 
     if (settings == void 0) {
       throw Error("No settings for grid");
     }
-    var canvas = document.createElement("canvas");
-    var context = canvas.getContext("2d") as CanvasRenderingContext2D;
+    var context = settings.canvas.getContext("2d") as CanvasRenderingContext2D;
     if (settings.shade) {
       settings.red = settings.shade;
       settings.green = settings.shade;
       settings.blue = settings.shade;
     }
-    if (!settings.red) settings.red = 0;
-    if (!settings.green) settings.green = 0;
-    if (!settings.blue) settings.blue = 0;
     settings.resolution = {
       width: settings.target.offsetWidth,
       height: settings.target.offsetHeight,
     };
     if (settings.id) {
-      canvas.id = settings.id;
+      settings.canvas.id = settings.id;
     }
-    settings.canvas = canvas;
+    settings.canvas = settings.canvas;
     context.canvas.width = settings.resolution.width;
     context.canvas.height = settings.resolution.height;
     local_settings = JSON.parse(JSON.stringify(settings));
@@ -160,24 +196,21 @@ export const drawInit = (): void => {
     settings.cells_per_row = Math.ceil(settings.target.offsetWidth / settings.cell_resolution);
     settings.cells_per_column = Math.ceil(settings.target.offsetHeight / settings.cell_resolution);
     settings.total_cell_count = settings.cells_per_row * settings.cells_per_column;
-    settings.model = [];
     var x = -1; //  row
     var i = -1; //  index
     while (++x < settings.cells_per_row) {
       var y = -1; //  column (actual cell)
-      var row: any[] = [];
+      var row: Cell[] = [];
       while (++y < settings.cells_per_column) {
         var o = Math.random();
-        row.push(
-          new Cell({
-            opacity: 0,
-            x: x,
-            y: y,
-            index: ++i,
-            direction: 1,
-            speed: o,
-          }),
-        );
+        row.push({
+          opacity: 0,
+          x: x,
+          y: y,
+          index: ++i,
+          direction: 1,
+          speed: o,
+        });
       }
       settings.model.push(row);
     }

diff --git a/static/scripts/get-contract.ts b/static/scripts/get-contract.ts
@@ -1,8 +1,10 @@
 import { Contract, ethers } from "ethers";
 import { daiAbi } from "./abis";
+import { claimNetworkId } from "./render-transaction";
+import { networkRpc } from "./constants";
 
 export const getERC20Contract = async (contractAddress: string): Promise<Contract> => {
-  const provider = new ethers.providers.JsonRpcProvider("https://rpc-pay.ubq.fi/v1/mainnet");
+  const provider = new ethers.providers.JsonRpcProvider(networkRpc[claimNetworkId]);
   const contractInstance = new ethers.Contract(contractAddress, daiAbi, provider);
   return contractInstance;
 };

diff --git a/static/scripts/globals.d.ts b/static/scripts/globals.d.ts
@@ -0,0 +1,22 @@
+import { TxType } from "./render-transaction";
+import { DrawConfig } from "./draw";
+
+export interface Ethereumish {
+  autoRefreshOnNetworkChange: boolean;
+  chainId: string;
+  isMetaMask?: boolean;
+  isStatus?: boolean;
+  networkVersion: string;
+  selectedAddress: any;
+
+  on(event: "close" | "accountsChanged" | "chainChanged" | "networkChanged", callback: (payload: any) => void): void;
+  once(event: "close" | "accountsChanged" | "chainChanged" | "networkChanged", callback: (payload: any) => void): void;
+}
+
+declare global {
+  interface Window {
+    ethereum: Ethereumish;
+    draw(settings: DrawConfig): void;
+    txData: TxType;
+  }
+}