Merge branch 'main' of github.com:thesis/acre into update-activities-…

…state

dapp/src/assets/icons/LoadingSpinnerSuccessIcon.tsx

@@ -3,22 +3,22 @@ import { createIcon } from "@chakra-ui/react"
 
 export const LoadingSpinnerSuccessIcon = createIcon({
   displayName: "LoadingSpinnerSuccessIcon",
-  viewBox: "0 0 72 73",
+  viewBox: "0 0 48 48",
   defaultProps: {
     fill: "none",
   },
   path: [
     <path
-      d="M68.625 36.5C68.625 40.7844 67.7811 45.0268 66.1416 48.985C64.502 52.9433 62.0989 56.5398 59.0694 59.5694C56.0398 62.5989 52.4433 65.002 48.485 66.6416C44.5268 68.2811 40.2844 69.125 36 69.125C31.7156 69.125 27.4732 68.2811 23.5149 66.6416C19.5567 65.002 15.9601 62.5989 12.9306 59.5694C9.90112 56.5398 7.49799 52.9433 5.85843 48.985C4.21887 45.0268 3.375 40.7844 3.375 36.5C3.375 32.2156 4.21887 27.9732 5.85843 24.0149C7.498 20.0567 9.90114 16.4601 12.9307 13.4306C15.9602 10.4011 19.5567 7.99798 23.515 6.35842C27.4732 4.71887 31.7156 3.875 36 3.875C40.2844 3.875 44.5268 4.71887 48.4851 6.35844C52.4433 7.998 56.0399 10.4011 59.0694 13.4307C62.0989 16.4602 64.502 20.0567 66.1416 24.015C67.7811 27.9732 68.625 32.2156 68.625 36.5L68.625 36.5Z"
+      d="M45.75 24C45.75 26.8563 45.1874 29.6845 44.0944 32.3234C43.0013 34.9622 41.3992 37.3599 39.3796 39.3796C37.3599 41.3992 34.9622 43.0013 32.3234 44.0944C29.6845 45.1874 26.8562 45.75 24 45.75C21.1437 45.75 18.3155 45.1874 15.6766 44.0944C13.0378 43.0013 10.6401 41.3992 8.62042 39.3796C6.60075 37.3599 4.99866 34.9622 3.90562 32.3234C2.81258 29.6845 2.25 26.8562 2.25 24C2.25 21.1437 2.81258 18.3155 3.90562 15.6766C4.99866 13.0378 6.60076 10.6401 8.62043 8.62042C10.6401 6.60075 13.0378 4.99866 15.6766 3.90562C18.3155 2.81258 21.1438 2.25 24 2.25C26.8563 2.25 29.6845 2.81258 32.3234 3.90562C34.9622 4.99867 37.3599 6.60076 39.3796 8.62044C41.3993 10.6401 43.0013 13.0378 44.0944 15.6766C45.1874 18.3155 45.75 21.1438 45.75 24L45.75 24Z"
       stroke="#EDD8A2"
       strokeWidth="3"
       strokeLinecap="round"
       strokeLinejoin="round"
     />,
     <path
-      d="M46.8031 29.3008L32.4031 43.7008L25.2031 37.1008"
-      stroke="#79CA52"
-      strokeWidth="4"
+      d="M31.2008 19.2002L21.6008 28.8002L16.8008 24.4002"
+      stroke="#318401"
+      strokeWidth="3"
       strokeLinecap="round"
       strokeLinejoin="round"
     />,

dapp/src/assets/icons/index.ts

@@ -5,7 +5,6 @@ export * from "./ArrowRight"
 export * from "./AcreLogo"
 export * from "./stBTC"
 export * from "./BTC"
-export * from "./ShieldPlus"
 export * from "./Pending"
 export * from "./Syncing"
 export * from "./Complete"

dapp/src/components/Layout.tsx

@@ -1,10 +1,10 @@
-import React from "react"
+import React, { useState } from "react"
 import { AnimatePresence, motion, Variants } from "framer-motion"
-import { useState } from "react"
 import { useLocation, useOutlet } from "react-router-dom"
 import DocsDrawer from "./DocsDrawer"
 import Header from "./Header"
 import Sidebar from "./Sidebar"
+import ModalRoot from "./ModalRoot"
 
 const wrapperVariants: Variants = {
   in: { opacity: 0, y: 48 },
@@ -39,6 +39,7 @@ function Layout() {
       </AnimatePresence>
       <Sidebar />
       <DocsDrawer />
+      <ModalRoot />
     </>
   )
 }

dapp/src/components/ModalRoot/index.tsx

@@ -0,0 +1,19 @@
+import React, { ElementType } from "react"
+import { useModal } from "#/hooks"
+import { ModalType } from "#/types"
+import TransactionModal from "../TransactionModal"
+
+const MODALS: Record<ModalType, ElementType> = {
+  STAKE: TransactionModal,
+  UNSTAKE: TransactionModal,
+} as const
+
+export default function ModalRoot() {
+  const { modalType, modalProps, closeModal } = useModal()
+
+  if (!modalType) {
+    return null
+  }
+  const SpecificModal = MODALS[modalType]
+  return <SpecificModal closeModal={closeModal} {...modalProps} />
+}

dapp/src/components/ModalRoot/withBaseModal.tsx

@@ -0,0 +1,29 @@
+import React, { ComponentType } from "react"
+import { Modal, ModalContent, ModalOverlay } from "@chakra-ui/react"
+import { BaseModalProps } from "#/types"
+
+export const MODAL_BASE_SIZE = "lg"
+
+function withBaseModal<T extends BaseModalProps>(
+  WrappedModalContent: ComponentType<T>,
+) {
+  return function ModalBase(props: T) {
+    const { closeModal } = props
+    return (
+      <Modal
+        isOpen
+        onClose={closeModal}
+        scrollBehavior="inside"
+        closeOnOverlayClick={false}
+        size={MODAL_BASE_SIZE}
+      >
+        <ModalOverlay mt="header_height" />
+        <ModalContent mt="modal_shift">
+          <WrappedModalContent {...props} />
+        </ModalContent>
+      </Modal>
+    )
+  }
+}
+
+export default withBaseModal

dapp/src/components/Sidebar.tsx

@@ -0,0 +1,81 @@
+import React from "react"
+import {
+  Box,
+  Card,
+  CardBody,
+  Flex,
+  useMultiStyleConfig,
+  Image,
+} from "@chakra-ui/react"
+import { useSidebar, useDocsDrawer } from "#/hooks"
+import rewardsBoostArrow from "#/assets/images/rewards-boost-arrow.svg"
+import mysteryBoxIcon from "#/assets/images/mystery-box.svg"
+import seasonKeyIcon from "#/assets/images/season-key.svg"
+import ButtonLink from "./shared/ButtonLink"
+import { TextSm } from "./shared/Typography"
+
+const BUTTONS = [
+  { label: "Docs", variant: "solid" },
+  { label: "FAQ", colorScheme: "gold" },
+  { label: "Token Contract", colorScheme: "gold" },
+  { label: "Bridge Contract", colorScheme: "gold" },
+]
+
+const BENEFITS = [
+  { label: "1x Rewards Boost", iconSrc: rewardsBoostArrow },
+  { label: "1x Mystery Box", iconSrc: mysteryBoxIcon },
+  { label: "1x Season Key", iconSrc: seasonKeyIcon },
+]
+
+export default function Sidebar() {
+  const { isOpen } = useSidebar()
+  const { onOpen: openDocsDrawer } = useDocsDrawer()
+  const styles = useMultiStyleConfig("Sidebar")
+
+  return (
+    <Box
+      as="aside"
+      mt="header_height"
+      w={isOpen ? "sidebar_width" : "0"}
+      __css={styles.sidebarContainer}
+    >
+      <Box __css={styles.sidebar}>
+        <TextSm fontWeight="bold">Rewards you’ll unlock</TextSm>
+
+        <Flex mt={2} mb={7} flexDir="column" gap={2}>
+          {BENEFITS.map(({ label, iconSrc }) => (
+            <Card
+              key={label}
+              bg="gold.300"
+              borderWidth="1px"
+              borderColor="white"
+            >
+              <CardBody
+                display="flex"
+                flexDirection="row"
+                justifyContent="space-between"
+                alignItems="center"
+                py={0}
+                px={4}
+              >
+                <TextSm fontWeight="semibold">{label}</TextSm>
+                <Image src={iconSrc} boxSize="3.75rem" />
+              </CardBody>
+            </Card>
+          ))}
+        </Flex>
+
+        {BUTTONS.map(({ label, variant, colorScheme }) => (
+          <ButtonLink
+            key={label}
+            onClick={openDocsDrawer}
+            variant={variant}
+            colorScheme={colorScheme}
+          >
+            {label}
+          </ButtonLink>
+        ))}
+      </Box>
+    </Box>
+  )
+}