diff --git a/app/components/UI/FiatOnRampAggregator/Views/AmountToBuy.tsx b/app/components/UI/FiatOnRampAggregator/Views/AmountToBuy.tsx index 6a09caf0880..b1431cf1110 100644 --- a/app/components/UI/FiatOnRampAggregator/Views/AmountToBuy.tsx +++ b/app/components/UI/FiatOnRampAggregator/Views/AmountToBuy.tsx @@ -722,6 +722,8 @@ const AmountToBuy = () => { { region: selectedRegion?.name, }, )} - ctaLabel={strings('fiat_on_ramp_aggregator.try_different_region')} - ctaOnPress={toggleRegionModal as () => void} + ctaLabel={strings('fiat_on_ramp_aggregator.change_payment_method')} + ctaOnPress={showPaymentMethodsModal as () => void} /> - void} - onRegionPress={handleRegionPress} + void} + title={strings('fiat_on_ramp_aggregator.select_payment_method')} + paymentMethods={filteredPaymentMethods} + selectedPaymentMethodId={selectedPaymentMethodId} + onItemPress={handleChangePaymentMethod} + location={'Amount to Buy Screen'} /> ); diff --git a/app/components/UI/FiatOnRampAggregator/components/ErrorView.tsx b/app/components/UI/FiatOnRampAggregator/components/ErrorView.tsx index 889a82957bf..68a8d2d7fd0 100644 --- a/app/components/UI/FiatOnRampAggregator/components/ErrorView.tsx +++ b/app/components/UI/FiatOnRampAggregator/components/ErrorView.tsx @@ -12,6 +12,8 @@ import { Colors } from '../../../../util/theme/models'; const Text = BaseText as any; const Title = BaseTitle as any; +type IconType = 'error' | 'info'; + const createStyles = (colors: Colors) => StyleSheet.create({ screen: { @@ -31,12 +33,17 @@ const createStyles = (colors: Colors) => row: { marginVertical: 1, }, - errorIcon: { - color: colors.error.default, + icon: { fontSize: 38, marginVertical: 4, textAlign: 'center', }, + errorIcon: { + color: colors.error.default, + }, + infoIcon: { + color: colors.primary.default, + }, }); interface Props { @@ -44,9 +51,37 @@ interface Props { title?: string; // The error title, default will be "Error" if not provided (Optional) ctaLabel?: string; // The CTA button label, default will be "Try again" (Optional) ctaOnPress?: () => any; // The optional callback to be invoked when pressing the CTA button (Optional) + icon?: IconType; +} + +function ErrorIcon({ icon }: { icon: IconType }) { + const { colors } = useTheme(); + const styles = createStyles(colors); + let name, style; + switch (icon) { + case 'info': { + name = 'information-outline'; + style = styles.infoIcon; + break; + } + case 'error': + default: { + name = 'close-circle-outline'; + style = styles.errorIcon; + break; + } + } + + return ; } -function ErrorView({ description, title, ctaLabel, ctaOnPress }: Props) { +function ErrorView({ + description, + title, + ctaLabel, + ctaOnPress, + icon = 'error', +}: Props) { const { colors } = useTheme(); const styles = createStyles(colors); @@ -58,10 +93,7 @@ function ErrorView({ description, title, ctaLabel, ctaOnPress }: Props) { - + diff --git a/locales/languages/en.json b/locales/languages/en.json index 672ce5c335d..f97ec133c67 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -1645,7 +1645,9 @@ "no_providers_available": "No providers available", "try_different_amount_to_buy_input": "Try choosing a different payment method or try to increase or reduce the amount you want to buy!", "webview_received_error": "WebView received error status code: {{code}}", - "no_tokens_available": "There are currently no cryptocurrencies available to purchase on {{network}} in {{region}}", + "no_tokens_available_title": "No Tokens Available", + "no_tokens_available": "There are currently no tokens available to purchase on {{network}} with the selected payment method.", + "change_payment_method": "Change payment method", "try_different_region": "Try a different region", "return_home": "Return to Home Screen", "region": {