48px -> 40px

The way Blockstack auth works right now (in production and in this app) is that after authentication, you go back to the app, in a new tab. The UX of this could be much better.

It's possible to execute a callback on the original app, after the authentication request is complete, without any new tab or page refresh behavior.

These are cramped together. I used 20px padding.

• Caption medium instead of Body medium
• Blue/100 instead of Ink/60

HMR with extensions seems to be different than it would be for a standard app.

https://github.com/rubenspgcavalcante/webpack-extension-reloader

Puppeteer is a JS project for testing Google Chrome. I've done some research on testing extensions with it, and it is possible to run a (non-headless) chrome with an extension loaded, using the --loadExtensions flag. It is not currently possible to run headless chrome with an extension.

You can also interact with the actual UI of the extension by getting the extension ID of the project. Some useful information is found here: https://stackoverflow.com/questions/48089670/detect-and-test-chrome-extension-using-puppeteer

40, 16, 8, 24, 24

Right now, the onboarding flow in the app includes the first modal, which is intended to be included only on the app before opening the popup.

We need to remove this from the app, and instead include it in @blockstack/connect. The first screen in this app should be the screen that comes after "Create Data Vault". Or, if "Sign in instead" is selected, then the sign in flow should show up right away.

Prototype

- Updated with proposal F → always ask for username & the warning message
- Put the mobile design in the desktop one so you can compare easily (flow is exactly the same)
- Error/success states
- Magic recovery support flow
- Components that I’ve used

Scope out all the behaviors and edge cases for validation

Obviously, we'll have to determine the domain first. This doesn't have to be final, but we need something even just for pre-alpha testing.

Once this is setup, we can connect Netlify to use this domain.

• Redux actions
• Component testing?

All three icons are 24 by 24px. I attached them here:

How I aligned the icons to the text:
For the first two, where the text wraps to two lines, I created a wrapper for the icons with 4px padding top and 12px padding bottom. This will bring the total height to 40px, matching the height of the text (20px line height).

Make sure we can package up the app as an ext.

I've tried to do a basic import of @blockstack/ui, but I ran into some type errors. After using a local version of the package on Kyran's latest branch, these errors are gone, but I'm still seeing odd import issues. I've tabled it for now, but I need to document (and maybe fix) these issues, and then I can actually use the package in this project.

The first end-to-end flow we want as a proof of concept would be:

• Install/run the browser extension in a Chromium browser
  • This can be installed in a more manual way, not from the Chrome store
• Intercept blockstack auth and trigger the browser
• Restore an existing identity
• Approve app auth

This requires a few key components, which is why it's a good place to get started:

• General packaging and installing
• Integrating the blockstack-keychain package for seed management
• Intercepting authentication
• Some core components of the existing auth flow

This would add convenience to allow usage of the back button during onboarding

Dev experience:

• Easily able to watch and run tests
• Code coverage reporting in Github
• CircleCI running and reporting on tests from Github

This is a placeholder issue for code that will live elsewhere. Eventually, probably in blockstack.js.

I already have code in place that works to authenticate to either the hosted version or the extension, if it's installed. We can either use a beta version of blockstack.js, or even release a micro-library specifically for apps that opt-in to testing this out. The micro-library would only be for starting the authentication request - everything else works out of the box with blockstack.js already.

Button is 42px high, should be 40px. Think it's caused by using 1.33 line-height for the text inside.

We have screens for onboarding by using an existing secret key. What we need is a screen for signing into an app when you're already logged in to Data Vault.

If some parameter is included in the auth request to go straight to "sign in", then the app needs to recognize that and show the appropriate flow.

Needs a corresponding issue in @blockstack/connect to develop this API, as well.

Before we actually show the onboarding flow, we need to fetch some information about the app and the authentication request. This is how we can show things like the app name, icons, etc. This loading screen needs to work without any known app information.

The screenshot below has the Wink icon, but we can't use that for a generic loading screen, which could be for any app.

I've already built this screen:

• Seed phrase (sign in and sign up)
• Username stuff
• What else?

https://paper.dropbox.com/doc/New-Blockstack-integration-and-app-specification--Ap6H2nurG02HzEH36YuWIsciAg-ThtvzBu5VM6ftdUqH1vyB

@moxiegirl

We can just integrate segment during a pre-release, but before a developer preview we need to remove any 3rd party scripts, and proxy events instead (similar to how the Browser works).

There is already a function setup which gets called during all the events we want, it just isn't integrated with Segment yet.

• Brand name weight 500
• Replace close icon (attached)

Currently most of the UI for the onboarding flow is contained in this app, much of it can and should be abstracted out to exist in the @blockstack/ui library.

I used 396px as opposed to 440px. Slimmer makes it look less clunky.

We should set up an easy to use and automatic staging deployment of PRs like we have in other projects. Additionally we should chat about how to best test the ext. and ways to provide automatic packages of staging versions.

We're not using spacing (see Waffle) correctly. Sticking to multiples of 4 will allow us to create a sense of vertical rhythm that is currently missing, see design:

16, 28, 16, 16, 8, 20, 24.

In the implementation, I'm seeing 17.5, 70, 10.5, etc. Not only are these far off, they also don't follow our rule of multiples of 4.

This is a placeholder issue until we move blockstack-connect into the public Github

We need @blockstack/connect to have an API to show a modal before users leave the app and go into authentication.

@zone117x, you mentioned in SF that you have some performance enhancements to some of our keychain-related code. This is pretty necessary, as the current process is very slow, and is only non-blocking because I've moved it into a Web Worker. Can you share more information about exactly the changes you've found, and how I can incorporate it?

• Font weight 500
• Remove app icon and chevron
• Div is somehow 57px instead fo 56px

Begin with this and then adjust as needed:
https://github.com/ymdevs/Web-Extension-Starter

@kyranjamie - a week ago, I ported over the onboarding code from our beta app. I see you've added some changes to that app recently. Let's make sure those changes get incorporated here (if they're part of onboarding), and then also make sure we're not duplicating too much work moving forward.

Hopefully, we'll be able to ditch the dummy onboarding of the beta app soon, so we can focus on work in this repo.

Some users will only have a "magic recovery code" from the legacy browser, which is just an encrypted 12-word seed. We need to:

• dial in the language for what we call this thing
• handle the case where users enter their recovery code in the "seed phrase" prompt
• error messaging and handling
• UI to enter your password to decrypt the recovery code

These screens are already designed in Figma, but are not in the codebase yet.