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": {