feat(coinmarket): possibility to proceed with unverified address #14320
Conversation
adderpositive
added
feature
adderpositive
requested review from
MiroslavProchazka and
komret
as code owners
| !device?.connected | ||
| ? 'TR_COINMARKET_CONFIRM_ADDRESS' | ||
| : 'TR_CONFIRM_ON_TREZOR' |
There was a problem hiding this comment.
nit: might be easier to read without the negation:
device?.connected
? 'TR_CONFIRM_ON_TREZOR'
: 'TR_COINMARKET_CONFIRM_ADDRESS'
...te/src/components/suite/modals/ReduxModal/UserContextModal/ProceedUnverifiedAddressModal.tsx
Outdated
Show resolved
Hide resolved
|
Change the modal component to the warning one please: https://www.figma.com/design/dYIRTk1qVcKsrJDqOzZ7SG/Modals?node-id=4037-2006&t=6JHZmmhTkl2jrwnV-1 Agreed with the UX designer that the yellow warning state should use only together with the icon as seen in the design. |
...te/src/components/suite/modals/ReduxModal/UserContextModal/ProceedUnverifiedAddressModal.tsx
Outdated
Show resolved
Hide resolved
| // close modals and reset addressVerified on device connection change | ||
| useEffect(() => { | ||
| dispatch({ | ||
| type: COINMARKET_BUY.VERIFY_ADDRESS, | ||
| addressVerified: undefined, | ||
| }); | ||
| dispatch(modalActions.onCancel()); | ||
| }, [device?.connected, dispatch]); | ||
|
|
There was a problem hiding this comment.
Perhaps this should be moved inside the modal. It is only related to ProceedUnverifiedAddressModal, isn't it?
If you use ConfirmUnverifiedModal, the useEffect is already there.
There was a problem hiding this comment.
Yes, it is related. But it is not possible to clear the addressVerified, if the modal is not opened.
There was a problem hiding this comment.
Ok I thought addressVerified was only set inside the modal.
There was a problem hiding this comment.
It is only set in the modal. But It is also necessary to set the value as undefined if the modal is not active and the connection of Trezor will change.
|
I have created a new component |
packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UserContextModal.tsx
Outdated
Show resolved
Hide resolved
|
Remembered wallet, Screen.Recording.2024-09-24.at.15.06.10.mov |
it is happening when you are not connected |
| <H3> | ||
| <Translation id={deviceStatus} values={{ deviceLabel: device.label }} /> | ||
| </H3> |
There was a problem hiding this comment.
Could you use the heading prop?
There was a problem hiding this comment.
The prop heading will add the title to the modal's header. And it doesn't look good in order header -> icon -> paragraph.
There was a problem hiding this comment.
What does @adamhavel think?
There was a problem hiding this comment.
Certainly an improvement, although I'd prefer to see the shared logic in ConfirmUnverifiedModal and have two or three wrappers with specifics, kind of like ConfirmUnverifiedAddress worked. This looks like three components in one with little code overlap between them. The effect and enablePassphraseAndContinue could be in ConfirmUnverifiedModal , unless I am missing something.
adderpositive
force-pushed
the
feat/add-unverified-modal
branch
from
7bf6466
to
57656fd
Compare
MiroslavProchazka
requested review from
tomasklim
and removed request for
komret
|
/rebase |
trezor-ci
force-pushed
the
feat/add-unverified-modal
branch
from
57656fd
to
4d08a77
Compare
Issue
When a user gets to the second step in the Buy flow where they select a specific address to receive crypto and the Trezor is disconnected, Suite only allows to Show an unverified address and copy it so the user is stuck.
Design before
Solution
Instead of “Show unverified address” in this dialog show “Proceed with unverified address” button, close the dialog, and allow a user to proceed to the partner’s checkout.
Design after
Related
Resolve #14310