bosonprotocol · albertfolch-redeemeum · Dec 18, 2024 · Dec 30, 2024 · Jan 3, 2025 · Jan 8, 2025
diff --git a/.fleek.json b/.fleek.json
@@ -6,4 +6,4 @@
       "buildCommand": "npm run build"
     }
   ]
-}
+}
diff --git a/docs/boson-environments.md b/docs/boson-environments.md
@@ -5,15 +5,16 @@
 ## Boson Protocol Environment
 
 Boson Protocol is deployed onto 3 public **environments**, to be used in different contexts, for different reasons and probably by different users:
- - ***testing*** is a development environment, very unstable by nature. Unless you're developing on Boson Protocol Components, you shouldn't use this environment.
- - ***staging*** is a validation environment, on testnet blockchain, specifically designed to test and discover the Boson Protocol Components without being on a real blockchain.
- - ***production*** is the production environment. Everything processed on this environment is **FOR REAL**.
 
-In addition, it's possible to deploy your own environment on your local machine. We call it the ***local*** environment.
+- **_testing_** is a development environment, very unstable by nature. Unless you're developing on Boson Protocol Components, you shouldn't use this environment.
+- **_staging_** is a validation environment, on testnet blockchain, specifically designed to test and discover the Boson Protocol Components without being on a real blockchain.
+- **_production_** is the production environment. Everything processed on this environment is **FOR REAL**.
+
+In addition, it's possible to deploy your own environment on your local machine. We call it the **_local_** environment.
 
 ## Boson Protocol Configurations
 
-Each environment (except ***local***) is currently deployed on several configurations, corresponding to different blockchains.
+Each environment (except **_local_**) is currently deployed on several configurations, corresponding to different blockchains.
 
 The dApps (Marketplace and Dispute Resolution Center) and widgets are able to switch between configurations of the same environment.
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,12 +59,14 @@
     "react": "^18.2.0",
     "react-codecopy": "^5.0.1",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^5.0.0",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "stream-browserify": "^3.0.0",
     "styled-components": "^5.3.9",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.6.0"
   },
   "devDependencies": {
     "@fleek-platform/cli": "^3.8.2",

diff --git a/public/index.html b/public/index.html
@@ -31,6 +31,7 @@
     <title>Boson widgets</title>
     <script src="./scripts/zoid/zoid.js"></script>
     <script src="./scripts/commit-button.js"></script>
+    <script src="./scripts/roblox.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/scripts/commit-button-example.html b/public/scripts/commit-button-example.html
@@ -4,6 +4,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
   <script src="./zoid/zoid.min.js"></script>
+  <script src="../../scripts/boson-zoid.js"></script>
   <script src="../../scripts/commit-button.js"></script>
   <style>
     html,
@@ -27,7 +28,9 @@ <h3>Commit button example</h3>
     let layout = "horizontal";
     const isProd =
       window.location.href.startsWith("https://widgets.bosonprotocol.io") ||
-      window.location.href.startsWith("https://widgets-production.on-fleek.app");
+      window.location.href.startsWith(
+        "https://widgets-production.on-fleek.app"
+      );
     const prodData = {
       configId: "production-137-0",
       productUuid: "2540b-1cf7-26e7-ddaf-4de1dcf7ebc",
@@ -73,14 +76,8 @@ <h3>Commit button example</h3>
         document.querySelector("body").style.overflow = "hidden";
         console.log("you clicked on the commit button!");
       },
-      onClickTagline: function () {
-        console.log("you clicked on the tagline!");
-      },
       onCloseCommitButton: function () {
         console.log("commit button widget was closed!");
-      },
-      onCloseTagline: function () {
-        console.log("purchase overview widget was closed!");
       }
     });
 

diff --git a/public/scripts/commit-button.js b/public/scripts/commit-button.js
@@ -99,7 +99,21 @@ function containerTemplate(
       destroyElement(prerenderFrame);
     }, 1);
   });
-
+  function isPerc(str) {
+    return "string" == typeof str && /^[0-9]+%$/.test(str);
+  }
+  function toNum(val) {
+    if ("number" == typeof val) return val;
+    var match = val.match(/^([0-9]+)(px|%)$/);
+    if (!match) throw new Error("Could not match css value from " + val);
+    return parseInt(match[1], 10);
+  }
+  function toPx(val) {
+    return toNum(val) + "px";
+  }
+  function toCSS(val) {
+    return "number" == typeof val ? toPx(val) : isPerc(val) ? val : toPx(val);
+  }
   event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
     if (typeof newWidth === "number") {
       div.style.width = toCSS(newWidth);
@@ -140,10 +154,3 @@ var CommitWidgetModal = zoid.create({
   dimensions: { width: "100%", height: "100%" },
   containerTemplate
 });
-
-var PurchaseOverviewModal = zoid.create({
-  tag: "purchase-overview-modal",
-  url: `${scriptOrigin}/purchase-overview`,
-  dimensions: { width: "100%", height: "100%" },
-  containerTemplate
-});
diff --git a/public/scripts/roblox-example.html b/public/scripts/roblox-example.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <!-- <script src="./zoid/zoid.min.js"></script> -->
+  <script src="./zoid/zoid.js"></script>
+  <script src="../../scripts/roblox.js"></script>
+  <style>
+    html,
+    body {
+      min-height: 100vh;
+      overflow-y: hidden;
+      margin: 0;
+      padding: 0;
+    }
+    #container {
+      min-height: 100vh;
+    }
+    #settings {
+      border-bottom: 1px solid grey;
+      padding: 1.25rem;
+      resize: vertical;
+      overflow: auto;
+    }
+    .button-container {
+      display: flex;
+      gap: 20px;
+    }
+    .button {
+      width: 198px;
+      height: 55px;
+      border: 2px solid #09182c;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      transition: transform 0.1s;
+    }
+    .button:hover {
+      transform: scale(1.05);
+    }
+    .button p {
+      color: #09182c;
+      margin: 0;
+      font-size: 14px;
+      font-weight: normal;
+    }
+    .rounded-rect-1 {
+      border-radius: 4px;
+    }
+    .rounded-rect-2 {
+      border-radius: 8px;
+    }
+    .rounded-rect-3 {
+      border-radius: 18px;
+    }
+    .button {
+      width: 198px;
+      height: 55px;
+      border: 2px solid #09182c;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      transition: transform 0.1s;
+    }
+    .button:hover {
+      transform: scale(1.05);
+    }
+    .button p {
+      color: #09182c;
+      margin: 0;
+      font-size: 14px;
+      font-weight: normal;
+    }
+    .rounded-rect-1 {
+      border-radius: 4px;
+    }
+    .rounded-rect-2 {
+      border-radius: 8px;
+    }
+    .rounded-rect-3 {
+      border-radius: 18px;
+    }
+    .button-1 {
+      background-color: #02f3a2;
+    }
+    .button-2 {
+      background-color: white;
+    }
+    .button-3 {
+      background-color: #1e1e1e;
+      color: white;
+    }
+    .button-3 p {
+      color: white;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="settings">
+    <p>roundness</p>
+    <div class="button-container">
+      <div class="button rounded-rect-1" data-key="roundness" data-value="min">
+        <p>min</p>
+      </div>
+      <div class="button rounded-rect-2" data-key="roundness" data-value="mid">
+        <p>mid</p>
+      </div>
+      <div class="button rounded-rect-3" data-key="roundness" data-value="high">
+        <p>high</p>
+      </div>
+    </div>
+    <p>products layout</p>
+    <div class="button-container">
+      <div class="button" data-key="layout" data-value="vertical">
+        <p>vertical</p>
+      </div>
+      <div class="button" data-key="layout" data-value="horizontal">
+        <p>horizontal</p>
+      </div>
+    </div>
+    <p>show products pre-login</p>
+    <div class="button-container">
+      <div class="button" data-key="showProductsPrelogin" data-value="false">
+        <p>no</p>
+      </div>
+      <div class="button" data-key="showProductsPrelogin" data-value="true">
+        <p>yes</p>
+      </div>
+    </div>
+    <p>color</p>
+    <div class="button-container">
+      <div class="button button-1" data-key="color" data-value="green"></div>
+      <div class="button button-2" data-key="color" data-value="white"></div>
+      <div class="button button-3" data-key="color" data-value="black"></div>
+    </div>
+  </div>
+
+  <div id="container"></div>
+
+  <script>
+    const isProd =
+      window.location.href.startsWith("https://widgets.bosonprotocol.io") ||
+      window.location.href.startsWith(
+        "https://widgets-production.on.fleek.co"
+      ) ||
+      window.location.href.startsWith(
+        "https://widgets-production.on-fleek.app"
+      );
+    const prodData = {
+      configId: "production-137-0",
+      envName: "production",
+      sellerId: "2"
+    };
+    const argsThatDependOnEnv = {
+      configId: "testing-80002-0",
+      envName: "testing",
+      sellerId: "2",
+      ...(isProd && prodData)
+    };
+    const instance = RobloxWidget({
+      configProps: {
+        ...argsThatDependOnEnv
+      },
+      roundness: "mid",
+      layout: "vertical",
+      color: "black",
+      showProductsPrelogin: "true",
+      step3: {
+        titleForMobile: "Exclusives",
+        title: "Get access to exclusives!!!!",
+        subtitle: `Now you can purchase GYMSHARK exclusives that are available to you.`,
+        buttonText: "Sign up",
+        callback: async () => {
+          console.log("step3 callback");
+        }
+      }
+    });
+
+    instance.render("#container");
+    const settingsDiv = document.querySelector("#settings");
+    const body = document.body;
+    const observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        instance.resize({
+          height: window.innerHeight - entry.contentRect.height
+        });
+      }
+    });
+    observer.observe(settingsDiv);
+    document.querySelectorAll(".button").forEach((button) => {
+      button.addEventListener("click", (e) => {
+        const property = button.getAttribute("data-key");
+        const value = button.getAttribute("data-value");
+        console.log(`Clicked ${button.id} ${property} ${value}`);
+
+        // Optional: Add a click animation
+        button.style.transform = "scale(0.95)";
+        setTimeout(() => {
+          button.style.transform = "scale(1)";
+        }, 100);
+
+        instance.updateProps({
+          [property]: value
+        });
+      });
+    });
+  </script>
+</body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,4 +6,4 @@ @@
           "buildCommand": "npm run build"
         }
       ]
-    }
+    }