@reown/appkit-react-native 2.0.0-alpha.1 → 2.0.0-alpha.3

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

@@ -2,11 +2,8 @@ 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 { 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';
@@ -97,11 +94,11 @@ export function OnRampSettingsView() {
           </FlexView>
           <FlexView>
             <Text color="fg-100">Select Country</Text>
-            {selectedCountry?.name && (
+            {selectedCountry?.name ? (
               <Text variant="small-400" color="fg-200">
                 {selectedCountry?.name}
               </Text>
-            )}
+            ) : null}
           </FlexView>
         </ListItem>
         <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.itemContent}>
@@ -120,11 +117,11 @@ export function OnRampSettingsView() {
           </FlexView>
           <FlexView>
             <Text color="fg-100">Select Currency</Text>
-            {paymentCurrency?.name && (
+            {paymentCurrency?.name ? (
               <Text variant="small-400" color="fg-200">
                 {paymentCurrency?.name}
               </Text>
-            )}
+            ) : null}
           </FlexView>
         </ListItem>
       </FlexView>

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

@@ -1,10 +1,7 @@
 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';
+import { OnRampController } from '@reown/appkit-core-react-native';
+import { type OnRampCountry, type OnRampFiatCurrency } from '@reown/appkit-common-react-native';
 
 // -------------------------- Types --------------------------
 type ModalType = 'country' | 'paymentCurrency';

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

@@ -1,8 +1,7 @@
 import { useSnapshot } from 'valtio';
 import { useEffect } from 'react';
 import {
-  AccountController,
-  ConnectorController,
+  ConnectionsController,
   OnRampController,
   RouterController
 } from '@reown/appkit-core-react-native';
@@ -15,7 +14,7 @@ export function OnRampTransactionView() {
   const { data } = useSnapshot(RouterController.state);
 
   const onClose = () => {
-    const isAuth = ConnectorController.state.connectedConnector === 'AUTH';
+    const isAuth = !!ConnectionsController.state.connection?.properties?.provider;
     RouterController.replace(isAuth ? 'Account' : 'AccountDefault');
   };
 
@@ -25,7 +24,7 @@ export function OnRampTransactionView() {
   useEffect(() => {
     return () => {
       OnRampController.resetState();
-      AccountController.fetchTokenBalance();
+      ConnectionsController.fetchBalance();
     };
   }, []);
 
@@ -77,15 +76,15 @@ export function OnRampTransactionView() {
                 {data?.onrampResult?.purchaseAmount}{' '}
                 {data?.onrampResult?.purchaseCurrency?.split('_')[0] ?? ''}
               </Text>
-              {data?.onrampResult?.purchaseImageUrl && (
+              {data?.onrampResult?.purchaseImageUrl ? (
                 <Image
                   source={data?.onrampResult?.purchaseImageUrl}
                   style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
                 />
-              )}
+              ) : null}
             </FlexView>
           </FlexView>
-          {showNetwork && (
+          {showNetwork ? (
             <FlexView
               flexDirection="row"
               alignItems="center"
@@ -99,8 +98,8 @@ export function OnRampTransactionView() {
                 {StringUtil.capitalize(data?.onrampResult?.network)}
               </Text>
             </FlexView>
-          )}
-          {showStatus && (
+          ) : null}
+          {showStatus ? (
             <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
               <Text variant="paragraph-400" color="fg-150">
                 Status
@@ -109,7 +108,7 @@ export function OnRampTransactionView() {
                 {StringUtil.capitalize(data?.onrampResult?.status)}
               </Text>
             </FlexView>
-          )}
+          ) : null}
         </FlexView>
       </FlexView>
       <Button variant="fill" size="md" onPress={onClose}>

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

@@ -1,7 +1,7 @@
 import {
   type OnRampFiatCurrency,
   type OnRampCryptoCurrency
-} from '@reown/appkit-core-react-native';
+} from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -9,10 +9,9 @@ import {
   Text,
   useTheme,
   Icon,
-  Image,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Image } from 'react-native';
 
 export const ITEM_HEIGHT = 60;
 
@@ -42,8 +41,8 @@ export function Currency({ onPress, item, selected, title, subtitle, testID }: P
       <FlexView flexDirection="row" alignItems="center" justifyContent="space-between" padding="xs">
         <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start">
           <Image
-            source={item.symbolImageUrl}
-            style={[styles.logo, { backgroundColor: Theme['fg-100'] }]}
+            source={{ uri: item.symbolImageUrl }}
+            style={[styles.logo, { backgroundColor: Theme['inverse-100'] }]}
           />
           <FlexView>
             <Text variant="paragraph-500" color="fg-100" numberOfLines={1} ellipsizeMode="tail">
@@ -54,9 +53,9 @@ export function Currency({ onPress, item, selected, title, subtitle, testID }: P
             </Text>
           </FlexView>
         </FlexView>
-        {selected && (
+        {selected ? (
           <Icon name="checkmark" size="md" color="accent-100" style={styles.checkmark} />
-        )}
+        ) : null}
       </FlexView>
     </Pressable>
   );

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

@@ -10,8 +10,7 @@ import {
   Spacing,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { useEffect, useState } from 'react';
-import { useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 export interface InputTokenProps {
   style?: StyleProp<ViewStyle>;
@@ -91,7 +90,11 @@ export function CurrencyInput({
       <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'}>
+          <Text
+            variant="large-400"
+            color={isAmountError ? 'error-100' : 'fg-200'}
+            testID="currency-input-symbol"
+          >
             {symbol || ''}
           </Text>
         </FlexView>
@@ -114,32 +117,34 @@ export function CurrencyInput({
           )}
         </FlexView>
       </FlexView>
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
-        {suggestedValues?.map((suggestion: number) => {
-          const isSelected = suggestion.toString() === value;
+      {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>
+            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>

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

@@ -1,19 +1,16 @@
 import { StyleSheet } from 'react-native';
-import { ModalController, RouterController } from '@reown/appkit-core-react-native';
-import { IconLink, Text } from '@reown/appkit-ui-react-native';
-import { FlexView } from '@reown/appkit-ui-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 = () => {
-    if (RouterController.state.history.length > 1) {
-      RouterController.goBack();
-    } else {
-      ModalController.close();
-    }
+    back();
   };
 
   return (

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

@@ -20,11 +20,11 @@ export function LoadingView() {
 
           {/* Currency Input Area */}
           <FlexView margin={['m', '0', 'm', '0']}>
-            <Shimmer width="100%" height={370} borderRadius={16} />
+            <Shimmer width="100%" height={323} borderRadius={16} />
           </FlexView>
 
           {/* Payment Method Button */}
-          <Shimmer width="100%" height={64} borderRadius={16} style={styles.paymentMethodButton} />
+          <Shimmer width="100%" height={64} borderRadius={16} style={styles.paymentButtonMock} />
 
           {/* Action Buttons */}
           <FlexView

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"
+                  />
+                </>
+              ) : null}
+              <Text variant="small-400" color="fg-150">
+                {subtitle}
+              </Text>
+            </FlexView>
+          ) : null}
+        </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

@@ -1,5 +1,6 @@
 import { useSnapshot } from 'valtio';
-import { ThemeController, type OnRampPaymentMethod } from '@reown/appkit-core-react-native';
+import { ThemeController } from '@reown/appkit-core-react-native';
+import { type OnRampPaymentMethod } from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -12,7 +13,7 @@ import {
 } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
-export const ITEM_SIZE = 85;
+export const ITEM_SIZE = 100;
 
 interface Props {
   onPress: (item: OnRampPaymentMethod) => void;
@@ -47,9 +48,9 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
           source={item.logos[themeMode ?? 'light']}
           style={styles.logo}
           resizeMethod="resize"
-          resizeMode="center"
+          resizeMode="contain"
         />
-        {selected && (
+        {selected ? (
           <IconBox
             icon="checkmark"
             size="sm"
@@ -59,9 +60,9 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
             style={styles.checkmark}
             testID="payment-method-checkmark"
           />
-        )}
+        ) : null}
       </FlexView>
-      <Text variant="tiny-400" color="fg-100" numberOfLines={1} style={styles.text}>
+      <Text variant="tiny-400" color="fg-100" numberOfLines={2} style={styles.text}>
         {item.name}
       </Text>
     </Pressable>
@@ -71,8 +72,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
 const styles = StyleSheet.create({
   container: {
     height: ITEM_SIZE,
-    width: ITEM_SIZE,
-    justifyContent: 'center',
+    width: 85,
     alignItems: 'center'
   },
   logoContainer: {
@@ -82,8 +82,8 @@ const styles = StyleSheet.create({
     marginBottom: Spacing['4xs']
   },
   logo: {
-    width: 22,
-    height: 22
+    width: 26,
+    height: 26
   },
   checkmark: {
     borderRadius: BorderRadius.full,
@@ -92,6 +92,8 @@ const styles = StyleSheet.create({
     right: -10
   },
   text: {
-    marginTop: Spacing.xs
+    marginTop: Spacing.xs,
+    paddingHorizontal: Spacing['3xs'],
+    textAlign: 'center'
   }
 });

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

@@ -1,5 +1,4 @@
-import { NumberUtil } from '@reown/appkit-common-react-native';
-import { type OnRampQuote } from '@reown/appkit-core-react-native';
+import { NumberUtil, type OnRampQuote } from '@reown/appkit-common-react-native';
 import {
   FlexView,
   Image,
@@ -20,17 +19,19 @@ interface Props {
   logoURL?: string;
   onQuotePress: (item: OnRampQuote) => void;
   selected?: boolean;
+  testID?: string;
 }
 
 export const ITEM_HEIGHT = 64;
 
-export function Quote({ item, logoURL, onQuotePress, selected, tagText }: Props) {
+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"
@@ -53,18 +54,19 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText }: Props)
               <Text variant="paragraph-500" style={styles.providerText}>
                 {item.serviceProvider?.toLowerCase()}
               </Text>
-              {tagText && (
+              {tagText ? (
                 <Tag variant="main" style={styles.tag}>
                   {tagText}
                 </Tag>
-              )}
+              ) : null}
             </FlexView>
             <Text variant="tiny-500">
-              {NumberUtil.roundNumber(item.destinationAmount, 6, 5)} {item.destinationCurrencyCode}
+              {NumberUtil.roundNumber(item.destinationAmount, 6, 5)}{' '}
+              {item.destinationCurrencyCode?.split('_')[0]}
             </Text>
           </FlexView>
         </FlexView>
-        {selected && <Icon name="checkmark" color="accent-100" />}
+        {selected ? <Icon name="checkmark" color="accent-100" /> : null}
       </FlexView>
     </Pressable>
   );