@reown/appkit-react-native 0.0.0-chore-bump-builder-20250728194329

package/src/views/w3m-onramp-view/components/Currency.tsx

@@ -0,0 +1,85 @@
+import {
+  type OnRampFiatCurrency,
+  type OnRampCryptoCurrency
+} from '@reown/appkit-core-react-native';
+import {
+  Pressable,
+  FlexView,
+  Spacing,
+  Text,
+  useTheme,
+  Icon,
+  BorderRadius
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet, Image } from 'react-native';
+
+export const ITEM_HEIGHT = 60;
+
+interface Props {
+  onPress: (item: OnRampFiatCurrency | OnRampCryptoCurrency) => void;
+  item: OnRampFiatCurrency | OnRampCryptoCurrency;
+  selected: boolean;
+  title: string;
+  subtitle: string;
+  testID?: string;
+}
+
+export function Currency({ onPress, item, selected, title, subtitle, testID }: Props) {
+  const Theme = useTheme();
+
+  const handlePress = () => {
+    onPress(item);
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={styles.container}
+      backgroundColor="transparent"
+      testID={testID}
+    >
+      <FlexView flexDirection="row" alignItems="center" justifyContent="space-between" padding="xs">
+        <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start">
+          <Image
+            source={{ uri: item.symbolImageUrl }}
+            style={[styles.logo, { backgroundColor: Theme['inverse-100'] }]}
+          />
+          <FlexView>
+            <Text variant="paragraph-500" color="fg-100" numberOfLines={1} ellipsizeMode="tail">
+              {title}
+            </Text>
+            <Text variant="small-400" color="fg-150">
+              {subtitle}
+            </Text>
+          </FlexView>
+        </FlexView>
+        {selected && (
+          <Icon name="checkmark" size="md" color="accent-100" style={styles.checkmark} />
+        )}
+      </FlexView>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    height: ITEM_HEIGHT,
+    borderRadius: BorderRadius.s
+  },
+  logo: {
+    width: 36,
+    height: 36,
+    borderRadius: BorderRadius.full,
+    marginRight: Spacing.xs
+  },
+  checkmark: {
+    marginRight: Spacing['2xs']
+  },
+  selected: {
+    borderWidth: 1
+  },
+  text: {
+    flex: 1
+  }
+});

package/src/views/w3m-onramp-view/components/CurrencyInput.tsx

@@ -0,0 +1,174 @@
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  Button,
+  FlexView,
+  useTheme,
+  Text,
+  LoadingSpinner,
+  NumericKeyboard,
+  Separator,
+  Spacing,
+  BorderRadius
+} from '@reown/appkit-ui-react-native';
+import { useEffect, useState, useRef } from 'react';
+
+export interface InputTokenProps {
+  style?: StyleProp<ViewStyle>;
+  value?: string;
+  symbol?: string;
+  loading?: boolean;
+  error?: string;
+  isAmountError?: boolean;
+  purchaseValue?: string;
+  onValueChange?: (value: number) => void;
+  onSuggestedValuePress?: (value: number) => void;
+  suggestedValues?: number[];
+}
+
+export function CurrencyInput({
+  value,
+  loading,
+  error,
+  isAmountError,
+  purchaseValue,
+  onValueChange,
+  onSuggestedValuePress,
+  symbol,
+  style,
+  suggestedValues
+}: InputTokenProps) {
+  const Theme = useTheme();
+  const [displayValue, setDisplayValue] = useState(value?.toString() || '0');
+  const isInternalChange = useRef(false);
+  const amountColor = isAmountError ? 'error-100' : value ? 'fg-100' : 'fg-200';
+
+  const handleKeyPress = (key: string) => {
+    isInternalChange.current = true;
+
+    if (key === 'erase') {
+      setDisplayValue(prev => {
+        const newDisplay = prev.slice(0, -1) || '0';
+
+        // If the previous value does not end with a comma, convert to numeric value
+        if (!prev?.endsWith(',')) {
+          const numericValue = Number(newDisplay.replace(',', '.'));
+          onValueChange?.(numericValue);
+        }
+
+        return newDisplay;
+      });
+    } else if (key === ',') {
+      setDisplayValue(prev => {
+        if (prev.includes(',')) return prev; // Don't add multiple commas
+        const newDisplay = prev + ',';
+
+        return newDisplay;
+      });
+    } else {
+      setDisplayValue(prev => {
+        const newDisplay = prev === '0' ? key : prev + key;
+
+        // Convert to numeric value
+        const numericValue = Number(newDisplay.replace(',', '.'));
+        onValueChange?.(numericValue);
+
+        return newDisplay;
+      });
+    }
+  };
+
+  useEffect(() => {
+    // Handle external value changes
+    if (!isInternalChange.current && value !== undefined) {
+      setDisplayValue(value.toString());
+    }
+    isInternalChange.current = false;
+  }, [value]);
+
+  return (
+    <FlexView style={style} testID="currency-input">
+      <FlexView alignItems="center" margin={['m', '0', '0', '0']}>
+        <FlexView flexDirection="row" alignItems="center">
+          <Text style={[styles.input, { color: Theme[amountColor] }]}>{displayValue}</Text>
+          <Text
+            variant="large-400"
+            color={isAmountError ? 'error-100' : 'fg-200'}
+            testID="currency-input-symbol"
+          >
+            {symbol || ''}
+          </Text>
+        </FlexView>
+        <FlexView alignItems="center" justifyContent="center" style={styles.bottomContainer}>
+          {loading ? (
+            <LoadingSpinner size="sm" color="fg-150" />
+          ) : error ? (
+            <Text
+              variant="small-500"
+              color="error-100"
+              numberOfLines={1}
+              testID="currency-input-error"
+            >
+              {error}
+            </Text>
+          ) : (
+            <Text variant="paragraph-500" color="fg-150" numberOfLines={1}>
+              {purchaseValue}
+            </Text>
+          )}
+        </FlexView>
+      </FlexView>
+      {suggestedValues && suggestedValues.length > 0 && (
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
+          {suggestedValues?.map((suggestion: number) => {
+            const isSelected = suggestion.toString() === value;
+
+            return (
+              <Button
+                key={suggestion}
+                testID={`suggested-value-${suggestion}`}
+                style={[
+                  styles.suggestedValue,
+                  isSelected && {
+                    ...styles.selectedValue,
+                    backgroundColor: Theme['accent-glass-020'],
+                    borderColor: Theme['accent-100']
+                  }
+                ]}
+                variant="shade"
+                onPress={() => onSuggestedValuePress?.(suggestion)}
+              >
+                <Text variant="small-400" color="fg-100">
+                  {`${suggestion} ${symbol ?? ''}`}
+                </Text>
+              </Button>
+            );
+          })}
+        </FlexView>
+      )}
+      <Separator color="gray-glass-020" style={styles.separator} />
+      <NumericKeyboard onKeyPress={handleKeyPress} />
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    fontSize: 38,
+    marginRight: Spacing['3xs']
+  },
+  bottomContainer: {
+    height: 20
+  },
+  separator: {
+    marginTop: 16
+  },
+  suggestedValue: {
+    flex: 1,
+    borderRadius: BorderRadius.xxs,
+    marginRight: Spacing.xs,
+    height: 40
+  },
+  selectedValue: {
+    borderWidth: StyleSheet.hairlineWidth
+  }
+});

package/src/views/w3m-onramp-view/components/Header.tsx

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+import { ModalController, RouterController } from '@reown/appkit-core-react-native';
+import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
+
+interface HeaderProps {
+  onSettingsPress: () => void;
+}
+
+export function Header({ onSettingsPress }: HeaderProps) {
+  const handleGoBack = () => {
+    if (RouterController.state.history.length > 1) {
+      RouterController.goBack();
+    } else {
+      ModalController.close();
+    }
+  };
+
+  return (
+    <FlexView justifyContent="space-between" flexDirection="row" alignItems="center" padding="l">
+      <IconLink
+        icon="chevronLeft"
+        size="md"
+        onPress={handleGoBack}
+        testID="button-back"
+        style={styles.icon}
+      />
+      <Text variant="paragraph-600" numberOfLines={1} testID="header-text">
+        Buy crypto
+      </Text>
+      <IconLink
+        icon="settings"
+        size="lg"
+        onPress={onSettingsPress}
+        style={styles.icon}
+        testID="button-onramp-settings"
+      />
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    height: 40,
+    width: 40
+  }
+});

package/src/views/w3m-onramp-view/components/LoadingView.tsx

@@ -0,0 +1,43 @@
+import { FlexView, Text, Shimmer } from '@reown/appkit-ui-react-native';
+import { Dimensions, ScrollView } from 'react-native';
+import { Header } from './Header';
+import styles from '../styles';
+
+export function LoadingView() {
+  const windowWidth = Dimensions.get('window').width;
+
+  return (
+    <>
+      <Header onSettingsPress={() => {}} />
+      <ScrollView bounces={false} testID="onramp-loading-view">
+        <FlexView padding={['s', 'l', '4xl', 'l']}>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+            <Text variant="small-400" color="fg-150">
+              You Buy
+            </Text>
+            <Shimmer width={100} height={40} borderRadius={20} />
+          </FlexView>
+
+          {/* Currency Input Area */}
+          <FlexView margin={['m', '0', 'm', '0']}>
+            <Shimmer width="100%" height={323} borderRadius={16} />
+          </FlexView>
+
+          {/* Payment Method Button */}
+          <Shimmer width="100%" height={64} borderRadius={16} style={styles.paymentButtonMock} />
+
+          {/* Action Buttons */}
+          <FlexView
+            flexDirection="row"
+            alignItems="center"
+            justifyContent="space-between"
+            margin={['m', '0', '0', '0']}
+          >
+            <Shimmer width={windowWidth * 0.2} height={48} borderRadius={16} />
+            <Shimmer width={windowWidth * 0.68} height={48} borderRadius={16} />
+          </FlexView>
+        </FlexView>
+      </ScrollView>
+    </>
+  );
+}

package/src/views/w3m-onramp-view/components/PaymentButton.tsx

@@ -0,0 +1,137 @@
+import {
+  BorderRadius,
+  FlexView,
+  Icon,
+  Image,
+  LoadingSpinner,
+  Pressable,
+  Spacing,
+  Text,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet, View } from 'react-native';
+
+interface PaymentButtonProps {
+  disabled?: boolean;
+  loading?: boolean;
+  title: string;
+  subtitle?: string;
+  paymentLogo?: string;
+  providerLogo?: string;
+  onPress: () => void;
+  testID?: string;
+}
+
+function PaymentButton({
+  disabled,
+  loading,
+  title,
+  subtitle,
+  paymentLogo,
+  providerLogo,
+  onPress,
+  testID
+}: PaymentButtonProps) {
+  const Theme = useTheme();
+  const backgroundColor = Theme['gray-glass-005'];
+
+  return (
+    <Pressable
+      disabled={disabled || loading}
+      onPress={onPress}
+      style={styles.pressable}
+      testID={testID}
+    >
+      <FlexView
+        style={[styles.container, { backgroundColor }]}
+        alignItems="center"
+        justifyContent="space-between"
+        flexDirection="row"
+      >
+        <FlexView
+          alignItems="center"
+          justifyContent="center"
+          style={[styles.iconContainer, { backgroundColor: Theme['bg-300'] }]}
+        >
+          {paymentLogo ? (
+            <Image
+              source={paymentLogo}
+              style={styles.paymentLogo}
+              resizeMethod="resize"
+              resizeMode="contain"
+            />
+          ) : (
+            <Icon name="card" size="lg" />
+          )}
+        </FlexView>
+        <FlexView
+          flexGrow={1}
+          flexDirection="column"
+          alignItems="flex-start"
+          margin={['0', '0', '0', 's']}
+        >
+          <Text variant="paragraph-400" color="fg-100">
+            {title}
+          </Text>
+          {subtitle && (
+            <FlexView flexDirection="row" alignItems="center" margin={['4xs', '0', '0', '0']}>
+              {providerLogo && (
+                <>
+                  <Text variant="small-400" color="fg-150">
+                    via
+                  </Text>
+                  <Image
+                    source={providerLogo}
+                    style={styles.providerLogo}
+                    resizeMethod="resize"
+                    resizeMode="contain"
+                  />
+                </>
+              )}
+              <Text variant="small-400" color="fg-150">
+                {subtitle}
+              </Text>
+            </FlexView>
+          )}
+        </FlexView>
+        {loading ? (
+          <LoadingSpinner size="md" color="fg-200" style={styles.rightIcon} />
+        ) : disabled ? (
+          <View />
+        ) : (
+          <Icon name="chevronRight" size="md" color="fg-200" style={styles.rightIcon} />
+        )}
+      </FlexView>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressable: {
+    borderRadius: BorderRadius.xs
+  },
+  container: {
+    padding: Spacing.s,
+    borderRadius: BorderRadius.xs
+  },
+  iconContainer: {
+    height: 40,
+    width: 40,
+    borderRadius: BorderRadius['3xs']
+  },
+  paymentLogo: {
+    height: 24,
+    width: 24
+  },
+  providerLogo: {
+    height: 16,
+    width: 16,
+    marginHorizontal: Spacing['4xs'],
+    borderRadius: BorderRadius['5xs']
+  },
+  rightIcon: {
+    marginRight: Spacing.xs
+  }
+});
+
+export default PaymentButton;

package/src/views/w3m-onramp-view/components/PaymentMethod.tsx

@@ -0,0 +1,98 @@
+import { useSnapshot } from 'valtio';
+import { ThemeController, type OnRampPaymentMethod } from '@reown/appkit-core-react-native';
+import {
+  Pressable,
+  FlexView,
+  Spacing,
+  Text,
+  useTheme,
+  Image,
+  BorderRadius,
+  IconBox
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export const ITEM_SIZE = 100;
+
+interface Props {
+  onPress: (item: OnRampPaymentMethod) => void;
+  item: OnRampPaymentMethod;
+  selected: boolean;
+  testID?: string;
+}
+
+export function PaymentMethod({ onPress, item, selected, testID }: Props) {
+  const Theme = useTheme();
+  const { themeMode } = useSnapshot(ThemeController.state);
+
+  const handlePress = () => {
+    onPress(item);
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      bounceScale={0.96}
+      style={styles.container}
+      transparent
+      pressable={!selected}
+      testID={testID}
+    >
+      <FlexView
+        style={[styles.logoContainer, { backgroundColor: Theme['gray-glass-005'] }]}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Image
+          source={item.logos[themeMode ?? 'light']}
+          style={styles.logo}
+          resizeMethod="resize"
+          resizeMode="contain"
+        />
+        {selected && (
+          <IconBox
+            icon="checkmark"
+            size="sm"
+            background
+            backgroundColor="accent-100"
+            iconColor="inverse-100"
+            style={styles.checkmark}
+            testID="payment-method-checkmark"
+          />
+        )}
+      </FlexView>
+      <Text variant="tiny-400" color="fg-100" numberOfLines={2} style={styles.text}>
+        {item.name}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: ITEM_SIZE,
+    width: 85,
+    alignItems: 'center'
+  },
+  logoContainer: {
+    width: 60,
+    height: 60,
+    borderRadius: BorderRadius.full,
+    marginBottom: Spacing['4xs']
+  },
+  logo: {
+    width: 26,
+    height: 26
+  },
+  checkmark: {
+    borderRadius: BorderRadius.full,
+    position: 'absolute',
+    bottom: 0,
+    right: -10
+  },
+  text: {
+    marginTop: Spacing.xs,
+    paddingHorizontal: Spacing['3xs'],
+    textAlign: 'center'
+  }
+});

package/src/views/w3m-onramp-view/components/Quote.tsx

@@ -0,0 +1,97 @@
+import { NumberUtil } from '@reown/appkit-common-react-native';
+import { type OnRampQuote } from '@reown/appkit-core-react-native';
+import {
+  FlexView,
+  Image,
+  Spacing,
+  Text,
+  Tag,
+  useTheme,
+  BorderRadius,
+  Icon,
+  Pressable
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+interface Props {
+  item: OnRampQuote;
+  isBestDeal?: boolean;
+  tagText?: string;
+  logoURL?: string;
+  onQuotePress: (item: OnRampQuote) => void;
+  selected?: boolean;
+  testID?: string;
+}
+
+export const ITEM_HEIGHT = 64;
+
+export function Quote({ item, logoURL, onQuotePress, selected, tagText, testID }: Props) {
+  const Theme = useTheme();
+
+  return (
+    <Pressable
+      style={[styles.container, selected && { borderColor: Theme['accent-100'] }]}
+      onPress={() => onQuotePress(item)}
+      testID={testID}
+    >
+      <FlexView
+        justifyContent="space-between"
+        alignItems="center"
+        flexDirection="row"
+        padding={['s', 's', 's', 's']}
+      >
+        <FlexView flexDirection="row" alignItems="center">
+          {logoURL ? (
+            <Image source={logoURL} style={styles.logo} />
+          ) : (
+            <FlexView
+              style={[styles.logo, { backgroundColor: Theme['gray-glass-005'] }]}
+              justifyContent="center"
+              alignItems="center"
+            />
+          )}
+          <FlexView flexDirection="column">
+            <FlexView flexDirection="row" alignItems="center" margin={['0', '0', '4xs', '0']}>
+              <Text variant="paragraph-500" style={styles.providerText}>
+                {item.serviceProvider?.toLowerCase()}
+              </Text>
+              {tagText && (
+                <Tag variant="main" style={styles.tag}>
+                  {tagText}
+                </Tag>
+              )}
+            </FlexView>
+            <Text variant="tiny-500">
+              {NumberUtil.roundNumber(item.destinationAmount, 6, 5)}{' '}
+              {item.destinationCurrencyCode?.split('_')[0]}
+            </Text>
+          </FlexView>
+        </FlexView>
+        {selected && <Icon name="checkmark" color="accent-100" />}
+      </FlexView>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: BorderRadius.xs,
+    borderWidth: 1,
+    borderColor: 'transparent',
+    height: ITEM_HEIGHT,
+    justifyContent: 'center'
+  },
+  logo: {
+    height: 40,
+    width: 40,
+    borderRadius: BorderRadius['3xs'],
+    marginRight: Spacing.xs
+  },
+  providerText: {
+    textTransform: 'capitalize'
+  },
+  tag: {
+    padding: Spacing['3xs'],
+    marginLeft: Spacing['2xs']
+  }
+});