From 38f31be4e951560224e35a37981f83b0ab30fdb8 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 30 Oct 2024 10:39:37 +0100 Subject: [PATCH] Update UI of `SuccessModal` --- .../icons/LoadingSpinnerSuccessIcon.tsx | 43 +++- dapp/src/assets/icons/index.ts | 2 +- .../StakingErrorModal/index.tsx | 5 +- .../TransactionModal/SuccessModal.tsx | 189 ++++++------------ .../src/components/TransactionModal/index.tsx | 6 +- dapp/src/components/shared/Alert.tsx | 3 +- dapp/src/theme/Alert.ts | 4 +- dapp/src/theme/Modal.ts | 4 +- 8 files changed, 109 insertions(+), 147 deletions(-) diff --git a/dapp/src/assets/icons/LoadingSpinnerSuccessIcon.tsx b/dapp/src/assets/icons/LoadingSpinnerSuccessIcon.tsx index a4501cb14..3a064c125 100644 --- a/dapp/src/assets/icons/LoadingSpinnerSuccessIcon.tsx +++ b/dapp/src/assets/icons/LoadingSpinnerSuccessIcon.tsx @@ -1,26 +1,47 @@ import React from "react" import { createIcon } from "@chakra-ui/react" -export const LoadingSpinnerSuccessIcon = createIcon({ +export default createIcon({ displayName: "LoadingSpinnerSuccessIcon", - viewBox: "0 0 48 48", + viewBox: "0 0 56 56", defaultProps: { fill: "none", }, path: [ + + + , , - , + + + + + + + + , ], }) diff --git a/dapp/src/assets/icons/index.ts b/dapp/src/assets/icons/index.ts index 88b17c659..3e0d16e66 100644 --- a/dapp/src/assets/icons/index.ts +++ b/dapp/src/assets/icons/index.ts @@ -2,7 +2,7 @@ export * from "./Info" export * from "./ArrowUpRight" export * from "./AcreLogo" export * from "./Pause" -export * from "./LoadingSpinnerSuccessIcon" +export { default as LoadingSpinnerSuccessIcon } from "./LoadingSpinnerSuccessIcon" export * from "./BitcoinIcon" export * from "./CableWithPlugIcon" export * from "./MezoSignIcon" diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/index.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/index.tsx index e94cb4287..6316e68dd 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/index.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/index.tsx @@ -3,7 +3,6 @@ import { useActionFlowTxHash, useAppDispatch, useExecuteFunction, - useFetchActivities, useStakeFlowContext, } from "#/hooks" import { PROCESS_STATUSES } from "#/types" @@ -21,16 +20,14 @@ export default function StakingErrorModal({ }) { const { stake } = useStakeFlowContext() const dispatch = useAppDispatch() - const fetchActivities = useFetchActivities() const txHash = useActionFlowTxHash() const [isLoading, setIsLoading] = useState(false) const [isServerError, setIsServerError] = useState(false) const onStakeBTCSuccess = useCallback(() => { - logPromiseFailure(fetchActivities()) dispatch(setStatus(PROCESS_STATUSES.SUCCEEDED)) - }, [dispatch, fetchActivities]) + }, [dispatch]) const onStakeBTCError = useCallback(() => setIsServerError(true), []) diff --git a/dapp/src/components/TransactionModal/SuccessModal.tsx b/dapp/src/components/TransactionModal/SuccessModal.tsx index 6c60aeaf2..e03d49658 100644 --- a/dapp/src/components/TransactionModal/SuccessModal.tsx +++ b/dapp/src/components/TransactionModal/SuccessModal.tsx @@ -1,6 +1,5 @@ -import React, { ReactNode } from "react" +import React from "react" import { - Button, HStack, Icon, ModalBody, @@ -10,146 +9,86 @@ import { VStack, } from "@chakra-ui/react" import { LoadingSpinnerSuccessIcon } from "#/assets/icons" -import { - useActionFlowTokenAmount, - useActionFlowTxHash, - useModal, - useAllActivitiesCount, - useFetchActivities, - useAppNavigate, -} from "#/hooks" +import { useActionFlowTokenAmount, useActionFlowTxHash } from "#/hooks" import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion" -import { ACTION_FLOW_TYPES, ActionFlowType, MODAL_TYPES } from "#/types" -import { routerPath } from "#/router/path" +import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types" import { IconArrowUpRight } from "@tabler/icons-react" -import { logPromiseFailure } from "#/utils" -import { featureFlags } from "#/constants" -import { TextMd } from "../shared/Typography" -import Spinner from "../shared/Spinner" +import { getEstimatedDuration } from "#/utils" +import { Alert, AlertIcon, AlertDescription } from "#/components/shared/Alert" +import { TextMd, TextSm } from "../shared/Typography" import BlockExplorerLink from "../shared/BlockExplorerLink" -function StakeContent() { - const tokenAmount = useActionFlowTokenAmount() - const txHash = useActionFlowTxHash() - - return ( - <> - {tokenAmount && ( - - - - )} - {/* TODO: Update styles */} - {txHash && ( - - - View on Mempool - - - - )} - - ) -} - -function UnstakeContent() { - return ( - - You’ll receive your funds once the unstaking process is completed. Follow - the progress in your dashboard. - - ) -} - -const CONTENT: Record< - ActionFlowType, - { - heading: string - footer: string - renderComponent: () => ReactNode - } -> = { - [ACTION_FLOW_TYPES.STAKE]: { - heading: "Deposit received", - renderComponent: StakeContent, - footer: "The staking will continue in the background", - }, - [ACTION_FLOW_TYPES.UNSTAKE]: { - heading: "Withdrawal initiated", - renderComponent: UnstakeContent, - footer: "The unstaking will continue in the background", - }, -} - type SuccessModalProps = { type: ActionFlowType } export default function SuccessModal({ type }: SuccessModalProps) { - const { closeModal, openModal } = useModal() - const fetchActivities = useFetchActivities() - const navigate = useAppNavigate() - const allActivitiesCount = useAllActivitiesCount() - - const { heading, footer, renderComponent } = CONTENT[type] - - const handleCloseModal = () => { - closeModal() - navigate(routerPath.home) - - if (featureFlags.GAMIFICATION_ENABLED) { - // TODO: Temporary solution - Showing the welcome window should be done - // only once a season for new users. "New" can also refer to users who, - // in the past, may have deposited but withdrew their funds, losing their rewards. - // By making a new deposit, they will get their rewards back. - if (allActivitiesCount === 0) { - openModal(MODAL_TYPES.WELCOME) - } - } + const tokenAmount = useActionFlowTokenAmount() + const txHash = useActionFlowTxHash() - logPromiseFailure(fetchActivities()) - } + // TODO: We should use one type for flow and activity + const activityType = type === ACTION_FLOW_TYPES.STAKE ? "deposit" : "withdraw" return ( <> - {type === ACTION_FLOW_TYPES.UNSTAKE && } - {heading} + + + {ACTION_FLOW_TYPES.UNSTAKE === type + ? "Withdrawal initiated!" + : "Deposit received!"} + - - {renderComponent()} + + + {tokenAmount && ( + + + + )} + {ACTION_FLOW_TYPES.UNSTAKE === type && ( + + Funds will arrive in your wallet once the withdrawal is complete. + Track progress in your dashboard. + + )} + {ACTION_FLOW_TYPES.STAKE === type && txHash && ( + /* TODO: Update styles */ + + + + View on Mempool + + + + + )} - - - - - {footer} - + + + + + You can close this window. + The process will continue in the background. + + Estimated duration  ~{" "} + {getEstimatedDuration(tokenAmount?.amount ?? 0n, activityType)} + + + ) diff --git a/dapp/src/components/TransactionModal/index.tsx b/dapp/src/components/TransactionModal/index.tsx index 7c9381900..68add35cc 100644 --- a/dapp/src/components/TransactionModal/index.tsx +++ b/dapp/src/components/TransactionModal/index.tsx @@ -2,12 +2,14 @@ import React, { useEffect } from "react" import { StakeFlowProvider } from "#/contexts" import { useAppDispatch, + useFetchActivities, useIsSignedMessage, useSidebar, useTransactionModal, } from "#/hooks" import { ActionFlowType, BaseModalProps } from "#/types" import { resetState, setType } from "#/store/action-flow" +import { logPromiseFailure } from "#/utils" import ModalContentWrapper from "./ModalContentWrapper" import { ActiveFlowStep } from "./ActiveFlowStep" import withBaseModal from "../ModalRoot/withBaseModal" @@ -18,6 +20,7 @@ type TransactionModalProps = { type: ActionFlowType } & BaseModalProps function TransactionModalBase({ type, closeModal }: TransactionModalProps) { const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar() const dispatch = useAppDispatch() + const fetchActivities = useFetchActivities() useEffect(() => { dispatch(setType(type)) @@ -27,8 +30,9 @@ function TransactionModalBase({ type, closeModal }: TransactionModalProps) { useEffect(() => { return () => { dispatch(resetState()) + logPromiseFailure(fetchActivities()) } - }, [dispatch]) + }, [dispatch, fetchActivities]) useEffect(() => { openSideBar() diff --git a/dapp/src/components/shared/Alert.tsx b/dapp/src/components/shared/Alert.tsx index 162e38c88..53f82c406 100644 --- a/dapp/src/components/shared/Alert.tsx +++ b/dapp/src/components/shared/Alert.tsx @@ -38,7 +38,7 @@ const STATUSES = { }, loading: { icon: Spinner, - colorScheme: "grey", + colorScheme: "brand", }, } @@ -56,6 +56,7 @@ function AlertIcon(props: AlertProps) { ? { ...styles.spinner, ...styles.icon, + color: `${getStatusColorScheme(status)}.400`, } : styles.icon diff --git a/dapp/src/theme/Alert.ts b/dapp/src/theme/Alert.ts index b40b930d7..67c5d8a87 100644 --- a/dapp/src/theme/Alert.ts +++ b/dapp/src/theme/Alert.ts @@ -44,12 +44,12 @@ const variantSubtle = multiStyleConfig.definePartsStyle(({ colorScheme }) => { const variantElevated = multiStyleConfig.definePartsStyle(({ colorScheme }) => { const backgroundColor = getColorLevel(colorScheme, 200) const foregroundColor = getColorLevel("grey", 700) - const borderColor = getColorLevel(colorScheme, 300) + return { container: { [$backgroundColor.variable]: backgroundColor, - [$borderColor.variable]: borderColor, [$foregroundColor.variable]: foregroundColor, + border: "none", }, } }) diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index cd3120240..c86610968 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -35,8 +35,8 @@ const baseStyleOverlay = defineStyle({ const baseStyleHeader = defineStyle({ textAlign: "left", - fontSize: "lg", - lineHeight: "lg", + fontSize: "xl", + lineHeight: "xl", fontWeight: "bold", pt: 10, px: 10,