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

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

@@ -0,0 +1,272 @@
+import {
+  AssetController,
+  AssetUtil,
+  ConnectionsController,
+  OnRampController,
+  RouterController,
+  ThemeController
+} from '@reown/appkit-core-react-native';
+import {
+  BorderRadius,
+  Button,
+  FlexView,
+  Image,
+  Separator,
+  Spacing,
+  Text,
+  Toggle,
+  useCustomDimensions,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+import { ScrollView, StyleSheet } from 'react-native';
+import { useSnapshot } from 'valtio';
+import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
+
+export function OnRampCheckoutView() {
+  const Theme = useTheme();
+  const { padding } = useCustomDimensions();
+  const { themeMode } = useSnapshot(ThemeController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { selectedQuote, selectedPaymentMethod, purchaseCurrency } = useSnapshot(
+    OnRampController.state
+  );
+
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+
+  const value = NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
+  const symbol = selectedQuote?.destinationCurrencyCode;
+  const paymentLogo = selectedPaymentMethod?.logos[themeMode ?? 'light'];
+  const providerImage = OnRampController.getServiceProviderImage(
+    selectedQuote?.serviceProvider ?? ''
+  );
+
+  const showNetworkFee = selectedQuote?.networkFee != null;
+  const showTransactionFee = selectedQuote?.transactionFee != null;
+  const showTotalFee = selectedQuote?.totalFee != null;
+  const showFees = showNetworkFee || showTransactionFee || showTotalFee;
+
+  const onConfirm = () => {
+    RouterController.push('OnRampLoading');
+  };
+
+  return (
+    <ScrollView style={{ paddingHorizontal: padding }}>
+      <FlexView padding={['2xl', 'l', 's', 'l']}>
+        <FlexView alignItems="center">
+          <Text color="fg-200">You Buy</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
+            <Text variant="paragraph-400" color="fg-200">
+              {symbol?.split('_')[0] ?? symbol ?? ''}
+            </Text>
+          </FlexView>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+            <Text color="fg-200">via </Text>
+            {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
+            <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+          </FlexView>
+        </FlexView>
+        <Separator style={styles.separator} color="gray-glass-010" />
+        <FlexView
+          padding={['s', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Pay</Text>
+          <Text>
+            {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
+          </Text>
+        </FlexView>
+        <FlexView
+          padding={['xs', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Receive</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>
+              {value} {symbol?.split('_')[0] ?? ''}
+            </Text>
+            {purchaseCurrency?.symbolImageUrl ? (
+              <Image
+                source={purchaseCurrency?.symbolImageUrl}
+                style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
+              />
+            ) : null}
+          </FlexView>
+        </FlexView>
+        <FlexView
+          padding={['xs', 's', 'xs', 's']}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text color="fg-200">Network</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>{purchaseCurrency?.chainName}</Text>
+          </FlexView>
+        </FlexView>
+        <FlexView
+          padding={['xs', 's', 'm', 's']}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text color="fg-200">Pay with</Text>
+          <FlexView
+            flexDirection="row"
+            alignItems="center"
+            style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          >
+            {paymentLogo ? (
+              <Image
+                source={paymentLogo}
+                style={styles.paymentMethodImage}
+                tintColor={Theme['fg-150']}
+              />
+            ) : null}
+            <Text variant="small-600" color="fg-150">
+              {selectedPaymentMethod?.name}
+            </Text>
+          </FlexView>
+        </FlexView>
+
+        {showFees ? (
+          <Toggle
+            title={
+              <>
+                <Text variant="paragraph-400" color="fg-200">
+                  Fees{' '}
+                  {showTotalFee ? (
+                    <Text variant="paragraph-400">
+                      {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+                    </Text>
+                  ) : null}
+                </Text>
+              </>
+            }
+            style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
+            contentContainerStyle={styles.feesToggleContent}
+          >
+            {showNetworkFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+                margin={['0', '0', 'xs', '0']}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Network Fees
+                </Text>
+                <FlexView flexDirection="row" alignItems="center">
+                  {networkImage ? (
+                    <Image
+                      source={networkImage}
+                      style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
+                    />
+                  ) : null}
+                  <Text variant="small-400">
+                    {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
+                  </Text>
+                </FlexView>
+              </FlexView>
+            ) : null}
+            {showTransactionFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Transaction Fees
+                </Text>
+                <Text variant="small-400">
+                  {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
+                </Text>
+              </FlexView>
+            ) : null}
+          </Toggle>
+        ) : null}
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
+          <Button
+            variant="shade"
+            size="md"
+            style={styles.cancelButton}
+            onPress={RouterController.goBack}
+          >
+            Back
+          </Button>
+          <Button
+            variant="fill"
+            size="md"
+            style={styles.confirmButton}
+            onPress={onConfirm}
+            testID="button-confirm"
+          >
+            Confirm
+          </Button>
+        </FlexView>
+      </FlexView>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  amount: {
+    fontSize: 38,
+    marginRight: Spacing['3xs']
+  },
+  separator: {
+    marginVertical: Spacing.m
+  },
+  feesToggle: {
+    borderRadius: BorderRadius.xs
+  },
+  feesToggleContent: {
+    paddingHorizontal: Spacing.xs,
+    paddingBottom: Spacing.xs
+  },
+  toggleItem: {
+    padding: Spacing.s,
+    borderRadius: BorderRadius.xxs
+  },
+  paymentMethodImage: {
+    width: 14,
+    height: 14,
+    marginRight: Spacing['3xs']
+  },
+  confirmButton: {
+    marginLeft: Spacing.s,
+    flex: 3
+  },
+  cancelButton: {
+    flex: 1
+  },
+  providerImage: {
+    height: 16,
+    width: 16,
+    marginRight: 2
+  },
+  tokenImage: {
+    height: 20,
+    width: 20,
+    marginLeft: 4,
+    borderRadius: BorderRadius.full,
+    borderWidth: 1
+  },
+  networkImage: {
+    height: 16,
+    width: 16,
+    marginRight: 4,
+    borderRadius: BorderRadius.full,
+    borderWidth: 1
+  },
+  paymentMethodContainer: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: BorderRadius.full,
+    padding: Spacing.xs
+  }
+});

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

@@ -0,0 +1,159 @@
+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,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+
+import { ConnectingBody } from '../../partials/w3m-connecting-body';
+import styles from './styles';
+import { StringUtil } from '@reown/appkit-common-react-native';
+
+export function OnRampLoadingView() {
+  const { padding } = 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}
+      style={{ paddingHorizontal: padding }}
+      testID="onramp-loading-widget-view"
+    >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
+        <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['s']
+  },
+  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,74 @@
+import { type OnRampCountry } from '@reown/appkit-common-react-native';
+import {
+  Pressable,
+  FlexView,
+  Spacing,
+  Text,
+  Icon,
+  BorderRadius
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { SvgUri } from 'react-native-svg';
+
+interface Props {
+  onPress: (item: OnRampCountry) => void;
+  item: OnRampCountry;
+  selected: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export const ITEM_HEIGHT = 60;
+
+export function Country({ onPress, item, selected, style, testID }: Props) {
+  const handlePress = () => {
+    onPress(item);
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={[styles.container, style]}
+      backgroundColor="transparent"
+      testID={testID}
+    >
+      <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} />
+          ) : null}
+        </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} />
+        ) : null}
+      </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,154 @@
+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 } from '@reown/appkit-core-react-native';
+import { type OnRampCountry, type OnRampFiatCurrency } from '@reown/appkit-common-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,
+  getModalEmptyTitle,
+  getModalEmptyDescription
+} 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 onModalClose = () => {
+    setModalType(undefined);
+    setSearchValue('');
+  };
+
+  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}
+          style={styles.selectorItem}
+          testID={`country-item-${parsedItem.countryCode}`}
+        />
+      );
+    }
+
+    const parsedItem = item as OnRampFiatCurrency;
+
+    return (
+      <MemoizedCurrency
+        item={parsedItem}
+        onPress={onPressModalItem}
+        selected={parsedItem.currencyCode === paymentCurrency?.currencyCode}
+        title={parsedItem.name}
+        subtitle={parsedItem.currencyCode}
+        style={styles.selectorItem}
+      />
+    );
+  };
+
+  return (
+    <>
+      <FlexView style={{ backgroundColor: Theme['bg-100'] }} padding={['s', 'm', 's', 'm']}>
+        <ListItem
+          onPress={onCountryPress}
+          chevron
+          style={styles.firstItem}
+          contentStyle={styles.listItem}
+        >
+          <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>
+            ) : null}
+          </FlexView>
+        </ListItem>
+        <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.listItem}>
+          <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>
+            ) : null}
+          </FlexView>
+        </ListItem>
+      </FlexView>
+      <SelectorModal
+        visible={!!modalType}
+        onClose={onModalClose}
+        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)}
+        emptyTitle={getModalEmptyTitle(modalType)}
+        emptyDescription={getModalEmptyDescription(modalType)}
+      />
+    </>
+  );
+}