new swap navigation

Author: jorbuedo

apps/wallet-mobile/src/features/Portfolio/common/hooks/useNavigateTo.tsx

@@ -22,14 +22,12 @@ export const useNavigateTo = () => {
     resetTabAndSwap: () => {
       navigation.reset({index: 0, routes: [{name: 'dashboard-portfolio'}]})
       navigation.navigate('history', {
-        screen: 'swap-start-swap',
-        params: {screen: 'token-swap'},
+        screen: 'token-swap',
       })
     },
     swap: () =>
       navigation.navigate('history', {
-        screen: 'swap-start-swap',
-        params: {screen: 'token-swap'},
+        screen: 'token-swap',
       }),
     swapPreprodNotice: () =>
       navigation.navigate('history', {

apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioTokensList/PortfolioWalletTokenList/TradeTokensBannerBig.tsx

@@ -16,7 +16,7 @@ export const TradeTokensBannerBig = () => {
 
   const navigation = useNavigation<TxHistoryRouteNavigation>()
   const handleSwap = () => {
-    navigation.navigate('swap-start-swap', {screen: 'token-swap'})
+    navigation.navigate('token-swap')
   }
 
   return (

apps/wallet-mobile/src/features/Swap/SwapNavigator.tsx

@@ -12,7 +12,8 @@ export const useNavigateTo = () => {
     editSlippage: () => swapNavigation.navigate('swap-edit-slippage'),
     selectBuyToken: () => swapNavigation.navigate('swap-select-buy-token'),
     selectSellToken: () => swapNavigation.navigate('swap-select-sell-token'),
-    startSwap: () => swapNavigation.navigate('swap-start-swap', {screen: 'token-swap'}),
+    startSwap: () => swapNavigation.navigate('token-swap'),
+    orders: () => swapNavigation.navigate('orders'),
     reviewSwap: () => swapNavigation.navigate('swap-review'),
     submittedTx: () => swapNavigation.navigate('swap-submitted-tx'),
     failedTx: () => swapNavigation.navigate('swap-failed-tx'),
@@ -22,10 +23,7 @@ export const useNavigateTo = () => {
         params: {
           screen: 'history',
           params: {
-            screen: 'swap-start-swap',
-            params: {
-              screen: 'orders',
-            },
+            screen: 'orders',
           },
         },
       }),
@@ -35,10 +33,7 @@ export const useNavigateTo = () => {
         params: {
           screen: 'history',
           params: {
-            screen: 'swap-start-swap',
-            params: {
-              screen: 'token-swap',
-            },
+            screen: 'token-swap',
           },
         },
       }),

apps/wallet-mobile/src/features/Swap/common/navigation.ts

@@ -168,6 +168,7 @@ export const useStrings = () => {
     submittedTxScreenTitle: intl.formatMessage(messages.submittedTxScreenTitle),
     submittedTxScreenText: intl.formatMessage(messages.submittedTxScreenText),
     submittedTxScreenButton: intl.formatMessage(messages.submittedTxScreenButton),
+    settings: intl.formatMessage(messages.settings),
   }
 }
 
@@ -730,4 +731,8 @@ const messages = defineMessages({
     id: 'swap.submittedTxScreen.button',
     defaultMessage: '!!!Close',
   },
+  settings: {
+    id: 'menu.settings',
+    defaultMessage: '!!!Settings',
+  },
 })

apps/wallet-mobile/src/features/Swap/common/strings.ts

@@ -16,6 +16,7 @@ import {undefinedToken} from '../../common/constants'
 import {useNavigateTo} from '../../common/navigation'
 import {useStrings} from '../../common/strings'
 import {useSwap} from '../../common/SwapProvider'
+import {ManagerConfig} from '../Manager/ManagerConfig'
 import {EditPrice} from './EditPrice'
 import {ListSplitsByProvider} from './ListSplitsByProvider'
 import {WarnLimitPrice} from './WarnLimitPrice'
@@ -68,6 +69,13 @@ export const StartSwapOrderScreen = () => {
     }
   }
 
+  const openSettings = () => {
+    openModal({
+      title: strings.settings,
+      content: <ManagerConfig />,
+    })
+  }
+
   return (
     <View style={[styles.root, styles.flex]}>
       <ScrollView style={styles.padding}>
@@ -99,11 +107,13 @@ export const StartSwapOrderScreen = () => {
                 />
               </View>
 
-              <View>
+              <View style={styles.group}>
                 <RefreshButton
                   onPress={() => swapForm.action({type: 'Refresh'})}
                   disabled={!swapForm.tokenInInput.isTouched || !swapForm.tokenOutInput.isTouched}
                 />
+
+                <Button type={ButtonType.SecondaryText} icon={Icon.Gear} style={styles.gear} onPress={openSettings} />
               </View>
             </View>
 
@@ -232,7 +242,6 @@ const useStyles = () => {
     },
     group: {
       ...atoms.flex_row,
-      ...atoms.gap_md,
       ...atoms.align_center,
     },
     textContent: {
@@ -251,6 +260,10 @@ const useStyles = () => {
       ...atoms.gap_lg,
       ...atoms.pt_lg,
     },
+    gear: {
+      ...atoms.px_sm,
+      ...atoms.rounded_full,
+    },
   })
 
   return {styles, atoms}

apps/wallet-mobile/src/features/Swap/useCases/CreateOrder/StartSwapOrderScreen.tsx

@@ -37,11 +37,12 @@ import {FailedTxScreen as SendFailedTxScreen} from '../Send/useCases/ShowFailedT
 import {SubmittedTxScreen as SendSubmittedTxScreen} from '../Send/useCases/ShowSubmittedTxScreen/SubmittedTxScreen'
 import {StartMultiTokenTxScreen} from '../Send/useCases/StartMultiTokenTx/StartMultiTokenTxScreen'
 import {NetworkTag} from '../Settings/useCases/changeAppSettings/ChangeNetwork/NetworkTag'
-import {SwapTabNavigator} from '../Swap/SwapNavigator'
 import {EditSlippageScreen} from '../Swap/useCases/CreateOrder/EditSlippageScreen'
 import {SelectBuyTokenFromListScreen} from '../Swap/useCases/CreateOrder/SelectBuyTokenFromListScreen'
 import {SelectProtocolScreen} from '../Swap/useCases/CreateOrder/SelectProtocolScreen'
 import {SelectSellTokenFromListScreen} from '../Swap/useCases/CreateOrder/SelectSellTokenFromListScreen'
+import {StartSwapOrderScreen} from '../Swap/useCases/CreateOrder/StartSwapOrderScreen'
+import {ListOrders} from '../Swap/useCases/ListOrders/ListOrders'
 import {ReviewSwap} from '../Swap/useCases/ReviewSwap/ReviewSwap'
 import {FailedTxScreen as SwapFailedTxScreen} from '../Swap/useCases/ShowFailedTxScreen/FailedTxScreen'
 import {ShowPreprodNoticeScreen} from '../Swap/useCases/ShowPreprodNoticeScreen/ShowPreprodNoticeScreen'
@@ -212,11 +213,21 @@ export const TxHistoryNavigator = () => {
               />
 
               <Stack.Screen
-                name="swap-start-swap"
-                component={SwapTabNavigator}
+                name="token-swap"
+                component={StartSwapOrderScreen}
                 options={{
                   ...sendOptions(navigationOptions, color),
                   title: strings.swapTitle,
+                  headerRight: () => <HeaderRightSwap />,
+                }}
+              />
+
+              <Stack.Screen
+                name="orders"
+                getComponent={() => ListOrders}
+                options={{
+                  ...sendOptions(navigationOptions, color),
+                  title: strings.orderSwap,
                 }}
               />
 
@@ -411,6 +422,10 @@ const messages = defineMessages({
     id: 'swap.swapScreen.swapTitle',
     defaultMessage: '!!!Swap',
   },
+  orderSwap: {
+    id: 'swap.swapScreen.ordersSwapTab',
+    defaultMessage: '!!!Orders',
+  },
   swapFromTitle: {
     id: 'swap.swapScreen.swapFrom',
     defaultMessage: '!!!Swap from',
@@ -521,6 +536,7 @@ const useStrings = () => {
     specificAmount: intl.formatMessage(messages.specificAmount),
     swapFromTitle: intl.formatMessage(messages.swapFromTitle),
     swapTitle: intl.formatMessage(messages.swapTitle),
+    orderSwap: intl.formatMessage(messages.orderSwap),
     swapToTitle: intl.formatMessage(messages.swapToTitle),
     txDetailsTitle: intl.formatMessage(messages.txDetailsTitle),
   }
@@ -540,6 +556,17 @@ const HeaderRightHistory = React.memo(() => {
   )
 })
 
+const HeaderRightSwap = React.memo(() => {
+  const navigation = useNavigation<TxHistoryRouteNavigation>()
+  const {color} = useTheme()
+
+  return (
+    <TouchableOpacity onPress={() => navigation.navigate('orders')} style={{paddingRight: 8}}>
+      <Icon.TermsOfUse color={color.gray_max} size={24} />
+    </TouchableOpacity>
+  )
+})
+
 const sendOptions = (navigationOptions: StackNavigationOptions, color: ThemedPalette) => ({
   ...navigationOptions,
   headerStyle: {

apps/wallet-mobile/src/features/Transactions/TxHistoryNavigator.tsx

@@ -175,7 +175,7 @@ const useNavigateTo = () => {
     send: () => navigation.navigate('send-start-tx'),
     receiveSingleAddress: () => navigation.navigate('receive-single'),
     receiveMultipleAddresses: () => navigation.navigate('receive-multiple'),
-    swap: () => navigation.navigate('swap-start-swap', {screen: 'token-swap'}),
+    swap: () => navigation.navigate('token-swap'),
     swapPreprodNotice: () => navigation.navigate('swap-preprod-notice'),
     exchange: () => navigation.navigate('exchange-create-order'),
   }

apps/wallet-mobile/src/features/Transactions/useCases/TxHistory/ActionsBanner.tsx

@@ -177,7 +177,8 @@ type ClaimRoutes = {
 }
 
 type SwapTokenRoutes = {
-  'swap-start-swap': NavigatorScreenParams<SwapTabRoutes>
+  'token-swap': undefined
+  orders: undefined
   'swap-review': undefined
   'swap-select-sell-token': undefined
   'swap-select-buy-token': undefined
@@ -193,12 +194,6 @@ export type StakingCenterRoutes = {
   'staking-center-main': undefined
 }
 
-export type SwapTabRoutes = {
-  'token-swap': undefined
-  orders: undefined
-  'manager-config': undefined
-}
-
 type ExchangeRoutes = {
   'exchange-create-order': undefined
   'exchange-result': undefined