Add document title to all routes

[dit7ya]

Description

New stuff ✨

Adds document title to all routes. Introduces a useTitle hook that gets called in the top-level Routes.tsx component.

TODOs

• add a fallback strategy

Note to Reviewers

I have tried to ensure there is no weird edge-cases but please let me know if you find one or even suspect one.

Resolves #3036.

[arrenv]

@dit7ya it looks to be working really well, and I think showing the ENS name while waiting for the ColonyName query is a good idea.

The only change that needs to be made is that the transactions need to be more descriptive. As of this format "<ACTION/MOTION_TITLE> | Colony - <COLONY_NAME>"

So, instead of having Transaction - 0x259c9648ee907e9c4fb2a3f0f562e6d70c5851d586487150c38b18c1ce827df5 | Colony - CoolDAO it should be Pay arren 4950 CLO | Colony - CoolDAO or Pay arren 4950 CLO | Motion | Colony - CoolDAO

.

[arrenv]

@dit7ya It is looking good.

It seems the format changes for transaction pages. They are showing as: Pay arren 4950 CLO | Motions - CoolDAO | Colony and Pay arren 4950 CLO | Actions - CoolDAO | Colony.

It should be Pay arren 4950 CLO | Motion | Colony - CoolDAO and Pay arren 4950 CLO | Action | Colony - CoolDAO.

[dit7ya]

@arrenv. Thanks, fixed those now.

[arrenv]

@dit7ya I think the last thing is to update the action one to match the motion page. I.e. | Colony - CoolDAO as opposed to | CoolDAO - Colony.

[dit7ya]

@arrenv. Oops, somehow missed that. Hopefully everything is fine now.

[ArmandoGraterol]

It seems like the majority of the titles look good, but it seems like the coin machine's title needs a bit more work:

As per the screenshot, for me, it's showing everything on under case, and with the colonyName not filled in (Most likely because it's colonyname but it actually needs to be colonyName)

[dit7ya]

Thanks @ArmandoGraterol. Seems like somehow the command for lowercasing got ran on that line on my editor. Fixed it now.

[ArmandoGraterol]

Yup, that was the only thing I could find, all the other pages that I saw were looking good! Nice job

[arrenv]

@dit7ya it is looking really good. A big improvement in my opinion.

This is the last thing I noticed, I think we could update VotingReputation to Motions and Disputes. What do you think?

[dit7ya]

Thanks @arrenv. While I was at it, I also made the other extensions page title look slightly better (like OneTxPayment to One Transaction Payment).

[chinins]

Looks good, nice work! The only concern I have is a about translation ids in the useTitle hook (please, see my separate comment).

[chinins]

I am not sure that these should be the ids. I would think it should be utils.hooks.useTitle.connect as we give it based on the folder location and file name. Here is an example from the BuyTokens component:
id: 'dashboard.CoinMachine.BuyTokens.title'

I would double check with Raul...

[dit7ya]

I agree with you. I was a little confused since there was no other example of messages being inside utils hooks. I will change them quick.

[arrenv]

@dit7ya everything seems to be looking good! Nice one!

[chinins]

Good to go - nice work!