Bridge zkApp implementation

src/app/zeko/bridge-zkapp/.env.example

@@ -0,0 +1 @@
+REACT_APP_SEQUENCER_URL=

src/app/zeko/bridge-zkapp/.eslintignore

@@ -0,0 +1 @@
+public/coi-serviceworker.min.js

src/app/zeko/bridge-zkapp/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

src/app/zeko/bridge-zkapp/README.md

@@ -0,0 +1,10 @@
+# Zeko Bridge
+
+This is a zkApp for bridging between Mina and Zeko blockchains.
+
+## Getting Started
+
+1. Install the dependencies by running: `yarn`
+2. Create `.env` file (copy from `.env.example`)
+3. Start the development build by running: `yarn start`
+4. Open [localhost:3000](http://localhost:3000) in your browser.

src/app/zeko/bridge-zkapp/config-overrides.js

@@ -0,0 +1,12 @@
+module.exports = {
+  devServer: function (configFunction) {
+    return function (proxy, allowedHost) {
+      const config = configFunction(proxy, allowedHost);
+      config.headers = {
+        "Cross-Origin-Opener-Policy": "same-origin",
+        "Cross-Origin-Embedder-Policy": "require-corp",
+      };
+      return config;
+    };
+  },
+};

src/app/zeko/bridge-zkapp/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "zeko-bridge-zkapp",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.3",
+    "@mui/material": "^5.15.3",
+    "@tanstack/react-query": "^5.17.9",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "envalid": "^8.0.0",
+    "o1js": "0.*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.4.2",
+    "usehooks-ts": "^2.9.1",
+    "web-vitals": "^2.1.0",
+    "zustand": "^4.4.7"
+  },
+  "scripts": {
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not ie <= 99",
+      "not android <= 4.4.4",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "react-app-rewired": "^2.2.1"
+  }
+}

src/app/zeko/bridge-zkapp/public/coi-serviceworker.min.js

@@ -0,0 +1,102 @@
+//eslint-ignore-file
+/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */
+let coepCredentialless = !1;
+"undefined" == typeof window
+  ? (self.addEventListener("install", () => self.skipWaiting()),
+    self.addEventListener("activate", (e) => e.waitUntil(self.clients.claim())),
+    self.addEventListener("message", (e) => {
+      e.data &&
+        ("deregister" === e.data.type
+          ? self.registration
+              .unregister()
+              .then(() => self.clients.matchAll())
+              .then((e) => {
+                e.forEach((e) => e.navigate(e.url));
+              })
+          : "coepCredentialless" === e.data.type &&
+            (coepCredentialless = e.data.value));
+    }),
+    self.addEventListener("fetch", function (e) {
+      const r = e.request;
+      if ("only-if-cached" === r.cache && "same-origin" !== r.mode) return;
+      const s =
+        coepCredentialless && "no-cors" === r.mode
+          ? new Request(r, { credentials: "omit" })
+          : r;
+      e.respondWith(
+        fetch(s)
+          .then((e) => {
+            if (0 === e.status) return e;
+            const r = new Headers(e.headers);
+            return (
+              r.set(
+                "Cross-Origin-Embedder-Policy",
+                coepCredentialless ? "credentialless" : "require-corp"
+              ),
+              coepCredentialless ||
+                r.set("Cross-Origin-Resource-Policy", "cross-origin"),
+              r.set("Cross-Origin-Opener-Policy", "same-origin"),
+              new Response(e.body, {
+                status: e.status,
+                statusText: e.statusText,
+                headers: r,
+              })
+            );
+          })
+          .catch((e) => console.error(e))
+      );
+    }))
+  : (() => {
+      const e = {
+          shouldRegister: () => !0,
+          shouldDeregister: () => !1,
+          coepCredentialless: () => !(window.chrome || window.netscape),
+          doReload: () => window.location.reload(),
+          quiet: !1,
+          ...window.coi,
+        },
+        r = navigator;
+      r.serviceWorker &&
+        r.serviceWorker.controller &&
+        (r.serviceWorker.controller.postMessage({
+          type: "coepCredentialless",
+          value: e.coepCredentialless(),
+        }),
+        e.shouldDeregister() &&
+          r.serviceWorker.controller.postMessage({ type: "deregister" })),
+        !1 === window.crossOriginIsolated &&
+          e.shouldRegister() &&
+          (window.isSecureContext
+            ? r.serviceWorker &&
+              r.serviceWorker.register(window.document.currentScript.src).then(
+                (s) => {
+                  !e.quiet &&
+                    console.log("COOP/COEP Service Worker registered", s.scope),
+                    s.addEventListener("updatefound", () => {
+                      !e.quiet &&
+                        console.log(
+                          "Reloading page to make use of updated COOP/COEP Service Worker."
+                        ),
+                        e.doReload();
+                    }),
+                    s.active &&
+                      !r.serviceWorker.controller &&
+                      (!e.quiet &&
+                        console.log(
+                          "Reloading page to make use of COOP/COEP Service Worker."
+                        ),
+                      e.doReload());
+                },
+                (r) => {
+                  !e.quiet &&
+                    console.error(
+                      "COOP/COEP Service Worker failed to register:",
+                      r
+                    );
+                }
+              )
+            : !e.quiet &&
+              console.log(
+                "COOP/COEP Service Worker not registered, a secure context is required."
+              ));
+    })();

src/app/zeko/bridge-zkapp/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Bridge between Mina and Zeko blockchains"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Zeko Bridge</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

src/app/zeko/bridge-zkapp/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Zeko Bridge",
+  "name": "Zeko Bridge",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

src/app/zeko/bridge-zkapp/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/app/zeko/bridge-zkapp/src/App.tsx

@@ -0,0 +1,24 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MuiSetup } from "./MuiSetup";
+import Navbar from "./components/Navbar";
+import HomePage from "./pages/HomePage";
+import "./reactCOIServiceWorker";
+
+const queryClient = new QueryClient();
+
+function Layout() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <MuiSetup>
+        <Navbar />
+        <HomePage />
+      </MuiSetup>
+    </QueryClientProvider>
+  );
+}
+
+function App() {
+  return <Layout />;
+}
+
+export default App;

src/app/zeko/bridge-zkapp/src/MuiSetup.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { CssBaseline } from "@mui/material";
+import type { ReactNode } from "react";
+
+import { theme } from "./configs/theme";
+import { ThemeProvider } from "@mui/material/styles";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const MuiSetup = ({ children }: Props) => {
+  return (
+    <>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </>
+  );
+};

src/app/zeko/bridge-zkapp/src/components/ConnectWallet.tsx

@@ -0,0 +1,27 @@
+import { Button, Typography } from "@mui/material";
+import { useAppStore } from "../configs/store";
+import useConnectWallet from "../hooks/useConnectWallet";
+import { auroLink } from "../utils/constants";
+import { formatAddress } from "../utils/format";
+
+export default function ConnectWallet() {
+  const userPublicKey = useAppStore((state) => state.userPublicKey);
+  const { connectWallet } = useConnectWallet();
+  return !window.mina ? (
+    <Button href={auroLink} target="_blank">
+      Install wallet
+    </Button>
+  ) : userPublicKey ? (
+    <Typography
+      variant="button"
+      sx={(theme) => ({
+        color: theme.palette.primary.main,
+        textTransform: "none",
+      })}
+    >
+      Connected: {formatAddress(userPublicKey.toBase58())}
+    </Typography>
+  ) : (
+    <Button onClick={connectWallet}>Connect wallet</Button>
+  );
+}