feat: add commit button as a widget with zoid

bosonprotocol · Mar 28, 2024 · e243ac2 · e243ac2
1 parent 5f87bf5
commit e243ac2
Show file tree

Hide file tree

Showing 11 changed files with 380 additions and 20 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -40,5 +40,5 @@
       "typescript": {}
     }
   },
-  "ignorePatterns": []
+  "ignorePatterns": ["public/scripts/zoid/*"]
 }
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.env
+.env
+public/scripts/zoid
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@bosonprotocol/react-kit": "^0.29.0-alpha.12",
+    "@krakenjs/zoid": "^10.3.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -32,7 +33,9 @@
     "lint": "eslint --ignore-path ./.gitignore --ext .js,.ts,.tsx . --fix",
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
     "link-cc": "node ./scripts/link-to-local-core-components.js",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "postinstall": "npm run copy-zoid",
+    "copy-zoid": "shx mkdir -p public/scripts/zoid || true && shx cp -R node_modules/@krakenjs/zoid/dist/* public/scripts/zoid"
   },
   "eslintConfig": {
     "extends": [
@@ -85,6 +88,7 @@
     "lint-staged": "^13.2.0",
     "path-browserify": "^1.0.1",
     "prettier": "^2.8.8",
-    "react-app-rewired": "^2.2.1"
+    "react-app-rewired": "^2.2.1",
+    "shx": "^0.3.4"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -29,6 +29,8 @@
       rel="stylesheet"
     />
     <title>Boson widgets</title>
+    <script src="./scripts/zoid/zoid.js"></script>
+    <script src="./scripts/commit-button.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/scripts/commit-button.html b/public/scripts/commit-button.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<head>
+  <script src="./zoid/zoid.js"></script>
+  <script src="../../scripts/commit-button.js"></script>
+  <style>
+    html,
+    body {
+      height: 100vh;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <h3>Commit button example</h3>
+
+  <div id="container"></div>
+
+  <script>
+    const instance = CommitButton({
+      configId: "testing-80001-0",
+      productUuid: "086b32-3fcd-00d1-0624-67513e85415c",
+      sellerId: "138",
+      modalMargin: "2%",
+      lookAndFeel: "modal",
+      onGetDimensions: function (dimensions) {
+        const { boundingClientRect } = dimensions;
+        document.querySelector(
+          "#container"
+        ).style.height = `${boundingClientRect.height}px`;
+        document.querySelector(
+          "#container"
+        ).style.width = `${boundingClientRect.width}px`;
+      }
+    });
+
+    instance.render("#container");
+  </script>
+</body>
diff --git a/public/scripts/commit-button.js b/public/scripts/commit-button.js
@@ -0,0 +1,116 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-undef */
+
+var CommitButton = zoid.create({
+  tag: "boson-commit-button",
+  url: ({ props }) => {
+    return !props.configId || props.configId.startsWith("production")
+      ? "https://widgets-test.on.fleek.co/#/commit-button"
+      : "http://localhost:3006/#/commit-button";
+  },
+  dimensions: { width: "100%", height: "100%" }
+});
+const EVENT = {
+  RENDER: "zoid-render",
+  RENDERED: "zoid-rendered",
+  PRERENDER: "zoid-prerender",
+  PRERENDERED: "zoid-prerendered",
+  DISPLAY: "zoid-display",
+  ERROR: "zoid-error",
+  CLOSE: "zoid-close",
+  DESTROY: "zoid-destroy",
+  PROPS: "zoid-props",
+  RESIZE: "zoid-resize",
+  FOCUS: "zoid-focus"
+};
+const CLASS = {
+  VISIBLE: "zoid-visible",
+  INVISIBLE: "zoid-invisible"
+};
+var Modal = zoid.create({
+  tag: "boson-commit-modal",
+  url: "http://localhost:3006/#/commit?props=1",
+  dimensions: { width: "100%", height: "100%" },
+  containerTemplate: function containerTemplate({
+    uid,
+    frame,
+    prerenderFrame,
+    doc,
+    props,
+    event,
+    dimensions
+  }) {
+    const { width, height } = dimensions;
+
+    if (!frame || !prerenderFrame) {
+      return;
+    }
+
+    const div = doc.createElement("div");
+    div.setAttribute("id", uid);
+    const style = doc.createElement("style");
+    if (props.cspNonce) {
+      style.setAttribute("nonce", props.cspNonce);
+    }
+
+    style.appendChild(
+      doc.createTextNode(`
+            #${uid} {
+                display: inline-block;
+                // position: relative;
+                width: ${width};
+                height: ${height};
+            }
+
+            #${uid} > iframe {
+                display: inline-block;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                left: 0;
+                transition: opacity .2s ease-in-out;
+            }
+
+            #${uid} > iframe.${CLASS.INVISIBLE} {
+                opacity: 0;
+            }
+
+            #${uid} > iframe.${CLASS.VISIBLE} {
+                opacity: 1;
+        }
+        `)
+    );
+
+    div.appendChild(prerenderFrame);
+    div.appendChild(frame);
+    div.appendChild(style);
+
+    prerenderFrame.classList.add(CLASS.VISIBLE);
+    frame.classList.add(CLASS.INVISIBLE);
+
+    event.on(EVENT.RENDERED, () => {
+      prerenderFrame.classList.remove(CLASS.VISIBLE);
+      prerenderFrame.classList.add(CLASS.INVISIBLE);
+
+      frame.classList.remove(CLASS.INVISIBLE);
+      frame.classList.add(CLASS.VISIBLE);
+
+      setTimeout(() => {
+        destroyElement(prerenderFrame);
+      }, 1);
+    });
+
+    event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
+      if (typeof newWidth === "number") {
+        div.style.width = toCSS(newWidth);
+      }
+
+      if (typeof newHeight === "number") {
+        div.style.height = toCSS(newHeight);
+      }
+    });
+
+    return div;
+  }
+});
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,10 @@ import {
   RedirectToDocs
 } from "./components/redirect/RedirectToDocs";
 import { Commit, commitPath } from "./components/widgets/commit/Commit";
+import {
+  CommitButton,
+  commitButtonPath
+} from "./components/widgets/commitButton/CommitButton";
 import { Finance, financePath } from "./components/widgets/finance/Finance";
 import { indexPath } from "./components/widgets/path";
 import { Redeem, redeemPath } from "./components/widgets/redeem/Redeem";
@@ -21,6 +25,7 @@ function App() {
           <Route path={indexPath} element={<Index />} />
           <Route path={financePath} element={<Finance />}></Route>
           <Route path={commitPath} element={<Commit />}></Route>
+          <Route path={commitButtonPath} element={<CommitButton />}></Route>
           <Route path={redeemPath} element={<Redeem />}></Route>
         </Routes>
       </HashRouter>