feat: get config id from query params

.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=
 

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,

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)

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,

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%";

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