From 4b1ed9448b427b7b6cd0f11cd9cbe0eafe648dd9 Mon Sep 17 00:00:00 2001 From: Joystream Stats Date: Fri, 2 Dec 2022 22:13:00 +0000 Subject: [PATCH 1/7] Tooltip for deactivated `AddProposalButton` (#3909) --- .../src/common/components/Tooltip/Tooltip.tsx | 4 +++- .../components/AddProposalButton.tsx | 20 ++++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/common/components/Tooltip/Tooltip.tsx b/packages/ui/src/common/components/Tooltip/Tooltip.tsx index ae761a25bb..81f906824a 100644 --- a/packages/ui/src/common/components/Tooltip/Tooltip.tsx +++ b/packages/ui/src/common/components/Tooltip/Tooltip.tsx @@ -31,6 +31,7 @@ export interface TooltipPopupProps { forBig?: boolean hideOnComponentLeave?: boolean boundaryClassName?: string + placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' } export interface DarkTooltipInnerItemProps { @@ -52,6 +53,7 @@ export const Tooltip = ({ offset, hideOnComponentLeave, boundaryClassName, + placement = 'bottom-start', }: TooltipProps) => { const [isTooltipActive, setTooltipActive] = useState(tooltipOpen) const [referenceElementRef, setReferenceElementRef] = useState(null) @@ -59,7 +61,7 @@ export const Tooltip = ({ const [boundaryElement, setBoundaryElement] = useState(null) const { styles, attributes } = usePopper(referenceElementRef, popperElementRef, { - placement: 'bottom-start', + placement, modifiers: [ { name: 'offset', diff --git a/packages/ui/src/proposals/components/AddProposalButton.tsx b/packages/ui/src/proposals/components/AddProposalButton.tsx index 00057bef7f..8ccfae9dbf 100644 --- a/packages/ui/src/proposals/components/AddProposalButton.tsx +++ b/packages/ui/src/proposals/components/AddProposalButton.tsx @@ -3,6 +3,7 @@ import React, { useCallback } from 'react' import { useApi } from '@/api/hooks/useApi' import { TransactionButton } from '@/common/components/buttons/TransactionButton' import { PlusIcon } from '@/common/components/icons/PlusIcon' +import { Tooltip } from '@/common/components/Tooltip' import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue' import { useModal } from '@/common/hooks/useModal' import { AddNewProposalModalCall } from '@/proposals/modals/AddNewProposal' @@ -23,7 +24,7 @@ export const AddProposalButton = () => { ) const areProposalSlotsAvailable = api && maxProposals && currentProposals?.lt(maxProposals) - return ( + const txButton = () => ( { Add new proposal ) + + if (!api) return {txButton()} + + if (!areProposalSlotsAvailable) + return ( + + {txButton()} + + ) + + return txButton() } From c09a9f97de84dd5972f878cef85293e9a350ef34 Mon Sep 17 00:00:00 2001 From: Traumschule <31551045+traumschule@users.noreply.github.com> Date: Thu, 8 Dec 2022 22:24:26 +0000 Subject: [PATCH 2/7] tooltipTitle Co-authored-by: Oleksandr Korniienko --- packages/ui/src/proposals/components/AddProposalButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/proposals/components/AddProposalButton.tsx b/packages/ui/src/proposals/components/AddProposalButton.tsx index 8ccfae9dbf..178a00c8cd 100644 --- a/packages/ui/src/proposals/components/AddProposalButton.tsx +++ b/packages/ui/src/proposals/components/AddProposalButton.tsx @@ -41,7 +41,7 @@ export const AddProposalButton = () => { if (!areProposalSlotsAvailable) return ( Date: Fri, 9 Dec 2022 00:14:19 +0000 Subject: [PATCH 3/7] useMemo => fix test --- .../src/proposals/components/AddProposalButton.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/proposals/components/AddProposalButton.tsx b/packages/ui/src/proposals/components/AddProposalButton.tsx index 178a00c8cd..cba991b9c1 100644 --- a/packages/ui/src/proposals/components/AddProposalButton.tsx +++ b/packages/ui/src/proposals/components/AddProposalButton.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react' +import React, { useCallback, useMemo } from 'react' import { useApi } from '@/api/hooks/useApi' import { TransactionButton } from '@/common/components/buttons/TransactionButton' @@ -9,6 +9,7 @@ import { useModal } from '@/common/hooks/useModal' import { AddNewProposalModalCall } from '@/proposals/modals/AddNewProposal' export const AddProposalButton = () => { + const { api } = useApi() const { showModal } = useModal() const addNewProposalModal = useCallback(() => { showModal({ @@ -16,13 +17,12 @@ export const AddProposalButton = () => { }) }, []) - const { api } = useApi() - const maxProposals = api?.consts.proposalsEngine.maxActiveProposalLimit + const maxProposals = useMemo(() => api?.consts.proposalsEngine.maxActiveProposalLimit, [api?.isConnected]) const currentProposals = useFirstObservableValue( () => api?.query.proposalsEngine.activeProposalCount(), - [api?.isConnected] + [api?.isConnected, maxProposals] ) - const areProposalSlotsAvailable = api && maxProposals && currentProposals?.lt(maxProposals) + const areProposalSlotsAvailable = useMemo(() => currentProposals?.lt(maxProposals), [currentProposals, maxProposals]) const txButton = () => ( { ) - if (!api) return {txButton()} + if (!api?.isConnected) return {txButton()} if (!areProposalSlotsAvailable) return ( From f7461cc3c051998f2d16313c10b59870335db81f Mon Sep 17 00:00:00 2001 From: Joystream Stats Date: Fri, 9 Dec 2022 00:44:01 +0000 Subject: [PATCH 4/7] refactor --- .../components/AddProposalButton.tsx | 63 ++++++++----------- 1 file changed, 26 insertions(+), 37 deletions(-) diff --git a/packages/ui/src/proposals/components/AddProposalButton.tsx b/packages/ui/src/proposals/components/AddProposalButton.tsx index cba991b9c1..1775725ddf 100644 --- a/packages/ui/src/proposals/components/AddProposalButton.tsx +++ b/packages/ui/src/proposals/components/AddProposalButton.tsx @@ -11,45 +11,34 @@ import { AddNewProposalModalCall } from '@/proposals/modals/AddNewProposal' export const AddProposalButton = () => { const { api } = useApi() const { showModal } = useModal() - const addNewProposalModal = useCallback(() => { - showModal({ - modal: 'AddNewProposalModal', - }) - }, []) + const addProposalModal = useCallback(() => showModal({ modal: 'AddNewProposalModal' }), []) const maxProposals = useMemo(() => api?.consts.proposalsEngine.maxActiveProposalLimit, [api?.isConnected]) - const currentProposals = useFirstObservableValue( - () => api?.query.proposalsEngine.activeProposalCount(), - [api?.isConnected, maxProposals] - ) - const areProposalSlotsAvailable = useMemo(() => currentProposals?.lt(maxProposals), [currentProposals, maxProposals]) - - const txButton = () => ( - - - Add new proposal - - ) + const proposals = useFirstObservableValue(() => api?.query.proposalsEngine.activeProposalCount(), [api?.isConnected]) + const areProposalSlotsAvailable = useMemo(() => proposals?.lt(maxProposals), [proposals, maxProposals]) - if (!api?.isConnected) return {txButton()} + const tooltipProps = useMemo(() => { + if (!api?.isConnected) return { tooltipText: 'Connecting to api' } + if (!areProposalSlotsAvailable) + return { + tooltipTitle: 'Max active proposals limit reached', + tooltipText: `The creation of proposals is currently disabled because the number of deciding or gracing proposals reached the limit of ${maxProposals}.`, + tooltipLinkText: 'Proposal System Constants', + tooltipLinkURL: 'https://joystream.gitbook.io/testnet-workspace/system/proposal-system#constants', + } + return { + tooltipText: 'Use the proposal engine to suggest a change to the Council.', + tooltipLinkText: 'Learn about the Proposal System', + tooltipLinkURL: 'https://joystream.gitbook.io/testnet-workspace/system/proposal-system', + } + }, [api?.isConnected, areProposalSlotsAvailable]) - if (!areProposalSlotsAvailable) - return ( - - {txButton()} - - ) - - return txButton() + return ( + + + + Add new proposal + + + ) } From 33db75f001a57e303ac0ac4e45ecd8906d511329 Mon Sep 17 00:00:00 2001 From: Joystream Stats Date: Fri, 9 Dec 2022 01:29:28 +0000 Subject: [PATCH 5/7] types --- .../ui/src/proposals/components/AddProposalButton.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/proposals/components/AddProposalButton.tsx b/packages/ui/src/proposals/components/AddProposalButton.tsx index 1775725ddf..1dda821553 100644 --- a/packages/ui/src/proposals/components/AddProposalButton.tsx +++ b/packages/ui/src/proposals/components/AddProposalButton.tsx @@ -15,11 +15,11 @@ export const AddProposalButton = () => { const maxProposals = useMemo(() => api?.consts.proposalsEngine.maxActiveProposalLimit, [api?.isConnected]) const proposals = useFirstObservableValue(() => api?.query.proposalsEngine.activeProposalCount(), [api?.isConnected]) - const areProposalSlotsAvailable = useMemo(() => proposals?.lt(maxProposals), [proposals, maxProposals]) + const availableSlots = useMemo(() => Number(maxProposals) - Number(proposals), [proposals, maxProposals]) const tooltipProps = useMemo(() => { if (!api?.isConnected) return { tooltipText: 'Connecting to api' } - if (!areProposalSlotsAvailable) + if (availableSlots ?? 0) return { tooltipTitle: 'Max active proposals limit reached', tooltipText: `The creation of proposals is currently disabled because the number of deciding or gracing proposals reached the limit of ${maxProposals}.`, @@ -31,11 +31,11 @@ export const AddProposalButton = () => { tooltipLinkText: 'Learn about the Proposal System', tooltipLinkURL: 'https://joystream.gitbook.io/testnet-workspace/system/proposal-system', } - }, [api?.isConnected, areProposalSlotsAvailable]) + }, [api?.isConnected, availableSlots]) return ( - + Add new proposal From 21a8bae458c692be8b75f95362c12384ce0a1b75 Mon Sep 17 00:00:00 2001 From: "l1.media" <31551045+traumschule@users.noreply.github.com> Date: Sun, 29 Jan 2023 15:50:02 +0000 Subject: [PATCH 6/7] fix logic --- .../src/proposals/components/AddProposalButton.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/proposals/components/AddProposalButton.tsx b/packages/ui/src/proposals/components/AddProposalButton.tsx index 1dda821553..05cbec3b13 100644 --- a/packages/ui/src/proposals/components/AddProposalButton.tsx +++ b/packages/ui/src/proposals/components/AddProposalButton.tsx @@ -19,17 +19,19 @@ export const AddProposalButton = () => { const tooltipProps = useMemo(() => { if (!api?.isConnected) return { tooltipText: 'Connecting to api' } - if (availableSlots ?? 0) + if (!api?.isConnected || availableSlots > 0) { + return { + tooltipText: 'Use the proposal engine to suggest a change to the Council.', + tooltipLinkText: 'Learn about the Proposal System', + tooltipLinkURL: 'https://joystream.gitbook.io/testnet-workspace/system/proposal-system', + } + } else { return { tooltipTitle: 'Max active proposals limit reached', tooltipText: `The creation of proposals is currently disabled because the number of deciding or gracing proposals reached the limit of ${maxProposals}.`, tooltipLinkText: 'Proposal System Constants', tooltipLinkURL: 'https://joystream.gitbook.io/testnet-workspace/system/proposal-system#constants', } - return { - tooltipText: 'Use the proposal engine to suggest a change to the Council.', - tooltipLinkText: 'Learn about the Proposal System', - tooltipLinkURL: 'https://joystream.gitbook.io/testnet-workspace/system/proposal-system', } }, [api?.isConnected, availableSlots]) From 8cf55347448bf2d908568c59751920224d85caa8 Mon Sep 17 00:00:00 2001 From: Joystream Stats Date: Sat, 17 Jun 2023 06:17:05 +0000 Subject: [PATCH 7/7] pass tooltip to `TransactionButtonWrapper` --- .../components/buttons/TransactionButton.tsx | 14 ++++++++++++-- .../proposals/components/AddProposalButton.tsx | 17 ++++++++++------- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/common/components/buttons/TransactionButton.tsx b/packages/ui/src/common/components/buttons/TransactionButton.tsx index 31477b7bf3..dd54e6671b 100644 --- a/packages/ui/src/common/components/buttons/TransactionButton.tsx +++ b/packages/ui/src/common/components/buttons/TransactionButton.tsx @@ -9,15 +9,24 @@ import { ButtonGhost, ButtonPrimary, ButtonProps, ButtonSecondary } from '.' interface WrapperProps { children: ReactNode + tooltip: { [key: string]: string } } -export const TransactionButtonWrapper = ({ children }: WrapperProps) => { +export const TransactionButtonWrapper = ({ children, tooltip }: WrapperProps) => { const { isTransactionPending } = useTransactionStatus() if (isTransactionPending) { return {children} } + if (tooltip) { + return ( + + {children} + + ) + } + return <>{children} } @@ -25,6 +34,7 @@ type StyleOption = 'primary' | 'ghost' | 'secondary' interface TransactionButtonProps extends ButtonProps { style: StyleOption + tooltip: { [key: string]: string } } export const TransactionButton = (props: TransactionButtonProps) => { @@ -33,7 +43,7 @@ export const TransactionButton = (props: TransactionButtonProps) => { const Button = buttonTypes[props.style] return ( - +