From 66d5436432af2c73bd8983711b632345de100919 Mon Sep 17 00:00:00 2001 From: Magic Cat Date: Mon, 27 Nov 2023 21:39:20 +0700 Subject: [PATCH] fix typecheck --- apps/web-nym/src/screens/params/hooks.ts | 16 +++- apps/web-nym/src/screens/params/types.ts | 11 +-- apps/web-nym/src/screens/params/utils.tsx | 2 +- .../src/screens/proposal_details/hooks.ts | 95 +++++++++++++++++++ .../src/screens/proposal_details/types.ts | 24 +++++ 5 files changed, 135 insertions(+), 13 deletions(-) create mode 100644 apps/web-nym/src/screens/proposal_details/hooks.ts create mode 100644 apps/web-nym/src/screens/proposal_details/types.ts diff --git a/apps/web-nym/src/screens/params/hooks.ts b/apps/web-nym/src/screens/params/hooks.ts index 03fb6bb5d9..8e2ec282aa 100644 --- a/apps/web-nym/src/screens/params/hooks.ts +++ b/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,8 +102,11 @@ 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, @@ -109,7 +114,8 @@ const formatGov = (data: ParamsQuery) => { ) ?? 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, diff --git a/apps/web-nym/src/screens/params/types.ts b/apps/web-nym/src/screens/params/types.ts index 00aa97d34b..db0e0da854 100644 --- a/apps/web-nym/src/screens/params/types.ts +++ b/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; diff --git a/apps/web-nym/src/screens/params/utils.tsx b/apps/web-nym/src/screens/params/utils.tsx index 54ab0e664b..5506c8a9dd 100644 --- a/apps/web-nym/src/screens/params/utils.tsx +++ b/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; diff --git a/apps/web-nym/src/screens/proposal_details/hooks.ts b/apps/web-nym/src/screens/proposal_details/hooks.ts new file mode 100644 index 0000000000..df656789ab --- /dev/null +++ b/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 = { + 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({ + 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, + }; +}; diff --git a/apps/web-nym/src/screens/proposal_details/types.ts b/apps/web-nym/src/screens/proposal_details/types.ts new file mode 100644 index 0000000000..2055522c4b --- /dev/null +++ b/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; +}