@bhayward93/web3modal-angular
Version:
Web3Modal implementation for Angular
61 lines • 17.8 kB
JavaScript
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { Web3ModalService } from './web3-modal.service';
import * as i0 from "@angular/core";
import * as i1 from "./web3-modal.service";
import * as i2 from "@angular/common";
import * as i3 from "../modal/modal.component";
import * as i4 from "./web3-modal-metamask-logo.component";
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');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Web3ModalComponent, deps: [{ token: i1.Web3ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: Web3ModalComponent, selector: "m-web3-modal", inputs: { title: "title", description: "description", descriptionGray: "descriptionGray", dismissText: "dismissText", promptMetamaskIfNotInstalled: "promptMetamaskIfNotInstalled" }, ngImport: i0, 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--custom\">\n <m-web3-modal-metamask-logo></m-web3-modal-metamask-logo>\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", styles: [".m-web3Modal{position:relative;display:block;width:100%;margin:auto;box-sizing:border-box;background-color:#fff}@media screen and (max-width: 540px){.m-web3Modal{flex:1;display:flex;flex-direction:column;justify-content:space-between;border-radius:0;margin:0}}.m-web3Modal__header{padding:40px 50px 0}.m-web3ModalHeader__title{font-size:30px;font-weight:800;margin:0;color:#4f4f50}.m-web3ModalHeader__text{margin:0;font-weight:600;line-height:22px;font-size:16px;color:#4f4f50}.m-web3ModalHeader__description{display:flex;flex-direction:column;justify-content:center;min-height:70px}.m-web3ModalHeader__text--gray{margin:0;color:#7d7d82}.m-web3Modal__footer{height:100px;margin-top:-40px;display:flex;padding:0 50px;flex-direction:column;justify-content:center}@media screen and (max-width: 768px){.m-web3Modal__footer{margin-top:-20px}}.m-web3ModalFooter__text{text-align:center;font-size:17px;font-weight:600;margin:0;cursor:pointer;color:#7d7d82}.m-web3Modal__body{padding:20px 50px;max-height:420px;overflow-y:auto}.m-web3ModalBody__provider{display:flex;justify-content:space-between;flex-wrap:wrap}@media screen and (max-width: 540px){.m-web3ModalBody__provider{justify-content:center}}.m-web3ModalProvider__body{display:flex;justify-content:center;align-items:center;flex-direction:column;cursor:pointer;width:194px;height:165px;margin-bottom:20px;background-color:#fff;border:1px solid #dce2e4}.m-web3ModalProviderBody__name{margin-top:12px;font-weight:600;font-size:15px;color:#4f4f50}.m-web3ModalProviderBody__icon,.m-web3ModalProviderBody__icon--custom svg{width:60px;height:60px;display:flex;border-radius:50%;overflow:visible;box-shadow:none;justify-content:center;align-items:center}.m-web3ModalProviderBody__icon img,.m-web3ModalProviderBody__icon m-web3-modal-metamask-logo,.m-web3ModalProviderBody__icon--custom svg img,.m-web3ModalProviderBody__icon--custom svg m-web3-modal-metamask-logo{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.Modal, selector: "m-modal", inputs: ["open", "allowClose"], outputs: ["closed"] }, { kind: "component", type: i4.Web3ModalMetamaskLogoComponent, selector: "m-web3-modal-metamask-logo" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Web3ModalComponent, decorators: [{
type: Component,
args: [{ selector: 'm-web3-modal', encapsulation: ViewEncapsulation.None, 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--custom\">\n <m-web3-modal-metamask-logo></m-web3-modal-metamask-logo>\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", styles: [".m-web3Modal{position:relative;display:block;width:100%;margin:auto;box-sizing:border-box;background-color:#fff}@media screen and (max-width: 540px){.m-web3Modal{flex:1;display:flex;flex-direction:column;justify-content:space-between;border-radius:0;margin:0}}.m-web3Modal__header{padding:40px 50px 0}.m-web3ModalHeader__title{font-size:30px;font-weight:800;margin:0;color:#4f4f50}.m-web3ModalHeader__text{margin:0;font-weight:600;line-height:22px;font-size:16px;color:#4f4f50}.m-web3ModalHeader__description{display:flex;flex-direction:column;justify-content:center;min-height:70px}.m-web3ModalHeader__text--gray{margin:0;color:#7d7d82}.m-web3Modal__footer{height:100px;margin-top:-40px;display:flex;padding:0 50px;flex-direction:column;justify-content:center}@media screen and (max-width: 768px){.m-web3Modal__footer{margin-top:-20px}}.m-web3ModalFooter__text{text-align:center;font-size:17px;font-weight:600;margin:0;cursor:pointer;color:#7d7d82}.m-web3Modal__body{padding:20px 50px;max-height:420px;overflow-y:auto}.m-web3ModalBody__provider{display:flex;justify-content:space-between;flex-wrap:wrap}@media screen and (max-width: 540px){.m-web3ModalBody__provider{justify-content:center}}.m-web3ModalProvider__body{display:flex;justify-content:center;align-items:center;flex-direction:column;cursor:pointer;width:194px;height:165px;margin-bottom:20px;background-color:#fff;border:1px solid #dce2e4}.m-web3ModalProviderBody__name{margin-top:12px;font-weight:600;font-size:15px;color:#4f4f50}.m-web3ModalProviderBody__icon,.m-web3ModalProviderBody__icon--custom svg{width:60px;height:60px;display:flex;border-radius:50%;overflow:visible;box-shadow:none;justify-content:center;align-items:center}.m-web3ModalProviderBody__icon img,.m-web3ModalProviderBody__icon m-web3-modal-metamask-logo,.m-web3ModalProviderBody__icon--custom svg img,.m-web3ModalProviderBody__icon--custom svg m-web3-modal-metamask-logo{width:100%;height:100%}\n"] }]
}], ctorParameters: () => [{ type: i1.Web3ModalService }], propDecorators: { title: [{
type: Input
}], description: [{
type: Input
}], descriptionGray: [{
type: Input
}], dismissText: [{
type: Input
}], promptMetamaskIfNotInstalled: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2ViMy1tb2RhbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93ZWIzbW9kYWwvc3JjL2xpYi93ZWIzLW1vZGFsL3dlYjMtbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2ViM21vZGFsL3NyYy9saWIvd2ViMy1tb2RhbC93ZWIzLW1vZGFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFxQixpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUd2RixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQzs7Ozs7O0FBUXhELE1BQU0sT0FBTyxrQkFBa0I7SUFlN0IsWUFBb0IsT0FBeUI7UUFBekIsWUFBTyxHQUFQLE9BQU8sQ0FBa0I7UUFkN0MsU0FBSSxHQUFHLEtBQUssQ0FBQztRQUNiLGNBQVMsR0FBMkIsRUFBRSxDQUFDO1FBS3RCLG9CQUFlLEdBQUcsbUNBQW1DLENBQUM7UUFNOUQsaUNBQTRCLEdBQUcsS0FBSyxDQUFDO0lBRUUsQ0FBQztJQUVqRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQztZQUN4RCxJQUFJLEVBQUUsQ0FBQyxJQUFhLEVBQUUsRUFBRTtnQkFDdEIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7WUFDbkIsQ0FBQztTQUNGLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxxQkFBcUIsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUM7WUFDNUQsSUFBSSxFQUFFLENBQUMsU0FBaUMsRUFBRSxFQUFFO2dCQUMxQyxJQUFJLENBQUMsb0JBQW9CO29CQUN2QixJQUFJLENBQUMsNEJBQTRCO3dCQUNqQyxDQUFDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxTQUFTLENBQUMsQ0FBQztnQkFDekMsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUM7WUFDN0IsQ0FBQztTQUNGLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3BDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUMzQyxDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVPLHFCQUFxQixDQUFDLFNBQWlDO1FBQzdELE9BQU8sU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsS0FBSyxVQUFVLENBQUMsQ0FBQztJQUNwRSxDQUFDO0lBRU8sd0JBQXdCO1FBQzlCLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxRQUFRLENBQUMsQ0FBQztJQUM5QyxDQUFDOytHQWpEVSxrQkFBa0I7bUdBQWxCLGtCQUFrQiwwT0NYL0IscXNEQW9EQTs7NEZEekNhLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDRSxjQUFjLGlCQUdULGlCQUFpQixDQUFDLElBQUk7cUZBVzVCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyw0QkFBNEI7c0JBQXBDLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgSVByb3ZpZGVyVXNlck9wdGlvbnMgfSBmcm9tICcuLi93ZWIzbW9kYWwtdHMvc3JjJztcbmltcG9ydCB7IFdlYjNNb2RhbFNlcnZpY2UgfSBmcm9tICcuL3dlYjMtbW9kYWwuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ20td2ViMy1tb2RhbCcsXG4gIHRlbXBsYXRlVXJsOiAnd2ViMy1tb2RhbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3dlYjMtbW9kYWwuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgV2ViM01vZGFsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBvcGVuID0gZmFsc2U7XG4gIHByb3ZpZGVyczogSVByb3ZpZGVyVXNlck9wdGlvbnNbXSA9IFtdO1xuICBzaG93TWV0YW1hc2tEb3dubG9hZDogYm9vbGVhbjtcblxuICBwcml2YXRlIG9wZW5TdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcbiAgcHJpdmF0ZSBwcm92aWRlcnNTdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcbiAgcHJpdmF0ZSByZWFkb25seSBtZXRhbWFza1Nob3BVUkwgPSAnaHR0cHM6Ly9tZXRhbWFzay5pby9kb3dubG9hZC5odG1sJztcblxuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgQElucHV0KCkgZGVzY3JpcHRpb25HcmF5Pzogc3RyaW5nO1xuICBASW5wdXQoKSBkaXNtaXNzVGV4dD86IHN0cmluZztcbiAgQElucHV0KCkgcHJvbXB0TWV0YW1hc2tJZk5vdEluc3RhbGxlZCA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc2VydmljZTogV2ViM01vZGFsU2VydmljZSkge31cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLm9wZW5TdWJzY3JpcHRpb24gPSB0aGlzLnNlcnZpY2Uuc2hvdWxkT3Blbi5zdWJzY3JpYmUoe1xuICAgICAgbmV4dDogKG9wZW46IGJvb2xlYW4pID0+IHtcbiAgICAgICAgdGhpcy5vcGVuID0gb3BlbjtcbiAgICAgIH0sXG4gICAgfSk7XG5cbiAgICB0aGlzLnByb3ZpZGVyc1N1YnNjcmlwdGlvbiA9IHRoaXMuc2VydmljZS5wcm92aWRlcnMuc3Vic2NyaWJlKHtcbiAgICAgIG5leHQ6IChwcm92aWRlcnM6IElQcm92aWRlclVzZXJPcHRpb25zW10pID0+IHtcbiAgICAgICAgdGhpcy5zaG93TWV0YW1hc2tEb3dubG9hZCA9XG4gICAgICAgICAgdGhpcy5wcm9tcHRNZXRhbWFza0lmTm90SW5zdGFsbGVkICYmXG4gICAgICAgICAgIXRoaXMuaXNNZXRhbWFza0luUHJvdmlkZXJzKHByb3ZpZGVycyk7XG4gICAgICAgIHRoaXMucHJvdmlkZXJzID0gcHJvdmlkZXJzO1xuICAgICAgfSxcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMub3BlblN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIHRoaXMucHJvdmlkZXJzU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBjbG9zZSgpOiB2b2lkIHtcbiAgICB0aGlzLnNlcnZpY2UuY2xvc2UoKTtcbiAgfVxuXG4gIHByaXZhdGUgaXNNZXRhbWFza0luUHJvdmlkZXJzKHByb3ZpZGVyczogSVByb3ZpZGVyVXNlck9wdGlvbnNbXSk6IGJvb2xlYW4ge1xuICAgIHJldHVybiBwcm92aWRlcnMuc29tZSgocCkgPT4gcC5uYW1lLnRvTG93ZXJDYXNlKCkgPT09ICdtZXRhbWFzaycpO1xuICB9XG5cbiAgcHJpdmF0ZSBvcGVuTWV0YW1hc2tEb3dubG9hZFBhZ2UoKTogdm9pZCB7XG4gICAgd2luZG93Lm9wZW4odGhpcy5tZXRhbWFza1Nob3BVUkwsICdfYmxhbmsnKTtcbiAgfVxufVxuIiwiPG0tbW9kYWwgW29wZW5dPVwib3BlblwiIChjbG9zZWQpPVwiY2xvc2UoKVwiPlxuICA8ZGl2IGNsYXNzPVwibS13ZWIzTW9kYWxcIj5cbiAgICA8ZGl2IGNsYXNzPVwibS13ZWIzTW9kYWxfX2hlYWRlclwiPlxuICAgICAgPGgzIGNsYXNzPVwibS13ZWIzTW9kYWxIZWFkZXJfX3RpdGxlXCI+XG4gICAgICAgIHt7IHRpdGxlIH19XG4gICAgICA8L2gzPlxuICAgICAgPGRpdiBjbGFzcz1cIm0td2ViM01vZGFsSGVhZGVyX19kZXNjcmlwdGlvblwiPlxuICAgICAgICA8cCBjbGFzcz1cIm0td2ViM01vZGFsSGVhZGVyX190ZXh0XCI+XG4gICAgICAgICAge3sgZGVzY3JpcHRpb24gfX1cbiAgICAgICAgPC9wPlxuICAgICAgICA8cFxuICAgICAgICAgIGNsYXNzPVwibS13ZWIzTW9kYWxIZWFkZXJfX3RleHQtLWdyYXkgbS13ZWIzTW9kYWxIZWFkZXJfX3RleHRcIlxuICAgICAgICA+XG4gICAgICAgICAge3sgZGVzY3JpcHRpb25HcmF5IH19XG4gICAgICAgIDwvcD5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJtLXdlYjNNb2RhbF9fYm9keVwiPlxuICAgICAgPGRpdiBjbGFzcz1cIm0td2ViM01vZGFsQm9keV9fcHJvdmlkZXJcIj5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNsYXNzPVwibS13ZWIzTW9kYWxQcm92aWRlcl9fYm9keVwiXG4gICAgICAgICAgKm5nSWY9XCJwcm92aWRlcnMgJiYgc2hvd01ldGFtYXNrRG93bmxvYWRcIlxuICAgICAgICAgIChjbGljayk9XCJvcGVuTWV0YW1hc2tEb3dubG9hZFBhZ2UoKVwiXG4gICAgICAgID5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwibS13ZWIzTW9kYWxQcm92aWRlckJvZHlfX2ljb24tLWN1c3RvbVwiPlxuICAgICAgICAgICAgPG0td2ViMy1tb2RhbC1tZXRhbWFzay1sb2dvPjwvbS13ZWIzLW1vZGFsLW1ldGFtYXNrLWxvZ28+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cIm0td2ViM01vZGFsUHJvdmlkZXJCb2R5X19uYW1lXCI+TWV0YU1hc2s8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzcz1cIm0td2ViM01vZGFsUHJvdmlkZXJfX2JvZHlcIlxuICAgICAgICAgICpuZ0Zvcj1cImxldCBwcm92aWRlciBvZiBwcm92aWRlcnNcIlxuICAgICAgICAgIChjbGljayk9XCJwcm92aWRlci5vbkNsaWNrKClcIlxuICAgICAgICA+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cIm0td2ViM01vZGFsUHJvdmlkZXJCb2R5X19pY29uXCI+XG4gICAgICAgICAgICA8aW1nIFtzcmNdPVwicHJvdmlkZXIubG9nb1wiIFthbHRdPVwicHJvdmlkZXIubG9nb1wiIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cIm0td2ViM01vZGFsUHJvdmlkZXJCb2R5X19uYW1lXCI+XG4gICAgICAgICAgICB7eyBwcm92aWRlci5uYW1lIH19XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cIm0td2ViM01vZGFsX19mb290ZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJtLXdlYjNNb2RhbEZvb3Rlcl9fZGVzY3JpcHRpb25cIj5cbiAgICAgICAgPHAgY2xhc3M9XCJtLXdlYjNNb2RhbEZvb3Rlcl9fdGV4dFwiIChjbGljayk9XCJjbG9zZSgpXCI+XG4gICAgICAgICAge3sgZGlzbWlzc1RleHQgfX1cbiAgICAgICAgPC9wPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9tLW1vZGFsPlxuIl19