Merge branch 'main' of github.com:thesis/acre into new-color-palette

.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
 

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({
         <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

dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx

@@ -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"
@@ -197,7 +197,7 @@ export default function ConnectWalletButton({
       alignSelf="stretch"
       borderWidth={1}
       borderColor="surface.4"
-      rounded="lg"
+      rounded="sm"
       mb={3}
       _last={{ mb: 0 }}
       p={0}
@@ -215,7 +215,7 @@ export default function ConnectWalletButton({
                 src={connector.icon}
                 boxSize={6}
                 bg="black"
-                rounded="sm"
+                rounded="xs"
                 {...iconStyles[connector.id]}
               />
             }
@@ -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>
@@ -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"}`}

dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx

@@ -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 }> = {
@@ -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.50" textAlign="start">
           <Icon as={IconInfoCircle} boxSize={boxSize} />
-          <TextMd>Rejected by user</TextMd>
+          <Text size="md">Rejected by user</Text>
         </HStack>
       )}
     </HStack>

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) {
         <PasswordForm submitButtonText="Connect" onSubmitForm={onSubmitForm} />
       </ModalBody>
       <ModalFooter pt={0}>
-        <TextSm>
+        <Text size="sm">
           Don’t have a password? Contact us on{" "}
           <Link
             fontWeight="bold"
@@ -39,7 +44,7 @@ export function GateModalBase({ closeModal }: BaseModalProps) {
           >
             Discord
           </Link>
-        </TextSm>
+        </Text>
       </ModalFooter>
     </>
   )

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={<Icon as={BitcoinIcon} boxSize={6} color="acre.50" />}
             rightIcon={isOpen ? <IconChevronUp /> : <IconChevronDown />}
           >
-            <TextMd color="acre.50">
+            <Text size="md" color="acre.50">
               {addressUtils.truncateAddress(address)}
-            </TextMd>
+            </Text>
           </MenuButton>
           <MenuList bg="surface.3">
             {options.map(
@@ -166,9 +166,9 @@ export default function ConnectWallet() {
           spacing={3}
         >
           <Icon as={BitcoinIcon} boxSize={6} color="acre.50" />
-          <TextMd color="acre.50">
+          <Text size="md" color="acre.50">
             {addressUtils.truncateAddress(address)}
-          </TextMd>
+          </Text>
         </HStack>
 
         <HStack

dapp/src/components/MezoBeehiveModal.tsx

@@ -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"
@@ -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
@@ -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>
@@ -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>
 
@@ -103,13 +107,13 @@ function MezoBeehiveModalBase() {
             >
               <MezoSignIcon
                 boxSize="5.5rem" // 88px
-                rounded="lg"
+                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}