Feature: 404 page for invalid routes

[gutsyphilip]

Added a custom 404 page to the wallet codebase. Currently, we don’t have any 404 handling, so any invalid routes always result in the user being re-directed back to the main dashboard page.

Extra

• Alphabetized the translations for ease of reference

How it works:

When an invalid route is visited:

• If no valid account is found, the user sees the ActivateAccountWithRouter component.
• Otherwise, the new PageNotFound component is shown.

[netlify]

👷 Deploy request for near-wallet-staging pending review.
Visit the deploys page to approve it

🔨 Explore the source changes: 9cae3f9

[heycorwin]

Lookin snazzy @worldclassdev

[Patrick1904]

Thanks for your submission Philip! This is looking great. I added a few comments/suggestions above. How much time do you think you spent on putting this PR together?

[Patrick1904]

@worldclassdev thanks for alphabetizing the translations. Did you use some type of tool for this or did you write a script? Thinking that if you have a script, we'd want to run this on file save so that we can keep this pattern going forward :)

[gutsyphilip]

Thanks for your submission Philip! This is looking great. I added a few comments/suggestions above. How much time do you think you spent on putting this PR together?

It's slightly difficult to say exactly. But I had the original draft in like 30 minutes(I had already gone through the codebase in the last week, so I utilized styling from the guest landing page). And then worked with Corwin for an extra say 45-60 minutes to iterate through the design a little bit more.

[gutsyphilip]

@worldclassdev thanks for alphabetizing the translations. Did you use some type of tool for this or did you write a script? Thinking that if you have a script, we'd want to run this on file save so that we can keep this pattern going forward :)

I used a vs-code extension called Sort JSON Objects.
https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json

I thought about having a script, but I felt once it was alphabetized, everyone should be able to follow the format and in cases where it isn't, it'd get caught in review. But for automation, I was thinking of using a pre-commit hook.

That fixes two things:

• We can automatically lint all changed files and prevent committing until lint errors are fixed(This is something we don't have at the moment, but I think could be useful). Our current setup allows you to commit and push unused variables et al.
• We can automatically sort the translation files.

[Patrick1904]

@worldclassdev thanks for alphabetizing the translations. Did you use some type of tool for this or did you write a script? Thinking that if you have a script, we'd want to run this on file save so that we can keep this pattern going forward :)

I used a vs-code extension called Sort JSON Objects. https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json

I thought about having a script, but I felt once it was alphabetized, everyone should be able to follow the format and in cases where it isn't, it'd get caught in review. But for automation, I was thinking of using a pre-commit hook.

That fixes two things:

• We can automatically lint all changed files and prevent committing until lint errors are fixed(This is something we don't have at the moment, but I think could be useful). Our current setup allows you to commit and push unused variables et al.
• We can automatically sort the translation files.

Great idea to use a pre-commit hook! Is this something you think you'd be able to add with the remaining ~2 out of 4 total hours? No worries if not.

[gutsyphilip]

@worldclassdev thanks for alphabetizing the translations. Did you use some type of tool for this or did you write a script? Thinking that if you have a script, we'd want to run this on file save so that we can keep this pattern going forward :)

I used a vs-code extension called Sort JSON Objects. https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json
I thought about having a script, but I felt once it was alphabetized, everyone should be able to follow the format and in cases where it isn't, it'd get caught in review. But for automation, I was thinking of using a pre-commit hook.
That fixes two things:

• We can automatically lint all changed files and prevent committing until lint errors are fixed(This is something we don't have at the moment, but I think could be useful). Our current setup allows you to commit and push unused variables et al.
• We can automatically sort the translation files.

Great idea to use a pre-commit hook! Is this something you think you'd be able to add with the remaining ~2 out of 4 total hours? No worries if not.

Sure. I started working on it already on a separate branch.
PR: #2294

[Patrick1904]

Sure. I started working on it already on a separate branch. I'd make a PR soon.

Awesome! 🙏

[Patrick1904]

Great job with this! 💯

[MaximusHaximus]

👍 This looks great! Nice work. :)