diff --git a/packages/page-democracy/src/Overview/TreasuryCell.tsx b/packages/page-democracy/src/Overview/TreasuryCell.tsx index 8974fd274f..6f036f5e0a 100644 --- a/packages/page-democracy/src/Overview/TreasuryCell.tsx +++ b/packages/page-democracy/src/Overview/TreasuryCell.tsx @@ -7,10 +7,13 @@ import type { TypeDef } from '@polkadot/types/types'; import React, { useEffect, useState } from 'react'; +import { InputAddress, InputBalance } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import Params from '@polkadot/react-params'; import { getTypeDef } from '@polkadot/types/create'; +import { useTranslation } from '../translate'; + interface Props { className?: string; value: Compact; @@ -31,15 +34,18 @@ interface ParamState { values: Value[]; } +const DEFAULT_PARAMS: ParamState = { params: [], values: [] }; + const transformProposal = { transform: (optProp: Option) => optProp.unwrapOr(null) }; function TreasuryCell ({ className = '', value }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { api } = useApi(); - const [proposalId] = useState(value.unwrap()); + const [proposalId] = useState(() => value.unwrap()); const proposal = useCall(api.query.treasury.proposals, [proposalId], transformProposal); - const [{ params, values }, setExtracted] = useState({ params: [], values: [] }); + const [{ params, values }, setExtracted] = useState(DEFAULT_PARAMS); useEffect((): void => { proposal && setExtracted({ @@ -64,7 +70,18 @@ function TreasuryCell ({ className = '', value }: Props): React.ReactElement + > + ('beneficiary')} + /> + ('payout')} + /> + ); }