Skip to content

Commit

Permalink
feat: add sellerId parameter in redemption widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@levalleux-ludo
levalleux-ludo committed Oct 9, 2023
1 parent 757b44b commit 009e7b3
Show file tree
Hide file tree
Showing 6 changed files with 148 additions and 28 deletions.
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
135 changes: 117 additions & 18 deletions public/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,30 +17,129 @@
</style>
</head>
<body>
<div>
<button type="button" id="boson-finance" class="bosonButton" data-seller-id="25">Show Finance</button>
</div>
<div>
<button type="button" id="boson-redeem" class="bosonButton">Show Redeem</button>
</div>
<div>
<button type="button" id="boson-redeem-80" class="bosonButton" data-exchange-id="80">Show Redeem (ExchangeId:80)</button>
</div>
<div>
<button type="button" id="boson-redeem-redeem-80" class="bosonButton" data-exchange-id="80" data-bypass-mode="REDEEM">Redeem Exchange 80</button>
</div>
<div>
<button type="button" id="boson-redeem-cancel-80" class="bosonButton" data-exchange-id="80" data-bypass-mode="CANCEL">Cancel Exchange 80</button>
</div>
<div>
<button type="button" id="boson-redeem" class="bosonButton" data-redeem-callback-url="http%3A%2F%2Flocalhost%3A3666" data-redeem-callback-headers='%7B%0A%20%20"authorization"%3A%20"Bearer%20eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"%2C%0A%20%20"another-header"%3A%20"%2A%2F%2A"%0A%7D'>Show Redeem (3rd-party backend)</button>
</div>
<h1>Boson Protocol Widgets</h1>
<section>
<h2>Finance Widget</h2>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>SellerId</td>
<td>
<input type="number" min="1" id="input-finance-seller-id" onchange="updateFinanceButton('data-seller-id', this.value)">
</td>
<td>
<button onclick="clearFinanceInputs(); setValue('input-finance-seller-id', '26')" >Example</button>
</td>
</tr>
</tbody>
</table>
<button type="button" id="boson-finance-button" class="bosonButton" disabled>Show Finance</button>
</section>
<section>
<h2>Redemption Widget</h2>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>ExchangeId</td>
<td>
<input type="number" min="1" id="input-redeem-exchange-id" onchange="updateRedeemButton('data-exchange-id', this.value)">
</td>
<td>
<button onclick="clearRedeemInputs(); setValue('input-redeem-exchange-id', '80')" >Example</button>
</td>
</tr>
<tr>
<td>SellerId</td>
<td>
<input type="number" min="1" id="input-redeem-seller-id" onchange="updateRedeemButton('data-seller-id', this.value)">
</td>
<td>
<button onclick="clearRedeemInputs(); setValue('input-redeem-seller-id', '26')" >Example</button>
</td>
</tr>
<tr>
<td>Bypass Mode</td>
<td>
<select id="select-redeem-bypass-mode" onchange="updateRedeemButton('data-bypass-mode', this.value)">
<option value="NORMAL">NORMAL</option>
<option value="REDEEM">REDEEM</option>
<option value="CANCEL">CANCEL</option>
</select>
</td>
<td>
<button onclick="clearRedeemInputs(); setValue('input-redeem-exchange-id', '80'); setValue('select-redeem-bypass-mode', 'CANCEL')" >Example</button>
</td>
</tr>
<tr>
<td>CallbackURL</td>
<td>
<input type="url" id="input-redeem-callback-url" onchange="updateRedeemButton('data-redeem-callback-url', encodeURI(this.value))" size="30">
</td>
<td>
<button onclick="clearRedeemInputs(); setValue('input-redeem-callback-url', 'http://localhost:3666')" >Example</button>
</td>
</tr>
<tr>
<td>CallbackHeader</td>
<td>
<textarea id="input-redeem-callback-header" onchange="updateRedeemButton('data-redeem-callback-headers', encodeURI(this.value))" rows="10" cols="30">
</textarea>
</td>
<td>
<button onclick="clearRedeemInputs(); setValue('input-redeem-callback-url', 'http://localhost:3666'); setValue('input-redeem-callback-header', decodeURI('%7B%0A%20%20%22authorization%22:%20%22Bearer%20eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9%22,%0A%20%20%22another-header%22:%20%22*****%22%0A%7D'))" >Example</button>
</td>
</tr>
</tbody>
</table>
<button class="bosonButton" id="boson-redeem-button">Show Redeem</button>
</section>
<script>
const searchParams = new URLSearchParams(window.location.search);
const configId = searchParams.get('configId');
document.querySelectorAll('button').forEach(($button)=>{
$button.setAttribute('data-config-id',configId);
})
function updateRedeemButton(attribute, value) {
document.getElementById('boson-redeem-button').setAttribute(attribute, value)
}
function updateFinanceButton(attribute, value) {
document.getElementById('boson-finance-button').setAttribute(attribute, value)
if (value) {
document.getElementById('boson-finance-button').removeAttribute('disabled')
} else {
document.getElementById('boson-finance-button').setAttribute('disabled', true)
}
}
function setValue(elementId, value) {
let element = document.getElementById(elementId)
element.value = value
element.onchange()
}
function clearRedeemInputs() {
setValue('input-redeem-exchange-id', '')
setValue('input-redeem-seller-id', '')
setValue('select-redeem-bypass-mode', 'NORMAL')
setValue('input-redeem-callback-url', '')
setValue('input-redeem-callback-header', '')
}
function clearFinanceInputs() {
setValue('input-finance-seller-id', '')
updateFinanceButton('disabled', true)
}
</script>
</body>
</html>
10 changes: 8 additions & 2 deletions public/scripts/boson-widgets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 =
Expand All @@ -125,6 +129,7 @@ function bosonWidgetReload() {
const account = showRedeemId.attributes[constants.accountTag]?.value;
bosonWidgetShowRedeem({
exchangeId,
sellerId,
bypassMode,
redeemCallbackUrl,
redeemCallbackHeaders,
Expand All @@ -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 },
Expand Down
7 changes: 7 additions & 0 deletions public/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions src/components/widgets/redeem/Redeem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,18 @@ export function Redeem() {
return <p>Missing 'configId' query param</p>;
}
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 (
<RedemptionWidget
exchangeId={exchangeId}
sellerIds={sellerIds}
configId={configId}
forcedAccount={account}
envName={CONFIG.envName}
Expand Down

0 comments on commit 009e7b3

Please sign in to comment.