Merge branch 'main' into eslint_rules_fix

thesis · Jan 18, 2024 · be2e74f · be2e74f
2 parents d2ead5b + 754369e
commit be2e74f
Show file tree

Hide file tree

Showing 24 changed files with 248 additions and 106 deletions.
diff --git a/dapp/src/assets/images/right-sidebar-bg.png b/dapp/src/assets/images/right-sidebar-bg.png
diff --git a/dapp/src/components/Sidebar/index.tsx b/dapp/src/components/Sidebar/index.tsx
@@ -1,6 +1,29 @@
 import React from "react"
-import { Box, Button, useMultiStyleConfig } from "@chakra-ui/react"
-import { useDocsDrawer, useSidebar } from "#/hooks"
+import {
+  Box,
+  Icon,
+  useMultiStyleConfig,
+  Image,
+  Card,
+  CardBody,
+  CardHeader,
+  CardFooter,
+  HStack,
+  Link,
+} from "@chakra-ui/react"
+import RightSidebar from "#/assets/images/right-sidebar-bg.png"
+import { useSidebar, useDocsDrawer } from "#/hooks"
+import { ShieldPlusIcon } from "#/static/icons"
+import { TextMd, TextSm } from "../shared/Typography"
+import ButtonLink from "../shared/ButtonLink"
+
+const readMoreEarnings = "https://#"
+
+const BUTTONS = [
+  { label: "FAQ" },
+  { label: "Token Contract" },
+  { label: "Bridge Contract" },
+]
 
 export default function Sidebar() {
   const { isOpen } = useSidebar()
@@ -11,12 +34,50 @@ export default function Sidebar() {
     <Box
       as="aside"
       mt="header_height"
-      w={isOpen ? 80 : 0}
+      w={isOpen ? "sidebar_width" : "0"}
       __css={styles.sidebarContainer}
     >
       <Box __css={styles.sidebar}>
-        {/* TODO: Add a correct content for the sidebar */}
-        <Button onClick={openDocsDrawer}>Open a documentation</Button>
+        <ButtonLink onClick={openDocsDrawer} variant="solid">
+          Docs
+        </ButtonLink>
+        <Card variant="elevated" colorScheme="gold" size="md">
+          <CardHeader padding="0">
+            <Image src={RightSidebar} alt="" width="70.5" height="40" />
+          </CardHeader>
+
+          <CardBody>
+            <TextMd alignSelf="stretch" fontWeight="bold">
+              Maximize your earnings by using tBTC to deposit and redeem BTC in
+              DeFi!
+            </TextMd>
+          </CardBody>
+
+          <CardFooter paddingTop="0">
+            <Link href={readMoreEarnings} isExternal>
+              <TextSm>Read more</TextSm>
+            </Link>
+          </CardFooter>
+        </Card>
+
+        <Card variant="elevated" colorScheme="gold" size="md">
+          <CardHeader>
+            <TextMd fontWeight="bold">How we calculate fees</TextMd>
+          </CardHeader>
+
+          <CardBody paddingTop="0">
+            <HStack gap="1">
+              <Icon as={ShieldPlusIcon} w={5} h={5} alignSelf="baseline" />
+              <TextSm>Fees is software empowered by the Threshold DAO.</TextSm>
+            </HStack>
+          </CardBody>
+        </Card>
+
+        {BUTTONS.map(({ label }) => (
+          <ButtonLink key={label} onClick={openDocsDrawer} colorScheme="gold">
+            {label}
+          </ButtonLink>
+        ))}
       </Box>
     </Box>
   )

diff --git a/dapp/src/components/shared/ButtonLink/index.tsx b/dapp/src/components/shared/ButtonLink/index.tsx
@@ -0,0 +1,34 @@
+import React from "react"
+import { Button, ButtonProps, Icon } from "@chakra-ui/react"
+import { ArrowUpRight } from "#/static/icons"
+
+type ButtonLinkProps = ButtonProps & {
+  icon?: typeof Icon
+  iconColor?: string
+}
+
+export default function ButtonLink({
+  children,
+  icon = ArrowUpRight,
+  iconColor = "brand.400",
+  variant = "outline",
+  ...props
+}: ButtonLinkProps) {
+  return (
+    <Button
+      variant={variant}
+      justifyContent="flex-start"
+      borderRadius="md"
+      leftIcon={
+        <Icon
+          as={icon}
+          boxSize={4}
+          color={variant === "solid" ? "white" : iconColor}
+        />
+      }
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}
diff --git a/dapp/src/static/icons/ShieldPlus.tsx b/dapp/src/static/icons/ShieldPlus.tsx
@@ -0,0 +1,17 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const ShieldPlusIcon = createIcon({
+  displayName: "ShieldPlusIcon",
+  viewBox: "0 0 20 20",
+  path: (
+    <path
+      d="M8.0013 10.1669V6.16691M6.0013 8.16691H10.0013M13.3346 8.50024C13.3346 11.7725 9.76533 14.1525 8.46663 14.9102C8.31903 14.9963 8.24524 15.0393 8.14109 15.0617C8.06026 15.079 7.94234 15.079 7.86152 15.0617C7.75737 15.0393 7.68357 14.9963 7.53598 14.9102C6.23728 14.1525 2.66797 11.7725 2.66797 8.50024V5.31197C2.66797 4.77897 2.66797 4.51246 2.75514 4.28338C2.83215 4.081 2.95729 3.90042 3.11974 3.75726C3.30363 3.5952 3.55317 3.50162 4.05224 3.31447L7.62677 1.97402C7.76537 1.92205 7.83467 1.89606 7.90596 1.88576C7.96919 1.87662 8.03341 1.87662 8.09665 1.88576C8.16794 1.89606 8.23724 1.92205 8.37583 1.97402L11.9504 3.31447C12.4494 3.50162 12.699 3.5952 12.8829 3.75726C13.0453 3.90042 13.1705 4.081 13.2475 4.28338C13.3346 4.51246 13.3346 4.77897 13.3346 5.31197V8.50024Z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+})
diff --git a/dapp/src/static/icons/index.ts b/dapp/src/static/icons/index.ts
@@ -6,3 +6,4 @@ export * from "./AcreLogo"
 export * from "./ConnectBTCAccount"
 export * from "./ConnectETHAccount"
 export * from "./AlertInfo"
+export * from "./ShieldPlus"
diff --git a/dapp/src/theme/Alert.ts b/dapp/src/theme/Alert.ts
@@ -73,6 +73,7 @@ const variants = {
   subtle: variantSubtle,
 }
 
-const Alert = multiStyleConfig.defineMultiStyleConfig({ baseStyle, variants })
-
-export default Alert
+export const alertTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+  variants,
+})
diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts
@@ -4,7 +4,7 @@ import {
 } from "@chakra-ui/react"
 
 // TODO: Update the button styles correctly when ready
-const Button: ComponentSingleStyleConfig = {
+export const buttonTheme: ComponentSingleStyleConfig = {
   baseStyle: {
     size: "md",
     borderRadius: "lg",
@@ -30,17 +30,29 @@ const Button: ComponentSingleStyleConfig = {
         bg: "brand.400",
       },
     },
-    outline: {
-      color: "grey.700",
-      borderColor: "grey.700",
-      _hover: {
-        bg: "opacity.grey.700.05",
-      },
-      _active: {
-        bg: "transparent",
-      },
+    outline: ({ colorScheme }: StyleFunctionProps) => {
+      const defaultStyles = {
+        color: "grey.700",
+        borderColor: "grey.700",
+        _hover: {
+          bg: "opacity.grey.700.05",
+        },
+        _active: {
+          bg: "transparent",
+        },
+      }
+      if (colorScheme === "gold") {
+        return {
+          ...defaultStyles,
+          bg: "gold.100",
+          borderColor: "white",
+          borderStyle: "solid",
+        }
+      }
+      return defaultStyles
     },
-    card: (props: StyleFunctionProps) => {
+    // FIXME: It should be removed and replaced by solid/outline variants
+    card: ({ colorScheme }: StyleFunctionProps) => {
       const defaultStyles = {
         borderWidth: "2px",
         borderColor: "gold.100",
@@ -54,7 +66,7 @@ const Button: ComponentSingleStyleConfig = {
         },
       }
 
-      if (props.colorScheme === "error") {
+      if (colorScheme === "error") {
         return {
           ...defaultStyles,
           color: "red.400",
@@ -67,5 +79,3 @@ const Button: ComponentSingleStyleConfig = {
     },
   },
 }
-
-export default Button
diff --git a/dapp/src/theme/Card.ts b/dapp/src/theme/Card.ts
@@ -1,15 +1,41 @@
-import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+import {
+  ComponentSingleStyleConfig,
+  StyleFunctionProps,
+} from "@chakra-ui/react"
 
-const Card: ComponentSingleStyleConfig = {
+export const cardTheme: ComponentSingleStyleConfig = {
   baseStyle: {
     container: {
       boxShadow: "none",
-      borderWidth: "2px",
       borderColor: "gold.100",
-      borderRadius: "xl",
       bg: "gold.200",
     },
   },
-}
+  variants: {
+    elevated: ({ colorScheme }: StyleFunctionProps) => {
+      if (!colorScheme) return {}
 
-export default Card
+      return {
+        container: {
+          bg: "gold.100",
+          borderColor: "white",
+        },
+      }
+    },
+  },
+  sizes: {
+    md: {
+      container: {
+        borderWidth: "1px",
+      },
+    },
+    lg: {
+      container: {
+        borderWidth: "2px",
+      },
+    },
+  },
+  defaultProps: {
+    size: "lg",
+  },
+}
diff --git a/dapp/src/theme/CurrencyBalance.ts b/dapp/src/theme/CurrencyBalance.ts
@@ -100,10 +100,8 @@ const sizes = {
   xl: sizeXl,
 }
 
-const CurrencyBalance = multiStyleConfig.defineMultiStyleConfig({
+export const currencyBalanceTheme = multiStyleConfig.defineMultiStyleConfig({
   baseStyle,
   variants,
   sizes,
 })
-
-export default CurrencyBalance
diff --git a/dapp/src/theme/Drawer.ts b/dapp/src/theme/Drawer.ts
@@ -28,6 +28,6 @@ const baseStyle = multiStyleConfig.definePartsStyle({
   overlay: baseStyleOverlay,
 })
 
-const Drawer = multiStyleConfig.defineMultiStyleConfig({ baseStyle })
-
-export default Drawer
+export const drawerTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+})
diff --git a/dapp/src/theme/Form.ts b/dapp/src/theme/Form.ts
@@ -15,6 +15,4 @@ const baseStyle = multiStyleConfig.definePartsStyle({
   helperText: baseStyleHelperText,
 })
 
-const Form = multiStyleConfig.defineMultiStyleConfig({ baseStyle })
-
-export default Form
+export const formTheme = multiStyleConfig.defineMultiStyleConfig({ baseStyle })
diff --git a/dapp/src/theme/FormError.ts b/dapp/src/theme/FormError.ts
@@ -13,6 +13,6 @@ const baseStyle = multiStyleConfig.definePartsStyle({
   text: baseStyleText,
 })
 
-const FormError = multiStyleConfig.defineMultiStyleConfig({ baseStyle })
-
-export default FormError
+export const formErrorTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+})
diff --git a/dapp/src/theme/FormLabel.ts b/dapp/src/theme/FormLabel.ts
@@ -20,6 +20,4 @@ const sizes = {
   lg: sizeLg,
 }
 
-const FormLabel = defineStyleConfig({ baseStyle, sizes })
-
-export default FormLabel
+export const formLabelTheme = defineStyleConfig({ baseStyle, sizes })
diff --git a/dapp/src/theme/Heading.ts b/dapp/src/theme/Heading.ts
@@ -1,6 +1,6 @@
 import { ComponentSingleStyleConfig } from "@chakra-ui/react"
 
-const Heading: ComponentSingleStyleConfig = {
+export const headingTheme: ComponentSingleStyleConfig = {
   sizes: {
     "7xl": {
       fontSize: "7xl",
@@ -28,5 +28,3 @@ const Heading: ComponentSingleStyleConfig = {
     },
   },
 }
-
-export default Heading
diff --git a/dapp/src/theme/Input.ts b/dapp/src/theme/Input.ts
@@ -38,6 +38,4 @@ const variants = {
   balance: variantBalance,
 }
 
-const Input = multiStyleConfig.defineMultiStyleConfig({ variants })
-
-export default Input
+export const inputTheme = multiStyleConfig.defineMultiStyleConfig({ variants })
diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts
@@ -50,6 +50,4 @@ const baseStyle = multiStyleConfig.definePartsStyle({
   body: baseStyleBody,
 })
 
-const Modal = multiStyleConfig.defineMultiStyleConfig({ baseStyle })
-
-export default Modal
+export const modalTheme = multiStyleConfig.defineMultiStyleConfig({ baseStyle })
diff --git a/dapp/src/theme/Sidebar.ts b/dapp/src/theme/Sidebar.ts
@@ -15,11 +15,15 @@ const baseStyleSidebarContainer = defineStyle({
 const baseStyleSidebar = defineStyle({
   p: 4,
   height: "100%",
+  w: "sidebar_width",
   bg: "gold.200",
   borderTop: "2px",
   borderLeft: "2px",
   borderColor: "gold.100",
   borderTopLeftRadius: "xl",
+  display: "flex",
+  flexDirection: "column",
+  gap: 3,
 })
 
 const multiStyleConfig = createMultiStyleConfigHelpers(PARTS)
@@ -29,6 +33,6 @@ const baseStyle = multiStyleConfig.definePartsStyle({
   sidebar: baseStyleSidebar,
 })
 
-const Sidebar = multiStyleConfig.defineMultiStyleConfig({ baseStyle })
-
-export default Sidebar
+export const sidebarTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+})
diff --git a/dapp/src/theme/Stepper.ts b/dapp/src/theme/Stepper.ts
@@ -72,6 +72,6 @@ const baseStyle = multiStyleConfig.definePartsStyle((props) => ({
   separator: baseStyleSeparator(props),
 }))
 
-const Stepper = multiStyleConfig.defineMultiStyleConfig({ baseStyle })
-
-export default Stepper
+export const stepperTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+})
diff --git a/dapp/src/theme/Switch.ts b/dapp/src/theme/Switch.ts
@@ -1,6 +1,6 @@
 import { ComponentSingleStyleConfig } from "@chakra-ui/react"
 
-const Switch: ComponentSingleStyleConfig = {
+export const switchTheme: ComponentSingleStyleConfig = {
   baseStyle: {
     track: {
       bg: "grey.700",
@@ -10,5 +10,3 @@ const Switch: ComponentSingleStyleConfig = {
     },
   },
 }
-
-export default Switch