From b737d4f92d4fc9595757d34a75a54d61e6ad8cd9 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 13 Dec 2024 09:38:15 +0100 Subject: [PATCH 1/5] Update the acre badge --- .../MobileModeBanner/AcreAnimatedBadge.tsx | 160 ++++++++++++++++-- .../src/components/MobileModeBanner/index.tsx | 2 +- 2 files changed, 148 insertions(+), 14 deletions(-) diff --git a/dapp/src/components/MobileModeBanner/AcreAnimatedBadge.tsx b/dapp/src/components/MobileModeBanner/AcreAnimatedBadge.tsx index 82aa2ed16..f454455b4 100644 --- a/dapp/src/components/MobileModeBanner/AcreAnimatedBadge.tsx +++ b/dapp/src/components/MobileModeBanner/AcreAnimatedBadge.tsx @@ -7,9 +7,10 @@ function AcreAnimatedBadge(props: BoxProps) { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - ) } diff --git a/dapp/src/components/MobileModeBanner/index.tsx b/dapp/src/components/MobileModeBanner/index.tsx index aefba45dd..33524dde6 100644 --- a/dapp/src/components/MobileModeBanner/index.tsx +++ b/dapp/src/components/MobileModeBanner/index.tsx @@ -89,7 +89,7 @@ function MobileModeBanner(props: MobileModeBannerProps) { py={8} textAlign="center" > - +

Acre App live only on desktop for now. We're working with From 618b5182e33c7144fccd77e0d6a0b56ab9270c65 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Mon, 16 Dec 2024 08:58:35 +0100 Subject: [PATCH 2/5] Remove unneeded props for `AcreAnimatedBadge` --- dapp/src/components/MobileModeBanner/AcreAnimatedBadge.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/dapp/src/components/MobileModeBanner/AcreAnimatedBadge.tsx b/dapp/src/components/MobileModeBanner/AcreAnimatedBadge.tsx index f454455b4..f16de63fc 100644 --- a/dapp/src/components/MobileModeBanner/AcreAnimatedBadge.tsx +++ b/dapp/src/components/MobileModeBanner/AcreAnimatedBadge.tsx @@ -7,8 +7,6 @@ function AcreAnimatedBadge(props: BoxProps) { Date: Tue, 17 Dec 2024 09:43:11 +0100 Subject: [PATCH 3/5] Update typography to match the Style Guide --- dapp/src/components/AcrePointsClaimModal.tsx | 8 +- .../ConnectWalletButton.tsx | 10 +-- .../ConnectWalletStatusLabel.tsx | 9 +- dapp/src/components/GateModal.tsx | 13 ++- dapp/src/components/Header/ConnectWallet.tsx | 10 +-- dapp/src/components/MezoBeehiveModal.tsx | 26 +++--- .../src/components/MobileModeBanner/index.tsx | 21 +++-- .../ActionDurationEstimation.tsx | 10 +-- .../AcrePointsRewardEstimation.tsx | 12 ++- .../StakingErrorModal/RetryModal.tsx | 22 +++-- .../StakingErrorModal/ServerErrorModal.tsx | 14 +-- .../BuildTransactionModal.tsx | 4 +- .../NotEnoughFundsModal.tsx | 10 +-- .../FeesTooltip/FeesTooltipItem.tsx | 7 +- .../TransactionModal/ResumeModal.tsx | 4 +- .../TransactionModal/SuccessModal.tsx | 18 ++-- .../WalletInteractionModal.tsx | 8 +- dapp/src/components/UnexpectedErrorModal.tsx | 4 +- dapp/src/components/WelcomeModal.tsx | 18 ++-- .../components/shared/FeesDetails/index.tsx | 16 ++-- .../shared/Pagination/PaginationStatus.tsx | 7 +- .../shared/TransactionDetails/index.tsx | 15 ++-- .../components/shared/Typography/index.tsx | 56 ------------ .../AcrePointsCard/AcrePointsLabel.tsx | 7 +- .../AcrePointsCard/UserPointsLabel.tsx | 9 +- .../DashboardPage/AcrePointsCard/index.tsx | 10 +-- .../DashboardPage/AcrePointsTemplateCard.tsx | 17 ++-- .../pages/DashboardPage/AcreTVLMessage.tsx | 13 ++- .../pages/DashboardPage/AcreTVLProgress.tsx | 8 +- dapp/src/pages/DashboardPage/BeehiveCard.tsx | 12 +-- .../pages/DashboardPage/PositionDetails.tsx | 12 ++- .../TransactionHistory/TransactionTable.tsx | 14 +-- .../TransactionHistory/index.tsx | 11 ++- dapp/src/theme/headingTheme.ts | 86 +++++++++++++------ dapp/src/theme/index.ts | 2 + dapp/src/theme/progressTheme.ts | 4 +- dapp/src/theme/textTheme.ts | 62 +++++++++++++ dapp/src/theme/utils/typography.ts | 24 +++--- 38 files changed, 350 insertions(+), 263 deletions(-) delete mode 100644 dapp/src/components/shared/Typography/index.tsx create mode 100644 dapp/src/theme/textTheme.ts diff --git a/dapp/src/components/AcrePointsClaimModal.tsx b/dapp/src/components/AcrePointsClaimModal.tsx index b7836c318..e0a161be0 100644 --- a/dapp/src/components/AcrePointsClaimModal.tsx +++ b/dapp/src/components/AcrePointsClaimModal.tsx @@ -1,6 +1,6 @@ import React, { ReactNode, useEffect, useMemo, useState } from "react" import { useTimeout } from "#/hooks" -import { Box, Button, ModalBody, VStack } from "@chakra-ui/react" +import { Box, Button, ModalBody, Text, VStack } from "@chakra-ui/react" import { AnimationSequence, motion, @@ -11,7 +11,6 @@ import { logPromiseFailure, numbersUtils } from "#/utils" import { time } from "#/constants" import ConfettiExplosion from "react-confetti-explosion" import { BaseModalProps } from "#/types" -import { TextXl } from "./shared/Typography" import withBaseModal from "./ModalRoot/withBaseModal" import AnimatedNumber from "./shared/AnimatedNumber" @@ -153,12 +152,13 @@ function AcrePointsClaimModalBase({ {steps.map(([currentStepLabel, currentStepValue]) => ( - {currentStepLabel} - + - + {label} - + @@ -256,9 +256,9 @@ export default function ConnectWalletButton({ align="start" > - + Requires 2 actions: - + = { @@ -48,12 +47,14 @@ export default function ConnectWalletStatusLabel({ {icon} - {label} + + {label} + {isError && ( - Rejected by user + Rejected by user )} diff --git a/dapp/src/components/GateModal.tsx b/dapp/src/components/GateModal.tsx index 21188b9e1..7d17e0dd9 100644 --- a/dapp/src/components/GateModal.tsx +++ b/dapp/src/components/GateModal.tsx @@ -1,6 +1,11 @@ import React, { useCallback } from "react" -import { Link, ModalBody, ModalFooter, ModalHeader } from "@chakra-ui/react" -import { TextSm } from "#/components/shared/Typography" +import { + Link, + ModalBody, + ModalFooter, + ModalHeader, + Text, +} from "@chakra-ui/react" import { externalHref } from "#/constants" import { BaseModalProps } from "#/types" import { useAccessCode } from "#/hooks" @@ -29,7 +34,7 @@ export function GateModalBase({ closeModal }: BaseModalProps) { - + Don’t have a password? Contact us on{" "} Discord - + ) diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index d880ebbbb..c0c874c46 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -10,6 +10,7 @@ import { MenuItem, MenuList, StackDivider, + Text, useClipboard, useMultiStyleConfig, } from "@chakra-ui/react" @@ -21,7 +22,6 @@ import { useWallet, } from "#/hooks" import CurrencyBalance from "#/components/shared/CurrencyBalance" -import { TextMd } from "#/components/shared/Typography" import { BitcoinIcon } from "#/assets/icons" import { referralProgram, addressUtils } from "#/utils" import { motion } from "framer-motion" @@ -118,9 +118,9 @@ export default function ConnectWallet() { leftIcon={} rightIcon={isOpen ? : } > - + {addressUtils.truncateAddress(address)} - + {options.map( @@ -166,9 +166,9 @@ export default function ConnectWallet() { spacing={3} > - + {addressUtils.truncateAddress(address)} - + - Acre & Mezo + + Acre & Mezo + {data && ( -
+ {numbersUtils.numberToLocaleString(data.totalMats)} -
- MATS + + + MATS + )} - + Acre users are automatically part of the Mezo Points program as a group. - + @@ -86,11 +90,11 @@ function MezoBeehiveModalBase() { - + In the event of a reward distribution, your share is calculated by deposit amount and duration, and you can claim it directly from Acre. - + @@ -106,10 +110,10 @@ function MezoBeehiveModalBase() { rounded="lg" /> - + Mezo is the economic layer for Bitcoin with a mission to activate a trillion dollar opportunity. - + )} @@ -91,12 +96,12 @@ function MobileModeBanner(props: MobileModeBannerProps) { > -

+ Acre App live only on desktop for now. We're working with partners to bring it to mobile soon. -

+ - + Stay tuned on{" "} . We would love to hear from you. - + )} diff --git a/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx b/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx index 6be471b7b..d5391a41d 100644 --- a/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx +++ b/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx @@ -2,7 +2,7 @@ import React from "react" import { ActivityType } from "#/types" import { activitiesUtils } from "#/utils" import { useFormField } from "#/hooks" -import { TextMd } from "../shared/Typography" +import { Text } from "@chakra-ui/react" import { TOKEN_AMOUNT_FIELD_NAME } from "../shared/TokenAmountForm/TokenAmountFormBase" export default function ActionDurationEstimation({ @@ -15,11 +15,11 @@ export default function ActionDurationEstimation({ ) return ( - + Estimated duration  - + ~ {activitiesUtils.getEstimatedDuration(amount, type)} - - + + ) } diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx index a8b318714..5eab4cb9d 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx @@ -7,9 +7,9 @@ import { MenuItem, MenuList, StackProps, + Text, VStack, } from "@chakra-ui/react" -import { H4, TextMd } from "#/components/shared/Typography" import { numbersUtils } from "#/utils" import { IconChevronDown } from "@tabler/icons-react" import { TOKEN_AMOUNT_FIELD_NAME } from "#/components/shared/TokenAmountForm/TokenAmountFormBase" @@ -67,7 +67,9 @@ function AcrePointsRewardEstimation(props: StackProps) { return ( - Acre points you'll earn + + Acre points you'll earn + {({ isOpen }) => ( @@ -82,7 +84,7 @@ function AcrePointsRewardEstimation(props: StackProps) { _hover={{ bg: "gold.200" }} > - {selectedTierItem.label} + {selectedTierItem.label} -

+{numbersUtils.numberToLocaleString(estimatedReward)} PTS

+ + +{numbersUtils.numberToLocaleString(estimatedReward)} PTS + ) } diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx index f5b84cce0..5b591f81d 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx @@ -8,9 +8,9 @@ import { ModalBody, ModalFooter, ModalHeader, + Text, } from "@chakra-ui/react" import { CableWithPlugIcon } from "#/assets/icons" -import { TextMd, TextSm } from "#/components/shared/Typography" import IconWrapper from "#/components/shared/IconWrapper" import { timeUtils, numbersUtils } from "#/utils" import { useCountdown } from "#/hooks" @@ -63,22 +63,24 @@ export default function RetryModal({ isLoading, retry }: RetryModalProps) { - No worries—your funds are safe. + No worries—your funds are safe. - + An error occurred while processing your transaction. - + {isLoading ? ( - Retrying transaction... + + Retrying transaction... + ) : ( - Auto-retry in - + Auto-retry in + {label} - + - 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 27056f206..090a1c3db 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx @@ -9,9 +9,9 @@ import { ModalCloseButton, ModalFooter, ModalHeader, + Text, } from "@chakra-ui/react" import { CableWithPlugIcon } from "#/assets/icons" -import { TextMd } from "#/components/shared/Typography" import { externalHref } from "#/constants" import IconWrapper from "#/components/shared/IconWrapper" import { @@ -38,10 +38,10 @@ export default function ServerErrorModal({ - + Your deposit didn't go through but no worries, your funds are safe. - + diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx index f1bab86e9..39e0a638c 100644 --- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx @@ -7,11 +7,11 @@ import { ModalCloseButton, ModalHeader, VStack, + Text, } from "@chakra-ui/react" import { setStatus } from "#/store/action-flow" import { PROCESS_STATUSES } from "#/types" import { BitcoinsStackErrorIcon } from "#/assets/icons" -import { TextMd, TextXl } from "../../shared/Typography" import { Alert, AlertIcon } from "../../shared/Alert" import CurrencyBalance from "../../shared/CurrencyBalance" @@ -30,8 +30,8 @@ export default function NotEnoughFundsModal() { <> - + After this withdrawal, your balance will fall below the{" "} {" "} minimum required to initiate a withdrawal. Subsequent withdrawals will not be possible until a new deposit is made. - + diff --git a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx index 52650b44a..7b519abd8 100644 --- a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx +++ b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx @@ -1,9 +1,8 @@ import React from "react" -import { ListItem } from "@chakra-ui/react" +import { ListItem, Text } from "@chakra-ui/react" import CurrencyBalance, { CurrencyBalanceProps, } from "#/components/shared/CurrencyBalance" -import { TextSm } from "#/components/shared/Typography" import { currencies } from "#/constants" type FeesItemType = CurrencyBalanceProps & { @@ -17,7 +16,9 @@ export default function FeesTooltipItem({ }: FeesItemType) { return ( - {label} + + {label} + - Are you sure you want to cancel? + Are you sure you want to cancel?

+ ), content: (embeddedApp?: EmbedApp) => dappModeToContent[embeddedApp ?? "standalone"](), @@ -60,12 +60,12 @@ const steps = [ { id: 1, title: ( -

+ Battle-tested{" "} in the market -

+ ), content: () => ( @@ -79,12 +79,12 @@ const steps = [ { id: 2, title: ( -

+ One dashboard,{" "} endless rewards -

+ ), content: () => ( @@ -133,9 +133,9 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) { - + Welcome to Acre, - + {activeStepData.title} diff --git a/dapp/src/components/shared/FeesDetails/index.tsx b/dapp/src/components/shared/FeesDetails/index.tsx index 033074f95..a533d74b0 100644 --- a/dapp/src/components/shared/FeesDetails/index.tsx +++ b/dapp/src/components/shared/FeesDetails/index.tsx @@ -1,6 +1,5 @@ import React from "react" -import { HStack, ListItem, ListItemProps } from "@chakra-ui/react" -import { TextMd } from "../Typography" +import { HStack, ListItem, ListItemProps, Text } from "@chakra-ui/react" export type FeesDetailsItemProps = { label: string @@ -25,17 +24,24 @@ function FeesDetailsItem({ {...listItemProps} > - {label} - + {tooltip} - {value ? {value} : children} + {value ? ( + + {value} + + ) : ( + children + )} ) } diff --git a/dapp/src/components/shared/Pagination/PaginationStatus.tsx b/dapp/src/components/shared/Pagination/PaginationStatus.tsx index b08e5d359..b725ffe44 100644 --- a/dapp/src/components/shared/Pagination/PaginationStatus.tsx +++ b/dapp/src/components/shared/Pagination/PaginationStatus.tsx @@ -1,7 +1,6 @@ import React from "react" -import { TextProps } from "@chakra-ui/react" +import { Text, TextProps } from "@chakra-ui/react" import { usePagination } from "#/hooks" -import { TextSm } from "../Typography" // TODO: move to top level `utils` directory const getPaginationState = ( @@ -30,9 +29,9 @@ function PaginationStatus(props: PaginationStatusProps) { ) return ( - + {rangeStart}-{rangeEnd} out of {totalSize} {dataLabel} - + ) } diff --git a/dapp/src/components/shared/TransactionDetails/index.tsx b/dapp/src/components/shared/TransactionDetails/index.tsx index bdaf6552c..6bd93dd6c 100644 --- a/dapp/src/components/shared/TransactionDetails/index.tsx +++ b/dapp/src/components/shared/TransactionDetails/index.tsx @@ -1,6 +1,5 @@ import React from "react" -import { ListItem, ListItemProps } from "@chakra-ui/react" -import { TextMd } from "../Typography" +import { ListItem, ListItemProps, Text } from "@chakra-ui/react" export type TransactionDetailsItemProps = { label: string @@ -21,10 +20,16 @@ function TransactionDetailsItem({ alignItems="center" {...listItemProps} > - + {label} - - {value ? {value} : children} + + {value ? ( + + {value} + + ) : ( + children + )} ) } diff --git a/dapp/src/components/shared/Typography/index.tsx b/dapp/src/components/shared/Typography/index.tsx deleted file mode 100644 index 1e2080c48..000000000 --- a/dapp/src/components/shared/Typography/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from "react" -import { Heading, HeadingProps, Text, TextProps } from "@chakra-ui/react" - -export function H1(props: HeadingProps) { - return -} - -export function H2(props: HeadingProps) { - return -} - -export function H3(props: HeadingProps) { - return -} - -export function H4(props: HeadingProps) { - return -} - -export function H5(props: HeadingProps) { - return -} - -export function H6(props: HeadingProps) { - return -} - -export function TextXl(props: TextProps) { - return ( - - ) -} - -export function TextLg(props: TextProps) { - return ( - - ) -} - -export function TextMd(props: TextProps) { - return ( - - ) -} - -export function TextSm(props: TextProps) { - return ( - - ) -} - -export function TextXs(props: TextProps) { - return ( - - ) -} diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx index 62797243c..ef3281fa5 100644 --- a/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx +++ b/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx @@ -1,6 +1,5 @@ import React from "react" -import { TextMd } from "#/components/shared/Typography" -import { HStack } from "@chakra-ui/react" +import { HStack, Text } from "@chakra-ui/react" import Countdown from "#/components/shared/Countdown" import { logPromiseFailure } from "#/utils" import { useAcrePointsData, useUserPointsData } from "#/hooks" @@ -24,9 +23,9 @@ export function NextDropTimestampLabel() { return ( - + Next drop in - + {!data?.claimableBalance && ( - Please wait... + + Please wait... + )} - Your drop is being prepared. + Your drop is being prepared. - + {isConnected ? "Your" : "Total"} Acre points - + -

+ {isConnected ? formattedUserTotalBalance : formattedTotalPoolBalance} -

+ diff --git a/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx b/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx index 29065c8ee..4b8fcbe31 100644 --- a/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx +++ b/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx @@ -1,5 +1,4 @@ import React from "react" -import { TextLg, TextMd, TextSm } from "#/components/shared/Typography" import { Button, Card, @@ -11,6 +10,7 @@ import { Tag, TagLeftIcon, VStack, + Text, } from "@chakra-ui/react" import { acrePointsCardPlaceholder } from "#/assets/images" import UserDataSkeleton from "#/components/shared/UserDataSkeleton" @@ -27,7 +27,7 @@ export default function AcrePointsTemplateCard(props: CardProps) { {...props} > - Acre points + Acre points @@ -41,20 +41,21 @@ export default function AcrePointsTemplateCard(props: CardProps) { > - Coming soon - + - + Acre Points will be live soon! - - + + Stake now to secure your spot - + {/* TODO: Update `ButtonLink` component and 'link' Button theme variant */}