Merge pull request #728 from Emurgo/nicarq/ch2042/add-staking-center-…

…ui-to-mobile

Nicarq/ch2042/add staking center ui to mobile

.gitignore

@@ -88,3 +88,5 @@ android/app/src/main/res/drawable*
 .env.production
 .env.staging
 sentry.properties
+app-mainnet-release.apk
+output.json

src/AppNavigator.js

@@ -5,13 +5,15 @@ import {createStackNavigator, createSwitchNavigator} from 'react-navigation'
 import HeaderBackButton from './components/UiKit/HeaderBackButton'
 import WalletInitNavigator from './components/WalletInit/WalletInitNavigator'
 import TxHistoryNavigator from './components/TxHistory/TxHistoryNavigator'
+import DelegationNavigatorSummary from './components/Delegation/DelegationNavigatorSummary'
+import DelegationNavigatorCenter from './components/Delegation/DelegationNavigatorCenter'
 import SendScreenNavigator from './components/Send/SendScreenNavigator'
 import ReceiveScreenNavigator from './components/Receive/ReceiveScreenNavigator'
 import FirstRunNavigator from './components/FirstRun/FirstRunNavigator'
 import IndexScreen from './components/IndexScreen'
 import SplashScreen from './components/SplashScreen'
 import AppStartScreen from './components/Login/AppStartScreen'
-import {WALLET_ROUTES, ROOT_ROUTES} from './RoutesList'
+import {WALLET_ROUTES, SHELLEY_WALLET_ROUTES, ROOT_ROUTES} from './RoutesList'
 import BiometricAuthScreen from './components/Send/BiometricAuthScreen'
 import CustomPinLogin from './components/Login/CustomPinLogin'
 import {
@@ -35,6 +37,21 @@ const WalletNavigator = createStackNavigator(
   },
 )
 
+const ShelleyWalletNavigator = createStackNavigator(
+  {
+    [SHELLEY_WALLET_ROUTES.DELEGATION_SUMMARY]: DelegationNavigatorSummary,
+    [SHELLEY_WALLET_ROUTES.STAKING_CENTER]: DelegationNavigatorCenter,
+  },
+  {
+    // TODO(ppershing): initialRouteName
+    // works reversed. Figure out why!
+    initialRouteName: SHELLEY_WALLET_ROUTES.DELEGATION_SUMMARY,
+    navigationOptions: {
+      header: null,
+    },
+  },
+)
+
 const AppNavigator = createSwitchNavigator(
   {
     [ROOT_ROUTES.SPLASH]: SplashScreen,
@@ -43,6 +60,7 @@ const AppNavigator = createSwitchNavigator(
     [ROOT_ROUTES.NEW_WALLET]: WalletInitNavigator,
     [ROOT_ROUTES.BIO_AUTH]: BiometricAuthScreen,
     [ROOT_ROUTES.WALLET]: WalletNavigator,
+    [ROOT_ROUTES.SHELLEY_WALLET]: ShelleyWalletNavigator,
     [ROOT_ROUTES.LOGIN]: createStackNavigator(
       {
         [ROOT_ROUTES.LOGIN]: {

src/RoutesList.js

@@ -57,6 +57,11 @@ export const WALLET_ROUTES = {
   SETTINGS: SETTINGS_ROUTES.MAIN,
 }
 
+export const SHELLEY_WALLET_ROUTES = {
+  STAKING_CENTER: 'staking-center',
+  DELEGATION_SUMMARY: 'delegation-summary',
+}
+
 const INDEX_SCREEN = 'screens-index'
 const LOGIN_SCREEN = 'login'
 const INIT_SCREEN = CONFIG.DEBUG.START_WITH_INDEX_SCREEN
@@ -72,5 +77,6 @@ export const ROOT_ROUTES = {
   FIRST_RUN: 'first-run',
   NEW_WALLET: 'new-wallet',
   WALLET: 'app-root',
+  SHELLEY_WALLET: 'app-root-shelley',
   INIT: INIT_SCREEN,
 }

src/actions.js

@@ -341,8 +341,9 @@ export const createWallet = (
   name: string,
   mnemonic: string,
   password: string,
+  isShelleyWallet: boolean,
 ) => async (dispatch: Dispatch<any>) => {
-  await walletManager.createWallet(name, mnemonic, password)
+  await walletManager.createWallet(name, mnemonic, password, isShelleyWallet)
   dispatch(updateWallets())
 }
 

src/components/Delegation/DelegationCenter.js

@@ -0,0 +1,43 @@
+// @flow
+import React from 'react'
+import {CONFIG} from '../../config'
+import {View, WebView} from 'react-native'
+import {compose, withHandlers} from 'recompose'
+import {injectIntl, defineMessages} from 'react-intl'
+import type {IntlShape} from 'react-intl';
+import type {NavigationScreenProp, NavigationState} from 'react-navigation';
+
+import type {ComponentType} from 'react'
+import {withNavigationTitle} from "../../utils/renderUtils";
+
+const messages = defineMessages({
+  title: {
+    id: 'components.stakingcenter.title',
+    defaultMessage: '!!!Staking Center',
+    description: 'some desc',
+  },
+  // header: {
+  //   id: 'components.walletselection.walletselectionscreen.header',
+  //   defaultMessage: '!!!Your wallets',
+  // },
+//   addWalletButton: {
+//     id: 'components.walletselection.walletselectionscreen.addWalletButton',
+//     defaultMessage: '!!!Add wallet',
+//   },
+})
+
+const DelegationCenter = ({navigation, intl}) => (
+      <View style={{ flex: 1 }}>
+        <WebView source={{uri: 'http://localhost:3000/staking-simple/list?sortBy=REVENUE&searchText=&performance[]=0&performance[]=100'}} />
+      </View>
+)
+
+export default injectIntl(
+  (compose(
+    withNavigationTitle(({intl}) => intl.formatMessage(messages.title)),
+  )(DelegationCenter): ComponentType<{
+    intl: IntlShape,
+    navigation: NavigationScreenProp<NavigationState>,
+  }>),
+)
+

src/components/Delegation/DelegationNavigationButtons.js

@@ -0,0 +1,54 @@
+// @flow
+
+import React from 'react'
+import {compose} from 'redux'
+import {View} from 'react-native'
+import {withHandlers} from 'recompose'
+import {injectIntl, defineMessages} from 'react-intl'
+
+import {SHELLEY_WALLET_ROUTES} from '../../RoutesList'
+import {Button} from '../UiKit'
+
+import styles from './styles/DelegationNavigator.style'
+
+import iconStakingCenter from '../../assets/img/icon/receive.png'
+
+import type {NavigationScreenProp, NavigationState} from 'react-navigation'
+
+const messages = defineMessages({
+  stakingCenterButton: {
+    id: 'components.delegation.delegationnavigationbuttons.stakingCenterButton',
+    defaultMessage: '!!!StakingCenter',
+  },
+})
+
+type Props = {
+  navigation: NavigationScreenProp<NavigationState>,
+  navigateToStakingCenter: () => mixed,
+  intl: any,
+}
+
+const DelegationNavigationButtons = ({
+                                       navigation,
+                                       navigateToStakingCenter,
+                                       intl,
+                                     }: Props) => (
+  <View style={styles.container}>
+    <Button
+      block
+      onPress={navigateToStakingCenter}
+      title={intl.formatMessage(messages.stakingCenterButton)}
+      style={styles.mainButton}
+      iconImage={iconStakingCenter}
+    />
+  </View>
+)
+
+export default injectIntl(
+  compose(
+    withHandlers({
+      navigateToStakingCenter: ({navigation}) => (event) =>
+        navigation.navigate(SHELLEY_WALLET_ROUTES.STAKING_CENTER),
+    }),
+  )(DelegationNavigationButtons),
+)

src/components/Delegation/DelegationNavigatorCenter.js

@@ -0,0 +1,35 @@
+// @flow
+import React from 'react'
+import {createStackNavigator} from 'react-navigation'
+import DelegationCenter from './DelegationCenter'
+import {SHELLEY_WALLET_ROUTES} from '../../RoutesList'
+
+import {
+  defaultNavigationOptions,
+  defaultStackNavigatorOptions,
+} from '../../navigationOptions'
+
+import HeaderBackButton from '../UiKit/HeaderBackButton'
+
+const DelegationNavigatorCenter = createStackNavigator(
+  {
+    [SHELLEY_WALLET_ROUTES.STAKING_CENTER]: {
+      screen: DelegationCenter,
+      navigationOptions: ({navigation}) => ({
+        title: navigation.getParam('title'),
+        ...defaultNavigationOptions,
+      }),
+    },
+  },
+  {
+    initialRouteName: SHELLEY_WALLET_ROUTES.STAKING_CENTER,
+    navigationOptions: ({navigation}) => ({
+      title: navigation.getParam('title'),
+      headerLeft: <HeaderBackButton navigation={navigation} />,
+      ...defaultNavigationOptions,
+    }),
+    ...defaultStackNavigatorOptions,
+  },
+)
+
+export default DelegationNavigatorCenter

src/components/Delegation/DelegationNavigatorSummary.js

@@ -0,0 +1,49 @@
+// @flow
+import React from 'react'
+import {Button} from '../UiKit'
+import {createStackNavigator} from 'react-navigation'
+import DelegationSummary from './DelegationSummary'
+import {SHELLEY_WALLET_ROUTES, WALLET_ROUTES} from '../../RoutesList'
+import SettingsScreenNavigator from '../Settings/SettingsScreenNavigator'
+import iconGear from '../../assets/img/gear.png'
+
+import {
+  defaultNavigationOptions,
+  defaultStackNavigatorOptions,
+} from '../../navigationOptions'
+
+import styles from '../TxHistory/styles/SettingsButton.style'
+
+const DelegationNavigatorSummary = createStackNavigator(
+  {
+    [SHELLEY_WALLET_ROUTES.DELEGATION_SUMMARY]: {
+      screen: DelegationSummary,
+      navigationOptions: ({navigation}) => ({
+        title: navigation.getParam('title'),
+        headerRight: (
+          <Button
+            style={styles.settingsButton}
+            onPress={() => navigation.navigate(WALLET_ROUTES.SETTINGS)}
+            iconImage={iconGear}
+            title=""
+            withoutBackground
+          />
+        ),
+        ...defaultNavigationOptions,
+      }),
+    },
+    [WALLET_ROUTES.SETTINGS]: {
+      screen: SettingsScreenNavigator,
+      navigationOptions: {
+        header: null,
+        ...defaultNavigationOptions,
+      },
+    },
+  },
+  {
+    initialRouteName: SHELLEY_WALLET_ROUTES.DELEGATION_SUMMARY,
+    ...defaultStackNavigatorOptions,
+  },
+)
+
+export default DelegationNavigatorSummary