diff --git a/packages/page-treasury/src/Overview/Tip.tsx b/packages/page-treasury/src/Overview/Tip.tsx index 956fb98a15..dc64a58eaa 100644 --- a/packages/page-treasury/src/Overview/Tip.tsx +++ b/packages/page-treasury/src/Overview/Tip.tsx @@ -2,10 +2,10 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { BlockNumber, OpenTip } from '@polkadot/types/interfaces'; +import { AccountId, Balance, BlockNumber, OpenTip } from '@polkadot/types/interfaces'; import React, { useEffect, useState } from 'react'; -import { AddressSmall, AddressMini, Expander, Icon } from '@polkadot/react-components'; +import { AddressSmall, AddressMini, Expander, Icon, TxButton } from '@polkadot/react-components'; import { useAccounts, useApi, useCall } from '@polkadot/react-hooks'; import { BlockToTime, FormatBalance } from '@polkadot/react-query'; import { Option } from '@polkadot/types'; @@ -24,28 +24,43 @@ interface Props { members: string[]; } +interface TipState { + closesAt: BlockNumber | null; + finder: AccountId | null; + findersFee: Balance | null; + isFinder: boolean; + isTipper: boolean; +} + function Tip ({ bestNumber, className = '', hash, isMember, members }: Props): React.ReactElement | null { const { t } = useTranslation(); const { api } = useApi(); const { allAccounts } = useAccounts(); - const [isTipper, setIsTipper] = useState(false); + const [{ closesAt, finder, findersFee, isFinder, isTipper }, setTipState] = useState({ closesAt: null, finder: null, findersFee: null, isFinder: false, isTipper: false }); const tip = useCall(api.query.treasury.tips, [hash], { transform: (optTip: Option) => optTip.unwrapOr(null) }); useEffect((): void => { - tip && setIsTipper( - tip.tips.some(([address]) => allAccounts.includes(address.toString())) - ); + if (tip) { + const finderInfo = tip.finder.unwrapOr(null); + const finder = (finderInfo && finderInfo[0]) || null; + + setTipState({ + closesAt: tip.closes.unwrapOr(null), + finder, + findersFee: (finderInfo && finderInfo[1]) || null, + isFinder: !!finder && allAccounts.includes(finder.toString()), + isTipper: tip.tips.some(([address]) => allAccounts.includes(address.toString())) + }); + } }, [allAccounts, tip]); if (!tip) { return null; } - const { closes, finder, reason, tips, who } = tip; - const finderInfo = finder.unwrapOr(null); - const closesAt = closes.unwrapOr(null); + const { reason, tips, who } = tip; return ( @@ -53,19 +68,19 @@ function Tip ({ bestNumber, className = '', hash, isMember, members }: Props): R - {finderInfo && ( - + {finder && ( + )} - {finderInfo && ( - + {findersFee && ( + )} {tips.length !== 0 && ( - ('Endorsements ({{count}})', { replace: { count: tips.length } })}> + ('Tippers ({{count}})', { replace: { count: tips.length } })}> {tips.map(([tipper, balance]) => ( - {!closesAt && ( - - )} - {bestNumber && closesAt && ( - closesAt.gt(bestNumber) - ? ( - <> - - #{formatNumber(closesAt)} - - ) - : ( - + + #{formatNumber(closesAt)} + + ) + : ( + + ) + ) + : ( + <> + {finder && ( + + )} + - ) - )} + + ) + } );