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 {
+  Box,
+  Button,
+  Icon,
+  useMultiStyleConfig,
+  Image,
+  Card,
+  CardBody,
+  CardHeader,
+  CardFooter,
+  HStack,
+  Link,
+} from "@chakra-ui/react"
+import RightSidebar from "../../assets/images/right-sidebar-bg.png"
 import { useDocsDrawer, useSidebar } from "../../hooks"
+import { ArrowUpRight, ShieldPlusIcon } from "../../static/icons"
+import { TextMd, TextSm } from "../shared/Typography"
+
+const readMoreEarnings = "https://#"
+
+const BUTTONS = [
+  { label: "FAQ" },
+  { label: "Token Contract" },
+  { label: "Bridge Contract" },
+]
 
 export default function Sidebar() {
   const { isOpen } = useSidebar()
@@ -11,12 +34,65 @@ export default function Sidebar() {
     <Box
       as="aside"
       mt="header_height"
-      w={isOpen ? 80 : 0}
-      __css={styles.sidebarContainer}
+      __css={
+        isOpen
+          ? styles.expandedSidebarContainer
+          : styles.collapsedSidebarContainer
+      }
     >
       <Box __css={styles.sidebar}>
-        {/* TODO: Add a correct content for the sidebar */}
-        <Button onClick={openDocsDrawer}>Open a documentation</Button>
+        <Button
+          leftIcon={<Icon as={ArrowUpRight} boxSize={4} />}
+          onClick={openDocsDrawer}
+          variant="sidebar"
+          colorScheme="solid"
+        >
+          Docs
+        </Button>
+        <Card variant="sidebar">
+          <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="sidebar">
+          <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 }) => (
+          <Button
+            key={label}
+            marginTop="3"
+            variant="sidebar"
+            colorScheme="outline"
+            leftIcon={<Icon as={ArrowUpRight} boxSize={4} color="brand.400" />}
+            onClick={openDocsDrawer}
+          >
+            {label}
+          </Button>
+        ))}
       </Box>
     </Box>
   )

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

@@ -40,6 +40,45 @@ const Button: ComponentSingleStyleConfig = {
         bg: "transparent",
       },
     },
+    sidebar: (props: StyleFunctionProps) => {
+      const defaultStyles = {
+        justifyContent: "flex-start",
+        width: "100%",
+      }
+
+      if (props.colorScheme === "solid") {
+        return {
+          ...defaultStyles,
+          bg: "brand.400",
+          color: "white",
+          _hover: {
+            bg: "brand.500",
+          },
+          _active: {
+            bg: "brand.400",
+          },
+        }
+      }
+
+      if (props.colorScheme === "outline") {
+        return {
+          ...defaultStyles,
+          borderWidth: "2px",
+          bg: "gold.100",
+          borderRadius: "6px",
+          borderColor: "white",
+          borderStyle: "solid",
+          _hover: {
+            bg: "opacity.grey.700.05",
+          },
+          _active: {
+            bg: "transparent",
+          },
+        }
+      }
+
+      return defaultStyles
+    },
     card: (props: StyleFunctionProps) => {
       const defaultStyles = {
         borderWidth: "2px",

dapp/src/theme/Card.ts

@@ -10,6 +10,17 @@ const Card: ComponentSingleStyleConfig = {
       bg: "gold.200",
     },
   },
+  variants: {
+    sidebar: {
+      container: {
+        marginTop: "3",
+        bg: "gold.100",
+        borderColor: "white",
+        borderStyle: "solid",
+        borderRadius: "6px",
+      },
+    },
+  },
 }
 
 export default Card

dapp/src/theme/Sidebar.ts

@@ -5,19 +5,28 @@ const PARTS = ["sidebarContainer", "sidebar"]
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(PARTS)
 
+const sidebarWidth = 80
+
 const baseStyleSidebarContainer = defineStyle({
   top: 0,
   right: 0,
+  w: 0,
   h: "100vh",
   position: "fixed",
   overflow: "hidden",
   zIndex: "sidebar",
   transition: "width 0.3s",
 })
 
+const expandedBaseStyleSidebarContainer = defineStyle({
+  ...baseStyleSidebarContainer,
+  w: sidebarWidth,
+})
+
 const baseStyleSidebar = defineStyle({
   p: 4,
   height: "100%",
+  w: sidebarWidth,
   bg: "gold.200",
   borderTop: "2px",
   borderLeft: "2px",
@@ -26,7 +35,8 @@ const baseStyleSidebar = defineStyle({
 })
 
 const baseStyle = definePartsStyle({
-  sidebarContainer: baseStyleSidebarContainer,
+  collapsedSidebarContainer: baseStyleSidebarContainer,
+  expandedSidebarContainer: expandedBaseStyleSidebarContainer,
   sidebar: baseStyleSidebar,
 })