chore(rampOnOff): clean ups

apps/wallet-mobile/src/features/RampOnOff/RampOnOffNavigator.tsx

@@ -9,8 +9,8 @@ import {useTheme} from '../../theme'
 import {useHideBottomTabBar} from '../../yoroi-wallets/hooks'
 import {RampOnOffProvider} from './common/RampOnOffProvider'
 import {useStrings} from './common/strings'
-import CreateExchange from './useCases/StartRampOnOff/CreateRampOnOffScreen/CreateExchange'
-import ResultExchangeScreen from './useCases/StartRampOnOff/ResultExchangeScreen/ResultExchange'
+import {CreateExchange} from './useCases/CreateExchange/CreateExchange'
+import {ShowExchangeResult} from './useCases/ShowExchangeResult/ShowExchangeResult'
 
 const Stack = createStackNavigator<RampOnOffStackRoutes>()
 
@@ -48,7 +48,7 @@ export const RampOnOffScreen = () => {
               headerShown: false,
             }}
             name="result-ramp-on-off"
-            component={ResultExchangeScreen}
+            component={ShowExchangeResult}
           />
         </Stack.Navigator>
       </RampOnOffProvider>

apps/wallet-mobile/src/features/RampOnOff/common/AmountCard/AmountCard.stories.tsx

@@ -6,14 +6,7 @@ import {StyleSheet, View} from 'react-native'
 import {mocks} from '../../../../yoroi-wallets/mocks/wallet'
 import {AmountCard} from './AmountCard'
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-  },
-})
-
-storiesOf('Amount Card For rampOnOff', module)
+storiesOf('RampOnOff AmountCard', module)
   .addDecorator((story) => <View style={styles.container}>{story()}</View>)
   .add('with label', () => (
     <AmountCard
@@ -39,3 +32,10 @@ storiesOf('Amount Card For rampOnOff', module)
       touched
     />
   ))
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+})

apps/wallet-mobile/src/features/RampOnOff/common/AmountCard/AmountCard.tsx

@@ -11,7 +11,7 @@ import {YoroiWallet} from '../../../../yoroi-wallets/cardano/types'
 import {useTokenInfo} from '../../../../yoroi-wallets/hooks'
 import {useStrings} from '../strings'
 
-interface AmountCardProps {
+type AmountCardProps = {
   error?: string
   label?: string
   inputRef?: React.RefObject<TextInput>

apps/wallet-mobile/src/features/RampOnOff/common/ButtonActionGroup/ButtonActionGroup.stories.tsx

@@ -3,30 +3,28 @@ import {storiesOf} from '@storybook/react-native'
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 
-import {TRampOnOffAction} from '../RampOnOffProvider'
+import {OrderType} from '../RampOnOffProvider'
 import {ButtonActionGroup} from './ButtonActionGroup'
 
-const Label1Selected = ({initial}: {initial: TRampOnOffAction}) => {
+storiesOf('RampOnOff ButtonActionGroup', module)
+  .addDecorator((story) => <View style={styles.container}>{story()}</View>)
+  .add('sell selected', () => <Label1Selected initial="sell" />)
+  .add('buy selected', () => <Label1Selected initial="buy" />)
+
+const Label1Selected = ({initial}: {initial: OrderType}) => {
   const [selected, setSelected] = React.useState(initial)
-  const handleActive = (label: TRampOnOffAction) => {
+  const handleActive = (label: OrderType) => {
     action(`onSelect ${label}`)
     setSelected(label)
   }
-  const labels: {label: string; value: TRampOnOffAction}[] = [
-    {label: 'Sell ADA', value: 'sell'},
-    {label: 'Buy ADA', value: 'buy'},
-  ]
-  return (
-    <View>
-      <ButtonActionGroup labels={labels} onSelect={handleActive} selected={selected} />
-    </View>
-  )
+
+  return <ButtonActionGroup labels={labels} onSelect={handleActive} selected={selected} />
 }
 
-storiesOf('ButtonGroupRampOnOff', module)
-  .addDecorator((story) => <View style={styles.container}>{story()}</View>)
-  .add('label sell selected', () => <Label1Selected initial="sell" />)
-  .add('label buy selected', () => <Label1Selected initial="buy" />)
+const labels: {label: string; value: OrderType}[] = [
+  {label: 'Sell ADA', value: 'sell'},
+  {label: 'Buy ADA', value: 'buy'},
+]
 
 const styles = StyleSheet.create({
   container: {

apps/wallet-mobile/src/features/RampOnOff/common/ButtonActionGroup/ButtonActionGroup.tsx

@@ -3,16 +3,16 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 
 import {useTheme} from '../../../../theme'
 import {Theme} from '../../../../theme/types'
-import {TRampOnOffAction} from '../RampOnOffProvider'
+import {OrderType} from '../RampOnOffProvider'
 
-interface ButtonActionGroupProps {
-  onSelect: (action: TRampOnOffAction) => void
-  selected: TRampOnOffAction
-  labels: {label: string; value: TRampOnOffAction}[]
+type ButtonActionGroupProps = {
+  onSelect: (orderType: OrderType) => void
+  selected: OrderType
+  labels: ReadonlyArray<{label: string; value: OrderType}>
 }
 
-export const ButtonActionGroup: React.FC<ButtonActionGroupProps> = ({labels, onSelect, selected}) => {
-  const handleOnPress = (actionType: TRampOnOffAction) => onSelect(actionType)
+export const ButtonActionGroup = ({labels, onSelect, selected}: ButtonActionGroupProps) => {
+  const handleOnPress = (orderType: OrderType) => onSelect(orderType)
 
   const {theme} = useTheme()
 

apps/wallet-mobile/src/features/RampOnOff/common/DescribeAction/DescribeAction.stories.tsx

@@ -0,0 +1,21 @@
+import {storiesOf} from '@storybook/react-native'
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+
+import {ModalProvider} from '../../../../components'
+import {DescribeAction} from '../DescribeAction/DescribeAction'
+
+storiesOf('RampOnOff DescribeAction', module)
+  .addDecorator((story) => (
+    <ModalProvider>
+      <View style={styles.container}>{story()}</View>
+    </ModalProvider>
+  ))
+  .add('initial', () => <DescribeAction />)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+})

apps/wallet-mobile/src/features/RampOnOff/common/DescribeAction.tsx → apps/wallet-mobile/src/features/RampOnOff/common/DescribeAction/DescribeAction.tsx

@@ -2,17 +2,16 @@ import {banxaSupportUrl} from '@yoroi/banxa'
 import React from 'react'
 import {Linking, StyleSheet, TouchableOpacity, View} from 'react-native'
 
-import {Spacer, Text} from '../../../components'
-import {useStrings} from './strings'
+import {Spacer, Text} from '../../../../components'
+import {useStrings} from '../strings'
 
-const BANXA_SUPPORT_URL = banxaSupportUrl
 const YOROI_SUPPORT_URL = 'https://yoroi-wallet.com/#/support'
 
-const DescribeAction = () => {
+export const DescribeAction = () => {
   const strings = useStrings()
 
   const handleLinkingContactBanxa = () => {
-    Linking.openURL(BANXA_SUPPORT_URL)
+    Linking.openURL(banxaSupportUrl)
   }
 
   const handleLinkingContactYoroi = () => {
@@ -44,8 +43,6 @@ const DescribeAction = () => {
   )
 }
 
-export default DescribeAction
-
 const styles = StyleSheet.create({
   modalContent: {
     flex: 1,

apps/wallet-mobile/src/features/RampOnOff/common/RampOnOffProvider.tsx

@@ -1,4 +1,4 @@
-import {BanxaReferralUrlQueryStringParams} from '@yoroi/banxa/lib/typescript/translators/module'
+import {Banxa} from '@yoroi/banxa'
 import BigNumber from 'bignumber.js'
 import {produce} from 'immer'
 import React from 'react'
@@ -9,7 +9,6 @@ import {useSelectedWallet} from '../../../SelectedWallet'
 import {useBalances} from '../../../yoroi-wallets/hooks'
 import {useTokenInfo} from '../../../yoroi-wallets/hooks'
 import {Amounts, Quantities} from '../../../yoroi-wallets/utils'
-import {actionRamp} from './mocks'
 import {useStrings} from './strings'
 
 export const useRampOnOff = () => React.useContext(RampOnOffContext)
@@ -22,6 +21,7 @@ export const RampOnOffProvider = ({
   initialState?: Partial<RampOnOffState>
 }) => {
   const wallet = useSelectedWallet()
+  const tokenId = wallet.primaryTokenInfo.id
   const {numberLocale} = useLanguage()
 
   const amountInputRef = React.useRef<TextInput | null>(null)
@@ -31,16 +31,15 @@ export const RampOnOffProvider = ({
     ...initialState,
   })
 
-  const amountTokenInfo = useTokenInfo({wallet, tokenId: ''})
+  const amountTokenInfo = useTokenInfo({wallet, tokenId})
 
   const balances = useBalances(wallet)
-  const amountBalance = Amounts.getAmount(balances, '').quantity
+  const amountBalance = Amounts.getAmount(balances, tokenId).quantity
 
   const strings = useStrings()
 
   const actions = React.useRef<RampOnOffActions>({
-    actionTypeChanged: (actionType: TRampOnOffAction) =>
-      dispatch({type: RampOnOffActionType.ActionTypeChanged, actionType}),
+    orderTypeChanged: (orderType: OrderType) => dispatch({type: RampOnOffActionType.OrderTypeChanged, orderType}),
     canExchangeChanged: (value: boolean) => dispatch({type: RampOnOffActionType.CanExchangeChanged, value}),
     amountInputDisplayValueChanged: (value: string) =>
       dispatch({type: RampOnOffActionType.AmountInputDisplayValueChanged, value}),
@@ -72,14 +71,14 @@ export const RampOnOffProvider = ({
   // amount input errors
   React.useEffect(() => {
     // no enough balance error
-    if (isNotEnoughBalance && state.amount.isTouched && state.actionType === actionRamp.sellAda) {
+    if (isNotEnoughBalance && state.amount.isTouched && state.orderType === 'sell') {
       actions.amountErrorChanged(strings.notEnoughBalance)
       return
     }
 
     if (
       (!Quantities.isZero(amountBalance) && !isNotEnoughBalance && state.amount.isTouched) ||
-      state.actionType === actionRamp.buyAda
+      state.orderType === 'buy'
     ) {
       clearErrors()
       return
@@ -90,7 +89,7 @@ export const RampOnOffProvider = ({
     amountBalance,
     isNotEnoughBalance,
     state.amount.isTouched,
-    state.actionType,
+    state.orderType,
     strings.notEnoughBalance,
     clearErrors,
   ])
@@ -111,8 +110,8 @@ export const RampOnOffProvider = ({
 const rampOnOffReducer = (state: RampOnOffState, action: RampOnOffAction) => {
   return produce(state, (draft) => {
     switch (action.type) {
-      case RampOnOffActionType.ActionTypeChanged:
-        draft.actionType = action.actionType
+      case RampOnOffActionType.OrderTypeChanged:
+        draft.orderType = action.orderType
         break
       case RampOnOffActionType.AmountInputDisplayValueChanged:
         if (state.amount.isTouched) draft.amount.displayValue = action.value
@@ -122,29 +121,27 @@ const rampOnOffReducer = (state: RampOnOffState, action: RampOnOffAction) => {
         break
       case RampOnOffActionType.AmountErrorChanged:
         draft.amount.error = action.error
-
         break
       case RampOnOffActionType.CanExchangeChanged:
         draft.canExchange = action.value
-
         break
       default:
         throw new Error(`RampOnOffFormReducer invalid action`)
     }
   })
 }
 
-export type TRampOnOffAction = BanxaReferralUrlQueryStringParams['orderType']
+export type OrderType = Banxa.ReferralUrlQueryStringParams['orderType']
 
 type RampOnOffAction =
-  | {type: RampOnOffActionType.ActionTypeChanged; actionType: TRampOnOffAction}
+  | {type: RampOnOffActionType.OrderTypeChanged; orderType: OrderType}
   | {type: RampOnOffActionType.AmountInputDisplayValueChanged; value: string}
   | {type: RampOnOffActionType.AmountErrorChanged; error: string | undefined}
   | {type: RampOnOffActionType.AmountInputValueChanged; value: number}
   | {type: RampOnOffActionType.CanExchangeChanged; value: boolean}
 
 export type RampOnOffState = {
-  actionType: TRampOnOffAction
+  orderType: OrderType
   amount: {
     isTouched: boolean
     disabled: boolean
@@ -156,15 +153,15 @@ export type RampOnOffState = {
 }
 
 type RampOnOffActions = {
-  actionTypeChanged: (type: TRampOnOffAction) => void
+  orderTypeChanged: (type: OrderType) => void
   canExchangeChanged: (value: boolean) => void
   amountInputDisplayValueChanged: (value: string) => void
   amountErrorChanged: (error: string | undefined) => void
   amountInputValueChanged: (value: number) => void
 }
 
 const defaultState: RampOnOffState = Object.freeze({
-  actionType: actionRamp.buyAda,
+  orderType: 'buy',
   amount: {
     isTouched: true,
     disabled: false,
@@ -181,7 +178,7 @@ function missingInit() {
 
 const initialSwapFormContext: RampOnOffContext = {
   ...defaultState,
-  actionTypeChanged: missingInit,
+  orderTypeChanged: missingInit,
   amountInputRef: undefined,
   amountInputDisplayValueChanged: missingInit,
   amountInputValueChanged: missingInit,
@@ -191,7 +188,7 @@ const initialSwapFormContext: RampOnOffContext = {
 }
 
 enum RampOnOffActionType {
-  ActionTypeChanged = 'actionTypeChanged',
+  OrderTypeChanged = 'orderTypeChanged',
   AmountInputDisplayValueChanged = 'amountInputDisplayValueChanged',
   AmountErrorChanged = 'amountErrorChanged',
   AmountInputValueChanged = 'amountInputValueChanged',