[Wallet] Add Celo Lite toggle (UI only, zeroSync on/off in other PR)

packages/mobile/locales/en-US/accountScreen10.json

@@ -10,6 +10,10 @@
   "shareAnalytics": "Share Analytics",
   "shareAnalytics_detail":
     "We collect anonymized data about how you use Celo to help improve the application for everyone.",
+  "celoLite": "Celo Lite",
+  "enableCeloLite": "Enable Celo Lite",
+  "celoLiteDetail":
+    "Celo Lite mode allows you to communicate with the Celo Network through a trusted node. You can always change this mode in app settings.",
   "testFaqHere": "<0>Test FAQ is </0><1>here</1>",
   "termsOfServiceHere": "<0>Terms of service are </0><1>here</1>",
   "editProfile": "Edit Profile",

packages/mobile/locales/es-419/accountScreen10.json

@@ -10,6 +10,10 @@
   "shareAnalytics": "Compartir estadisticas de uso",
   "shareAnalytics_detail":
     "Recopilamos datos anónimos sobre cómo utiliza Celo para ayudar a mejorar la aplicación para todos.",
+  "celoLite": "Celo Lite",
+  "enableCeloLite": "Habilitar Celo Lite",
+  "celoLiteDetail":
+    "El modo Celo Lite te permite comunicarte con la Red Celo  a través de un nodo confiable. Puedes cambiar este modo en la configuración de la aplicación.",
   "testFaqHere": "<1>Aquí</1><0> están las preguntas frecuentes de la prueba. </0>",
   "termsOfServiceHere": "<1>Aquí</1><0> están las Condiciones de servicio.</0>",
   "editProfile": "Editar perfil",

packages/mobile/src/account/Account.tsx

@@ -109,6 +109,10 @@ export class Account extends React.Component<Props, State> {
     navigate(Screens.Analytics, { nextScreen: Screens.Account })
   }
 
+  goToCeloLite() {
+    navigate(Screens.CeloLite, { nextScreen: Screens.Account })
+  }
+
   goToFAQ() {
     navigateToURI(FAQ_LINK)
   }
@@ -229,6 +233,9 @@ export class Account extends React.Component<Props, State> {
               <SettingsItem title={t('celoRewards')} onPress={navigateToVerifierApp} />
             )}
             <SettingsItem title={t('analytics')} onPress={this.goToAnalytics} />
+            {/* // TODO(anna) Disabled until switch geth on/off is implemented
+            <SettingsItem title={t('celoLite')} onPress={this.goToCeloLite} /> 
+            */}
             <SettingsItem title={t('languageSettings')} onPress={this.goToLanguageSetting} />
             <SettingsItem
               title={t('localCurrencySetting')}

packages/mobile/src/account/Analytics.test.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import * as renderer from 'react-test-renderer'
+import Analytics from 'src/account/Analytics'
+import { createMockStore } from 'test/utils'
+
+describe('Analytics', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <Provider store={createMockStore({})}>
+        <Analytics />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})

packages/mobile/src/account/Analytics.tsx

@@ -1,7 +1,6 @@
 import SettingsSwitchItem from '@celo/react-components/components/SettingsSwitchItem'
 import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts'
-import variables from '@celo/react-components/styles/variables'
 import * as React from 'react'
 import { WithNamespaces, withNamespaces } from 'react-i18next'
 import { ScrollView, StyleSheet, Text } from 'react-native'
@@ -50,27 +49,10 @@ export class Analytics extends React.Component<Props> {
 }
 
 const style = StyleSheet.create({
-  accountHeader: {
-    paddingTop: 20,
-  },
-  input: {
-    borderWidth: 1,
-    borderRadius: 3,
-    borderColor: '#EEEEEE',
-    padding: 5,
-    height: 54,
-    margin: 20,
-    width: variables.width - 40,
-    fontSize: 16,
-  },
   scrollView: {
     flex: 1,
     backgroundColor: colors.background,
   },
-  container: {
-    flex: 1,
-    paddingLeft: 20,
-  },
 })
 
 export default connect<StateProps, DispatchProps, {}, RootState>(

packages/mobile/src/account/CeloLite.test.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import * as renderer from 'react-test-renderer'
+import CeloLite from 'src/account/CeloLite'
+import { createMockStore } from 'test/utils'
+
+describe('CeloLite', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <Provider store={createMockStore({})}>
+        <CeloLite />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})

packages/mobile/src/account/CeloLite.tsx

@@ -0,0 +1,65 @@
+import SettingsSwitchItem from '@celo/react-components/components/SettingsSwitchItem'
+import colors from '@celo/react-components/styles/colors'
+import fontStyles from '@celo/react-components/styles/fonts'
+import * as React from 'react'
+import { WithNamespaces, withNamespaces } from 'react-i18next'
+import { ScrollView, StyleSheet, Text } from 'react-native'
+import { connect } from 'react-redux'
+import i18n, { Namespaces } from 'src/i18n'
+import { headerWithCancelButton } from 'src/navigator/Headers'
+import { RootState } from 'src/redux/reducers'
+import { setZeroSyncMode } from 'src/web3/actions'
+
+interface StateProps {
+  zeroSyncEnabled: boolean
+}
+
+interface DispatchProps {
+  setZeroSyncMode: typeof setZeroSyncMode
+}
+
+type Props = StateProps & DispatchProps & WithNamespaces
+
+const mapDispatchToProps = {
+  setZeroSyncMode,
+}
+
+const mapStateToProps = (state: RootState): StateProps => {
+  return {
+    zeroSyncEnabled: state.web3.zeroSyncMode,
+  }
+}
+
+export class CeloLite extends React.Component<Props> {
+  static navigationOptions = () => ({
+    ...headerWithCancelButton,
+    headerTitle: i18n.t('accountScreen10:celoLite'),
+  })
+
+  render() {
+    const { zeroSyncEnabled, t } = this.props
+    return (
+      <ScrollView style={style.scrollView} keyboardShouldPersistTaps="handled">
+        <SettingsSwitchItem
+          switchValue={zeroSyncEnabled}
+          onSwitchChange={this.props.setZeroSyncMode}
+          details={t('celoLiteDetail')}
+        >
+          <Text style={fontStyles.body}>{t('enableCeloLite')}</Text>
+        </SettingsSwitchItem>
+      </ScrollView>
+    )
+  }
+}
+
+const style = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+})
+
+export default connect<StateProps, DispatchProps, {}, RootState>(
+  mapStateToProps,
+  mapDispatchToProps
+)(withNamespaces(Namespaces.accountScreen10)(CeloLite))

packages/mobile/src/account/EditProfile.tsx

@@ -73,9 +73,6 @@ export class EditProfile extends React.Component<Props> {
 }
 
 const style = StyleSheet.create({
-  accountHeader: {
-    paddingTop: 20,
-  },
   input: {
     borderWidth: 1,
     borderRadius: 3,
@@ -90,10 +87,6 @@ const style = StyleSheet.create({
     flex: 1,
     backgroundColor: colors.background,
   },
-  container: {
-    flex: 1,
-    paddingLeft: 20,
-  },
 })
 
 export default connect<StateProps, DispatchProps, {}, RootState>(

packages/mobile/src/account/Education.tsx

@@ -189,20 +189,6 @@ const style = StyleSheet.create({
     flex: 1,
     paddingHorizontal: 20,
   },
-  footerLink: {
-    color: colors.celoGreen,
-    textAlign: 'center',
-    marginTop: 10,
-    marginBottom: 25,
-  },
-  circleContainer: {
-    flex: 0,
-    width: PROGRESS_CIRCLE_PASSIVE_SIZE,
-    height: PROGRESS_CIRCLE_PASSIVE_SIZE,
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: 5,
-  },
   circle: {
     flex: 0,
     backgroundColor: colors.inactive,

packages/mobile/src/account/Invite.tsx

@@ -135,15 +135,6 @@ const style = StyleSheet.create({
     flex: 1,
     backgroundColor: colors.background,
   },
-  inviteHeadline: {
-    fontSize: 24,
-    lineHeight: 39,
-    color: colors.dark,
-  },
-  label: {
-    alignSelf: 'center',
-    textAlign: 'center',
-  },
 })
 
 export default componentWithAnalytics(

packages/mobile/src/account/Licenses.test.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import * as renderer from 'react-test-renderer'
+import Licenses from 'src/account/Licenses'
+import { createMockStore } from 'test/utils'
+
+describe('Licenses', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <Provider store={createMockStore({})}>
+        <Licenses />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})

packages/mobile/src/account/Profile.tsx

@@ -65,9 +65,6 @@ export class Profile extends React.Component<Props> {
 }
 
 const style = StyleSheet.create({
-  accountHeader: {
-    paddingTop: 20,
-  },
   accountProfile: {
     paddingLeft: 10,
     paddingTop: 30,
@@ -76,26 +73,6 @@ const style = StyleSheet.create({
     flexDirection: 'column',
     alignItems: 'center',
   },
-  accountFooter: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: 50,
-    margin: 10,
-  },
-  accountFooterText: {
-    paddingBottom: 10,
-  },
-  editProfileButton: {
-    height: 28,
-    width: 110,
-  },
-  image: {
-    height: 55,
-    width: 55,
-    borderRadius: 50,
-  },
   underlinedBox: {
     borderTopWidth: 1,
     borderColor: '#EEEEEE',

packages/mobile/src/account/__snapshots__/Analytics.test.tsx.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Analytics renders correctly 1`] = `
+<RCTScrollView
+  keyboardShouldPersistTaps="handled"
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "flex": 1,
+    }
+  }
+>
+  <View>
+    <View
+      style={
+        Object {
+          "borderBottomWidth": 1,
+          "borderColor": "#EEEEEE",
+          "marginLeft": 15,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "padding": 20,
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "justifyContent": "center",
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              Object {
+                "color": "#2E3338",
+                "fontFamily": "Hind-Regular",
+                "fontSize": 16,
+                "lineHeight": 24,
+              }
+            }
+          >
+            shareAnalytics
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "justifyContent": "center",
+              },
+            ]
+          }
+        >
+          <AndroidSwitch
+            accessibilityRole="button"
+            enabled={true}
+            on={true}
+            onChange={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            thumbTintColor="#FFFFFF"
+            trackColorForFalse="#E3E3E5"
+            trackColorForTrue="#42D689"
+            trackTintColor="#42D689"
+          />
+        </View>
+      </View>
+      <View
+        style={
+          Object {
+            "paddingBottom": 20,
+            "paddingLeft": 20,
+            "paddingRight": 20,
+          }
+        }
+      >
+        <Text>
+          shareAnalytics_detail
+        </Text>
+      </View>
+    </View>
+  </View>
+</RCTScrollView>
+`;