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="sm"
/>
-
+
Mezo is the economic layer for Bitcoin with a mission to
activate a trillion dollar opportunity.
-
+
-
+
Acre App is on
desktop!
-
+
{!forceOpen && (
- Info
+ Info
)}
@@ -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 c60e1b883..b78a467a9 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 2f4371a4a..9b79f6913 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.
-
+
- System status
+
+ System status
+
{/* TODO: ADD a tooltip */}
{/* */}
- Partial Outage
+
+ Partial Outage
+
Preparing withdrawal transaction...
- This may take a few minutes.
+ This may take a few minutes.
Cancel
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?
diff --git a/dapp/src/components/TransactionModal/SuccessModal.tsx b/dapp/src/components/TransactionModal/SuccessModal.tsx
index c910f7914..d4277769e 100644
--- a/dapp/src/components/TransactionModal/SuccessModal.tsx
+++ b/dapp/src/components/TransactionModal/SuccessModal.tsx
@@ -7,6 +7,7 @@ import {
ModalFooter,
ModalHeader,
VStack,
+ Text,
} from "@chakra-ui/react"
import { LoadingSpinnerSuccessIcon } from "#/assets/icons"
import { useActionFlowTokenAmount, useActionFlowTxHash } from "#/hooks"
@@ -15,7 +16,6 @@ import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types"
import { IconArrowUpRight } from "@tabler/icons-react"
import { activitiesUtils } from "#/utils"
import { Alert, AlertIcon, AlertDescription } from "#/components/shared/Alert"
-import { TextMd, TextSm } from "../shared/Typography"
import BlockExplorerLink from "../shared/BlockExplorerLink"
type SuccessModalProps = {
@@ -59,18 +59,18 @@ export default function SuccessModal({ type }: SuccessModalProps) {
)}
{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
-
+
@@ -81,15 +81,15 @@ export default function SuccessModal({ type }: SuccessModalProps) {
- You can close this window.
- The process will continue in the background.
-
+ You can close this window.
+ The process will continue in the background.
+
Estimated duration ~{" "}
{activitiesUtils.getEstimatedDuration(
tokenAmount?.amount ?? 0n,
activityType,
)}
-
+
diff --git a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx
index 8c3926d1f..42cd453a1 100644
--- a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx
+++ b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx
@@ -8,12 +8,12 @@ import {
HStack,
Progress,
ProgressProps,
+ Text,
} from "@chakra-ui/react"
import { AcreSignIcon } from "#/assets/icons"
import { useActionFlowType, useConnector, useIsEmbed } from "#/hooks"
import { ACTION_FLOW_TYPES, DappMode } from "#/types"
import { Alert, AlertIcon } from "../shared/Alert"
-import { TextMd } from "../shared/Typography"
const ICON_STYLES = {
boxSize: 14,
@@ -84,17 +84,17 @@ export default function WalletInteractionModal({
{...ICON_STYLES}
/>
-
+
{description(
actionType === ACTION_FLOW_TYPES.STAKE ? "deposit" : "withdraw",
embeddedApp ?? "standalone",
)}
-
+
{step === "awaiting-transaction" && (
- This may take up to a minute.
+ This may take up to a minute.
)}
diff --git a/dapp/src/components/UnexpectedErrorModal.tsx b/dapp/src/components/UnexpectedErrorModal.tsx
index 4ed214df5..31402966b 100644
--- a/dapp/src/components/UnexpectedErrorModal.tsx
+++ b/dapp/src/components/UnexpectedErrorModal.tsx
@@ -7,8 +7,8 @@ import {
ModalCloseButton,
ModalFooter,
ModalHeader,
+ Text,
} from "@chakra-ui/react"
-import { TextMd } from "#/components/shared/Typography"
import { externalHref } from "#/constants"
import { IconBrandDiscordFilled } from "@tabler/icons-react"
import { BaseModalProps } from "#/types"
@@ -22,7 +22,7 @@ export function UnexpectedErrorModalBase({ withCloseButton }: BaseModalProps) {
Unexpected error...
- Please try again.
+ Please try again.
+
Activate your BTC,{" "}
earn rewards
-
+
),
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 */}
@@ -25,13 +24,13 @@ export default function AcreTVLMessage(props: AcreTVLMessageProps) {
{tvl.isCapExceeded ? (
-
+
Deposit cap reached!
-
- Stay tuned for the next deposit cycle.
+
+ Stay tuned for the next deposit cycle.
) : (
-
+
remaining until deposit cap
-
+
)}
)
diff --git a/dapp/src/pages/DashboardPage/AcreTVLProgress.tsx b/dapp/src/pages/DashboardPage/AcreTVLProgress.tsx
index b9a2614c7..2ef4d5506 100644
--- a/dapp/src/pages/DashboardPage/AcreTVLProgress.tsx
+++ b/dapp/src/pages/DashboardPage/AcreTVLProgress.tsx
@@ -6,12 +6,12 @@ import {
VStack,
Grid,
Box,
+ Text,
} from "@chakra-ui/react"
import { useStatistics } from "#/hooks"
import { BitcoinIcon } from "#/assets/icons"
import CurrencyBalance from "#/components/shared/CurrencyBalance"
import ProgressBar from "#/components/shared/ProgressBar"
-import { TextMd, TextXs } from "#/components/shared/Typography"
type AcreTVLProgressProps = StackProps
@@ -45,15 +45,15 @@ export default function AcreTVLProgress(props: AcreTVLProgressProps) {
desiredDecimals={2}
/>
- Total value locked
+ Total value locked
{steps.map((value) => (
-
+
{value}
-
+
))}
diff --git a/dapp/src/pages/DashboardPage/BeehiveCard.tsx b/dapp/src/pages/DashboardPage/BeehiveCard.tsx
index a54c8f817..9147d9789 100644
--- a/dapp/src/pages/DashboardPage/BeehiveCard.tsx
+++ b/dapp/src/pages/DashboardPage/BeehiveCard.tsx
@@ -2,7 +2,6 @@ import React from "react"
import { MezoSignIcon } from "#/assets/icons"
import { beehiveIllustration } from "#/assets/images"
import TooltipIcon from "#/components/shared/TooltipIcon"
-import { H6, TextMd, TextSm } from "#/components/shared/Typography"
import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
import { useMats, useModal } from "#/hooks"
import { MODAL_TYPES } from "#/types"
@@ -18,6 +17,7 @@ import {
Highlight,
Image,
VStack,
+ Text,
} from "@chakra-ui/react"
export default function BeehiveCard(props: CardProps) {
@@ -31,7 +31,7 @@ export default function BeehiveCard(props: CardProps) {
return (
- Additional rewards
+ Additional rewards
-
+
Total collected mats from Mezo
@@ -51,11 +51,11 @@ export default function BeehiveCard(props: CardProps) {
boxSize={{ base: 4, md: 5 }}
rounded="full"
/>
-
+
{data && (
-
+
{numbersUtils.numberToLocaleString(data.totalMats)}
-
+
)}
Read more
diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
index 8091581ba..ed48fd297 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -10,11 +10,17 @@ import {
useActivities,
} from "#/hooks"
import { ACTION_FLOW_TYPES } from "#/types"
-import { Button, ButtonProps, Flex, HStack, VStack } from "@chakra-ui/react"
+import {
+ Button,
+ ButtonProps,
+ Flex,
+ HStack,
+ VStack,
+ Text,
+} from "@chakra-ui/react"
import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip"
import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
import { featureFlags } from "#/constants"
-import { TextMd } from "#/components/shared/Typography"
import { IconClockHour5Filled } from "@tabler/icons-react"
import TooltipIcon from "#/components/shared/TooltipIcon"
import { activitiesUtils } from "#/utils"
@@ -54,7 +60,7 @@ export default function PositionDetails() {
{/* TODO: Component should be moved to `CardHeader` */}
- Your Acre balance
+ Your Acre balance
{activitiesUtils.hasPendingDeposits(activities ?? []) && (
-
{activity.type}
-
+
-
+
{timeUtils.displayBlockTimestamp(
activitiesUtils.getActivityTimestamp(activity),
)}
-
+
{activity.txHash ? (
- Details
+ Details
,
- You have no transactions yet!
+
+ You have no transactions yet!
+
)
@@ -33,7 +34,9 @@ function TransactionHistoryContent() {
export default function TransactionHistory(props: StackProps) {
return (
- Transactions
+
+ Transactions
+
)
diff --git a/dapp/src/theme/headingTheme.ts b/dapp/src/theme/headingTheme.ts
index e601d7f47..527e30c47 100644
--- a/dapp/src/theme/headingTheme.ts
+++ b/dapp/src/theme/headingTheme.ts
@@ -1,32 +1,62 @@
-import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
-const headingTheme: ComponentSingleStyleConfig = {
- sizes: {
- "7xl": {
- fontSize: "7xl",
- lineHeight: "7xl",
- },
- "6xl": {
- fontSize: "6xl",
- lineHeight: "6xl",
- },
- "5xl": {
- fontSize: "5xl",
- lineHeight: "5xl",
- },
- "4xl": {
- fontSize: "4xl",
- lineHeight: "4xl",
- },
- "3xl": {
- fontSize: "3xl",
- lineHeight: "3xl",
- },
- "2xl": {
- fontSize: "2xl",
- lineHeight: "2xl",
- },
+const baseStyle = defineStyle({
+ fontWeight: "medium",
+})
+
+const sizes = {
+ xs: {
+ fontSize: "xs",
+ lineHeight: "xs",
+ },
+ sm: {
+ fontSize: "sm",
+ lineHeight: "sm",
+ },
+ md: {
+ fontSize: "md",
+ lineHeight: "md",
+ },
+ lg: {
+ fontSize: "lg",
+ lineHeight: "lg",
+ },
+ xl: {
+ fontSize: "xl",
+ lineHeight: "xl",
+ },
+ "2xl": {
+ fontSize: "2xl",
+ lineHeight: "2xl",
+ },
+ "3xl": {
+ fontSize: "3xl",
+ lineHeight: "3xl",
+ },
+ "4xl": {
+ fontSize: "4xl",
+ lineHeight: "4xl",
+ },
+ "5xl": {
+ fontSize: "5xl",
+ lineHeight: "5xl",
+ },
+ "6xl": {
+ fontSize: "6xl",
+ lineHeight: "6xl",
+ },
+ "7xl": {
+ fontSize: "7xl",
+ lineHeight: "7xl",
+ },
+ "8xl": {
+ fontSize: "8xl",
+ lineHeight: "8xl",
+ },
+ "9xl": {
+ fontSize: "9xl",
+ lineHeight: "9xl",
},
}
-export default headingTheme
+export default defineStyleConfig({ baseStyle, sizes })
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index 9a3d43f68..6aeb6d06c 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -28,6 +28,7 @@ import spinnerTheme from "./spinnerTheme"
import tagTheme from "./tagTheme"
import tokenBalanceInputTheme from "./tokenBalanceInputTheme"
import tooltipTheme from "./tooltipTheme"
+import textTheme from "./textTheme"
const defaultTheme = {
// TODO: Remove when dark mode is ready
@@ -67,6 +68,7 @@ const defaultTheme = {
Countdown: countdownTheme,
Footer: footerTheme,
AcreTVLProgress: acreTVLProgressTheme,
+ Text: textTheme,
},
}
diff --git a/dapp/src/theme/progressTheme.ts b/dapp/src/theme/progressTheme.ts
index 3b332d23d..deba599ae 100644
--- a/dapp/src/theme/progressTheme.ts
+++ b/dapp/src/theme/progressTheme.ts
@@ -90,11 +90,11 @@ const baseStyle = multiStyleConfig.definePartsStyle((props) => ({
const sizes = {
lg: multiStyleConfig.definePartsStyle({
track: { h: 4 },
- label: { fontSize: "0.875em", lineHeight: 3, px: 1.5 },
+ label: { fontSize: "sm", lineHeight: "sm", px: 1.5 },
}),
xl: multiStyleConfig.definePartsStyle({
track: { h: 8 },
- label: { fontSize: "1.125em", lineHeight: 6, px: 3 },
+ label: { fontSize: "xl", lineHeight: "xl", px: 3 },
}),
"2xl": multiStyleConfig.definePartsStyle({
track: { h: 16 },
diff --git a/dapp/src/theme/textTheme.ts b/dapp/src/theme/textTheme.ts
new file mode 100644
index 000000000..527e30c47
--- /dev/null
+++ b/dapp/src/theme/textTheme.ts
@@ -0,0 +1,62 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+
+const baseStyle = defineStyle({
+ fontWeight: "medium",
+})
+
+const sizes = {
+ xs: {
+ fontSize: "xs",
+ lineHeight: "xs",
+ },
+ sm: {
+ fontSize: "sm",
+ lineHeight: "sm",
+ },
+ md: {
+ fontSize: "md",
+ lineHeight: "md",
+ },
+ lg: {
+ fontSize: "lg",
+ lineHeight: "lg",
+ },
+ xl: {
+ fontSize: "xl",
+ lineHeight: "xl",
+ },
+ "2xl": {
+ fontSize: "2xl",
+ lineHeight: "2xl",
+ },
+ "3xl": {
+ fontSize: "3xl",
+ lineHeight: "3xl",
+ },
+ "4xl": {
+ fontSize: "4xl",
+ lineHeight: "4xl",
+ },
+ "5xl": {
+ fontSize: "5xl",
+ lineHeight: "5xl",
+ },
+ "6xl": {
+ fontSize: "6xl",
+ lineHeight: "6xl",
+ },
+ "7xl": {
+ fontSize: "7xl",
+ lineHeight: "7xl",
+ },
+ "8xl": {
+ fontSize: "8xl",
+ lineHeight: "8xl",
+ },
+ "9xl": {
+ fontSize: "9xl",
+ lineHeight: "9xl",
+ },
+}
+
+export default defineStyleConfig({ baseStyle, sizes })
diff --git a/dapp/src/theme/utils/typography.ts b/dapp/src/theme/utils/typography.ts
index ce641de01..eb95fbf4f 100644
--- a/dapp/src/theme/utils/typography.ts
+++ b/dapp/src/theme/utils/typography.ts
@@ -1,15 +1,17 @@
const lineHeights = {
- "7xl": "5.625rem",
- "6xl": "4.5rem",
- "5xl": "3.75rem",
- "4xl": "2.75rem",
- "3xl": "2.375rem",
- "2xl": "2rem",
- xl: "1.875rem",
- lg: "1.75rem",
- md: "1.5rem",
- sm: "1.25rem",
- xs: "1.125rem",
+ "9xl": "7rem", // 112px
+ "8xl": "6rem", // 96px
+ "7xl": "4.75rem", // 76px
+ "6xl": "4rem", // 64px
+ "5xl": "3.25rem", // 52px
+ "4xl": "2.5rem", // 40px
+ "3xl": "2.125rem", // 34px
+ "2xl": "1.75rem", // 28px
+ xl: "1.5rem", // 24px
+ lg: "1.375rem", // 22px
+ md: "1.375rem", // 22px
+ sm: "1.125rem", // 18px
+ xs: "1rem", // 16px
}
const fonts = {