Code Integration
First, c
<div id="widget"></div>To initialize the widget add this to the script tag at the bottom of the<body> tag:
<script>
const configuration = {
paletteOverrides: {
paper: "#1A1F23",
secondary: "#2B363B",
"text-primary": "#fff",
"text-secondary": "#C5C9C9",
primary: "#38D9C0",
"text-primaryButton": "#fff",
paperSecondaryBackground: "undefined",
},
widgetType: "nft",
};
const script = document.createElement("script");
script.src =
"https://bofdevstorage.blob.core.windows.net/blobcontainer/crypto_trading_widget_sdk/index.js";
document.head.appendChild(script);
script.onload = () => {
window.CryptoTradingWidget.initNftWidget("widget", configuration);
};
</script>If you'd like to place an 'Open order' button to trigger the widget you can add an 'onClick' event:
<button id="orderButton">Open order</button>Finally, place the following script in the <body> with and replace the orderHash with your copied listing ID:
<script>
const button = document.getElementById("orderButton");
const openOrder = () => {
const orderHash =
"0xa35d92dad8c08d24b46ab0a8204768d4a5acbeb4dee21a04fd2616c7d0a5dfac";
const chainId = 137;
window.CryptoTradingWidget.openOrder(orderHash, chainId);
};
button.onclick = openOrder;
</script>This is the full code :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Widget Demo</title>
</head>
<body>
<div id="widget"></div>
<script>
const configuration = {
paletteOverrides: {
paper: "#1A1F23",
secondary: "#2B363B",
"text-primary": "#fff",
"text-secondary": "#C5C9C9",
primary: "#38D9C0",
"text-primaryButton": "#fff",
paperSecondaryBackground: "undefined",
},
widgetType: "nft",
};
const script = document.createElement("script");
script.src =
"https://bofdevstorage.blob.core.windows.net/blobcontainer/crypto_trading_widget_sdk/index.js";
document.head.appendChild(script);
script.onload = () => {
window.CryptoTradingWidget.initNftWidget("widget", configuration);
};
</script>
<button id="orderButton">Open order</button>
<script>
const button = document.getElementById("orderButton");
const openOrder = () => {
const orderHash =
"0xa35d92dad8c08d24b46ab0a8204768d4a5acbeb4dee21a04fd2616c7d0a5dfac";
const chainId = 137;
window.CryptoTradingWidget.openOrder(orderHash, chainId);
};
button.onclick = openOrder;
</script>
</body>
</html>Last updated