Adding error states for transfer, account page

Closes: aptos-labs#750
wk3368 · May 2, 2022 · e2d1503 · e2d1503
1 parent 7e8f6ba
commit e2d1503
Show file tree

Hide file tree

Showing 14 changed files with 583 additions and 59 deletions.
diff --git a/ecosystem/web-wallet/src/components/ChakraLink.tsx b/ecosystem/web-wallet/src/components/ChakraLink.tsx
@@ -0,0 +1,9 @@
+// Copyright (c) Aptos
+// SPDX-License-Identifier: Apache-2.0
+
+import { chakra } from '@chakra-ui/react'
+import { Link } from 'react-router-dom'
+
+const ChakraLink = chakra(Link)
+
+export default ChakraLink
diff --git a/ecosystem/web-wallet/src/components/CreateWalletHeader.tsx b/ecosystem/web-wallet/src/components/CreateWalletHeader.tsx
@@ -0,0 +1,43 @@
+// Copyright (c) Aptos
+// SPDX-License-Identifier: Apache-2.0
+
+import { ChevronLeftIcon } from '@chakra-ui/icons'
+import { Center, Grid, IconButton, Text, useColorMode } from '@chakra-ui/react'
+import React from 'react'
+import ChakraLink from './ChakraLink'
+
+const secondaryHeaderBgColor = {
+  light: 'gray.200',
+  dark: 'gray.700'
+}
+
+export const seconaryAddressFontColor = {
+  light: 'gray.500',
+  dark: 'gray.400'
+}
+
+export default function CreateWalletHeader () {
+  const { colorMode } = useColorMode()
+
+  return (
+    <Center
+      maxW="100%"
+      width="100%"
+      py={2}
+      bgColor={secondaryHeaderBgColor[colorMode]}
+    >
+      <Grid templateColumns="32px 1fr 32px" px={4} width="100%" gap={4}>
+        <ChakraLink to="/">
+          <IconButton size="xs" borderRadius="full" aria-label="go back" icon={<ChevronLeftIcon fontSize="md" />} />
+        </ChakraLink>
+        <Text
+          fontSize="md"
+          textAlign="center"
+        >
+          Create Wallet
+        </Text>
+        <></>
+      </Grid>
+    </Center>
+  )
+}
diff --git a/ecosystem/web-wallet/src/components/HelpHeader.tsx b/ecosystem/web-wallet/src/components/HelpHeader.tsx
@@ -0,0 +1,42 @@
+// Copyright (c) Aptos
+// SPDX-License-Identifier: Apache-2.0
+
+import { ChevronLeftIcon } from '@chakra-ui/icons'
+import { Center, Grid, IconButton, Text, useColorMode } from '@chakra-ui/react'
+import React from 'react'
+import ChakraLink from './ChakraLink'
+
+const secondaryHeaderBgColor = {
+  light: 'gray.200',
+  dark: 'gray.700'
+}
+
+export const seconaryAddressFontColor = {
+  light: 'gray.500',
+  dark: 'gray.400'
+}
+
+export default function HelpHeader () {
+  const { colorMode } = useColorMode()
+
+  return (
+    <Center
+      maxW="100%"
+      width="100%"
+      py={2}
+      bgColor={secondaryHeaderBgColor[colorMode]}
+    >
+      <Grid templateColumns="32px 1fr 32px" px={4} width="100%" gap={4}>
+        <ChakraLink to="/">
+          <IconButton size="xs" borderRadius="full" aria-label="go back" icon={<ChevronLeftIcon fontSize="md" />} />
+        </ChakraLink>
+        <Text
+          fontSize="md"
+          textAlign="center"
+        >
+          Help
+        </Text>
+      </Grid>
+    </Center>
+  )
+}
diff --git a/ecosystem/web-wallet/src/components/WalletFooter.tsx b/ecosystem/web-wallet/src/components/WalletFooter.tsx
@@ -0,0 +1,63 @@
+
+// Copyright (c) Aptos
+// SPDX-License-Identifier: Apache-2.0
+
+import { Center, IconButton, SimpleGrid, useColorMode } from '@chakra-ui/react'
+import { IoIosPerson } from 'react-icons/io'
+import { RiCopperCoinFill } from 'react-icons/ri'
+import React from 'react'
+import ChakraLink from './ChakraLink'
+import { useLocation } from 'react-router-dom'
+
+const secondaryHeaderBgColor = {
+  light: 'gray.200',
+  dark: 'gray.700'
+}
+
+const secondaryIconColor = {
+  light: 'gray.800',
+  dark: 'white'
+}
+
+export default function WalletFooter () {
+  const { colorMode } = useColorMode()
+  const { pathname } = useLocation()
+
+  return (
+    <Center
+      maxW="100%"
+      width="100%"
+      py={2}
+      bgColor={secondaryHeaderBgColor[colorMode]}
+    >
+      <SimpleGrid width="100%" gap={4} columns={2}>
+        <Center width="100%">
+          <ChakraLink to="/wallet">
+            <IconButton
+              color={(pathname === '/wallet') ? 'blue.400' : secondaryIconColor[colorMode] }
+              variant="unstyled"
+              size="md"
+              aria-label=""
+              fontSize="xl"
+              icon={<RiCopperCoinFill />}
+              display="flex"
+            />
+          </ChakraLink>
+        </Center>
+        <Center width="100%">
+          <ChakraLink to="/account">
+            <IconButton
+              color={(pathname === '/account') ? 'blue.400' : secondaryIconColor[colorMode] }
+              variant="unstyled"
+              size="md"
+              aria-label="go back"
+              icon={<IoIosPerson />}
+              fontSize="xl"
+              display="flex"
+            />
+          </ChakraLink>
+        </Center>
+      </SimpleGrid>
+    </Center>
+  )
+}
diff --git a/ecosystem/web-wallet/src/components/WalletHeader.tsx b/ecosystem/web-wallet/src/components/WalletHeader.tsx
@@ -36,7 +36,7 @@ export default function WalletHeader () {
         >
           Address
         </Text>
-        <Tooltip label={hasCopied ? 'Copied!' : 'Copy address'}>
+        <Tooltip label={hasCopied ? 'Copied!' : 'Copy address'} closeDelay={300}>
           <Text whiteSpace="nowrap" as="span">
             <Text
               fontSize="xs"

diff --git a/ecosystem/web-wallet/src/constants.ts b/ecosystem/web-wallet/src/constants.ts
@@ -2,5 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export const KEY_LENGTH: number = 64
-export const devnetNodeUrl = 'https://fullnode.devnet.aptoslabs.com'
-export const faucetUrl = 'https://faucet.devnet.aptoslabs.com'
+export const DEVNET_NODE_URL = 'https://fullnode.devnet.aptoslabs.com'
+export const FAUCET_URL = 'https://faucet.devnet.aptoslabs.com'
+
+export const secondaryBgColor = {
+  dark: 'gray.900',
+  light: 'white'
+}
+
+export const secondaryErrorMessageColor = {
+  dark: 'red.200',
+  light: 'red.500'
+}
diff --git a/ecosystem/web-wallet/src/hooks/useWalletState.ts b/ecosystem/web-wallet/src/hooks/useWalletState.ts
@@ -23,9 +23,6 @@ const walletStateLocalStorageKey = 'aptosWalletState'
 
 export default function useWalletState () {
   const [localStorageState, setLocalStorageState] = useState<LocalStorageState>(() => {
-    if (typeof window === 'undefined') {
-      return defaultValue
-    }
     try {
       // Get from local storage by key
       const item = window.localStorage.getItem(walletStateLocalStorageKey)
@@ -37,9 +34,6 @@ export default function useWalletState () {
   })
 
   const [aptosAccount, setAptosAccount] = useState<AptosAccountState>(() => {
-    if (typeof window === 'undefined') {
-      return undefined
-    }
     try {
       const item = window.localStorage.getItem(walletStateLocalStorageKey)
       const localStorageState: AptosAccountObject = item ? JSON.parse(item) : defaultValue
@@ -51,15 +45,11 @@ export default function useWalletState () {
         return undefined
       }
     } catch (err) {
-      console.log(err)
       return undefined
     }
   })
 
   const updateWalletState = useCallback(({ aptosAccountState }: UpdateWalletStateProps) => {
-    if (typeof window === 'undefined') {
-      return
-    }
     try {
       const privateKeyObject = aptosAccountState?.toPrivateKeyObject()
       setAptosAccount(aptosAccountState)
@@ -70,7 +60,13 @@ export default function useWalletState () {
     }
   }, [])
 
-  return { walletState: localStorageState, aptosAccount, updateWalletState }
+  const signOut = useCallback(() => {
+    setAptosAccount(undefined)
+    setLocalStorageState({ aptosAccountObject: undefined })
+    window.localStorage.removeItem(walletStateLocalStorageKey)
+  }, [])
+
+  return { walletState: localStorageState, aptosAccount, updateWalletState, signOut }
 }
 
 export const [WalletStateProvider, useWalletStateContext] = constate(useWalletState)
diff --git a/ecosystem/web-wallet/src/index.tsx b/ecosystem/web-wallet/src/index.tsx
@@ -3,12 +3,14 @@
 
 import React, { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { MemoryRouter, Routes, Route } from 'react-router-dom'
+import { Routes, Route, MemoryRouter } from 'react-router-dom'
 import { ChakraProvider, extendTheme, type ThemeConfig } from '@chakra-ui/react'
 import Wallet from './pages/Wallet'
 import Login from './pages/Login'
 import { WalletStateProvider } from './hooks/useWalletState'
 import Help from './pages/Help'
+import CreateWallet from './pages/CreateWallet'
+import Account from './pages/Account'
 
 const theme: ThemeConfig = extendTheme({
   initialColorMode: 'dark',
@@ -29,11 +31,13 @@ root.render(
   <StrictMode>
     <ChakraProvider theme={theme}>
       <WalletStateProvider>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={['/']}>
           <Routes>
-            <Route path='/' element={<Login/>}></Route>
-            <Route path='/wallet' element={<Wallet/>}></Route>
-            <Route path="/help" element={<Help />}></Route>
+            <Route path='/' element={<Login/>} />
+            <Route path='/wallet' element={<Wallet/>} />
+            <Route path="/help" element={<Help />} />
+            <Route path="/create-wallet" element={<CreateWallet />} />
+            <Route path="/account" element={<Account />} />
           </Routes>
         </MemoryRouter>
       </WalletStateProvider>