[Chore] update MetaMask logo in the navbar and wallet connection modal

[biliesilva]

Changes

• Added MetaMask icon to the TopNavBar component
• Integrated MetaMask icon from @hyperplay/ui component library
• Icon is displayed when MetaMask browser sidebar links are enabled
• Added styling for the MetaMask icon through the CSS module

Technical Details

• Used Images.MetaMask component with appropriate styling
• Icon visibility is controlled by showMetaMaskBrowserSidebarLinks context
• Maintains existing badge notification functionality

Changes

---

Use the following Checklist if you have changed something on the Backend or Frontend:

• Tested the feature and it's working on a current and clean install.
• Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
• Created / Updated Tests (If necessary)
• Created / Updated documentation (If necessary)

[BrettCleary]

lgtm. let's remove the height line before merging so the icon isn't slightly distorted

[BrettCleary]

This will go from 16 to 14px at the 1300px breakpoint. Is that what you intended?

I think it's fine to just hardcode here or use --space-md-fixed if you really want to use a value from the spacing system.

It also might be best to just set the width here. I think it is being slightly distorted by setting both since the svg aspect ratio isn't 1:1

[biliesilva]

This SVG MetaMask provided was a bit bigger than the one we have in terms of breath spacing/padding in the SVG area, so instead of using px, I changed to this var that I believe is from our DS no? I will change it to be --space-md-fixed instead