unlock-protocol / unlock

Ʉnlock is a protocol for memberships built on a blockchain.
https://unlock-protocol.com
MIT License
839 stars 248 forks source link

Implement the key purchase screen in unlock app #3763

Closed julien51 closed 5 years ago

julien51 commented 5 years ago

In the same way that Metamask prompts the user when they are sending a transaction for a confirmation, we should implement a screen which asks the user to confirm that they are purchasing a key to a given lock. This screen should show the follow the design provided by @smombartz :

image.png

cnasc commented 5 years ago

To make sure I understand the architecture here, these will be separate pages (for example, at /keyPurchase for this one), that have no UI chrome whatsoever from the normal site and only contain the form in question?

julien51 commented 5 years ago

so essentially yes but let's not use case in the URL! /0x123/purchase would be good where 0x123 is the lock address. That page should make sure the user is logged in, and if not show the LoginOrSognup component. Similarly the user should have a CC, or it will show the CreditCards component... and finally will show that last form.

When the users clicks on purchase the unlockProvider will invoke the locksmith API to purchase the key.

smombartz commented 5 years ago

Design flow is in Figma under Paywall (select CC payment from "admin panel") or this link ;) https://www.figma.com/proto/LkWSSnCGlKEITBB5T5NYXW/Paywall?node-id=441%3A206&viewport=370%2C356%2C0.06711409240961075&scaling=min-zoom