Revamp navigation flow fix (#1872)

* [chore] Changes for testing faster on testnet

* [fix] Adapted navigation to revamp

* [chore] Renamed route to keep consistency

* [chore] Added revamp tab icons

* [chore] Updated revamp navbar

legacy/config/config.js

@@ -112,8 +112,8 @@ export const CONFIG = {
     // WARNING: NEVER change these flags
     START_WITH_INDEX_SCREEN: __DEV__ ? SHOW_INIT_DEBUG_SCREEN : false,
     PREFILL_FORMS: __DEV__ ? PREFILL_WALLET_INFO : false,
-    WALLET_NAME: 'My wallet',
-    PASSWORD: 'aeg?eP3M:)(:',
+    WALLET_NAME: USE_TESTNET ? 'Auto Testnet' : 'Auto Nightly',
+    PASSWORD: '1234567890',
     MNEMONIC1: ['dry balcony arctic what garbage sort', 'cart shine egg lamp manual bottom', 'slide assault bus'].join(
       ' ',
     ),
@@ -128,9 +128,10 @@ export const CONFIG = {
       'boss already cement scrub',
       'nut priority',
     ].join(' '),
-    SEND_ADDRESS:
-      'addr1q8dewyn53xdjyzu20xjj6wg7kkxyqq63upxqevt24jga8fgcdwap96xuy84apchhj8u6r7uvl974sy9qz0sedc7ayjks3sxz7a',
-    SEND_AMOUNT: '1',
+    SEND_ADDRESS: USE_TESTNET
+      ? 'addr_test1qpaufs29emf7r62prt8r0l072nuvs4vezrgve2ty5csvvjwr3y3kdut55a40jff00qmg74686vz44v6k363md06qkq0qj8n0y9'
+      : 'addr1q8dewyn53xdjyzu20xjj6wg7kkxyqq63upxqevt24jga8fgcdwap96xuy84apchhj8u6r7uvl974sy9qz0sedc7ayjks3sxz7a',
+    SEND_AMOUNT: USE_TESTNET ? '3.3333' : '1',
     POOL_HASH: 'af22f95915a19cd57adb14c558dcc4a175f60c6193dc23b8bd2d8beb',
     PUB_KEY:
       '42cfdc53da2220ba52ce62f8e20ab9bb99857a3fceacf43d676d7987ad909b53' +

legacy/i18n/locales/en-US.json

@@ -488,6 +488,7 @@
   "global.pleaseWait": "please wait ...",
   "global.receive": "Receive",
   "global.send": "Send",
+  "global.staking": "Staking",
   "global.staking.epochLabel": "Epoch",
   "global.staking.stakePoolName": "Stake pool name",
   "global.staking.stakePoolHash": "Stake pool hash",

src/Send/ConfirmScreen/ConfirmScreen.tsx

@@ -31,7 +31,7 @@ import {
   Text,
   ValidatedTextInput,
 } from '../../../legacy/components/UiKit'
-import {CONFIG} from '../../../legacy/config/config'
+import {CONFIG, UI_V2} from '../../../legacy/config/config'
 import {WrongPassword} from '../../../legacy/crypto/errors'
 import {ISignRequest} from '../../../legacy/crypto/ISignRequest'
 import KeyStore from '../../../legacy/crypto/KeyStore'
@@ -181,10 +181,12 @@ export const ConfirmScreen = () => {
           CommonActions.reset({
             key: null,
             index: 0,
-            routes: [{name: SEND_ROUTES.MAIN}],
+            routes: [{name: UI_V2 ? 'history' : SEND_ROUTES.MAIN}],
           } as any),
         )
-        navigation.navigate(WALLET_ROUTES.TX_HISTORY)
+        if (!UI_V2) {
+          navigation.navigate(WALLET_ROUTES.TX_HISTORY)
+        }
       })
     }
 
@@ -203,7 +205,7 @@ export const ConfirmScreen = () => {
           navigation.navigate(SEND_ROUTES.BIOMETRICS_SIGNING, {
             keyId: walletManager._id,
             onSuccess: async (decryptedKey) => {
-              navigation.navigate(SEND_ROUTES.CONFIRM)
+              navigation.navigate(UI_V2 ? 'send-confirm' : SEND_ROUTES.CONFIRM)
 
               await submitTx(signRequest, decryptedKey)
             },

src/Send/ScannerButton.tsx

@@ -6,6 +6,7 @@ import {StyleSheet} from 'react-native'
 import iconQR from '../../legacy/assets/img/qr_code.png'
 import {pastedFormatter} from '../../legacy/components/Send/amountUtils'
 import {Button} from '../../legacy/components/UiKit'
+import {UI_V2} from '../../legacy/config/config'
 import {SEND_ROUTES} from '../../legacy/RoutesList'
 
 export const ScannerButton = () => {
@@ -37,7 +38,7 @@ export const ScannerButton = () => {
               setAddress(stringQR, route)
               setAmount('', route)
             }
-            navigation.navigate(SEND_ROUTES.MAIN)
+            navigation.navigate(UI_V2 ? 'send' : SEND_ROUTES.MAIN)
           },
         })
       }

src/Send/SendScreen/SendScreen.tsx

@@ -24,7 +24,7 @@ import {
   Text,
   TextInput,
 } from '../../../legacy/components/UiKit'
-import {CONFIG} from '../../../legacy/config/config'
+import {CONFIG, UI_V2} from '../../../legacy/config/config'
 import {getCardanoNetworkConfigById, isHaskellShelleyNetwork} from '../../../legacy/config/networks'
 import {AssetOverflowError, InsufficientFunds} from '../../../legacy/crypto/errors'
 import {MultiToken} from '../../../legacy/crypto/MultiToken'
@@ -200,7 +200,7 @@ export const SendScreen = ({selectedTokenIdentifier, sendAll, onSendAll}: Props)
 
     setShowSendAllWarning(false)
 
-    navigation.navigate(SEND_ROUTES.CONFIRM, {
+    navigation.navigate(UI_V2 ? 'send-confirm' : SEND_ROUTES.CONFIRM, {
       availableAmount: tokenBalance.getDefault(),
       address,
       defaultAssetAmount,

src/TxHistory/TxHistoryNavigator.tsx

@@ -114,7 +114,7 @@ export const TxHistoryNavigator = () => {
         <Stack.Screen name="address-reader-qr" component={AddressReaderQR} options={{title: strings.qrScannerTitle}} />
 
         <Stack.Screen //
-          name="send-ada-confirm"
+          name="send-confirm"
           component={ConfirmScreen}
           options={{title: strings.confirmTitle}}
         />

src/WalletNavigator.tsx

@@ -19,6 +19,7 @@ import iconSendActive from './assets/img/icon/send-active.png'
 import iconHistory from './assets/img/icon/txhistory.png'
 import iconHistoryActive from './assets/img/icon/txhistory-active.png'
 import {CatalystNavigator} from './Catalyst/CatalystNavigator'
+import {Icon} from './components/Icon'
 import {DashboardNavigator} from './Dashboard'
 import {ReceiveScreenNavigator} from './Receive/ReceiveScreenNavigator'
 import {useSelectedWallet, WalletSelectionScreen} from './SelectedWallet'
@@ -57,7 +58,12 @@ const WalletTabNavigator = () => {
           name={'history'}
           component={TxHistoryNavigator}
           options={{
-            tabBarIcon: ({focused}) => <Image source={focused ? iconHistoryActive : iconHistory} />,
+            tabBarIcon: ({focused}) => (
+              <Icon.TabWallet
+                size={24}
+                color={focused ? theme.COLORS.NAVIGATION_ACTIVE : theme.COLORS.NAVIGATION_INACTIVE}
+              />
+            ),
             tabBarLabel: strings.walletTabBarLabel,
           }}
         />
@@ -68,7 +74,15 @@ const WalletTabNavigator = () => {
           name={'staking-dashboard'}
           component={DashboardNavigator}
           options={{
-            tabBarIcon: ({focused}) => <Image source={focused ? iconDashboardActive : iconDashboard} />,
+            tabBarIcon: ({focused}) =>
+              !UI_V2 ? (
+                <Image source={focused ? iconDashboardActive : iconDashboard} />
+              ) : (
+                <Icon.TabStaking
+                  size={24}
+                  color={focused ? theme.COLORS.NAVIGATION_ACTIVE : theme.COLORS.NAVIGATION_INACTIVE}
+                />
+              ),
             tabBarLabel: strings.dashboardTabBarLabel,
           }}
         />
@@ -168,6 +182,10 @@ const messages = defineMessages({
     id: 'components.settings.walletsettingscreen.tabTitle',
     defaultMessage: '!!!Wallet',
   },
+  stakingButton: {
+    id: 'global.staking',
+    defaultMessage: '!!!Staking',
+  },
 })
 
 const useStrings = () => {

src/components/Icon/Icon.stories.tsx

@@ -102,6 +102,12 @@ storiesOf('Icon', module).add('Gallery', () => (
       <Item icon={<Icon.Settings size={40} />} title={'Settings'} />
       <Item icon={<Icon.Info size={40} />} title={'Settings'} />
     </Row>
+    <Spacer height={16} />
+
+    <Row>
+      <Item icon={<Icon.TabWallet size={40} />} title={'Tab Wallet'} />
+      <Item icon={<Icon.TabStaking size={40} />} title={'Tab Stake'} />
+    </Row>
   </ScrollView>
 ))
 

src/components/Icon/TabStaking.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Svg, {G, Path} from 'react-native-svg'
+
+type Props = {size?: number; color?: string}
+
+export const TabStaking = ({size = 24, color = '#6B7384'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <G stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <G transform="translate(2.751854, 2.000000)" fill={color} fillRule="nonzero">
+        <Path d="M15.5176558,12.9927837 C15.8634868,12.6280479 16.4460156,12.6859354 16.7170411,13.0876804 L16.7701503,13.1790031 L18.4161695,16.494528 C18.5364721,16.7366146 18.5236606,17.0237923 18.3822544,17.2543553 C18.2844762,17.4134588 18.1342434,17.5307426 17.9477642,17.5892124 L17.8316569,17.6171006 L17.7195571,17.6259788 L15.0235793,17.6259788 C14.9601197,17.6259788 14.8994566,17.6482144 14.8512651,17.6879675 L14.8075891,17.7333851 L13.1297505,19.9365195 C12.9827415,20.1336862 12.7516519,20.25 12.5065844,20.25 C12.2886087,20.25 12.0852256,20.1590731 11.933523,19.9943232 L11.86215,19.9058755 L11.8097581,19.8170031 L10.2448096,16.6659358 C10.0299826,16.233661 10.2569059,15.7215715 10.7026819,15.5797085 L10.8014739,15.5551401 L10.916414,15.5424883 C11.182688,15.5325191 11.4316081,15.6572933 11.5809333,15.8723215 L11.6385924,15.9698725 L12.6391456,17.984 L13.8380695,16.3749753 C13.908167,16.2810497 13.9976601,16.2051021 14.1041834,16.150802 L14.2162957,16.1038538 L14.3392358,16.0721526 L14.4615428,16.061585 L16.4601456,16.061 L15.3785349,13.8815074 C15.2657669,13.6543236 15.2720037,13.3908525 15.3875944,13.1720532 L15.4438003,13.0812532 L15.5176558,12.9927837 Z M1.72549198,13.1833406 C1.94899961,12.733319 2.52271858,12.6210442 2.89952312,12.9251674 L2.98477899,13.0048918 C3.18425255,13.2144835 3.24739633,13.516235 3.15706997,13.7857882 L3.11597019,13.8851184 L2.03514561,16.061 L4.03503557,16.0617736 C4.15201969,16.0617736 4.26621857,16.0882382 4.37341568,16.141445 L4.4781227,16.2035761 L4.57722488,16.283597 L4.65824824,16.375128 L5.85614561,17.984 L6.8560621,15.9709195 C6.9751944,15.7309141 7.20553835,15.574802 7.46106971,15.5463387 L7.57187443,15.5420829 L7.69627062,15.5564233 C8.17015117,15.6425271 8.44317771,16.1313549 8.29054345,16.5727441 L8.25123897,16.6664374 L6.68651416,19.8172422 C6.55539408,20.0805499 6.2875775,20.25 5.98980675,20.25 C5.8337908,20.25 5.68256694,20.2028776 5.54692022,20.1083225 L5.4482744,20.0285078 L5.36639011,19.9364345 L3.74883482,17.7650681 C3.71059732,17.7137615 3.65639983,17.6781621 3.59612647,17.6631563 L3.53419391,17.655196 L0.776646759,17.6259788 C0.506459479,17.6259788 0.255636932,17.4850721 0.114052596,17.2542183 C0.0164654509,17.0951966 -0.0204610362,16.9081362 0.0108913246,16.7151965 L0.0379571484,16.5989045 L0.0800342658,16.4945284 L1.72549198,13.1833406 Z" />
+        <Path d="M9.24814561,0 C13.1141389,0 16.2481456,3.13400675 16.2481456,7 C16.2481456,10.8659932 13.1141389,14 9.24814561,14 C5.38215236,14 2.24814561,10.8659932 2.24814561,7 C2.24814561,3.13400675 5.38215236,0 9.24814561,0 Z M9.24814561,2 C6.48672186,2 4.24814561,4.23857625 4.24814561,7 C4.24814561,9.76142375 6.48672186,12 9.24814561,12 C12.0095694,12 14.2481456,9.76142375 14.2481456,7 C14.2481456,4.23857625 12.0095694,2 9.24814561,2 Z" />
+      </G>
+    </G>
+  </Svg>
+)

src/components/Icon/TabWallet.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, {G, Path} from 'react-native-svg'
+
+type Props = {size?: number; color?: string}
+
+export const TabWallet = ({size = 24, color = '#6B7384'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <G stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <G>
+        <G id="icon" transform="translate(1.999583, 4.500000)" stroke={color} strokeWidth="2">
+          <Path d="M20,2.32738557 L20,12.6726144 C20,13.9526765 18.9725714,15 17.7142857,15 L2.28571429,15 C1.01828571,15 0,13.9526765 0,12.6726144 L0,2.32738557 C0,1.04732351 1.01828571,0 2.28571429,0 L17.7142857,0 C18.9725714,0 20,1.04732351 20,2.32738557 Z" />
+        </G>
+      </G>
+    </G>
+  </Svg>
+)

src/components/Icon/index.ts

@@ -13,6 +13,8 @@ import {RewardWithdrawn} from './RewardWithdrawn'
 import {Sent} from './Sent'
 import {StakingKeyDeregistered} from './StakingKeyDeregistered'
 import {StakingKeyRegistered} from './StakingKeyRegistered'
+import {TabStaking} from './TabStaking'
+import {TabWallet} from './TabWallet'
 import {TotalAda} from './TotalAda'
 import {TotalDelegated} from './TotalDelegated'
 import {TotalReward} from './TotalReward'
@@ -40,6 +42,8 @@ export const Icon = {
   Settings,
   StakingKeyDeregistered,
   StakingKeyRegistered,
+  TabStaking,
+  TabWallet,
   TotalAda,
   TotalDelegated,
   TotalReward,

src/navigation.ts

@@ -25,7 +25,7 @@ export type TxHistoryStackParamList = {
   send: undefined
   'select-asset': undefined
   'address-reader-qr': undefined
-  'send-ada-confirm': undefined
+  'send-confirm': undefined
   'biometrics-signing': undefined
 }