Merge pull request #62 from celo-tools/contacts

Implement Contacts Feature

Author: jmrossy

package-electron.json

@@ -1,6 +1,6 @@
 {
   "name": "celo-web-wallet",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "A lightweight web and desktop wallet for the Celo network",
   "main": "main.js",
   "keywords": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "celo-web-wallet",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "A lightweight web and desktop wallet for the Celo network",
   "keywords": [
     "Celo",

src/app/App.tsx

@@ -32,14 +32,14 @@ import { ExploreValidatorsScreen } from 'src/features/validators/ExploreValidato
 import { StakeConfirmationScreen } from 'src/features/validators/StakeConfirmationScreen'
 import { StakeFormScreen } from 'src/features/validators/StakeFormScreen'
 import { StakeRewardsScreen } from 'src/features/validators/StakeRewardsScreen'
+import { AccountsAndContactsScreen } from 'src/features/wallet/accounts/AccountsAndContactsScreen'
 import { AccountsNavigator } from 'src/features/wallet/accounts/AccountsNavigator'
 import { AddAccountScreen } from 'src/features/wallet/accounts/AddAccountScreen'
 import { AddCreateScreen } from 'src/features/wallet/accounts/AddCreateScreen'
 import { AddDeriveScreen } from 'src/features/wallet/accounts/AddDeriveScreen'
 import { AddImportScreen } from 'src/features/wallet/accounts/AddImportScreen'
 import { AddLedgerScreen } from 'src/features/wallet/accounts/AddLedgerScreen'
 import { AddSetPasswordScreen } from 'src/features/wallet/accounts/AddSetPasswordScreen'
-import { ManageAccountsScreen } from 'src/features/wallet/accounts/ManageAccountsScreen'
 import { ViewAccountScreen } from 'src/features/wallet/accounts/ViewAccountScreen'
 import { BalanceDetailsScreen } from 'src/features/wallet/balances/BalanceDetailsScreen'
 import { WalletConnectStatusBox } from 'src/features/walletConnect/WalletConnectStatusBox'
@@ -93,7 +93,7 @@ export const App = () => {
               <Route path="balances" element={<BalanceDetailsScreen />} />
               <Route path="account" element={<ViewAccountScreen />} />
               <Route path="accounts" element={<AccountsNavigator />}>
-                <Route path="/" element={<ManageAccountsScreen />} />
+                <Route path="/" element={<AccountsAndContactsScreen />} />
                 <Route path="add" element={<AddAccountScreen />} />
                 <Route path="create" element={<AddCreateScreen />} />
                 <Route path="derive" element={<AddDeriveScreen />} />

src/app/logout/logout.ts

@@ -1,3 +1,4 @@
+import { resetContacts } from 'src/features/contacts/contactsSlice'
 import { fetchExchangeRateActions } from 'src/features/exchange/exchangeRate'
 import { resetFeed } from 'src/features/feed/feedSlice'
 import { fetchFeedActions } from 'src/features/feed/fetchFeed'
@@ -33,6 +34,7 @@ export function* logout() {
   // Manually putting reset actions to the persisted reducers
   // Several attempts at using redux-persist's purge options
   // all led to different problems
+  yield* put(resetContacts())
   yield* put(resetSettings())
   yield* put(resetValidators())
   yield* put(resetFeed())

src/app/rootReducer.ts

@@ -1,4 +1,5 @@
 import { combineReducers } from '@reduxjs/toolkit'
+import { persistedContactsReducer } from 'src/features/contacts/contactsSlice'
 import { exchangeReducer } from 'src/features/exchange/exchangeSlice'
 import { feedReducer } from 'src/features/feed/feedSlice'
 import { feeReducer } from 'src/features/fees/feeSlice'
@@ -14,6 +15,7 @@ import { monitoredSagaReducers } from './rootSaga'
 
 export const rootReducer = combineReducers({
   wallet: persistedWalletReducer,
+  contacts: persistedContactsReducer,
   feed: feedReducer,
   exchange: exchangeReducer,
   lock: lockReducer,

src/components/Address.tsx

@@ -11,7 +11,8 @@ import { useAddressQrCodeModal } from 'src/features/qr/QrCodeModal'
 import { txFlowReset } from 'src/features/txFlow/txFlowSlice'
 import { Color } from 'src/styles/Color'
 import { Stylesheet } from 'src/styles/types'
-import { tryClipboardSet } from 'src/utils/clipboard'
+import { validateAddress } from 'src/utils/addresses'
+import { useClipboardSet } from 'src/utils/clipboard'
 import { chunk, trimToLength } from 'src/utils/string'
 
 type ButtonType = 'send' | 'copy' | 'qrAndCopy'
@@ -26,13 +27,10 @@ interface Props {
 
 export function Address(props: Props) {
   const { address, name, hideIdenticon, buttonType, isTransparent } = props
-
-  if (!utils.isAddress(address)) {
-    throw new Error('Invalid address')
-  }
+  validateAddress(address, 'Address component')
 
   const onSendButtonClick = useSendToAddress(address)
-  const onCopyButtonClick = useCopyAddress(address)
+  const onCopyButtonClick = useClipboardSet(address)
   const showQrModal = useAddressQrCodeModal()
   const onQrButtonClick = () => {
     showQrModal(address)
@@ -123,12 +121,6 @@ export function useSendToAddress(address: string) {
   }
 }
 
-export function useCopyAddress(address: string) {
-  return async () => {
-    await tryClipboardSet(address)
-  }
-}
-
 function getAddressContainerStyle(
   hideIdenticon?: boolean,
   buttonType?: ButtonType,

src/components/Identicon.tsx

@@ -1,7 +1,8 @@
 import jazzicon from '@metamask/jazzicon'
-import { BigNumber, utils } from 'ethers'
+import { BigNumber } from 'ethers'
 import { PureComponent } from 'react'
 import { Styles } from 'src/styles/types'
+import { isValidAddress, normalizeAddress } from 'src/utils/addresses'
 
 type Props = {
   address: string
@@ -10,17 +11,15 @@ type Props = {
 }
 
 function addressToSeed(address: string) {
-  return BigNumber.from(address.slice(0, 8)).toNumber()
+  return BigNumber.from(normalizeAddress(address).slice(0, 8)).toNumber()
 }
 
 export class Identicon extends PureComponent<Props> {
   render() {
     const { address, size: _size, styles } = this.props
     const size = _size ?? 34
 
-    if (!address || !utils.isAddress(address)) {
-      return null
-    }
+    if (!isValidAddress(address)) return null
 
     const jazziconResult = jazzicon(size, addressToSeed(address))
 

src/components/RenameModal.tsx

@@ -0,0 +1,54 @@
+import { Button } from 'src/components/buttons/Button'
+import { TextInput } from 'src/components/input/TextInput'
+import { Box } from 'src/components/layout/Box'
+import { modalStyles } from 'src/components/modal/modalStyles'
+import { MAX_ACCOUNT_NAME_LENGTH } from 'src/consts'
+import { useCustomForm } from 'src/utils/useCustomForm'
+import { ErrorState, invalidInput } from 'src/utils/validation'
+
+export interface RenameForm {
+  newName: string
+}
+
+interface Props {
+  onSubmit: (values: RenameForm) => void
+  label: string
+}
+
+export function RenameAccountModal(props: Props) {
+  const { onSubmit, label } = props
+  const { values, errors, handleChange, handleBlur, handleSubmit } = useCustomForm<RenameForm>(
+    { newName: '' },
+    onSubmit,
+    validateForm
+  )
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Box direction="column" align="center">
+        <p css={modalStyles.pMargin0}>{`Please set a new name for the ${label}.`}</p>
+        <TextInput
+          name="newName"
+          value={values.newName}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          placeholder="My new name"
+          autoFocus={true}
+          width="11em"
+          margin="1.75em 0 0 0"
+          {...errors['newName']}
+        />
+        <Button size="s" margin="1.8em 0 0 0" type="submit">
+          Rename
+        </Button>
+      </Box>
+    </form>
+  )
+}
+
+function validateForm(values: RenameForm): ErrorState {
+  if (!values.newName) return invalidInput('newName', 'New name is required')
+  if (values.newName.length > MAX_ACCOUNT_NAME_LENGTH)
+    return invalidInput('newName', 'New name is too long')
+  return { isValid: true }
+}

src/components/footer/AboutWallet.tsx

@@ -28,22 +28,22 @@ export function AboutWalletLink({ styles }: { styles: Styles }) {
 function AboutWalletModal() {
   return (
     <Box direction="column" align="center" styles={style.container}>
-      <p style={style.text}>
-        The Celo Wallet is a free, open source wallet for the{' '}
-        <TextLink link="https://celo.org">Celo network</TextLink>. It was created by{' '}
+      <p css={style.text}>
+        The Celo Wallet is a free, open source wallet for the Celo network. It was created by{' '}
         <TextLink link="https://twitter.com/RossyWrote">J M Rossy</TextLink> and{' '}
         <TextLink link="https://www.linkedin.com/in/brianschwalm/">Brian Schwalm</TextLink>.
       </p>
-      <p style={style.text}>
+      <p css={style.text}>
         The source code for the wallet can be found{' '}
         <TextLink link="https://github.com/celo-tools/celo-web-wallet">on Github</TextLink> and
         includes answers to{' '}
         <TextLink link="https://github.com/celo-tools/celo-web-wallet/blob/master/FAQ.md">
           Frequently Asked Questions
         </TextLink>
-        .
+        . For other help, try asking in the{' '}
+        <TextLink link={config.discordUrl}>Discord chat</TextLink>.
       </p>
-      <p style={style.version}>{`Version: ${config.version}`}</p>
+      <p css={style.version}>{`Version: ${config.version}`}</p>
     </Box>
   )
 }

src/components/footer/Footer.tsx

@@ -1,6 +1,7 @@
 import { CopiableAddress } from 'src/components/buttons/CopiableAddress'
 import { AboutWalletLink } from 'src/components/footer/AboutWallet'
 import { ConnectionStatusLink } from 'src/components/footer/ConnectionStatus'
+import { HelpButton } from 'src/components/footer/Help'
 import { Box } from 'src/components/layout/Box'
 import { config } from 'src/config'
 import { DownloadDesktopButton } from 'src/features/download/DownloadDesktopModal'
@@ -11,7 +12,6 @@ import { Stylesheet } from 'src/styles/types'
 
 export function Footer() {
   const isMobile = useIsMobile()
-
   return isMobile ? <FooterMobile /> : <FooterDesktop />
 }
 
@@ -29,9 +29,9 @@ function FooterDesktop() {
               <span>-</span>
             </>
           )}
-          <ValoraLink />
-          <span>-</span>
           <ViewSourceLink />
+          <span>-</span>
+          <HelpButton styles={style.text} />
         </Box>
         <Box direction="row" align="center">
           <CopiableAddress address={address} length="full" styles={style.address} />