magiclabs · smithki · Mar 1, 2022 · Feb 16, 2022 · Feb 16, 2022
diff --git a/BUILD_SYSTEM.md b/BUILD_SYSTEM.md
@@ -6,9 +6,9 @@ This monorepo implements a custom build system using a combination of tools:
 - [`wsrun`](https://github.com/hfour/wsrun) (for running workspace scripts)
 - [ESBuild](https://esbuild.github.io) (for transpilation, minifaction, and bundling of source codes)
 - [TypeScript](https://www.typescriptlang.org) (for static typing)
-- [ESLint](https://eslint.org) (for TypeScript/JavaScript linting)e
+- [ESLint](https://eslint.org) (for TypeScript/JavaScript linting)
 
-These tools work together based upon some ground rules around repo organization and architecture.
+These tools work together based upon strong opinions around repo organization and architecture. Read on to learn about these ground rules and how they are managed.
 
 ## Understanding Generated Files (`packages/**/dist`)
 
@@ -45,25 +45,26 @@ We generate multiple outputs in order to maximize backwards compatibility and in
 {
   // One of: node | browser | neutral
   //
-  //      node:  Targets Node-like runtimes; used for React Native libraries
-  //             (i.e.: `@magic-sdk/react-native`)
+  //      node:  Targets Node-like runtimes; used for React Native & server-side
+  //             packages (i.e.: `@magic-sdk/react-native`)
   //
-  //   browser:  Targets web-like runtimes; used for web-only libraries
+  //   browser:  Targets web-like runtimes; used for web-only packages
   //             (i.e.: `magic-sdk`)
   //
-  //   neutral:  Targets universal runtimes; used for libraries that are used
-  //             across React Native & web (i.e.: most `@magic-ext/*` packages)
+  //   neutral:  Targets universal runtimes; used for packages that are
+  //             interoperable across React Native & web
+  //             (i.e.: most `@magic-ext/*` packages)
   "target": "...",
 
   // If a CDN bundle should be required,
   // this determines its global variable name
-  // (attached to `window` in the browser)
+  // (attached to `window` in a browser-based context)
   "cdnGlobalName": "...",
 
   // Output location for CJS entrypoint
   "main": "./dist/cjs/index.js",
 
-  // Output location for ES entrypoint
+  // Output location for ES entrypoint (using `.js` extensions)
   "module": "./dist/es/index.js",
 
   // Output location for TypeScript definition files
@@ -77,7 +78,7 @@ We generate multiple outputs in order to maximize backwards compatibility and in
 
   // Here, we define a standard NodeJS "exports" field...
   "exports": {
-    // Output location for ES entrypoint using `.mjs` extensions.
+    // Output location for ES entrypoint (using `.mjs` extensions)
     "import": "./dist/es/index.mjs",
     // Output location for CJS entrypoint
     // (this should be exactly the same as the value defined in "main",
@@ -98,7 +99,7 @@ Each entrypoint type (**CJS**, **ES**, **React Native**, and **CDN**) can define
 - **React Native**: `src/index.native.ts`
 - **CDN**: `src/index.cdn.ts`
 
-All entrypoint types will fall back to `src/index.ts` if a type-specific source file undefined.
+All entrypoint types will fall back to `src/index.ts` if a type-specific source file is undefined.
 
 ## Defining External Dependencies
 
@@ -119,7 +120,7 @@ By default, `"dependencies"` and `"peerDependencies"` listed in `package.json` a
 }
 ```
 
-An exception to the default externals behavior applies to CDN-bundled packages, in which case **all referenced dependencies are bundled regardless of the `"exports"` field in `package.json`**. If a package depends upon `magic-sdk` and/or `@magic-sdk/commons`, these are **not included in the bundle** and instead compiled to reference a global variable: `window.Magic`. This supports a conventional CDN-based implementation in which consumers are expected to add a Magic SDK version themselves. For example:
+An exception to the default externals behavior applies to CDN-bundled packages, in which case **all referenced dependencies are bundled regardless of the `"exports"` field in `package.json`**. If a package depends upon `magic-sdk` and/or `@magic-sdk/commons`, these are **not included in the CDN bundle** and instead compiled to reference a global variable: `window.Magic`. This supports a conventional CDN-based implementation in which consumers are expected to add a Magic SDK version themselves. For example:
 
 ```html
 <!-- `window.Magic` is assigned here! -->

diff --git a/README.md b/README.md
@@ -61,15 +61,21 @@ These are packages _you_ can install to enable Magic JS SDK functionality for yo
 | [`magic-sdk`](https://www.npmjs.com/package/magic-sdk) | [CHANGELOG](./packages/magic-sdk/CHANGELOG.md) | Web/browser entry-point for Magic SDK. |
 | [`@magic-sdk/react-native`](https://www.npmjs.com/package/@magic-sdk/react-native) | [CHANGELOG](./packages/@magic-sdk/react-native/CHANGELOG.md) | React Native entry-point for Magic SDK. |
 
+## Extensions
+
+Extend Magic JS SDK functionality for your use-case through [`@magic-ext/*` packages](./packages/@magic-ext).
+
 ### Internals
 
 These are packages Magic JS SDK uses internally to work seamlessly across platforms.
 
 | Package Name | Changelog | Description |
 | ------------ | --------- | ----------- |
 | [`@magic-sdk/types`](https://www.npmjs.com/package/@magic-sdk/types) | [CHANGELOG](./packages/@magic-sdk/types/CHANGELOG.md) | Core typings shared between JavaScript entry-points of Magic SDK. |
+| [`@magic-sdk/pnp`](https://www.npmjs.com/package/@magic-sdk/pnp) | [CHANGELOG](./packages/@magic-sdk/pnp/CHANGELOG.md) | A lightweight connector that wraps Magic JS authentication with a beautiful, functional out-of-the-box login form. |
 | [`@magic-sdk/provider`](https://www.npmjs.com/package/@magic-sdk/provider) | [CHANGELOG](./packages/@magic-sdk/provider/CHANGELOG.md) | Core business logic shared between JavaScript entry-points of Magic SDK. |
-| [`@magic-sdk/commons`](https://www.npmjs.com/package/@magic-sdk/commons) | [CHANGELOG](./packages/@magic-sdk/commons/CHANGELOG.md) | Exposes a listing of common public APIs from `@magic-sdk/provider` and `@magic-sdk/typings` to the platform-specific entry points. |
+| [`@magic-sdk/commons`](https://www.npmjs.com/package/@magic-sdk/commons) | [CHANGELOG](./packages/@magic-sdk/commons/CHANGELOG.md) | Exposes a listing of common public APIs from `@magic-sdk/provider` and `@magic-sdk/types` to the platform-specific entry points. |
+| [`@magic-sdk/types`](https://www.npmjs.com/package/@magic-sdk/types) | [CHANGELOG](./packages/@magic-sdk/types/CHANGELOG.md) | Core typings for Magic SDK packages. |
 
 ## 🚦 Testing
 

diff --git a/packages/@magic-ext/algorand/README.md b/packages/@magic-ext/algorand/README.md
@@ -32,7 +32,7 @@ const magic = new Magic('YOUR_API_KEY', {
 ```
 
 ## Magic SDK
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes.
 
 
 ## Usage

diff --git a/packages/@magic-ext/harmony/README.md b/packages/@magic-ext/harmony/README.md
@@ -32,7 +32,7 @@ const magic = new Magic('YOUR_API_KEY', {
 ```
 
 ## Magic SDK
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes.
 
 
 ## Usage
@@ -64,7 +64,7 @@ By passing transaction payload to `magic.harmony.sendTransaction()` method, it w
 ### Deploy Contract
 By passing deploy contract payload to `magic.harmony.sendTransaction()` method, it will automatically sign the transaction with current user and
  generate transaction object including signature, then send to Harmony node.
- 
+
 ```js
   const bin = '608060405234801561001057600080fd5b5060c68061001f6000396000f3fe6080604052348015600f576000' +
       '80fd5b506004361060325760003560e01c80636057361d146037578063b05784b8146062575b600080fd5b6060600480' +

diff --git a/packages/@magic-ext/oauth/README.md b/packages/@magic-ext/oauth/README.md
@@ -12,7 +12,7 @@
 
 ## 📖 Documentation
 
-See the [developer documentation](https://docs.magic.link/social-login) to learn how to get started with OAuth in Magic SDK.
+See the [developer documentation](https://magic.link/docs/social-login) to learn how to get started with OAuth in Magic SDK.
 
 ## 🔗 Installation
 

diff --git a/packages/@magic-ext/polkadot/README.md b/packages/@magic-ext/polkadot/README.md
@@ -32,7 +32,7 @@ const magic = new Magic('YOUR_API_KEY', {
 ```
 
 ## Magic SDK
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes.
 
 
 ## Usage
@@ -76,4 +76,4 @@ Send polkadot native currency
 
           console.log('transaction hash', tx)
       }
-```
+```
diff --git a/packages/@magic-ext/tezos/README.md b/packages/@magic-ext/tezos/README.md
@@ -33,7 +33,7 @@ const magic = new Magic('YOUR_API_KEY', {
 ```
 
 ## Magic SDK
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes.
 
 
 ## Usage
@@ -78,7 +78,7 @@ const handleSendContractOrigination = async () => {
         {
            "prim":"code",
            "args":[
-              [  
+              [
                  { "prim":"CAR" },
                  { "prim":"NIL", "args":[ { "prim":"operation" } ] },
                  { "prim":"PAIR" }

diff --git a/packages/@magic-ext/zilliqa/README.md b/packages/@magic-ext/zilliqa/README.md
@@ -34,7 +34,7 @@ const magic = new Magic('YOUR_API_KEY', {
 ```
 
 ## Magic SDK
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes.
 
 
 ## Usage

diff --git a/packages/@magic-sdk/commons/README.md b/packages/@magic-sdk/commons/README.md
@@ -2,17 +2,17 @@
 
 [![<MagicLabs>](https://circleci.com/gh/magiclabs/magic-js.svg?style=shield)](https://circleci.com/gh/magiclabs/magic-js)
 
-> Exposes a listing of common public APIs from `@magic-sdk/provider` and `@magic-sdk/typings` to the platform-specific entry points (`magic-sdk` and `@magic-sdk/react-native`)
+> Exposes a listing of common public APIs from `@magic-sdk/provider` and `@magic-sdk/types` to the platform-specific entry points (`magic-sdk` and `@magic-sdk/react-native`)
 
 <p align="center">
-  <a href="https://github.com/magiclabs/magic-js/blob/master/packages/commons/LICENSE">License</a> ·
-  <a href="https://github.com/magiclabs/magic-js/blob/master/packages/commons/CHANGELOG.md">Changelog</a> ·
+  <a href="https://github.com/magiclabs/magic-js/blob/master/packages/@magic-sdk/commons/LICENSE">License</a> ·
+  <a href="https://github.com/magiclabs/magic-js/blob/master/packages/@magic-sdk/commons/CHANGELOG.md">Changelog</a> ·
   <a href="https://github.com/magiclabs/magic-js/blob/master/CONTRIBUTING.md">Contributing Guide</a>
 </p>
 
 ## 📖 Documentation
 
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes.
 
 ## Looking to Get Started With Magic?
 

diff --git a/packages/@magic-sdk/pnp/README.md b/packages/@magic-sdk/pnp/README.md
@@ -1,47 +1,52 @@
-# ✨ Magic Authentication JavaScript SDK
+# ✨ Magic Login Form
 
 [![<MagicLabs>](https://circleci.com/gh/magiclabs/magic-js.svg?style=shield)](https://circleci.com/gh/magiclabs/magic-js)
 
-> Magic empowers developers to protect their users via an innovative, passwordless authentication flow without the UX compromises that burden traditional OAuth implementations.
+> `pnp == plug n' play`: A lightweight connector that wraps Magic JS authentication with a beautiful, functional out-of-the-box login form.
 
 <p align="center">
-  <a href="https://github.com/magiclabs/magic-js/blob/master/packages/magic-sdk/LICENSE">License</a> ·
-  <a href="https://github.com/magiclabs/magic-js/blob/master/packages/magic-sdk/CHANGELOG.md">Changelog</a> ·
+  <a href="https://github.com/magiclabs/magic-js/blob/master/packages/@magic-sdk/pnp/LICENSE">License</a> ·
+  <a href="https://github.com/magiclabs/magic-js/blob/master/packages/@magic-sdk/pnp/CHANGELOG.md">Changelog</a> ·
   <a href="https://github.com/magiclabs/magic-js/blob/master/CONTRIBUTING.md">Contributing Guide</a>
 </p>
 
 ## 📖 Documentation
 
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs/login-form) to learn how you can build with Magic Login Form in a matter of minutes.
 
-## 🔗 Installation
+## ⚡️ Quick Start (using `<script>` tags)
 
-Integrating your app with Magic will require our client-side NPM package:
-
-```bash
-# Via NPM:
-npm install --save magic-sdk
+Sign up or log in to the [developer dashboard](https://dashboard.magic.link) to receive API keys that will allow your application to interact with Magic's authentication APIs.
 
-# Via Yarn:
-yarn add magic-sdk
-```
+1. Add the login form script
 
-Alternatively, you can load via CDN with by adding a script tag to your app’s `<head>`:
+Create a new login page and add the script tag below. Your API key can be found on the Home page of your Magic Dashboard.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/magic-sdk/dist/magic.js"></script>
+<!-- /login.html -->
+<script
+  src="https://auth.magic.link/pnp/login"
+  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]"
+  data-terms-of-service-uri="/path/to/your/terms-of-service"
+  data-privacy-policy-uri="/path/to/your/privacy-policy"
+  data-redirect-uri="/callback"> <!-- Replace with the location of your callback.html -->
+</script>
 ```
 
-## ⚡️ Quick Start
+This will generate a pre-built login form based on the branding and login methods you’ve enabled via Dashboard. Users will automatically be redirected to the URI provided in data-redirect-uri upon authorization. If no data-redirect-uri is specified, a relative path — /callback — is automatically used as a fallback.
 
-Sign up or log in to the [developer dashboard](https://dashboard.magic.link) to receive API keys that will allow your application to interact with Magic's authentication APIs.
+2. Add the callback script
 
-Then, you can start authenticating users with _just one method!_ Magic works across all modern desktop, mobile Chrome, Safari and Firefox browsers.
+Next, create a page containing the script tag below to handle the authentication callback.
 
-```ts
-import { Magic } from 'magic-sdk';
+```html
+<!-- /callback.html -->
+<script
+  src="https://auth.magic.link/pnp/callback"
+  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]">
+</script>
+```
 
-const magic = new Magic('YOUR_API_KEY');
+Voila!
 
-await magic.auth.loginWithMagicLink({ email: 'your.email@example.com' });
-```
+_(Really, though, that's it!)_
diff --git a/packages/@magic-sdk/provider/README.md b/packages/@magic-sdk/provider/README.md
@@ -12,7 +12,7 @@
 
 ## 📖 Documentation
 
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes.
 
 ## Looking to Get Started With Magic?
 

diff --git a/packages/@magic-sdk/react-native/README.md b/packages/@magic-sdk/react-native/README.md
@@ -12,7 +12,7 @@
 
 ## 📖 Documentation
 
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes.
 
 ## 🔗 Installation
 

diff --git a/packages/@magic-sdk/types/README.md b/packages/@magic-sdk/types/README.md
@@ -12,7 +12,7 @@
 
 ## 📖 Documentation
 
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes.
 
 ## Looking to Get Started With Magic?
 

diff --git a/packages/magic-sdk/README.md b/packages/magic-sdk/README.md
@@ -12,7 +12,7 @@
 
 ## 📖 Documentation
 
-See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
+See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes.
 
 ## 🔗 Installation