Email input signing drop page flow

It is a bit complicated, but to achieve the goals and avoid user seeing the same modal twice, this is it.

it all around 4 modal types
figma handoff drop page updated - there is flow diagram and all the modal types: https://www.figma.com/file/JXNtryaNYhY0XJNArzvPQx/Handoff?type=design&node-id=394%3A6126&mode=design&t=or6HfcUUcc9mnJzN-1
modals are good for the paid drop page - I will also update them for the free one.
all the modals have drop shadow - did not include that in the design because it would be messy

Design

this modal popups when you don't have wallet connected
gives you option to connect wallet or share your email
you cant do both
sharing email will result in "send me a link!" button being active
when connecting the wallet - the button changes to the one with the loading circle
there are three possible flows:
- connecting wallet - redirect to modal with connected wallet and email input
- inputting email - closing the dialog - when clicking it again after you filled in your email, it will open the basic connect wallet dialog since you already got your voucher
- inputting email, clicking the button "send me a link" that closes the dialog - it should also popup info toast about "email was sent" - then when you connect through sidebar, not through the modal - clicking mint again, it should open the confirm mint summary.

its easy here
when you are connected with your wallet, there is one modal before the whole signing
this modal offers you a $10 USD voucher in exchange for your email address
you have option not to share your email - "no, thanks" and continue to the summary
or you can fill out the email and continue

lets start with what is same across all of them:

top part has address contextual information - display your connected address
then there is the waifu row - it shows the collection as well as the price
the img preview has a question mark in it since the drop is random
under that is price summary total and note that fees are already included - for bridging as well
once user clicks mint - it shows him the success notification with options to share on Twitter, view item etc.

now for the 3 types:

all funds oki
- simplest one
no funds across polkadot or statemine
- option to add funds through ramp network
funds on polkadot but not on statemine
- this one is bit complicated
- user has funds on Polkadot but not on Statemine
- there is the option to bridge directly from the modal
- user has to sign a message when he clicks bridge, then it progresses into other modals - like sign your transaction, bridge in process, bridge done, etc..

simple modal
connect wallet
in progress state -
once user connect wallet, it redirect him either to the voucher for email modal or the mint UI summary based on whether he filled out the email form or not

I will create copy for the email etc. It will be again divided into two types - one that your filled out when not connected and one with connected wallet - there will be a $10 USD merch shop voucher.

all the flow is described in the figma, feel free to ask!

Thanks 🚀