From 9d699560e5481593b8ef8b3c92e51df27eea12bc Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 2 Oct 2023 13:57:53 +0200
Subject: [PATCH 01/10] Add "How It Works" button to tBTC modal

---
 src/components/Modal/tBTC/NewTBTCApp.tsx | 33 ++++++++++++++++--------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/Modal/tBTC/NewTBTCApp.tsx b/src/components/Modal/tBTC/NewTBTCApp.tsx
index 98026a188..670c63b79 100644
--- a/src/components/Modal/tBTC/NewTBTCApp.tsx
+++ b/src/components/Modal/tBTC/NewTBTCApp.tsx
@@ -1,28 +1,30 @@
-import { FC } from "react"
 import {
+  BodyLg,
+  BodySm,
   Button,
   Divider,
+  Flex,
+  H5,
+  Image,
   ModalBody,
   ModalFooter,
   ModalHeader,
-  BodyLg,
-  H5,
-  BodySm,
-  Flex,
-  Image,
 } from "@threshold-network/components"
-import { TakeNoteList } from "../../tBTC"
-import withBaseModal from "../withBaseModal"
-import tbtcAppBannerIllustration from "../../../static/images/tBTCAppBannerWithGrid.svg"
+import { FC } from "react"
+import { useNavigate } from "react-router-dom"
 import { useTBTCTerms } from "../../../hooks/useTBTCTerms"
+import tbtcAppBannerIllustration from "../../../static/images/tBTCAppBannerWithGrid.svg"
 import { BaseModalProps } from "../../../types"
+import { TakeNoteList } from "../../tBTC"
+import withBaseModal from "../withBaseModal"
 
 const NewTBTCAppBase: FC<BaseModalProps> = ({ closeModal }) => {
   const { accept } = useTBTCTerms()
+  const navigate = useNavigate()
 
   return (
     <>
-      <ModalHeader></ModalHeader>
+      <ModalHeader />
       <ModalBody>
         <Image
           src={tbtcAppBannerIllustration}
@@ -43,7 +45,16 @@ const NewTBTCAppBase: FC<BaseModalProps> = ({ closeModal }) => {
         </BodySm>
         <Divider mt="2" />
       </ModalBody>
-      <ModalFooter>
+      <ModalFooter gap="4">
+        <Button
+          variant="outline"
+          onClick={() => {
+            navigate("/tBTC/how-it-works")
+            closeModal()
+          }}
+        >
+          How It Works
+        </Button>
         <Button
           onClick={() => {
             accept()

From c5984ba7290a284825bd33f89e8a802a30c46ac9 Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 2 Oct 2023 14:07:45 +0200
Subject: [PATCH 02/10] Implement SubNavigationPills items reordering

---
 src/components/SubNavigationPills/index.tsx | 20 ++++++++++++++++++--
 src/pages/PageLayout.tsx                    |  4 +++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/SubNavigationPills/index.tsx b/src/components/SubNavigationPills/index.tsx
index 8621ed21f..5b05e99af 100644
--- a/src/components/SubNavigationPills/index.tsx
+++ b/src/components/SubNavigationPills/index.tsx
@@ -13,6 +13,7 @@ import Link from "../Link"
 
 interface SubNavigationPillsProps {
   links: RouteProps[]
+  order?: string[]
 }
 
 interface PathMatchResult {
@@ -26,9 +27,24 @@ interface NavPill extends RouteProps {
   isActive?: boolean
 }
 
-const SubNavigationPills: FC<SubNavigationPillsProps> = ({ links }) => {
+const SubNavigationPills: FC<SubNavigationPillsProps> = ({
+  links,
+  order = [],
+}) => {
   const { pathname } = useLocation()
-  const linksWithTitle = links.filter((link) => !!link.title)
+  const reorderedLinks =
+    order.length > 0
+      ? [
+          ...order.map(
+            (pathInOrder) =>
+              links.find(
+                ({ path: linkPath }) => pathInOrder === linkPath
+              ) as RouteProps
+          ),
+          ...links.filter(({ path }) => !order.includes(path)),
+        ].filter((item) => !!item)
+      : links
+  const linksWithTitle = reorderedLinks.filter((link) => !!link.title)
   const activePillIndex = getActivePillIndex(linksWithTitle, pathname)
   const wrapperBorderColor = useColorModeValue("gray.100", "gray.700")
 
diff --git a/src/pages/PageLayout.tsx b/src/pages/PageLayout.tsx
index 9d87ba2b9..8251ed83a 100644
--- a/src/pages/PageLayout.tsx
+++ b/src/pages/PageLayout.tsx
@@ -23,7 +23,9 @@ const PageLayout: FC<PageLayoutProps> = ({
 
   return (
     <>
-      {links.length > 0 && <SubNavigationPills links={links} />}
+      {links.length > 0 && (
+        <SubNavigationPills links={links} order={["how-it-works"]} />
+      )}
       <Container
         maxW={{ base: "2xl", xl: "6xl" }}
         mt="6.25rem"

From 899cbe67e0c860e15d157a8de48669cca26ba32b Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 2 Oct 2023 14:10:22 +0200
Subject: [PATCH 03/10] Set order for navigation links item, adjust button
 label

---
 src/components/Modal/tBTC/NewTBTCApp.tsx | 2 +-
 src/pages/PageLayout.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/tBTC/NewTBTCApp.tsx b/src/components/Modal/tBTC/NewTBTCApp.tsx
index 670c63b79..5d45934a5 100644
--- a/src/components/Modal/tBTC/NewTBTCApp.tsx
+++ b/src/components/Modal/tBTC/NewTBTCApp.tsx
@@ -53,7 +53,7 @@ const NewTBTCAppBase: FC<BaseModalProps> = ({ closeModal }) => {
             closeModal()
           }}
         >
-          How It Works
+          How it Works
         </Button>
         <Button
           onClick={() => {
diff --git a/src/pages/PageLayout.tsx b/src/pages/PageLayout.tsx
index 8251ed83a..fac34edfb 100644
--- a/src/pages/PageLayout.tsx
+++ b/src/pages/PageLayout.tsx
@@ -24,7 +24,7 @@ const PageLayout: FC<PageLayoutProps> = ({
   return (
     <>
       {links.length > 0 && (
-        <SubNavigationPills links={links} order={["how-it-works"]} />
+        <SubNavigationPills links={links} order={["how-it-works", ""]} />
       )}
       <Container
         maxW={{ base: "2xl", xl: "6xl" }}

From 87db039aa9f1db69038b59e8a1cd0ab543d3f2f3 Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 2 Oct 2023 14:23:07 +0200
Subject: [PATCH 04/10] Add order prop validation for SubNavigationPills
 component

---
 src/components/SubNavigationPills/index.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/SubNavigationPills/index.tsx b/src/components/SubNavigationPills/index.tsx
index 5b05e99af..6839fa568 100644
--- a/src/components/SubNavigationPills/index.tsx
+++ b/src/components/SubNavigationPills/index.tsx
@@ -31,6 +31,18 @@ const SubNavigationPills: FC<SubNavigationPillsProps> = ({
   links,
   order = [],
 }) => {
+  const isOrderPropValid =
+    order.length > 0 &&
+    order.every((pathInOrder) => {
+      const linksPaths = links.map(({ path }) => path)
+      return linksPaths.includes(pathInOrder)
+    })
+  if (!isOrderPropValid) {
+    throw new Error(
+      `${SubNavigationPills.name}: Invalid order keys provided. It should match with route paths.`
+    )
+  }
+
   const { pathname } = useLocation()
   const reorderedLinks =
     order.length > 0

From 9402549874c7905c811302abacfc98897f41f2e6 Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Wed, 4 Oct 2023 13:17:09 +0200
Subject: [PATCH 05/10] Revert "Implement SubNavigationPills items reordering"

This reverts commit c5984ba7290a284825bd33f89e8a802a30c46ac9.
---
 src/components/SubNavigationPills/index.tsx | 36 +++------------------
 src/pages/PageLayout.tsx                    |  4 +--
 2 files changed, 5 insertions(+), 35 deletions(-)

diff --git a/src/components/SubNavigationPills/index.tsx b/src/components/SubNavigationPills/index.tsx
index 6839fa568..ed62f8c00 100644
--- a/src/components/SubNavigationPills/index.tsx
+++ b/src/components/SubNavigationPills/index.tsx
@@ -1,19 +1,18 @@
-import { FC } from "react"
 import {
-  Box,
   BodyMd,
+  Box,
   Divider,
   HStack,
   Stack,
   useColorModeValue,
 } from "@threshold-network/components"
+import { FC } from "react"
 import { matchPath, resolvePath, useLocation } from "react-router-dom"
 import { RouteProps } from "../../types"
 import Link from "../Link"
 
 interface SubNavigationPillsProps {
   links: RouteProps[]
-  order?: string[]
 }
 
 interface PathMatchResult {
@@ -27,36 +26,9 @@ interface NavPill extends RouteProps {
   isActive?: boolean
 }
 
-const SubNavigationPills: FC<SubNavigationPillsProps> = ({
-  links,
-  order = [],
-}) => {
-  const isOrderPropValid =
-    order.length > 0 &&
-    order.every((pathInOrder) => {
-      const linksPaths = links.map(({ path }) => path)
-      return linksPaths.includes(pathInOrder)
-    })
-  if (!isOrderPropValid) {
-    throw new Error(
-      `${SubNavigationPills.name}: Invalid order keys provided. It should match with route paths.`
-    )
-  }
-
+const SubNavigationPills: FC<SubNavigationPillsProps> = ({ links }) => {
   const { pathname } = useLocation()
-  const reorderedLinks =
-    order.length > 0
-      ? [
-          ...order.map(
-            (pathInOrder) =>
-              links.find(
-                ({ path: linkPath }) => pathInOrder === linkPath
-              ) as RouteProps
-          ),
-          ...links.filter(({ path }) => !order.includes(path)),
-        ].filter((item) => !!item)
-      : links
-  const linksWithTitle = reorderedLinks.filter((link) => !!link.title)
+  const linksWithTitle = links.filter((link) => !!link.title)
   const activePillIndex = getActivePillIndex(linksWithTitle, pathname)
   const wrapperBorderColor = useColorModeValue("gray.100", "gray.700")
 
diff --git a/src/pages/PageLayout.tsx b/src/pages/PageLayout.tsx
index fac34edfb..9d87ba2b9 100644
--- a/src/pages/PageLayout.tsx
+++ b/src/pages/PageLayout.tsx
@@ -23,9 +23,7 @@ const PageLayout: FC<PageLayoutProps> = ({
 
   return (
     <>
-      {links.length > 0 && (
-        <SubNavigationPills links={links} order={["how-it-works", ""]} />
-      )}
+      {links.length > 0 && <SubNavigationPills links={links} />}
       <Container
         maxW={{ base: "2xl", xl: "6xl" }}
         mt="6.25rem"

From 9f24455386110bdcc452ee3ae9b8abd4be14d80b Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Wed, 4 Oct 2023 13:26:15 +0200
Subject: [PATCH 06/10] Reorder sub navigation links, change default tBTC page,
 adjust link label

---
 src/components/Sidebar/index.tsx    | 2 +-
 src/pages/tBTC/HowItWorks/index.tsx | 2 +-
 src/pages/tBTC/index.tsx            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 94cfec7e9..a583504b3 100644
--- a/src/components/Sidebar/index.tsx
+++ b/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)
     }
 
diff --git a/src/pages/tBTC/HowItWorks/index.tsx b/src/pages/tBTC/HowItWorks/index.tsx
index 73b272880..6b42f8116 100644
--- a/src/pages/tBTC/HowItWorks/index.tsx
+++ b/src/pages/tBTC/HowItWorks/index.tsx
@@ -27,7 +27,7 @@ const HowItWorksPage: PageComponent = (props) => {
 HowItWorksPage.route = {
   path: "how-it-works",
   index: false,
-  title: "How it Works",
+  title: "How it works",
   isPageEnabled: true,
 }
 
diff --git a/src/pages/tBTC/index.tsx b/src/pages/tBTC/index.tsx
index 84c04d242..7f7bdcaec 100644
--- a/src/pages/tBTC/index.tsx
+++ b/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,
 }

From b80ca38b868350c605df2389210a7708d0dc60ff Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Tue, 24 Oct 2023 10:06:44 +0200
Subject: [PATCH 07/10] Replace Button component with ButtonLink component

---
 src/components/Modal/tBTC/NewTBTCApp.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/Modal/tBTC/NewTBTCApp.tsx b/src/components/Modal/tBTC/NewTBTCApp.tsx
index 5d45934a5..8bb3833da 100644
--- a/src/components/Modal/tBTC/NewTBTCApp.tsx
+++ b/src/components/Modal/tBTC/NewTBTCApp.tsx
@@ -11,16 +11,15 @@ import {
   ModalHeader,
 } from "@threshold-network/components"
 import { FC } from "react"
-import { useNavigate } from "react-router-dom"
 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()
-  const navigate = useNavigate()
 
   return (
     <>
@@ -46,15 +45,15 @@ const NewTBTCAppBase: FC<BaseModalProps> = ({ closeModal }) => {
         <Divider mt="2" />
       </ModalBody>
       <ModalFooter gap="4">
-        <Button
+        <ButtonLink
           variant="outline"
+          to="/tBTC/how-it-works"
           onClick={() => {
-            navigate("/tBTC/how-it-works")
             closeModal()
           }}
         >
           How it Works
-        </Button>
+        </ButtonLink>
         <Button
           onClick={() => {
             accept()

From d8058d3e711ff7b4831245044ad2610382889593 Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Tue, 24 Oct 2023 10:07:37 +0200
Subject: [PATCH 08/10] Revert copy casing change

How it works -> How it Works
---
 src/pages/tBTC/HowItWorks/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/tBTC/HowItWorks/index.tsx b/src/pages/tBTC/HowItWorks/index.tsx
index 6b42f8116..73b272880 100644
--- a/src/pages/tBTC/HowItWorks/index.tsx
+++ b/src/pages/tBTC/HowItWorks/index.tsx
@@ -27,7 +27,7 @@ const HowItWorksPage: PageComponent = (props) => {
 HowItWorksPage.route = {
   path: "how-it-works",
   index: false,
-  title: "How it works",
+  title: "How it Works",
   isPageEnabled: true,
 }
 

From 1feb10e2624b3969b243e03a2516c91710aac195 Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Tue, 24 Oct 2023 10:17:44 +0200
Subject: [PATCH 09/10] Revert imports reorganization

---
 src/components/Modal/tBTC/NewTBTCApp.tsx    | 12 ++++++------
 src/components/SubNavigationPills/index.tsx |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Modal/tBTC/NewTBTCApp.tsx b/src/components/Modal/tBTC/NewTBTCApp.tsx
index 8bb3833da..9298b339f 100644
--- a/src/components/Modal/tBTC/NewTBTCApp.tsx
+++ b/src/components/Modal/tBTC/NewTBTCApp.tsx
@@ -1,16 +1,16 @@
+import { FC } from "react"
 import {
-  BodyLg,
-  BodySm,
   Button,
   Divider,
-  Flex,
-  H5,
-  Image,
   ModalBody,
   ModalFooter,
   ModalHeader,
+  BodyLg,
+  H5,
+  BodySm,
+  Flex,
+  Image,
 } from "@threshold-network/components"
-import { FC } from "react"
 import { useTBTCTerms } from "../../../hooks/useTBTCTerms"
 import tbtcAppBannerIllustration from "../../../static/images/tBTCAppBannerWithGrid.svg"
 import { BaseModalProps } from "../../../types"
diff --git a/src/components/SubNavigationPills/index.tsx b/src/components/SubNavigationPills/index.tsx
index ed62f8c00..8621ed21f 100644
--- a/src/components/SubNavigationPills/index.tsx
+++ b/src/components/SubNavigationPills/index.tsx
@@ -1,12 +1,12 @@
+import { FC } from "react"
 import {
-  BodyMd,
   Box,
+  BodyMd,
   Divider,
   HStack,
   Stack,
   useColorModeValue,
 } from "@threshold-network/components"
-import { FC } from "react"
 import { matchPath, resolvePath, useLocation } from "react-router-dom"
 import { RouteProps } from "../../types"
 import Link from "../Link"

From 17d2374afd9a9a69f6fd05c92759cae0b6061e29 Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 30 Oct 2023 11:30:26 +0100
Subject: [PATCH 10/10] Remove UI element according to design updates

Removed "Bridging back BTC is back" list item from `TakeNoteList`
component
---
 src/components/tBTC/TakeNoteList.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/components/tBTC/TakeNoteList.tsx b/src/components/tBTC/TakeNoteList.tsx
index f7c1a666e..3d2f59f9f 100644
--- a/src/components/tBTC/TakeNoteList.tsx
+++ b/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>
   )
 }