From 0b258e7984c31286890692a41fa27e254785650a Mon Sep 17 00:00:00 2001 From: J M Rossy Date: Wed, 25 Dec 2024 21:55:17 -0500 Subject: [PATCH] Setup skeleton for deployer refund hook Generalize slide-in animation and use for deploy steps Add TODOs on chain banners --- src/components/animation/PlanetSpinner.tsx | 6 +- src/components/animation/SlideIn.tsx | 37 ++++++++ .../chains/ChainConnectionWarning.tsx | 1 + src/features/chains/ChainWalletWarning.tsx | 1 + src/features/deployerWallet/hooks.ts | 4 - src/features/deployerWallet/refund.ts | 29 ++++++ .../deployment/DeploymentDetailsModal.tsx | 2 +- .../deployment/warp/WarpDeploymentDeploy.tsx | 89 ++++++++++++------- src/flows/CardFlow.tsx | 32 +------ 9 files changed, 133 insertions(+), 68 deletions(-) create mode 100644 src/components/animation/SlideIn.tsx create mode 100644 src/features/deployerWallet/refund.ts diff --git a/src/components/animation/PlanetSpinner.tsx b/src/components/animation/PlanetSpinner.tsx index 1201464..9a73574 100644 --- a/src/components/animation/PlanetSpinner.tsx +++ b/src/components/animation/PlanetSpinner.tsx @@ -25,13 +25,13 @@ export function PlanetSpinner() { > - + ); diff --git a/src/components/animation/SlideIn.tsx b/src/components/animation/SlideIn.tsx new file mode 100644 index 0000000..dab5f70 --- /dev/null +++ b/src/components/animation/SlideIn.tsx @@ -0,0 +1,37 @@ +import { AnimatePresence, motion } from 'framer-motion'; +import { PropsWithChildren } from 'react'; + +export function SlideIn({ + key, + direction, + children, +}: PropsWithChildren<{ key: string | number; direction: 'forward' | 'backward' }>) { + return ( + + + {children} + + + ); +} + +const variants = { + enter: (direction: 'forward' | 'backward') => ({ + opacity: 0, + x: direction === 'forward' ? 40 : -40, + }), + center: { opacity: 1, x: 0 }, + exit: (direction: 'forward' | 'backward') => ({ + opacity: 0, + x: direction === 'forward' ? -40 : 40, + }), +}; +const transition = { duration: 0.5 }; diff --git a/src/features/chains/ChainConnectionWarning.tsx b/src/features/chains/ChainConnectionWarning.tsx index 2907480..a620437 100644 --- a/src/features/chains/ChainConnectionWarning.tsx +++ b/src/features/chains/ChainConnectionWarning.tsx @@ -7,6 +7,7 @@ import { ChainSelectListModal } from './ChainSelectModal'; import { useMultiProvider } from './hooks'; import { getChainDisplayName } from './utils'; +// TODO refactor away from origin/destination export function ChainConnectionWarning({ origin, destination, diff --git a/src/features/chains/ChainWalletWarning.tsx b/src/features/chains/ChainWalletWarning.tsx index 4417825..1a10ad0 100644 --- a/src/features/chains/ChainWalletWarning.tsx +++ b/src/features/chains/ChainWalletWarning.tsx @@ -7,6 +7,7 @@ import { logger } from '../../utils/logger'; import { useMultiProvider } from './hooks'; import { getChainDisplayName } from './utils'; +// TODO refactor away from origin export function ChainWalletWarning({ origin }: { origin: ChainName }) { const multiProvider = useMultiProvider(); diff --git a/src/features/deployerWallet/hooks.ts b/src/features/deployerWallet/hooks.ts index a930a73..6d12133 100644 --- a/src/features/deployerWallet/hooks.ts +++ b/src/features/deployerWallet/hooks.ts @@ -40,10 +40,6 @@ export function useTempDeployerWallets( }; } -// export function useSetTempDeployerWallet(protocols: ProtocolType[]) { -// const setDeployerKey = useStore((s) => s.setDeployerKey); -// } - export function useRemoveTempDeployerWallet(protocols: ProtocolType[]) { const removeDeployerKey = useStore((s) => s.removeDeployerKey); return () => protocols.map((p) => removeDeployerKey(p)); diff --git a/src/features/deployerWallet/refund.ts b/src/features/deployerWallet/refund.ts new file mode 100644 index 0000000..e518610 --- /dev/null +++ b/src/features/deployerWallet/refund.ts @@ -0,0 +1,29 @@ +import { sleep } from '@hyperlane-xyz/utils'; +import { useMutation } from '@tanstack/react-query'; +import { logger } from 'ethers'; +import { useToastError } from '../../components/toast/useToastError'; +import { useTempDeployerWallets } from './hooks'; +import { TempDeployerWallets } from './types'; + +export function useRefundDeployerAccounts({ onSuccess }: { onSuccess?: () => void }) { + const { wallets } = useTempDeployerWallets([]); + + const { error, mutate } = useMutation({ + mutationKey: ['refundDeployerAccounts', wallets], + mutationFn: () => refundDeployerAccounts(wallets), + retry: 3, + onSuccess, + }); + + useToastError(error, 'Error refunding deployer balances. Please try again later.'); + + return mutate; +} + +async function refundDeployerAccounts(_wallets: TempDeployerWallets) { + //TODO + logger.info('Refunding deployer accounts'); + await sleep(10_000); + logger.info('Done refunding deployer accounts'); + return true; +} diff --git a/src/features/deployment/DeploymentDetailsModal.tsx b/src/features/deployment/DeploymentDetailsModal.tsx index 5c10c60..e65897c 100644 --- a/src/features/deployment/DeploymentDetailsModal.tsx +++ b/src/features/deployment/DeploymentDetailsModal.tsx @@ -69,7 +69,7 @@ function CollapsibleData({ data, label }: { data: any; label: string }) { 
{yamlConfig}
+
- - + +
); } @@ -38,11 +43,9 @@ function HeaderSection() { return

Deploying Warp Route

; } -function MainSection() { +function MainSection({ step, setStep }: { step: DeployStep; setStep: (s: DeployStep) => void }) { const { setPage } = useCardNav(); - const [step, setStep] = useState(DeployStep.FundDeployer); - const onDeployerFunded = () => { setStep(DeployStep.ExecuteDeploy); }; @@ -54,12 +57,15 @@ function MainSection() { }; return ( -
- {step === DeployStep.FundDeployer && ( - - )} - {step === DeployStep.ExecuteDeploy && } - {step === DeployStep.AddFunds && } +
+ + {step === DeployStep.FundDeployer && ( + + )} + {step === DeployStep.ExecuteDeploy && } + {step === DeployStep.AddFunds && } + {step === DeployStep.CancelDeploy && } +
); } @@ -102,14 +108,14 @@ function FundDeployerAccounts({ }; return ( -
- +
+

To deploy, a temporary account must be funded for each chain. Unused amounts are refunded.

{`Fund on ${currentChainDisplay} (Chain ${currentChainIndex + 1} / ${numChains})`} @@ -124,7 +130,7 @@ function FundSingleDeployerAccount() { return (
- +

Deployer has insufficient funds on Ethereum.

@@ -138,12 +144,10 @@ function FundSingleDeployerAccount() { ); } -function FundIcons({ color }: { color: string }) { +function FundIcon({ color }: { color: string }) { return ( -
- - - +
+
); } @@ -167,10 +171,10 @@ function ExecuteDeploy() {

{`Deploying to ${chainListString}`}

-

This will take a few minutes.

-

TODO status text

+

This will take a few minutes

+

TODO status text

- @@ -181,18 +185,39 @@ function ExecuteDeploy() { ); } -function ButtonSection() { - const { updateDeploymentStatus, currentIndex } = useDeploymentHistory(); +function CancelDeploy() { const { setPage } = useCardNav(); + const onSuccess = () => { + setPage(CardPage.WarpForm); + }; + const refundDeployer = useRefundDeployerAccounts({ onSuccess }); + // Run on mount + useEffect(() => { + refundDeployer(); + }, [refundDeployer]); + + return ( +
+ +

+ Canceling the deployment and refunding any unused deployer balances +

+

This may take a minute

+
+ ); +} + +function ButtonSection({ step, setStep }: { step: DeployStep; setStep: (s: DeployStep) => void }) { + const { updateDeploymentStatus, currentIndex } = useDeploymentHistory(); + // const { setPage } = useCardNav(); + // setPage(CardPage.WarpForm); const onClickCancel = () => { - // TODO cancel in SDK if possible? - toast.warn('Deployment cancelled'); updateDeploymentStatus(currentIndex, DeploymentStatus.Cancelled); - setPage(CardPage.WarpForm); + setStep(DeployStep.CancelDeploy); }; return ( - diff --git a/src/flows/CardFlow.tsx b/src/flows/CardFlow.tsx index 855ae2e..72496e8 100644 --- a/src/flows/CardFlow.tsx +++ b/src/flows/CardFlow.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion'; +import { SlideIn } from '../components/animation/SlideIn'; import { WarpDeploymentDeploy } from '../features/deployment/warp/WarpDeploymentDeploy'; import { WarpDeploymentFailure } from '../features/deployment/warp/WarpDeploymentFailure'; import { WarpDeploymentForm } from '../features/deployment/warp/WarpDeploymentForm'; @@ -30,32 +30,8 @@ export function CardFlow() { const PageComponent = PAGE_TO_COMPONENT[FORCE_PAGE || page]; return ( - - - - - ; - + + + ); } - -const variants = { - enter: (direction: 'forward' | 'backward') => ({ - opacity: 0, - x: direction === 'forward' ? 40 : -40, - }), - center: { opacity: 1, x: 0 }, - exit: (direction: 'forward' | 'backward') => ({ - opacity: 0, - x: direction === 'forward' ? -40 : 40, - }), -}; -const transition = { duration: 0.3 };