[Wallet] Implement new import wallet flow designs (#1209)

* Implement new import wallet flow designs including empty wallet warning * Improve responsiveness of import wallet screen * More robust error handling for import saga * Add tests for import saga * Cleanup redundant web3 zerosync mocks introduced in #1108
celo-org · Oct 7, 2019 · 25feb78 · 25feb78
1 parent 31a8633
commit 25feb78
Show file tree

Hide file tree

Showing 81 changed files with 626 additions and 798 deletions.
diff --git a/packages/mobile/__mocks__/src/geth/network-config.ts b/packages/mobile/__mocks__/src/geth/network-config.ts
@@ -0,0 +1,8 @@
+import { DEFAULT_SYNC_MODE, DEFAULT_TESTNET } from 'src/web3/testnets'
+
+export default {
+  [DEFAULT_TESTNET]: {
+    nodeDir: `.${DEFAULT_TESTNET}`,
+    syncMode: DEFAULT_SYNC_MODE,
+  },
+}
diff --git a/packages/mobile/__mocks__/src/web3/testnets.ts b/packages/mobile/__mocks__/src/web3/testnets.ts
@@ -0,0 +1,4 @@
+import { GethSyncMode } from 'src/geth/consts'
+
+export const DEFAULT_TESTNET = 'integration'
+export const DEFAULT_SYNC_MODE: GethSyncMode = GethSyncMode.Ultralight
diff --git a/packages/mobile/__mocks__/web3.js b/packages/mobile/__mocks__/web3.js
@@ -43,13 +43,12 @@ export default class {
     },
     getAccounts: () => {},
     accounts: {
-      privateKeyToAccount: () =>
-        '0x1129eb2fbccdc663f4923a6495c35b096249812b589f7c4cd1dba01e1edaf724',
+      privateKeyToAccount: () => ({ address: '0x0000000000000000000000000000000000007E57' }),
       wallet: {
         add: () => null,
       },
       create: () => ({
-        address: '0x1129eb2fbccdc663f4923a6495c35b096249812b589f7c4cd1dba01e1edaf724',
+        address: '0x0000000000000000000000000000000000007E57',
         privateKey: '0x1129eb2fbccdc663f4923a6495c35b096249812b589f7c4cd1dba01e1edaf724',
       }),
     },

diff --git a/packages/mobile/locales/en-US/global.json b/packages/mobile/locales/en-US/global.json
@@ -62,7 +62,7 @@
   "canNotRequestFromUnverified": "Can not request from unverified users",
   "restartApp": "Restart App",
   "loading": "Loading…",
-  "invalidBackup": "Invalid Backup Key",
+  "invalidBackupPhrase": "Invalid Backup Key",
   "importBackupFailed": "Importing Wallet Failed",
   "inviteFailed": "Failure sending invite",
   "importContactsFailed": "Failed to import contacts",

diff --git a/packages/mobile/locales/en-US/nuxRestoreWallet3.json b/packages/mobile/locales/en-US/nuxRestoreWallet3.json
@@ -1,22 +1,14 @@
 {
-  "welcomeCelo": "Welcome to Celo",
-  "enterInvite":
-    "Enter your invitation code. If you do not have one, ask someone in the Celo Community to invite you. By joining this application, you agree to share your name & phone number with us. Learn more at celo.org",
-  "fullName": "Full Name",
-  "invitationCode": "Invitation Code",
-  "submit": "Submit",
-  "alreadyHaveWallet": "Already have a Celo Wallet? Restore it",
-  "restoreYourWallet": {
-    "title": "Restore your Celo Wallet",
-    "userYourBackupKey":
-      "Already have a Celo Wallet? Use your secure Backup Key to restore your wallet to this phone.",
-    "warning": "Warning ",
-    "restoreInPrivate": "Restore your Wallet in private "
-  },
-  "backupKeyPrompt": "Backup Key",
+  "title": "Restore your Celo Wallet",
+  "userYourBackupKey":
+    "Already have a Celo Wallet? Enter your Backup Key to restore it to this phone.",
+  "backupKeyPrompt":
+    "horse leopard dog monkey shark tiger lemur whale squid wolf squirrel mouse lion elephant cat shrimp bear penguin deer turtle fox zebra goat giraffe",
   "tip": "Tip: ",
-  "backupKeyTip": "Backup Key words are separated by a space",
-  "continue": "Continue",
-  "cancel": "Cancel",
-  "restoreWallet": "Restore Celo Wallet"
+  "backupKeyTip": "Backup Keys are 24 words long, separated by a space.",
+  "restoreWallet": "Restore",
+  "emptyWalletWarning": "This wallet is empty.",
+  "useEmptyAnyway": "Would you like to use it anyway?",
+  "useEmptyWallet": "Use Empty Wallet",
+  "tryAnotherKey": "Try Another Backup Key"
 }
diff --git a/packages/mobile/locales/es-419/global.json b/packages/mobile/locales/es-419/global.json
@@ -62,7 +62,7 @@
   "canNotRequestFromUnverified": "No se puede solicitar a usuarios no verificados.",
   "restartApp": "Reiniciar la aplicación",
   "loading": "Cargando…",
-  "invalidBackup": "Clave de respaldo inválida",
+  "invalidBackupPhrase": "Clave de respaldo inválida",
   "importBackupFailed": "No se pudo importar el monedero",
   "inviteFailed": "Falló el envío de la invitación",
   "importContactsFailed": "Error al importar contactos",

diff --git a/packages/mobile/locales/es-419/nuxRestoreWallet3.json b/packages/mobile/locales/es-419/nuxRestoreWallet3.json
@@ -1,22 +1,14 @@
 {
-  "welcomeCelo": "Te damos la bienvenida a Celo",
-  "enterInvite":
-    "Ingresegcódigo de invitación. Si no tiene uno, pídale a alguien de la comunidad de Celo que lo invite.\n\nAl unirse a esta aplicación, acuerda compartir tu nombre y número telefónico con nosotros. Obtenga más información en celo.org",
-  "fullName": "Nombre completo",
-  "invitationCode": "Código de invitación",
-  "submit": "Enviar",
-  "alreadyHaveWallet": "¿Ya tiene un Monedero Celo? Restáurelo",
-  "restoreWallet": "Restaurar el Monedero Celo",
-  "restoreYourWallet": {
-    "title": "Restaurar tu Monedero Celo",
-    "userYourBackupKey":
-      "¿Ya tiene un Monedero Celo? Use tu clave de respaldo segura para restaurar tu monedero a este teléfono.",
-    "warning": "¡Cuidado! ",
-    "restoreInPrivate": "Hágalo en privado"
-  },
-  "backupKeyPrompt": "Clave de respaldo",
+  "title": "Restaurar tu Monedero Celo",
+  "userYourBackupKey":
+    "¿Ya tiene un Monedero Celo? Ingrese su Clave de Respaldo para restaurarla a este teléfono.",
+  "backupKeyPrompt":
+    "caballo leopardo perro mono tiburón tigre lémur ballena calamar lobo ardilla ratón león elefante gato camarones oso pingüino...",
   "tip": "Consejo: ",
-  "backupKeyTip": "las palabras de la clave de respaldo están separadas por un espacio",
-  "continue": "Continuar",
-  "cancel": "Cancelar"
+  "backupKeyTip": "Las Claves de Respaldo son de 24 palabras, separadas por un espacio.",
+  "restoreWallet": "Restaurar",
+  "emptyWalletWarning": "Este Monedero esta vacio",
+  "useEmptyAnyway": "¿Te gustaría usarlo de todos modos?",
+  "useEmptyWallet": "Usar Monedero Vacío",
+  "tryAnotherKey": "Probar con otra Clave de Respaldo"
 }
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -48,7 +48,7 @@
   "dependencies": {
     "@celo/client": "640a41f",
     "@celo/react-native-sms-retriever": "git+https://github.com/celo-org/react-native-sms-retriever#d3a2fdb",
-    "@celo/utils": "^0.1.0",
+    "@celo/utils": "^0.1.1",
     "@celo/walletkit": "^0.0.14",
     "@react-native-community/netinfo": "^2.0.4",
     "@segment/analytics-react-native": "^1.1.0-beta.1",

diff --git a/packages/mobile/src/account/Account.test.tsx b/packages/mobile/src/account/Account.test.tsx
@@ -12,10 +12,6 @@ import { createMockStore } from 'test/utils'
 
 jest.useFakeTimers()
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('Account', () => {
   it('renders correctly', () => {
     const tree = renderer.create(

diff --git a/packages/mobile/src/account/DollarEducation.test.tsx b/packages/mobile/src/account/DollarEducation.test.tsx
@@ -5,10 +5,6 @@ import * as renderer from 'react-test-renderer'
 import DollarEducation from 'src/account/DollarEducation'
 import { createMockStore } from 'test/utils'
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('DollarEducation', () => {
   it('renders correctly', () => {
     const tree = renderer.create(

diff --git a/packages/mobile/src/account/EditProfile.test.tsx b/packages/mobile/src/account/EditProfile.test.tsx
@@ -6,10 +6,6 @@ import { setName } from 'src/account/actions'
 import { EditProfile } from 'src/account/EditProfile'
 import { createMockStore, getMockI18nProps } from 'test/utils'
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 it('renders the EditProfile Component', () => {
   const store = createMockStore()
   const tree = renderer.create(

diff --git a/packages/mobile/src/account/Education.test.tsx b/packages/mobile/src/account/Education.test.tsx
@@ -26,10 +26,6 @@ const educationProps = {
   onFinish: jest.fn(),
 }
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('Education', () => {
   it('renders correctly', () => {
     const tree = renderer.create(

diff --git a/packages/mobile/src/account/GoldEducation.test.tsx b/packages/mobile/src/account/GoldEducation.test.tsx
@@ -5,10 +5,6 @@ import * as renderer from 'react-test-renderer'
 import GoldEducation from 'src/account/GoldEducation'
 import { createMockStore } from 'test/utils'
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('GoldEducation', () => {
   it('renders correctly', () => {
     const tree = renderer.create(

diff --git a/packages/mobile/src/account/Invite.test.tsx b/packages/mobile/src/account/Invite.test.tsx
@@ -6,10 +6,6 @@ import Invite from 'src/account/Invite'
 import { createMockStore } from 'test/utils'
 import { mockE164NumberToInvitableRecipient, mockNavigation } from 'test/values'
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('Invite', () => {
   it('renders correctly with recipients', () => {
     const tree = renderer.create(

diff --git a/packages/mobile/src/account/InviteReview.test.tsx b/packages/mobile/src/account/InviteReview.test.tsx
@@ -18,15 +18,6 @@ jest.mock('src/identity/verification', () => {
   return { isPhoneVerified: jest.fn(() => true) }
 })
 
-jest.mock('src/web3/contracts', () => ({
-  web3: {
-    utils: {
-      fromWei: jest.fn((x: any) => x / 1e18),
-    },
-  },
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('InviteReview', () => {
   it('renders correctly', () => {
     const tree = renderer.create(

diff --git a/packages/mobile/src/account/PhotosEducation.test.tsx b/packages/mobile/src/account/PhotosEducation.test.tsx
@@ -5,10 +5,6 @@ import * as renderer from 'react-test-renderer'
 import PhotosEducation from 'src/account/PhotosEducation'
 import { createMockStore } from 'test/utils'
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('PhotosEducation', () => {
   it('renders correctly', () => {
     const tree = renderer.create(

diff --git a/packages/mobile/src/account/Profile.test.tsx b/packages/mobile/src/account/Profile.test.tsx
@@ -9,10 +9,6 @@ import { Screens } from 'src/navigator/Screens'
 import { createMockStore } from 'test/utils'
 import { mockNavigation } from 'test/values'
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 function profileFactory() {
   return (
     <Provider store={createMockStore({})}>

diff --git a/packages/mobile/src/app/App.test.tsx b/packages/mobile/src/app/App.test.tsx
@@ -25,10 +25,6 @@ jest.mock('src/redux/sagas', () => {
   }
 })
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('App', () => {
   it('renders an ApolloProvider', () => {
     const wrapper = shallow(<App />)

diff --git a/packages/mobile/src/app/Debug.test.tsx b/packages/mobile/src/app/Debug.test.tsx
@@ -5,10 +5,6 @@ import * as renderer from 'react-test-renderer'
 import Debug from 'src/app/Debug'
 import { createMockStore } from 'test/utils'
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('Debug', () => {
   it('renders correctly', () => {
     const tree = renderer.create(

diff --git a/packages/mobile/src/app/ErrorMessages.ts b/packages/mobile/src/app/ErrorMessages.ts
@@ -8,7 +8,8 @@ export enum ErrorMessages {
   NSF_DOLLARS = 'notEnoughDollarsError',
   NSF_TO_SEND = 'needMoreFundsToSend',
   INVALID_AMOUNT = 'invalidAmount',
-  INVALID_BACKUP = 'invalidBackup',
+  INVALID_BACKUP_PHRASE = 'invalidBackupPhrase',
+  EMPTY_BACKUP_PHRASE = 'emptyBackupPhrase',
   IMPORT_BACKUP_FAILED = 'importBackupFailed',
   INVALID_PHONE_NUMBER = 'nuxVerification2:invalidPhone',
   NOT_READY_FOR_CODE = 'nuxVerification2:notReadyForCode',

diff --git a/packages/mobile/src/app/saga.test.ts b/packages/mobile/src/app/saga.test.ts
@@ -19,15 +19,6 @@ jest.mock('src/firebase/firebase', () => ({
   getVersionInfo: jest.fn(async () => ({ deprecated: false })),
 }))
 
-jest.mock('src/web3/contracts', () => ({
-  web3: {
-    utils: {
-      fromWei: jest.fn((x: any) => x / 1e18),
-    },
-  },
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 const { navigate } = require('src/navigator/NavigationService')
 const { getVersionInfo } = require('src/firebase/firebase')
 

diff --git a/packages/mobile/src/components/AccountOverview.test.tsx b/packages/mobile/src/components/AccountOverview.test.tsx
@@ -8,10 +8,6 @@ import { getMockI18nProps } from 'test/utils'
 const SAMPLE_BALANCE = '55.00001'
 const exchangeRatePair: ExchangeRatePair = { goldMaker: '0.11', dollarMaker: '10' }
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 it('renders correctly when ready', () => {
   const tree = renderer.create(
     <AccountOverview

diff --git a/packages/mobile/src/escrow/EscrowedPaymentLineItem.test.tsx b/packages/mobile/src/escrow/EscrowedPaymentLineItem.test.tsx
@@ -4,10 +4,6 @@ import * as renderer from 'react-test-renderer'
 import PaymentRequestNotificationInner from 'src/paymentRequest/PaymentRequestNotificationInner'
 import { mockRecipientWithPhoneNumber } from 'test/values'
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 it('renders correctly', () => {
   const tree = renderer.create(
     <PaymentRequestNotificationInner

diff --git a/packages/mobile/src/escrow/ReclaimPaymentConfirmationCard.test.tsx b/packages/mobile/src/escrow/ReclaimPaymentConfirmationCard.test.tsx
@@ -10,10 +10,6 @@ import { mockE164Number, mockRecipient } from 'test/values'
 
 const store = createMockStore()
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('ReclaimPaymentConfirmationCard', () => {
   it('renders correctly for send payment confirmation', () => {
     const tree = renderer.create(

diff --git a/packages/mobile/src/escrow/ReclaimPaymentConfirmationScreen.test.tsx b/packages/mobile/src/escrow/ReclaimPaymentConfirmationScreen.test.tsx
@@ -12,15 +12,6 @@ const TEST_FEE = new BigNumber(10000000000000000)
 
 jest.mock('src/escrow/saga')
 
-jest.mock('src/web3/contracts', () => ({
-  web3: {
-    utils: {
-      fromWei: jest.fn((x: any) => x / 1e18),
-    },
-  },
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 const mockedGetReclaimEscrowFee = getReclaimEscrowFee as jest.Mock
 
 const store = createMockStore()

diff --git a/packages/mobile/src/exchange/ExchangeTradeScreen.test.tsx b/packages/mobile/src/exchange/ExchangeTradeScreen.test.tsx
@@ -18,10 +18,6 @@ jest.mock('src/shared/DisconnectBanner', () => ({
   DisconnectBanner: () => null,
 }))
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 const store = createMockStore({
   exchange: {
     exchangeRatePair,

diff --git a/packages/mobile/src/fees/saga.test.ts b/packages/mobile/src/fees/saga.test.ts
@@ -18,16 +18,6 @@ jest.mock('@celo/walletkit', () => ({
   },
 }))
 
-jest.mock('src/web3/contracts', () => ({
-  web3: {
-    utils: {
-      fromWei: jest.fn((x: any) => x / 1e18),
-      toWei: jest.fn((x: any) => x * 1e18),
-    },
-  },
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe(estimateFeeSaga, () => {
   beforeAll(() => {
     jest.useRealTimers()

diff --git a/packages/mobile/src/home/CeloDollarsOverview.test.tsx b/packages/mobile/src/home/CeloDollarsOverview.test.tsx
@@ -4,10 +4,6 @@ import * as renderer from 'react-test-renderer'
 import CeloDollarsOverview from 'src/home/CeloDollarsOverview'
 import { createMockStore } from 'test/utils'
 
-jest.mock('src/web3/contracts', () => ({
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('CeloDollarsOverview', () => {
   it('renders correctly', () => {
     const tree = renderer.create(

diff --git a/packages/mobile/src/home/NotificationBox.test.tsx b/packages/mobile/src/home/NotificationBox.test.tsx
@@ -19,15 +19,6 @@ const storeData = {
   },
 }
 
-jest.mock('src/web3/contracts', () => ({
-  web3: {
-    utils: {
-      fromWei: jest.fn((x: any) => x / 1e18),
-    },
-  },
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('NotificationBox', () => {
   it('Simple test', () => {
     // const store = createMockStore(storeData)

diff --git a/packages/mobile/src/home/WalletHome.test.tsx b/packages/mobile/src/home/WalletHome.test.tsx
@@ -20,15 +20,6 @@ const storeData = {
 jest.mock('src/components/AccountOverview')
 jest.mock('src/home/TransactionsList')
 
-jest.mock('src/web3/contracts', () => ({
-  web3: {
-    utils: {
-      fromWei: jest.fn((x: any) => x / 1e18),
-    },
-  },
-  isZeroSyncMode: jest.fn().mockReturnValueOnce(false),
-}))
-
 describe('Testnet banner', () => {
   it('Shows testnet banner for 5 seconds', async () => {
     const store = createMockStore({