663 lines
34 KiB
JavaScript
663 lines
34 KiB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
||
|
||
var browserUtils = require('@walletconnect/browser-utils');
|
||
var QRCode = _interopDefault(require('qrcode'));
|
||
var copy = _interopDefault(require('copy-to-clipboard'));
|
||
var React = require('preact/compat');
|
||
|
||
function open(uri) {
|
||
QRCode.toString(uri, {
|
||
type: "terminal"
|
||
}).then(console.log);
|
||
}
|
||
|
||
var WALLETCONNECT_STYLE_SHEET = ":root {\n --animation-duration: 300ms;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n.animated {\n animation-duration: var(--animation-duration);\n animation-fill-mode: both;\n}\n\n.fadeIn {\n animation-name: fadeIn;\n}\n\n.fadeOut {\n animation-name: fadeOut;\n}\n\n#walletconnect-wrapper {\n -webkit-user-select: none;\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n left: 0;\n pointer-events: none;\n position: fixed;\n top: 0;\n user-select: none;\n width: 100%;\n z-index: 99999999999999;\n}\n\n.walletconnect-modal__headerLogo {\n height: 21px;\n}\n\n.walletconnect-modal__header p {\n color: #ffffff;\n font-size: 20px;\n font-weight: 600;\n margin: 0;\n align-items: flex-start;\n display: flex;\n flex: 1;\n margin-left: 5px;\n}\n\n.walletconnect-modal__close__wrapper {\n position: absolute;\n top: 0px;\n right: 0px;\n z-index: 10000;\n background: white;\n border-radius: 26px;\n padding: 6px;\n box-sizing: border-box;\n width: 26px;\n height: 26px;\n cursor: pointer;\n}\n\n.walletconnect-modal__close__icon {\n position: relative;\n top: 7px;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: rotate(45deg);\n}\n\n.walletconnect-modal__close__line1 {\n position: absolute;\n width: 100%;\n border: 1px solid rgb(48, 52, 59);\n}\n\n.walletconnect-modal__close__line2 {\n position: absolute;\n width: 100%;\n border: 1px solid rgb(48, 52, 59);\n transform: rotate(90deg);\n}\n\n.walletconnect-qrcode__base {\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n background: rgba(37, 41, 46, 0.95);\n height: 100%;\n left: 0;\n pointer-events: auto;\n position: fixed;\n top: 0;\n transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n width: 100%;\n will-change: opacity;\n padding: 40px;\n box-sizing: border-box;\n}\n\n.walletconnect-qrcode__text {\n color: rgba(60, 66, 82, 0.6);\n font-size: 16px;\n font-weight: 600;\n letter-spacing: 0;\n line-height: 1.1875em;\n margin: 10px 0 20px 0;\n text-align: center;\n width: 100%;\n}\n\n@media only screen and (max-width: 768px) {\n .walletconnect-qrcode__text {\n font-size: 4vw;\n }\n}\n\n@media only screen and (max-width: 320px) {\n .walletconnect-qrcode__text {\n font-size: 14px;\n }\n}\n\n.walletconnect-qrcode__image {\n width: calc(100% - 30px);\n box-sizing: border-box;\n cursor: none;\n margin: 0 auto;\n}\n\n.walletconnect-qrcode__notification {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n font-size: 16px;\n padding: 16px 20px;\n border-radius: 16px;\n text-align: center;\n transition: all 0.1s ease-in-out;\n background: white;\n color: black;\n margin-bottom: -60px;\n opacity: 0;\n}\n\n.walletconnect-qrcode__notification.notification__show {\n opacity: 1;\n}\n\n@media only screen and (max-width: 768px) {\n .walletconnect-modal__header {\n height: 130px;\n }\n .walletconnect-modal__base {\n overflow: auto;\n }\n}\n\n@media only screen and (min-device-width: 415px) and (max-width: 768px) {\n #content {\n max-width: 768px;\n box-sizing: border-box;\n }\n}\n\n@media only screen and (min-width: 375px) and (max-width: 415px) {\n #content {\n max-width: 414px;\n box-sizing: border-box;\n }\n}\n\n@media only screen and (min-width: 320px) and (max-width: 375px) {\n #content {\n max-width: 375px;\n box-sizing: border-box;\n }\n}\n\n@media only screen and (max-width: 320px) {\n #content {\n max-width: 320px;\n box-sizing: border-box;\n }\n}\n\n.walletconnect-modal__base {\n -webkit-font-smoothing: antialiased;\n background: #ffffff;\n border-radius: 24px;\n box-shadow: 0 10px 50px 5px rgba(0, 0, 0, 0.4);\n font-family: ui-rounded, \"SF Pro Rounded\", \"SF Pro Text\", medium-content-sans-serif-font,\n -apple-system, BlinkMacSystemFont, ui-sans-serif, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell,\n \"Open Sans\", \"Helvetica Neue\", sans-serif;\n margin-top: 41px;\n padding: 24px 24px 22px;\n pointer-events: auto;\n position: relative;\n text-align: center;\n transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n will-change: transform;\n overflow: visible;\n transform: translateY(-50%);\n top: 50%;\n max-width: 500px;\n margin: auto;\n}\n\n@media only screen and (max-width: 320px) {\n .walletconnect-modal__base {\n padding: 24px 12px;\n }\n}\n\n.walletconnect-modal__base .hidden {\n transform: translateY(150%);\n transition: 0.125s cubic-bezier(0.4, 0, 1, 1);\n}\n\n.walletconnect-modal__header {\n align-items: center;\n display: flex;\n height: 26px;\n left: 0;\n justify-content: space-between;\n position: absolute;\n top: -42px;\n width: 100%;\n}\n\n.walletconnect-modal__base .wc-logo {\n align-items: center;\n display: flex;\n height: 26px;\n margin-top: 15px;\n padding-bottom: 15px;\n pointer-events: auto;\n}\n\n.walletconnect-modal__base .wc-logo div {\n background-color: #3399ff;\n height: 21px;\n margin-right: 5px;\n mask-image: url(\"images/wc-logo.svg\") center no-repeat;\n width: 32px;\n}\n\n.walletconnect-modal__base .wc-logo p {\n color: #ffffff;\n font-size: 20px;\n font-weight: 600;\n margin: 0;\n}\n\n.walletconnect-modal__base h2 {\n color: rgba(60, 66, 82, 0.6);\n font-size: 16px;\n font-weight: 600;\n letter-spacing: 0;\n line-height: 1.1875em;\n margin: 0 0 19px 0;\n text-align: center;\n width: 100%;\n}\n\n.walletconnect-modal__base__row {\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n align-items: center;\n border-radius: 20px;\n cursor: pointer;\n display: flex;\n height: 56px;\n justify-content: space-between;\n padding: 0 15px;\n position: relative;\n margin: 0px 0px 8px;\n text-align: left;\n transition: 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n will-change: transform;\n text-decoration: none;\n}\n\n.walletconnect-modal__base__row:hover {\n background: rgba(60, 66, 82, 0.06);\n}\n\n.walletconnect-modal__base__row:active {\n background: rgba(60, 66, 82, 0.06);\n transform: scale(0.975);\n transition: 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.walletconnect-modal__base__row__h3 {\n color: #25292e;\n font-size: 20px;\n font-weight: 700;\n margin: 0;\n padding-bottom: 3px;\n}\n\n.walletconnect-modal__base__row__right {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n.walletconnect-modal__base__row__right__app-icon {\n border-radius: 8px;\n height: 34px;\n margin: 0 11px 2px 0;\n width: 34px;\n background-size: 100%;\n box-shadow: 0 4px 12px 0 rgba(37, 41, 46, 0.25);\n}\n\n.walletconnect-modal__base__row__right__caret {\n height: 18px;\n opacity: 0.3;\n transition: 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n width: 8px;\n will-change: opacity;\n}\n\n.walletconnect-modal__base__row:hover .caret,\n.walletconnect-modal__base__row:active .caret {\n opacity: 0.6;\n}\n\n.walletconnect-modal__mobile__toggle {\n width: 80%;\n display: flex;\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n border-radius: 8px;\n margin-bottom: 18px;\n background: #d4d5d9;\n}\n\n.walletconnect-modal__single_wallet {\n display: flex;\n justify-content: center;\n margin-top: 7px;\n margin-bottom: 18px;\n}\n\n.walletconnect-modal__single_wallet a {\n cursor: pointer;\n color: rgb(64, 153, 255);\n font-size: 21px;\n font-weight: 800;\n text-decoration: none !important;\n margin: 0 auto;\n}\n\n.walletconnect-modal__mobile__toggle_selector {\n width: calc(50% - 8px);\n background: white;\n position: absolute;\n border-radius: 5px;\n height: calc(100% - 8px);\n top: 4px;\n transition: all 0.2s ease-in-out;\n transform: translate3d(4px, 0, 0);\n}\n\n.walletconnect-modal__mobile__toggle.right__selected .walletconnect-modal__mobile__toggle_selector {\n transform: translate3d(calc(100% + 12px), 0, 0);\n}\n\n.walletconnect-modal__mobile__toggle a {\n font-size: 12px;\n width: 50%;\n text-align: center;\n padding: 8px;\n margin: 0;\n font-weight: 600;\n z-index: 1;\n}\n\n.walletconnect-modal__footer {\n display: flex;\n justify-content: center;\n margin-top: 20px;\n}\n\n@media only screen and (max-width: 768px) {\n .walletconnect-modal__footer {\n margin-top: 5vw;\n }\n}\n\n.walletconnect-modal__footer a {\n cursor: pointer;\n color: #898d97;\n font-size: 15px;\n margin: 0 auto;\n}\n\n@media only screen and (max-width: 320px) {\n .walletconnect-modal__footer a {\n font-size: 14px;\n }\n}\n\n.walletconnect-connect__buttons__wrapper {\n max-height: 44vh;\n}\n\n.walletconnect-connect__buttons__wrapper__android {\n margin: 50% 0;\n}\n\n.walletconnect-connect__buttons__wrapper__wrap {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n margin: 10px 0;\n}\n\n@media only screen and (min-width: 768px) {\n .walletconnect-connect__buttons__wrapper__wrap {\n margin-top: 40px;\n }\n}\n\n.walletconnect-connect__button {\n background-color: rgb(64, 153, 255);\n padding: 12px;\n border-radius: 8px;\n text-decoration: none;\n color: rgb(255, 255, 255);\n font-weight: 500;\n}\n\n.walletconnect-connect__button__icon_anchor {\n cursor: pointer;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 8px;\n width: 42px;\n justify-self: center;\n flex-direction: column;\n text-decoration: none !important;\n}\n\n@media only screen and (max-width: 320px) {\n .walletconnect-connect__button__icon_anchor {\n margin: 4px;\n }\n}\n\n.walletconnect-connect__button__icon {\n border-radius: 10px;\n height: 42px;\n margin: 0;\n width: 42px;\n background-size: cover !important;\n box-shadow: 0 4px 12px 0 rgba(37, 41, 46, 0.25);\n}\n\n.walletconnect-connect__button__text {\n color: #424952;\n font-size: 2.7vw;\n text-decoration: none !important;\n padding: 0;\n margin-top: 1.8vw;\n font-weight: 600;\n}\n\n@media only screen and (min-width: 768px) {\n .walletconnect-connect__button__text {\n font-size: 16px;\n margin-top: 12px;\n }\n}\n\n.walletconnect-search__input {\n border: none;\n background: #d4d5d9;\n border-style: none;\n padding: 8px 16px;\n outline: none;\n font-style: normal;\n font-stretch: normal;\n font-size: 16px;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: left;\n border-radius: 8px;\n width: calc(100% - 16px);\n margin: 0;\n margin-bottom: 8px;\n}\n";
|
||
|
||
// A type of promise-like that resolves synchronously and supports only one observer
|
||
var _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator")) : "@@iterator"; // Asynchronously iterate through an object's values
|
||
var _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator")) : "@@asyncIterator"; // Asynchronously iterate on a value using it's async iterator if present, or its synchronous iterator if missing
|
||
|
||
function _catch(body, recover) {
|
||
try {
|
||
var result = body();
|
||
} catch (e) {
|
||
return recover(e);
|
||
}
|
||
|
||
if (result && result.then) {
|
||
return result.then(void 0, recover);
|
||
}
|
||
|
||
return result;
|
||
} // Asynchronously await a promise and pass the result to a finally continuation
|
||
|
||
var WALLETCONNECT_LOGO_SVG_URL = "data:image/svg+xml,%3Csvg height='185' viewBox='0 0 300 185' width='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m61.4385429 36.2562612c48.9112241-47.8881663 128.2119871-47.8881663 177.1232091 0l5.886545 5.7634174c2.445561 2.3944081 2.445561 6.2765112 0 8.6709204l-20.136695 19.715503c-1.222781 1.1972051-3.2053 1.1972051-4.428081 0l-8.100584-7.9311479c-34.121692-33.4079817-89.443886-33.4079817-123.5655788 0l-8.6750562 8.4936051c-1.2227816 1.1972041-3.205301 1.1972041-4.4280806 0l-20.1366949-19.7155031c-2.4455612-2.3944092-2.4455612-6.2765122 0-8.6709204zm218.7677961 40.7737449 17.921697 17.546897c2.445549 2.3943969 2.445563 6.2764769.000031 8.6708899l-80.810171 79.121134c-2.445544 2.394426-6.410582 2.394453-8.85616.000062-.00001-.00001-.000022-.000022-.000032-.000032l-57.354143-56.154572c-.61139-.598602-1.60265-.598602-2.21404 0-.000004.000004-.000007.000008-.000011.000011l-57.3529212 56.154531c-2.4455368 2.394432-6.4105755 2.394472-8.8561612.000087-.0000143-.000014-.0000296-.000028-.0000449-.000044l-80.81241943-79.122185c-2.44556021-2.394408-2.44556021-6.2765115 0-8.6709197l17.92172963-17.5468673c2.4455602-2.3944082 6.4105989-2.3944082 8.8561602 0l57.3549775 56.155357c.6113908.598602 1.602649.598602 2.2140398 0 .0000092-.000009.0000174-.000017.0000265-.000024l57.3521031-56.155333c2.445505-2.3944633 6.410544-2.3945531 8.856161-.0002.000034.0000336.000068.0000673.000101.000101l57.354902 56.155432c.61139.598601 1.60265.598601 2.21404 0l57.353975-56.1543249c2.445561-2.3944092 6.410599-2.3944092 8.85616 0z' fill='%233b99fc'/%3E%3C/svg%3E";
|
||
|
||
var WALLETCONNECT_HEADER_TEXT = "WalletConnect";
|
||
var ANIMATION_DURATION = 300;
|
||
var DEFAULT_BUTTON_COLOR = "rgb(64, 153, 255)";
|
||
var WALLETCONNECT_WRAPPER_ID = "walletconnect-wrapper";
|
||
var WALLETCONNECT_STYLE_ID = "walletconnect-style-sheet";
|
||
var WALLETCONNECT_MODAL_ID = "walletconnect-qrcode-modal";
|
||
var WALLETCONNECT_CLOSE_BUTTON_ID = "walletconnect-qrcode-close";
|
||
var WALLETCONNECT_CTA_TEXT_ID = "walletconnect-qrcode-text";
|
||
var WALLETCONNECT_CONNECT_BUTTON_ID = "walletconnect-connect-button";
|
||
|
||
function Header(props) {
|
||
return React.createElement("div", {
|
||
className: "walletconnect-modal__header"
|
||
}, React.createElement("img", {
|
||
src: WALLETCONNECT_LOGO_SVG_URL,
|
||
className: "walletconnect-modal__headerLogo"
|
||
}), React.createElement("p", null, WALLETCONNECT_HEADER_TEXT), React.createElement("div", {
|
||
className: "walletconnect-modal__close__wrapper",
|
||
onClick: props.onClose
|
||
}, React.createElement("div", {
|
||
id: WALLETCONNECT_CLOSE_BUTTON_ID,
|
||
className: "walletconnect-modal__close__icon"
|
||
}, React.createElement("div", {
|
||
className: "walletconnect-modal__close__line1"
|
||
}), React.createElement("div", {
|
||
className: "walletconnect-modal__close__line2"
|
||
}))));
|
||
}
|
||
|
||
function ConnectButton(props) {
|
||
return React.createElement("a", {
|
||
className: "walletconnect-connect__button",
|
||
href: props.href,
|
||
id: (WALLETCONNECT_CONNECT_BUTTON_ID + "-" + (props.name)),
|
||
onClick: props.onClick,
|
||
rel: "noopener noreferrer",
|
||
style: {
|
||
backgroundColor: props.color
|
||
},
|
||
target: "_blank"
|
||
}, props.name);
|
||
}
|
||
|
||
var CARET_SVG_URL = "data:image/svg+xml,%3Csvg fill='none' height='18' viewBox='0 0 8 18' width='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m.586301.213898c-.435947.33907-.5144813.967342-.175411 1.403292l4.87831 6.27212c.28087.36111.28087.86677 0 1.22788l-4.878311 6.27211c-.33907.436-.260536 1.0642.175412 1.4033.435949.3391 1.064219.2605 1.403289-.1754l4.87832-6.2721c.84259-1.08336.84259-2.60034 0-3.68367l-4.87832-6.27212c-.33907-.4359474-.96734-.514482-1.403289-.175412z' fill='%233c4252' fill-rule='evenodd'/%3E%3C/svg%3E";
|
||
|
||
function WalletButton(props) {
|
||
var color = props.color;
|
||
var href = props.href;
|
||
var name = props.name;
|
||
var logo = props.logo;
|
||
var onClick = props.onClick;
|
||
return React.createElement("a", {
|
||
className: "walletconnect-modal__base__row",
|
||
href: href,
|
||
onClick: onClick,
|
||
rel: "noopener noreferrer",
|
||
target: "_blank"
|
||
}, React.createElement("h3", {
|
||
className: "walletconnect-modal__base__row__h3"
|
||
}, name), React.createElement("div", {
|
||
className: "walletconnect-modal__base__row__right"
|
||
}, React.createElement("div", {
|
||
className: "walletconnect-modal__base__row__right__app-icon",
|
||
style: {
|
||
background: ("url('" + logo + "') " + color),
|
||
backgroundSize: "100%"
|
||
}
|
||
}), React.createElement("img", {
|
||
src: CARET_SVG_URL,
|
||
className: "walletconnect-modal__base__row__right__caret"
|
||
})));
|
||
}
|
||
|
||
function WalletIcon(props) {
|
||
var color = props.color;
|
||
var href = props.href;
|
||
var name = props.name;
|
||
var logo = props.logo;
|
||
var onClick = props.onClick;
|
||
var fontSize = window.innerWidth < 768 ? ((name.length > 8 ? 2.5 : 2.7) + "vw") : "inherit";
|
||
return React.createElement("a", {
|
||
className: "walletconnect-connect__button__icon_anchor",
|
||
href: href,
|
||
onClick: onClick,
|
||
rel: "noopener noreferrer",
|
||
target: "_blank"
|
||
}, React.createElement("div", {
|
||
className: "walletconnect-connect__button__icon",
|
||
style: {
|
||
background: ("url('" + logo + "') " + color),
|
||
backgroundSize: "100%"
|
||
}
|
||
}), React.createElement("div", {
|
||
style: {
|
||
fontSize: fontSize
|
||
},
|
||
className: "walletconnect-connect__button__text"
|
||
}, name));
|
||
}
|
||
|
||
var GRID_MIN_COUNT = 5;
|
||
var LINKS_PER_PAGE = 12;
|
||
|
||
function LinkDisplay(props) {
|
||
var android = browserUtils.isAndroid();
|
||
var ref = React.useState("");
|
||
var input = ref[0];
|
||
var setInput = ref[1];
|
||
var ref$1 = React.useState("");
|
||
var filter = ref$1[0];
|
||
var setFilter = ref$1[1];
|
||
var ref$2 = React.useState(1);
|
||
var page = ref$2[0];
|
||
var setPage = ref$2[1];
|
||
var links = filter ? props.links.filter(function (link) { return link.name.toLowerCase().includes(filter.toLowerCase()); }) : props.links;
|
||
var errorMessage = props.errorMessage;
|
||
var grid = filter || links.length > GRID_MIN_COUNT;
|
||
var pages = Math.ceil(links.length / LINKS_PER_PAGE);
|
||
var range = [(page - 1) * LINKS_PER_PAGE + 1, page * LINKS_PER_PAGE];
|
||
var pageLinks = links.length ? links.filter(function (_, index) { return index + 1 >= range[0] && index + 1 <= range[1]; }) : [];
|
||
var hasPaging = !!(!android && pages > 1);
|
||
var filterTimeout = undefined;
|
||
|
||
function handleInput(e) {
|
||
setInput(e.target.value);
|
||
clearTimeout(filterTimeout);
|
||
|
||
if (e.target.value) {
|
||
filterTimeout = setTimeout(function () {
|
||
setFilter(e.target.value);
|
||
setPage(1);
|
||
}, 1000);
|
||
} else {
|
||
setInput("");
|
||
setFilter("");
|
||
setPage(1);
|
||
}
|
||
}
|
||
|
||
return React.createElement("div", null, React.createElement("p", {
|
||
id: WALLETCONNECT_CTA_TEXT_ID,
|
||
className: "walletconnect-qrcode__text"
|
||
}, android ? props.text.connect_mobile_wallet : props.text.choose_preferred_wallet), !android && React.createElement("input", {
|
||
className: "walletconnect-search__input",
|
||
placeholder: "Search",
|
||
value: input,
|
||
onChange: handleInput
|
||
}), React.createElement("div", {
|
||
className: ("walletconnect-connect__buttons__wrapper" + (android ? "__android" : grid && links.length ? "__wrap" : ""))
|
||
}, !android ? pageLinks.length ? pageLinks.map(function (entry) {
|
||
var color = entry.color;
|
||
var name = entry.name;
|
||
var shortName = entry.shortName;
|
||
var logo = entry.logo;
|
||
var href = browserUtils.formatIOSMobile(props.uri, entry);
|
||
var handleClickIOS = React.useCallback(function () {
|
||
browserUtils.saveMobileLinkInfo({
|
||
name: name,
|
||
href: href
|
||
});
|
||
}, [pageLinks]);
|
||
return !grid ? React.createElement(WalletButton, {
|
||
color: color,
|
||
href: href,
|
||
name: name,
|
||
logo: logo,
|
||
onClick: handleClickIOS
|
||
}) : React.createElement(WalletIcon, {
|
||
color: color,
|
||
href: href,
|
||
name: shortName || name,
|
||
logo: logo,
|
||
onClick: handleClickIOS
|
||
});
|
||
}) : React.createElement(React.Fragment, null, React.createElement("p", null, errorMessage.length ? props.errorMessage : !!props.links.length && !links.length ? props.text.no_wallets_found : props.text.loading)) : React.createElement(ConnectButton, {
|
||
name: props.text.connect,
|
||
color: DEFAULT_BUTTON_COLOR,
|
||
href: props.uri,
|
||
onClick: React.useCallback(function () {
|
||
browserUtils.saveMobileLinkInfo({
|
||
name: "Unknown",
|
||
href: props.uri
|
||
});
|
||
}, [])
|
||
})), hasPaging && React.createElement("div", {
|
||
className: "walletconnect-modal__footer"
|
||
}, Array(pages).fill(0).map(function (_, index) {
|
||
var pageNumber = index + 1;
|
||
var selected = page === pageNumber;
|
||
return React.createElement("a", {
|
||
style: {
|
||
margin: "auto 10px",
|
||
fontWeight: selected ? "bold" : "normal"
|
||
},
|
||
onClick: function () { return setPage(pageNumber); }
|
||
}, pageNumber);
|
||
})));
|
||
}
|
||
|
||
function Notification(props) {
|
||
var show = !!props.message.trim();
|
||
return React.createElement("div", {
|
||
className: ("walletconnect-qrcode__notification" + (show ? " notification__show" : ""))
|
||
}, props.message);
|
||
}
|
||
|
||
var formatQRCodeImage = function (data) {
|
||
try {
|
||
var result = "";
|
||
return Promise.resolve(QRCode.toString(data, {
|
||
margin: 0,
|
||
type: "svg"
|
||
})).then(function (dataString) {
|
||
if (typeof dataString === "string") {
|
||
result = dataString.replace("<svg", "<svg class=\"walletconnect-qrcode__image\"");
|
||
}
|
||
|
||
return result;
|
||
});
|
||
} catch (e) {
|
||
return Promise.reject(e);
|
||
}
|
||
};
|
||
|
||
function QRCodeDisplay(props) {
|
||
var ref = React.useState("");
|
||
var notification = ref[0];
|
||
var setNotification = ref[1];
|
||
var ref$1 = React.useState("");
|
||
var svg = ref$1[0];
|
||
var setSvg = ref$1[1];
|
||
React.useEffect(function () {
|
||
try {
|
||
return Promise.resolve(formatQRCodeImage(props.uri)).then(function (_formatQRCodeImage) {
|
||
setSvg(_formatQRCodeImage);
|
||
});
|
||
} catch (e) {
|
||
Promise.reject(e);
|
||
}
|
||
}, []);
|
||
|
||
var copyToClipboard = function () {
|
||
var success = copy(props.uri);
|
||
|
||
if (success) {
|
||
setNotification(props.text.copied_to_clipboard);
|
||
setInterval(function () { return setNotification(""); }, 1200);
|
||
} else {
|
||
setNotification("Error");
|
||
setInterval(function () { return setNotification(""); }, 1200);
|
||
}
|
||
};
|
||
|
||
return React.createElement("div", null, React.createElement("p", {
|
||
id: WALLETCONNECT_CTA_TEXT_ID,
|
||
className: "walletconnect-qrcode__text"
|
||
}, props.text.scan_qrcode_with_wallet), React.createElement("div", {
|
||
dangerouslySetInnerHTML: {
|
||
__html: svg
|
||
}
|
||
}), React.createElement("div", {
|
||
className: "walletconnect-modal__footer"
|
||
}, React.createElement("a", {
|
||
onClick: copyToClipboard
|
||
}, props.text.copy_to_clipboard)), React.createElement(Notification, {
|
||
message: notification
|
||
}));
|
||
}
|
||
|
||
function Modal(props) {
|
||
var android = browserUtils.isAndroid();
|
||
var mobile = browserUtils.isMobile();
|
||
var whitelist = mobile ? props.qrcodeModalOptions && props.qrcodeModalOptions.mobileLinks ? props.qrcodeModalOptions.mobileLinks : undefined : props.qrcodeModalOptions && props.qrcodeModalOptions.desktopLinks ? props.qrcodeModalOptions.desktopLinks : undefined;
|
||
var ref = React.useState(false);
|
||
var loading = ref[0];
|
||
var setLoading = ref[1];
|
||
var ref$1 = React.useState(false);
|
||
var fetched = ref$1[0];
|
||
var setFetched = ref$1[1];
|
||
var ref$2 = React.useState(!mobile);
|
||
var displayQRCode = ref$2[0];
|
||
var setDisplayQRCode = ref$2[1];
|
||
var displayProps = {
|
||
mobile: mobile,
|
||
text: props.text,
|
||
uri: props.uri,
|
||
qrcodeModalOptions: props.qrcodeModalOptions
|
||
};
|
||
var ref$3 = React.useState("");
|
||
var singleLinkHref = ref$3[0];
|
||
var setSingleLinkHref = ref$3[1];
|
||
var ref$4 = React.useState(false);
|
||
var hasSingleLink = ref$4[0];
|
||
var setHasSingleLink = ref$4[1];
|
||
var ref$5 = React.useState([]);
|
||
var links = ref$5[0];
|
||
var setLinks = ref$5[1];
|
||
var ref$6 = React.useState("");
|
||
var errorMessage = ref$6[0];
|
||
var setErrorMessage = ref$6[1];
|
||
|
||
var getLinksIfNeeded = function () {
|
||
if (fetched || loading || whitelist && !whitelist.length || links.length > 0) {
|
||
return;
|
||
}
|
||
|
||
React.useEffect(function () {
|
||
var initLinks = function () {
|
||
try {
|
||
if (android) { return Promise.resolve(); }
|
||
setLoading(true);
|
||
|
||
var _temp = _catch(function () {
|
||
var url = props.qrcodeModalOptions && props.qrcodeModalOptions.registryUrl ? props.qrcodeModalOptions.registryUrl : browserUtils.getWalletRegistryUrl();
|
||
return Promise.resolve(fetch(url)).then(function (registryResponse) {
|
||
return Promise.resolve(registryResponse.json()).then(function (_registryResponse$jso) {
|
||
var registry = _registryResponse$jso.listings;
|
||
var platform = mobile ? "mobile" : "desktop";
|
||
|
||
var _links = browserUtils.getMobileLinkRegistry(browserUtils.formatMobileRegistry(registry, platform), whitelist);
|
||
|
||
setLoading(false);
|
||
setFetched(true);
|
||
setErrorMessage(!_links.length ? props.text.no_supported_wallets : "");
|
||
setLinks(_links);
|
||
var hasSingleLink = _links.length === 1;
|
||
|
||
if (hasSingleLink) {
|
||
setSingleLinkHref(browserUtils.formatIOSMobile(props.uri, _links[0]));
|
||
setDisplayQRCode(true);
|
||
}
|
||
|
||
setHasSingleLink(hasSingleLink);
|
||
});
|
||
});
|
||
}, function (e) {
|
||
setLoading(false);
|
||
setFetched(true);
|
||
setErrorMessage(props.text.something_went_wrong);
|
||
console.error(e);
|
||
});
|
||
|
||
return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
|
||
} catch (e) {
|
||
return Promise.reject(e);
|
||
}
|
||
};
|
||
|
||
initLinks();
|
||
});
|
||
};
|
||
|
||
getLinksIfNeeded();
|
||
var rightSelected = mobile ? displayQRCode : !displayQRCode;
|
||
return React.createElement("div", {
|
||
id: WALLETCONNECT_MODAL_ID,
|
||
className: "walletconnect-qrcode__base animated fadeIn"
|
||
}, React.createElement("div", {
|
||
className: "walletconnect-modal__base"
|
||
}, React.createElement(Header, {
|
||
onClose: props.onClose
|
||
}), hasSingleLink && displayQRCode ? React.createElement("div", {
|
||
className: "walletconnect-modal__single_wallet"
|
||
}, React.createElement("a", {
|
||
onClick: function () { return browserUtils.saveMobileLinkInfo({
|
||
name: links[0].name,
|
||
href: singleLinkHref
|
||
}); },
|
||
href: singleLinkHref,
|
||
rel: "noopener noreferrer",
|
||
target: "_blank"
|
||
}, props.text.connect_with + " " + (hasSingleLink ? links[0].name : "") + " ›")) : android || loading || !loading && links.length ? React.createElement("div", {
|
||
className: ("walletconnect-modal__mobile__toggle" + (rightSelected ? " right__selected" : ""))
|
||
}, React.createElement("div", {
|
||
className: "walletconnect-modal__mobile__toggle_selector"
|
||
}), mobile ? React.createElement(React.Fragment, null, React.createElement("a", {
|
||
onClick: function () { return (setDisplayQRCode(false), getLinksIfNeeded()); }
|
||
}, props.text.mobile), React.createElement("a", {
|
||
onClick: function () { return setDisplayQRCode(true); }
|
||
}, props.text.qrcode)) : React.createElement(React.Fragment, null, React.createElement("a", {
|
||
onClick: function () { return setDisplayQRCode(true); }
|
||
}, props.text.qrcode), React.createElement("a", {
|
||
onClick: function () { return (setDisplayQRCode(false), getLinksIfNeeded()); }
|
||
}, props.text.desktop))) : null, React.createElement("div", null, displayQRCode || !android && !loading && !links.length ? React.createElement(QRCodeDisplay, Object.assign({}, displayProps)) : React.createElement(LinkDisplay, Object.assign({}, displayProps,
|
||
{links: links,
|
||
errorMessage: errorMessage})))));
|
||
}
|
||
|
||
var de = {
|
||
choose_preferred_wallet: "Wähle bevorzugte Wallet",
|
||
connect_mobile_wallet: "Verbinde mit Mobile Wallet",
|
||
scan_qrcode_with_wallet: "Scanne den QR-code mit einer WalletConnect kompatiblen Wallet",
|
||
connect: "Verbinden",
|
||
qrcode: "QR-Code",
|
||
mobile: "Mobile",
|
||
desktop: "Desktop",
|
||
copy_to_clipboard: "In die Zwischenablage kopieren",
|
||
copied_to_clipboard: "In die Zwischenablage kopiert!",
|
||
connect_with: "Verbinden mit Hilfe von",
|
||
loading: "Laden...",
|
||
something_went_wrong: "Etwas ist schief gelaufen",
|
||
no_supported_wallets: "Es gibt noch keine unterstützten Wallet",
|
||
no_wallets_found: "keine Wallet gefunden"
|
||
};
|
||
|
||
var en = {
|
||
choose_preferred_wallet: "Choose your preferred wallet",
|
||
connect_mobile_wallet: "Connect to Mobile Wallet",
|
||
scan_qrcode_with_wallet: "Scan QR code with a WalletConnect-compatible wallet",
|
||
connect: "Connect",
|
||
qrcode: "QR Code",
|
||
mobile: "Mobile",
|
||
desktop: "Desktop",
|
||
copy_to_clipboard: "Copy to clipboard",
|
||
copied_to_clipboard: "Copied to clipboard!",
|
||
connect_with: "Connect with",
|
||
loading: "Loading...",
|
||
something_went_wrong: "Something went wrong",
|
||
no_supported_wallets: "There are no supported wallets yet",
|
||
no_wallets_found: "No wallets found"
|
||
};
|
||
|
||
var es = {
|
||
choose_preferred_wallet: "Elige tu billetera preferida",
|
||
connect_mobile_wallet: "Conectar a billetera móvil",
|
||
scan_qrcode_with_wallet: "Escanea el código QR con una billetera compatible con WalletConnect",
|
||
connect: "Conectar",
|
||
qrcode: "Código QR",
|
||
mobile: "Móvil",
|
||
desktop: "Desktop",
|
||
copy_to_clipboard: "Copiar",
|
||
copied_to_clipboard: "Copiado!",
|
||
connect_with: "Conectar mediante",
|
||
loading: "Cargando...",
|
||
something_went_wrong: "Algo salió mal",
|
||
no_supported_wallets: "Todavía no hay billeteras compatibles",
|
||
no_wallets_found: "No se encontraron billeteras"
|
||
};
|
||
|
||
var fr = {
|
||
choose_preferred_wallet: "Choisissez votre portefeuille préféré",
|
||
connect_mobile_wallet: "Se connecter au portefeuille mobile",
|
||
scan_qrcode_with_wallet: "Scannez le QR code avec un portefeuille compatible WalletConnect",
|
||
connect: "Se connecter",
|
||
qrcode: "QR Code",
|
||
mobile: "Mobile",
|
||
desktop: "Desktop",
|
||
copy_to_clipboard: "Copier",
|
||
copied_to_clipboard: "Copié!",
|
||
connect_with: "Connectez-vous à l'aide de",
|
||
loading: "Chargement...",
|
||
something_went_wrong: "Quelque chose a mal tourné",
|
||
no_supported_wallets: "Il n'y a pas encore de portefeuilles pris en charge",
|
||
no_wallets_found: "Aucun portefeuille trouvé"
|
||
};
|
||
|
||
var ko = {
|
||
choose_preferred_wallet: "원하는 지갑을 선택하세요",
|
||
connect_mobile_wallet: "모바일 지갑과 연결",
|
||
scan_qrcode_with_wallet: "WalletConnect 지원 지갑에서 QR코드를 스캔하세요",
|
||
connect: "연결",
|
||
qrcode: "QR 코드",
|
||
mobile: "모바일",
|
||
desktop: "데스크탑",
|
||
copy_to_clipboard: "클립보드에 복사",
|
||
copied_to_clipboard: "클립보드에 복사되었습니다!",
|
||
connect_with: "와 연결하다",
|
||
loading: "로드 중...",
|
||
something_went_wrong: "문제가 발생했습니다.",
|
||
no_supported_wallets: "아직 지원되는 지갑이 없습니다",
|
||
no_wallets_found: "지갑을 찾을 수 없습니다"
|
||
};
|
||
|
||
var pt = {
|
||
choose_preferred_wallet: "Escolha sua carteira preferida",
|
||
connect_mobile_wallet: "Conectar-se à carteira móvel",
|
||
scan_qrcode_with_wallet: "Ler o código QR com uma carteira compatível com WalletConnect",
|
||
connect: "Conectar",
|
||
qrcode: "Código QR",
|
||
mobile: "Móvel",
|
||
desktop: "Desktop",
|
||
copy_to_clipboard: "Copiar",
|
||
copied_to_clipboard: "Copiado!",
|
||
connect_with: "Ligar por meio de",
|
||
loading: "Carregamento...",
|
||
something_went_wrong: "Algo correu mal",
|
||
no_supported_wallets: "Ainda não há carteiras suportadas",
|
||
no_wallets_found: "Nenhuma carteira encontrada"
|
||
};
|
||
|
||
var zh = {
|
||
choose_preferred_wallet: "选择你的钱包",
|
||
connect_mobile_wallet: "连接至移动端钱包",
|
||
scan_qrcode_with_wallet: "使用兼容 WalletConnect 的钱包扫描二维码",
|
||
connect: "连接",
|
||
qrcode: "二维码",
|
||
mobile: "移动",
|
||
desktop: "桌面",
|
||
copy_to_clipboard: "复制到剪贴板",
|
||
copied_to_clipboard: "复制到剪贴板成功！",
|
||
connect_with: "通过以下方式连接",
|
||
loading: "正在加载...",
|
||
something_went_wrong: "出了问题",
|
||
no_supported_wallets: "目前还没有支持的钱包",
|
||
no_wallets_found: "没有找到钱包"
|
||
};
|
||
|
||
var fa = {
|
||
choose_preferred_wallet: "کیف پول مورد نظر خود را انتخاب کنید",
|
||
connect_mobile_wallet: "به کیف پول موبایل وصل شوید",
|
||
scan_qrcode_with_wallet: "کد QR را با یک کیف پول سازگار با WalletConnect اسکن کنید",
|
||
connect: "اتصال",
|
||
qrcode: "کد QR",
|
||
mobile: "سیار",
|
||
desktop: "دسکتاپ",
|
||
copy_to_clipboard: "کپی به کلیپ بورد",
|
||
copied_to_clipboard: "در کلیپ بورد کپی شد!",
|
||
connect_with: "ارتباط با",
|
||
loading: "...بارگذاری",
|
||
something_went_wrong: "مشکلی پیش آمد",
|
||
no_supported_wallets: "هنوز هیچ کیف پول پشتیبانی شده ای وجود ندارد",
|
||
no_wallets_found: "هیچ کیف پولی پیدا نشد"
|
||
};
|
||
|
||
var languages = {
|
||
de: de,
|
||
en: en,
|
||
es: es,
|
||
fr: fr,
|
||
ko: ko,
|
||
pt: pt,
|
||
zh: zh,
|
||
fa: fa
|
||
};
|
||
|
||
function injectStyleSheet() {
|
||
var doc = browserUtils.getDocumentOrThrow();
|
||
var prev = doc.getElementById(WALLETCONNECT_STYLE_ID);
|
||
|
||
if (prev) {
|
||
doc.head.removeChild(prev);
|
||
}
|
||
|
||
var style = doc.createElement("style");
|
||
style.setAttribute("id", WALLETCONNECT_STYLE_ID);
|
||
style.innerText = WALLETCONNECT_STYLE_SHEET;
|
||
doc.head.appendChild(style);
|
||
}
|
||
|
||
function renderWrapper() {
|
||
var doc = browserUtils.getDocumentOrThrow();
|
||
var wrapper = doc.createElement("div");
|
||
wrapper.setAttribute("id", WALLETCONNECT_WRAPPER_ID);
|
||
doc.body.appendChild(wrapper);
|
||
return wrapper;
|
||
}
|
||
|
||
function triggerCloseAnimation() {
|
||
var doc = browserUtils.getDocumentOrThrow();
|
||
var modal = doc.getElementById(WALLETCONNECT_MODAL_ID);
|
||
|
||
if (modal) {
|
||
modal.className = modal.className.replace("fadeIn", "fadeOut");
|
||
setTimeout(function () {
|
||
var wrapper = doc.getElementById(WALLETCONNECT_WRAPPER_ID);
|
||
|
||
if (wrapper) {
|
||
doc.body.removeChild(wrapper);
|
||
}
|
||
}, ANIMATION_DURATION);
|
||
}
|
||
}
|
||
|
||
function getWrappedCallback(cb) {
|
||
return function () {
|
||
triggerCloseAnimation();
|
||
|
||
if (cb) {
|
||
cb();
|
||
}
|
||
};
|
||
}
|
||
|
||
function getText() {
|
||
var lang = browserUtils.getNavigatorOrThrow().language.split("-")[0] || "en";
|
||
return languages[lang] || languages["en"];
|
||
}
|
||
|
||
function open$1(uri, cb, qrcodeModalOptions) {
|
||
injectStyleSheet();
|
||
var wrapper = renderWrapper();
|
||
React.render(React.createElement(Modal, {
|
||
text: getText(),
|
||
uri: uri,
|
||
onClose: getWrappedCallback(cb),
|
||
qrcodeModalOptions: qrcodeModalOptions
|
||
}), wrapper);
|
||
}
|
||
function close$1() {
|
||
triggerCloseAnimation();
|
||
}
|
||
|
||
var isNode = function () { return typeof process !== "undefined" && typeof process.versions !== "undefined" && typeof process.versions.node !== "undefined"; };
|
||
|
||
function open$2(uri, cb, qrcodeModalOptions) {
|
||
console.log(uri);
|
||
|
||
if (isNode()) {
|
||
open(uri);
|
||
} else {
|
||
open$1(uri, cb, qrcodeModalOptions);
|
||
}
|
||
}
|
||
|
||
function close$2() {
|
||
if (isNode()) ; else {
|
||
close$1();
|
||
}
|
||
}
|
||
|
||
var index = {
|
||
open: open$2,
|
||
close: close$2
|
||
};
|
||
|
||
module.exports = index;
|
||
//# sourceMappingURL=index.js.map
|