Right-hand sidebar for staking flow

dapp/src/components/GlobalStyles/index.tsx

@@ -1,11 +1,11 @@
 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"
+import SegmentRegular from "../../assets/fonts/Segment-Regular.otf"
+import SegmentMedium from "../../assets/fonts/Segment-Medium.otf"
+import SegmentSemiBold from "../../assets/fonts/Segment-SemiBold.otf"
+import SegmentBold from "../../assets/fonts/Segment-Bold.otf"
+import SegmentBlack from "../../assets/fonts/Segment-Black.otf"
 
 export default function GlobalStyles() {
   return (

dapp/src/components/Sidebar/index.tsx

@@ -1,6 +1,30 @@
 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 ShieldPlusIcon from "../../assets/images/shield-plus.svg"
 import { useDocsDrawer, useSidebar } from "../../hooks"
+import { ArrowUpRight } 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()
@@ -15,8 +39,77 @@ export default function Sidebar() {
       __css={styles.sidebarContainer}
     >
       <Box __css={styles.sidebar}>
-        {/* TODO: Add a correct content for the sidebar */}
-        <Button onClick={openDocsDrawer}>Open a documentation</Button>
+        <Button
+          justifyContent="flex-start"
+          leftIcon={<Icon as={ArrowUpRight} boxSize={6} />}
+          onClick={openDocsDrawer}
+          width="100%"
+        >
+          Docs
+        </Button>
+        <Card
+          marginTop="3"
+          bg="gold.100"
+          borderColor="white"
+          borderStyle="solid"
+        >
+          <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
+          marginTop="3"
+          bg="gold.100"
+          borderColor="white"
+          borderStyle="solid"
+        >
+          <CardHeader>
+            <TextMd fontWeight="bold">How we calculate fees</TextMd>
+          </CardHeader>
+
+          <CardBody paddingTop="0">
+            <HStack>
+              <Image
+                alignSelf="baseline"
+                position="relative"
+                top="0.5"
+                src={ShieldPlusIcon}
+                alt=""
+              />
+              <TextSm>Fees is software empowered by the Threshold DAO.</TextSm>
+            </HStack>
+          </CardBody>
+        </Card>
+
+        {buttons.map(({ label }) => (
+          <Button
+            key={label}
+            marginTop="12px"
+            variant="outline"
+            justifyContent="flex-start"
+            leftIcon={<Icon as={ArrowUpRight} boxSize={6} color="brand.400" />}
+            onClick={openDocsDrawer}
+            width="100%"
+            bg="gold.100"
+            border="#ffffff solid"
+          >
+            {label}
+          </Button>
+        ))}
       </Box>
     </Box>
   )

dapp/src/theme/Sidebar.ts

@@ -18,6 +18,7 @@ const baseStyleSidebarContainer = defineStyle({
 const baseStyleSidebar = defineStyle({
   p: 4,
   height: "100%",
+  w: "19.75rem",
   bg: "gold.200",
   borderTop: "2px",
   borderLeft: "2px",