Merge pull request #630 from threshold-network/feature/new-tbtc-app-m…

…odal-refinements

New tBTC app modal refinements

Added "How it works" button for `NewTBTCApp` modal component. Reordered sub navigation links. Changed default page for tBTC section.

src/components/Modal/tBTC/NewTBTCApp.tsx

@@ -11,18 +11,19 @@ import {
   Flex,
   Image,
 } from "@threshold-network/components"
-import { TakeNoteList } from "../../tBTC"
-import withBaseModal from "../withBaseModal"
-import tbtcAppBannerIllustration from "../../../static/images/tBTCAppBannerWithGrid.svg"
 import { useTBTCTerms } from "../../../hooks/useTBTCTerms"
+import tbtcAppBannerIllustration from "../../../static/images/tBTCAppBannerWithGrid.svg"
 import { BaseModalProps } from "../../../types"
+import ButtonLink from "../../ButtonLink"
+import { TakeNoteList } from "../../tBTC"
+import withBaseModal from "../withBaseModal"
 
 const NewTBTCAppBase: FC<BaseModalProps> = ({ closeModal }) => {
   const { accept } = useTBTCTerms()
 
   return (
     <>
-      <ModalHeader></ModalHeader>
+      <ModalHeader />
       <ModalBody>
         <Image
           src={tbtcAppBannerIllustration}
@@ -43,7 +44,16 @@ const NewTBTCAppBase: FC<BaseModalProps> = ({ closeModal }) => {
         </BodySm>
         <Divider mt="2" />
       </ModalBody>
-      <ModalFooter>
+      <ModalFooter gap="4">
+        <ButtonLink
+          variant="outline"
+          to="/tBTC/how-it-works"
+          onClick={() => {
+            closeModal()
+          }}
+        >
+          How it Works
+        </ButtonLink>
         <Button
           onClick={() => {
             accept()

src/components/Sidebar/index.tsx

@@ -49,7 +49,7 @@ const Sidebar = () => {
         text: "tBTC",
         activeIcon: tBTCFill,
         passiveIcon: tBTCOutline,
-        href: "/tBTC",
+        href: "/tBTC/how-it-works",
       } as NavItemDetail)
     }
 

src/components/tBTC/TakeNoteList.tsx

@@ -60,17 +60,6 @@ export const TakeNoteList: FC<{ size?: "sm" | "md" }> = ({ size = "md" }) => {
           </ListItemWithIcon>
         </List>
       </ListItem>
-      <ListItem>
-        <LabelComponent mb="2">Bridging back btc is LIVE</LabelComponent>
-        <List spacing="2">
-          <ListItemWithIcon>
-            <BodyComponent>
-              You can bridge your BTC back whenever you want. Redemptions are
-              now live.
-            </BodyComponent>
-          </ListItemWithIcon>
-        </List>
-      </ListItem>
     </List>
   )
 }

src/pages/tBTC/index.tsx

@@ -12,7 +12,7 @@ const MainTBTCPage: PageComponent = (props) => {
 MainTBTCPage.route = {
   path: "tBTC",
   index: false,
-  pages: [TBTCBridge, HowItWorksPage, ExplorerPage],
+  pages: [HowItWorksPage, TBTCBridge, ExplorerPage],
   title: "tBTC",
   isPageEnabled: featureFlags.TBTC_V2,
 }