@reown/appkit-react-native 0.0.0-canary-20251008180350

package/src/views/w3m-onramp-settings-view/styles.ts

@@ -0,0 +1,28 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  listItem: {
+    paddingLeft: 0
+  },
+  firstItem: {
+    marginBottom: Spacing.xs
+  },
+  image: {
+    height: 20,
+    width: 20
+  },
+  imageContainer: {
+    borderRadius: BorderRadius.full,
+    height: 36,
+    width: 36,
+    marginRight: Spacing.s
+  },
+  imageBorder: {
+    borderRadius: BorderRadius.full,
+    overflow: 'hidden'
+  },
+  selectorItem: {
+    paddingHorizontal: Spacing.m
+  }
+});

package/src/views/w3m-onramp-settings-view/utils.ts

@@ -0,0 +1,105 @@
+import { ITEM_HEIGHT as COUNTRY_ITEM_HEIGHT } from './components/Country';
+import { ITEM_HEIGHT as CURRENCY_ITEM_HEIGHT } from '../w3m-onramp-view/components/Currency';
+import { OnRampController } from '@reown/appkit-core-react-native';
+import { type OnRampCountry, type OnRampFiatCurrency } from '@reown/appkit-common-react-native';
+
+// -------------------------- Types --------------------------
+type ModalType = 'country' | 'paymentCurrency';
+
+// -------------------------- Constants --------------------------
+const MODAL_TITLES: Record<ModalType, string> = {
+  country: 'Select Country',
+  paymentCurrency: 'Select Currency'
+};
+
+const MODAL_SEARCH_PLACEHOLDERS: Record<ModalType, string> = {
+  country: 'Search country',
+  paymentCurrency: 'Search currency'
+};
+
+const MODAL_EMPTY_TITLES: Record<ModalType, string> = {
+  country: 'No countries found',
+  paymentCurrency: 'No currencies found'
+};
+
+const MODAL_EMPTY_DESCRIPTIONS: Record<ModalType, string> = {
+  country: 'There are no available countries',
+  paymentCurrency: 'There are no available currencies'
+};
+
+const ITEM_HEIGHTS: Record<ModalType, number> = {
+  country: COUNTRY_ITEM_HEIGHT,
+  paymentCurrency: CURRENCY_ITEM_HEIGHT
+};
+
+const KEY_EXTRACTORS: Record<ModalType, (item: any) => string> = {
+  country: (item: OnRampCountry) => item.countryCode,
+  paymentCurrency: (item: OnRampFiatCurrency) => item.currencyCode
+};
+
+// -------------------------- Utils --------------------------
+export const getItemHeight = (type?: ModalType) => {
+  return type ? ITEM_HEIGHTS[type] : 0;
+};
+
+export const getModalTitle = (type?: ModalType) => {
+  return type ? MODAL_TITLES[type] : undefined;
+};
+
+export const getModalSearchPlaceholder = (type?: ModalType) => {
+  return type ? MODAL_SEARCH_PLACEHOLDERS[type] : undefined;
+};
+
+export const getModalEmptyTitle = (type?: ModalType) => {
+  return type ? MODAL_EMPTY_TITLES[type] : undefined;
+};
+
+export const getModalEmptyDescription = (type?: ModalType) => {
+  return type ? MODAL_EMPTY_DESCRIPTIONS[type] : undefined;
+};
+
+const searchFilter = (
+  item: { name: string; currencyCode?: string; countryCode?: string },
+  searchValue: string
+) => {
+  const search = searchValue.toLowerCase();
+
+  return (
+    item.name.toLowerCase().includes(search) ||
+    (item.currencyCode?.toLowerCase().includes(search) ?? false) ||
+    (item.countryCode?.toLowerCase().includes(search) ?? false)
+  );
+};
+
+export const getModalItemKey = (type: ModalType | undefined, index: number, item: any) => {
+  return type ? KEY_EXTRACTORS[type](item) : index.toString();
+};
+
+export const getModalItems = (
+  type?: Exclude<ModalType, 'quotes'>,
+  searchValue?: string,
+  filterSelected?: boolean
+) => {
+  const items = {
+    country: () =>
+      filterSelected
+        ? OnRampController.state.countries.filter(
+            c => c.countryCode !== OnRampController.state.selectedCountry?.countryCode
+          )
+        : OnRampController.state.countries,
+    paymentCurrency: () =>
+      filterSelected
+        ? OnRampController.state.paymentCurrencies?.filter(
+            pc => pc.currencyCode !== OnRampController.state.paymentCurrency?.currencyCode
+          )
+        : OnRampController.state.paymentCurrencies
+  };
+
+  const result = items[type!]?.() || [];
+
+  return searchValue
+    ? result.filter((item: { name: string; currencyCode?: string }) =>
+        searchFilter(item, searchValue)
+      )
+    : result;
+};

package/src/views/w3m-onramp-transaction-view/index.tsx

@@ -0,0 +1,119 @@
+import { useSnapshot } from 'valtio';
+import { useEffect } from 'react';
+import {
+  ConnectionsController,
+  OnRampController,
+  RouterController
+} from '@reown/appkit-core-react-native';
+import { StringUtil } from '@reown/appkit-common-react-native';
+import { Button, FlexView, IconBox, Image, Text, useTheme } from '@reown/appkit-ui-react-native';
+import styles from './styles';
+
+export function OnRampTransactionView() {
+  const Theme = useTheme();
+  const { data } = useSnapshot(RouterController.state);
+
+  const onClose = () => {
+    const isAuth = !!ConnectionsController.state.connection?.properties?.provider;
+    RouterController.replace(isAuth ? 'Account' : 'AccountDefault');
+  };
+
+  const showNetwork = !!data?.onrampResult?.network;
+  const showStatus = !!data?.onrampResult?.status;
+
+  useEffect(() => {
+    return () => {
+      OnRampController.resetState();
+      ConnectionsController.fetchBalance();
+    };
+  }, []);
+
+  return (
+    <FlexView padding={['3xs', 'l', 's', 'l']}>
+      <FlexView>
+        <FlexView alignItems="center">
+          <IconBox
+            icon="checkmark"
+            size="xl"
+            iconColor="success-100"
+            background
+            backgroundColor="success-glass-020"
+            style={styles.icon}
+          />
+          <Text variant="medium-600" color="fg-100">
+            You successfully bought {data?.onrampResult?.purchaseCurrency}
+          </Text>
+        </FlexView>
+        <FlexView
+          style={[styles.card, { backgroundColor: Theme['gray-glass-005'] }]}
+          padding="m"
+          margin={['s', '0', '2xl', '0']}
+        >
+          <FlexView
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+            margin={['0', '0', 'xs', '0']}
+          >
+            <Text variant="paragraph-400" color="fg-150">
+              You Paid
+            </Text>
+            <Text variant="paragraph-500">
+              {data?.onrampResult?.paymentAmount} {data?.onrampResult?.paymentCurrency}
+            </Text>
+          </FlexView>
+          <FlexView
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+            margin={['0', '0', 'xs', '0']}
+          >
+            <Text variant="paragraph-400" color="fg-150">
+              You Bought
+            </Text>
+            <FlexView flexDirection="row" alignItems="center">
+              <Text variant="paragraph-500">
+                {data?.onrampResult?.purchaseAmount}{' '}
+                {data?.onrampResult?.purchaseCurrency?.split('_')[0] ?? ''}
+              </Text>
+              {data?.onrampResult?.purchaseImageUrl ? (
+                <Image
+                  source={data?.onrampResult?.purchaseImageUrl}
+                  style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
+                />
+              ) : null}
+            </FlexView>
+          </FlexView>
+          {showNetwork ? (
+            <FlexView
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="space-between"
+              margin={['0', '0', 'xs', '0']}
+            >
+              <Text variant="paragraph-400" color="fg-150">
+                Network
+              </Text>
+              <Text variant="paragraph-500">
+                {StringUtil.capitalize(data?.onrampResult?.network)}
+              </Text>
+            </FlexView>
+          ) : null}
+          {showStatus ? (
+            <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+              <Text variant="paragraph-400" color="fg-150">
+                Status
+              </Text>
+              <Text variant="paragraph-500">
+                {StringUtil.capitalize(data?.onrampResult?.status)}
+              </Text>
+            </FlexView>
+          ) : null}
+        </FlexView>
+      </FlexView>
+      <Button variant="fill" size="md" onPress={onClose}>
+        Go back
+      </Button>
+    </FlexView>
+  );
+}

package/src/views/w3m-onramp-transaction-view/styles.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  icon: {
+    marginBottom: Spacing.m
+  },
+  card: {
+    borderRadius: BorderRadius.s
+  },
+  tokenImage: {
+    height: 16,
+    width: 16,
+    marginLeft: 4,
+    borderRadius: BorderRadius.full,
+    borderWidth: 1
+  }
+});

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

@@ -0,0 +1,86 @@
+import {
+  type OnRampFiatCurrency,
+  type OnRampCryptoCurrency
+} from '@reown/appkit-common-react-native';
+import {
+  Pressable,
+  FlexView,
+  Spacing,
+  Text,
+  useTheme,
+  Icon,
+  BorderRadius
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet, Image, type StyleProp, type ViewStyle } 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;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Currency({ onPress, item, selected, title, subtitle, testID, style }: Props) {
+  const Theme = useTheme();
+
+  const handlePress = () => {
+    onPress(item);
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={[styles.container, style]}
+      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} />
+        ) : null}
+      </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>
+      ) : null}
+      <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,44 @@
+import { StyleSheet } from 'react-native';
+import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
+import { useInternalAppKit } from '../../../AppKitContext';
+
+interface HeaderProps {
+  onSettingsPress: () => void;
+}
+
+export function Header({ onSettingsPress }: HeaderProps) {
+  const { back } = useInternalAppKit();
+
+  const handleGoBack = () => {
+    back();
+  };
+
+  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', 's', '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>
+    </>
+  );
+}