some-shit
Version:
Web3Modal implementation for Angular
59 lines • 10.1 kB
JavaScript
import { Component, Input, ViewEncapsulation, } from '@angular/core';
import { Web3ModalService } from './web3-modal.service';
export 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 }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2ViMy1tb2RhbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiL1VzZXJzL2hyeWhvcmlpb3BhbmFzZW5rby9EZXNrdG9wL3NoaXQvd2ViM21vZGFsLWFuZ3VsYXIvcHJvamVjdHMvc29tZS1zaGl0L3NyYy8iLCJzb3VyY2VzIjpbImxpYi93ZWIzLW1vZGFsL3dlYjMtbW9kYWwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUdMLGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQVN4RCxNQUFNLE9BQU8sa0JBQWtCO0lBZTdCLFlBQW9CLE9BQXlCO1FBQXpCLFlBQU8sR0FBUCxPQUFPLENBQWtCO1FBZDdDLFNBQUksR0FBRyxLQUFLLENBQUM7UUFDYixjQUFTLEdBQTJCLEVBQUUsQ0FBQztRQUt0QixvQkFBZSxHQUFHLG1DQUFtQyxDQUFDO1FBTTlELGlDQUE0QixHQUFHLEtBQUssQ0FBQztJQUVFLENBQUM7SUFFakQsUUFBUTtRQUNOLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxTQUFTLENBQUM7WUFDeEQsSUFBSSxFQUFFLENBQUMsSUFBYSxFQUFFLEVBQUU7Z0JBQ3RCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1lBQ25CLENBQUM7U0FDRixDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMscUJBQXFCLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDO1lBQzVELElBQUksRUFBRSxDQUFDLFNBQWlDLEVBQUUsRUFBRTtnQkFDMUMsSUFBSSxDQUFDLG9CQUFvQjtvQkFDdkIsSUFBSSxDQUFDLDRCQUE0Qjt3QkFDakMsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsU0FBUyxDQUFDLENBQUM7Z0JBQ3pDLElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDO1lBQzdCLENBQUM7U0FDRixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNwQyxJQUFJLENBQUMscUJBQXFCLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDM0MsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFTyxxQkFBcUIsQ0FBQyxTQUFpQztRQUM3RCxPQUFPLFNBQVMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLEtBQUssVUFBVSxDQUFDLENBQUM7SUFDcEUsQ0FBQztJQUVPLHdCQUF3QjtRQUM5QixNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDOUMsQ0FBQzs7O1lBeERGLFNBQVMsU0FBQztnQkFDVCwrQ0FBK0M7Z0JBQy9DLFFBQVEsRUFBRSxjQUFjO2dCQUN4Qixpc0RBQXdDO2dCQUV4QyxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTs7YUFDdEM7OztZQVJRLGdCQUFnQjs7O29CQWtCdEIsS0FBSzswQkFDTCxLQUFLOzhCQUNMLEtBQUs7MEJBQ0wsS0FBSzsyQ0FDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgSVByb3ZpZGVyVXNlck9wdGlvbnMgfSBmcm9tICdAbWluZHNvcmcvd2ViM21vZGFsLXRzJztcbmltcG9ydCB7IFdlYjNNb2RhbFNlcnZpY2UgfSBmcm9tICcuL3dlYjMtbW9kYWwuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IGNvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ20td2ViMy1tb2RhbCcsXG4gIHRlbXBsYXRlVXJsOiAnd2ViMy1tb2RhbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3dlYjMtbW9kYWwuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgV2ViM01vZGFsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBvcGVuID0gZmFsc2U7XG4gIHByb3ZpZGVyczogSVByb3ZpZGVyVXNlck9wdGlvbnNbXSA9IFtdO1xuICBzaG93TWV0YW1hc2tEb3dubG9hZDogYm9vbGVhbjtcblxuICBwcml2YXRlIG9wZW5TdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcbiAgcHJpdmF0ZSBwcm92aWRlcnNTdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcbiAgcHJpdmF0ZSByZWFkb25seSBtZXRhbWFza1Nob3BVUkwgPSAnaHR0cHM6Ly9tZXRhbWFzay5pby9kb3dubG9hZC5odG1sJztcblxuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgQElucHV0KCkgZGVzY3JpcHRpb25HcmF5Pzogc3RyaW5nO1xuICBASW5wdXQoKSBkaXNtaXNzVGV4dD86IHN0cmluZztcbiAgQElucHV0KCkgcHJvbXB0TWV0YW1hc2tJZk5vdEluc3RhbGxlZCA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc2VydmljZTogV2ViM01vZGFsU2VydmljZSkge31cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLm9wZW5TdWJzY3JpcHRpb24gPSB0aGlzLnNlcnZpY2Uuc2hvdWxkT3Blbi5zdWJzY3JpYmUoe1xuICAgICAgbmV4dDogKG9wZW46IGJvb2xlYW4pID0+IHtcbiAgICAgICAgdGhpcy5vcGVuID0gb3BlbjtcbiAgICAgIH0sXG4gICAgfSk7XG5cbiAgICB0aGlzLnByb3ZpZGVyc1N1YnNjcmlwdGlvbiA9IHRoaXMuc2VydmljZS5wcm92aWRlcnMuc3Vic2NyaWJlKHtcbiAgICAgIG5leHQ6IChwcm92aWRlcnM6IElQcm92aWRlclVzZXJPcHRpb25zW10pID0+IHtcbiAgICAgICAgdGhpcy5zaG93TWV0YW1hc2tEb3dubG9hZCA9XG4gICAgICAgICAgdGhpcy5wcm9tcHRNZXRhbWFza0lmTm90SW5zdGFsbGVkICYmXG4gICAgICAgICAgIXRoaXMuaXNNZXRhbWFza0luUHJvdmlkZXJzKHByb3ZpZGVycyk7XG4gICAgICAgIHRoaXMucHJvdmlkZXJzID0gcHJvdmlkZXJzO1xuICAgICAgfSxcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMub3BlblN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIHRoaXMucHJvdmlkZXJzU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBjbG9zZSgpOiB2b2lkIHtcbiAgICB0aGlzLnNlcnZpY2UuY2xvc2UoKTtcbiAgfVxuXG4gIHByaXZhdGUgaXNNZXRhbWFza0luUHJvdmlkZXJzKHByb3ZpZGVyczogSVByb3ZpZGVyVXNlck9wdGlvbnNbXSk6IGJvb2xlYW4ge1xuICAgIHJldHVybiBwcm92aWRlcnMuc29tZSgocCkgPT4gcC5uYW1lLnRvTG93ZXJDYXNlKCkgPT09ICdtZXRhbWFzaycpO1xuICB9XG5cbiAgcHJpdmF0ZSBvcGVuTWV0YW1hc2tEb3dubG9hZFBhZ2UoKTogdm9pZCB7XG4gICAgd2luZG93Lm9wZW4odGhpcy5tZXRhbWFza1Nob3BVUkwsICdfYmxhbmsnKTtcbiAgfVxufVxuIl19