Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(website): button cannot be disabled without a reason #1510

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

fix(website): button cannot be disabled without a reason #1510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions packages/website/src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { ReactNode } from 'react';
import {
Button as ChakraButton,
ButtonProps as ChakraButtonProps,
Tooltip,
} from '@chakra-ui/react';

type Props = {
disabledReason?: string | false;
children?: ReactNode;
} & Omit<ChakraButtonProps, 'isDisabled'>;

export function Button({ children, disabledReason, ...rest }: Props) {
return (
<Tooltip label={disabledReason}>
<ChakraButton {...rest} isDisabled={!!disabledReason}>
{children}
</ChakraButton>
</Tooltip>
);
}
138 changes: 69 additions & 69 deletions packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import {
Alert,
AlertIcon,
Box,
Button,
Code,
Container,
Flex,
Expand Down Expand Up @@ -50,6 +49,7 @@ import {
import NextLink from 'next/link';
import { useRouter } from 'next/navigation';
import { Alert as AlertCannon } from '@/components/Alert';
import { Button as ButtonCannon } from '@/components/Button';
import React, { useEffect, useMemo, useState } from 'react';
import {
encodeAbiParameters,
Expand Down Expand Up @@ -553,31 +553,33 @@ export default function QueueFromGitOps() {
)
);

const disablePreviewButton =
loadingDataForDeploy ||
chainId !== currentSafe?.chainId ||
!cannonDefInfo?.def ||
buildState.status === 'building' ||
buildState.status === 'success' ||
const previewDisabledReason: string =
(loadingDataForDeploy && 'Loading package data...') ||
(chainId !== currentSafe?.chainId && 'Wallet Chain ID is incorrect') ||
(!cannonDefInfo?.def && 'Cannon chain definition could not be loaded') ||
(buildState.status === 'building' && 'Simulation in progress...') ||
(buildState.status === 'success' && 'Build is complete') ||
(onChainPrevPkgQuery.isFetched &&
!prevDeployLocation &&
tomlRequiresPrevPackage &&
!previousPackageInput) ||
!canTomlBeDeployedUsingWebsite;
!previousPackageInput &&
'Loading previous package data...') ||
(!canTomlBeDeployedUsingWebsite &&
'Package is not deployable with website (see alert)') ||
'';

// TODO: clean up, disabled reason handling is kind of wierd here
const PreviewButton = ({ message }: { message?: string }) => (
<Tooltip label={message}>
<Button
width="100%"
colorScheme="teal"
isDisabled={disablePreviewButton}
onClick={handlePreviewTxnsClick}
>
{loadingDataForDeploy
? 'Loading required data...'
: 'Preview Transactions to Queue'}
</Button>
</Tooltip>
<ButtonCannon
width="100%"
colorScheme="teal"
disabledReason={message || previewDisabledReason}
onClick={handlePreviewTxnsClick}
>
{loadingDataForDeploy
? 'Loading required data...'
: 'Preview Transactions to Queue'}
</ButtonCannon>
);

function renderCannonFileInput() {
Expand Down Expand Up @@ -876,15 +878,15 @@ export default function QueueFromGitOps() {
{renderAlertMessage()}

{chainId !== currentSafe?.chainId ? (
<Button
<ButtonCannon
width="100%"
colorScheme="teal"
onClick={() =>
switchChainAsync({ chainId: currentSafe?.chainId || 10 })
}
>
Switch Network
</Button>
</ButtonCannon>
) : (
<RenderPreviewButtonTooltip />
)}
Expand Down Expand Up @@ -943,7 +945,7 @@ export default function QueueFromGitOps() {
the button below.
</Text>
</Text>
<Button
<ButtonCannon
onClick={() =>
deployer.queueTransactions(
buildState.result!.deployerSteps.map(
Expand All @@ -953,7 +955,7 @@ export default function QueueFromGitOps() {
}
>
Execute Outside Safe Txns
</Button>
</ButtonCannon>
</VStack>
) : deployer.executionProgress.length <
deployer.queuedTransactions.length ? (
Expand Down Expand Up @@ -1040,55 +1042,53 @@ export default function QueueFromGitOps() {
<HStack gap="6">
{stager.execConditionFailed &&
(buildState.result?.safeSteps.length || 0) > 0 ? (
<Tooltip label={stager.signConditionFailed}>
<Button
isDisabled={
!!stager.signConditionFailed || stager.signing
}
colorScheme="teal"
size="lg"
w="100%"
onClick={async () => {
await stager.sign();
}}
>
{stager.signing ? (
<>
Currently Signing
<Spinner size="sm" ml={2} />
</>
) : (
'Queue & Sign'
)}
</Button>
</Tooltip>
) : null}
<Tooltip label={stager.execConditionFailed}>
<Button
isDisabled={
!!stager.execConditionFailed || isOutsideSafeTxnsRequired
<ButtonCannon
disabledReason={
stager.signConditionFailed ||
(stager.signing && 'Currently signing (check wallet)...')
}
size="lg"
colorScheme="teal"
size="lg"
w="100%"
onClick={() => {
execTxn.writeContract(stager.executeTxnConfig!, {
onSuccess: () => {
router.push(links.DEPLOY);

toast({
title: 'You successfully executed the transaction.',
status: 'success',
duration: 5000,
isClosable: true,
});
},
});
onClick={async () => {
await stager.sign();
}}
>
Execute
</Button>
</Tooltip>
{stager.signing ? (
<>
Currently Signing
<Spinner size="sm" ml={2} />
</>
) : (
'Queue & Sign'
)}
</ButtonCannon>
) : null}
<ButtonCannon
disabledReason={
stager.execConditionFailed ||
(isOutsideSafeTxnsRequired && 'Safe txns not required')
}
size="lg"
colorScheme="teal"
w="100%"
onClick={() => {
execTxn.writeContract(stager.executeTxnConfig!, {
onSuccess: () => {
router.push(links.DEPLOY);

toast({
title: 'You successfully executed the transaction.',
status: 'success',
duration: 5000,
isClosable: true,
});
},
});
}}
>
Execute
</ButtonCannon>
</HStack>
</Box>
)}
Expand Down
Loading