diff --git a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
index d3f81ac1d162..b8a242f6ed5e 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
@@ -6,7 +6,7 @@ import CheckIcon from '@mui/icons-material/Check'
import ErrorIcon from '@mui/icons-material/Error'
import { red, green } from '@mui/material/colors'
import classNames from 'classnames'
-import { useDebounce, useAsyncFn } from 'react-use'
+import { useDebounce, useAsyncFn, useUpdateEffect } from 'react-use'
import { useErrorStyles } from '../../../utils/theme'
const circle =
@@ -87,7 +87,7 @@ export interface ActionButtonPromiseProps extends ButtonProps {
completeOnClick?: 'use executor' | (() => void)
waiting: React.ReactChild
waitingOnClick?: () => ActionButtonPromiseState
- failed: React.ReactChild
+ failed?: React.ReactChild
failedOnClick?: 'use executor' | (() => void)
completeIcon?: React.ReactNode
failIcon?: React.ReactNode
@@ -131,6 +131,11 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
}
const completeClick = completeOnClick === 'use executor' ? run : completeOnClick
const failClick = failedOnClick === 'use executor' ? run : failedOnClick
+
+ useUpdateEffect(() => {
+ setState((prev) => (prev === 'init' ? prev : 'init'))
+ }, [executor])
+
if (state === 'wait')
return
if (state === 'complete')
@@ -144,7 +149,7 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
onClick={completeClick}
/>
)
- if (state === 'fail')
+ if (state === 'fail' && failed)
return (