Merge pull request #94 from bosonprotocol/integrate-finance-widget

feat: change boson-widgets script and add parentOrigin param to finance widget

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@bosonprotocol/react-kit": "^0.22.0-alpha.14",
+    "@bosonprotocol/react-kit": "^0.22.0-alpha.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

public/scripts/boson-widgets.js

@@ -33,8 +33,10 @@ const constants = {
   deliveryInfoMessageResponse: "boson-delivery-info-response",
   redemptionSubmittedMessage: "boson-redemption-submitted",
   redemptionConfirmedMessage: "boson-redemption-confirmed",
-  financeUrl: (widgetsHost) => `${widgetsHost}/#/finance`,
-  redeemUrl: (widgetsHost) => `${widgetsHost}/#/redeem`
+  financeUrl: (widgetsHost, params) =>
+    `${widgetsHost}/#/finance?${new URLSearchParams(params).toString()}`,
+  redeemUrl: (widgetsHost, params) =>
+    `${widgetsHost}/#/redeem?${new URLSearchParams(params).toString()}`
 };
 const scripts = document.getElementsByTagName("script");
 let widgetsHost = null;
@@ -97,11 +99,10 @@ const hideIFrame = () => {
     el.remove();
   }
 };
-const buildParams = (paramsTable) =>
-  paramsTable
-    .map((param) => (param.value ? `${param.tag}=${param.value}` : undefined))
-    .filter((p) => !!p)
-    .join("&");
+const toCleanedObject = (paramsTable) =>
+  Object.fromEntries(
+    paramsTable.filter((p) => !!p.value).map(({ tag, value }) => [tag, value])
+  );
 window.addEventListener("message", (event) => {
   if (event.data === constants.hideModalMessage) {
     hideIFrame();
@@ -201,7 +202,7 @@ function bosonWidgetReload() {
 bosonWidgetReload();
 
 function bosonWidgetShowRedeem(args) {
-  const params = buildParams([
+  const paramsObject = toCleanedObject([
     { tag: "exchangeId", value: args.exchangeId },
     { tag: "sellerId", value: args.sellerId },
     { tag: "sellerIds", value: args.sellerIds },
@@ -241,22 +242,20 @@ function bosonWidgetShowRedeem(args) {
   ]);
   showLoading();
   hideIFrame();
-  createIFrame(
-    `${constants.redeemUrl(widgetsHost)}${params ? "?" + params : ""}`,
-    () => hideLoading()
+  createIFrame(constants.redeemUrl(widgetsHost, paramsObject), () =>
+    hideLoading()
   );
 }
 
 function bosonWidgetShowFinance(args) {
-  const params = buildParams([
+  const paramsObject = toCleanedObject([
     { tag: "sellerId", value: args.sellerId },
     { tag: "configId", value: args.configId },
     { tag: "account", value: args.account }
   ]);
   showLoading(constants.loadingDurationMSec);
   hideIFrame();
-  createIFrame(
-    `${constants.financeUrl(widgetsHost)}${params ? "?" + params : ""}`,
-    () => hideLoading()
+  createIFrame(constants.financeUrl(widgetsHost, paramsObject), () =>
+    hideLoading()
   );
 }

src/components/widgets/finance/Finance.tsx

@@ -6,17 +6,22 @@ import { CONFIG, getMetaTxConfig } from "../../../config";
 export const financePath = "/finance";
 export function Finance() {
   const [searchParams] = useSearchParams();
-  const sellerId = searchParams.get("sellerId");
-  if (!sellerId) {
-    return <p>Missing 'sellerId' query param</p>;
-  }
   const configId = searchParams.get("configId") as ConfigId;
   if (!configId) {
     return <p>Missing 'configId' query param</p>;
   }
+  const sellerId = searchParams.get("sellerId");
+  const parentOrigin = searchParams.get("parentOrigin");
+  if (sellerId && !parentOrigin) {
+    return <p>Missing 'parentOrigin' query param</p>;
+  }
+  if (!sellerId && parentOrigin) {
+    return <p>Missing 'sellerId' query param</p>;
+  }
   return (
     <FinanceWidget
       sellerId={sellerId}
+      parentOrigin={parentOrigin as `http${string}` | null}
       configId={configId}
       envName={CONFIG.envName}
       metaTx={getMetaTxConfig(configId)}

src/components/widgets/finance/FinanceDisplay.tsx

@@ -8,15 +8,14 @@ import { financePath } from "./Finance";
 
 export function FinanceDisplay() {
   const financeQPobj = {
-    sellerId: "25",
     configId: getEnvConfigs(CONFIG.envName)[0].configId
   };
   const financeQP = new URLSearchParams(
     Object.entries(financeQPobj)
   ).toString();
   const title = "Finance widget";
   const width = "100%";
-  const height = "400px";
+  const height = "650px";
   const iframeText = `<iframe width="${width}" height="${height}" src="${`/#${financePath}?${decodeURIComponent(
     financeQP
   )}`}" title="${title}" />`;