CR: update

apps/wallet-mobile/src/features/Exchange/common/useStrings.tsx

@@ -38,6 +38,9 @@ export const useStrings = () => {
     preprodFaucetBannerTitle: intl.formatMessage(messages.preprodFaucetBannerTitle),
     preprodFaucetBannerText: intl.formatMessage(messages.preprodFaucetBannerText),
     preprodFaucetBannerButtonText: intl.formatMessage(messages.preprodFaucetBannerButtonText),
+    createOrderPreprodFaucetButtonText: intl.formatMessage(messages.createOrderPreprodFaucetButtonText),
+    createOrderPreprodNoticeTitle: intl.formatMessage(messages.createOrderPreprodNoticeTitle),
+    createOrderPreprodNoticeText: intl.formatMessage(messages.createOrderPreprodNoticeText),
     close: intl.formatMessage(globalMessages.close),
     error: intl.formatMessage(globalMessages.error),
   }).current
@@ -171,5 +174,17 @@ export const messages = Object.freeze(
       id: 'rampOnOff.createRampOnOff.preprodfaucetbanner.button.text',
       defaultMessage: '!!!Go to tada faucet',
     },
+    createOrderPreprodFaucetButtonText: {
+      id: 'rampOnOff.createRampOnOff.createorder.preprodfaucet.button.text',
+      defaultMessage: '!!!Add test ada',
+    },
+    createOrderPreprodNoticeTitle: {
+      id: 'rampOnOff.createRampOnOff.createorder.preprodnotice.title',
+      defaultMessage: '!!!ADA purchases can only be made on the mainnet',
+    },
+    createOrderPreprodNoticeText: {
+      id: 'rampOnOff.createRampOnOff.createorder.preprodnotice.text',
+      defaultMessage: '!!!Switch network or top up your testnet network wallet with the free Cardano faucet',
+    },
   }),
 )

apps/wallet-mobile/src/features/Exchange/useCases/CreateExchangeOrderScreen/CreateExchangeOrderScreen.tsx

@@ -2,19 +2,19 @@ import {atomicFormatter} from '@yoroi/common'
 import {useCreateReferralLink, useExchange, useExchangeProvidersByOrderType} from '@yoroi/exchange'
 import {linksYoroiModuleMaker} from '@yoroi/links'
 import {useTheme} from '@yoroi/theme'
-import {Exchange} from '@yoroi/types'
+import {Chain, Exchange} from '@yoroi/types'
 import * as React from 'react'
 import {Alert, Linking, StyleSheet, useWindowDimensions, View} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {Button, Icon, KeyboardAvoidingView} from '../../../../components'
 import {Space} from '../../../../components/Space/Space'
-import {Warning} from '../../../../components/Warning'
 import {banxaTestWallet} from '../../../../kernel/env'
 import {useMetrics} from '../../../../kernel/metrics/metricsManager'
 import {useWalletNavigation} from '../../../../kernel/navigation'
 import {useSelectedWallet} from '../../../WalletManager/common/hooks/useSelectedWallet'
+import {useWalletManager} from '../../../WalletManager/context/WalletManagerProvider'
 import {ProviderItem} from '../../common/ProviderItem/ProviderItem'
 import {useNavigateTo} from '../../common/useNavigateTo'
 import {useStrings} from '../../common/useStrings'
@@ -23,16 +23,24 @@ import {EncryptusLogo} from '../../illustrations/EncryptusLogo'
 import {EditAmount} from './EditAmount/EditAmount'
 import {SelectBuyOrSell} from './SelectBuyOrSell/SelectBuyOrSell'
 import {ShowDisclaimer} from './ShowDisclaimer/ShowDisclaimer'
+import {ShowPreprodNotice} from './ShowPreprodNotice/ShowPreprodNotice'
 
 const BOTTOM_ACTION_SECTION = 180
 
+const handleOnPressOnPreprod = () => {
+  Linking.openURL('https://docs.cardano.org/cardano-testnets/tools/faucet/')
+}
+
 export const CreateExchangeOrderScreen = () => {
   const strings = useStrings()
   const styles = useStyles()
   const {track} = useMetrics()
   const {wallet} = useSelectedWallet()
   const walletNavigation = useWalletNavigation()
   const [contentHeight, setContentHeight] = React.useState(0)
+  const {
+    selected: {network},
+  } = useWalletManager()
 
   const navigateTo = useNavigateTo()
   const {orderType, canExchange, providerId, provider, amount, referralLink: managerReferralLink} = useExchange()
@@ -113,6 +121,8 @@ export const CreateExchangeOrderScreen = () => {
     }
   }
 
+  const isPreprod = network === Chain.Network.Preprod
+
   return (
     <SafeAreaView edges={['bottom', 'left', 'right']} style={styles.root}>
       <KeyboardAvoidingView style={styles.flex}>
@@ -126,32 +136,30 @@ export const CreateExchangeOrderScreen = () => {
           >
             <SelectBuyOrSell disabled={isLoading} />
 
-            <Space height="xl" />
-
-            <EditAmount disabled={isLoading} />
-
-            <Space height="_2xs" />
+            {isPreprod && orderType === 'buy' ? (
+              <ShowPreprodNotice />
+            ) : (
+              <>
+                <Space height="xl" />
 
-            <ProviderItem
-              label={providerSelected?.name ?? ''}
-              fee={fee}
-              leftAdornment={<Logo size={40} />}
-              rightAdornment={<Icon.Chevron direction="right" />}
-              onPress={handleOnListProvidersByOrderType}
-              disabled
-            />
+                <EditAmount disabled={isLoading} />
 
-            <Space height="xl" />
+                <Space height="_2xs" />
 
-            {orderType === 'sell' && providerId === 'banxa' && (
-              <>
-                <Warning content={strings.sellCurrencyWarning} />
+                <ProviderItem
+                  label={providerSelected?.name ?? ''}
+                  fee={fee}
+                  leftAdornment={<Logo size={40} />}
+                  rightAdornment={<Icon.Chevron direction="right" />}
+                  onPress={handleOnListProvidersByOrderType}
+                  disabled
+                />
 
                 <Space height="xl" />
+
+                <ShowDisclaimer />
               </>
             )}
-
-            <ShowDisclaimer />
           </View>
         </ScrollView>
 
@@ -166,9 +174,9 @@ export const CreateExchangeOrderScreen = () => {
           <Button
             testID="rampOnOffButton"
             shelleyTheme
-            title={strings.proceed.toLocaleUpperCase()}
-            onPress={handleOnExchange}
-            disabled={exchangeDisabled}
+            title={isPreprod ? strings.createOrderPreprodFaucetButtonText : strings.proceed}
+            onPress={isPreprod ? handleOnPressOnPreprod : handleOnExchange}
+            disabled={!(isPreprod && orderType === 'buy') && exchangeDisabled}
           />
         </View>
       </KeyboardAvoidingView>

apps/wallet-mobile/src/features/Exchange/useCases/CreateExchangeOrderScreen/ShowPreprodNotice/ShowPreprodNotice.tsx

@@ -0,0 +1,51 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, Text, View} from 'react-native'
+
+import {Space} from '../../../../../components/Space/Space'
+import {useStrings} from '../../../common/useStrings'
+import {PreprodNoticeIllustration} from '../../../illustrations/PreprodNoticeIllustration'
+
+export const ShowPreprodNotice = () => {
+  const {styles} = useStyles()
+  const strings = useStrings()
+
+  return (
+    <View style={styles.container}>
+      <Space height="_2xl" />
+
+      <PreprodNoticeIllustration />
+
+      <Space height="lg" />
+
+      <Text style={styles.title}>{strings.createOrderPreprodNoticeTitle}</Text>
+
+      <Text style={styles.text}>{strings.createOrderPreprodNoticeText}</Text>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    container: {
+      ...atoms.p_lg,
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    title: {
+      color: color.gray_c900,
+      ...atoms.heading_3_medium,
+      ...atoms.px_sm,
+      textAlign: 'center',
+    },
+    text: {
+      color: color.text_gray_medium,
+      ...atoms.body_1_lg_regular,
+      textAlign: 'center',
+      maxWidth: 300,
+    },
+  })
+  return {styles}
+}

apps/wallet-mobile/src/kernel/i18n/locales/en-US.json

@@ -1040,6 +1040,9 @@
   "rampOnOff.createRampOnOff.preprodfaucetbanner.title": "Get your first test ADA in Yoroi ⭐️",
   "rampOnOff.createRampOnOff.preprodfaucetbanner.text": "Top up your wallet from the Cardano testnet faucet and unlock the power of test Cardano.",
   "rampOnOff.createRampOnOff.preprodfaucetbanner.button.text": "Go to tada faucet",
+  "rampOnOff.createRampOnOff.createorder.preprodfaucet.button.text": "Add test ada",
+  "rampOnOff.createRampOnOff.createorder.preprodnotice.title": "ADA purchases can only be made on the mainnet",
+  "rampOnOff.createRampOnOff.createorder.preprodnotice.text": "Switch network or top up your testnet network wallet with the free Cardano faucet",
   "rampOnOff.rampOnOffScreen.rampOnOffTitle": "Buy/Sell ADA",
   "rampOnOff.resultRampOnOff.congrats": "Congrats! 🎉 Your transaction is now in progress. You should be receiving funds soon.",
   "rampOnOff.resultRampOnOff.cryptoAmountYouGet": "ADA amount you get",