diff --git a/.github/workflows/subgraph.yaml b/.github/workflows/subgraph.yaml
index d3082c88d..9c17ee2eb 100644
--- a/.github/workflows/subgraph.yaml
+++ b/.github/workflows/subgraph.yaml
@@ -97,7 +97,7 @@ jobs:
subgraph-test:
needs: [subgraph-codegen]
- runs-on: ubuntu-latest
+ runs-on: ubuntu-22.04
steps:
- uses: actions/checkout@v4
diff --git a/dapp/src/components/AcrePointsClaimModal.tsx b/dapp/src/components/AcrePointsClaimModal.tsx
index 3cb070a85..baf32284a 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{" "}
+
)
diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
index d6c6c9610..a47a922a4 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={
+
{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.
-
+
@@ -103,13 +107,13 @@ function MezoBeehiveModalBase() {
>
-
+
Mezo is the economic layer for Bitcoin with a mission to
activate a trillion dollar opportunity.
-
+
-
-
-
)
}
diff --git a/dapp/src/components/MobileModeBanner/index.tsx b/dapp/src/components/MobileModeBanner/index.tsx
index 695875d90..85c6b8717 100644
--- a/dapp/src/components/MobileModeBanner/index.tsx
+++ b/dapp/src/components/MobileModeBanner/index.tsx
@@ -7,12 +7,12 @@ import {
Flex,
Icon,
Link,
+ Text,
useDisclosure,
} from "@chakra-ui/react"
import { IconChevronDown } from "@tabler/icons-react"
import { AnimatePresence, motion } from "framer-motion"
import { externalHref } from "#/constants"
-import { H4, TextMd, TextXl } from "../shared/Typography"
import AcreAnimatedBadge from "./AcreAnimatedBadge"
import LiveTag from "../shared/LiveTag"
@@ -45,10 +45,15 @@ function MobileModeBanner(props: MobileModeBannerProps) {
{...restProps}
>
-
+
Acre App is
+
{!forceOpen && (
- Info
+ Info
)}
@@ -89,14 +94,14 @@ function MobileModeBanner(props: MobileModeBannerProps) {
py={8}
textAlign="center"
>
-
+
Acre App live only on desktop for now. We're working with
partners to bring it to mobile soon.
-
+
-
+
Stay tuned on{" "}
+
)}
diff --git a/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx b/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx
index d43d607ff..babaeac45 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 b5ef2e4c6..8a34749ca 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 }) => (
@@ -77,12 +79,12 @@ function AcrePointsRewardEstimation(props: StackProps) {
h="auto"
px={3}
py={1}
- rounded="2xl"
+ rounded="sm"
bg="surface.4"
_hover={{ bg: "surface.3" }}
>
- {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 65605f9b0..f16698d92 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 eafd6c9b4..0d3ec6909 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 ca72623eb..6db59cbfa 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{" "}
+
- {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 8b75cb8b4..fbca0d16a 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 6e08081c0..ba798837e 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 55b99895d..22990aef3 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}
@@ -172,7 +172,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
muted
loop
objectFit="cover"
- roundedRight="xl"
+ roundedRight="md"
outline="1px solid #f6ead5"
outlineOffset="-1px"
/>
diff --git a/dapp/src/components/shared/FeesDetails/index.tsx b/dapp/src/components/shared/FeesDetails/index.tsx
index db9c50915..03dc4f964 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/LiveTag.tsx b/dapp/src/components/shared/LiveTag.tsx
index cd137e706..e60db25b0 100644
--- a/dapp/src/components/shared/LiveTag.tsx
+++ b/dapp/src/components/shared/LiveTag.tsx
@@ -9,7 +9,7 @@ export default function LiveTag(props: TagProps) {
+
{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 f271bf203..f3da01e50 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
-
+
Next drop in
-
+
+
{children}
)
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
index dd02bd278..1d2a492fc 100644
--- a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
@@ -1,6 +1,5 @@
import React from "react"
-import { TextMd } from "#/components/shared/Typography"
-import { Button, HStack, VStack } from "@chakra-ui/react"
+import { Button, HStack, VStack, Text } from "@chakra-ui/react"
import { numbersUtils } from "#/utils"
import { useAcrePointsData, useClaimPoints, useUserPointsData } from "#/hooks"
import Spinner from "#/components/shared/Spinner"
@@ -46,11 +45,13 @@ function CalculationInProgressLabel() {
return (
{!data?.claimableBalance && (
- Please wait...
+
+ Please wait...
+
)}
Your drop is being prepared.
+ Your drop is being prepared.
-
+
{isConnected ? "Your" : "Total"} Acre points
-
+
-
+
{isConnected
? formattedUserTotalBalance
: formattedTotalPoolBalance}
-
+
- Acre points
+ Acre points
@@ -51,20 +51,21 @@ export default function AcrePointsTemplateCard(props: CardProps) {
as={IconPlayerTrackNextFilled}
color="oldPalette.brand.300"
/>
-
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 fd5814ac2..604242a0b 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 214bfb373..d3fa12607 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 ?? []) && (
{(pageData: Activity[]) =>
pageData.map((activity) => (
-
+
-
{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/alertTheme.ts b/dapp/src/theme/alertTheme.ts
index f6d165da9..431748403 100644
--- a/dapp/src/theme/alertTheme.ts
+++ b/dapp/src/theme/alertTheme.ts
@@ -13,7 +13,7 @@ const baseStyle = multiStyleConfig.definePartsStyle({
borderStyle: "solid",
borderColor: $borderColor.reference,
p: 4,
- rounded: "xl",
+ rounded: "sm",
},
title: {
fontWeight: "semibold",
diff --git a/dapp/src/theme/buttonTheme.ts b/dapp/src/theme/buttonTheme.ts
index 4afbe95c3..20f940f2c 100644
--- a/dapp/src/theme/buttonTheme.ts
+++ b/dapp/src/theme/buttonTheme.ts
@@ -29,12 +29,12 @@ const buttonTheme: ComponentSingleStyleConfig = {
md: {
fontSize: "sm",
py: 2,
- borderRadius: "md",
+ borderRadius: "sm",
},
lg: {
fontSize: "md",
py: 4,
- borderRadius: "lg",
+ borderRadius: "sm",
h: 14,
},
},
diff --git a/dapp/src/theme/cardTheme.ts b/dapp/src/theme/cardTheme.ts
index 132f88e0b..b3ed3a54c 100644
--- a/dapp/src/theme/cardTheme.ts
+++ b/dapp/src/theme/cardTheme.ts
@@ -6,7 +6,7 @@ const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
const baseStyleContainer = defineStyle({
boxShadow: "none",
bg: "surface.3",
- borderRadius: "xl",
+ borderRadius: "md",
p: 5,
})
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 5f3c9eaf2..6aeb6d06c 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -1,5 +1,12 @@
import { extendTheme } from "@chakra-ui/react"
-import { colors, typography, semanticTokens, styles, zIndices } from "./utils"
+import {
+ colors,
+ typography,
+ semanticTokens,
+ styles,
+ zIndices,
+ borderRadius,
+} from "./utils"
import acreTVLProgressTheme from "./acreTVLProgressTheme"
import alertTheme from "./alertTheme"
import buttonTheme from "./buttonTheme"
@@ -21,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
@@ -29,6 +37,7 @@ const defaultTheme = {
useSystemColorMode: false,
colors,
...typography,
+ ...borderRadius,
zIndices,
semanticTokens,
styles,
@@ -59,6 +68,7 @@ const defaultTheme = {
Countdown: countdownTheme,
Footer: footerTheme,
AcreTVLProgress: acreTVLProgressTheme,
+ Text: textTheme,
},
}
diff --git a/dapp/src/theme/modalTheme.ts b/dapp/src/theme/modalTheme.ts
index 9244c9e9a..906151a51 100644
--- a/dapp/src/theme/modalTheme.ts
+++ b/dapp/src/theme/modalTheme.ts
@@ -12,7 +12,7 @@ const baseStyleDialog = defineStyle({
},
marginBottom: 8,
boxShadow: "none",
- borderRadius: "xl",
+ borderRadius: "md",
p: { base: 5, sm: 0 },
bg: "surface.2",
border: "none",
diff --git a/dapp/src/theme/progressTheme.ts b/dapp/src/theme/progressTheme.ts
index 80f7905a8..7d944303f 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/skeletonTheme.ts b/dapp/src/theme/skeletonTheme.ts
index 1bb65d56e..e2fcc599d 100644
--- a/dapp/src/theme/skeletonTheme.ts
+++ b/dapp/src/theme/skeletonTheme.ts
@@ -4,7 +4,7 @@ const $startColor = cssVar("skeleton-start-color")
const $endColor = cssVar("skeleton-end-color")
const baseStyle = defineStyle({
- borderRadius: "lg",
+ borderRadius: "sm",
_light: {
[$startColor.variable]: "colors.surface.4",
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/tooltipTheme.ts b/dapp/src/theme/tooltipTheme.ts
index 4e18708be..21ddc43f9 100644
--- a/dapp/src/theme/tooltipTheme.ts
+++ b/dapp/src/theme/tooltipTheme.ts
@@ -26,14 +26,14 @@ const sizeXs = defineStyle({
py: 1,
fontSize: "xs",
lineHeight: "xs",
- borderRadius: "base",
+ borderRadius: "xs",
})
const sizeSm = defineStyle({
p: 3,
fontSize: "sm",
lineHeight: "sm",
- borderRadius: "lg",
+ borderRadius: "sm",
})
const sizes = {
diff --git a/dapp/src/theme/utils/borderRadius.ts b/dapp/src/theme/utils/borderRadius.ts
new file mode 100644
index 000000000..ffedd6b73
--- /dev/null
+++ b/dapp/src/theme/utils/borderRadius.ts
@@ -0,0 +1,9 @@
+export default {
+ radii: {
+ xs: "0.25rem", // 4px
+ sm: "0.5rem", // 8px
+ md: "0.75rem", // 12px
+ lg: "1rem", // 16px
+ xl: "1.25rem", // 20px
+ },
+}
diff --git a/dapp/src/theme/utils/index.ts b/dapp/src/theme/utils/index.ts
index d29f605b1..7246688a4 100644
--- a/dapp/src/theme/utils/index.ts
+++ b/dapp/src/theme/utils/index.ts
@@ -2,4 +2,5 @@ export { default as colors } from "./colors"
export { default as typography } from "./typography"
export { default as zIndices } from "./zIndices"
export { default as semanticTokens } from "./semanticTokens"
+export { default as borderRadius } from "./borderRadius"
export { default as styles } from "./styles"
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 = {