Qrcode receiver modal

[portdeveloper]

Description

This PR removes the QR code SVG from the dropdown list, and adds a button to open a modal. See #440 for more details.

chrome_KkvCJonqld.mp4

I had to remove the z-index from the Footer.tsx as I could only make it work like that. Open to any other suggestions.

Additional Information

• I have read the contributing docs (if this is your first contribution)
• This is not a duplicate of any existing pull request

Related Issues

_Closes #237

Note: If your changes are small and straightforward, you may skip the creation of an issue beforehand and remove this section. However, for medium-to-large changes, it is recommended to have an open issue for discussion and approval prior to submitting a pull request.

Your ENS/address: portdev.eth

[carletex]

Great job @portdeveloper !!!

The z-index in the footer was added because of the debug page (if not, it goes below the cards)

But it seems that z-10 works for both (debug page, and modal :))

Also made some little tweaks: move copy address up in the menu and also use outline icons (the copy icon was "too solid").

---

Now let's try this PR and #440 and see what we like the most

cc @technophile-04 @rin-st @Pabl0cks @austintgriffith

[austintgriffith]

this is great! 🔥🫡🔥 thanks sers!

[austintgriffith]

(I like the version with the modal the best!)

[technophile-04]

Tysm @portdeveloper looking great !! 🙌

Even I like this more as compared to #440 and this one will be more visible too while presenting

[Pabl0cks]

I like this one better than #440, more compact and clean. I feel both use cases "Copy address" and "View QR code" work better with this design. Great job @portdeveloper !! 🙌

[rin-st]

Looks good!

Noticed a bug - when I click to the address on modal, blockexplorer is opened in background. But I expect that the address just be copied

2023-07-26.12.12.48.mov

[carletex]

Noticed a bug - when I click to the address on modal, blockexplorer is opened in background. But I expect that the address just be copied

Yep, not sure about this.

The

component links to the chain blockexplorer for the displayed address. In localhost, it links to the local blockexplorer, but in live chains, it goes to the corresponding blockexplorer (which can be handy).

Options:

1. Leave it as it's
2. Using disableAddressLink in the Address component for that instance. (although it will also affect live chains)
3. Same as 2, but only for local networks.

[rin-st]

I forgot that <Address /> works that way :). Probably we need to discuss it in another issue, but I believe that

• click on address should copy it by default or probably do nothing, since we need to copy much more often than viewing on block explorer (or is it only for me?) and it's not obvious that it links to blockexplorer.
• Small View on block explorer link below the address or some icon after "Copy", for example something like this

1. Leave it as it's
2. Using disableAddressLink in the Address component for that instance. (although it will also affect live chains)
3. Same as 2, but only for local networks.

So I think point 2 is good. But open modal -> go to blockexplorer is convenient too, so additional blockexplorer link/icon can help :). Or we can add "View on blockexplorer" option in main menu, so we'll not need it in modal.

[carletex]

Or we can add "View on blockexplorer" option in main menu, so we'll not need it in modal.

I like this! Adding "View on block explorer" with the arrow-top-right icon, between QR & Disconnect menu items.

And for now, we can disableAddressLink the Address in the modal.

cc @portdeveloper

[rin-st]

lgtm 👍

[carletex]

Let's wait until #455 is merged. We should add the new shadows and the new menu item sizes here too

[carletex]

#455 was merged, so I applied the styles from it to the new dropdown (shadows, sizes, etc)

It's looking good!

ready to merge when @technophile-04 or @rin-st validate

[technophile-04]

Love this !! Looking very clean and nice !!

[rin-st]

Looks great! Noticed one micro bug - when you click on copy address, it blinks when content of button changes. First one - click. Second - not.

2023-07-27.22.49.05.mov

We can probably fix it later

[carletex]

Good eye @rin-st !! haha

It's the :active pseudo-class when using daisy's menu class. In some places where using some daisy SE-2 where we should probably benefit using tw directly (if not, you have to override, sometime with !)

Anyway, let's merge this, and maybe we can rethink using the menu / menu-item classes here in another PR

[carletex]

Great job @portdeveloper ;)

And thank you all for the review!!

[portdeveloper]

Thanks! I am honored :)