🎨 Configure & execute prettier

.eslintrc.json

@@ -15,10 +15,7 @@
     },
     {
       "files": ["*.ts"],
-      "extends": [
-        "plugin:@nx/angular",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  printWidth: 120,
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  arrowParens: 'avoid'
+};

.vscode/extensions.json

@@ -1,7 +1,3 @@
 {
-  "recommendations": [
-    "nrwl.angular-console",
-    "esbenp.prettier-vscode",
-    "firsttris.vscode-jest-runner"
-  ]
+  "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode", "firsttris.vscode-jest-runner"]
 }

jest.config.ts

@@ -9,18 +9,15 @@ export default {
       'jest-preset-angular',
       {
         tsconfig: '<rootDir>/tsconfig.spec.json',
-        stringifyContentPathRegex: '\\.(html|svg)$',
-      },
-    ],
+        stringifyContentPathRegex: '\\.(html|svg)$'
+      }
+    ]
   },
   transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
   snapshotSerializers: [
     'jest-preset-angular/build/serializers/no-ng-attributes',
     'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ],
-  testMatch: [
-    '<rootDir>/src/**/__tests__/**/*.[jt]s?(x)',
-    '<rootDir>/src/**/*(*.)@(spec|test).[jt]s?(x)',
+    'jest-preset-angular/build/serializers/html-comment'
   ],
+  testMatch: ['<rootDir>/src/**/__tests__/**/*.[jt]s?(x)', '<rootDir>/src/**/*(*.)@(spec|test).[jt]s?(x)']
 };

package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "start": "nx serve",
     "build": "nx build",
-    "test": "nx test"
+    "test": "nx test",
+    "prettier:check": "prettier --check .",
+    "prettier:write": "prettier --write ."
   },
   "private": true,
   "dependencies": {

project.json

@@ -17,10 +17,7 @@
         "tsConfig": "./tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": ["./src/favicon.ico", "./src/assets"],
-        "styles": [
-          "node_modules/normalize.css/normalize.css",
-          "./src/styles.scss"
-        ],
+        "styles": ["node_modules/normalize.css/normalize.css", "./src/styles.scss"],
         "stylePreprocessorOptions": {
           "includePaths": ["src"]
         },

src/app/app.component.scss

@@ -11,10 +11,8 @@
   margin: 10dvh auto;
   padding: 60px 70px;
   border-radius: 8px;
-  box-shadow: 1px 2px 2px hsl(var(--shadow-color) / 0.2),
-    2px 4px 4px hsl(var(--shadow-color) / 0.2),
-    4px 8px 8px hsl(var(--shadow-color) / 0.2),
-    8px 16px 16px hsl(var(--shadow-color) / 0.2),
+  box-shadow: 1px 2px 2px hsl(var(--shadow-color) / 0.2), 2px 4px 4px hsl(var(--shadow-color) / 0.2),
+    4px 8px 8px hsl(var(--shadow-color) / 0.2), 8px 16px 16px hsl(var(--shadow-color) / 0.2),
     16px 32px 32px hsl(var(--shadow-color) / 0.2);
   overflow-y: auto;
 }

src/app/app.component.ts

@@ -2,13 +2,7 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { WINDOW } from '@ng-web-apis/common';
 import { Window } from '@keplr-wallet/types';
 import { COSMOS_HUB_CHAIN_ID, COSMOS_HUB_RPC } from './constants/cosmos-hub';
-import {
-  GasPrice,
-  MsgVoteEncodeObject,
-  QueryClient,
-  SigningStargateClient,
-  setupGovExtension,
-} from '@cosmjs/stargate';
+import { GasPrice, MsgVoteEncodeObject, QueryClient, SigningStargateClient, setupGovExtension } from '@cosmjs/stargate';
 import { connectComet } from '@cosmjs/tendermint-rpc';
 import { StepperComponent } from './components/stepper/stepper.component';
 import { ChainListComponent } from './components/chain-list/chain-list.component';
@@ -22,16 +16,11 @@ import { ProposalListComponent } from './components/proposal-list/proposal-list.
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [StepperComponent, ChainListComponent, ProposalListComponent],
+  imports: [StepperComponent, ChainListComponent, ProposalListComponent]
 })
 export class AppComponent {
   protected currentStepIdx = 0;
-  protected readonly steps: string[] = [
-    'Select a chain',
-    'Vote',
-    'Get confirmation',
-    'Finish',
-  ];
+  protected readonly steps: string[] = ['Select a chain', 'Vote', 'Get confirmation', 'Finish'];
   protected readonly chains = CHAIN_LIST;
 
   private readonly window = inject<Window>(WINDOW);
@@ -64,13 +53,9 @@ export class AppComponent {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       this.window.getOfflineSignerOnlyAmino!(COSMOS_HUB_CHAIN_ID);
 
-    const signingClient = await SigningStargateClient.connectWithSigner(
-      COSMOS_HUB_RPC,
-      offlineSigner,
-      {
-        gasPrice: GasPrice.fromString('0.025ucosm'),
-      }
-    );
+    const signingClient = await SigningStargateClient.connectWithSigner(COSMOS_HUB_RPC, offlineSigner, {
+      gasPrice: GasPrice.fromString('0.025ucosm')
+    });
 
     const voter = (await offlineSigner.getAccounts())[0].address;
     const messages: MsgVoteEncodeObject[] = [
@@ -79,17 +64,17 @@ export class AppComponent {
         value: {
           proposalId: BigInt(897),
           voter,
-          option: 1,
-        },
+          option: 1
+        }
       },
       {
         typeUrl: '/cosmos.gov.v1beta1.MsgVote',
         value: {
           proposalId: BigInt(899),
           voter,
-          option: 1,
-        },
-      },
+          option: 1
+        }
+      }
     ];
 
     await signingClient.signAndBroadcast(voter, messages, 'auto');

src/app/app.config.ts

@@ -1,5 +1,5 @@
 import { ApplicationConfig } from '@angular/core';
 
 export const appConfig: ApplicationConfig = {
-  providers: [],
+  providers: []
 };

src/app/components/chain-list/chain-list.component.ts

@@ -1,9 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  output,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import { ChainCardComponent } from './components/chain-card/chain-card.component';
 import { IChainInfoView } from '../../models/chain-info-view.model';
 
@@ -13,7 +8,7 @@ import { IChainInfoView } from '../../models/chain-info-view.model';
   templateUrl: './chain-list.component.html',
   styleUrl: './chain-list.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ChainCardComponent],
+  imports: [ChainCardComponent]
 })
 export class ChainListComponent {
   public readonly chains = input.required<IChainInfoView[]>();

src/app/components/chain-list/components/chain-card/chain-card.component.html

@@ -8,24 +8,13 @@
 
   <div class="description">{{ chain().description }}</div>
 
-  <div class="start-date">
-    Making blocks since {{ chain().startDate | date : 'MMMM d, y' }}
-  </div>
+  <div class="start-date">Making blocks since {{ chain().startDate | date : 'MMMM d, y' }}</div>
 </div>
 
-<div
-  class="keplr"
-  [class.not-installed]="!keplrService.isInstalled"
-  role="button"
-  (click)="onAddToKeplr($event)"
->
+<div class="keplr" [class.not-installed]="!keplrService.isInstalled" role="button" (click)="onAddToKeplr($event)">
   @if (isRegistered$ | async) { Added
 
-  <img
-    class="checkmark-circle"
-    src="assets/images/checkmark-circle.svg"
-    alt=""
-  />
+  <img class="checkmark-circle" src="assets/images/checkmark-circle.svg" alt="" />
   } @else { Add to Keplr
 
   <img class="arrow-right" src="assets/right-arrow.svg" alt="" />

src/app/components/chain-list/components/chain-card/chain-card.component.ts

@@ -1,12 +1,5 @@
 import { AsyncPipe, DatePipe } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnDestroy,
-  OnInit,
-  inject,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, inject, input } from '@angular/core';
 import { IChainInfoView } from '../../../../models/chain-info-view.model';
 import { KeplrService } from '../../../../services/keplr.service';
 import { Observable, Subject, filter, take, takeUntil } from 'rxjs';
@@ -17,7 +10,7 @@ import { Observable, Subject, filter, take, takeUntil } from 'rxjs';
   templateUrl: './chain-card.component.html',
   styleUrl: './chain-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [DatePipe, AsyncPipe],
+  imports: [DatePipe, AsyncPipe]
 })
 export class ChainCardComponent implements OnInit, OnDestroy {
   public readonly chain = input.required<IChainInfoView>();
@@ -29,9 +22,7 @@ export class ChainCardComponent implements OnInit, OnDestroy {
   private readonly destroy$ = new Subject<void>();
 
   public ngOnInit(): void {
-    this.isRegistered$ = this.keplrService.isChainRegistered(
-      this.chain().info.chainId
-    );
+    this.isRegistered$ = this.keplrService.isChainRegistered(this.chain().info.chainId);
   }
 
   public ngOnDestroy(): void {
@@ -45,9 +36,7 @@ export class ChainCardComponent implements OnInit, OnDestroy {
     this.isRegistered$
       .pipe(
         take(1),
-        filter(
-          (isRegistered) => !isRegistered && this.keplrService.isInstalled
-        ),
+        filter(isRegistered => !isRegistered && this.keplrService.isInstalled),
         takeUntil(this.destroy$)
       )
       .subscribe(() => this.keplrService.suggestChain(this.chain().info));

src/app/components/proposal-list/components/proposal-card/proposal-card.component.ts

@@ -5,6 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   selector: 'app-proposal-card',
   templateUrl: './proposal-card.component.html',
   styleUrl: './proposal-card.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProposalCardComponent {}

src/app/components/proposal-list/proposal-list.component.ts

@@ -7,6 +7,6 @@ import { ProposalCardComponent } from './components/proposal-card/proposal-card.
   templateUrl: './proposal-list.component.html',
   styleUrl: './proposal-list.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ProposalCardComponent],
+  imports: [ProposalCardComponent]
 })
 export class ProposalListComponent {}

src/app/components/stepper/components/step/components/step-info/step-info.component.ts

@@ -5,7 +5,7 @@ import { NgClass } from '@angular/common';
 const STATUS_TITLE: Record<StepStatus, string> = {
   [StepStatus.COMPLETED]: 'Completed',
   [StepStatus.IN_PROGRESS]: 'In Progress',
-  [StepStatus.PENDING]: 'Pending',
+  [StepStatus.PENDING]: 'Pending'
 };
 
 @Component({
@@ -14,7 +14,7 @@ const STATUS_TITLE: Record<StepStatus, string> = {
   templateUrl: './step-info.component.html',
   styleUrl: './step-info.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgClass],
+  imports: [NgClass]
 })
 export class StepInfoComponent {
   public readonly number = input.required<number>();

src/app/components/stepper/components/step/models/step-status.model.ts

@@ -1,5 +1,5 @@
 export enum StepStatus {
   COMPLETED = 'completed',
   IN_PROGRESS = 'in-progress',
-  PENDING = 'pending',
+  PENDING = 'pending'
 }

src/app/components/stepper/components/step/step.component.html

@@ -7,12 +7,7 @@
     </div>
   </div>
 
-  <app-step-info
-    class="step-info"
-    [number]="number()"
-    [title]="title()"
-    [status]="status()"
-  />
+  <app-step-info class="step-info" [number]="number()" [title]="title()" [status]="status()" />
 </div>
 
 @if (!last()) {

src/app/components/stepper/components/step/step.component.ts

@@ -1,9 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
 import { StepStatus } from './models/step-status.model';
 import { StepInfoComponent } from './components/step-info/step-info.component';
 
@@ -13,7 +8,7 @@ import { StepInfoComponent } from './components/step-info/step-info.component';
   templateUrl: './step.component.html',
   styleUrl: './step.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [StepInfoComponent],
+  imports: [StepInfoComponent]
 })
 export class StepComponent {
   @HostBinding('class.completed') protected get isCompleted(): boolean {

src/app/components/stepper/pipes/step-status.pipe.ts

@@ -3,7 +3,7 @@ import { StepStatus } from '../components/step/models/step-status.model';
 
 @Pipe({
   standalone: true,
-  name: 'stepStatus',
+  name: 'stepStatus'
 })
 export class StepStatusPipe implements PipeTransform {
   public transform(stepIdx: number, currentStepIdx: number): StepStatus {

src/app/components/stepper/stepper.component.ts

@@ -8,7 +8,7 @@ import { StepStatusPipe } from './pipes/step-status.pipe';
   templateUrl: './stepper.component.html',
   styleUrl: './stepper.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [StepComponent, StepStatusPipe],
+  imports: [StepComponent, StepStatusPipe]
 })
 export class StepperComponent {
   /** Starts from 0 */