Merge remote-tracking branch 'origin/main' into test-fixtures

dapp/src/DApp.tsx

@@ -5,6 +5,7 @@ import theme from "./theme"
 import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
 import Header from "./components/Header"
 import Overview from "./components/Overview"
+import GlobalStyles from "./components/GlobalStyles"
 
 function DApp() {
   useDetectThemeMode()
@@ -24,6 +25,7 @@ function DAppProviders() {
     <LedgerWalletAPIProvider>
       <WalletContextProvider>
         <ChakraProvider theme={theme}>
+          <GlobalStyles />
           <DApp />
         </ChakraProvider>
       </WalletContextProvider>

dapp/src/components/GlobalStyles/index.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import { Global } from "@emotion/react"
+
+import SegmentRegular from "../../fonts/Segment-Regular.otf"
+import SegmentMedium from "../../fonts/Segment-Medium.otf"
+import SegmentSemiBold from "../../fonts/Segment-SemiBold.otf"
+import SegmentBold from "../../fonts/Segment-Bold.otf"
+import SegmentBlack from "../../fonts/Segment-Black.otf"
+
+export default function GlobalStyles() {
+  return (
+    <Global
+      styles={`
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentRegular}) format("opentype");
+          font-weight: 400;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentMedium}) format("opentype");
+          font-weight: 500;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentSemiBold}) format("opentype");
+          font-weight: 600;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBold}) format("opentype");
+          font-weight: 700;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBlack}) format("opentype");
+          font-weight: 900;
+          font-style: normal;
+        }
+      `}
+    />
+  )
+}

dapp/src/components/Header/ConnectWallet.tsx

@@ -1,12 +1,5 @@
 import React from "react"
-import {
-  Button,
-  HStack,
-  Icon,
-  Text,
-  Tooltip,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { Button, HStack, Icon, Text, Tooltip } from "@chakra-ui/react"
 import { Account } from "@ledgerhq/wallet-api-client"
 import { Bitcoin, Ethereum, Info } from "../../static/icons"
 import { BITCOIN } from "../../constants"
@@ -30,8 +23,9 @@ function ConnectButton({
   account,
   requestAccount,
 }: ConnectButtonsProps) {
-  const styles = !account ? { color: "error", borderColor: "error" } : undefined
-  const colorRightIcon = useColorModeValue("black", "grey.80")
+  const styles = !account
+    ? { color: "red.400", borderColor: "red.400" }
+    : undefined
 
   return (
     <Button
@@ -42,7 +36,7 @@ function ConnectButton({
         !account ? (
           // TODO: Add correct text for tooltip
           <Tooltip label="Template">
-            <Icon as={rightIcon} color={colorRightIcon} />
+            <Icon as={rightIcon} color="grey.700" />
           </Tooltip>
         ) : undefined
       }
@@ -60,7 +54,7 @@ export default function ConnectWallet() {
 
   return (
     <HStack spacing={4}>
-      <HStack>
+      <HStack display={{ base: "none", md: "flex" }}>
         <Text>Balance</Text>
         <Text as="b">
           {!btcAccount || btcAccount?.balance.isZero()

dapp/src/components/Header/index.tsx

@@ -1,11 +1,15 @@
 import React from "react"
-import { Flex } from "@chakra-ui/react"
+import { Flex, HStack, Icon } from "@chakra-ui/react"
 import ConnectWallet from "./ConnectWallet"
+import { AcreLogo } from "../../static/icons"
 
 export default function Header() {
   return (
-    <Flex justifyContent="end" p={6}>
-      <ConnectWallet />
-    </Flex>
+    <HStack as="header" p={6}>
+      <Icon as={AcreLogo} boxSize={20} />
+      <Flex ml="auto">
+        <ConnectWallet />
+      </Flex>
+    </HStack>
   )
 }

dapp/src/components/Overview/PositionDetails.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   Tooltip,
   Icon,
-  useColorModeValue,
   CardBody,
   Card,
   CardFooter,
@@ -22,7 +21,7 @@ export default function PositionDetails(props: CardProps) {
           <Text>Your positions</Text>
           {/* TODO: Add correct text for tooltip */}
           <Tooltip label="Template">
-            <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
+            <Icon as={Info} color="grey.700" />
           </Tooltip>
         </HStack>
         <Text>

dapp/src/components/Overview/Statistics.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../Typography"
+import { TextMd } from "../shared/Typography"
 
 export default function Statistics(props: CardProps) {
   return (

dapp/src/components/Overview/TransactionHistory.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../Typography"
+import { TextMd } from "../shared/Typography"
 
 export default function TransactionHistory(props: CardProps) {
   return (

dapp/src/components/Overview/index.tsx

@@ -14,7 +14,8 @@ import { USD } from "../../constants"
 import { ChevronRight } from "../../static/icons"
 
 export default function Overview() {
-  const bg = useColorModeValue("white", "grey.400")
+  // TODO: Create a custom theme for card component
+  const bg = useColorModeValue("gold.100", "gold.100")
   return (
     <Flex direction="column" gap={2} p={6}>
       <Flex justifyContent="space-between">

dapp/src/components/shared/Typography/index.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { Heading, HeadingProps, Text, TextProps } from "@chakra-ui/react"
+
+export function H1(props: HeadingProps) {
+  return <Heading as="h1" size={{ base: "6xl", md: "7xl" }} {...props} />
+}
+
+export function H2(props: HeadingProps) {
+  return <Heading as="h2" size={{ base: "5xl", md: "6xl" }} {...props} />
+}
+
+export function H3(props: HeadingProps) {
+  return <Heading as="h3" size={{ base: "4xl", md: "5xl" }} {...props} />
+}
+
+export function H4(props: HeadingProps) {
+  return <Heading as="h4" size={{ base: "3xl", md: "4xl" }} {...props} />
+}
+
+export function H5(props: HeadingProps) {
+  return <Heading as="h5" size={{ base: "2xl", md: "3xl" }} {...props} />
+}
+
+export function H6(props: HeadingProps) {
+  return <Heading as="h6" size={{ base: "xl", md: "2xl" }} {...props} />
+}
+
+export function TextXl(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xl" lineHeight="xl" {...props} />
+  )
+}
+
+export function TextLg(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="lg" lineHeight="lg" {...props} />
+  )
+}
+
+export function TextMd(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="md" lineHeight="md" {...props} />
+  )
+}
+
+export function TextSm(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="sm" lineHeight="sm" {...props} />
+  )
+}
+
+export function TextXs(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xs" lineHeight="xs" {...props} />
+  )
+}

dapp/src/static/icons/AcreLogo.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const AcreLogo = createIcon({
+  displayName: "AcreLogo",
+  viewBox: "0 0 120 71",
+  path: (
+    <path
+      d="M74.474 34.348H67.257V31.4056H74.5672C75.8322 31.4056 77.3102 31.4056 77.3102 32.8905C77.3102 34.3753 75.739 34.348 74.474 34.348ZM120 18.7097V51.3486C120 53.569 118.549 55.5034 116.445 56.0755L63.7284 70.5015C61.2916 71.169 58.7217 71.169 56.2716 70.5015L3.55526 56.0755C1.46471 55.5034 0 53.5554 0 51.3486V18.7097C0 16.462 1.49134 14.5004 3.62184 13.9555L56.498 0.442247C58.7883 -0.14351 61.1984 -0.14351 63.4887 0.442247L116.365 13.9555C118.495 14.5004 119.987 16.462 119.987 18.7097H120ZM39.3475 39.6062H35.5393L29.9068 31.4056H33.2889V29.0081H20.972V31.4056H24.3542L18.7217 39.6062H14.9134V42.0037H26.1651V39.6062H21.4381L22.9427 37.3994H31.3582L32.8629 39.6062H28.1358V42.0037H39.3875V39.6062H39.3475ZM59.1744 36.8H56.8309C56.245 38.1623 54.8202 39.9059 49.494 39.9059C44.1678 39.9059 41.8642 38.1078 41.8642 35.5059C41.8642 32.9041 44.2077 31.1059 49.2943 31.1059C54.3808 31.1059 56.2317 32.6044 57.0439 34.3072H59.0945V29.0081H56.9241V30.7109H56.8708C55.3662 29.5121 53.7017 28.5041 48.7217 28.5041C42.2636 28.5041 39.1345 31.4056 39.1345 35.5059C39.1345 39.6062 42.0639 42.5078 49.3076 42.5078C56.5513 42.5078 58.8948 39.6062 59.1877 36.8H59.1744ZM83.755 37.3994H81.5979C81.3981 38.7072 80.6791 39.7016 79.2543 39.7016C77.6831 39.7016 77.0972 39.1431 75.6724 36.9635L75.3529 36.4867C76.6977 36.3914 77.5766 36.2007 78.4687 35.683C79.3475 35.1654 79.9334 34.1982 79.9334 32.8087C79.9334 31.3103 79.3608 30.4112 78.5087 29.8936C77.5899 29.335 76.5113 29.0081 73.7816 29.0081H60.2929V31.4056H64.7936V39.6062H60.2929V42.0037H72.024V39.6062H67.257V36.5412H69.8136C72.4501 36.5412 72.6365 36.8273 73.9148 38.8025L74.3009 39.4019C75.5925 41.3771 76.6445 42.3988 79.3475 42.3988C82.0506 42.3988 83.6485 40.5598 83.7417 37.3994H83.755ZM105.087 28.9945H84.4474V31.392H88.5486V39.5926H84.4474V41.9901H105.087V36.6911H102.863V39.5926H91.0253V36.5548H96.1118V37.8898H98.2423V33.0948H96.1118V34.4298H91.0253V31.392H102.863V34.2935H105.087V28.9945ZM24.3276 35.3016H29.8802L27.0972 31.2558L24.3142 35.3016H24.3276Z"
+      fill="#F34900"
+    />
+  ),
+})

dapp/src/static/icons/index.ts

@@ -2,3 +2,4 @@ export * from "./Info"
 export * from "./Bitcoin"
 export * from "./Ethereum"
 export * from "./ChevronRight"
+export * from "./AcreLogo"

dapp/src/theme/Button.ts

@@ -8,15 +8,17 @@ const Button: ComponentSingleStyleConfig = {
   },
   variants: {
     solid: (props: StyleFunctionProps) => ({
-      backgroundColor: mode("black", "purple")(props),
+      // TODO: Update when the dark theme is ready
+      backgroundColor: mode("brand.400", "brand.400")(props),
       color: "white",
     }),
     outline: (props: StyleFunctionProps) => ({
-      color: mode("black", "grey.80")(props),
-      borderColor: mode("black", "grey.50")(props),
+      // TODO: Update when the dark theme is ready
+      color: mode("grey.700", "grey.700")(props),
+      borderColor: mode("grey.700", "grey.700")(props),
     }),
     link: (props: StyleFunctionProps) => ({
-      color: mode("black", "grey.50")(props),
+      color: mode("grey.700", "grey.700")(props),
       textDecoration: "underline",
     }),
   },

dapp/src/theme/Heading.ts

@@ -0,0 +1,32 @@
+import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+
+const Heading: ComponentSingleStyleConfig = {
+  sizes: {
+    "7xl": {
+      fontSize: "4.5rem",
+      lineHeight: "5.625rem",
+    },
+    "6xl": {
+      fontSize: "3.75rem",
+      lineHeight: "4.5rem",
+    },
+    "5xl": {
+      fontSize: "3rem",
+      lineHeight: "3.75rem",
+    },
+    "4xl": {
+      fontSize: "2.25rem",
+      lineHeight: "2.75rem",
+    },
+    "3xl": {
+      fontSize: "1.875rem",
+      lineHeight: "2.375rem",
+    },
+    "2xl": {
+      fontSize: "1.5rem",
+      lineHeight: "2rem",
+    },
+  },
+}
+
+export default Heading

dapp/src/theme/Switch.ts

@@ -5,10 +5,10 @@ const Switch: ComponentSingleStyleConfig = {
     track: {
       _checked: {
         _dark: {
-          bg: "purple",
+          bg: "grey.700",
         },
         _light: {
-          bg: "grey.200",
+          bg: "grey.700",
         },
       },
     },

dapp/src/theme/index.ts

@@ -2,28 +2,30 @@ import { StyleFunctionProps, Tooltip, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import Switch from "./Switch"
-import { colors, fontSizes, fontWeights, lineHeights } from "./utils"
+import { colors, fonts, lineHeights } from "./utils"
+import Heading from "./Heading"
 
 // Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
 // Let's override the defaultProps as follows.
 Tooltip.defaultProps = { ...Tooltip.defaultProps, hasArrow: true }
 
 const defaultTheme = {
   colors,
-  fontSizes,
-  fontWeights,
+  fonts,
   lineHeights,
   styles: {
     global: (props: StyleFunctionProps) => ({
       body: {
-        backgroundColor: mode("grey.100", "grey.300")(props),
-        color: mode("black", "grey.80")(props),
+        // TODO: Update when the dark theme is ready
+        backgroundColor: mode("gold.300", "gold.300")(props),
+        color: mode("grey.700", "grey.700")(props),
       },
     }),
   },
   components: {
     Button,
     Switch,
+    Heading,
   },
 }