diff --git a/package-lock.json b/package-lock.json index b1378b5..ead5126 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "widgets", "version": "0.1.0", "dependencies": { - "@bosonprotocol/react-kit": "^0.20.3-alpha.0", + "@bosonprotocol/react-kit": "^0.21.0-alpha.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -2224,9 +2224,9 @@ } }, "node_modules/@bosonprotocol/react-kit": { - "version": "0.20.3-alpha.0", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.20.3-alpha.0.tgz", - "integrity": "sha512-P2EukAwYj6Bx/LUrVNLY5ncjAJOFBmz6X5QQggVUTNLGS+dlDDUWyaeSR95LOqkS07Jtw9p0+iFAt9QCqvodEg==", + "version": "0.21.0-alpha.0", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.21.0-alpha.0.tgz", + "integrity": "sha512-lbqC4ClG4YVJQjflpmZymTVTxe2d9QB2rYYalfcZSxZTEZHAYW2PIhyBHW2Pn5uS9VwjwyPTTk/sQMs4YextrQ==", "dependencies": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", "@bosonprotocol/core-sdk": "^1.32.0", @@ -30691,9 +30691,9 @@ } }, "@bosonprotocol/react-kit": { - "version": "0.20.3-alpha.0", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.20.3-alpha.0.tgz", - "integrity": "sha512-P2EukAwYj6Bx/LUrVNLY5ncjAJOFBmz6X5QQggVUTNLGS+dlDDUWyaeSR95LOqkS07Jtw9p0+iFAt9QCqvodEg==", + "version": "0.21.0-alpha.0", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.21.0-alpha.0.tgz", + "integrity": "sha512-lbqC4ClG4YVJQjflpmZymTVTxe2d9QB2rYYalfcZSxZTEZHAYW2PIhyBHW2Pn5uS9VwjwyPTTk/sQMs4YextrQ==", "requires": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", "@bosonprotocol/core-sdk": "^1.32.0", diff --git a/package.json b/package.json index 5470faa..bdf6399 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@bosonprotocol/react-kit": "^0.20.3-alpha.0", + "@bosonprotocol/react-kit": "^0.21.0-alpha.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/public/example.html b/public/example.html index f53cb8d..72cde82 100644 --- a/public/example.html +++ b/public/example.html @@ -17,30 +17,129 @@ -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+

Boson Protocol Widgets

+
+

Finance Widget

+ + + + + + + + + + + + + + + +
ParameterValue
SellerId + + + +
+ +
+
+

Redemption Widget

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ParameterValue
ExchangeId + + + +
SellerId + + + +
Bypass Mode + + + +
CallbackURL + + + +
CallbackHeader + + + +
+ +
\ No newline at end of file diff --git a/public/scripts/boson-widgets.js b/public/scripts/boson-widgets.js index 723a0dd..d4b2efc 100644 --- a/public/scripts/boson-widgets.js +++ b/public/scripts/boson-widgets.js @@ -90,8 +90,11 @@ window.addEventListener("message", (event) => { } }); function bosonWidgetReload() { - const showFinanceId = document.getElementById(constants.showFinanceId); - if (showFinanceId) { + const showFinanceEls = document.querySelectorAll( + `[id^="${constants.showFinanceId}"]` + ); + for (let i = 0; i < showFinanceEls.length; i++) { + const showFinanceId = showFinanceEls[i]; showFinanceId.onclick = function () { const sellerId = showFinanceId.attributes[constants.sellerIdTag]?.value; const configId = showFinanceId.attributes[constants.configIdTag]?.value; @@ -115,6 +118,7 @@ function bosonWidgetReload() { showRedeemId.onclick = function () { const exchangeId = showRedeemId.attributes[constants.exchangeIdTag]?.value; + const sellerId = showRedeemId.attributes[constants.sellerIdTag]?.value; const bypassMode = showRedeemId.attributes[constants.bypassModeTag]?.value; const redeemCallbackUrl = @@ -125,6 +129,7 @@ function bosonWidgetReload() { const account = showRedeemId.attributes[constants.accountTag]?.value; bosonWidgetShowRedeem({ exchangeId, + sellerId, bypassMode, redeemCallbackUrl, redeemCallbackHeaders, @@ -145,6 +150,7 @@ bosonWidgetReload(); function bosonWidgetShowRedeem(args) { const params = buildParams([ { tag: "exchangeId", value: args.exchangeId }, + { tag: "sellerId", value: args.sellerId }, { tag: "bypassMode", value: args.bypassMode }, { tag: "redeemCallbackUrl", value: args.redeemCallbackUrl }, { tag: "redeemCallbackHeaders", value: args.redeemCallbackHeaders }, diff --git a/public/styles.css b/public/styles.css index 1fec53b..d8d67f7 100644 --- a/public/styles.css +++ b/public/styles.css @@ -16,6 +16,13 @@ border-color: #09182C; } +.bosonButton:disabled { + background: #4c4f53; + color: rgb(179, 179, 179); + border-color: #4c4f53; + cursor: not-allowed; +} + @media only screen and (min-width: 768px) and (max-width: 1199px) { .bosonButton { font-size: 14px; diff --git a/src/components/widgets/redeem/Redeem.tsx b/src/components/widgets/redeem/Redeem.tsx index 806327f..19ce18c 100644 --- a/src/components/widgets/redeem/Redeem.tsx +++ b/src/components/widgets/redeem/Redeem.tsx @@ -33,10 +33,18 @@ export function Redeem() { return

Missing 'configId' query param

; } const account = searchParams.get("account") as string; + const sellerIdsStr = searchParams.get("sellerIds") as string; + const sellerId = searchParams.get("sellerId") as string; + const sellerIds = sellerIdsStr + ? sellerIdsStr.split(",") + : sellerId + ? [sellerId] + : undefined; return (