IRO-1307 - Address UI lag in rendering Magic Link state

apiClient/client.ts

@@ -12,6 +12,11 @@ import {
   LoginEvent,
 } from './types'
 import { LocalError } from './errors'
+import {
+  UNABLE_TO_LOGIN,
+  ENDPOINT_UNAVAILABLE,
+  NOT_ISOMORPHIC,
+} from 'constants/errors'
 
 // Environment variables set in Vercel config.
 const SERVER_API_URL = process.env.API_URL
@@ -142,7 +147,7 @@ export async function getMetricsConfig(): Promise<
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export async function login(email: string): Promise<any> {
   if (typeof window === 'undefined' || !magic) {
-    return new LocalError('Only runnable in the browser', 500)
+    return new LocalError('Only runnable in the browser', NOT_ISOMORPHIC)
   }
   try {
     await magic.auth.loginWithMagicLink({
@@ -161,7 +166,7 @@ export async function login(email: string): Promise<any> {
       return { statusCode: 200, loaded: true }
     }
   } catch (e) {
-    return new LocalError(e.message, 500)
+    return new LocalError(e.message, UNABLE_TO_LOGIN)
   }
 }
 
@@ -177,13 +182,13 @@ export async function getUserDetails(
     })
     return data.json()
   } catch (e) {
-    return new LocalError(e.message, 500)
+    return new LocalError(e.message, ENDPOINT_UNAVAILABLE)
   }
 }
 
 export async function tokenLogin(): Promise<LoginEvent | LocalError> {
   if (typeof window === 'undefined' || !magic) {
-    return new LocalError('Only runnable in the browser', 500)
+    return new LocalError('Only runnable in the browser', NOT_ISOMORPHIC)
   }
   try {
     const token = await magic.auth.loginWithCredential()
@@ -195,6 +200,6 @@ export async function tokenLogin(): Promise<LoginEvent | LocalError> {
     })
     return res.json()
   } catch (e) {
-    return new LocalError(e.message, 500)
+    return new LocalError(e.message, ENDPOINT_UNAVAILABLE)
   }
 }

components/FooterCTA/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import Router from 'next/router'
+import Link from 'next/link'
 import Intertubes from 'components/About/ImageIntertubes'
 import { RawButton } from 'components/Button'
 
@@ -21,23 +21,24 @@ export function TubesCTA({ cta, goTo, buttonText }: TubesCTAProps) {
           <br />
           {cta}
         </h3>
-        <RawButton
-          onClick={() => Router.push(goTo)}
-          className={clsx(
-            'm-auto',
-            'mt-8',
-            'mb-16',
-            'max-w-[240px]',
-            'text-lg',
-            'px-4',
-            'py-3',
-            'md:text-xl',
-            'md:py-5',
-            'md:px-4'
-          )}
-        >
-          {buttonText}
-        </RawButton>
+        <Link passHref href={goTo}>
+          <RawButton
+            className={clsx(
+              'm-auto',
+              'mt-8',
+              'mb-16',
+              'max-w-[240px]',
+              'text-lg',
+              'px-4',
+              'py-3',
+              'md:text-xl',
+              'md:py-5',
+              'md:px-4'
+            )}
+          >
+            {buttonText}
+          </RawButton>
+        </Link>
       </div>
     </>
   )

components/Navbar/Flyout.tsx

@@ -1,5 +1,6 @@
 import Logo from 'components/Logo'
 import Close from 'components/icons/Close'
+import { LoginContext } from 'hooks/useLogin'
 import NavbarLinks from './Links'
 
 export type NavbarFlyoutProps = {
@@ -9,6 +10,7 @@ export type NavbarFlyoutProps = {
   testnetClicked: () => unknown
   companyVisible: boolean
   testnetVisible: boolean
+  loginContext: LoginContext
 }
 
 export function NavbarFlyout({
@@ -18,12 +20,14 @@ export function NavbarFlyout({
   testnetClicked,
   companyVisible,
   testnetVisible,
+  loginContext,
 }: NavbarFlyoutProps) {
   const navbarLinksProps = {
     companyClicked,
     testnetClicked,
     companyVisible,
     testnetVisible,
+    loginContext,
   }
   return (
     <div

components/Navbar/Links.tsx

@@ -1,6 +1,8 @@
 import Link from 'next/link'
 import clsx from 'clsx'
 
+import { LoginContext } from 'hooks/useLogin'
+
 import SubnavButton from './SubnavButton'
 import LoginButton from './LoginButton'
 import Company from './Company'
@@ -16,6 +18,7 @@ type NavbarLinksProps = {
   testnetClicked?: () => unknown
   testnetHovered?: () => unknown
   testnetVisible?: boolean
+  loginContext: LoginContext
 }
 
 export function NavbarLinks({
@@ -28,6 +31,7 @@ export function NavbarLinks({
   testnetClicked,
   testnetHovered,
   testnetVisible = false,
+  loginContext,
 }: NavbarLinksProps) {
   const itemPadding = [`px-2`, `lg:px-3.5`, `3xl:px-5`]
   const cc = clsx([className, ...itemPadding])
@@ -60,7 +64,7 @@ export function NavbarLinks({
       >
         {testnetVisible && <Testnet condensed={condensed} />}
       </SubnavButton>
-      <LoginButton />
+      <LoginButton loginContext={loginContext} />
     </>
   )
 }

components/Navbar/LoginButton.tsx

@@ -1,7 +1,7 @@
 import { useState, ReactNode, MouseEventHandler } from 'react'
 import Link from 'next/link'
 import clsx from 'clsx'
-import { LoginContext } from 'contexts/LoginContext'
+import { LoginContext } from 'hooks/useLogin'
 
 import ChevronDown from './ChevronDown'
 import { ApiUserMetadata } from 'apiClient/types'
@@ -142,52 +142,49 @@ const UserButton = ({ id, graffiti, visible }: ApiUserMetadataUI) => (
     </Link>
   </div>
 )
-export const LoginButton = () => {
+type LoginProps = {
+  loginContext: LoginContext
+}
+export const LoginButton = ({ loginContext }: LoginProps) => {
   const [$visible, $setVisible] = useState<boolean>(false)
   const set = (x: boolean) => () => $setVisible(x)
   const on = set(true)
   const off = set(false)
+  const { checkLoggedIn, metadata } = loginContext
+  const isLoggedIn = checkLoggedIn()
+  // eslint-disable-next-line
+  const meta = metadata as any
   return (
-    <LoginContext.Consumer>
-      {({ checkLoggedIn, metadata }) => {
-        const isLoggedIn = checkLoggedIn()
-        // eslint-disable-next-line
-        const meta = metadata as any
-        const hasGraffiti = metadata && !!metadata.graffiti
-        return (
-          <HoverButton
-            className={clsx(
-              'bg-transparent',
-              'h-16',
-              'hover:bg-black',
-              'hover:text-white',
-              'px-6',
-              'py-3',
-              'relative',
-              'text-2xl',
-              'text-black',
-              'text-center',
-              'md:min-w-[8rem]',
-              'md:h-12',
-              'md:ml-4',
-              'md:px-3',
-              'md:text-sm',
-              'lg:min-w-[10rem]',
-              'lg:px-6',
-              'lg:text-base'
-            )}
-            onMouseOver={on}
-            onMouseOut={off}
-          >
-            {isLoggedIn && hasGraffiti ? (
-              <UserButton {...meta} visible={$visible} />
-            ) : (
-              <StaticButton href="/login" />
-            )}
-          </HoverButton>
-        )
-      }}
-    </LoginContext.Consumer>
+    <HoverButton
+      className={clsx(
+        'bg-transparent',
+        'h-16',
+        'hover:bg-black',
+        'hover:text-white',
+        'px-6',
+        'py-3',
+        'relative',
+        'text-2xl',
+        'text-black',
+        'text-center',
+        'md:min-w-[8rem]',
+        'md:h-12',
+        'md:ml-4',
+        'md:px-3',
+        'md:text-sm',
+        'lg:min-w-[10rem]',
+        'lg:px-6',
+        'lg:text-base'
+      )}
+      onMouseOver={on}
+      onMouseOut={off}
+    >
+      {isLoggedIn ? (
+        <UserButton {...meta} visible={$visible} />
+      ) : (
+        <StaticButton href="/login" />
+      )}
+    </HoverButton>
   )
 }
 export default LoginButton

components/Navbar/index.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx'
 import Logo from 'components/Logo'
 import Menu from 'components/icons/Menu'
 import { useNav, NavState } from 'hooks/useNav'
+import { LoginContext } from 'hooks/useLogin'
 
 import NavbarLinks from './Links'
 import NavbarFlyout from './Flyout'
@@ -13,11 +14,13 @@ import Link from 'next/link'
 type NavbarProps = {
   className?: string
   fill?: string
+  loginContext: LoginContext
 }
 
 function Navbar({
   fill = 'white',
   className = 'bg-black text-white',
+  loginContext,
 }: NavbarProps) {
   const {
     $flyoutVisible,
@@ -40,6 +43,7 @@ function Navbar({
     testnetClicked: toggleNavTestnet,
     testnetHovered: enterNavTestnet,
     testnetVisible,
+    loginContext,
   }
   return (
     <nav

components/ResponsiveToolkit/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
+import { ApiUserMetadata } from 'apiClient/types'
 import clsx from 'clsx'
 import useQuery from 'hooks/useQuery'
-import { useLogin } from 'hooks/useLogin'
 import styles from './ResponsiveToolkit.module.css'
 import pkg from 'package.json'
 
@@ -45,15 +45,14 @@ const points = [
   '90%',
 ]
 
-type ResponsiveToolkitProps = {
-  userDetails: ReturnType<typeof useLogin>
+type ToolkitProps = {
+  metadata: ApiUserMetadata | null
 }
 
-const ResponsiveToolkit = ({ userDetails }: ResponsiveToolkitProps) => {
+const ResponsiveToolkit = ({ metadata }: ToolkitProps) => {
   const [$active, $setActive] = useState(true)
   const [$width, $setWidth] = useState(-1)
   const [$point, $setPoint] = useState(0)
-  const [$graffiti, $setGraffiti] = useState('👻')
   const toggle = () => $setActive(!$active)
   const $toolkit = useQuery('debug')
   const $customPoint = useQuery('point')
@@ -66,8 +65,6 @@ const ResponsiveToolkit = ({ userDetails }: ResponsiveToolkitProps) => {
     const update = () => {
       $setWidth(window.innerWidth)
       const newPoints = activePoints()
-      // eslint-disable-next-line no-console
-      console.log({ points: newPoints, $customPoint })
       $setPoint(newPoints)
     }
     if ($toolkit) {
@@ -81,16 +78,6 @@ const ResponsiveToolkit = ({ userDetails }: ResponsiveToolkitProps) => {
   const horizontal = pointsPlus.filter(z => !z.startsWith('v'))
   const vertical = pointsPlus.filter(z => z.startsWith('v'))
 
-  useEffect(() => {
-    if (userDetails && userDetails.metadata) {
-      // eslint-disable-next-line
-      const given = userDetails!.metadata.graffiti
-      if ($graffiti !== given) {
-        $setGraffiti(given)
-      }
-    }
-  }, [userDetails, $graffiti])
-
   return $toolkit ? (
     <>
       <div className={styles.toolkit} onClick={toggle}>
@@ -99,7 +86,7 @@ const ResponsiveToolkit = ({ userDetails }: ResponsiveToolkitProps) => {
       <div className={styles.debugMode}>
         {pkg.name}@{pkg.version}
       </div>
-      <div className={styles.contextual}>{$graffiti}</div>
+      <div className={styles.contextual}>{metadata?.graffiti || '👻'}</div>
       {$active && horizontal.map(x => <Breakpoint key={x} at={x} />)}
       {$active &&
         vertical.map(x => <Breakpoint key={x} at={x} horizontal={false} />)}

constants/errors.ts

@@ -0,0 +1,18 @@
+export const NO_MAGIC_INSTANCE = 1000
+export const NO_MAGIC_TOKEN = 1001
+export const NO_MAGIC_USER = 1002
+
+export const NOT_ISOMORPHIC = 2000
+
+export const UNABLE_TO_LOGIN = 3000
+
+export const ENDPOINT_UNAVAILABLE = 4000
+
+export const ERRORS = {
+  NO_MAGIC_INSTANCE,
+  NO_MAGIC_TOKEN,
+  NO_MAGIC_USER,
+  NOT_ISOMORPHIC,
+  UNABLE_TO_LOGIN,
+  ENDPOINT_UNAVAILABLE,
+}