search

regen-network / regen-web

:seedling: Website and marketplace application
https://app.regen.network
15 stars 9 forks source link

Design new token sale page #429

Closed erikalogie closed 3 years ago

erikalogie commented 3 years ago

Links to comps: Desktop: https://www.figma.com/file/tO6a2en3ibDVJnvmUNxwwz/Wallet-Address-Registration?node-id=1%3A402 Mobile: https://www.figma.com/file/tO6a2en3ibDVJnvmUNxwwz/Wallet-Address-Registration?node-id=1%3A2358

Basic requirements is:

The focus for this is on functionality, but this really shouldn’t be a big chore. If it feels like these requirements would take more than a day or two to design & implement, let me know and maybe we can be flexible on requirements

https://airtable.com/tbljEhMD95qWrYnQe/viwAMV4GfcKlSojHY?blocks=hide - is the table where the Airtable form is

rsteinhe commented 3 years ago

@clevinson captha is not part of AirTable forms so @blushi should comment on the complexity of adding it to page as a first step before enabling the AirTable submission. Taking a step back - captcha's can avoid bots but I think the main need is authentication - shouldn't we do a 2 factor authentication ?

clevinson commented 3 years ago

@rsteinhe Authentication is out of scope here, as we don't intend to have each investor/validator create an account and setup logins and whole 2FA process for the 100-200+ token holders that will need to follow through this process. The goal is to have a single page in which token holders can enter their address in a 1-step process. Verification of identity will happen offline anyway via the photo.

The actual verification of these token addresses will indeed be a manual one, verifying photos against the photos we have on file with their KYC information. Dan will be leading this verification process.

If captcha is not feasible within a 1-2 day timeframe, then I we should evaluate removing this from requirements and instead just relying on a password to prevent random folks from submitting an address.

At the end of the day, if we need to filter the list of submissions by those submitted with known token holder email addresses, we can do this with a simple script after the fact (i can take care of this together with Dan).

clevinson commented 3 years ago

Here's some sample text (this can be upgraded later). I know i said that it would be just a few sentences, but i guess i got a bit carried away.... :smile:

Regen Network Wallet Address Registration

As we approach the mainnet launch of Regen Network, all REGEN (formerly XRN) token holders will need to register a valid Regen Network wallet address in order for your tokens to be allocated. YOU MUST register a Regen Network wallet address via this page by Feb 10, 2021. This is the only way to receive your token allocation.

For security purposes, we require a photo of yourself (laptop or phone camera is fine) holding a piece of paper with the last 4 digits of your wallet address in writing in one hand, and one form of identification (drivers license / passport) in the other hand.

Please follow the Regen Ledger wallet tutorial to generate your wallet address, and make sure you adhere to the relevant security guidelines. This is the wallet that we be sending your REGEN tokens to, and there is no way to recover those tokens should you lose access to the wallet.

rsteinhe commented 3 years ago

@blushi should comment about captcha. @clevinson timeframe wise, just to clarify we won't get to addressing this week for sure from dev standpoint but Erika can start sketching it out. I presume you were referring to time to develop but just clarifying.

erikalogie commented 3 years ago

@clevinson I've updated the description with links to the comps for you to review. I don't have captcha represented here, as I'm not sure we can do that easily with airtable.

blushi commented 3 years ago

@clevinson @rsteinhe indeed, Airtable doesn't provide captcha out of the box so I can see two solutions here:

  1. as Ron suggested, first we display the captcha then the airtable embedded form in 2 steps (we can't do the other way around because there's no way to know when some embedded form is submitted)
  2. or we implement our custom form with captcha and call airtable API on submission to create a new record in the appropriate table under the hood.

Option 1. is more straightforward to implement and should be definitely feasible within 1 day, although a little less user-friendly. Options 2. adds a bit of complexity because 1. although we already have components for basic form fields (text, number, select, checkbox, etc.) we would need to implement a new component to deal with file upload; and 2. it also involves some back-end work for calling airtable API. Wdyt?

On another note, do you wanna use reCAPTCHA v2 or v3?

blushi commented 3 years ago

@clevinson Having a particular page password protected with simple auth is very straighforward using netlify, I tried it out for instance on the buyers page on this staging environment (just use "user" and "password") https://deploy-preview-431--regen-website.netlify.app/buyers/

Of course, this will be done on the new token sale page instead. As suggested, we can use "carbon canopy" as password, which username should we use then? Also what should the path to this new page look like? Something like /token-sale or/wallet-address-registration?

erikalogie commented 3 years ago

@clevinson is this design for the token registration page approved or should I make any changes?

clevinson commented 3 years ago

@erikalogie looks good! No changes necessary from my side. Would be great if this can move to dev asap :)

clevinson commented 3 years ago

@blushi to comment on your q's above:

If there are any reasons why recaptcha v2 is easier to implement than v3, then that is fine as well.

erikalogie commented 3 years ago

@blushi @rsteinhe I moved what seems like the associated dev task/pull request into this sprint and added the comps in there: https://app.zenhub.com/workspaces/regen-registry-5f8998bec8958d000f4609e2/issues/regen-network/regen-web/431

Feel free to assign to yourself Marie or one of the other devs.

erikalogie commented 3 years ago

@clevinson One other thing– I'm assuming that we don't want to add the link to this page to our footer or main navigation, but that you guys will be sending the link out directly to those who need to register. Let me know if you see it differently, and we will need to find a place to put it in our navigation.

clevinson commented 3 years ago

@erikalogie yes that's correct. We will be sending links to this page directly.

One more thing that just came up this week — we will need to have a button on this page with text like "Connect to Keplr Wallet" or "Connect Wallet". The user should have the Keplr wallet browser extension installed. If they do not, they should get an error that says "No wallet found. Please download the Keplr Wallet Extension here." Both the button and the error message need to be designed. This button should be below the main text and above the airtable form.

If the user has the extension installed, then a pop-up will be triggered by Keplr, configuring their wallet for Regen Network so the user can use the wallet to see their Regen wallet address.

I don't think we need any more text space designed, as the main text area you already designed can be updated to explain this process and that the user must "connect wallet" below to enable Regen Network in Keplr.

Let me know if you have any questions!

erikalogie commented 3 years ago

@clevinson Ok, I've added the button to the main design comps, plus created an error page for desktop: https://www.figma.com/file/tO6a2en3ibDVJnvmUNxwwz/Wallet-Address-Registration?node-id=41%3A14 and mobile: https://www.figma.com/file/tO6a2en3ibDVJnvmUNxwwz/Wallet-Address-Registration?node-id=41%3A6774. If these look good to you, then @mhagel can implement.