diff --git a/apps/wallet-mobile/src/features/Exchange/common/useStrings.tsx b/apps/wallet-mobile/src/features/Exchange/common/useStrings.tsx index a47989f63b..5956521dfc 100644 --- a/apps/wallet-mobile/src/features/Exchange/common/useStrings.tsx +++ b/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', + }, }), ) diff --git a/apps/wallet-mobile/src/features/Exchange/illustrations/PreprodNoticeIllustration.tsx b/apps/wallet-mobile/src/features/Exchange/illustrations/PreprodNoticeIllustration.tsx new file mode 100644 index 0000000000..760b25e749 --- /dev/null +++ b/apps/wallet-mobile/src/features/Exchange/illustrations/PreprodNoticeIllustration.tsx @@ -0,0 +1,500 @@ +import * as React from 'react' +import Svg, {Defs, LinearGradient, Path, Stop} from 'react-native-svg' + +export const PreprodNoticeIllustration = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/wallet-mobile/src/features/Exchange/useCases/CreateExchangeOrderScreen/CreateExchangeOrderScreen.tsx b/apps/wallet-mobile/src/features/Exchange/useCases/CreateExchangeOrderScreen/CreateExchangeOrderScreen.tsx index 0d58f9442a..cf723180e8 100644 --- a/apps/wallet-mobile/src/features/Exchange/useCases/CreateExchangeOrderScreen/CreateExchangeOrderScreen.tsx +++ b/apps/wallet-mobile/src/features/Exchange/useCases/CreateExchangeOrderScreen/CreateExchangeOrderScreen.tsx @@ -2,7 +2,7 @@ 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' @@ -10,11 +10,11 @@ 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,9 +23,14 @@ 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() @@ -33,6 +38,9 @@ export const CreateExchangeOrderScreen = () => { 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 ( @@ -126,32 +136,30 @@ export const CreateExchangeOrderScreen = () => { > - - - - - + {isPreprod && orderType === 'buy' ? ( + + ) : ( + <> + - } - rightAdornment={} - onPress={handleOnListProvidersByOrderType} - disabled - /> + - + - {orderType === 'sell' && providerId === 'banxa' && ( - <> - + } + rightAdornment={} + onPress={handleOnListProvidersByOrderType} + disabled + /> + + )} - - @@ -166,9 +174,9 @@ export const CreateExchangeOrderScreen = () => {