Dep Upgrades + Dev Env Support (#20)

* Upgrade sequence deps

* Cleanup and more dependency upgrades

* Add dev mode switch

package.json

@@ -14,10 +14,10 @@
     "clear:vite:cache": "rm -rf node_modules/.vite/"
   },
   "dependencies": {
-    "@0xsequence/design-system": "1.2.5",
-    "@0xsequence/indexer": "1.9.19",
-    "@0xsequence/network": "1.9.19",
-    "@0xsequence/waas": "1.9.19",
+    "@0xsequence/design-system": "1.6.3",
+    "@0xsequence/indexer": "1.9.26",
+    "@0xsequence/network": "1.9.26",
+    "@0xsequence/waas": "1.9.26",
     "@react-oauth/google": "^0.11.1",
     "@vanilla-extract/css": "^1.12.0",
     "axios": "^1.6.0",

src/Login.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, TextInput, Button, Spinner } from '@0xsequence/design-system'
+import { Box, Text, TextInput, Button, Spinner, useTheme } from '@0xsequence/design-system'
 import { SetStateAction, useEffect, useRef, useState } from 'react'
 
 import { router, sequence } from './main'
@@ -19,6 +19,7 @@ function Login() {
   const [showEmailWarning, setEmailWarning] = useState(false)
   const [code, setCode] = useState<string[]>([])
   const [signingIn, setSigningIn] = useState(false)
+  const { theme, setTheme } = useTheme()
 
   const {
       inProgress: emailAuthInProgress,
@@ -67,6 +68,10 @@ function Login() {
         <Logo />
       </Box>
 
+      <Box>
+        <Button variant="primary" label="Change theme" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} />
+      </Box>
+
       <Box>
         <Text variant="large" color="text100" fontWeight="bold">
           Email Login

src/main.css

@@ -0,0 +1,9 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--seq-colors-background-primary);
+}

src/main.tsx

@@ -9,32 +9,34 @@ import { GoogleOAuthProvider } from '@react-oauth/google'
 import { SequenceWaaS } from '@0xsequence/waas'
 import App from './App.tsx'
 import { ethers } from 'ethers'
-import { defaults, ExtendedSequenceConfig } from '@0xsequence/waas'
-import { base64 } from "ethers/lib/utils";
+import './main.css'
 
 const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID
 const SEQUENCE_PROJECT_ACCESS_KEY = import.meta.env.VITE_SEQUENCE_PROJECT_ACCESS_KEY
 const SEQUENCE_WAAS_CONFIG_KEY = import.meta.env.VITE_SEQUENCE_WAAS_CONFIG_KEY
+const SEQUENCE_PROJECT_ACCESS_KEY_DEV = import.meta.env.VITE_SEQUENCE_PROJECT_ACCESS_KEY_DEV
+const SEQUENCE_WAAS_CONFIG_KEY_DEV = import.meta.env.VITE_SEQUENCE_WAAS_CONFIG_KEY_DEV
 
 export const node = new ethers.providers.JsonRpcProvider('https://nodes.sequence.app/polygon')
 
 const urlParams = new URLSearchParams(window.location.search)
-const projectAccessKey = urlParams.get('projectAccessKey') ?? SEQUENCE_PROJECT_ACCESS_KEY
-const waasConfigKey = urlParams.get('waasConfigKey') ?? SEQUENCE_WAAS_CONFIG_KEY
-const preset = extendedSequenceConfigFromBase64(urlParams.get('preset') ?? "") ?? defaults.TEST
-
-function extendedSequenceConfigFromBase64(config: string): ExtendedSequenceConfig | undefined {
-  if (config === "") {
-    return undefined
-  }
-  return JSON.parse(new TextDecoder().decode(base64.decode(config))) as unknown as ExtendedSequenceConfig
+const targetEnv = urlParams.get('env') ?? 'prod'
+let projectAccessKey = urlParams.get('projectAccessKey') ?? SEQUENCE_PROJECT_ACCESS_KEY
+let waasConfigKey = urlParams.get('waasConfigKey') ?? SEQUENCE_WAAS_CONFIG_KEY
+
+if (targetEnv === 'dev') {
+  console.log('Using dev environment')
+  console.log(`Project Access Key: ${SEQUENCE_PROJECT_ACCESS_KEY_DEV}`)
+  console.log(`Waas Config Key: ${SEQUENCE_WAAS_CONFIG_KEY_DEV}`)
+  projectAccessKey = SEQUENCE_PROJECT_ACCESS_KEY_DEV
+  waasConfigKey = SEQUENCE_WAAS_CONFIG_KEY_DEV
 }
 
 export const sequence = new SequenceWaaS({
   network: 'polygon',
   projectAccessKey: projectAccessKey,
   waasConfigKey: waasConfigKey,
-}, preset)
+})
 
 export const router = createHashRouter([
   {

src/utils/useEmailAuth.ts

@@ -16,6 +16,7 @@ export function useEmailAuth({ onSuccess }: { onSuccess: (idToken: string) => vo
       setInstance(instance)
       setEmail(email)
     } catch (e: any) {
+      console.error(e)
       setError(e.message || "Unknown error")
     } finally {
       setLoading(false)