Explorer Lending Protocol Object Page

[ckeshava]

High Level Overview of Change

This PR implements an Explorer Lending-Protocol Object Page. It provides a readable version of Single-Asset-Vaults to the viewers.

If you would like to interact with the new Lending Protocol Object Page, please run a local instance of the Explorer with this PR's changes and navigate to http://localhost:3000/lend.devnet.rippletest.net:51233/vault/3E7B7873E696C8055302F2EA3669E6C447FB3606B92E6451AF1CD2BACFFB1F0E on your browser.

Refer to this screen recording video to see a visual preview of the new Explorer Vault page: https://github.com/user-attachments/assets/e7707a9f-6bde-40cf-8239-b700cfb02a24

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Refactor (non-breaking change that only restructures code)
• Tests (You added tests for code that already exists, or your new feature included in this PR)
• Documentation Updates
• Translation Updates
• Release

Codebase Modernization

• Updated files to React Hooks
• Updated files to TypeScript

Before / After

Test Plan

Appropriate tests have been added to the new feature.

[pdp2121]

For the tooltip here:

The icon looks off and the tooltip is above the icon too much. Please use the hover icon in src/containers/shared/images/hover.svg you can also search for keyword renderTextTooltip for some example. It should look like this:

Also, this toggle is off screen on mobile view. I would say let's make the toggle below VaultID in smaller screens

[pdp2121]

Other than the above, the UI looks good to me

[ckeshava]

The icon looks off and the tooltip is above the icon too much. Please use the hover icon in src/containers/shared/images/hover.svg you can also search for keyword renderTextTooltip for some example. It should look like this: Also, this toggle is off screen on mobile view. I would say let's make the toggle below VaultID in smaller screens

I have incorporated this suggestion. The VaultHeader now looks like this on mobile devices with 375 pixel width:

This is the new location of the CurrencyToggle tooltip:

@pdp2121 thanks for your suggestion, I re-used the HoverIcon. I was scratching my head to understand why my work was different in the hover icon style :)