Skip to content

Commit

Permalink
Merge branch 'main' of github.com:thesis/acre into border-radius
Browse files Browse the repository at this point in the history
  • Loading branch information
kkosiorowska committed Dec 20, 2024
2 parents b7f1d42 + 244553b commit 7f03f2a
Show file tree
Hide file tree
Showing 38 changed files with 350 additions and 263 deletions.
8 changes: 4 additions & 4 deletions dapp/src/components/AcrePointsClaimModal.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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"

Expand Down Expand Up @@ -153,12 +152,13 @@ function AcrePointsClaimModalBase({
<VStack data-steps-list spacing={8}>
{steps.map(([currentStepLabel, currentStepValue]) => (
<Box key={currentStepLabel}>
<TextXl
<Text
size="xl"
fontWeight="semibold"
mb="5.25rem" // 84px
>
{currentStepLabel}
</TextXl>
</Text>

<Box
data-step-value
Expand Down
10 changes: 5 additions & 5 deletions dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ import {
Image,
ImageProps,
VStack,
Text,
} from "@chakra-ui/react"
import { IconArrowNarrowRight } from "@tabler/icons-react"
import { AnimatePresence, Variants, motion } from "framer-motion"
import ArrivingSoonTooltip from "../ArrivingSoonTooltip"
import { TextLg, TextMd } from "../shared/Typography"
import ConnectWalletStatusLabel from "./ConnectWalletStatusLabel"
import Spinner from "../shared/Spinner"
import { ConnectionAlert } from "./ConnectWalletAlert"
Expand Down Expand Up @@ -229,9 +229,9 @@ export default function ConnectWalletButton({
iconSpacing={4}
isDisabled={connector.isDisabled}
>
<TextLg flex={1} textAlign="start" fontWeight="semibold">
<Text size="lg" flex={1} textAlign="start" fontWeight="semibold">
{label}
</TextLg>
</Text>
</Button>
</ArrivingSoonTooltip>
</CardHeader>
Expand All @@ -256,9 +256,9 @@ export default function ConnectWalletButton({
align="start"
>
<Flex direction="column" gap={2} w="full">
<TextMd fontWeight="bold" textAlign="start">
<Text size="md" fontWeight="bold" textAlign="start">
Requires 2 actions:
</TextMd>
</Text>
<ConnectWalletStatusLabel
status={connectionStatus}
label={`Connect ${isEmbed ? "account" : "wallet"}`}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React from "react"
import { Status } from "#/types"
import { Box, HStack, Icon } from "@chakra-ui/react"
import { Box, HStack, Icon, Text } from "@chakra-ui/react"
import {
IconCircleCheck,
IconCircleX,
IconInfoCircle,
} from "@tabler/icons-react"
import { TextMd } from "../shared/Typography"
import Spinner from "../shared/Spinner"

const statusToLabelProps: Record<Status, { color: string }> = {
Expand Down Expand Up @@ -48,12 +47,14 @@ export default function ConnectWalletStatusLabel({
<HStack spacing={3}>
<HStack textAlign="start">
{icon}
<TextMd {...statusToLabelProps[status]}>{label}</TextMd>
<Text size="md" {...statusToLabelProps[status]}>
{label}
</Text>
</HStack>
{isError && (
<HStack color="red.400" textAlign="start">
<Icon as={IconInfoCircle} boxSize={boxSize} />
<TextMd>Rejected by user</TextMd>
<Text size="md">Rejected by user</Text>
</HStack>
)}
</HStack>
Expand Down
13 changes: 9 additions & 4 deletions dapp/src/components/GateModal.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -29,7 +34,7 @@ export function GateModalBase({ closeModal }: BaseModalProps) {
<PasswordForm submitButtonText="Connect" onSubmitForm={onSubmitForm} />
</ModalBody>
<ModalFooter pt={0}>
<TextSm>
<Text size="sm">
Don’t have a password? Contact us on{" "}
<Link
fontWeight="bold"
Expand All @@ -39,7 +44,7 @@ export function GateModalBase({ closeModal }: BaseModalProps) {
>
Discord
</Link>
</TextSm>
</Text>
</ModalFooter>
</>
)
Expand Down
10 changes: 5 additions & 5 deletions dapp/src/components/Header/ConnectWallet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
MenuItem,
MenuList,
StackDivider,
Text,
useClipboard,
useMultiStyleConfig,
} from "@chakra-ui/react"
Expand All @@ -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"
Expand Down Expand Up @@ -118,9 +118,9 @@ export default function ConnectWallet() {
leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="brand.400" />}
rightIcon={isOpen ? <IconChevronUp /> : <IconChevronDown />}
>
<TextMd color="brand.400">
<Text size="md" color="brand.400">
{addressUtils.truncateAddress(address)}
</TextMd>
</Text>
</MenuButton>
<MenuList bg="gold.200">
{options.map(
Expand Down Expand Up @@ -166,9 +166,9 @@ export default function ConnectWallet() {
spacing={3}
>
<Icon as={BitcoinIcon} boxSize={6} color="brand.400" />
<TextMd color="brand.400">
<Text size="md" color="brand.400">
{addressUtils.truncateAddress(address)}
</TextMd>
</Text>
</HStack>

<HStack
Expand Down
26 changes: 15 additions & 11 deletions dapp/src/components/MezoBeehiveModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import {
ModalCloseButton,
Link,
Flex,
Text,
} from "@chakra-ui/react"
import { H6, TextLg, TextMd, TextXl } from "#/components/shared/Typography"
import { AcreSignIcon, MatsIcon, MezoSignIcon } from "#/assets/icons"
import { IconArrowUpRight, IconChartPieFilled } from "@tabler/icons-react"
import { externalHref } from "#/constants"
Expand All @@ -28,7 +28,9 @@ function MezoBeehiveModalBase() {
<>
<ModalCloseButton />
<ModalHeader as={VStack} spacing={2.5} px={8} pt={8} pb={2.5}>
<TextXl fontWeight="bold">Acre & Mezo</TextXl>
<Text size="xl" fontWeight="bold">
Acre & Mezo
</Text>
<Flex alignItems="center">
<AcreSignIcon boxSize={10} rounded="full" />
<MatsIcon
Expand All @@ -46,16 +48,18 @@ function MezoBeehiveModalBase() {
<VStack spacing={1}>
{data && (
<HStack>
<H6 fontWeight="bold">
<Text size="2xl" fontWeight="bold">
{numbersUtils.numberToLocaleString(data.totalMats)}
</H6>
<TextLg fontWeight="bold">MATS</TextLg>
</Text>
<Text size="lg" fontWeight="bold">
MATS
</Text>
</HStack>
)}
<TextLg>
<Text size="lg">
Acre users are automatically part of the Mezo Points program as a
group.
</TextLg>
</Text>
</VStack>

<VStack>
Expand Down Expand Up @@ -86,11 +90,11 @@ function MezoBeehiveModalBase() {
</CardHeader>

<CardBody>
<TextMd lineHeight={5}>
<Text size="md">
In the event of a reward distribution, your share is calculated
by deposit amount and duration, and you can claim it directly
from Acre.
</TextMd>
</Text>
</CardBody>
</Card>

Expand All @@ -106,10 +110,10 @@ function MezoBeehiveModalBase() {
rounded="sm"
/>
<VStack align="start">
<TextMd lineHeight={5}>
<Text size="md">
Mezo is the economic layer for Bitcoin with a mission to
activate a trillion dollar opportunity.
</TextMd>
</Text>

<Button
as={Link}
Expand Down
21 changes: 13 additions & 8 deletions dapp/src/components/MobileModeBanner/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down Expand Up @@ -45,10 +45,15 @@ function MobileModeBanner(props: MobileModeBannerProps) {
{...restProps}
>
<Flex align="center" justify="center" p={4} bg="grey.700">
<TextMd color="gold.300" textAlign="center" whiteSpace="break-spaces">
<Text
size="md"
color="gold.300"
textAlign="center"
whiteSpace="break-spaces"
>
Acre App is <LiveTag color="brand.400" gap={1} px={1} py={0} /> on
desktop!
</TextMd>
</Text>

{!forceOpen && (
<Button
Expand All @@ -67,7 +72,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
h="auto"
ml={2}
>
<TextMd>Info</TextMd>
<Text size="md">Info</Text>
</Button>
)}
</Flex>
Expand All @@ -91,12 +96,12 @@ function MobileModeBanner(props: MobileModeBannerProps) {
>
<AcreAnimatedBadge mx="auto" mb={12} boxSize={44} />

<H4 mb={9} fontWeight="500">
<Text size="4xl" mb={9} fontWeight="500">
Acre App live only on desktop for now. We&apos;re working with
partners to bring it to mobile soon.
</H4>
</Text>

<TextXl lineHeight={9}>
<Text size="xl">
Stay tuned on{" "}
<Link
textDecoration="underline"
Expand All @@ -114,7 +119,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
Discord
</Link>
. We would love to hear from you.
</TextXl>
</Text>
</Box>
</MotionBox>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -15,11 +15,11 @@ export default function ActionDurationEstimation({
)

return (
<TextMd mt={4} color="grey.400">
<Text size="md" mt={4} color="grey.400">
Estimated duration&nbsp;
<TextMd as="span" color="grey.500">
<Text size="md" as="span" color="grey.500">
~ {activitiesUtils.getEstimatedDuration(amount, type)}
</TextMd>
</TextMd>
</Text>
</Text>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -67,7 +67,9 @@ function AcrePointsRewardEstimation(props: StackProps) {
return (
<VStack spacing={2} {...props}>
<HStack>
<TextMd fontWeight="semibold">Acre points you&apos;ll earn</TextMd>
<Text size="md" fontWeight="semibold">
Acre points you&apos;ll earn
</Text>

<Menu gutter={0} matchWidth offset={[0, -32]}>
{({ isOpen }) => (
Expand All @@ -82,7 +84,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
_hover={{ bg: "gold.200" }}
>
<HStack spacing={1}>
<TextMd>{selectedTierItem.label}</TextMd>
<Text size="md">{selectedTierItem.label}</Text>
<Icon
as={IconChevronDown}
boxSize={4}
Expand Down Expand Up @@ -129,7 +131,9 @@ function AcrePointsRewardEstimation(props: StackProps) {
</Menu>
</HStack>

<H4>+{numbersUtils.numberToLocaleString(estimatedReward)} PTS</H4>
<Text size="4xl">
+{numbersUtils.numberToLocaleString(estimatedReward)} PTS
</Text>
</VStack>
)
}
Expand Down
Loading

0 comments on commit 7f03f2a

Please sign in to comment.