@dorgtech/web3modal-angular
Version:
Web3Modal implementation for Angular
302 lines (294 loc) • 12.3 kB
JavaScript
import { EventEmitter, Injectable, Optional, Component, ViewEncapsulation, Input, NgModule } from '@angular/core';
import { Web3WalletConnector, CONNECT_EVENT, ERROR_EVENT } from '@mindsorg/web3modal-ts';
import { take } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
class Web3ModalService {
/**
* @param {?=} configOptions
*/
constructor(configOptions) {
this.shouldOpen = new EventEmitter();
this.providers = new EventEmitter();
this.web3WalletConnector = new Web3WalletConnector(configOptions);
}
/**
* @return {?}
*/
open() {
return __awaiter(this, void 0, void 0, function* () {
this.providers.next(this.web3WalletConnector.providers);
return yield new Promise((/**
* @param {?} resolve
* @param {?} reject
* @return {?}
*/
(resolve, reject) => {
this.web3WalletConnector.providerController.on(CONNECT_EVENT, (/**
* @param {?} provider
* @return {?}
*/
provider => {
resolve(provider);
}));
this.web3WalletConnector.providerController.on(ERROR_EVENT, (/**
* @param {?} error
* @return {?}
*/
error => {
reject(error);
}));
this.shouldOpen.next(true);
this.shouldOpen.pipe(take(1)).subscribe({
next: (/**
* @param {?} open
* @return {?}
*/
(open) => {
if (!open) {
reject('Dismissed modal');
}
})
});
})).finally((/**
* @return {?}
*/
() => {
this.close();
}));
});
}
/**
* @param {?} options
* @return {?}
*/
setConfiguration(options) {
this.web3WalletConnector.setConfiguration(options);
}
/**
* @return {?}
*/
clearCachedProvider() {
this.web3WalletConnector.providerController.clearCachedProvider();
}
/**
* @param {?} id
* @return {?}
*/
setCachedProvider(id) {
this.web3WalletConnector.providerController.setCachedProvider(id);
}
/**
* @return {?}
*/
close() {
this.shouldOpen.next(false);
}
}
Web3ModalService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
Web3ModalService.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Optional }] }
];
if (false) {
/**
* @type {?}
* @private
*/
Web3ModalService.prototype.web3WalletConnector;
/** @type {?} */
Web3ModalService.prototype.shouldOpen;
/** @type {?} */
Web3ModalService.prototype.providers;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/web3-modal/web3-modal.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Web3ModalComponent {
/**
* @param {?} service
*/
constructor(service) {
this.service = service;
this.open = false;
this.providers = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.openSubscription = this.service.shouldOpen.subscribe({
next: (/**
* @param {?} open
* @return {?}
*/
open => {
this.open = open;
}),
});
this.providersSubscription = this.service.providers.subscribe({
next: (/**
* @param {?} providers
* @return {?}
*/
providers => {
this.providers = providers;
}),
});
}
/**
* @return {?}
*/
ngOnDestroy() {
this.openSubscription.unsubscribe();
this.providersSubscription.unsubscribe();
}
/**
* @return {?}
*/
close() {
this.service.close();
}
}
Web3ModalComponent.decorators = [
{ type: Component, args: [{
selector: 'm-web3-modal',
template: "<m-modal [open]=\"open\" (closed)=\"close()\">\n <div class=\"m-web3Modal\">\n <div class=\"m-web3Modal__header\">\n <h3 class=\"m-web3ModalHeader__title\">\n {{ title }}\n </h3>\n <div class=\"m-web3ModalHeader__description\">\n <p class=\"m-web3ModalHeader__text\">\n {{ description }}\n </p>\n <p\n class=\"m-web3ModalHeader__text--gray m-web3ModalHeader__text\"\n >\n {{ descriptionGray }}\n </p>\n </div>\n </div>\n <div class=\"m-web3Modal__body\">\n <div class=\"m-web3ModalBody__provider\">\n <div\n class=\"m-web3ModalProvider__body\"\n *ngFor=\"let provider of providers\"\n (click)=\"provider.onClick()\"\n >\n <div class=\"m-web3ModalProviderBody__icon\">\n <img [src]=\"provider.logo\" [alt]=\"provider.logo\" />\n </div>\n <div class=\"m-web3ModalProviderBody__name\">\n {{ provider.name }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"m-web3Modal__footer\">\n <div class=\"m-web3ModalFooter__description\">\n <p class=\"m-web3ModalFooter__text\" (click)=\"close()\">\n {{ dismissText }}\n </p>\n </div>\n </div>\n </div> \n</m-modal>\n",
encapsulation: ViewEncapsulation.None,
styles: [".m-web3Modal{background-color:#fff;box-sizing:border-box;display:block;margin:auto;position:relative;width:100%}@media screen and (max-width:540px){.m-web3Modal{border-radius:0;display:flex;flex:1;flex-direction:column;justify-content:space-between;margin:0}}.m-web3Modal__header{padding:40px 50px 0}.m-web3ModalHeader__title{color:#4f4f50;font-size:30px;font-weight:800;margin:0}.m-web3ModalHeader__text{color:#4f4f50;font-size:16px;font-weight:600;line-height:22px;margin:0}.m-web3ModalHeader__description{display:flex;flex-direction:column;justify-content:center;min-height:70px}.m-web3ModalHeader__text--gray{color:#7d7d82;margin:0}.m-web3Modal__footer{display:flex;flex-direction:column;height:100px;justify-content:center;margin-top:-40px;padding:0 50px}@media screen and (max-width:768px){.m-web3Modal__footer{margin-top:-20px}}.m-web3ModalFooter__text{color:#7d7d82;cursor:pointer;font-size:17px;font-weight:600;margin:0;text-align:center}.m-web3Modal__body{max-height:420px;overflow-y:auto;padding:20px 50px}.m-web3ModalBody__provider{display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width:540px){.m-web3ModalBody__provider{justify-content:center}}.m-web3ModalProvider__body{align-items:center;background-color:#fff;border:1px solid #dce2e4;cursor:pointer;display:flex;flex-direction:column;height:165px;justify-content:center;margin-bottom:20px;width:194px}.m-web3ModalProviderBody__name{color:#4f4f50;font-size:15px;font-weight:600;margin-top:12px}.m-web3ModalProviderBody__icon{align-items:center;border-radius:50%;box-shadow:none;display:flex;height:60px;justify-content:center;overflow:visible;width:60px}.m-web3ModalProviderBody__icon img{height:100%;width:100%}"]
}] }
];
/** @nocollapse */
Web3ModalComponent.ctorParameters = () => [
{ type: Web3ModalService }
];
Web3ModalComponent.propDecorators = {
title: [{ type: Input }],
description: [{ type: Input }],
descriptionGray: [{ type: Input }],
dismissText: [{ type: Input }]
};
if (false) {
/** @type {?} */
Web3ModalComponent.prototype.open;
/** @type {?} */
Web3ModalComponent.prototype.providers;
/**
* @type {?}
* @private
*/
Web3ModalComponent.prototype.openSubscription;
/**
* @type {?}
* @private
*/
Web3ModalComponent.prototype.providersSubscription;
/** @type {?} */
Web3ModalComponent.prototype.title;
/** @type {?} */
Web3ModalComponent.prototype.description;
/** @type {?} */
Web3ModalComponent.prototype.descriptionGray;
/** @type {?} */
Web3ModalComponent.prototype.dismissText;
/**
* @type {?}
* @private
*/
Web3ModalComponent.prototype.service;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modal/modal.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Modal {
constructor() {
this.allowClose = true;
this.hidden = true;
this.closed = new EventEmitter();
}
/**
* @param {?} value
* @return {?}
*/
set _hidden(value) {
this.hidden = value;
}
/**
* @param {?} value
* @return {?}
*/
set open(value) {
this.hidden = !value;
}
/**
* @param {?} event
* @return {?}
*/
close(event) {
if (!this.allowClose)
return;
this.hidden = !this.hidden;
this.closed.next(true);
event.stopPropagation();
}
}
Modal.decorators = [
{ type: Component, args: [{
selector: 'm-modal',
host: {
'[hidden]': 'hidden',
},
inputs: ['open', 'allowClose'],
outputs: ['closed'],
encapsulation: ViewEncapsulation.None,
template: "<div class=\"m-modal-bg\" (click)=\"close($event)\"></div>\n<div class=\"m-modal-container\">\n <ng-content></ng-content>\n</div>",
styles: ["m-modal .m-modal-bg{background-color:rgba(0,0,0,.8);cursor:pointer;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99999991}m-modal .m-modal-container{-webkit-overflow-scrolling:touch;border-radius:6px;box-sizing:border-box;display:block;font-family:Roboto,sans-serif;left:50%;margin:auto;max-height:98vh;max-width:100%;outline:0;overflow-y:auto;padding:32px;position:fixed;top:50%;transform:translate(-50%,-50%);width:800px;z-index:99999995}m-modal{bottom:0;height:100%;left:0;overflow:overlay;overflow:scroll;position:relative;right:0;top:0;width:100%}"]
}] }
];
if (false) {
/** @type {?} */
Modal.prototype.allowClose;
/** @type {?} */
Modal.prototype.hidden;
/** @type {?} */
Modal.prototype.closed;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/web3-modal/web3-modal.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Web3ModalModule {
}
Web3ModalModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [Modal, Web3ModalComponent],
exports: [Web3ModalComponent],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: dorgtech-web3modal-angular.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { Web3ModalComponent, Web3ModalModule, Web3ModalService, Modal as ɵa };
//# sourceMappingURL=dorgtech-web3modal-angular.js.map