2 |
--------------------------------------------------------------------------------
/src/app/modules/shared/types/user.ts:
--------------------------------------------------------------------------------
1 | export class User {
2 | constructor(init?: PartialBeacon: {{data.beacon}}
3 | Validator: {{data.validator}}
4 |
2 |
8 |
--------------------------------------------------------------------------------
/src/app/modules/shared/pipes/pretty-json.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 |
3 | @Pipe({
4 | name: 'prettyjson'
5 | })
6 | export class PrettyjsonPipe implements PipeTransform {
7 | transform(value: any, ...args: any[]): any {
8 | return JSON.stringify(value, null, 2)
9 | .replace(/ /g, ' ')
10 | .replace(/\n/g, '
3 | arrow_back Go back to home
6 |
7 | 404 - Page not found
4 |oops... we can't find the page you were looking for.
5 |'); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/app/modules/shared/services/extensions.ts: -------------------------------------------------------------------------------- 1 | declare global { 2 | interface Date { 3 | toDateTimeString(this: Date): string; 4 | } 5 | } 6 | 7 | Date.prototype.toDateTimeString = function(): string { 8 | const d = this; 9 | return `${d.getMonth()}-${d.getDate()}-${d.getFullYear()}-${d.getHours()}-${d.getMinutes()}-${d.getSeconds()}`; 10 | }; 11 | 12 | export class extensions {} 13 | -------------------------------------------------------------------------------- /src/styles/utilities/_common.scss: -------------------------------------------------------------------------------- 1 | .bg-dotted { 2 | background: url("/assets/images/dots.png"), 3 | linear-gradient(90deg, #7467ef -19.83%, #ada5f6 189.85%); 4 | background-repeat: no-repeat; 5 | background-size: 100%; 6 | } 7 | 8 | .min-w-sm { 9 | min-width: 110px; 10 | } 11 | 12 | .truncate { 13 | white-space: nowrap; 14 | overflow: hidden; 15 | text-overflow: ellipsis; 16 | } 17 | -------------------------------------------------------------------------------- /src/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin media($width) { 2 | @media screen and (max-width: $width) { 3 | @content; 4 | } 5 | } 6 | 7 | @mixin keyframeMaker($name) { 8 | @keyframes #{$name} { 9 | @content; 10 | } 11 | @-webkit-keyframes #{$name} { 12 | @content; 13 | } 14 | @-o-keyframes #{$name} { 15 | @content; 16 | } 17 | @-moz-keyframes #{$name} { 18 | @content; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## What's Changed 2 | 3 | **WEB UI IS STILL DEPRECATED AND WILL BE FROZEN UNTIL NEXT STEPS ARE DETERMINED** 4 | 5 | - updates to fix vulnerabilities 6 | - removal of hex to base64 as APIs update from https://github.com/prysmaticlabs/prysm-web-ui/pull/249, depends on https://github.com/prysmaticlabs/prysm/pull/13191 7 | 8 | **Full Changelog**: https://github.com/prysmaticlabs/prysm-web-ui/compare/v2.0.4...v2.0.5 -------------------------------------------------------------------------------- /src/styles/utilities/_animations.scss: -------------------------------------------------------------------------------- 1 | .fade-in { 2 | @include keyframeMaker(fade-in) { 3 | from { 4 | opacity: 0; 5 | } 6 | to { 7 | opacity: 1; 8 | } 9 | } 10 | animation: fade-in 1s #{bezier()}; 11 | } 12 | 13 | @keyframes spin { 14 | 0% {transform: rotate(0)} 15 | 100% {transform: rotate(360deg)} 16 | } 17 | 18 | .spin { 19 | animation: spin 3s infinite linear; 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "baseUrl": "./", 7 | "types": ["node"], 8 | "strict": true 9 | }, 10 | "files": [ 11 | "src/main.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /src/app/modules/core/services/environmenter.service.ts: -------------------------------------------------------------------------------- 1 | import { Inject, Injectable } from '@angular/core'; 2 | import { ENVIRONMENT, IEnvironment } from '../../../../environments/token'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class EnvironmenterService { 8 | constructor( 9 | @Inject(ENVIRONMENT) private environment: IEnvironment, 10 | ) {} 11 | public readonly env = this.environment; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/modules/wallet/components/wallet-help/wallet-help.component.html: -------------------------------------------------------------------------------- 1 |
9 |
10 |
2 |
--------------------------------------------------------------------------------
/src/app/modules/core/services/events.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { ActivatedRouteSnapshot, Event, NavigationEnd } from '@angular/router';
3 | import { BehaviorSubject } from 'rxjs';
4 |
5 | @Injectable({
6 | providedIn: 'root',
7 | })
8 | export class EventsService {
9 | routeChanged$ = new BehaviorSubject
3 | Uploading files...
4 |
5 |
6 | Hang in there while we upload your files...
7 |
8 |
9 |
11 |
3 |
6 | {{title}}
4 | {{url}}
5 |
7 |
14 |
12 |
13 |
2 |
5 |
6 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/app/modules/core/utils/simple-store.ts:
--------------------------------------------------------------------------------
1 | import { BehaviorSubject } from 'rxjs';
2 |
3 | export class Store
2 | Creating an HD Wallet
3 |
4 |
5 | {{mnemonic$ | async}}
6 |
7 |
8 | Write down the above mnemonic offline, and keep it secret! It is the only way you can recover your wallet if you lose it and anyone who gains access to it will be able to steal all your keys.
9 |
--------------------------------------------------------------------------------
/src/app/modules/shared/pipes/format-epoch.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 | import { FAR_FUTURE_EPOCH } from 'src/app/modules/core/constants';
3 |
4 | /*
5 | * Formats an epoch, such as 0 to 'genesis' and FAR_FUTURE_EPOCH to 'n/a'
6 | */
7 | @Pipe({name: 'epoch'})
8 | export class EpochPipe implements PipeTransform {
9 | transform(n: number): string {
10 | if (!n) {
11 | return 'n/a';
12 | }
13 | if (n === 0) {
14 | return 'genesis';
15 | } else if (n.toString() === FAR_FUTURE_EPOCH) {
16 | return 'n/a';
17 | }
18 | return n.toString();
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/modules/core/utils/range.spec.ts:
--------------------------------------------------------------------------------
1 | import range from './range';
2 |
3 | describe('range', () => {
4 | it('should create range of numbers upper limit exclusive', () => {
5 | const arr = range(0, 2);
6 | expect(arr.length).toEqual(2);
7 | expect(arr).toEqual([0, 1]);
8 | });
9 |
10 | it('should create an empty array if range is 0, 0', () => {
11 | const arr = range(0, 0);
12 | expect(arr.length).toEqual(0);
13 | });
14 |
15 | it('should throw error if end < start', () => {
16 | const badCall = () => {
17 | range(0, -100);
18 | };
19 | expect(badCall).toThrowError();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/src/app/modules/onboarding/components/wallet-directory-form/wallet-directory-form.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { FormGroup } from '@angular/forms';
3 |
4 | @Component({
5 | selector: 'app-wallet-directory-form',
6 | templateUrl: './wallet-directory-form.component.html',
7 | })
8 | export class WalletDirectoryFormComponent {
9 | @Input() formGroup: FormGroup | null = null;
10 | linux = '$HOME/.eth2validators/prysm-wallet-v2';
11 | macos = '$HOME/Library/Eth2Validators/prysm-wallet-v2';
12 | windows = '%LOCALAPPDATA%\\Eth2Validators\\prysm-wallet-v2';
13 | constructor() { }
14 | }
15 |
--------------------------------------------------------------------------------
/src/styles/views/_wallet.scss:
--------------------------------------------------------------------------------
1 | .search-bar {
2 | width: 700px;
3 | }
4 |
5 | .mat-raised-button.large-btn {
6 | margin-top: -20px;
7 | padding: 8px 16px;
8 | font-size: 16px;
9 | }
10 |
11 | .table-container {
12 | min-height: 300px;
13 | }
14 |
15 | .table-loading-shade {
16 | height: 100%;
17 | min-height: 300px;
18 | position: absolute;
19 | top: 0;
20 | left: 0;
21 | right: 0;
22 | background: rgba(0, 0, 0, 0.15);
23 | z-index: 1;
24 | display: flex;
25 | align-items: center;
26 | justify-content: center;
27 | }
28 |
29 | @media (max-width: 640px) {
30 | .search-bar {
31 | width: 100%;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/modules/shared/pipes/ordinal.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 |
3 | const ordinals: string[] = ['th', 'st', 'nd', 'rd'];
4 |
5 | /*
6 | * Append ordinal to number (e.g. '1st' position)
7 | * Usage:
8 | * value | ordinal
9 | * Example:
10 | * {{ 23 | ordinal}}
11 | * formats to: '23rd'
12 | * Example:
13 | * {{ 23 | ordinal:false}}
14 | * formats to: 'rd'
15 | */
16 | @Pipe({name: 'ordinal'})
17 | export class OrdinalPipe implements PipeTransform {
18 | transform(n: number): string {
19 | const v = n % 100;
20 | return n + (ordinals[(v - 20) % 10] || ordinals[v] || ordinals[0]);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/modules/shared/pipes/filename.pipe.spec.ts:
--------------------------------------------------------------------------------
1 | import { FileNamePipe } from "./filename.pipe";
2 |
3 | describe('FileNamePipe', () => {
4 | it('properly truncates a filename when setting max length to 22', () => {
5 | const pipe = new FileNamePipe();
6 | const original = 'keystore-m_12381_3600_0_0_0-1636471397.json';
7 | expect(pipe.transform(original,22)).toEqual('keystor...6471397.json');
8 | });
9 |
10 | it('properly returns a filename if it is too short', () => {
11 | const pipe = new FileNamePipe();
12 | const original = 'key.json';
13 | expect(pipe.transform(original,22)).toEqual('key.json');
14 | });
15 | });
--------------------------------------------------------------------------------
/src/app/modules/core/constants.ts:
--------------------------------------------------------------------------------
1 | export const GWEI_PER_ETHER = 1000000000;
2 | export const FAR_FUTURE_EPOCH = '18446744073709551615';
3 | export const MILLISECONDS_PER_SLOT = 12000;
4 | export const SLOTS_PER_EPOCH = 32;
5 | export const MILLISECONDS_PER_EPOCH = SLOTS_PER_EPOCH * MILLISECONDS_PER_SLOT;
6 | export const SECONDS_PER_EPOCH = MILLISECONDS_PER_EPOCH / 1000;
7 | export const DIALOG_WIDTH = '600px';
8 | export const BEACONCHAIN_EXPLORER = 'https://beaconcha.in';
9 | export const WS_RECONNECT_INTERVAL = 3000;
10 | export const GEO_COORDINATES_API = 'http://ip-api.com/batch';
11 |
12 | export const LANDING_URL = 'dashboard';
13 | export const ONBOARDING_URL = 'onboarding';
14 |
--------------------------------------------------------------------------------
/src/app/modules/shared/pipes/ordinal.pipe.spec.ts:
--------------------------------------------------------------------------------
1 | import { OrdinalPipe } from './ordinal.pipe';
2 |
3 | describe('OrdinalPipe', () => {
4 | it('transforms unique cases such as 1, 2, and 3 into ordinal form', () => {
5 | const pipe = new OrdinalPipe();
6 | expect(pipe.transform(1)).toEqual('1st');
7 | expect(pipe.transform(2)).toEqual('2nd');
8 | expect(pipe.transform(3)).toEqual('3rd');
9 | });
10 | it('transforms other numbers into ordinal form', () => {
11 | const pipe = new OrdinalPipe();
12 | expect(pipe.transform(20)).toEqual('20th');
13 | expect(pipe.transform(25)).toEqual('25th');
14 | expect(pipe.transform(110)).toEqual('110th');
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
2 |
16 |
--------------------------------------------------------------------------------
/src/app/proto/validator/accounts/v2/web_api_keymanager-api.ts:
--------------------------------------------------------------------------------
1 | /* Keymanager API standard */
2 |
3 |
4 | export interface DeleteAccountsRequest {
5 | /**
6 | * Public keys to delete.
7 | */
8 | pubkeys: string[];
9 | }
10 |
11 | export interface DeleteAccountsResponse {
12 | data: DeleteAccountsData[],
13 | slashing_protection: string
14 | }
15 |
16 | export interface DeleteAccountsData {
17 | status: string,
18 | message: string
19 | }
20 |
21 | export interface ListFeeRecipientResponse {
22 | data: FeeRecipientData
23 | }
24 |
25 | export interface FeeRecipientData {
26 | pubkey: string,
27 | ethaddress: string
28 | }
29 |
30 | export interface SetFeeRecipientRequest {
31 | ethaddress: string
32 | }
--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 | import { browser, logging } from 'protractor';
3 |
4 | describe('workspace-project App', () => {
5 | let page: AppPage;
6 |
7 | beforeEach(() => {
8 | page = new AppPage();
9 | });
10 |
11 | it('should display welcome message', () => {
12 | page.navigateTo();
13 | expect(page.getTitleText()).toEqual('prysm-web-ui app is running!');
14 | });
15 |
16 | afterEach(async () => {
17 | // Assert that there are no errors emitted from the browser
18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 | expect(logs).not.toContain(jasmine.objectContaining({
20 | level: logging.Level.SEVERE,
21 | } as logging.Entry));
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/app/modules/shared/components/create-accounts-form/create-accounts-form.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { FormGroup } from '@angular/forms';
3 |
4 | @Component({
5 | selector: 'app-create-accounts-form',
6 | templateUrl: './create-accounts-form.component.html',
7 | })
8 | export class CreateAccountsFormComponent {
9 | @Input() formGroup: FormGroup | null = null;
10 | @Input() title = 'Create new validator accounts';
11 | @Input() subtitle = `Generate new accounts in your wallet and obtain the deposit
12 | data you need to activate them into the deposit contract via the
13 | eth2 launchpad`;
14 | constructor() { }
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/modules/onboarding/components/choose-wallet-kind/choose-wallet-kind.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { WalletKind, WalletSelection } from '../../types/wallet';
3 | import { Subject } from 'rxjs';
4 |
5 | @Component({
6 | selector: 'app-choose-wallet-kind',
7 | templateUrl: './choose-wallet-kind.component.html',
8 | })
9 | export class ChooseWalletKindComponent {
10 | @Input() walletSelections: WalletSelection[] | null = null;
11 | @Input() selectedWallet$: Subject
3 |
15 |
4 |
8 |
9 |
11 |
12 |
14 |
7 | 
8 |
9 |
8 |
10 |
12 |
2 |
14 |
--------------------------------------------------------------------------------
/src/app/modules/onboarding/components/wallet-directory-form/wallet-directory-form.component.html:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/src/app/modules/wallet/components/account-selections/account-selections.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 | ![error]()
5 | 
6 |
10 |
7 |
9 |
11 |
13 |
2 |
21 |
--------------------------------------------------------------------------------
/src/app/modules/dashboard/components/beacon-node-status/beacon-node-status.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { BeaconNodeService } from 'src/app/modules/core/services/beacon-node.service';
3 |
4 | @Component({
5 | selector: 'app-beacon-node-status',
6 | templateUrl: './beacon-node-status.component.html',
7 | styles: [
8 | ]
9 | })
10 | export class BeaconNodeStatusComponent {
11 | constructor(
12 | private beaconNodeService: BeaconNodeService,
13 | ) { }
14 | endpoint$ = this.beaconNodeService.nodeEndpoint$;
15 | connected$ = this.beaconNodeService.connected$;
16 | syncing$ = this.beaconNodeService.syncing$;
17 | chainHead$ = this.beaconNodeService.chainHead$;
18 | latestClockSlotPoll$ = this.beaconNodeService.latestClockSlotPoll$;
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/modules/shared/loading/loading.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 |
3 | import { LoadingComponent } from './loading.component';
4 |
5 | describe('LoadingComponent', () => {
6 | let component: LoadingComponent;
7 | let fixture: ComponentFixture
3 | Selected {{selection?.selected.length}} Accounts
4 |
5 |
6 |
7 |
8 | {{account.publicKey | slice:0:16}}...
9 |
10 |
11 |
12 |
13 |
19 |
20 |
2 |
--------------------------------------------------------------------------------
/src/app/modules/shared/components/import-dropzone/import-dropzone.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 |
3 | import { ImportDropzoneComponent } from './import-dropzone.component';
4 |
5 | describe('ImportDropzoneComponent', () => {
6 | let component: ImportDropzoneComponent;
7 | let fixture: ComponentFixture
3 |
6 | Version
4 | {{GitInfo.name}}
5 |
7 |
10 | Release date
8 | {{GitInfo.published_at|date}}
9 |
11 |
14 | Description
12 | {{GitInfo.body|slice:0:400}}
13 |
15 |
17 | Read More
18 |
19 |
20 |
5 |
30 |
6 |
23 | 7 | YOUR WALLET KIND 8 |
9 |
10 | {{info[kind].name}}
11 |
12 | 13 | {{info[kind].description}} 14 |
15 |
16 |
17 |
20 |
21 |
22 |
24 | 
28 |
29 |
28 |
2 | Selected {{accountList.selectedOptions.selected.length}} Accounts
3 |
4 |
2 |
8 |
3 | The Prysm UI is marked for DEPRECATION and will be FROZEN until next steps are determined.
4 | Existing features will continue to function as is, but newer features will not be added until a strategy is determined.
5 | Please check our web UI documentation for more details 6 |
7 | 5 | Please check our web UI documentation for more details 6 |
9 |
14 |
10 | Warning! You are running the web UI in development mode, meaning it will show **fake** data for testing purposes. Do not run real validators this way. If you want to run the web UI with your real Prysm node and validator, follow our instructions here.
11 |
12 |
13 | {b} : {c} ({d}%)' 19 | }, 20 | legend: { 21 | x: 'center', 22 | y: 'bottom', 23 | data: ['item1', 'item2', 'item3', 'item4'] 24 | }, 25 | calculable: true, 26 | series: [ 27 | { 28 | name: 'area', 29 | type: 'pie', 30 | radius: [30, 110], 31 | roseType: 'area', 32 | data: [ 33 | { value: 10, name: 'item1' }, 34 | { value: 30, name: 'item2' }, 35 | { value: 45, name: 'item3' }, 36 | { value: 15, name: 'item4' }, 37 | ] 38 | } 39 | ] 40 | }; 41 | } 42 | -------------------------------------------------------------------------------- /src/app/modules/wallet/components/files-and-directories/files-and-directories.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | import { SharedModule } from 'src/app/modules/shared/shared.module'; 3 | 4 | import { FilesAndDirectoriesComponent } from './files-and-directories.component'; 5 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 6 | 7 | describe('FilesAndDirectoriesComponent', () => { 8 | let component: FilesAndDirectoriesComponent; 9 | let fixture: ComponentFixture
3 |
18 |
4 | Latest Software Updates
5 |
6 |
7 |
17 |
8 |
15 |
16 |
19 |
29 |
20 |
27 |
21 |
23 | 24 | Please wait whie we retrieve the information 25 |
26 |
2 |
35 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
2 | import { NavigationEnd, Router } from '@angular/router';
3 | import { Subject } from 'rxjs';
4 | import { filter, takeUntil, tap } from 'rxjs/operators';
5 | import { EventsService } from 'src/app/modules/core/services/events.service';
6 | import { EnvironmenterService } from './modules/core/services/environmenter.service';
7 |
8 |
9 | @Component({
10 | selector: 'app-root',
11 | templateUrl: './app.component.html',
12 | })
13 | export class AppComponent implements OnInit, OnDestroy {
14 | title = 'prysm-web-ui';
15 | constructor(
16 | private router: Router,
17 | private eventsService: EventsService,
18 | private environmenterService: EnvironmenterService
19 | ) { }
20 | private destroyed$$ = new Subject
4 |
11 |
5 | Wallet Information
6 |
7 | 8 | Information about your current wallet and its configuration options 9 |
10 |
12 |
34 |
13 |
15 |
16 |
17 |
18 |
19 | help
20 | Help
21 |
22 |
24 |
25 |
26 | folder
27 | Files
28 |
29 |
31 |
32 |
33 |
2 |
28 |
--------------------------------------------------------------------------------
/src/app/modules/wallet/components/account-actions/account-actions.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 | import { MockService } from 'ng-mocks';
3 | import { of } from 'rxjs';
4 | import { WalletService } from 'src/app/modules/core/services/wallet.service';
5 | import { SharedModule } from 'src/app/modules/shared/shared.module';
6 | import { WalletResponse } from 'src/app/proto/validator/accounts/v2/web_api';
7 |
8 | import { AccountActionsComponent } from './account-actions.component';
9 |
10 | describe('AccountActionsComponent', () => {
11 | let component: AccountActionsComponent;
12 | let fixture: ComponentFixture
3 |
6 |
10 |
11 | {{uploadedFiles[0].name || 'invalid file'}}
12 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
21 | Not adding these files:
22 |
26 |
27 | -
23 |
- {{file}} 24 |
4 |
21 |
30 |
31 |
5 |
20 |
6 | Back Up Selected Account(s)
7 |
8 |
9 | We'll convert your selected accounts into individual, EIP-2335
10 | compliant, password protected files compressed into a zip file
11 |
12 |
13 |
22 |
23 |
27 |
28 |
29 | The internal representation Prysm uses, however, is quite different. For optimization purposes, we store a single EIP-2335 keystore called all-accounts.keystore.json which stores your private keys encrypted by a strong password.
This file is still compliant with EIP-2335. 20 | `, 21 | }, 22 | { 23 | title: 'Is my wallet password stored?', 24 | content: 'We do not store your wallet password', 25 | }, 26 | { 27 | title: 'How can I recover my wallet?', 28 | content: 'Currently, you cannot recover an HD wallet from the web interface. If you wish to recover your wallet, you can use Prysm from the command line to accomplish this goal. You can see our detailed documentation on recovering HD wallets here', 29 | }, 30 | ]; 31 | } 32 | -------------------------------------------------------------------------------- /src/app/modules/onboarding/components/choose-wallet-kind/choose-wallet-kind.component.html: -------------------------------------------------------------------------------- 1 |
2 |
42 |
--------------------------------------------------------------------------------
/src/app/modules/onboarding/components/wallet-directory-form/wallet-directory-form.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 | import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4 | import { MockService } from 'ng-mocks';
5 | import { WalletService } from 'src/app/modules/core/services/wallet.service';
6 | import { SharedModule } from 'src/app/modules/shared/shared.module';
7 |
8 | import { WalletDirectoryFormComponent } from './wallet-directory-form.component';
9 |
10 | describe('WalletDirectoryFormComponent', () => {
11 | let component: WalletDirectoryFormComponent;
12 | let fixture: ComponentFixture
3 |
9 | Create a Prysm Wallet
4 |
5 | To get started, you will need to create a new wallet in Prysm
to hold 6 | your validator keys 7 |
8 | to hold 6 | your validator keys 7 |
11 |
41 |
17 |
40 |
18 | ![]()
19 |
20 |
21 |
39 | 22 | {{selection.name}} 23 |
24 |25 | {{selection.description}} 26 |
27 |28 | 33 | 37 |
38 |{{title}}
2 |
3 |
11 |
13 |
14 |
15 | {{alert.title}}
16 |
17 |
18 | {{alert.description}}
19 |
20 |
21 |
26 |
27 |
28 |
29 | 4 | {{content}} 5 |
6 |
7 | For more information and common error solutions, you can look at our Documentation for the web-ui
8 | or create an issue on Github
9 |
22 |
25 | {{alert.message}}
23 |{{alert.message | json}}
24 |
2 |
49 |
--------------------------------------------------------------------------------
/src/app/modules/core/core.module.ts:
--------------------------------------------------------------------------------
1 | import { ErrorHandler, NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { GlobalErrorHandler } from './services/global-error-handler';
5 |
6 | import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
7 | import { ENVIRONMENT } from '../../../environments/token';
8 | import { environment } from '../../../environments/environment';
9 | import { JwtInterceptor } from './interceptors/jwt.interceptor';
10 | import { MockInterceptor } from './interceptors/mock.interceptor';
11 |
12 | import { GlobalDialogComponent } from './components/global-dialog/global-dialog.component';
13 |
14 | import { GlobalDialogService } from './components/global-dialog/global-dialog.service';
15 | import { SharedModule } from '../shared/shared.module';
16 |
17 | const components = [
18 | GlobalDialogComponent
19 | ];
20 |
21 | const commonProviders = [
22 | {
23 | // processes all errors
24 | provide: ErrorHandler,
25 | useClass: GlobalErrorHandler,
26 | },
27 | GlobalDialogService,
28 | { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
29 | { provide: ENVIRONMENT, useValue: environment },
30 | ];
31 |
32 | const mockProviders = [
33 | { provide: HTTP_INTERCEPTORS, useClass: MockInterceptor, multi: true }
34 | ];
35 |
36 | const prysmModules = [
37 | SharedModule
38 | ];
39 |
40 | @NgModule({
41 | declarations: [
42 | ...components
43 | ],
44 | imports: [
45 | CommonModule,
46 | HttpClientModule,
47 | ... prysmModules
48 | ],
49 | exports: [
50 | ...components
51 | ],
52 | providers: [
53 | ... commonProviders,
54 | ... environment.mockInterceptor ? mockProviders : []
55 | ],
56 | })
57 | export class CoreModule {}
58 |
--------------------------------------------------------------------------------
/src/app/modules/dashboard/pages/gains-and-losses/gains-and-losses.component.html:
--------------------------------------------------------------------------------
1 |
4 |
11 |
12 |
5 | Your Validator Accounts List
6 |
7 | 8 | Full list of all validating public keys managed by your Prysm wallet 9 |
10 |
19 |
20 | Filter rows by pubkey, validator index, or name
21 |
26 | search
27 |
28 |
30 |
31 |
32 |
46 |
47 |
48 |
33 |
35 |
36 |
41 |
2 |
44 |
--------------------------------------------------------------------------------
/src/app/modules/core/validators/password.validator.ts:
--------------------------------------------------------------------------------
1 | import { AbstractControl, Validators } from '@angular/forms';
2 | export class StaticPasswordValidator {
3 | static strongPassword = Validators.pattern(
4 | /(?=.*[A-Za-z])(?=.*\d)(?=.*[^A-Za-z\d]).{8,}/
5 | );
6 | static matchingPasswordConfirmation(control: AbstractControl): void {
7 | const password: string = control.get('password')?.value;
8 | const confirmPassword: string = control.get('passwordConfirmation')?.value;
9 | if (password !== confirmPassword) {
10 | control
11 | .get('passwordConfirmation')
12 | ?.setErrors({ passwordMismatch: true });
13 | }
14 | }
15 | }
16 | // PasswordValidator contains form validation for strong
17 | // password protection in the Prysm web UI.
18 | export class PasswordValidator {
19 | constructor() {}
20 |
21 | errorMessage = {
22 | required: 'Password is required',
23 | minLength: 'Password must be at least 8 characters',
24 | pattern: 'Requires at least 1 letter, number, and special character',
25 | passwordMismatch: 'Passwords do not match',
26 | };
27 |
28 | // Ensures a password has at least:
29 | // 1 letter (?=.*[A-Za-z])
30 | // 1 number (?=.*\d)
31 | // 1 of any other character (?=.*[^A-Za-z\d])
32 | // with at least 8 total characters .{8,}
33 | strongPassword = Validators.pattern(
34 | /(?=.*[A-Za-z])(?=.*\d)(?=.*[^A-Za-z\d]).{8,}/
35 | );
36 |
37 | // Ensure password and password confirmation field values match.
38 | matchingPasswordConfirmation(control: AbstractControl): void {
39 | const password: string = control.get('password')?.value;
40 | const confirmPassword: string = control.get('passwordConfirmation')?.value;
41 | if (password !== confirmPassword) {
42 | control
43 | .get('passwordConfirmation')
44 | ?.setErrors({ passwordMismatch: true });
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/app/modules/system-process/components/double-bar-chart/double-bar-chart.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-double-bar-chart',
5 | templateUrl: './double-bar-chart.component.html',
6 | })
7 | export class DoubleBarChartComponent {
8 | options = {
9 | grid: {
10 | top: '10%',
11 | bottom: '10%',
12 | // left: '5%',
13 | right: '5%'
14 | },
15 | legend: {
16 | show: false
17 | },
18 | color: [
19 | '#7467ef',
20 | '#ff9e43',
21 | ],
22 | barGap: 0,
23 | barMaxWidth: '64px',
24 | tooltip: {},
25 | dataset: {
26 | source: [
27 | ['Month', 'Website', 'App'],
28 | ['Jan', 2200, 1200],
29 | ['Feb', 800, 500],
30 | ['Mar', 700, 1350],
31 | ['Apr', 1500, 1250],
32 | ['May', 2450, 450],
33 | ['June', 1700, 1250]
34 | ]
35 | },
36 | xAxis: {
37 | type: 'category',
38 | axisLine: {
39 | show: false
40 | },
41 | splitLine: {
42 | show: false
43 | },
44 | axisTick: {
45 | show: false
46 | },
47 | axisLabel: {
48 | color: 'white',
49 | fontSize: 13,
50 | fontFamily: 'roboto'
51 | }
52 | },
53 | yAxis: {
54 | axisLine: {
55 | show: false
56 | },
57 | axisTick: {
58 | show: false
59 | },
60 | splitLine: {
61 | // show: false
62 | lineStyle: {
63 | color: 'white',
64 | opacity: 0.15
65 | }
66 | },
67 | axisLabel: {
68 | color: 'white',
69 | fontSize: 13,
70 | fontFamily: 'roboto'
71 | }
72 | },
73 | // Declare several bar series, each will be mapped
74 | // to a column of dataset.source by default.
75 | series: [{ type: 'bar' }, { type: 'bar' }]
76 | };
77 | }
78 |
--------------------------------------------------------------------------------
/src/app/modules/shared/components/import-accounts-form/import-accounts-form.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { HttpClientTestingModule } from '@angular/common/http/testing';
2 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
3 | import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
4 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
5 | import { NgxFileDropModule } from 'ngx-file-drop';
6 | import { EnvironmenterService } from 'src/app/modules/core/services/environmenter.service';
7 | import { SharedModule } from '../../shared.module';
8 |
9 | import { ImportAccountsFormComponent } from './import-accounts-form.component';
10 |
11 | describe('ImportAccountsFormComponent', () => {
12 | let component: ImportAccountsFormComponent;
13 | let fixture: ComponentFixture
4 |
43 |
5 |
6 |
23 |
24 |
28 |
42 |
7 | 
21 |
22 |
8 |
17 |
9 | Your Prysm web dashboard
10 |
11 | 12 | Manage your Prysm validator and beacon node, analyze your 13 | validator performance, and control your wallet all from a simple 14 | web interface 15 |
16 |
21 |
3 |
49 |
4 |
18 |
5 |
11 | help_outline
12 |
13 |
14 | Wallet Directory
6 |
15 | {{wallet?.wallet_path}}
16 |
17 |
19 |
33 |
20 |
26 | help_outline
27 |
28 |
29 | Accounts Keystore File
21 |
30 | {{wallet?.wallet_path}}/direct/accounts/all-accounts.keystore.json
31 |
32 |
34 |
48 |
35 |
41 | help_outline
42 |
43 |
44 | Encrypted Seed File
36 |
45 | {{wallet?.wallet_path}}/derived/seed.encrypted.json
46 |
47 |
2 |
32 |
33 |
--------------------------------------------------------------------------------
/src/app/modules/dashboard/dashboard.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule } from '@angular/router';
4 |
5 | import { SharedModule } from '../../modules/shared/shared.module';
6 | import { DashboardComponent } from './dashboard.component';
7 | import { GainsAndLossesComponent } from './pages/gains-and-losses/gains-and-losses.component';
8 | import { ValidatorPerformanceListComponent } from './components/validator-performance-list/validator-performance-list.component';
9 | import { SidebarComponent } from './components/sidebar/sidebar.component';
10 | import { SidebarExpandableLinkComponent } from './components/sidebar-expandable-link/sidebar-expandable-link.component';
11 | import { BeaconNodeStatusComponent } from './components/beacon-node-status/beacon-node-status.component';
12 | import { ValidatorPerformanceSummaryComponent } from './components/validator-performance-summary/validator-performance-summary.component';
13 | import { VersionComponent } from './components/version/version.component';
14 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
15 | import { LatestGistFeatureComponent } from './components/latest-gist-feature/latest-gist-feature.component';
16 | import { GitInfoComponent } from './components/latest-gist-feature/templates/git-info/git-info.component';
17 |
18 | @NgModule({
19 | declarations: [
20 | DashboardComponent,
21 | GainsAndLossesComponent,
22 | ValidatorPerformanceListComponent,
23 | SidebarComponent,
24 | SidebarExpandableLinkComponent,
25 | BeaconNodeStatusComponent,
26 | ValidatorPerformanceSummaryComponent,
27 | VersionComponent,
28 | LatestGistFeatureComponent,
29 | GitInfoComponent,
30 | ],
31 | imports: [
32 | CommonModule,
33 | BrowserAnimationsModule,
34 | SharedModule.forRoot(),
35 | RouterModule
36 | ],
37 | })
38 | export class DashboardModule {}
39 |
--------------------------------------------------------------------------------
/src/app/modules/onboarding/components/generate-mnemonic/generate-mnemonic.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed, inject, fakeAsync, waitForAsync } from '@angular/core/testing';
2 |
3 | import { GenerateMnemonicComponent } from './generate-mnemonic.component';
4 | import { SharedModule } from 'src/app/modules/shared/shared.module';
5 | import { WalletService } from 'src/app/modules/core/services/wallet.service';
6 | import { of } from 'rxjs';
7 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
8 |
9 | describe('GenerateMnemonicComponent', () => {
10 | let walletService: WalletService;
11 | const spy = jasmine.createSpyObj('WalletService', ['generateMnemonic$']);
12 |
13 | let component: GenerateMnemonicComponent;
14 | let fixture: ComponentFixture
3 |
18 |
30 |
31 |
4 |
17 |
5 |
10 |
6 | Import slashing protection data? (recommended)*
7 | only for previously-used keystores 8 |
9 | 7 | only for previously-used keystores 8 |
11 |
12 | Yes
13 | No
14 |
15 |
16 | Upload
19 | your slashing protection file to protect your keystore(s). To read more about
20 | how to obtain this file, see our documentation portal
21 |
24 | here
25 |
26 |
27 |
2 |
--------------------------------------------------------------------------------
4 |
11 |
5 | Your Prysm Process' Logs
6 |
7 | 8 | Stream of logs from both the beacon node and validator client 9 |
10 |
12 |
47 |
13 |
17 |
18 |
19 |
45 |
46 | Log Percentages
20 |
21 |
28 |
22 |
24 |
25 | {{metrics.percentInfo}}% Info Logs
26 |
27 |
29 |
36 |
30 |
32 |
33 | {{metrics.percentWarn}}% Warn Logs
34 |
35 |
37 |
44 |
38 |
40 |
41 | {{metrics.percentError}}% Error Logs
42 |
43 |