leather-io / extension Goto Github PK
View Code? Open in Web Editor NEWLeather browser extension
Home Page: https://leather.io
License: MIT License
Leather browser extension
Home Page: https://leather.io
License: MIT License
48px -> 40px
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.
HMR with extensions seems to be different than it would be for a standard app.
https://github.com/rubenspgcavalcante/webpack-extension-reloader
Make sure we can package up the app as an ext.
Begin with this and then adjust as needed:
https://github.com/ymdevs/Web-Extension-Starter
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.
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.
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.
- 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
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:
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.
This would add convenience to allow usage of the back button during onboarding
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.
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.
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.
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.
@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.
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).
@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?
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.
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
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.
I used 396px as opposed to 440px. Slimmer makes it look less clunky.
The first end-to-end flow we want as a proof of concept would be:
This requires a few key components, which is why it's a good place to get started:
blockstack-keychain
package for seed managementWe 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.
Some users will only have a "magic recovery code" from the legacy browser, which is just an encrypted 12-word seed. We need to:
These screens are already designed in Figma, but are not in the codebase yet.
Dev experience:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.