From 337306658bb4178f6c8705dfb6c25ccdde2accd8 Mon Sep 17 00:00:00 2001
From: Albert Folch <albertfolch@redeemeum.com>
Date: Fri, 8 Sep 2023 15:38:55 +0200
Subject: [PATCH] feat: get config id from query params

---
 .env.example                                      | 2 --
 src/components/widgets/finance/Finance.tsx        | 9 ++++++---
 src/components/widgets/finance/FinanceDisplay.tsx | 5 ++++-
 src/components/widgets/redeem/Redeem.tsx          | 7 ++++++-
 src/components/widgets/redeem/RedeemDisplay.tsx   | 6 +++++-
 src/config.ts                                     | 8 +-------
 6 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/.env.example b/.env.example
index d8b3cfa..97b6b53 100644
--- a/.env.example
+++ b/.env.example
@@ -3,8 +3,6 @@ REACT_APP_ENV_NAME=testing
 # REACT_APP_ENV_NAME=staging
 # REACT_APP_ENV_NAME=production
 
-REACT_APP_CONFIG_ID=testing-80001-0
-
 # Infura IPFS project ID, used for auth header
 REACT_APP_INFURA_IPFS_PROJECT_ID=
 
diff --git a/src/components/widgets/finance/Finance.tsx b/src/components/widgets/finance/Finance.tsx
index 9b709de..f5a6031 100644
--- a/src/components/widgets/finance/Finance.tsx
+++ b/src/components/widgets/finance/Finance.tsx
@@ -1,4 +1,4 @@
-import { FinanceWidget } from "@bosonprotocol/react-kit";
+import { ConfigId, FinanceWidget } from "@bosonprotocol/react-kit";
 import { useSearchParams } from "react-router-dom";
 
 import { CONFIG } from "../../../config";
@@ -10,11 +10,14 @@ export function Finance() {
   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>;
+  }
   return (
     <FinanceWidget
       sellerId={sellerId}
-      configId={CONFIG.configId}
+      configId={configId}
       envName={CONFIG.envName}
       metaTx={{
         apiKey: CONFIG.metaTxApiKey as string,
diff --git a/src/components/widgets/finance/FinanceDisplay.tsx b/src/components/widgets/finance/FinanceDisplay.tsx
index cac5b26..40a6876 100644
--- a/src/components/widgets/finance/FinanceDisplay.tsx
+++ b/src/components/widgets/finance/FinanceDisplay.tsx
@@ -1,12 +1,15 @@
+import { getEnvConfigs } from "@bosonprotocol/react-kit";
 import CodeCopy from "react-codecopy";
 import { Link } from "react-router-dom";
 
+import { CONFIG } from "../../../config";
 import { Pre, Widget } from "../styles";
 import { financePath } from "./Finance";
 
 export function FinanceDisplay() {
   const financeQPobj = {
-    sellerId: "25"
+    sellerId: "25",
+    configId: getEnvConfigs(CONFIG.envName)[0].configId
   };
   const financeQP = new URLSearchParams(
     Object.entries(financeQPobj)
diff --git a/src/components/widgets/redeem/Redeem.tsx b/src/components/widgets/redeem/Redeem.tsx
index 5ca3977..94c8621 100644
--- a/src/components/widgets/redeem/Redeem.tsx
+++ b/src/components/widgets/redeem/Redeem.tsx
@@ -1,4 +1,5 @@
 import {
+  ConfigId,
   RedemptionBypassMode,
   RedemptionWidget
 } from "@bosonprotocol/react-kit";
@@ -27,11 +28,15 @@ export function Redeem() {
       );
     }
   }
+  const configId = searchParams.get("configId") as ConfigId;
+  if (!configId) {
+    return <p>Missing 'configId' query param</p>;
+  }
 
   return (
     <RedemptionWidget
       exchangeId={exchangeId}
-      configId={CONFIG.configId}
+      configId={configId}
       envName={CONFIG.envName}
       metaTx={{
         apiKey: CONFIG.metaTxApiKey as string,
diff --git a/src/components/widgets/redeem/RedeemDisplay.tsx b/src/components/widgets/redeem/RedeemDisplay.tsx
index fcafa05..37481ff 100644
--- a/src/components/widgets/redeem/RedeemDisplay.tsx
+++ b/src/components/widgets/redeem/RedeemDisplay.tsx
@@ -1,11 +1,15 @@
+import { getEnvConfigs } from "@bosonprotocol/react-kit";
 import CodeCopy from "react-codecopy";
 import { Link } from "react-router-dom";
 
+import { CONFIG } from "../../../config";
 import { Pre, Widget } from "../styles";
 import { redeemPath } from "./Redeem";
 
 export function RedeemDisplay() {
-  const redeemQPobj = {};
+  const redeemQPobj = {
+    configId: getEnvConfigs(CONFIG.envName)[0].configId
+  };
   const redeemQP = new URLSearchParams(Object.entries(redeemQPobj)).toString();
   const title = "Redeem widget";
   const width = "100%";
diff --git a/src/config.ts b/src/config.ts
index 9389eb9..72dc297 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,17 +1,12 @@
-import { ConfigId, EnvironmentType } from "@bosonprotocol/react-kit";
+import { EnvironmentType } from "@bosonprotocol/react-kit";
 import { Buffer } from "buffer";
 
 const envName = process.env.REACT_APP_ENV_NAME as EnvironmentType;
-const configId = process.env.REACT_APP_CONFIG_ID as ConfigId;
 
 if (!envName || ["testing", "staging", "production"].indexOf(envName) < 0) {
   throw `REACT_APP_ENV_NAME env variable is missing or invalid ('${envName}')`;
 }
 
-if (!configId) {
-  throw `REACT_APP_CONFIG_ID env variable is missing ('${configId}')`;
-}
-
 type ConfigFields =
   | "defaultTokens"
   | "defaultDisputeResolverId"
@@ -129,7 +124,6 @@ if (!_CONFIG) {
 
 export const CONFIG = {
   envName,
-  configId,
   ipfsMetadataStorageHeaders: getIpfsMetadataStorageHeaders(
     process.env.REACT_APP_INFURA_IPFS_PROJECT_ID,
     process.env.REACT_APP_INFURA_IPFS_PROJECT_SECRET