feat: proposal list page, proposal details page, deposit form dialog and voting form dialog

projects/explorer/src/app/pages/proposals/proposal/proposal.component.html

@@ -2,6 +2,9 @@
   [proposal]="proposal$ | async"
   [proposalType]="proposalType$ | async"
   [deposits]="deposits$ | async"
+  [depositParams]="depositParams$ | async"
   [tally]="tally$ | async"
+  [tallyParams]="tallyParams$ | async"
   [votes]="votes$ | async"
+  [votingParams]="votingParams$ | async"
 ></view-proposal>

projects/explorer/src/app/pages/proposals/proposal/proposal.component.ts

@@ -6,6 +6,9 @@ import {
   InlineResponse20054Deposits,
   InlineResponse20052FinalTallyResult,
   InlineResponse20057Votes,
+  InlineResponse20051DepositParams,
+  InlineResponse20051TallyParams,
+  InlineResponse20051VotingParams,
 } from '@cosmos-client/core/esm/openapi';
 import { CosmosSDKService } from 'projects/explorer/src/app/models/cosmos-sdk.service';
 import { combineLatest, Observable, of } from 'rxjs';
@@ -20,8 +23,11 @@ export class ProposalComponent implements OnInit {
   proposal$: Observable<InlineResponse20052Proposals | undefined>;
   proposalType$: Observable<string | undefined>;
   deposits$: Observable<InlineResponse20054Deposits[] | undefined>;
+  depositParams$: Observable<InlineResponse20051DepositParams | undefined>;
   tally$: Observable<InlineResponse20052FinalTallyResult | undefined>;
+  tallyParams$: Observable<InlineResponse20051TallyParams | undefined>;
   votes$: Observable<InlineResponse20057Votes[] | undefined>;
+  votingParams$: Observable<InlineResponse20051VotingParams | undefined>;
 
   constructor(private route: ActivatedRoute, private cosmosSDK: CosmosSDKService) {
     const proposalID$ = this.route.params.pipe(map((params) => params.id));
@@ -53,6 +59,11 @@ export class ProposalComponent implements OnInit {
       }),
     );
 
+    this.depositParams$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.params(sdk.rest, 'deposit')),
+      map((result) => result.data.deposit_params),
+    );
+
     this.tally$ = combined$.pipe(
       mergeMap(([sdk, address]) => rest.gov.tallyresult(sdk.rest, address)),
       map((result) => result.data.tally!),
@@ -62,6 +73,15 @@ export class ProposalComponent implements OnInit {
       }),
     );
 
+    this.tallyParams$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.params(sdk.rest, 'tallying')),
+      map((result) => result.data.tally_params),
+      catchError((error) => {
+        console.error(error);
+        return of(undefined);
+      }),
+    );
+
     this.votes$ = combined$.pipe(
       mergeMap(([sdk, address]) => rest.gov.votes(sdk.rest, address)),
       map((result) => result.data.votes!),
@@ -70,6 +90,15 @@ export class ProposalComponent implements OnInit {
         return of(undefined);
       }),
     );
+
+    this.votingParams$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.params(sdk.rest, 'voting')),
+      map((result) => result.data.voting_params),
+      catchError((error) => {
+        console.error(error);
+        return of(undefined);
+      }),
+    );
   }
 
   ngOnInit(): void {}

projects/explorer/src/app/views/proposals/proposal/proposal.component.html

@@ -56,7 +56,11 @@ <h3>Details</h3>
     <h3>Description</h3>
     <mat-card class="mb-4">
       <mat-card-content>
-        <span class="break-all">{{ content.description }}</span>
+        <mat-list>
+          <mat-list-item>
+            <span class="break-all">{{ content.description }}</span>
+          </mat-list-item>
+        </mat-list>
       </mat-card-content>
     </mat-card>
   </ng-container>
@@ -93,57 +97,99 @@ <h3>Votes</h3>
     </mat-card-content>
   </mat-card>
 
+  <mat-card class="mb-4">
+    <mat-card-content>
+      <mat-list>
+        <mat-list-item>
+          <span>Voting Period: </span>
+          <span class="flex-auto"></span>
+          <span>{{ votingParams?.voting_period }}</span>
+        </mat-list-item>
+        <mat-divider [inset]="true"></mat-divider>
+
+        <mat-list-item>
+          <span>Quorum: </span>
+          <span class="flex-auto"></span>
+          <span>{{ tallyParams?.quorum?.substring(0, 5) }}</span>
+        </mat-list-item>
+        <mat-divider [inset]="true"></mat-divider>
+
+        <mat-list-item>
+          <span>Threshold: </span>
+          <span class="flex-auto"></span>
+          <span>{{ tallyParams?.threshold?.substring(0, 5) }}</span>
+        </mat-list-item>
+        <mat-divider [inset]="true"></mat-divider>
+
+        <mat-list-item>
+          <span>Veto Threshold: </span>
+          <span class="flex-auto"></span>
+          <span>{{ tallyParams?.veto_threshold?.substring(0, 5) }}</span>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
+
   <h3>deposits</h3>
-  <h4>Total</h4>
   <mat-card class="mb-4">
     <mat-card-content>
       <mat-list>
         <ng-container *ngIf="!proposal?.total_deposit?.length">
-          <span>No Deposit</span>
+          <mat-list-item>
+            <span>No Deposit</span>
+          </mat-list-item>
         </ng-container>
         <ng-container *ngFor="let total of proposal?.total_deposit">
           <mat-list-item>
-            <span>{{ total.amount }}</span>
+            <span>Total Deposit:</span>
             <span class="flex-auto"></span>
-            <span>{{ total.denom }}</span>
+            <span>{{ total.amount }} {{ total.denom }}</span>
+          </mat-list-item>
+        </ng-container>
+        <mat-divider [inset]="true"></mat-divider>
+        <ng-container *ngFor="let min of depositParams?.min_deposit">
+          <mat-list-item>
+            <span>Minimum Deposit:</span>
+            <span class="flex-auto"></span>
+            <span>{{ min.amount }} {{ min.denom }}</span>
           </mat-list-item>
-          <mat-divider [inset]="true"></mat-divider>
         </ng-container>
+        <mat-divider [inset]="true"></mat-divider>
+        <mat-list-item>
+          <span>Max Deposit Period:</span>
+          <span class="flex-auto"></span>
+          <span>{{ depositParams?.max_deposit_period }}</span>
+        </mat-list-item>
       </mat-list>
     </mat-card-content>
   </mat-card>
 
-  <ng-container *ngFor="let deposit of deposits">
-    <h4>Depositor: {{ deposit.depositor }}</h4>
-    <mat-card class="mb-4">
-      <mat-list>
-        <ng-container *ngIf="!deposit.amount?.length">
-          <span>No Deposit</span>
-        </ng-container>
+  <mat-card class="mb-4">
+    <mat-list>
+      <ng-container *ngFor="let deposit of deposits">
         <ng-container *ngFor="let amount of deposit.amount">
           <mat-list-item>
-            <span>{{ amount.amount }}</span>
+            <span>{{ deposit.depositor }}:</span>
             <span class="flex-auto"></span>
-            <span>{{ amount.denom }}</span>
+            <span>{{ amount.amount }} {{ amount.denom }}</span>
           </mat-list-item>
-          <mat-divider [inset]="true"></mat-divider>
         </ng-container>
-      </mat-list>
-    </mat-card>
-  </ng-container>
+        <mat-divider [inset]="true"></mat-divider>
+      </ng-container>
+    </mat-list>
+  </mat-card>
 
-  <ng-container *ngFor="let vote of votes">
-    <h3>Vote</h3>
-    <h4>voter: {{ vote.voter }}</h4>
-    <mat-card>
-      <mat-list>
+  <h3>Vote</h3>
+  <mat-card>
+    <mat-list>
+      <ng-container *ngFor="let vote of votes">
         <mat-list-item>
-          <span>Select: </span>
+          <span class="break-all">{{ vote.voter }}: </span>
           <span class="flex-auto"></span>
-          <span>{{ vote.option }}</span>
+          <span>{{ vote.option?.replace('VOTE_OPTION_', '') }}</span>
         </mat-list-item>
         <mat-divider [inset]="true"></mat-divider>
-      </mat-list>
-    </mat-card>
-  </ng-container>
+      </ng-container>
+    </mat-list>
+  </mat-card>
 </ng-template>

projects/explorer/src/app/views/proposals/proposal/proposal.component.ts

@@ -6,6 +6,9 @@ import {
   InlineResponse20054Deposits,
   InlineResponse20052FinalTallyResult,
   InlineResponse20057Votes,
+  InlineResponse20051DepositParams,
+  InlineResponse20051TallyParams,
+  InlineResponse20051VotingParams,
 } from '@cosmos-client/core/esm/openapi';
 
 @Component({
@@ -21,9 +24,15 @@ export class ProposalComponent implements OnInit {
   @Input()
   deposits?: InlineResponse20054Deposits[] | null;
   @Input()
+  depositParams?: InlineResponse20051DepositParams | null;
+  @Input()
   tally?: InlineResponse20052FinalTallyResult | null;
   @Input()
+  tallyParams?: InlineResponse20051TallyParams | null;
+  @Input()
   votes?: InlineResponse20057Votes[] | null;
+  @Input()
+  votingParams?: InlineResponse20051VotingParams | null;
 
   constructor() {}
 

projects/portal/src/app/app.module.ts

@@ -5,6 +5,8 @@ import { AppDelegateFormDialogModule } from './pages/dialogs/delegate/delegate-f
 import { AppDelegateMenuDialogModule } from './pages/dialogs/delegate/delegate-menu-dialog/delegate-menu-dialog.module';
 import { AppRedelegateFormDialogModule } from './pages/dialogs/delegate/redelegate-form-dialog/redelegate-form-dialog.module';
 import { AppUndelegateFormDialogModule } from './pages/dialogs/delegate/undelegate-form-dialog/undelegate-form-dialog.module';
+import { AppDepositFormDialogModule } from './pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.module';
+import { AppVoteFormDialogModule } from './pages/dialogs/vote/vote-form-dialog/vote-form-dialog.module';
 import { reducers, metaReducers } from './reducers';
 import { TxFeeConfirmDialogModule } from './views/cosmos/tx-fee-confirm-dialog/tx-fee-confirm-dialog.module';
 import { ConnectWalletCompletedDialogModule } from './views/dialogs/wallets/connect-wallet-completed-dialog/connect-wallet-completed-dialog.module';
@@ -64,6 +66,8 @@ import { LoadingDialogModule } from 'ng-loading-dialog';
     AppDelegateMenuDialogModule,
     AppRedelegateFormDialogModule,
     AppUndelegateFormDialogModule,
+    AppVoteFormDialogModule,
+    AppDepositFormDialogModule,
   ],
   providers: [],
   bootstrap: [AppComponent],