fix typecheck

apps/web-nym/src/screens/params/hooks.ts

@@ -2,10 +2,12 @@ import * as R from 'ramda';
 import { useCallback, useState } from 'react';
 import chainConfig from '@/chainConfig';
 import { ParamsQuery, useParamsQuery } from '@/graphql/types/general_types';
-import { DistributionParams, MintParams, SlashingParams, StakingParams, GovParams } from '@/models';
+import { DistributionParams, MintParams, SlashingParams, StakingParams } from '@/models';
+import numeral from 'numeral';
 
-import type { ParamsState } from '@/screens/params/types';
 import { formatToken } from '@/utils/format_token';
+import type { ParamsState } from './types';
+import GovParams from '../../models/gov_params';
 
 const { primaryTokenUnit } = chainConfig();
 
@@ -100,16 +102,20 @@ const formatGov = (data: ParamsQuery) => {
   if (data.govParams.length) {
     const govParamsRaw = GovParams.fromJson(data?.govParams?.[0] ?? {});
     return {
-      quorum: govParamsRaw?.params?.quorum ?? '0',
-      threshold: govParamsRaw?.params?.threshold ?? '0',
+      quorum: numeral(numeral(govParamsRaw?.params?.quorum).format('0.[00]')).value() ?? 0,
+      // quorum: govParamsRaw?.params?.quorum ?? '0',
+      // threshold: govParamsRaw?.params?.threshold ?? '0',
+      threshold: numeral(numeral(govParamsRaw?.params?.threshold).format('0.[00]')).value() ?? 0,
+
       minDeposit:
         formatToken(
           govParamsRaw?.params?.minDeposit?.[0]?.amount ?? 0,
           govParamsRaw?.params?.minDeposit?.[0]?.denom ?? primaryTokenUnit
         ) ?? 0,
       votingPeriod: govParamsRaw?.params?.votingPeriod ?? 0,
       burnVoteVeto: govParamsRaw?.params?.burnVoteVeto ?? false,
-      vetoThreshold: govParamsRaw?.params?.vetoThreshold ?? '0',
+      vetoThreshold:
+        numeral(numeral(govParamsRaw?.params?.vetoThreshold).format('0.[00]')).value() ?? 0,
       maxDepositPeriod: govParamsRaw?.params?.maxDepositPeriod ?? 0,
       minInitialDepositRatio: govParamsRaw?.params?.minInitialDepositRatio ?? '',
       burnProposalDepositPrevote: govParamsRaw?.params?.burnProposalDepositPrevote ?? false,

apps/web-nym/src/screens/params/types.ts

@@ -31,15 +31,12 @@ export interface Distribution {
 }
 
 export interface Gov {
-  quorum: string;
-  threshold: string;
-  minDeposit: Array<{
-    denom: string;
-    amount: string;
-  }>;
+  quorum: number;
+  threshold: number;
+  minDeposit: TokenUnit;
   votingPeriod: number;
   burnVoteVeto: boolean;
-  vetoThreshold: string;
+  vetoThreshold: number;
   maxDepositPeriod: number;
   minInitialDepositRatio: string;
   burnProposalDepositPrevote: boolean;

apps/web-nym/src/screens/params/utils.tsx

@@ -1,7 +1,7 @@
-import type { Distribution, Gov, Minting, Slashing, Staking } from '@/screens/params/types';
 import { nanoToSeconds, secondsToDays } from '@/utils/time';
 import type { TFunction } from '@/hooks/useAppTranslation';
 import numeral from 'numeral';
+import type { Distribution, Minting, Slashing, Staking, Gov } from './types';
 
 const convertBySeconds = (seconds: number, t: TFunction) => {
   const SECONDS_IN_DAY = 86400;

apps/web-nym/src/screens/proposal_details/hooks.ts

@@ -0,0 +1,95 @@
+import { useRouter } from 'next/router';
+import * as R from 'ramda';
+import { useCallback, useState } from 'react';
+import { ProposalDetailsQuery, useProposalDetailsQuery } from '@/graphql/types/general_types';
+import type { ProposalState } from './types';
+
+// =========================
+// overview
+// =========================
+const formatOverview = (data: ProposalDetailsQuery) => {
+  const DEFAULT_TIME = '0001-01-01T00:00:00';
+  let votingStartTime = data?.proposal?.[0]?.votingStartTime ?? DEFAULT_TIME;
+  votingStartTime = votingStartTime === DEFAULT_TIME ? '' : votingStartTime;
+  let votingEndTime = data?.proposal?.[0]?.votingEndTime ?? DEFAULT_TIME;
+  votingEndTime = votingEndTime === DEFAULT_TIME ? '' : votingEndTime;
+
+  const overview = {
+    proposer: data?.proposal?.[0]?.proposer ?? '',
+    content: data?.proposal?.[0]?.content ?? '',
+    title: data?.proposal?.[0]?.title ?? '',
+    id: data?.proposal?.[0]?.proposalId ?? '',
+    description: data?.proposal?.[0]?.description ?? '',
+    status: data?.proposal?.[0]?.status ?? '',
+    submitTime: data?.proposal?.[0]?.submitTime ?? '',
+    depositEndTime: data?.proposal?.[0]?.depositEndTime ?? '',
+    votingStartTime,
+    votingEndTime,
+  };
+
+  return overview;
+};
+
+// ==========================
+// parsers
+// ==========================
+const formatProposalQuery = (data: ProposalDetailsQuery) => {
+  const stateChange: Partial<ProposalState> = {
+    loading: false,
+  };
+
+  if (!data.proposal.length) {
+    stateChange.exists = false;
+    return stateChange;
+  }
+
+  stateChange.overview = formatOverview(data);
+
+  return stateChange;
+};
+
+export const useProposalDetails = () => {
+  const router = useRouter();
+  const [state, setState] = useState<ProposalState>({
+    loading: true,
+    exists: true,
+    overview: {
+      proposer: '',
+      content: {
+        recipient: '',
+        amount: [],
+      },
+      title: '',
+      id: 0,
+      description: '',
+      status: '',
+      submitTime: '',
+      depositEndTime: '',
+      votingStartTime: '',
+      votingEndTime: '',
+    },
+  });
+
+  const handleSetState = useCallback((stateChange: (prevState: ProposalState) => ProposalState) => {
+    setState((prevState) => {
+      const newState = stateChange(prevState);
+      return R.equals(prevState, newState) ? prevState : newState;
+    });
+  }, []);
+
+  // ==========================
+  // fetch data
+  // ==========================
+  useProposalDetailsQuery({
+    variables: {
+      proposalId: parseFloat((router?.query?.id as string) ?? '0'),
+    },
+    onCompleted: (data) => {
+      handleSetState((prevState) => ({ ...prevState, ...formatProposalQuery(data) }));
+    },
+  });
+
+  return {
+    state,
+  };
+};

apps/web-nym/src/screens/proposal_details/types.ts

@@ -0,0 +1,24 @@
+export interface OverviewType {
+  title: string;
+  id: number;
+  proposer: string;
+  description: string;
+  status: string;
+  submitTime: string;
+  depositEndTime: string;
+  votingStartTime: string | null;
+  votingEndTime: string | null;
+  content: {
+    recipient: string;
+    amount: Array<{
+      amount: string;
+      denom: string;
+    }>;
+  };
+}
+
+export interface ProposalState {
+  loading: boolean;
+  exists: boolean;
+  overview: OverviewType;
+}