Sync branch to template

build/esbuild-build.ts

@@ -1,10 +1,10 @@
-import { execSync } from "child_process";
-import { config } from "dotenv";
 import esbuild from "esbuild";
-
-const typescriptEntries = ["static/scripts/onboarding/onboarding.ts"];
-const cssEntries = ["static/styles/onboarding/onboarding.css"];
-export const entries = [...typescriptEntries, ...cssEntries];
+const typescriptEntries = ["static/main.ts"];
+// const cssEntries = ["static/style.css"];
+const entries = [
+  ...typescriptEntries,
+  //  ...cssEntries
+];
 
 export const esBuildContext: esbuild.BuildOptions = {
   sourcemap: true,
@@ -19,10 +19,7 @@ export const esBuildContext: esbuild.BuildOptions = {
     ".ttf": "dataurl",
     ".svg": "dataurl",
   },
-  outdir: "static/out",
-  define: createEnvDefines(["SUPABASE_URL", "SUPABASE_ANON_KEY", "FRONTEND_URL"], {
-    commitHash: execSync(`git rev-parse --short HEAD`).toString().trim(),
-  }),
+  outdir: "static/dist",
 };
 
 esbuild
@@ -34,22 +31,3 @@ esbuild
     console.error(err);
     process.exit(1);
   });
-
-function createEnvDefines(environmentVariables: string[], generatedAtBuild: Record<string, unknown>): Record<string, string> {
-  const defines: Record<string, string> = {};
-  config();
-  for (const name of environmentVariables) {
-    const envVar = process.env[name];
-    if (envVar !== undefined) {
-      defines[name] = JSON.stringify(envVar);
-    } else {
-      throw new Error(`Missing environment variable: ${name}`);
-    }
-  }
-  Object.keys(generatedAtBuild).forEach((key) => {
-    if (Object.prototype.hasOwnProperty.call(generatedAtBuild, key)) {
-      defines[key] = JSON.stringify(generatedAtBuild[key]);
-    }
-  });
-  return defines;
-}

cypress.config.ts

@@ -1,24 +1,11 @@
 import { defineConfig } from "cypress";
-import path from "node:path";
-import AdmZip from "adm-zip";
 
 export default defineConfig({
   e2e: {
-    setupNodeEvents(on) {
-      on("before:browser:launch", (browser, launchOptions) => {
-        // absolute path to the unpacked extension's folder
-        // NOTE: extensions cannot be loaded in headless Chrome
-        const extensionPath = path.resolve(__dirname, "./cypress/fixtures");
-        const unzippedPath = `${extensionPath}/metamask`;
-        const zip = new AdmZip(`${extensionPath}/metamask-chrome.zip`);
-        zip.extractAllTo(unzippedPath);
-        launchOptions.extensions.push(unzippedPath);
-
-        return launchOptions;
-      });
+    setupNodeEvents() {
+      // implement node event listeners here
     },
     experimentalStudio: true,
     baseUrl: "http://localhost:8080",
-    watchForFileChanges: false,
   },
 });

cypress/e2e/main.cy.ts

@@ -1,70 +1,4 @@
-import { OAuthToken } from "../../static/scripts/onboarding/github-login-button";
-
 describe("Homepage tests", () => {
-  const ORG_NAME = "Ubiquity";
-  let loginToken: OAuthToken;
-
-  beforeEach(() => {
-    cy.fixture("get-user.json").then((file) => {
-      cy.intercept("GET", `https://api.github.com/users/${ORG_NAME}`, (req) => {
-        req.reply(file);
-      }).as("githubGetUser");
-    });
-    cy.fixture("get-ubiquibot-config.json").then((file) => {
-      cy.intercept("GET", `https://api.github.com/repos/${ORG_NAME}/ubiquibot-config`, (req) => {
-        req.reply(file);
-      }).as("githubGetUbiquibotConfig");
-    });
-    cy.fixture("get-repos.json").then((file) => {
-      cy.intercept("GET", `https://api.github.com/orgs/${ORG_NAME}/repos`, (req) => {
-        req.reply(file);
-      }).as("githubGetRepos");
-    });
-    cy.fixture("get-installations.json").then((file) => {
-      cy.intercept("GET", `https://api.github.com/orgs/${ORG_NAME}/installations**`, (req) => {
-        req.reply(file);
-      }).as("githubGetInstallations");
-    });
-    cy.fixture("get-installation-repositories.json").then((file) => {
-      cy.intercept("GET", `https://api.github.com/user/installations/47252474/repositories`, (req) => {
-        req.reply(file);
-      }).as("githubGetInstallationRepositories");
-    });
-    cy.fixture("put-file.json").then((file) => {
-      cy.intercept("PUT", `https://api.github.com/user/installations/47252474/repositories/641336624`, (req) => {
-        req.reply(file);
-      }).as("githubPutInstallation");
-    });
-    cy.fixture("put-file.json").then((file) => {
-      cy.intercept("PUT", `https://api.github.com/repos/${ORG_NAME}/ubiquibot-config/contents/.github%2Fubiquibot-config.yml`, (req) => {
-        req.reply(file);
-      }).as("githubPutConfigFile");
-    });
-    cy.fixture("get-orgs.json").then((file) => {
-      cy.intercept("GET", `https://api.github.com/user/orgs**`, (req) => {
-        req.reply(file);
-      }).as("githubGetUserOrgs");
-    });
-    cy.fixture("get-org-installations.json").then((file) => {
-      cy.intercept("GET", `https://api.github.com/orgs/${ORG_NAME.toLowerCase()}/installations**`, (req) => {
-        req.reply(file);
-      }).as("githubGetOrgInstallations");
-    });
-    cy.fixture("get-search.json").then((file) => {
-      cy.intercept("GET", `https://api.github.com/search/repositories**`, (req) => {
-        req.reply(file);
-      }).as("githubSearch");
-    });
-    cy.fixture("put-config.json").then((file) => {
-      cy.intercept("PUT", `https://api.github.com/repos/${ORG_NAME.toLowerCase()}/ubiquibot-config/contents/.github**`, (req) => {
-        req.reply(file);
-      }).as("githubPutContents");
-    });
-    cy.fixture("user-token.json").then((content) => {
-      loginToken = content;
-    });
-  });
-
   it("Console is cleared of errors and warnings", () => {
     cy.visit("/", {
       onBeforeLoad(win) {
@@ -73,31 +7,6 @@ describe("Homepage tests", () => {
     });
     cy.get("@consoleError").should("not.be.called");
     cy.get("body").should("exist");
-  });
-
-  it.only("Create onboarding repository", () => {
-    cy.visit("/");
-    cy.intercept("https://github.com/login/oauth/authorize**", (req) => {
-      req.reply({
-        statusCode: 200,
-      });
-      // Simulate login token
-      // cSpell: ignore wfzpewmlyiozupulbuur
-      window.localStorage.setItem("sb-wfzpewmlyiozupulbuur-auth-token", JSON.stringify(loginToken));
-    }).as("githubLogin");
-    cy.get("#github-login-button").click();
-    cy.visit("/");
-    cy.wait("@githubGetUserOrgs");
-    cy.get("#setBtn").click();
-    cy.log("Display warning on empty WALLET_PRIVATE_KEY");
-    cy.get(":nth-child(3) > .status-log.warn").contains(/.+/);
-    cy.get("#walletPrivateKey").type("deadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef");
-    cy.get("#orgName").select("ubiquity");
-    cy.get("#setBtn").click();
-    cy.get("#outKey").then((e) => {
-      expect(e.val()).not.to.be.empty;
-    });
-    cy.log("Expected to be a step 2 of the form");
-    cy.get("#stepper > :nth-child(2)").should("have.class", "active");
+    cy.get("h1").should("exist");
   });
 });

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

jest.config.json

@@ -0,0 +1,10 @@
+{
+  "preset": "ts-jest",
+  "testEnvironment": "node",
+  "roots": ["./tests"],
+  "coveragePathIgnorePatterns": ["node_modules", "mocks"],
+  "collectCoverage": true,
+  "coverageReporters": ["json", "lcov", "text", "clover", "json-summary"],
+  "reporters": ["default", "jest-junit", "jest-md-dashboard"],
+  "coverageDirectory": "coverage"
+}

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "onboard-ubq",
+  "name": "ts-template",
   "version": "1.0.0",
-  "description": "Ubiquity onboarding page for organizations.",
+  "description": "Template repository with TypeScript support.",
   "main": "build/index.ts",
   "author": "Ubiquity DAO",
   "license": "MIT",
@@ -15,12 +15,12 @@
     "format:lint": "eslint --fix .",
     "format:prettier": "prettier --write .",
     "format:cspell": "cspell **/*",
-    "knip": "knip",
-    "knip-ci": "knip --no-exit-code --reporter json",
+    "knip": "knip --config .github/knip.ts",
+    "knip-ci": "knip --no-exit-code --reporter json --config .github/knip.ts",
     "prepare": "husky install",
-    "postinstall": "git submodule update --init --recursive",
+    "test": "jest --setupFiles dotenv/config --coverage",
     "cy:open": "cypress open",
-    "cy:run": "cypress run --browser chrome"
+    "cy:run": "cypress run"
   },
   "keywords": [
     "typescript",
@@ -30,42 +30,37 @@
     "open-source"
   ],
   "dependencies": {
-    "@ethersproject/providers": "^5.7.2",
-    "@octokit/core": "^5.1.0",
-    "@octokit/plugin-create-or-update-text-file": "^4.0.1",
-    "@octokit/rest": "^20.0.2",
-    "@supabase/supabase-js": "2.39.7",
-    "@types/libsodium-wrappers": "^0.7.13",
-    "@ubiquibot/configuration": "1.1.0",
-    "@uniswap/permit2-sdk": "^1.2.0",
-    "dotenv": "^16.4.4",
-    "ethers": "^5.7.2",
-    "libsodium-wrappers": "^0.7.13",
-    "yaml": "^2.3.4"
+    "dotenv": "^16.4.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.2",
     "@cspell/dict-node": "^4.0.3",
     "@cspell/dict-software-terms": "^3.3.18",
     "@cspell/dict-typescript": "^3.1.2",
-    "@types/adm-zip": "0.5.5",
+    "@jest/globals": "29.7.0",
+    "@mswjs/data": "0.16.1",
+    "@types/jest": "29.5.12",
     "@types/node": "^20.11.19",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "@typescript-eslint/parser": "^7.0.1",
-    "adm-zip": "0.5.10",
     "cspell": "^8.4.0",
     "cypress": "13.6.6",
     "esbuild": "^0.20.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-filename-rules": "^1.3.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-sonarjs": "^0.24.0",
     "husky": "^9.0.11",
+    "jest": "29.7.0",
+    "jest-junit": "16.0.0",
+    "jest-md-dashboard": "0.8.0",
     "knip": "^5.0.1",
     "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
+    "ts-jest": "29.1.2",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3"
   },

static/index.html

@@ -1,74 +1,13 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
-    <title>Onboarding</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="out/styles/onboarding/onboarding.css" rel="stylesheet" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ubiquity TypeScript Template</title>
+    <link rel="stylesheet" href="style.css" />
   </head>
-  <body style="justify-content: start">
-    <div class="container" id="user-access">
-      <h1 class="title">Onboarding</h1>
-      <div id="stepper" class="stepper">
-        <div class="step active">
-          <span class="step-number">1</span>
-          <span class="step-label">CONFIG</span>
-        </div>
-        <div class="step">
-          <span class="step-number">2</span>
-          <span class="step-label">APPROVE</span>
-        </div>
-      </div>
-      <div id="step1" class="step-container">
-        <div class="overlay" id="overlay">
-          <div id="overlay-item-container"> </div>
-        </div>
-        <div class="mb-3">
-          <label for="chainId" class="form-label">CHAIN_ID</label>
-          <select class="form-control" id="chainId">
-            <option value="1">Ethereum Mainnet</option>
-            <option value="100">Gnosis Mainnet</option>
-          </select>
-          <span class="status-log"></span>
-        </div>
-        <div class="mb-3">
-          <label for="walletPrivateKey" class="form-label">WALLET_PRIVATE_KEY</label>
-          <input type="text" class="form-control" id="walletPrivateKey" />
-          <span class="status-log"></span>
-        </div>
-        <div class="mb-3">
-          <label for="orgName" class="form-label">ORG_NAME</label>
-          <select class="form-control" id="orgName" disabled> </select>
-          <span class="status-log"></span>
-        </div>
-        <div class="mb-3 pos-rel">
-          <label for="outKey" class="form-label">OUTPUT</label>
-          <div class="out-file">ubiquibot-config.yml</div>
-          <textarea type="text" class="form-control" id="outKey" disabled="true"></textarea>
-        </div>
-      </div>
-      <div id="step2" class="step-container hidden">
-        <div class="mb-3">
-          <label for="allowance" class="form-label">ALLOWANCE AMOUNT</label>
-          <div>
-            <input type="text" class="form-control" style="max-width: 200px" id="allowance" />
-            <span style="font-size: 1.2rem; color: #808080">DAI</span>
-            <span class="status-log"></span>
-          </div>
-        </div>
-      </div>
-
-      <div class="mb-3">
-        <label for="statusKey" class="form-label">STATUS</label>
-        <input type="text" class="form-control" id="statusKey" disabled="true" />
-      </div>
-      <div class="mb-3 loader-wrap" style="display: none">
-        <span class="loader-x"></span>
-      </div>
-      <div class="btn-container">
-        <button type="button" class="btn btn-primary mb-3" id="setBtn">🌐 Set</button>
-      </div>
-    </div>
-    <script src="out/scripts/onboarding/onboarding.js" type="application/javascript"></script>
+  <body>
+    <h1>Ubiquity TypeScript Template</h1>
+    <script type="module" src="dist/main.js"></script>
   </body>
 </html>

static/main.ts

@@ -0,0 +1,11 @@
+export async function mainModule() {
+  console.log(`Hello from mainModule`);
+}
+
+mainModule()
+  .then(() => {
+    console.log("mainModule loaded");
+  })
+  .catch((error) => {
+    console.error(error);
+  });

tests/__mocks__/db.ts

@@ -0,0 +1,12 @@
+// cSpell:disable
+import { factory, primaryKey } from "@mswjs/data";
+
+/**
+ * Creates an object that can be used as a db to persist data within tests
+ */
+export const db = factory({
+  users: {
+    id: primaryKey(Number),
+    name: String,
+  },
+});

tests/__mocks__/handlers.ts

@@ -0,0 +1,11 @@
+import { http, HttpResponse } from "msw";
+import { db } from "./db";
+
+/**
+ * Intercepts the routes and returns a custom payload
+ */
+export const handlers = [
+  http.get("https://api.ubiquity.com/users", () => {
+    return HttpResponse.json(db.users.getAll());
+  }),
+];