Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add sellerId parameter in redemption widget #76

Merged
merged 1 commit into from
Oct 9, 2023
Merged

feat: add sellerId parameter in redemption widget #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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