Right-hand sidebar for staking flow

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>
   )

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>
+  )
+}

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"
+    />
+  ),
+})

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"

dapp/src/theme/Button.ts

@@ -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",

dapp/src/theme/Card.ts

@@ -1,15 +1,43 @@
-import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+import {
+  ComponentSingleStyleConfig,
+  StyleFunctionProps,
+} from "@chakra-ui/react"
 
 const Card: ComponentSingleStyleConfig = {
   baseStyle: {
     container: {
       boxShadow: "none",
-      borderWidth: "2px",
       borderColor: "gold.100",
-      borderRadius: "xl",
       bg: "gold.200",
     },
   },
+  variants: {
+    elevated: ({ colorScheme }: StyleFunctionProps) => {
+      if (!colorScheme) return {}
+
+      return {
+        container: {
+          bg: "gold.100",
+          borderColor: "white",
+        },
+      }
+    },
+  },
+  sizes: {
+    md: {
+      container: {
+        borderWidth: "1px",
+      },
+    },
+    lg: {
+      container: {
+        borderWidth: "2px",
+      },
+    },
+  },
+  defaultProps: {
+    size: "lg",
+  },
 }
 
 export default Card

dapp/src/theme/Sidebar.ts

@@ -18,11 +18,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 baseStyle = definePartsStyle({

dapp/src/theme/utils/semanticTokens.ts

@@ -3,4 +3,7 @@ export const semanticTokens = {
     header_height: 24,
     modal_shift: 36,
   },
+  sizes: {
+    sidebar_width: 80,
+  },
 }