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

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

@@ -0,0 +1,157 @@
+import { useCallback, useEffect } from 'react';
+import { useSnapshot } from 'valtio';
+import { Linking, ScrollView } from 'react-native';
+import {
+  RouterController,
+  OnRampController,
+  OptionsController,
+  EventsController
+} from '@reown/appkit-core-react-native';
+import { FlexView, DoubleImageLoader, IconLink, Button, Text } from '@reown/appkit-ui-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { ConnectingBody } from '../../partials/w3m-connecting-body';
+import styles from './styles';
+import { StringUtil } from '@reown/appkit-common-react-native';
+
+export function OnRampLoadingView() {
+  const { maxWidth: width } = useCustomDimensions();
+  const { error } = useSnapshot(OnRampController.state);
+  const providerName = StringUtil.capitalize(
+    OnRampController.state.selectedQuote?.serviceProvider.toLowerCase()
+  );
+
+  const serviceProvideLogo = OnRampController.getServiceProviderImage(
+    OnRampController.state.selectedQuote?.serviceProvider ?? ''
+  );
+
+  const handleGoBack = () => {
+    if (EventsController.state.data.event === 'BUY_SUBMITTED') {
+      // Send event only if the onramp url was already created
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'BUY_CANCEL'
+      });
+    }
+
+    RouterController.goBack();
+  };
+
+  const onConnect = useCallback(async () => {
+    if (OnRampController.state.selectedQuote) {
+      OnRampController.clearError();
+      const response = await OnRampController.generateWidget({
+        quote: OnRampController.state.selectedQuote
+      });
+      if (response?.widgetUrl) {
+        Linking.openURL(response?.widgetUrl);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const unsubscribe = Linking.addEventListener('url', ({ url }) => {
+      const metadata = OptionsController.state.metadata;
+
+      if (
+        (metadata?.redirect?.universal && url.startsWith(metadata?.redirect?.universal)) ||
+        (metadata?.redirect?.native && url.startsWith(metadata?.redirect?.native))
+      ) {
+        const parsedUrl = new URL(url);
+        const searchParams = new URLSearchParams(parsedUrl.search);
+        const asset = searchParams.get('cryptoCurrency');
+        const network = searchParams.get('network');
+        const purchaseAmount = searchParams.get('cryptoAmount');
+        const amount = searchParams.get('fiatAmount');
+        const currency = searchParams.get('fiatCurrency');
+        const orderId = searchParams.get('orderId');
+        const status = searchParams.get('status');
+
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'BUY_SUCCESS',
+          properties: {
+            asset,
+            network,
+            amount,
+            currency,
+            orderId
+          }
+        });
+
+        RouterController.reset('OnRampTransaction', {
+          onrampResult: {
+            purchaseCurrency: asset,
+            purchaseAmount,
+            purchaseImageUrl: OnRampController.state.purchaseCurrency?.symbolImageUrl ?? '',
+            paymentCurrency: currency,
+            paymentAmount: amount,
+            network: network,
+            status: status
+          }
+        });
+      }
+    });
+
+    return () => unsubscribe.remove();
+  }, []);
+
+  useEffect(() => {
+    onConnect();
+  }, [onConnect]);
+
+  return (
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      contentContainerStyle={styles.container}
+      testID="onramp-loading-widget-view"
+    >
+      <FlexView
+        alignItems="center"
+        alignSelf="center"
+        padding={['2xl', 'l', '0', 'l']}
+        style={{ width }}
+      >
+        <IconLink
+          icon="chevronLeft"
+          size="md"
+          onPress={handleGoBack}
+          testID="button-back"
+          style={styles.backButton}
+        />
+        <DoubleImageLoader
+          leftImage={OptionsController.state.metadata?.icons[0]}
+          rightImage={serviceProvideLogo}
+          style={styles.imageContainer}
+        />
+        {error ? (
+          <FlexView
+            alignItems="center"
+            justifyContent="center"
+            padding={['3xs', '2xl', '0', '2xl']}
+          >
+            <Text center color="error-100" variant="paragraph-500" style={styles.errorText}>
+              There was an error while connecting with {providerName}
+            </Text>
+            <Button
+              size="sm"
+              variant="accent"
+              iconLeft="refresh"
+              style={styles.retryButton}
+              iconStyle={styles.retryIcon}
+              onPress={onConnect}
+            >
+              Try again
+            </Button>
+          </FlexView>
+        ) : (
+          <ConnectingBody
+            title={`Connecting with ${providerName}`}
+            description="Please wait while we redirect you to finalize your purchase."
+          />
+        )}
+      </FlexView>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  container: {
+    paddingBottom: Spacing['3xl']
+  },
+  backButton: {
+    alignSelf: 'flex-start'
+  },
+  imageContainer: {
+    marginBottom: Spacing.s
+  },
+  retryButton: {
+    marginTop: Spacing.m
+  },
+  retryIcon: {
+    transform: [{ rotateY: '180deg' }]
+  },
+  errorText: {
+    marginHorizontal: Spacing['4xl']
+  }
+});

package/src/views/w3m-onramp-settings-view/components/Country.tsx

@@ -0,0 +1,65 @@
+import type { OnRampCountry } from '@reown/appkit-core-react-native';
+import {
+  Pressable,
+  FlexView,
+  Spacing,
+  Text,
+  Icon,
+  BorderRadius
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+import { SvgUri } from 'react-native-svg';
+
+interface Props {
+  onPress: (item: OnRampCountry) => void;
+  item: OnRampCountry;
+  selected: boolean;
+}
+
+export const ITEM_HEIGHT = 60;
+
+export function Country({ onPress, item, selected }: Props) {
+  const handlePress = () => {
+    onPress(item);
+  };
+
+  return (
+    <Pressable onPress={handlePress} style={styles.container} backgroundColor="transparent">
+      <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start" padding="s">
+        <FlexView style={styles.imageContainer}>
+          {item.flagImageUrl && SvgUri && <SvgUri uri={item.flagImageUrl} width={36} height={36} />}
+        </FlexView>
+        <FlexView style={styles.textContainer}>
+          <Text variant="paragraph-400" color="fg-100" numberOfLines={1} ellipsizeMode="tail">
+            {item.name}
+          </Text>
+          <Text variant="small-400" color="fg-150">
+            {item.countryCode}
+          </Text>
+        </FlexView>
+        {selected && (
+          <Icon name="checkmark" size="md" color="accent-100" style={styles.checkmark} />
+        )}
+      </FlexView>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: BorderRadius.s,
+    height: ITEM_HEIGHT,
+    justifyContent: 'center'
+  },
+  imageContainer: {
+    borderRadius: BorderRadius.full,
+    overflow: 'hidden',
+    marginRight: Spacing.xs
+  },
+  textContainer: {
+    flex: 1
+  },
+  checkmark: {
+    marginRight: Spacing['2xs']
+  }
+});

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

@@ -0,0 +1,145 @@
+import { useSnapshot } from 'valtio';
+import { memo, useState } from 'react';
+import { SvgUri } from 'react-native-svg';
+import { FlexView, ListItem, Text, useTheme, Icon, Image } from '@reown/appkit-ui-react-native';
+import {
+  OnRampController,
+  type OnRampCountry,
+  type OnRampFiatCurrency
+} from '@reown/appkit-core-react-native';
+
+import { SelectorModal } from '../../partials/w3m-selector-modal';
+import { Country } from './components/Country';
+import { Currency } from '../w3m-onramp-view/components/Currency';
+import {
+  getModalTitle,
+  getItemHeight,
+  getModalItems,
+  getModalItemKey,
+  getModalSearchPlaceholder
+} from './utils';
+import { styles } from './styles';
+
+type ModalType = 'country' | 'paymentCurrency';
+
+const MemoizedCountry = memo(Country);
+const MemoizedCurrency = memo(Currency);
+
+export function OnRampSettingsView() {
+  const { paymentCurrency, selectedCountry } = useSnapshot(OnRampController.state);
+  const Theme = useTheme();
+  const [modalType, setModalType] = useState<ModalType>();
+  const [searchValue, setSearchValue] = useState('');
+
+  const onCountryPress = () => {
+    setModalType('country');
+  };
+
+  const onPaymentCurrencyPress = () => {
+    setModalType('paymentCurrency');
+  };
+
+  const onPressModalItem = async (item: any) => {
+    setModalType(undefined);
+    setSearchValue('');
+    if (modalType === 'country') {
+      await OnRampController.setSelectedCountry(item as OnRampCountry);
+    } else if (modalType === 'paymentCurrency') {
+      OnRampController.setPaymentCurrency(item as OnRampFiatCurrency);
+    }
+  };
+
+  const renderModalItem = ({ item }: { item: any }) => {
+    if (modalType === 'country') {
+      const parsedItem = item as OnRampCountry;
+
+      return (
+        <MemoizedCountry
+          item={parsedItem}
+          onPress={onPressModalItem}
+          selected={parsedItem.countryCode === selectedCountry?.countryCode}
+        />
+      );
+    }
+
+    const parsedItem = item as OnRampFiatCurrency;
+
+    return (
+      <MemoizedCurrency
+        item={parsedItem}
+        onPress={onPressModalItem}
+        selected={parsedItem.currencyCode === paymentCurrency?.currencyCode}
+        title={parsedItem.name}
+        subtitle={parsedItem.currencyCode}
+      />
+    );
+  };
+
+  return (
+    <>
+      <FlexView style={{ backgroundColor: Theme['bg-100'] }} padding={['s', 'm', '4xl', 'm']}>
+        <ListItem
+          onPress={onCountryPress}
+          chevron
+          style={styles.firstItem}
+          contentStyle={styles.itemContent}
+        >
+          <FlexView
+            alignItems="center"
+            justifyContent="center"
+            style={[styles.imageContainer, { backgroundColor: Theme['gray-glass-005'] }]}
+          >
+            <FlexView style={styles.imageBorder}>
+              {selectedCountry?.flagImageUrl && SvgUri ? (
+                <SvgUri uri={selectedCountry?.flagImageUrl} style={styles.image} />
+              ) : undefined}
+            </FlexView>
+          </FlexView>
+          <FlexView>
+            <Text color="fg-100">Select Country</Text>
+            {selectedCountry?.name && (
+              <Text variant="small-400" color="fg-200">
+                {selectedCountry?.name}
+              </Text>
+            )}
+          </FlexView>
+        </ListItem>
+        <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.itemContent}>
+          <FlexView
+            alignItems="center"
+            justifyContent="center"
+            style={[styles.imageContainer, { backgroundColor: Theme['gray-glass-005'] }]}
+          >
+            <FlexView style={styles.imageBorder}>
+              {paymentCurrency?.symbolImageUrl ? (
+                <Image source={paymentCurrency.symbolImageUrl} style={styles.image} />
+              ) : (
+                <Icon name="currencyDollar" size="md" color="fg-100" />
+              )}
+            </FlexView>
+          </FlexView>
+          <FlexView>
+            <Text color="fg-100">Select Currency</Text>
+            {paymentCurrency?.name && (
+              <Text variant="small-400" color="fg-200">
+                {paymentCurrency?.name}
+              </Text>
+            )}
+          </FlexView>
+        </ListItem>
+      </FlexView>
+      <SelectorModal
+        visible={!!modalType}
+        onClose={() => setModalType(undefined)}
+        items={getModalItems(modalType, searchValue, true)}
+        selectedItem={modalType === 'country' ? selectedCountry : paymentCurrency}
+        onSearch={setSearchValue}
+        renderItem={renderModalItem}
+        keyExtractor={(item: any, index: number) => getModalItemKey(modalType, index, item)}
+        title={getModalTitle(modalType)}
+        itemHeight={getItemHeight(modalType)}
+        searchPlaceholder={getModalSearchPlaceholder(modalType)}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  itemContent: {
+    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'
+  }
+});

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

@@ -0,0 +1,90 @@
+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,
+  type OnRampCountry,
+  type OnRampFiatCurrency
+} from '@reown/appkit-core-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 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;
+};
+
+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', '4xl', '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'] }]}
+                />
+              )}
+            </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>
+          )}
+          {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>
+          )}
+        </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
+  }
+});