From 033e9daaf036fe4ec04b619bd6921ca78bd5b466 Mon Sep 17 00:00:00 2001 From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com> Date: Mon, 23 Dec 2024 10:04:19 +1100 Subject: [PATCH 1/4] refactor: types and logic --- .../SharedConfirm/SharedConfirmFooter.tsx | 4 ++-- .../components/TradeConfirm/EtaStep.tsx | 24 ++++++++----------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/components/MultiHopTrade/components/SharedConfirm/SharedConfirmFooter.tsx b/src/components/MultiHopTrade/components/SharedConfirm/SharedConfirmFooter.tsx index ed2e2e82811..c86e83961d2 100644 --- a/src/components/MultiHopTrade/components/SharedConfirm/SharedConfirmFooter.tsx +++ b/src/components/MultiHopTrade/components/SharedConfirm/SharedConfirmFooter.tsx @@ -1,8 +1,8 @@ import { Stack } from '@chakra-ui/react' type SharedConfirmFooterProps = { - detail: React.ReactNode | null - button: React.ReactNode + detail: JSX.Element | null + button: JSX.Element | null } export const SharedConfirmFooter = ({ detail, button }: SharedConfirmFooterProps) => { diff --git a/src/components/MultiHopTrade/components/TradeConfirm/EtaStep.tsx b/src/components/MultiHopTrade/components/TradeConfirm/EtaStep.tsx index 35528c39ad8..8ccb35d7e12 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/EtaStep.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/EtaStep.tsx @@ -2,8 +2,7 @@ import { ArrowDownIcon } from '@chakra-ui/icons' import prettyMilliseconds from 'pretty-ms' import { useMemo } from 'react' import { useTranslate } from 'react-polyglot' -import { selectIsActiveQuoteMultiHop } from 'state/slices/tradeInputSlice/selectors' -import { selectFirstHop, selectLastHop } from 'state/slices/tradeQuoteSlice/selectors' +import { selectActiveQuote } from 'state/slices/tradeQuoteSlice/selectors' import { useAppSelector } from 'state/store' import { StepperStep } from '../MultiHopTradeConfirm/components/StepperStep' @@ -12,18 +11,15 @@ const etaStepProps = { alignItems: 'center', py: 2 } export const EtaStep = () => { const translate = useTranslate() - const tradeQuoteFirstHop = useAppSelector(selectFirstHop) - const tradeQuoteLastHop = useAppSelector(selectLastHop) - const isMultiHopTrade = useAppSelector(selectIsActiveQuoteMultiHop) - const totalEstimatedExecutionTimeMs = useMemo(() => { - if (!tradeQuoteFirstHop || !tradeQuoteLastHop) return undefined - if (!tradeQuoteFirstHop.estimatedExecutionTimeMs || !tradeQuoteLastHop.estimatedExecutionTimeMs) - return undefined - return isMultiHopTrade - ? tradeQuoteFirstHop.estimatedExecutionTimeMs + tradeQuoteLastHop.estimatedExecutionTimeMs - : tradeQuoteFirstHop.estimatedExecutionTimeMs - }, [isMultiHopTrade, tradeQuoteFirstHop, tradeQuoteLastHop]) - const swapperName = tradeQuoteFirstHop?.source + const activeQuote = useAppSelector(selectActiveQuote) + const totalEstimatedExecutionTimeMs = useMemo( + () => + activeQuote?.steps.reduce((acc, step) => { + return acc + (step.estimatedExecutionTimeMs ?? 0) + }, 0), + [activeQuote?.steps], + ) + const swapperName = activeQuote?.steps[0].source const stepIndicator = useMemo(() => { return From 61251d64a2b0ed870de3656d518b04a369888931 Mon Sep 17 00:00:00 2001 From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com> Date: Mon, 23 Dec 2024 10:12:40 +1100 Subject: [PATCH 2/4] fix: handle swapTxState failed indicator --- .../TradeConfirm/ExpandableTradeSteps.tsx | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/MultiHopTrade/components/TradeConfirm/ExpandableTradeSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/ExpandableTradeSteps.tsx index 0d98b5b78cb..3cc45528574 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/ExpandableTradeSteps.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/ExpandableTradeSteps.tsx @@ -9,7 +9,7 @@ import { selectConfirmedTradeExecutionState, selectHopExecutionMetadata, } from 'state/slices/tradeQuoteSlice/selectors' -import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types' +import { TradeExecutionState, TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types' import { useAppSelector, useSelectorWithArgs } from 'state/store' import { StepperStep } from '../MultiHopTradeConfirm/components/StepperStep' @@ -44,20 +44,22 @@ export const ExpandableTradeSteps = () => { } }, [activeTradeId, currentHopIndex]) const swapperName = activeTradeQuote?.steps[0].source - const { state: hopExecutionState } = useSelectorWithArgs( - selectHopExecutionMetadata, - hopExecutionMetadataFilter, - ) + const { + state: hopExecutionState, + swap: { state: swapTxState }, + } = useSelectorWithArgs(selectHopExecutionMetadata, hopExecutionMetadataFilter) const summaryStepIndicator = useMemo(() => { - if (confirmedTradeExecutionState === TradeExecutionState.TradeComplete) { - return - } else if (activeQuoteError) { - return - } else { - return + switch (true) { + case confirmedTradeExecutionState === TradeExecutionState.TradeComplete: + return + case !!activeQuoteError: + case swapTxState === TransactionExecutionState.Failed: + return + default: + return } - }, [confirmedTradeExecutionState, activeQuoteError]) + }, [confirmedTradeExecutionState, activeQuoteError, swapTxState]) const { totalSteps, currentTradeStepIndex: currentStep } = useTradeSteps() const progressValue = (currentStep / (totalSteps - 1)) * 100 From e54027646b8e7e7b1c0742dee307acf9743c62f3 Mon Sep 17 00:00:00 2001 From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com> Date: Mon, 23 Dec 2024 11:01:40 +1100 Subject: [PATCH 3/4] refactor: use StepperStep over TradeStep vernacular --- ...deSteps.tsx => ExpandableStepperSteps.tsx} | 10 ++-- ...radeSteps.tsx => ExpandedStepperSteps.tsx} | 48 +++++++++--------- .../TradeConfirm/TradeConfirmBody.tsx | 4 +- .../TradeConfirm/TradeConfirmFooter.tsx | 18 +++---- .../components/TradeConfirm/helpers.ts | 50 +++++++++---------- ...{useTradeSteps.tsx => useStepperSteps.tsx} | 18 +++---- 6 files changed, 74 insertions(+), 74 deletions(-) rename src/components/MultiHopTrade/components/TradeConfirm/{ExpandableTradeSteps.tsx => ExpandableStepperSteps.tsx} (93%) rename src/components/MultiHopTrade/components/TradeConfirm/{ExpandedTradeSteps.tsx => ExpandedStepperSteps.tsx} (90%) rename src/components/MultiHopTrade/components/TradeConfirm/hooks/{useTradeSteps.tsx => useStepperSteps.tsx} (86%) diff --git a/src/components/MultiHopTrade/components/TradeConfirm/ExpandableTradeSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/ExpandableStepperSteps.tsx similarity index 93% rename from src/components/MultiHopTrade/components/TradeConfirm/ExpandableTradeSteps.tsx rename to src/components/MultiHopTrade/components/TradeConfirm/ExpandableStepperSteps.tsx index 3cc45528574..cd9d8b9de57 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/ExpandableTradeSteps.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/ExpandableStepperSteps.tsx @@ -13,14 +13,14 @@ import { TradeExecutionState, TransactionExecutionState } from 'state/slices/tra import { useAppSelector, useSelectorWithArgs } from 'state/store' import { StepperStep } from '../MultiHopTradeConfirm/components/StepperStep' -import { ExpandedTradeSteps } from './ExpandedTradeSteps' +import { ExpandedStepperSteps } from './ExpandedStepperSteps' import { getHopExecutionStateSummaryStepTranslation } from './helpers' import { useCurrentHopIndex } from './hooks/useCurrentHopIndex' -import { useTradeSteps } from './hooks/useTradeSteps' +import { useStepperSteps } from './hooks/useStepperSteps' const collapseStyle = { width: '100%' } -export const ExpandableTradeSteps = () => { +export const ExpandableStepperSteps = () => { const [isExpanded, setIsExpanded] = useState(false) const confirmedTradeExecutionState = useAppSelector(selectConfirmedTradeExecutionState) const summaryStepProps = useMemo( @@ -61,7 +61,7 @@ export const ExpandableTradeSteps = () => { } }, [confirmedTradeExecutionState, activeQuoteError, swapTxState]) - const { totalSteps, currentTradeStepIndex: currentStep } = useTradeSteps() + const { totalSteps, currentTradeStepIndex: currentStep } = useStepperSteps() const progressValue = (currentStep / (totalSteps - 1)) * 100 const titleElement = useMemo(() => { @@ -102,7 +102,7 @@ export const ExpandableTradeSteps = () => { /> - {activeTradeQuote && } + {activeTradeQuote && } diff --git a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedTradeSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx similarity index 90% rename from src/components/MultiHopTrade/components/TradeConfirm/ExpandedTradeSteps.tsx rename to src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx index 30d1c5df4c7..48093fd7b05 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedTradeSteps.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx @@ -26,10 +26,10 @@ import { } from 'state/slices/tradeQuoteSlice/selectors' import { useAppSelector, useSelectorWithArgs } from 'state/store' -import { StepperStep } from '../MultiHopTradeConfirm/components/StepperStep' -import { TradeStep } from './helpers' +import { StepperStep as StepperStepComponent } from '../MultiHopTradeConfirm/components/StepperStep' +import { StepperStep } from './helpers' +import { useStepperSteps } from './hooks/useStepperSteps' import { useStreamingProgress } from './hooks/useStreamingProgress' -import { useTradeSteps } from './hooks/useTradeSteps' import { TxLabel } from './TxLabel' const erroredStepIndicator = @@ -37,11 +37,11 @@ const completedStepIndicator = const stepProps = { alignItems: 'center', py: 2, pr: 2, pl: 1.5 } -type ExpandedTradeStepsProps = { +type ExpandedStepperStepsProps = { activeTradeQuote: TradeQuote | TradeRate } -export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps) => { +export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsProps) => { const translate = useTranslate() // this is the account we're selling from - assume this is the AccountId of the approval Tx const firstHopSellAccountId = useAppSelector(selectFirstHopSellAccountId) @@ -136,7 +136,7 @@ export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps swap: lastHopSwap, } = useSelectorWithArgs(selectHopExecutionMetadata, lastHopExecutionMetadataFilter) - const { currentTradeStepIndex: currentStep } = useTradeSteps() + const { currentTradeStepIndex: currentStep } = useStepperSteps() const stepIndicator = useMemo( () => ( @@ -327,65 +327,65 @@ export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps tradeQuoteLastHop, ]) - const { tradeSteps, currentTradeStep } = useTradeSteps() + const { tradeSteps, currentTradeStep } = useStepperSteps() return ( - {tradeSteps[TradeStep.FirstHopReset] ? ( - ) : null} - {tradeSteps[TradeStep.FirstHopApproval] ? ( - ) : null} - - {tradeSteps[TradeStep.LastHopReset] ? ( - ) : null} - {tradeSteps[TradeStep.LastHopApproval] ? ( - ) : null} - {tradeSteps[TradeStep.LastHopSwap] ? ( - ) : null} diff --git a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmBody.tsx b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmBody.tsx index 3ffac31f2ed..1250b25ca31 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmBody.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmBody.tsx @@ -8,7 +8,7 @@ import { useAppSelector } from 'state/store' import { SharedConfirmBody } from '../SharedConfirm/SharedConfirmBody' import { EtaStep } from './EtaStep' -import { ExpandableTradeSteps } from './ExpandableTradeSteps' +import { ExpandableStepperSteps } from './ExpandableStepperSteps' const InnerSteps = () => { const confirmedTradeExecutionState = useAppSelector(selectConfirmedTradeExecutionState) @@ -20,7 +20,7 @@ const InnerSteps = () => { case TradeExecutionState.FirstHop: case TradeExecutionState.SecondHop: case TradeExecutionState.TradeComplete: - return + return default: return null } diff --git a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx index 8676f252176..becd09aca0c 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx @@ -15,10 +15,10 @@ import { useAppSelector, useSelectorWithArgs } from 'state/store' import { isPermit2Hop } from '../MultiHopTradeConfirm/hooks/helpers' import { SharedConfirmFooter } from '../SharedConfirm/SharedConfirmFooter' -import { TradeStep } from './helpers' +import { StepperStep } from './helpers' import { useActiveTradeAllowance } from './hooks/useActiveTradeAllowance' import { useCurrentHopIndex } from './hooks/useCurrentHopIndex' -import { useTradeSteps } from './hooks/useTradeSteps' +import { useStepperSteps } from './hooks/useStepperSteps' import { TradeConfirmSummary } from './TradeConfirmFooterContent/TradeConfirmSummary' import { TradeFooterButton } from './TradeFooterButton' @@ -79,7 +79,7 @@ export const TradeConfirmFooter: FC = ({ .times(feeAssetUserCurrencyRate.price) .toFixed() - const { currentTradeStep } = useTradeSteps() + const { currentTradeStep } = useStepperSteps() const tradeResetStepSummary = useMemo(() => { return ( @@ -221,14 +221,14 @@ export const TradeConfirmFooter: FC = ({ // No trade step is active, quote is still to be confirmed case undefined: return - case TradeStep.FirstHopReset: - case TradeStep.LastHopReset: + case StepperStep.FirstHopReset: + case StepperStep.LastHopReset: return tradeResetStepSummary - case TradeStep.FirstHopApproval: - case TradeStep.LastHopApproval: + case StepperStep.FirstHopApproval: + case StepperStep.LastHopApproval: return tradeAllowanceStepSummary - case TradeStep.FirstHopSwap: - case TradeStep.LastHopSwap: + case StepperStep.FirstHopSwap: + case StepperStep.LastHopSwap: return tradeExecutionStepSummary default: return null diff --git a/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts b/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts index d2128877bfe..b0963b7f98d 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts +++ b/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts @@ -44,7 +44,7 @@ export const getHopExecutionStateSummaryStepTranslation = ( } } -type TradeStepParams = { +type StepperStepParams = { firstHopAllowanceApproval: ApprovalExecutionMetadata firstHopPermit2: Omit & { permit2Signature?: string | undefined @@ -58,7 +58,7 @@ type TradeStepParams = { isMultiHopTrade?: boolean } -export enum TradeStep { +export enum StepperStep { FirstHopReset = 'firstHopReset', FirstHopApproval = 'firstHopApproval', FirstHopSwap = 'firstHopSwap', @@ -68,7 +68,7 @@ export enum TradeStep { TradeComplete = 'tradeComplete', } -export const getTradeSteps = (params: TradeStepParams): Record => { +export const getStepperSteps = (params: StepperStepParams): Record => { const { firstHopAllowanceReset, firstHopAllowanceApproval, @@ -79,30 +79,30 @@ export const getTradeSteps = (params: TradeStepParams): Record { - return Object.values(getTradeSteps(params)).filter(Boolean).length +export const countStepperSteps = (params: StepperStepParams): number => { + return Object.values(getStepperSteps(params)).filter(Boolean).length } const isInApprovalState = (state: HopExecutionState): boolean => { @@ -111,35 +111,35 @@ const isInApprovalState = (state: HopExecutionState): boolean => { ) } -export const getCurrentTradeStep = ( +export const getCurrentStepperStep = ( currentHopIndex: number, hopExecutionState: HopExecutionState, -): TradeStep | undefined => { - if (hopExecutionState === HopExecutionState.Complete) return TradeStep.TradeComplete +): StepperStep | undefined => { + if (hopExecutionState === HopExecutionState.Complete) return StepperStep.TradeComplete if (hopExecutionState === HopExecutionState.Pending) return undefined if (currentHopIndex === 0) { if (hopExecutionState === HopExecutionState.AwaitingAllowanceReset) - return TradeStep.FirstHopReset - if (isInApprovalState(hopExecutionState)) return TradeStep.FirstHopApproval - if (hopExecutionState === HopExecutionState.AwaitingSwap) return TradeStep.FirstHopSwap + return StepperStep.FirstHopReset + if (isInApprovalState(hopExecutionState)) return StepperStep.FirstHopApproval + if (hopExecutionState === HopExecutionState.AwaitingSwap) return StepperStep.FirstHopSwap } else if (currentHopIndex === 1) { if (hopExecutionState === HopExecutionState.AwaitingAllowanceReset) - return TradeStep.LastHopReset - if (isInApprovalState(hopExecutionState)) return TradeStep.LastHopApproval - if (hopExecutionState === HopExecutionState.AwaitingSwap) return TradeStep.LastHopSwap + return StepperStep.LastHopReset + if (isInApprovalState(hopExecutionState)) return StepperStep.LastHopApproval + if (hopExecutionState === HopExecutionState.AwaitingSwap) return StepperStep.LastHopSwap } } -export const getCurrentTradeStepIndex = ( - params: TradeStepParams & { +export const getCurrentStepperStepIndex = ( + params: StepperStepParams & { currentHopIndex: number hopExecutionState: HopExecutionState }, ): number => { - const steps = getTradeSteps(params) + const steps = getStepperSteps(params) const activeSteps = Object.entries(steps).filter(([_, isActive]) => isActive) - const currentStep = getCurrentTradeStep(params.currentHopIndex, params.hopExecutionState) + const currentStep = getCurrentStepperStep(params.currentHopIndex, params.hopExecutionState) if (!currentStep) return params.hopExecutionState === HopExecutionState.Pending ? 0 : activeSteps.length - 1 diff --git a/src/components/MultiHopTrade/components/TradeConfirm/hooks/useTradeSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/hooks/useStepperSteps.tsx similarity index 86% rename from src/components/MultiHopTrade/components/TradeConfirm/hooks/useTradeSteps.tsx rename to src/components/MultiHopTrade/components/TradeConfirm/hooks/useStepperSteps.tsx index 7d893ddd0fd..040b974b3a3 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/hooks/useTradeSteps.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/hooks/useStepperSteps.tsx @@ -7,14 +7,14 @@ import { import { useAppSelector } from 'state/store' import { - countTradeSteps, - getCurrentTradeStep, - getCurrentTradeStepIndex, - getTradeSteps, + countStepperSteps, + getCurrentStepperStep, + getCurrentStepperStepIndex, + getStepperSteps, } from '../helpers' import { useCurrentHopIndex } from './useCurrentHopIndex' -export const useTradeSteps = () => { +export const useStepperSteps = () => { const activeTradeId = useAppSelector(selectActiveQuote)?.id const isMultiHopTrade = useAppSelector(selectIsActiveQuoteMultiHop) @@ -69,19 +69,19 @@ export const useTradeSteps = () => { ], ) - const tradeSteps = useMemo(() => getTradeSteps(params), [params]) - const totalSteps = useMemo(() => countTradeSteps(params), [params]) + const tradeSteps = useMemo(() => getStepperSteps(params), [params]) + const totalSteps = useMemo(() => countStepperSteps(params), [params]) const currentHopIndex = useCurrentHopIndex() const currentHopExecutionState = useMemo(() => { return currentHopIndex === 0 ? firstHopExecutionState : lastHopExecutionState }, [currentHopIndex, firstHopExecutionState, lastHopExecutionState]) const currentTradeStep = useMemo( - () => getCurrentTradeStep(currentHopIndex, currentHopExecutionState), + () => getCurrentStepperStep(currentHopIndex, currentHopExecutionState), [currentHopIndex, currentHopExecutionState], ) const currentTradeStepIndex = useMemo( () => - getCurrentTradeStepIndex({ + getCurrentStepperStepIndex({ ...params, currentHopIndex, hopExecutionState: currentHopExecutionState, From 250df681aaebddfeb77b7c60330067f2c64aa847 Mon Sep 17 00:00:00 2001 From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com> Date: Mon, 23 Dec 2024 15:59:12 +1100 Subject: [PATCH 4/4] fix: indictor error state --- .../components/StepperStep.tsx | 6 ++- src/components/Stepper.theme.ts | 49 +++++++++++++------ 2 files changed, 39 insertions(+), 16 deletions(-) diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/StepperStep.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/StepperStep.tsx index 8c9e37d9baa..271834e727d 100644 --- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/StepperStep.tsx +++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/StepperStep.tsx @@ -67,7 +67,11 @@ export const StepperStep = ({ stepIndicatorVariant = 'default', }: StepperStepProps) => { const { indicator: indicatorStyles } = useStyleConfig('Stepper', { - variant: isError ? 'error' : stepIndicatorVariant, + variant: isError + ? stepIndicatorVariant === 'innerSteps' + ? 'innerStepsError' + : 'error' + : stepIndicatorVariant, }) as { indicator: SystemStyleObject } return ( diff --git a/src/components/Stepper.theme.ts b/src/components/Stepper.theme.ts index a3ab8306c21..11e2edce439 100644 --- a/src/components/Stepper.theme.ts +++ b/src/components/Stepper.theme.ts @@ -37,6 +37,33 @@ const baseStyle = { bg: 'border.base', }, }, + innerSteps: { + step: { + '&[data-status=active]': { + bg: 'background.surface.raised.base', + borderRadius: '8px', + }, + }, + indicator: { + width: '20px', + height: '20px', + minWidth: '20px', + borderWidth: '3px', + // Override the throbbing animation + '&[data-status=active]:not(.step-pending)': { + animation: 'none', + }, + '&[data-status=active]': { + borderWidth: '3px', + }, + '&[data-status=incomplete]': { + borderWidth: '3px', + }, + '&[data-status=complete]': { + borderWidth: '3px', + }, + }, + }, } const variants = { @@ -55,30 +82,22 @@ const variants = { }, }, }, - innerSteps: { - step: { - '&[data-status=active]': { - bg: 'background.surface.raised.base', - borderRadius: '8px', - }, - }, + innerStepsError: { + ...baseStyle.innerSteps, indicator: { - width: '20px', - height: '20px', - minWidth: '20px', - borderWidth: '3px', - // Override the throbbing animation + ...baseStyle.innerSteps.indicator, '&[data-status=active]:not(.step-pending)': { animation: 'none', + borderWidth: '0', }, '&[data-status=active]': { - borderWidth: '3px', + borderWidth: '0', }, '&[data-status=incomplete]': { - borderWidth: '3px', + borderWidth: '0', }, '&[data-status=complete]': { - borderWidth: '3px', + borderWidth: '0', }, }, },