fix: add favicon fetching hook

[NicolasMassart]

Description

• Replace Faviconkit url with a hook that returns favicon url
• make it work also for SVG files and handle fallback
• create a favicon utils file for fetching in HTML and dealing with origin and urls
• create wrapper to use hook in class components
• update reducer to store favicon url in the state as a cache (max 100)
• create new unit tests and update impacted existing ones
• also added a list of files to ignore by the yarn format tool so that we can run it in our branches without having tons of unexpected changes on unrelated files

Issue

fixes https://github.com/MetaMask/mobile-planning/issues/1161

E2E tests

🟢 Pipeline build #9783

Checklist

• There is a related GitHub issue
• Tests are included if applicable
• Any added code is fully documented

Test Scenarios

Scenario: Website favicon should appear next to an autocompleted result when searching for websites with a favicon

Case: This is a normal use case of autocompleting a dapp that exists in the dapps list

• Given I am on the browser tab
• And I have the default Metamask home page open (home.metamask.io)
• When I type open in the search bar
• Then a favicon should appear to the left of the autocompleted option opensea.io
• 

Scenario: Fallback letter should appear next to an autocompleted result when searching for websites without a favicon

Case: this is an error case where the dapp that exists in the dapps list either doesn't have a favicon or favicon is not available.

• Given I am on the browser tab
• And I have the default Metamask home page open (home.metamask.io)
• When I type metamask in the search bar
• Then a favicon should appear to the left of the autocompleted option Metamask Ether Faucet (Ropsten) as the site doesn't exist anymore.
• 

Scenario: Website favicon should appear on the browser tabs list

Case: This is a normal use case for websites that have a favicon

• Given I am on the browser tab
• And I have the default Metamask home page open (home.metamask.io)
• When I type app.uniswap.org in the search bar and validate
• Then the Uniswap website opens
• 
• When I touch the bottom bar tab action
• Then the tabs list appears showing one tab for Uniswap with the website favicon
• 

Scenario: Website favicon should appear in connect and permission modals

Case: This is a normal use case for websites that have a favicon

• Given I am on the browser tab
• And I have the default Metamask home page open (home.metamask.io)
• And the test dapp website is loaded
• 
• When I touch "connect" in "Basic Actions" on the dapp
• Then a connect modal appears showing the dapp favicon and the URL
• 
• When I touch "Connect"
• Then the modal hides
• And dapp "Connect" button is disabled and top right account button appears
• When I touch top right account button
• Then the connected accounts modal appears with the favicon and the domain name
• 
• When I touch permission link
• Then Permission modal appears with favicon and url of the dapp
• 

Scenario: Website favicon should appear in transaction modal

Case: This is a normal use case for websites that have a favicon

• Given I am on the test dapp
• And I connected my account
• When I touch the "send legacy transaction" button
• Then the transaction modal displays the dapp favicon
• 

Scenario: Website favicon should appear in signing modal

Case: This is a normal use case for websites that have a favicon

• Given I am on the test dapp
• And I connected my account
• When I touch the "Sign" button in Personal sign section
• Then the signing modal displays the dapp favicon
• 

Scenario: Website favicon should appear in favourites on home page

NOTE: this scenario can not be successful until the home.metamask.io page is also updated

Case: This is a normal use case for websites that have a favicon

• Given I added a website with a favicon to my favourites
• 
• When I touch the button in the browser bar
• Then the home page should display my favourited site in the list of favourites
• And the favicon should be the same as the browser tabs list one

Scenario: Website favicon should appear in connect modal when deeplinking from WalletConnect

Case: This is a normal use case for websites that have a favicon

• Given I am on a dapp (ie. app.uniswap.org) on my native mobile browser
• And I connected my account with the WalletConnect feature
• And I touch the "connect with Metamasks" button
• And the MM app opens with the wallet connect modal for this dapp
• Then the wallet connect modal on MM app displays the dapp favicon

screen-20231010-155602.mp4

Scenario: Website favicon should appear in connect modal when scanning QRCode from SDK enabled dapp

Case: This is a normal use case for websites that use MM SDK

• Given I am on a SDK enabled dapp (ie. SDK test dapp) on desktop browser
• And I connected my account with the connect button
• (this QRCode screenshot can be directly used for testing)
• And I scan the QRcode with Metamask Mobile app
• And the MM app opens with the SDK connect modal for this dapp
• Then the SDK connect modal on MM app displays a QRCode Favicon

screen-20231011-142702.mp4

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
@xmldom/xmldom	0.8.10	None	+0	182 kB	karfau

[hesterbruikman]

PR for home.metamask.io

@NicolasMassart @cortisiko it appears the 188 cannot be tested unless merged. I'll ask to hold of to next sprint so that both PR's can be merged and tested in parallel. Please let me know if that doesn't make sense.

[NicolasMassart]

As discussed with @cortisiko;

• add the state migration for people updating app who already have bookmarked dapps.
• handle the deeplinking use case (from dapp -> walletconnnect -> connect sheet should display the right favicon)

[Cal-L]

Code LGTM.

[Cal-L]

Added Do not merge label. Should be part of 7.11.0

[cortisiko]

✅ ✅ ✅ ✅ ✅ ✅

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

85.7% Coverage
0.3% Duplication