wip

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

@@ -1,7 +1,7 @@
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
-import {Keyboard, StyleSheet, View} from 'react-native'
+import {Keyboard, StyleSheet} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {KeyboardAvoidingView} from '../../components/KeyboardAvoidingView/KeyboardAvoidingView'
@@ -10,7 +10,7 @@ import {defaultMaterialTopTabNavigationOptions, SwapTabRoutes} from '../../kerne
 import {useSearch} from '../Search/SearchContext'
 import {useStrings} from './common/strings'
 import {StartSwapOrderScreen} from './useCases/CreateOrder/StartSwapOrderScreen'
-// import {ListOrders} from './useCases/StartOrderSwapScreen/ListOrders/ListOrders'
+import {ListOrders} from './useCases/ListOrders/ListOrders'
 
 const Tab = createMaterialTopTabNavigator<SwapTabRoutes>()
 export const SwapTabNavigator = () => {
@@ -61,7 +61,7 @@ export const SwapTabNavigator = () => {
               },
             }}
             name="orders"
-            getComponent={() => View}
+            getComponent={() => ListOrders}
           />
         </Tab.Navigator>
       </SafeAreaView>

apps/wallet-mobile/src/features/Swap/common/SwapProvider.tsx

@@ -93,30 +93,61 @@ const swapReducer = (state: SwapState, action: SwapAction) => {
 
         break
       case SwapAction.TokenInIdChanged:
-        draft.tokenInInput.displayValue = action.value ?? ''
+        draft.tokenInInput.tokenId = action.value
 
         break
       case SwapAction.TokenOutIdChanged:
+        draft.tokenInInput.tokenId = action.value
+
         break
       case SwapAction.TokenInAmountChanged:
+        draft.tokenInInput.displayValue = action.value
+
         break
       case SwapAction.TokenOutAmountChanged:
+        draft.tokenOutInput.displayValue = action.value
+
         break
       case SwapAction.TokenInErrorChanged:
+        draft.tokenInInput.error = action.value
+
         break
       case SwapAction.TokenOutErrorChanged:
+        draft.tokenOutInput.error = action.value
+
         break
       case SwapAction.SlippageInputChanged:
+        draft.slippageInput.displayValue = String(action.value)
+
         break
       case SwapAction.WantedPriceInputChanged:
+        draft.wantedPrice.displayValue = action.value
+
         break
       case SwapAction.SwitchTouched:
+        draft.tokenOutInput.isTouched = state.tokenInInput.isTouched
+        draft.tokenOutInput.tokenId = state.tokenInInput.tokenId
+        draft.tokenOutInput.displayValue = ''
+        draft.tokenOutInput.error = undefined
+
+        draft.tokenInInput.isTouched = state.tokenOutInput.isTouched
+        draft.tokenInInput.tokenId = state.tokenOutInput.tokenId
+        draft.tokenInInput.displayValue = ''
+        draft.tokenInInput.error = undefined
+
         break
       case SwapAction.DexSelectorTouched:
         break
       case SwapAction.ResetAmounts:
+        draft.tokenInInput.displayValue = ''
+        draft.tokenOutInput.displayValue = ''
+
+        draft.tokenInInput.error = undefined
+        draft.tokenOutInput.error = undefined
+
         break
       case SwapAction.ResetForm:
+        draft = defaultState
         break
       default:
         throw new Error(`swapReducer invalid action`)
@@ -146,8 +177,8 @@ type SwapActionValueMap = {
   ChangeOrderType: 'limit' | 'market'
   TokenInInputTouched: undefined
   TokenOutInputTouched: undefined
-  TokenInIdChanged: string
-  TokenOutIdChanged: string
+  TokenInIdChanged: Portfolio.Token.Id
+  TokenOutIdChanged: Portfolio.Token.Id
   TokenInAmountChanged: string
   TokenOutAmountChanged: string
   TokenInErrorChanged: string

apps/wallet-mobile/src/features/Swap/useCases/ListOrders/ListOrders.tsx

@@ -0,0 +1,98 @@
+import {useTheme} from '@yoroi/theme'
+import React from 'react'
+import {ErrorBoundary} from 'react-error-boundary'
+import {StyleSheet, View} from 'react-native'
+
+import {Boundary} from '../../../../components/Boundary/Boundary'
+import {Button, ButtonType} from '../../../../components/Button/Button'
+import {useWalletNavigation} from '../../../../kernel/navigation'
+import {useSearchOnNavBar} from '../../../Search/SearchContext'
+import {ServiceUnavailable} from '../../common/ServiceUnavailable/ServiceUnavailable'
+import {useStrings} from '../../common/strings'
+// import {CompletedOrders, CompletedOrdersSkeleton} from './CompletedOrders'
+// import {OpenOrders, OpenOrdersSkeleton} from './OpenOrders'
+// TODO
+const CompletedOrders = () => null
+const CompletedOrdersSkeleton = () => null
+const OpenOrders = () => null
+const OpenOrdersSkeleton = () => null
+
+export const ListOrders = () => {
+  const {navigateToTxHistory} = useWalletNavigation()
+  const [filter, setFilter] = React.useState<'open' | 'completed'>('open')
+
+  const strings = useStrings()
+  const styles = useStyles()
+
+  useSearchOnNavBar({
+    placeholder: strings.searchTokens,
+    title: strings.swapTitle,
+    isChild: true,
+    onBack: navigateToTxHistory,
+  })
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.group}>
+        <View>
+          <Button
+            onPress={() => setFilter('open')}
+            type={ButtonType.SecondaryText}
+            title={strings.openOrders}
+            size="S"
+            {...(filter === 'open' && {style: styles.activeButton})}
+          />
+        </View>
+
+        <View>
+          <Button
+            onPress={() => setFilter('completed')}
+            type={ButtonType.SecondaryText}
+            title={strings.completedOrders}
+            size="S"
+            {...(filter === 'completed' && {style: styles.activeButton})}
+          />
+        </View>
+      </View>
+
+      {filter === 'open' ? (
+        <Boundary loading={{fallback: <OpenOrdersSkeleton />}}>
+          <ErrorBoundary
+            fallbackRender={({resetErrorBoundary}) => <ServiceUnavailable resetErrorBoundary={resetErrorBoundary} />}
+          >
+            <OpenOrders />
+          </ErrorBoundary>
+        </Boundary>
+      ) : (
+        <Boundary loading={{fallback: <CompletedOrdersSkeleton />}}>
+          <ErrorBoundary
+            fallbackRender={({resetErrorBoundary}) => <ServiceUnavailable resetErrorBoundary={resetErrorBoundary} />}
+          >
+            <CompletedOrders />
+          </ErrorBoundary>
+        </Boundary>
+      )}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const {color, atoms} = useTheme()
+
+  const styles = StyleSheet.create({
+    group: {
+      ...atoms.flex_row,
+      ...atoms.gap_md,
+    },
+    root: {
+      ...atoms.flex_1,
+      ...atoms.justify_between,
+      ...atoms.p_lg,
+      backgroundColor: color.bg_color_max,
+    },
+    activeButton: {
+      backgroundColor: color.el_gray_min,
+    },
+  })
+  return styles
+}

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

@@ -42,8 +42,6 @@ import {SelectSellTokenFromListScreen} from '../Swap/useCases/CreateOrder/Select
 // import {EditSlippageScreen, SelectPoolFromListScreen} from '../Swap/useCases'
 import {ReviewSwap} from '../Swap/useCases/ReviewSwap/ReviewSwap'
 import {ShowPreprodNoticeScreen} from '../Swap/useCases/ShowPreprodNoticeScreen/ShowPreprodNoticeScreen'
-// import {SelectBuyTokenFromListScreen} from '../Swap/useCases/StartOrderSwapScreen/CreateOrder/EditBuyAmount/SelectBuyTokenFromListScreen/SelectBuyTokenFromListScreen'
-// import {SelectSellTokenFromListScreen} from '../Swap/useCases/StartOrderSwapScreen/CreateOrder/EditSellAmount/SelectSellTokenFromListScreen/SelectSellTokenFromListScreen'
 import {useSelectedWallet} from '../WalletManager/common/hooks/useSelectedWallet'
 import {TxDetails} from './useCases/TxDetails/TxDetails'
 import {TxHistory} from './useCases/TxHistory/TxHistory'