[magic-v2.0.1] - Add userEmail init option to handle logged in session and add configurable z-index (#935)

* Increase magic modal z-index and expose as variable
* Add userEmail init option, validation and update readme and demo
* Update email validation and allow null for localstorage passing, fix spelling errors in readmes
* Bump common package in Magic deps
* Prettier-ify validation
* Add email validation to login modal
* Update Magic version in demo

Author: Adamj1232

packages/core/README.md

@@ -355,7 +355,7 @@ const { unsubscribe } = state.subscribe(update =>
 // unsubscribe()
 ```
 
-Specific top level slices of state can be subcribed to. For example you may want to just subscribe to receive updates to the `wallets` array only:
+Specific top level slices of state can be subscribed to. For example you may want to just subscribe to receive updates to the `wallets` array only:
 
 ```javascript
 const wallets = onboard.state.select('wallets')
@@ -522,7 +522,7 @@ Many of the wallet modules require dependencies that are not normally included i
 
 ### Webpack 4
 
-Everything should just work since the node builtins are automatically bundled in v4
+Everything should just work since the node built-ins are automatically bundled in v4
 
 ### Webpack 5
 

packages/demo/package.json

@@ -22,10 +22,10 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.0.4",
+    "@web3-onboard/core": "^2.2.1",
     "@web3-onboard/fortmatic": "^2.0.0",
     "@web3-onboard/gnosis": "^2.0.0",
-    "@web3-onboard/injected-wallets": "^2.0.3",
+    "@web3-onboard/injected-wallets": "^2.0.5",
     "@web3-onboard/keepkey": "^2.0.0",
     "@web3-onboard/keystone": "^2.0.0",
     "@web3-onboard/ledger": "^2.0.0",
@@ -34,7 +34,7 @@
     "@web3-onboard/trezor": "^2.0.0",
     "@web3-onboard/walletconnect": "^2.0.0",
     "@web3-onboard/coinbase": "^2.0.0",
-    "@web3-onboard/magic": "^2.0.0",
+    "@web3-onboard/magic": "^2.0.1",
     "vconsole": "^3.9.5"
   },
   "license": "MIT",

packages/demo/src/App.svelte

@@ -81,7 +81,10 @@
   const trezor = trezorModule(trezorOptions)
 
   const magic = magicModule({
-    apiKey: 'pk_live_02207D744E81C2BA'
+    apiKey: 'pk_live_02207D744E81C2BA',
+    // userEmail: 'test@test.com' 
+    // userEmail is optional - if user has already logged in and/or session is still active a login modal will not appear
+    // for more info see the @web3-onboard/magic docs
   })
 
   const onboard = Onboard({

packages/magic/README.md

@@ -12,13 +12,14 @@ in the same fashion that all other web3-onboard UI components are
 
 `npm i @web3-onboard/magic`
 
-Head over to https://magic.link/ and signup to get an API key
+Head over to https://magic.link/ and sign up to get an API key
 
 ## Options
 
 ```typescript
-type magicOptions = {
+type MagicInitOptions = {
   apiKey: string
+  userEmail?: string  // optional - if user has already logged in and/or session is still active a login modal will not appear
 }
 ```
 
@@ -28,7 +29,7 @@ type magicOptions = {
 import Onboard from '@web3-onboard/core'
 import magicModule from '@web3-onboard/magic'
 
-const magic = magicModule({ apiKey: 'API_KEY' })
+const magic = magicModule({ apiKey: 'API_KEY', userEmail: localStorage.getItem('magicUserEmail') })
 
 const onboard = Onboard({
   // ... other Onboard options
@@ -43,13 +44,17 @@ console.log(connectedWallets)
 ```
 
 ### Accessing the Magic Wallet Internals
-When a Magic wallet is connect the Magic instance is exposed. 
+When a Magic wallet is connected the Magic instance is exposed. 
 This can be used to get information such as user MetaData, update a user's email address or handle the user's token.
+The user's email can be set in local storage and passed through the `MagicInitOptions` to avoid a user having to login again if they are returning to the DApp within the set user session time. 
+Magic has a default time of 7 days and this can be configured through your Magic API Key settings.
 ```typescript
 const [magicWallet] = await onboard.connectWallet()
 
 try {
   const { email, publicAddress } = await magicWallet.instance.user.getMetadata();
+  localStorage.setItem('magicUserEmail', email) 
+  // This email can then be passed through the MagicInitOptions to continue the users session and avoid having to login again
 } catch {
   // Handle errors if required!
 }

packages/magic/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/magic",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Magic module for Onboard.js",
   "scripts": {
     "build": "rollup -c",
@@ -42,8 +42,9 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.0.3",
+    "@web3-onboard/common": "^2.0.5",
     "magic-sdk": "^8.1.0",
-    "rxjs": "^7.5.2"
+    "rxjs": "^7.5.2",
+    "joi": "^17.4.2"
   }
 }

packages/magic/rollup.config.js

@@ -35,5 +35,5 @@ export default {
       inlineSources: !production
     })
   ],
-  external: ['rxjs', 'magic-sdk', '@web3-onboard/common']
+  external: ['joi', 'rxjs', 'magic-sdk', '@web3-onboard/common']
 }

packages/magic/src/index.ts

@@ -1,7 +1,16 @@
-import type { WalletInit, APIKey, EIP1193Provider } from '@web3-onboard/common'
+import type { WalletInit, EIP1193Provider } from '@web3-onboard/common'
+import type { MagicInitOptions } from './types'
+import { validateMagicInitOptions } from './validation'
 
-function magic(options: APIKey): WalletInit {
-  const { apiKey } = options
+function magic(options: MagicInitOptions): WalletInit {
+  if (options) {
+    const error = validateMagicInitOptions(options)
+
+    if (error) {
+      throw error
+    }
+  }
+  const { apiKey, userEmail } = options
   const walletName = 'Magic Wallet'
 
   return () => {
@@ -12,7 +21,6 @@ function magic(options: APIKey): WalletInit {
         const { Magic, RPCErrorCode } = await import('magic-sdk')
         const loginModal = (await import('./login-modal.js')).default
         const brandingHTML = (await import('./branding.js')).default
-        let loggedIn: boolean = false
 
         const {
           createEIP1193Provider,
@@ -24,7 +32,7 @@ function magic(options: APIKey): WalletInit {
 
         if (!chains.length)
           throw new Error(
-            'Atleast one Chain must be passed to onboard in order to connect'
+            'At least one Chain must be passed to onboard in order to connect'
           )
 
         let currentChain = chains[0]
@@ -38,6 +46,8 @@ function magic(options: APIKey): WalletInit {
           network: customNodeOptions
         })
 
+        let loggedIn: boolean
+
         const loginWithEmail = async (emailAddress: string) => {
           try {
             await magicInstance.auth.loginWithMagicLink({ email: emailAddress })
@@ -49,6 +59,8 @@ function magic(options: APIKey): WalletInit {
           }
         }
 
+        if (userEmail) loggedIn = await loginWithEmail(userEmail)
+
         const handleLogin = async () => {
           loggedIn = await loginModal({
             walletName: walletName,

packages/magic/src/login-modal.ts

@@ -83,6 +83,9 @@ const mountLoginModal = (
         /* SPACING */
         --margin-4: 1rem;
         --margin-5: 0.5rem;
+
+        /* MODAL POSITIONING */
+        --z-index: 25;
       }
 
     </style>

packages/magic/src/types.ts

@@ -4,4 +4,9 @@ export type LoginOptions = {
   emailLoginFunction: EmailLoginFunction
 }
 
+export type MagicInitOptions = {
+  apiKey: string,
+  userEmail?: string,
+}
+
 export type EmailLoginFunction = (emailAddress: string) => Promise<boolean>

packages/magic/src/validation.ts

@@ -0,0 +1,28 @@
+import Joi from 'joi'
+import type { MagicInitOptions } from './types'
+
+const userEmail = Joi.string()
+  .email({ tlds: { allow: false } })
+  .allow(null)
+
+const magicOptions = Joi.object({
+  apiKey: Joi.string().required(),
+  userEmail: userEmail
+})
+
+type ValidateReturn = Joi.ValidationResult | null
+
+const validate = (validator: Joi.Schema, data: unknown): ValidateReturn => {
+  const result = validator.validate(data)
+  return result.error ? result : null
+}
+
+export const validateMagicInitOptions = (
+  data: MagicInitOptions
+): ValidateReturn => {
+  return validate(magicOptions, data)
+}
+
+export const validateUserEmail = (email: string): ValidateReturn => {
+  return validate(userEmail, email)
+}

packages/magic/src/view/LoginModal.svelte

@@ -2,6 +2,7 @@
   import { fade } from 'svelte/transition'
   import type { Subject } from 'rxjs'
 
+  import { validateUserEmail } from '../validation'
   import CloseButton from '../elements/CloseButton.svelte'
   import Spinner from '../elements/Spinner.svelte'
   import type { LoginOptions } from '../types'
@@ -19,16 +20,13 @@
     errorInEmail = false
   }
 
-  const emailRegex =
-    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-
   const validateEmail = (value: string) => {
-    return emailRegex.test(value)
+    return validateUserEmail(value)
   }
 
   const login = async () => {
     loading = true
-    if (!validateEmail(credentials)) {
+    if (validateEmail(credentials)) {
       errorInEmail = true
       loading = false
       return
@@ -42,6 +40,12 @@
     loggedIn$.next(false)
     loading = false
   }
+
+  const submitOnEnter = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      login();
+    }
+  }
 </script>
 
 <style>
@@ -120,7 +124,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    z-index: 20;
+    z-index: var(--login-modal-z-index, var(--z-index));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -130,7 +134,7 @@
     background-color: rgba(0, 0, 0, 0.2);
   }
 
-  .login-modal {
+  .onboard-magic-login-modal {
     min-width: 36rem;
     max-height: 51.75rem;
     display: table;
@@ -166,7 +170,7 @@
 </style>
 
 <div class="container">
-  <div class="login-modal" transition:fade>
+  <div class="onboard-magic-login-modal" transition:fade>
     <div class="close-action-container close" on:click={dismiss}>
       <CloseButton />
     </div>
@@ -178,6 +182,7 @@
         placeholder="Email address"
         bind:value={credentials}
         on:input={() => setErrorInEmail()}
+        on:keydown={submitOnEnter}
       />
       {#if errorInEmail}
         <span class="error-msg">Please enter a valid email address</span>

packages/react/README.md

@@ -164,7 +164,7 @@ type UseConnectWallet = (): [
 ]
 
 type ConnectOptions = {
-  autoSelect?: string // wallet name to autoselect for user
+  autoSelect?: string // wallet name to auto-select for user
 }
 
 type DisconnectOptions = {