some-shit
Version:
Web3Modal implementation for Angular
175 lines (167 loc) • 9.86 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) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
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) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
class Web3ModalService {
constructor(configOptions) {
this.shouldOpen = new EventEmitter();
this.providers = new EventEmitter();
this.web3WalletConnector = new Web3WalletConnector(configOptions);
}
open() {
return __awaiter(this, void 0, void 0, function* () {
this.providers.next(this.web3WalletConnector.providers);
return yield new Promise((resolve, reject) => {
this.web3WalletConnector.providerController.on(CONNECT_EVENT, provider => {
resolve(provider);
});
this.web3WalletConnector.providerController.on(ERROR_EVENT, error => {
reject(error);
});
this.shouldOpen.next(true);
this.shouldOpen.pipe(take(1)).subscribe({
next: (open) => {
if (!open) {
reject('Dismissed modal');
}
}
});
}).finally(() => {
this.close();
});
});
}
setConfiguration(options) {
this.web3WalletConnector.setConfiguration(options);
}
clearCachedProvider() {
this.web3WalletConnector.providerController.clearCachedProvider();
}
setCachedProvider(id) {
this.web3WalletConnector.providerController.setCachedProvider(id);
}
close() {
this.shouldOpen.next(false);
}
}
Web3ModalService.decorators = [
{ type: Injectable }
];
Web3ModalService.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Optional }] }
];
class Web3ModalComponent {
constructor(service) {
this.service = service;
this.open = false;
this.providers = [];
this.metamaskShopURL = 'https://metamask.io/download.html';
this.promptMetamaskIfNotInstalled = false;
}
ngOnInit() {
this.openSubscription = this.service.shouldOpen.subscribe({
next: (open) => {
this.open = open;
},
});
this.providersSubscription = this.service.providers.subscribe({
next: (providers) => {
this.showMetamaskDownload =
this.promptMetamaskIfNotInstalled &&
!this.isMetamaskInProviders(providers);
this.providers = providers;
},
});
}
ngOnDestroy() {
this.openSubscription.unsubscribe();
this.providersSubscription.unsubscribe();
}
close() {
this.service.close();
}
isMetamaskInProviders(providers) {
return providers.some((p) => p.name.toLowerCase() === 'metamask');
}
openMetamaskDownloadPage() {
window.open(this.metamaskShopURL, '_blank');
}
}
Web3ModalComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line: component-selector
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 *ngIf=\"providers && showMetamaskDownload\"\n (click)=\"openMetamaskDownloadPage()\"\n >\n <div class=\"m-web3ModalProviderBody__icon\">\n <img src=\"metamask.svg\" alt=\"metamask.svg\" />\n </div>\n <div class=\"m-web3ModalProviderBody__name\">MetaMask</div>\n </div>\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%}"]
},] }
];
Web3ModalComponent.ctorParameters = () => [
{ type: Web3ModalService }
];
Web3ModalComponent.propDecorators = {
title: [{ type: Input }],
description: [{ type: Input }],
descriptionGray: [{ type: Input }],
dismissText: [{ type: Input }],
promptMetamaskIfNotInstalled: [{ type: Input }]
};
class Modal {
constructor() {
this.allowClose = true;
this.hidden = true;
this.closed = new EventEmitter();
}
set _hidden(value) {
this.hidden = value;
}
set open(value) {
this.hidden = !value;
}
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%}"]
},] }
];
class Web3ModalModule {
}
Web3ModalModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [Modal, Web3ModalComponent],
exports: [Web3ModalComponent],
},] }
];
/*
* Public API Surface of web3modal
*/
/**
* Generated bundle index. Do not edit.
*/
export { Web3ModalComponent, Web3ModalModule, Web3ModalService, Modal as ɵa };
//# sourceMappingURL=some-shit.js.map