Marketplace improvements

[maikReal]

What to do?

1️⃣ Add a wallet connect button to the header

We need to add the “Connect wallet” button to the header.

Expected behavior:
After the user connects the wallet:

1. He can open any app on the marketplace and the connected wallet will be connected to a dApp automatically
2. The wallet will be automatically connected in the smart contracts section

If possible, we need to change the network inside the app automatically for the necessary one. For example, the user connected the wallet with the Polygon network but opened a dApp on the main net. In this case, we need to offer him to change the network to main net

IMPORTANT NOTICE:

1. If a user disconnected/switched the wallet inside the dApp, then we don't need to disconnect/switch it globally on Blockscout
2. We need to show the logo of every collected wallet in side the button. If we can't do so, we can generate logos based on the wallet address

Design: https://www.figma.com/file/4In0X8UADoZaTfZ34HaZ3K/Blockscout_2.0?type=design&node-id=444%3A1253&mode=design&t=0aa2uxJTzhCDpiHO-1

2️⃣ Add analytical event

We need to add the analytical event for tracking the global wallet connection
We already have the event Wallet connect, we just need to extend it with an additional parameter

When a user connects a wallet globally on the header:

Event: Wallet connect
Parameters:

• Source = Header
• Status = Started/Connected

When a user connects a wallet on the smart contracts page:

Event: Wallet connect
Parameters:

• Source = Smart contracts
• Status = Started/Connected

3️⃣ Add the full-size mode

We need to support the full-size mode for dApps by default. It'll look like this:

IMPORTANT notices:

1. The side menu is hidden by default
2. The search bar, profile icon, and connected wallet are visible anytime. Users can interact with them
3. We also remove the name of the app as it is right now
4. If a user opens the side menu, then the Apps section will be highlighted as an opened section as follow:
   

4️⃣ Add the disclaimer

We also need to show the disclaimer message for new users who first time interact with the marketplace. They will see the popup with the text just once before opening the app. For further dApps, a user won't see any popups. Only in the case, when he clicked on the "Continue to dApp" button

Disclaimer text:
"You are now accessing a third-party app. Blockscout does not own, control, maintain, or audit 3rd party apps, and is not liable for any losses associated with these interactions. Please do so at your own risk.

By clicking continue, you agree that you understand the risks and have read the Disclaimer."

Design: https://www.figma.com/file/6R0Rfb4nFodpxaq4krHrWT/Blockscout-Apps?type=design&node-id=3%3A3&mode=design&t=nk8n6niv6Xtp768U-1

5️⃣ Add messages for the profile and wallet buttons

We need to show a small message for the profile and connected wallet button

For profile:
"Sign in to My Account to add tags, create watchlists, access API keys, and more"

For the connect wallet button:
"Your wallet is used to interact with apps and contracts in the explorer"

IMPORTANT:

1. For the connect wallet button, the message should be shown for all users ONCE WITHOUT HOVERING. The message will disappear right after a user clicks on any space on the page or just moves to another page
2. Also, we need to show the message on hover for both buttons. Delay: ~0.3 seconds

Design: https://www.figma.com/file/4In0X8UADoZaTfZ34HaZ3K/Blockscout_2.0?type=design&node-id=444%3A1253&mode=design&t=0aa2uxJTzhCDpiHO-1

[maikReal]

UPD 17.11:

Regarding the first point: decided to use Safe SDK to connect a global wallet to a specific protocol. The example is available here: https://www.impersonator.xyz/

[maikReal]

UPD 04.12: Need research on the Safe SDK and how we can use it for the end-to-end wallet connection in Blocksocut. Max needs help here

[maikReal]

UPD 04.12:

@maxaleks when you finish everything, could you pls rename:

• Marketplace section title: "Marketplace" -> "DAppscout"
• Sidemenu: "Apps" -> "DApps"

[maxaleks]

Testing instructions:

The new functionality for wallet interaction via iframe works in dApps that have integrated Safe SDK. However, there are exceptions: if domain restrictions are set during the SDK initialization, our feature might not work. This has been particularly observed in applications using Blocknative's library.

Testing should include:

• Automatic wallet connection.
• Message signing.
• Transaction sending.