New tBTC app modal refinements

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/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,
 }