[STK-153][POC] - Add Shutter RPC button

[ElRodrigote]

Fixes: STK-153

Description

• Adds the initial logic to connect through Metamask

[netlify]

✅ Deploy Preview for swapr ready!

Name	Link
🔨 Latest commit	8d42dec
🔍 Latest deploy log	https://app.netlify.com/sites/swapr/deploys/66ffb586aec2e2000804cfc1
😎 Deploy Preview	https://deploy-preview-1926--swapr.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 25 Accessibility: 79 Best Practices: 92 SEO: 83 PWA: 80 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Diogomartf]

Design feedback
sometimes it breaks (probably we need some css to fix breaking)

[Diogomartf]

there are a couple of issues with this PR:

• this should only appear if the user is on gnosis chain (because it only works there so no point on showing on other networks)
• after adding the networks it keeps showing the button (if I'm on shutterized gnosis network already I don't need to see the button), let's show "protected by (icon + shutter logo)".
• if the user already has added the network to the connected wallet, if he changes to gnosis network, we can show "proctect with (icon + shutter logo)" and by clicking it toggles change networks to gnosis shutter.
• we should add the "?" icon and tootip on hover with info about shutter like we have on settings (eg. multihop).

I think we need to solve this issues in order to ship this.

[Diogomartf]

they updated their logo, so we should update it, it's a shield now. (maybe ask them the svg)

their new logo

Probably use their blue color as bg on the button? Might look better.

Design sketch:

• adding the icon and logo together
• add ? icon with tooltip and small explanation as we have in settings
• shutter blue bg (we can try with our current gradient one first, and the see how it feels with the blue)