From aea00cd6e2bc0dfa0e3378d69e7d0ac85b586876 Mon Sep 17 00:00:00 2001
From: David Rojas <lempira@gmail.com>
Date: Tue, 29 Oct 2024 20:35:24 -0400
Subject: [PATCH] AK-14 - Added page titles

---
 src/features/accounts/pages/account-page.tsx  |  2 +
 .../pages/create-app-interface.tsx            |  2 +
 src/features/app-lab/pages/app-lab.tsx        |  2 +
 .../applications/pages/application-page.tsx   |  2 +
 src/features/assets/pages/asset-page.tsx      |  2 +
 src/features/blocks/pages/block-page.tsx      |  2 +
 src/features/explore/pages/explore-page.tsx   |  5 ++
 src/features/fund/fund-page.tsx               |  2 +
 src/features/groups/pages/group-page.tsx      |  2 +
 src/features/settings/pages/settings-page.tsx |  2 +
 .../transaction-wizard-page.tsx               |  2 +
 .../pages/inner-transaction-page.tsx          |  2 +
 .../transactions/pages/transaction-page.tsx   |  2 +
 src/utils/use-title.ts                        | 47 +++++++++++++++++++
 14 files changed, 76 insertions(+)
 create mode 100644 src/utils/use-title.ts

diff --git a/src/features/accounts/pages/account-page.tsx b/src/features/accounts/pages/account-page.tsx
index 5b326b0b..77178122 100644
--- a/src/features/accounts/pages/account-page.tsx
+++ b/src/features/accounts/pages/account-page.tsx
@@ -10,6 +10,7 @@ import { AccountDetails } from '../components/account-details'
 import { useCallback } from 'react'
 import { PageTitle } from '@/features/common/components/page-title'
 import { PageLoader } from '@/features/common/components/page-loader'
+import { useTitle } from '@/utils/use-title'
 
 export const accountPageTitle = 'Account'
 export const accountInvalidAddressMessage = 'Address is invalid'
@@ -29,6 +30,7 @@ export function AccountPage() {
   const { address } = useRequiredParam(UrlParams.Address)
   invariant(isAddress(address), accountInvalidAddressMessage)
   const [loadableAccount, refreshAccount, isStale] = useLoadableAccount(address)
+  useTitle()
 
   const refresh = useCallback(() => {
     refreshAccount()
diff --git a/src/features/app-interfaces/pages/create-app-interface.tsx b/src/features/app-interfaces/pages/create-app-interface.tsx
index 4debab65..9fe0574e 100644
--- a/src/features/app-interfaces/pages/create-app-interface.tsx
+++ b/src/features/app-interfaces/pages/create-app-interface.tsx
@@ -14,6 +14,7 @@ import { useCreateAppInterface } from '../data'
 import { FromAppIdCard } from '../components/create/from-app-id-card'
 import { FromDeploymentCard } from '../components/create/from-deployment-card'
 import { asError } from '@/utils/error'
+import { useTitle } from '@/utils/use-title'
 
 export const createAppInterfacePageTitle = 'Create App Interface'
 
@@ -103,6 +104,7 @@ function CreateAppInterfaceInner() {
 }
 
 export function CreateAppInterface() {
+  useTitle('Create App Interface')
   return (
     <>
       <PageTitle title={createAppInterfacePageTitle} />
diff --git a/src/features/app-lab/pages/app-lab.tsx b/src/features/app-lab/pages/app-lab.tsx
index 18b5f700..ccef1d26 100644
--- a/src/features/app-lab/pages/app-lab.tsx
+++ b/src/features/app-lab/pages/app-lab.tsx
@@ -3,11 +3,13 @@ import { useAppInterfaces } from '@/features/app-interfaces/data'
 import { RenderLoadable } from '@/features/common/components/render-loadable'
 import { PageLoader } from '@/features/common/components/page-loader'
 import { AppInterfaces } from '@/features/app-interfaces/components/app-interfaces'
+import { useTitle } from '@/utils/use-title'
 
 export const appLabPageTitle = 'App Lab'
 
 export function AppLab() {
   const [appInterfaces, refreshAppInterfaces] = useAppInterfaces()
+  useTitle('App Lab')
 
   return (
     <>
diff --git a/src/features/applications/pages/application-page.tsx b/src/features/applications/pages/application-page.tsx
index b7dc80f0..eae25425 100644
--- a/src/features/applications/pages/application-page.tsx
+++ b/src/features/applications/pages/application-page.tsx
@@ -9,6 +9,7 @@ import { is404 } from '@/utils/error'
 import { useCallback } from 'react'
 import { PageTitle } from '@/features/common/components/page-title'
 import { PageLoader } from '@/features/common/components/page-loader'
+import { useTitle } from '@/utils/use-title'
 
 const transformError = (e: Error) => {
   if (is404(e)) {
@@ -31,6 +32,7 @@ export function ApplicationPage() {
 
   const applicationId = parseInt(_applicationId, 10)
   const [loadableApplication, refreshApplication, isStale] = useLoadableApplication(applicationId)
+  useTitle()
 
   const refresh = useCallback(() => {
     refreshApplication()
diff --git a/src/features/assets/pages/asset-page.tsx b/src/features/assets/pages/asset-page.tsx
index c7c3213f..baf8f567 100644
--- a/src/features/assets/pages/asset-page.tsx
+++ b/src/features/assets/pages/asset-page.tsx
@@ -9,6 +9,7 @@ import { useLoadableAsset } from '../data'
 import { useCallback } from 'react'
 import { PageTitle } from '@/features/common/components/page-title'
 import { PageLoader } from '@/features/common/components/page-loader'
+import { useTitle } from '@/utils/use-title'
 
 const transformError = (e: Error) => {
   if (is404(e)) {
@@ -31,6 +32,7 @@ export function AssetPage() {
 
   const assetId = parseInt(_assetId, 10)
   const [loadableAsset, refreshAsset, isStale] = useLoadableAsset(assetId)
+  useTitle()
 
   const refresh = useCallback(() => {
     refreshAsset()
diff --git a/src/features/blocks/pages/block-page.tsx b/src/features/blocks/pages/block-page.tsx
index 24641a3e..610f08e3 100644
--- a/src/features/blocks/pages/block-page.tsx
+++ b/src/features/blocks/pages/block-page.tsx
@@ -8,6 +8,7 @@ import { useLoadableBlock } from '../data'
 import { isInteger } from '@/utils/is-integer'
 import { PageTitle } from '@/features/common/components/page-title'
 import { PageLoader } from '@/features/common/components/page-loader'
+import { useTitle } from '@/utils/use-title'
 
 const transformError = (e: Error) => {
   if (is404(e)) {
@@ -25,6 +26,7 @@ export const blockInvalidRoundMessage = 'Round is invalid'
 export const blockFailedToLoadMessage = 'Block failed to load'
 
 export function BlockPage() {
+  useTitle()
   const { round: _round } = useRequiredParam(UrlParams.Round)
   invariant(isInteger(_round), blockInvalidRoundMessage)
   const round = parseInt(_round, 10)
diff --git a/src/features/explore/pages/explore-page.tsx b/src/features/explore/pages/explore-page.tsx
index 177fcc0e..afb84dde 100644
--- a/src/features/explore/pages/explore-page.tsx
+++ b/src/features/explore/pages/explore-page.tsx
@@ -5,11 +5,16 @@ import { LatestTransactions } from '@/features/transactions/components/latest-tr
 import { Switch } from '@/features/common/components/switch'
 import { Label } from '@/features/common/components/label'
 import { useLiveExplorer } from '@/features/explore/data/live-explorer'
+import { useTitle } from '@/utils/use-title'
+import { useParams } from 'react-router-dom'
+import { Urls } from '@/routes/urls'
 
 export const explorePageTitle = 'Explore'
 
 export function ExplorePage() {
   const { showLiveUpdates, setShowLiveUpdates, latestTransactions, latestBlocks } = useLiveExplorer()
+  const params = useParams()
+  useTitle('Explore', params)
 
   return (
     <>
diff --git a/src/features/fund/fund-page.tsx b/src/features/fund/fund-page.tsx
index 020cf332..8813b010 100644
--- a/src/features/fund/fund-page.tsx
+++ b/src/features/fund/fund-page.tsx
@@ -2,12 +2,14 @@ import { PageTitle } from '@/features/common/components/page-title'
 import { localnetId, useNetworkConfig } from '@/features/network/data'
 import { LocalnetFunding } from './components/localnet-funding'
 import { DispenserApiFunding } from './components/dispenser-api-funding'
+import { useTitle } from '@/utils/use-title'
 
 export const fundPageTitle = 'Fund'
 export const fundingNotAvailableMessage = 'Funding is not available on this network.'
 
 export function FundPage() {
   const networkConfig = useNetworkConfig()
+  useTitle('Fund')
 
   const inner =
     networkConfig.id === localnetId ? (
diff --git a/src/features/groups/pages/group-page.tsx b/src/features/groups/pages/group-page.tsx
index 3ca89c01..a826d864 100644
--- a/src/features/groups/pages/group-page.tsx
+++ b/src/features/groups/pages/group-page.tsx
@@ -8,6 +8,7 @@ import { invariant } from '@/utils/invariant'
 import { isInteger } from '@/utils/is-integer'
 import { PageTitle } from '@/features/common/components/page-title'
 import { PageLoader } from '@/features/common/components/page-loader'
+import { useTitle } from '@/utils/use-title'
 
 export const groupPageTitle = 'Transaction Group'
 export const groupNotFoundMessage = 'Transaction group not found'
@@ -28,6 +29,7 @@ export function GroupPage() {
   const { round: _round } = useRequiredParam(UrlParams.Round)
   invariant(isInteger(_round), blockInvalidRoundMessage)
   const { groupId } = useRequiredParam(UrlParams.GroupId)
+  useTitle()
 
   const round = parseInt(_round, 10)
   const loadableGroup = useLoadableGroup(groupId, round)
diff --git a/src/features/settings/pages/settings-page.tsx b/src/features/settings/pages/settings-page.tsx
index 98d9ea24..0f3299fa 100644
--- a/src/features/settings/pages/settings-page.tsx
+++ b/src/features/settings/pages/settings-page.tsx
@@ -1,9 +1,11 @@
+import { useTitle } from '@/utils/use-title'
 import { Settings } from '../components/settings'
 import { PageTitle } from '@/features/common/components/page-title'
 
 export const settingsPageTitle = 'Settings'
 
 export function SettingsPage() {
+  useTitle('Settings')
   return (
     <>
       <PageTitle title={settingsPageTitle} />
diff --git a/src/features/transaction-wizard/transaction-wizard-page.tsx b/src/features/transaction-wizard/transaction-wizard-page.tsx
index 484f32b1..b6b4f428 100644
--- a/src/features/transaction-wizard/transaction-wizard-page.tsx
+++ b/src/features/transaction-wizard/transaction-wizard-page.tsx
@@ -9,6 +9,7 @@ import { SendTransactionResults } from '@algorandfoundation/algokit-utils/types/
 import { AppCallTransaction, TransactionType } from '../transactions/models'
 import { GroupSendResults, SendResults } from './components/group-send-results'
 import algosdk from 'algosdk'
+import { useTitle } from '@/utils/use-title'
 
 export const transactionWizardPageTitle = 'Transaction Wizard'
 export const transactionTypeLabel = 'Transaction type'
@@ -16,6 +17,7 @@ export const sendButtonLabel = 'Send'
 
 export function TransactionWizardPage() {
   const [sendResults, setSendResults] = useState<SendResults | undefined>(undefined)
+  useTitle('Transaction Wizard')
 
   const renderTransactionResults = useCallback((result: SendTransactionResults, simulateResponse?: algosdk.modelsv2.SimulateResponse) => {
     const sentTransactions = asTransactionFromSendResult(result)
diff --git a/src/features/transactions/pages/inner-transaction-page.tsx b/src/features/transactions/pages/inner-transaction-page.tsx
index 9fdbea9c..5f5c3ab9 100644
--- a/src/features/transactions/pages/inner-transaction-page.tsx
+++ b/src/features/transactions/pages/inner-transaction-page.tsx
@@ -10,6 +10,7 @@ import { is404 } from '@/utils/error'
 import { PageTitle } from '@/features/common/components/page-title'
 import { PageLoader } from '@/features/common/components/page-loader'
 import { useSplatParam } from '@/features/common/hooks/use-splat-param'
+import { useTitle } from '@/utils/use-title'
 
 const transformError = (e: Error) => {
   if (is404(e)) {
@@ -34,6 +35,7 @@ export function InnerTransactionPage() {
   invariant(isValidInnerTransactionId(innerTransactionId), `Invalid inner transaction id: ${innerTransactionId}`)
 
   const loadableTransaction = useLoadableInnerTransactionAtom(transactionId, innerTransactionId)
+  useTitle()
 
   return (
     <>
diff --git a/src/features/transactions/pages/transaction-page.tsx b/src/features/transactions/pages/transaction-page.tsx
index 611801c6..b2fd3ac7 100644
--- a/src/features/transactions/pages/transaction-page.tsx
+++ b/src/features/transactions/pages/transaction-page.tsx
@@ -8,6 +8,7 @@ import { useLoadableTransactionAtom } from '../data'
 import { isTransactionId } from '@/utils/is-transaction-id'
 import { PageTitle } from '@/features/common/components/page-title'
 import { PageLoader } from '@/features/common/components/page-loader'
+import { useTitle } from '@/utils/use-title'
 
 const transformError = (e: Error) => {
   if (is404(e)) {
@@ -28,6 +29,7 @@ export function TransactionPage() {
   const { transactionId } = useRequiredParam(UrlParams.TransactionId)
   invariant(isTransactionId(transactionId), transactionInvalidIdMessage)
   const loadableTransaction = useLoadableTransactionAtom(transactionId)
+  useTitle()
 
   return (
     <>
diff --git a/src/utils/use-title.ts b/src/utils/use-title.ts
new file mode 100644
index 00000000..c45e158c
--- /dev/null
+++ b/src/utils/use-title.ts
@@ -0,0 +1,47 @@
+import { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+
+const setTitle = (title: string) => {
+  document.title = title
+}
+
+export const useTitle = (customString?: string) => {
+  const urlParams = useParams()
+  useEffect(() => {
+    const currentTitle = document.title
+    let pageTitle = `Lora`
+    if (customString) {
+      pageTitle += ` ${customString}`
+    }
+    if (urlParams.transactionId) {
+      pageTitle += ` - TxnId:${urlParams.transactionId}`
+    }
+    if (urlParams.transactionId && urlParams['*']) {
+      pageTitle += `, Inner:${urlParams['*']}`
+    }
+    if (urlParams.round) {
+      pageTitle += ` - Block:${urlParams.round}`
+    }
+    if (urlParams?.groupId) {
+      pageTitle += ` - Group:${urlParams.groupId}`
+    }
+    if (urlParams?.address) {
+      pageTitle += ` - Addr:${urlParams.address}`
+    }
+    if (urlParams?.applicationId) {
+      pageTitle += ` - AppId:${urlParams.applicationId}`
+    }
+    if (urlParams?.assetId) {
+      pageTitle += ` - AssetId:${urlParams.assetId}`
+    }
+    if (urlParams?.networkId) {
+      pageTitle += ` - ${urlParams.networkId}`
+    }
+
+    setTitle(pageTitle)
+
+    return () => {
+      setTitle(currentTitle)
+    }
+  }, [customString, urlParams])
+}