helix-bridge · JayJay1024 · Aug 29, 2024 · Aug 28, 2024 · Aug 29, 2024 · Aug 29, 2024
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -12,16 +12,14 @@
  </script>
 
  <meta charset="UTF-8" />
- <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Bridge stablecoin and native tokens on HelixBridge</title>
+ <title>Bridge Stablecoins and Native Tokens on HelixBridge</title>
  <meta name="description" content="Secure, fast, and low-cost cross-chain crypto transfers" />
- <link rel="manifest" href="manifest.json" />
  <script defer data-domain="helixbridge.app" src="https://plausible.io/js/script.hash.outbound-links.tagged-events.js"></script>
  <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
  </head>
  <body style="background-color: #00141d; color: white; line-height: 1.5rem; font-size: 1rem; font-weight: 400">
  <div id="root"></div>
- <script type="module" src="/src/main.tsx"></script>
+ <script type="module" src="src/main.tsx"></script>
  </body>
 </html>
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -42,6 +42,7 @@
  "@types/react-transition-group": "^4.4.10",
  "@typescript-eslint/eslint-plugin": "^7.2.0",
  "@typescript-eslint/parser": "^7.2.0",
+ "@vite-pwa/assets-generator": "^0.2.4",
  "@vitejs/plugin-react-swc": "^3.5.0",
  "autoprefixer": "^10.4.19",
  "eslint": "^8.57.0",
@@ -55,7 +56,10 @@
  "tailwindcss": "^3.4.3",
  "typescript": "^5.2.2",
  "vite": "^5.2.0",
- "vitest": "^1.6.0"
+ "vite-plugin-pwa": "^0.20.1",
+ "vitest": "^1.6.0",
+ "workbox-core": "^7.1.0",
+ "workbox-window": "^7.1.0"
  },
  "packageManager": "pnpm@9.4.0"
 }
diff --git a/apps/web/public/favicon.ico b/apps/web/public/favicon.ico
diff --git a/apps/web/public/favicon.svg b/apps/web/public/favicon.svg
diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json
diff --git a/apps/web/public/robots.txt b/apps/web/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Allow: /
diff --git a/apps/web/pwa-assets.config.ts b/apps/web/pwa-assets.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from "@vite-pwa/assets-generator/config";
+
+export default defineConfig({
+ headLinkOptions: {
+ preset: "2023",
+ },
+ preset: {
+ transparent: { sizes: [64, 192, 512], favicons: [[48, "favicon.ico"]] },
+ maskable: {
+ sizes: [512],
+ resizeOptions: { fit: "contain", background: "#00141D" },
+ },
+ apple: {
+ sizes: [180],
+ resizeOptions: { fit: "contain", background: "#00141D" },
+ },
+ },
+ images: ["public/favicon.svg"],
+});
diff --git a/apps/web/src/components/pwa-badge.tsx b/apps/web/src/components/pwa-badge.tsx
@@ -0,0 +1,74 @@
+import { useRegisterSW } from "virtual:pwa-register/react";
+import Button from "../ui/button";
+
+export default function PWABadge() {
+ // Periodic sync is disabled, change the value to enable it, the period is in milliseconds
+ // You can remove onRegisteredSW callback and registerPeriodicSync function
+ const period = 0;
+
+ const {
+ needRefresh: [needRefresh, setNeedRefresh],
+ updateServiceWorker,
+ } = useRegisterSW({
+ onRegisteredSW(swUrl, r) {
+ if (period <= 0) return;
+ if (r?.active?.state === "activated") {
+ registerPeriodicSync(period, swUrl, r);
+ } else if (r?.installing) {
+ r.installing.addEventListener("statechange", (e) => {
+ const sw = e.target as ServiceWorker;
+ if (sw.state === "activated") registerPeriodicSync(period, swUrl, r);
+ });
+ }
+ },
+ });
+
+ function close() {
+ setNeedRefresh(false);
+ }
+
+ return (
+ <div role="alert" aria-labelledby="toast-message">
+ {needRefresh && (
+ <div className="bg-background fixed bottom-0 right-0 z-10 m-4 flex flex-col gap-y-3 rounded-xl border border-white/20 p-3 text-left">
+ <span id="toast-message" className="text-sm font-bold text-white">
+ New content available, click on reload button to update.
+ </span>
+ <div className="flex items-center justify-end gap-x-3">
+ <Button className="rounded-lg px-3 py-[0.125rem] text-sm font-bold" onClick={() => close()}>
+ Close
+ </Button>
+ <Button
+ className="rounded-lg px-3 py-[0.125rem] text-sm font-bold"
+ onClick={() => updateServiceWorker(true)}
+ kind="primary"
+ >
+ Reload
+ </Button>
+ </div>
+ </div>
+ )}
+ </div>
+ );
+}
+
+/**
+ * This function will register a periodic sync check every hour, you can modify the interval as needed.
+ */
+function registerPeriodicSync(period: number, swUrl: string, r: ServiceWorkerRegistration) {
+ if (period <= 0) return;
+
+ setInterval(async () => {
+ if ("onLine" in navigator && !navigator.onLine) return;
+
+ const resp = await fetch(swUrl, {
+ cache: "no-store",
+ headers: {
+ cache: "no-store",
+ "cache-control": "no-cache",
+ },
+ });
+
+ if (resp?.status === 200) await r.update();
+ }, period);
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
@@ -3,9 +3,11 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router.tsx";
+import PWABadge from "./components/pwa-badge.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
  <RouterProvider router={router} />
+ <PWABadge />
  </React.StrictMode>,
 );
diff --git a/apps/web/src/vite-env.d.ts b/apps/web/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/react" />
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
@@ -2,9 +2,38 @@
 
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vitejs.dev/config/
 export default defineConfig({
  base: "",
- plugins: [react()],
+ plugins: [
+ react(),
+ VitePWA({
+ registerType: "prompt",
+ injectRegister: false,
+ manifestFilename: "manifest.json",
+ pwaAssets: {
+ disabled: false,
+ config: true,
+ },
+ manifest: {
+ name: "Helix Bridge",
+ short_name: "HelixBridge",
+ description: "Secure, fast, and low-cost cross-chain crypto transfers",
+ theme_color: "#00141D",
+ },
+ workbox: {
+ globPatterns: ["**/*.{js,css,html,svg,png,ico}"],
+ cleanupOutdatedCaches: true,
+ clientsClaim: true,
+ },
+ devOptions: {
+ enabled: false,
+ navigateFallback: "index.html",
+ suppressWarnings: true,
+ type: "module",
+ },
+ }),
+ ],
 });