AK-14 - Added page titles

[lempira]

I looks through all of the URL routes and added a hook that creates the title based on the params of page. Here are the pages and examples of titles. I still have to write a test for the hook but wanted get feedback on approach and format before I write the test.

Pages:
"Index": "/",
Example: Lora Explore - mainnet

"Explore": "/:networkId",
Example: Lora Explore - mainnet

"Explore_Transaction_ById": "/:networkId/transaction/:transactionId",
Example: Lora - TxnId:CFNKY4JV5BMIRSP2SMZE634DYB22FALLURI72U6UMWZNKEBOYEMQ - mainnet

"Explore_Transaction_ById_Inner_ById": "/:networkId/transaction/:transactionId/inner//*",
Example: Lora - TxnId:Q36W3E5GBCPZYGEVFQGTQB4KX7QTFYV3H4UYNRYS4AFXEPILHQXQ, Inner:1 - mainnet

"Explore_Block_ByRound": "/:networkId/block/:round",
Example: Lora - Block:43904244 - mainnet

"Explore_Block_ByRound_Group_ById": "/:networkId/block/:round/group/:groupId",
Example: Lora - Block:43904244 - Group:iUE01XrzcJZ+ENIwPyjPmtaVUF5OKy8vYYOwGbdKliQ= - mainnet

"Explore_Account_ByAddress": "/:networkId/account/:address",
Example: Lora - Addr:W2IZ3EHDRW2IQNPC33CI2CXSLMFCFICVKQVWIYLJWXCTD765RW47ONNCEY - mainnet

"Explore_Asset_ById": "/:networkId/asset/:assetId",
Example: Lora - AssetId:1014 - localnet

"Explore_Application_ById": "/:networkId/application/:applicationId",
Example: Lora - AppId:1019 - localnet

"Explore_Tx": "/:networkId/tx/*",
Example: Lora - TxnId:CFNKY4JV5BMIRSP2SMZE634DYB22FALLURI72U6UMWZNKEBOYEMQ - mainnet

"Explore_Txn": "/:networkId/txn/*",
Example: Lora - TxnId:CFNKY4JV5BMIRSP2SMZE634DYB22FALLURI72U6UMWZNKEBOYEMQ - mainnet

"AppLab": "/app-lab",
Example: Lora App Lab

"AppLab_Create": "/app-lab/create",
Example: Lora Create App Interface

"Settings": "/settings",
Example: Lora Settings

"Fund": "/fund",
Example: Lora Fund

"FundAuthCallback": "/fund/auth-callback",
Example: NA

"TransactionWizard": "/transaction-wizard",
Example: Lora Transaction Wizard

"TxWizard": "/tx-wizard",
Example: Lora Transaction Wizard

"TxnWizard": "/txn-wizard"
Example: Lora Transaction Wizard

[neilcampbell]

The approach looks good to me 👍

[neilcampbell]

Suggested change

	export const useTitle = (customString?: string) => {
	export const useTitle = (pagePrefix?: string) => {

My thought process here is that anything after the Lora - is the page specific portion of the title, so it's a page prefix, even though it's not the title prefix.

[neilcampbell]

I think it would be good for all pages to start with Lora - ${pageTitle}
So:
Lora - Transaction Wizard
Lora - TxnId:CFNKY4JV5BMIRSP2SMZE634DYB22FALLURI72U6UMWZNKEBOYEMQ - mainnet

Probably the easiest way to do this is accumulate in an array, then .join(' - ') to build the page title. Something like below:

  const params = new Array<string>()

  if (urlParams.transactionId) {
    params.push(`TxnId:${urlParams.transactionId}`)
  }
  // ...

  const title = `Lora${pagePrefix ? ` - ${pagePrefix}` : ''} - ${params.join(' - ')}`

[tasosbit]

I have a small preference for omitting the Id part in transactions / assets / apps

So: Txn:${id} App:${id} Asset:${id}

What do you think?

[tasosbit]

And if we omit the - separators, browser tabs would show more of the title before truncating:

Lora Txn ACSASDSADASD Mainnet vs Lora - Txn:ACSASDSADASD - Mainnet

May not make much difference though, so this is quite subjective

[neilcampbell]

I'm happy with both of those suggestions.

[lempira]

Me too. I'll make these updates today.

[tasosbit]

The verbiage we use in these pages is Account (e.g. check <H1> there), so the document title should probably be Account or Acct instead of Addr to match that

[lempira]

👍 Will change to use Acct

[lempira]

I changed the page title format according to the suggested format. I also used @neilcampbell suggestion of joining the params into a string.

For the use-title test, I use a createMemoryBrowser of react-router-dom instead of mocking the useParams. I think this allows us to test more declaratively and pass in that URL instead of imperatively passing in the params.

There are many places that the params are mocked thru vi.mocked(useParams).mockImplementation. Perhaps we can create a helper wrapper that uses createMemoryBrowser and pass in the URL and not have to mock useParams?

Another suggestion: can we consider adding eslint-plugin-vitest to the testing conf. I had some focused tests that I forgot to unfocus, and they were only caught in the pipeline. The eslint plugin could have caught that, along with whatever other rules we want to enforce, on lint.

[neilcampbell]

There are many places that the params are mocked thru vi.mocked(useParams).mockImplementation. Perhaps we can create a helper wrapper that uses createMemoryBrowser and pass in the URL and not have to mock useParams?

Another suggestion: can we consider adding eslint-plugin-vitest to the testing conf. I had some focused tests that I forgot to unfocus, and they were only caught in the pipeline. The eslint plugin could have caught that, along with whatever other rules we want to enforce, on lint.

Both of these sound good. @lempira Did you want to do these as part of this PR or handle separately?

[neilcampbell]

Suggested change

	pageTitleParams.push(`Txn:${urlParams.transactionId.slice(0, TRUNCATE_LENGTH)}`)
	pageTitleParams.push(`Txn:${ellipseId(urlParams.transactionId)}`)

This will inherit the same convention as we use elsewhere.

[neilcampbell]

Suggested change

	pageTitleParams.push(`Group:${urlParams.groupId.slice(0, TRUNCATE_LENGTH)}`)
	pageTitleParams.push(`Group:${ellipseId(urlParams.groupId)}`)

[neilcampbell]

Suggested change

	pageTitleParams.push(`Acct:${urlParams.address.slice(0, TRUNCATE_LENGTH)}`)
	pageTitleParams.push(`Acct:${ellipseAddress(urlParams.address)}`)

[neilcampbell]

Suggested change

const TRUNCATE_LENGTH = 10

[neilcampbell]

Suggested change

vi.mocked(useParams).mockReturnValue({ round: '1234' })

AFAIK round isn't used as a param here. I also pushed a small change (as part of merging main into the branch) which removes the need for vi.mocked(useParams).mockReturnValue({}) in the tests that don't use params.