@hydro-protocol/swap-sdk
Version:
Javascript SDK for Hydro Swap
143 lines (142 loc) • 5.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var penpal_1 = require("penpal");
/**
* Main class for customizing the Hydro Swap widget, to be embedded into
* your page.
*/
var HydroSwap = /** @class */ (function () {
/**
* @param id Your hydro swap id. This will define which market is used.
* @param network Optional - Which network to attach to. Generally used for testing.
*/
function HydroSwap(id, network) {
var _this = this;
this.postClick = function (frame) { return function () {
if (frame.contentWindow) {
frame.contentWindow.postMessage("click", _this.getBaseURL());
}
}; };
this.id = id;
this.network = network || "main";
}
/**
* Attaches the Hydro Swap widget iframe to your document
* @param container The container to add the widget as a child
*/
HydroSwap.prototype.attach = function (container) {
var _this = this;
var url = new URL(this.id, this.getBaseURL());
var params = new URLSearchParams();
if (this.defaultAmount) {
params.append("amount", this.defaultAmount.toFixed(2));
}
if (this.defaultWallet) {
params.append("defaultWallet", this.defaultWallet);
}
if (this.wallets) {
params.append("wallets", this.wallets.join(","));
}
url.search = params.toString();
var rounded = document.createElement("div");
rounded.style.background = "white";
rounded.style.borderRadius = "5px";
rounded.style.overflow = "hidden";
container.appendChild(rounded);
var frame;
if (this.wallets && this.wallets.indexOf("custom") >= 0) {
frame = penpal_1.default.connectToChild({
url: url.href,
appendTo: rounded,
methods: {
approveTransaction: function (txData) {
return _this.getCustomWallet().approveTransaction(txData);
},
getAccounts: function () {
return _this.getCustomWallet().getAccounts();
},
signTransaction: function (txData) {
return _this.getCustomWallet().signTransaction(txData);
},
getIconURL: function () { return _this.getCustomWallet().iconURL; },
getName: function () { return _this.getCustomWallet().name; }
}
}).iframe;
}
else {
frame = document.createElement("iframe");
frame.src = url.href;
rounded.appendChild(frame);
}
frame.scrolling = "no";
frame.style.border = "0";
frame.style.height = frame.style.width = "100%";
var responsive = function (query) {
if (query.matches) {
rounded.style.width = "100%";
rounded.style.height = "553px";
}
else {
rounded.style.width = "488px";
rounded.style.height = "465px";
}
};
var q = window.matchMedia("(max-width: 487px)");
responsive(q);
q.addListener(responsive);
document.body.addEventListener("click", this.postClick(frame));
};
/**
* The default amount of token that will be pre-populated into the widget
* @param amount An amount of token, e.g. 100
*/
HydroSwap.prototype.setDefaultAmount = function (amount) {
this.defaultAmount = amount;
return this;
};
/**
* The default wallet that will be selected in the dropdown. If nothing is
* specified, the first wallet from setWallets will be selected. If setWallets
* is not defined, it will default to Browser.
* @param wallet The default wallet to be selected
*/
HydroSwap.prototype.setDefaultWallet = function (wallet) {
this.defaultWallet = wallet;
return this;
};
/**
* The list of wallets that will appear in the dropdown selector, in order
* @param wallets List of wallets
*/
HydroSwap.prototype.setWallets = function (wallets) {
this.wallets = wallets;
return this;
};
/**
* Handler for a custom wallet definition. If the wallets you set in setWallets
* includes "custom", this handler must be defined.
* @param customWallet A custom wallet handler
*/
HydroSwap.prototype.setCustomWallet = function (customWallet) {
this.customWallet = customWallet;
return this;
};
HydroSwap.prototype.getCustomWallet = function () {
if (!this.customWallet) {
throw new Error("Custom wallet handler must be defined.");
}
return this.customWallet;
};
HydroSwap.prototype.getBaseURL = function () {
switch (this.network) {
case "main":
return "https://widget.hydroprotocol.io";
case "ropsten":
return "https://widget-ropsten.hydroprotocol.io";
default:
return this.network;
}
};
return HydroSwap;
}());
exports.default = HydroSwap;