WalletConnect / web3inbox

https://web3inbox.com/
Apache License 2.0
62 stars 26 forks source link

Improve Discover page #254

Closed herrhaase closed 11 months ago

herrhaase commented 1 year ago
### Tasks
- [x] Add blue highlight indicator on "Inbox" pages
- [x] Rename labels from "Explore" to "Discover" and "Discover all apps"
- [x] Remove the 2nd "subscribe" button at the top right
- [x] Change "gm!" to "GM Dapp": https://github.com/WalletConnect/gm-dapp/pull/27
- [x] Update GM icon (see below): https://github.com/WalletConnect/gm-dapp/pull/27
- [ ] Remove "official" badge (blue check) from any app not maintained by WalletConnect
- [x] Show app domain for any non-official app (see iOS screenshot below)
- [x] Fix card backgrounds (see below)
- [x] Fix Search bar (see below)
- [x] Center content in content area (see below)
- [x] Fix card width to be equal (see below)
- [x] Fix UI bug on 700px width (see below)
- [x] Fix Subscribe button behaviour (see below)
- [x] ❌ Bug: Fix subscribe button (see below)
- [x] When subscribed, make app card tappable
image
herrhaase commented 1 year ago

image

See how iOS handles the app domains. For non-official apps, we should show the domain instead of "Official app"

herrhaase commented 1 year ago

Gm Icon

Please use this everywhere

GM-icon@2x GM-icon

herrhaase commented 1 year ago

Fix card backgrounds

2 options:

A) we extract the most prominent color value out of the avatar and use this in a radial gradient from [extracted color] to #FFF, wih a gradient opacity of 10% on a full white (#FFF) background – or

B) we use the avatar image, resize it centered around the avatar, blur it with "filter:blur (120px)" and an opacity of 10% on a full white (#FFF) background.

I advocate for option B, as it should give us more detailed results.

image

See details and placements here

herrhaase commented 1 year ago

Fix search bar

Screenshot 2023-10-10 at 18 19 47

When subscribed to "gm!" and searching for "Gm" the search filters out the app I am subscribed to. This is counterintuitive to most search bars and therefore we should make the search smarter by allowing the following scenarios:

herrhaase commented 1 year ago

Center content in content area & fix card width

image
herrhaase commented 1 year ago

Fix UI bug on 700px width

At exactly 700px width, the UI breaks weirdly. I assume that there is an issue with the media-queries not covering this specific value.

image
herrhaase commented 1 year ago

Fix Subscribe button behaviour

When I can't subscribe to a dapp (for whatever reason) the UI button becomes white and the label disappears. Instead of this behaviour, the button should only change when a user is successfully subscribed.

Should it take a while to retrieve a successful subscription, we might want to show a white spinner inside the blue button until then, which returns the button to its blue normal state should we not be able to subscribe a user to the dapp.

https://github.com/WalletConnect/web3inbox/assets/707251/d3c129ed-2a51-407e-9344-f11d16379e82

herrhaase commented 1 year ago

❌ Bug: Fix subscribe button

The button doesn't seem to pick up on my active subscription

image
herrhaase commented 1 year ago

When subscribed, make app card tappable

As a user I expect on the discover page to be able to tap on the card of an app I am subscribed to, and then get redirected to that app page – eg. when subsribed to "GM Dapp" tapping on the GM Dapp card on the Discover page, brings me to the GM Dapp page with all notifications.