From fae299a9f317466adbc9d1b2d07adffa768e9128 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 20 Mar 2024 11:42:33 +0100 Subject: [PATCH 01/24] Create a `IconWrapper` component --- .../icons/{Bitcoin.tsx => BitcoinIcon.tsx} | 4 +- ...ctETHAccount.tsx => CableWithPlugIcon.tsx} | 32 ++------- dapp/src/assets/icons/ConnectBTCAccount.tsx | 65 ------------------- dapp/src/assets/icons/Ethereum.tsx | 23 ------- dapp/src/assets/icons/EthereumIcon.tsx | 31 +++++++++ dapp/src/assets/icons/index.ts | 7 +- dapp/src/components/Header/ConnectWallet.tsx | 4 +- .../MissingAccountModal.tsx | 7 +- .../ModalContentWrapper/index.tsx | 6 +- dapp/src/components/shared/IconWrapper.tsx | 21 ++++++ 10 files changed, 74 insertions(+), 126 deletions(-) rename dapp/src/assets/icons/{Bitcoin.tsx => BitcoinIcon.tsx} (96%) rename dapp/src/assets/icons/{ConnectETHAccount.tsx => CableWithPlugIcon.tsx} (57%) delete mode 100644 dapp/src/assets/icons/ConnectBTCAccount.tsx delete mode 100644 dapp/src/assets/icons/Ethereum.tsx create mode 100644 dapp/src/assets/icons/EthereumIcon.tsx create mode 100644 dapp/src/components/shared/IconWrapper.tsx diff --git a/dapp/src/assets/icons/Bitcoin.tsx b/dapp/src/assets/icons/BitcoinIcon.tsx similarity index 96% rename from dapp/src/assets/icons/Bitcoin.tsx rename to dapp/src/assets/icons/BitcoinIcon.tsx index c25918520..b98f2a8d3 100644 --- a/dapp/src/assets/icons/Bitcoin.tsx +++ b/dapp/src/assets/icons/BitcoinIcon.tsx @@ -1,8 +1,8 @@ import React from "react" import { createIcon } from "@chakra-ui/react" -export const Bitcoin = createIcon({ - displayName: "Bitcoin", +export const BitcoinIcon = createIcon({ + displayName: "BitcoinIcon", viewBox: "0 0 28 28", path: [ diff --git a/dapp/src/assets/icons/ConnectETHAccount.tsx b/dapp/src/assets/icons/CableWithPlugIcon.tsx similarity index 57% rename from dapp/src/assets/icons/ConnectETHAccount.tsx rename to dapp/src/assets/icons/CableWithPlugIcon.tsx index dfa2abb87..b460a843c 100644 --- a/dapp/src/assets/icons/ConnectETHAccount.tsx +++ b/dapp/src/assets/icons/CableWithPlugIcon.tsx @@ -1,8 +1,8 @@ import React from "react" import { createIcon } from "@chakra-ui/react" -export const ConnectETHAccount = createIcon({ - displayName: "ConnectETHAccount", +export const CableWithPlugIcon = createIcon({ + displayName: "CableWithPlugIcon", viewBox: "0 0 127 122", defaultProps: { fill: "none", @@ -13,35 +13,17 @@ export const ConnectETHAccount = createIcon({ stroke="url(#paint0_linear_3172_24686)" strokeWidth="2" />, - - - - - , , , , - - + + diff --git a/dapp/src/assets/icons/ConnectBTCAccount.tsx b/dapp/src/assets/icons/ConnectBTCAccount.tsx deleted file mode 100644 index 6ce8ef649..000000000 --- a/dapp/src/assets/icons/ConnectBTCAccount.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react" -import { createIcon } from "@chakra-ui/react" - -export const ConnectBTCAccount = createIcon({ - displayName: "ConnectBTCAccount", - viewBox: "0 0 127 122", - defaultProps: { - fill: "none", - }, - path: [ - , - - - - - , - , - , - , - , - - - - - - - - - , - ], -}) diff --git a/dapp/src/assets/icons/Ethereum.tsx b/dapp/src/assets/icons/Ethereum.tsx deleted file mode 100644 index 27cf854c6..000000000 --- a/dapp/src/assets/icons/Ethereum.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react" -import { createIcon } from "@chakra-ui/react" - -export const EthereumIcon = createIcon({ - displayName: "EthereumIcon", - viewBox: "0 0 24 25", - path: [ - - - - , - - - - - , - ], -}) diff --git a/dapp/src/assets/icons/EthereumIcon.tsx b/dapp/src/assets/icons/EthereumIcon.tsx new file mode 100644 index 000000000..633e86193 --- /dev/null +++ b/dapp/src/assets/icons/EthereumIcon.tsx @@ -0,0 +1,31 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const EthereumIcon = createIcon({ + displayName: "EthereumIcon", + viewBox: "0 0 56 57", + path: [ + + + + + , + + + + + , + ], +}) diff --git a/dapp/src/assets/icons/index.ts b/dapp/src/assets/icons/index.ts index 347ef098c..855a92790 100644 --- a/dapp/src/assets/icons/index.ts +++ b/dapp/src/assets/icons/index.ts @@ -1,12 +1,8 @@ export * from "./Info" -export * from "./Bitcoin" -export * from "./Ethereum" export * from "./ArrowUpRight" export * from "./ArrowLeft" export * from "./ArrowRight" export * from "./AcreLogo" -export * from "./ConnectBTCAccount" -export * from "./ConnectETHAccount" export * from "./AlertInfo" export * from "./stBTC" export * from "./BTC" @@ -19,3 +15,6 @@ export * from "./SortDESC" export * from "./Pause" export * from "./ChevronRight" export * from "./LoadingSpinnerSuccessIcon" +export * from "./BitcoinIcon" +export * from "./EthereumIcon" +export * from "./CableWithPlugIcon" diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index 26de7fbcc..9aee57748 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -7,7 +7,7 @@ import { } from "#/hooks" import { CurrencyBalance } from "#/components/shared/CurrencyBalance" import { TextMd } from "#/components/shared/Typography" -import { Bitcoin, EthereumIcon } from "#/assets/icons" +import { BitcoinIcon, EthereumIcon } from "#/assets/icons" import { Account } from "@ledgerhq/wallet-api-client" import { CURRENCY_ID_BITCOIN } from "#/constants" import { @@ -64,7 +64,7 @@ export default function ConnectWallet() { + + + Your funds are secure. + + + + ) +} diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx new file mode 100644 index 000000000..7a2de249f --- /dev/null +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx @@ -0,0 +1,71 @@ +import React from "react" +import { + Button, + Flex, + HStack, + Icon, + Link, + ModalBody, + ModalCloseButton, + ModalFooter, + ModalHeader, + Tooltip, +} from "@chakra-ui/react" +import { DiscordIcon, Info, ServerIcon } from "#/assets/icons" +import { TextMd } from "#/components/shared/Typography" +import { EXTERNAL_HREF } from "#/constants" +import IconWrapper from "#/components/shared/IconWrapper" + +export default function ServerErrorModal({ retry }: { retry: () => void }) { + return ( + <> + + + We're currently facing system issues. + + + + + + + Your deposit didn't go through but no worries, your funds are + safe. + + + + + + + System status + {/* TODO: ADD a tooltip */} + + + + + Partial Outage + + + + + ) +} diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/index.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/index.tsx new file mode 100644 index 000000000..23743ac46 --- /dev/null +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/index.tsx @@ -0,0 +1,49 @@ +import React, { useCallback, useState } from "react" +import { + useExecuteFunction, + useModalFlowContext, + useStakeFlowContext, +} from "#/hooks" +import { PROCESS_STATUSES } from "#/types" +import { logPromiseFailure } from "#/utils" +import LoadingModal from "../../ModalContentWrapper/LoadingModal" +import ServerErrorModal from "./ServerErrorModal" +import RetryModal from "./RetryModal" + +export default function StakingErrorModal() { + const { setStatus } = useModalFlowContext() + const { stake } = useStakeFlowContext() + + const [isLoading, setIsLoading] = useState(false) + const [isServerError, setIsServerError] = useState(false) + + const onStakeBTCSuccess = useCallback( + () => setStatus(PROCESS_STATUSES.SUCCEEDED), + [setStatus], + ) + + const onStakeBTCError = useCallback(() => setIsServerError(true), []) + + const handleStake = useExecuteFunction( + stake, + onStakeBTCSuccess, + onStakeBTCError, + ) + + const handleRetry = useCallback(async () => { + setIsLoading(true) + await handleStake() + setIsLoading(false) + }, [handleStake]) + + const handleRetryWrapper = useCallback( + () => logPromiseFailure(handleRetry()), + [handleRetry], + ) + + if (isLoading) return + + if (isServerError) return + + return +} diff --git a/dapp/src/components/TransactionModal/ModalContentWrapper/ErrorModal.tsx b/dapp/src/components/TransactionModal/ModalContentWrapper/ErrorModal.tsx new file mode 100644 index 000000000..bdc02ee5b --- /dev/null +++ b/dapp/src/components/TransactionModal/ModalContentWrapper/ErrorModal.tsx @@ -0,0 +1,9 @@ +import React from "react" +import { ActionFlowType } from "#/types" +import StakingErrorModal from "../ActiveStakingStep/StakingErrorModal" + +export default function ErrorModal({ type }: { type: ActionFlowType }) { + if (type === "stake") return + // TODO: Handle the case of unstake action + return null +} diff --git a/dapp/src/components/TransactionModal/ModalContentWrapper/index.tsx b/dapp/src/components/TransactionModal/ModalContentWrapper/index.tsx index 94f240a1c..92ca629bd 100644 --- a/dapp/src/components/TransactionModal/ModalContentWrapper/index.tsx +++ b/dapp/src/components/TransactionModal/ModalContentWrapper/index.tsx @@ -13,6 +13,7 @@ import MissingAccountModal from "./MissingAccountModal" import ResumeModal from "./ResumeModal" import SuccessModal from "./SuccessModal" import LoadingModal from "./LoadingModal" +import ErrorModal from "./ErrorModal" export default function ModalContentWrapper({ defaultType, @@ -55,5 +56,7 @@ export default function ModalContentWrapper({ if (status === PROCESS_STATUSES.SUCCEEDED) return + if (status === PROCESS_STATUSES.FAILED) return + return children } diff --git a/dapp/src/constants/externalHref.ts b/dapp/src/constants/externalHref.ts new file mode 100644 index 000000000..cdf77bfcf --- /dev/null +++ b/dapp/src/constants/externalHref.ts @@ -0,0 +1,4 @@ +export const EXTERNAL_HREF = { + // TODO: Add a correct link + DISCORD: "https://discord.com/", +} diff --git a/dapp/src/constants/index.ts b/dapp/src/constants/index.ts index 920e2c38b..653ef4777 100644 --- a/dapp/src/constants/index.ts +++ b/dapp/src/constants/index.ts @@ -2,3 +2,4 @@ export * from "./currency" export * from "./staking" export * from "./chains" export * from "./time" +export * from "./externalHref" diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index 027c9946b..69a7d7ec9 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -40,6 +40,11 @@ const baseStyleBody = defineStyle({ gap: 6, }) +const baseStyleFooter = defineStyle({ + flexDirection: "column", + gap: 6, +}) + const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) const baseStyle = multiStyleConfig.definePartsStyle({ @@ -48,6 +53,7 @@ const baseStyle = multiStyleConfig.definePartsStyle({ overlay: baseStyleOverlay, header: baseStyleHeader, body: baseStyleBody, + footer: baseStyleFooter, }) export const modalTheme = multiStyleConfig.defineMultiStyleConfig({ baseStyle }) From 1d2f698e28505fb3fc35784fa9b7dba21ff4f8dd Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 20 Mar 2024 14:23:58 +0100 Subject: [PATCH 03/24] Add automatic refresh of stake action after one minute If the user chooses not to retry, a message will inform them that we will automatically retry after a designated time ("x" duration). --- .../StakingErrorModal/RetryModal.tsx | 19 +++++++- dapp/src/hooks/index.ts | 1 + dapp/src/hooks/useCountdown.ts | 48 +++++++++++++++++++ dapp/src/types/index.ts | 1 + dapp/src/types/time.ts | 6 +++ dapp/src/utils/numbers.ts | 3 ++ dapp/src/utils/time.ts | 19 ++++++++ 7 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 dapp/src/hooks/useCountdown.ts create mode 100644 dapp/src/types/time.ts diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx index 19d76311a..7dd3c1e05 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React, { useMemo } from "react" import { Button, CloseButton, @@ -10,8 +10,23 @@ import { import { SecurityCheckIcon } from "#/assets/icons" import { TextMd, TextSm } from "#/components/shared/Typography" import IconWrapper from "#/components/shared/IconWrapper" +import { dateToUnixTimestamp } from "#/utils" +import { useCountdown } from "#/hooks" +import { ONE_MINUTE_IN_SECONDS, ONE_SEC_IN_MILLISECONDS } from "#/constants" + +export const getRetryTimestamp = () => { + const today = new Date() + const retryDate = new Date( + today.getTime() + ONE_MINUTE_IN_SECONDS * ONE_SEC_IN_MILLISECONDS, + ) + + return dateToUnixTimestamp(retryDate) +} export default function RetryModal({ retry }: { retry: () => void }) { + const retryTimestamp = useMemo(() => getRetryTimestamp(), []) + const data = useCountdown(retryTimestamp, true, retry) + return ( <> Oops! There was an error. @@ -24,7 +39,7 @@ export default function RetryModal({ retry }: { retry: () => void }) { safe. - Auto-retry in 0:59 + Auto-retry in {`0:${data.seconds}`} diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index 292568f86..20280b247 100644 --- a/dapp/src/hooks/index.ts +++ b/dapp/src/hooks/index.ts @@ -17,3 +17,4 @@ export * from "./useInitApp" export * from "./useCurrencyConversion" export * from "./useDepositTelemetry" export * from "./useFetchBTCPriceUSD" +export * from "./useCountdown" diff --git a/dapp/src/hooks/useCountdown.ts b/dapp/src/hooks/useCountdown.ts new file mode 100644 index 000000000..38f63d82a --- /dev/null +++ b/dapp/src/hooks/useCountdown.ts @@ -0,0 +1,48 @@ +import { useState, useEffect } from "react" +import { TimeUnits } from "#/types" +import { ONE_SEC_IN_MILLISECONDS } from "#/constants" +import { + addLeadingZero, + dateToUnixTimestamp, + unixTimestampToTimeUnits, +} from "../utils" + +export const useCountdown = ( + targetDateInUnix: number, + addLeadingZeroes?: boolean, + onComplete?: (targetDateInUnix: number) => void, +): TimeUnits => { + const [diff, setDiff] = useState(targetDateInUnix - dateToUnixTimestamp()) + + useEffect(() => { + const interval = setInterval(() => { + const newDiff = targetDateInUnix - dateToUnixTimestamp() + if (newDiff === 0) { + if (onComplete) { + onComplete(targetDateInUnix) + } + clearInterval(interval) + } + + setDiff(newDiff) + }, ONE_SEC_IN_MILLISECONDS) + + return () => clearInterval(interval) + }, [targetDateInUnix, onComplete]) + + let { days, hours, minutes, seconds } = unixTimestampToTimeUnits(diff) + + if (addLeadingZeroes) { + days = addLeadingZero(Number(days)) + hours = addLeadingZero(Number(hours)) + minutes = addLeadingZero(Number(minutes)) + seconds = addLeadingZero(Number(seconds)) + } + + return { + days, + hours, + minutes, + seconds, + } +} diff --git a/dapp/src/types/index.ts b/dapp/src/types/index.ts index 12a5dc7b3..962625b0a 100644 --- a/dapp/src/types/index.ts +++ b/dapp/src/types/index.ts @@ -10,3 +10,4 @@ export * from "./location" export * from "./charts" export * from "./activity" export * from "./coingecko" +export * from "./time" diff --git a/dapp/src/types/time.ts b/dapp/src/types/time.ts new file mode 100644 index 000000000..888fd0ffa --- /dev/null +++ b/dapp/src/types/time.ts @@ -0,0 +1,6 @@ +export type TimeUnits = { + days: string + hours: string + minutes: string + seconds: string +} diff --git a/dapp/src/utils/numbers.ts b/dapp/src/utils/numbers.ts index 70fa2c307..16e1b5f5a 100644 --- a/dapp/src/utils/numbers.ts +++ b/dapp/src/utils/numbers.ts @@ -206,3 +206,6 @@ export function getDesiredDecimals(amount: string | number, decimals: number) { const desiredDecimals = decimals - undecimaledAmount.length + 1 return desiredDecimals > 0 ? desiredDecimals : 2 } + +export const addLeadingZero = (num: number): string => + num >= 0 && num <= 9 ? `0${num}` : num.toString() diff --git a/dapp/src/utils/time.ts b/dapp/src/utils/time.ts index 30e6da46e..6b60de57b 100644 --- a/dapp/src/utils/time.ts +++ b/dapp/src/utils/time.ts @@ -7,10 +7,29 @@ import { ONE_WEEK_IN_SECONDS, ONE_YEAR_IN_SECONDS, } from "#/constants" +import { TimeUnits } from "#/types" export const dateToUnixTimestamp = (date: Date = new Date()) => Math.floor(date.getTime() / ONE_SEC_IN_MILLISECONDS) +export const unixTimestampToTimeUnits = (targetUnix: number): TimeUnits => { + const days = Math.floor(targetUnix / ONE_DAY_IN_SECONDS) + const hours = Math.floor( + (targetUnix % ONE_DAY_IN_SECONDS) / ONE_HOUR_IN_SECONDS, + ) + const minutes = Math.floor( + (targetUnix % ONE_HOUR_IN_SECONDS) / ONE_MINUTE_IN_SECONDS, + ) + const seconds = Math.floor(targetUnix % ONE_MINUTE_IN_SECONDS) + + return { + days: days.toString(), + hours: hours.toString(), + minutes: minutes.toString(), + seconds: seconds.toString(), + } +} + // unit, max diff, divisor const unitsToDivisor: [Intl.RelativeTimeFormatUnit, number, number][] = [ ["second", ONE_MINUTE_IN_SECONDS, 1], From 3e68b8c860fed262cd24691ad2ce49d8c3596264 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Thu, 21 Mar 2024 10:59:23 +0100 Subject: [PATCH 04/24] Remove the default icon for IconWrapper component --- .../ActiveStakingStep/StakingErrorModal/RetryModal.tsx | 4 ++-- .../StakingErrorModal/ServerErrorModal.tsx | 9 +++++++-- .../ModalContentWrapper/MissingAccountModal.tsx | 3 ++- dapp/src/components/shared/IconWrapper.tsx | 5 ++--- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx index 7dd3c1e05..5a648a470 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx @@ -7,7 +7,7 @@ import { ModalHeader, Text, } from "@chakra-ui/react" -import { SecurityCheckIcon } from "#/assets/icons" +import { CableWithPlugIcon, SecurityCheckIcon } from "#/assets/icons" import { TextMd, TextSm } from "#/components/shared/Typography" import IconWrapper from "#/components/shared/IconWrapper" import { dateToUnixTimestamp } from "#/utils" @@ -31,7 +31,7 @@ export default function RetryModal({ retry }: { retry: () => void }) { <> Oops! There was an error. - + diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx index 7a2de249f..50da26709 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx @@ -11,7 +11,12 @@ import { ModalHeader, Tooltip, } from "@chakra-ui/react" -import { DiscordIcon, Info, ServerIcon } from "#/assets/icons" +import { + CableWithPlugIcon, + DiscordIcon, + Info, + ServerIcon, +} from "#/assets/icons" import { TextMd } from "#/components/shared/Typography" import { EXTERNAL_HREF } from "#/constants" import IconWrapper from "#/components/shared/IconWrapper" @@ -24,7 +29,7 @@ export default function ServerErrorModal({ retry }: { retry: () => void }) { We're currently facing system issues. - + diff --git a/dapp/src/components/TransactionModal/ModalContentWrapper/MissingAccountModal.tsx b/dapp/src/components/TransactionModal/ModalContentWrapper/MissingAccountModal.tsx index 6ffab9928..b8826955f 100644 --- a/dapp/src/components/TransactionModal/ModalContentWrapper/MissingAccountModal.tsx +++ b/dapp/src/components/TransactionModal/ModalContentWrapper/MissingAccountModal.tsx @@ -13,6 +13,7 @@ import Alert from "#/components/shared/Alert" import { logPromiseFailure, getCurrencyByType } from "#/utils" import { CurrencyType, RequestAccountParams } from "#/types" import IconWrapper from "#/components/shared/IconWrapper" +import { CableWithPlugIcon } from "#/assets/icons" type MissingAccountModalProps = { currency: CurrencyType @@ -36,7 +37,7 @@ export default function MissingAccountModal({ {name} account not installed - + diff --git a/dapp/src/components/shared/IconWrapper.tsx b/dapp/src/components/shared/IconWrapper.tsx index 638548db6..fc35fcb42 100644 --- a/dapp/src/components/shared/IconWrapper.tsx +++ b/dapp/src/components/shared/IconWrapper.tsx @@ -1,14 +1,13 @@ import React from "react" import { Box, HStack, Icon, IconProps } from "@chakra-ui/react" -import { CableWithPlugIcon } from "#/assets/icons" type IconWrapperProps = { - icon?: typeof Icon + icon: typeof Icon children: React.ReactNode } & IconProps export default function IconWrapper({ - icon = CableWithPlugIcon, + icon, children, ...props }: IconWrapperProps) { From 3e89bc77e99026ec576ba51e01881e2662423b87 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Thu, 21 Mar 2024 11:15:12 +0100 Subject: [PATCH 05/24] Add documentation for `useCountdown` hook --- dapp/src/hooks/useCountdown.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/dapp/src/hooks/useCountdown.ts b/dapp/src/hooks/useCountdown.ts index 38f63d82a..cc8c71aef 100644 --- a/dapp/src/hooks/useCountdown.ts +++ b/dapp/src/hooks/useCountdown.ts @@ -7,6 +7,14 @@ import { unixTimestampToTimeUnits, } from "../utils" +/** + * It was decided to use an already implemented hook used by Threshold Network. + * Hook allows us to count down the time until the specified date and. + * After time has passed we can call the specified action. + * + * Source: + * https://github.com/threshold-network/components/blob/main/src/hooks/useCountdown.ts + */ export const useCountdown = ( targetDateInUnix: number, addLeadingZeroes?: boolean, From fa7c9e3495d343c0fa8598edcf78f2501c1d0a59 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Thu, 21 Mar 2024 11:53:54 +0100 Subject: [PATCH 06/24] Add reload icon to the refresh button --- dapp/src/assets/icons/ReloadIcon.tsx | 19 +++++++++++++++++++ dapp/src/assets/icons/index.ts | 1 + .../StakingErrorModal/ServerErrorModal.tsx | 7 ++++++- 3 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 dapp/src/assets/icons/ReloadIcon.tsx diff --git a/dapp/src/assets/icons/ReloadIcon.tsx b/dapp/src/assets/icons/ReloadIcon.tsx new file mode 100644 index 000000000..d8029dfdb --- /dev/null +++ b/dapp/src/assets/icons/ReloadIcon.tsx @@ -0,0 +1,19 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const ReloadIcon = createIcon({ + displayName: "ReloadIcon", + viewBox: "0 0 20 20", + defaultProps: { + fill: "none", + }, + path: [ + , + ], +}) diff --git a/dapp/src/assets/icons/index.ts b/dapp/src/assets/icons/index.ts index 2fb6b8323..0004778c6 100644 --- a/dapp/src/assets/icons/index.ts +++ b/dapp/src/assets/icons/index.ts @@ -21,3 +21,4 @@ export * from "./CableWithPlugIcon" export * from "./DiscordIcon" export * from "./ServerIcon" export * from "./SecurityCheckIcon" +export * from "./ReloadIcon" diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx index 50da26709..15e950ea1 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx @@ -15,6 +15,7 @@ import { CableWithPlugIcon, DiscordIcon, Info, + ReloadIcon, ServerIcon, } from "#/assets/icons" import { TextMd } from "#/components/shared/Typography" @@ -67,7 +68,11 @@ export default function ServerErrorModal({ retry }: { retry: () => void }) { Partial Outage - From cf7759e712d2ce89f7cef247ecd4045c0b5d9098 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Thu, 21 Mar 2024 12:59:44 +0100 Subject: [PATCH 07/24] Add a loading state for button in the server error modal window --- .../StakingErrorModal/ServerErrorModal.tsx | 10 +++++++++- .../ActiveStakingStep/StakingErrorModal/index.tsx | 5 +++-- dapp/src/theme/Button.ts | 7 +++++++ 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx index 15e950ea1..3a94641b0 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx @@ -22,7 +22,13 @@ import { TextMd } from "#/components/shared/Typography" import { EXTERNAL_HREF } from "#/constants" import IconWrapper from "#/components/shared/IconWrapper" -export default function ServerErrorModal({ retry }: { retry: () => void }) { +export default function ServerErrorModal({ + isLoading, + retry, +}: { + isLoading: boolean + retry: () => void +}) { return ( <> @@ -69,6 +75,8 @@ export default function ServerErrorModal({ retry }: { retry: () => void }) { Partial Outage - - - Your funds are secure. - + + + Your funds are secure. + ) diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx index b7c07d5fe..16fd2468a 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx @@ -11,17 +11,16 @@ import { ModalHeader, Tooltip, } from "@chakra-ui/react" -import { - CableWithPlugIcon, - DiscordIcon, - Info, - ReloadIcon, - ServerIcon, -} from "#/assets/icons" +import { CableWithPlugIcon, Info } from "#/assets/icons" import { TextMd } from "#/components/shared/Typography" import { EXTERNAL_HREF } from "#/constants" import IconWrapper from "#/components/shared/IconWrapper" import { MODAL_BASE_SIZE } from "#/components/shared/ModalBase" +import { + IconBrandDiscordFilled, + IconReload, + IconServerBolt, +} from "@tabler/icons-react" export default function ServerErrorModal({ isLoading, @@ -38,7 +37,7 @@ export default function ServerErrorModal({ - + Your deposit didn't go through but no worries, your funds are @@ -49,7 +48,7 @@ export default function ServerErrorModal({ size="lg" width="100%" variant="outline" - rightIcon={} + rightIcon={} href={EXTERNAL_HREF.DISCORD} isExternal > @@ -85,7 +84,7 @@ export default function ServerErrorModal({