chore: initialize

.cspell.json

@@ -4,7 +4,7 @@
   "ignorePaths": ["**/*.json", "**/*.css", "node_modules", "**/*.log"],
   "useGitignore": true,
   "language": "en",
-  "words": ["dataurl", "devpool", "outdir", "servedir"],
+  "words": ["dataurl", "devpool", "outdir", "servedir", "viem", "uusd", "ufaucet", "Inpage"],
   "dictionaries": ["typescript", "node", "software-terms"],
   "import": ["@cspell/dict-typescript/cspell-ext.json", "@cspell/dict-node/cspell-ext.json", "@cspell/dict-software-terms"],
   "ignoreRegExpList": ["[0-9a-fA-F]{6}"]

.eslintrc

@@ -53,4 +53,4 @@
       { "selector": ["function", "variable"], "format": ["strictCamelCase"] }
     ]
   }
-}
+}

.github/workflows/sync-template.yml

@@ -3,7 +3,7 @@ name: Sync branch to template
 on:
   workflow_dispatch:
   schedule:
-    - cron: '14 0 1 * *'
+    - cron: "14 0 1 * *"
 
 jobs:
   sync:
@@ -23,7 +23,7 @@ jobs:
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
-  
+
       - name: Sync branch to template
         env:
           GH_TOKEN: ${{ steps.get_installation_token.outputs.token }}
@@ -45,5 +45,3 @@ jobs:
           git commit -m "chore: sync template"
           git push "$original_remote" "$pr_branch"
           gh pr create --title "Sync branch to template" --body "This pull request merges changes from the template repository." --head "$pr_branch" --base "$branch_name"
-
-

build/esbuild-build.ts

@@ -1,10 +1,7 @@
 import esbuild from "esbuild";
-const typescriptEntries = ["static/main.ts"];
-// const cssEntries = ["static/style.css"];
-const entries = [
-  ...typescriptEntries,
-  //  ...cssEntries
-];
+const typescriptEntries = ["src/main.ts"];
+// const cssEntries = ["static/style/*.css"];
+const entries = [...typescriptEntries];
 
 export const esBuildContext: esbuild.BuildOptions = {
   sourcemap: true,

cypress.config.ts

@@ -6,6 +6,6 @@ export default defineConfig({
       // implement node event listeners here
     },
     experimentalStudio: true,
-    baseUrl: "http://localhost:8080",
+    baseUrl: "http://localhost:10090",
   },
 });

package.json

@@ -20,7 +20,8 @@
     "prepare": "husky install",
     "test": "jest --setupFiles dotenv/config --coverage",
     "cy:open": "cypress open",
-    "cy:run": "cypress run"
+    "cy:run": "cypress run",
+    "tailwind:watch": "npx tailwindcss -i ./static/style/tailwind.css -o ./static/style/style.css --watch"
   },
   "keywords": [
     "typescript",
@@ -30,7 +31,10 @@
     "open-source"
   ],
   "dependencies": {
-    "dotenv": "^16.4.4"
+    "@metamask/providers": "^17.2.0",
+    "daisyui": "^4.12.13",
+    "dotenv": "^16.4.4",
+    "viem": "^2.21.14"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.6.1",
@@ -60,6 +64,7 @@
     "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
+    "tailwindcss": "^3.4.14",
     "ts-jest": "29.1.2",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3"

src/main.ts

@@ -0,0 +1,21 @@
+import * as wallet from "./scripts/connect-wallet";
+import * as ui from "./scripts/ui";
+import * as mint from "./scripts/mint";
+
+export async function mainModule() {
+  ui.initUiEvents();
+
+  wallet.updateConnectButtonText("");
+
+  await wallet.connectIfAuthorized();
+  await mint.initCollateralList();
+  await mint.initUiEvents();
+}
+
+mainModule()
+  .then(() => {
+    console.log("mainModule loaded");
+  })
+  .catch((error) => {
+    console.error(error);
+  });

src/scripts/connect-wallet.ts

@@ -0,0 +1,144 @@
+import { createWalletClient, custom } from "viem";
+import { mainnet } from "viem/chains";
+import { truncateString } from "./utils";
+import { connectButtons, connectPrompt, whiteContainer, providersModal } from "./ui";
+import { unwatchForPrices, watchForPrices } from "./price-polling";
+import { type MetaMaskInpageProvider } from "@metamask/providers";
+
+let client: ReturnType<typeof createWalletClient> | null = null;
+
+type ModifiedWindow = Window &
+  typeof globalThis & {
+    ethereum: MetaMaskInpageProvider & {
+      isCoinbaseWallet: boolean;
+      isTrust: boolean;
+      providers?: (MetaMaskInpageProvider & { isCoinbaseWallet: boolean; isTrust: boolean })[];
+    };
+  };
+
+export function updateConnectButtonText(text: string, isConnecting: boolean = false) {
+  let innerHtml = `<span>Connect Wallet</span>`;
+
+  if (isConnecting) innerHtml = `<span>Connecting...</span>`;
+  else if (client !== null) innerHtml = `<span>${text}</span>`;
+
+  connectButtons.forEach((connectButton) => {
+    connectButton.innerHTML = innerHtml;
+  });
+}
+
+export async function connectWallet(providerType: "metamask" | "trust" | "coinbase") {
+  const ethereum = (window as ModifiedWindow).ethereum;
+  if (typeof ethereum !== "undefined" && ethereum !== null) {
+    let provider = ethereum;
+
+    if (ethereum.providers?.length) {
+      switch (providerType) {
+        case "metamask":
+          provider = ethereum.providers.find((p) => p.isMetaMask) as typeof ethereum;
+          break;
+        case "trust":
+          provider = ethereum.providers.find((p) => p.isTrust) as typeof ethereum;
+          break;
+        case "coinbase":
+          provider = ethereum.providers.find((p) => p.isCoinbaseWallet) as typeof ethereum;
+          break;
+      }
+    }
+    try {
+      updateConnectButtonText("", true);
+      const accounts = await provider.request<string[]>({ method: "eth_requestAccounts" });
+      client = createWalletClient({
+        account: accounts?.[0] as `0x${string}`,
+        chain: mainnet,
+        transport: custom(provider),
+      });
+
+      updateConnectButtonText(truncateString(accounts?.[0] as string));
+      wireEvents(provider);
+
+      watchForPrices();
+
+      connectPrompt.classList.add("hidden");
+      whiteContainer.classList.replace("hidden", "flex");
+
+      if (providersModal.open) {
+        providersModal.close();
+      }
+    } catch (error) {
+      updateConnectButtonText("");
+    }
+  }
+}
+
+export async function disconnectWallet() {
+  const ethereum = (window as ModifiedWindow).ethereum;
+  if (typeof ethereum !== "undefined" && ethereum !== null) {
+    try {
+      let provider = ethereum;
+
+      if (ethereum.providers?.length) {
+        provider = ethereum.providers.find((p) => p.isCoinbaseWallet || p.isMetaMask || p.isTrust) as typeof ethereum;
+      }
+      await provider.request({ method: "wallet_revokePermissions", params: [{ eth_accounts: {} }] });
+      client = null;
+
+      unwatchForPrices();
+
+      updateConnectButtonText("Connect Wallet");
+      connectPrompt.classList.remove("hidden");
+      whiteContainer.classList.replace("flex", "hidden");
+    } catch (error) {
+      updateConnectButtonText("");
+    }
+  }
+}
+
+export async function connectIfAuthorized() {
+  const ethereum = (window as ModifiedWindow).ethereum;
+
+  let provider = ethereum;
+
+  if (ethereum.providers?.length) {
+    provider = ethereum.providers.find((p) => p.isCoinbaseWallet || p.isMetaMask || p.isTrust) as typeof ethereum;
+  }
+
+  if (provider) {
+    const accounts = await provider.request<string[]>({ method: "eth_accounts" });
+
+    if (accounts && accounts.length) {
+      const [account] = accounts;
+      client = createWalletClient({
+        account: account as `0x${string}`,
+        chain: mainnet,
+        transport: custom(provider),
+      });
+
+      watchForPrices();
+      updateConnectButtonText(truncateString(account as string));
+      connectPrompt.classList.add("hidden");
+      whiteContainer.classList.replace("hidden", "flex");
+    }
+  }
+}
+
+function wireEvents(provider: MetaMaskInpageProvider & { isCoinbaseWallet: boolean; isTrust: boolean }) {
+  provider.on("accountsChanged", (accounts: unknown) => {
+    const [account] = accounts as `0x${string}`[];
+    client = createWalletClient({
+      account,
+      chain: mainnet,
+      transport: custom(provider),
+    });
+
+    updateConnectButtonText(truncateString(account));
+  });
+
+  provider.on("disconnect", () => {
+    client = null;
+  });
+}
+
+export function getConnectedClient() {
+  return client;
+}