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

package/src/views/w3m-connecting-view/index.tsx

@@ -1,11 +1,9 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
-  AccountController,
   ConnectionController,
   ConstantsUtil,
   CoreHelperUtil,
-  ModalController,
   RouterController,
   SnackController,
   type Platform,
@@ -13,7 +11,6 @@ import {
   ApiController,
   EventsController
 } from '@reown/appkit-core-react-native';
-import { SIWEController } from '@reown/appkit-siwe-react-native';
 import { useAppKit } from '../../AppKitContext';
 import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
 import { ConnectingMobile } from '../../partials/w3m-connecting-mobile';
@@ -45,34 +42,14 @@ export function ConnectingView() {
   const initializeConnection = async (retry = false) => {
     try {
       const { wcPairingExpiry } = ConnectionController.state;
-      // const { data: routeData } = RouterController.state;
+      const { data: routeData } = RouterController.state;
       if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
         ConnectionController.setWcError(false);
-        // ConnectionController.connectWalletConnect(routeData?.wallet?.link_mode ?? undefined);
-
-        let connectPromise: Promise<void>;
-        // TODO: check phantom wallet id from cloud
-        if (data?.wallet?.id === 'phantom-wallet') {
-          connectPromise = connect('phantom');
-        } else {
-          //TODO: check linkmode
-          connectPromise = connect('walletconnect');
-        }
+
+        const connectPromise = connect('walletconnect', {
+          universalLink: routeData?.wallet?.link_mode ?? undefined
+        });
         ConnectionController.setWcPromise(connectPromise);
-        await connectPromise;
-        // await ConnectionController.state.wcPromise;
-        // ConnectorController.setConnectedConnector('WALLET_CONNECT');
-        AccountController.setIsConnected(true);
-
-        if (OptionsController.state.isSiweEnabled) {
-          if (SIWEController.state.status === 'success') {
-            ModalController.close();
-          } else {
-            RouterController.push('ConnectingSiwe');
-          }
-        } else {
-          ModalController.close();
-        }
       }
     } catch (error) {
       ConnectionController.setWcError(true);

package/src/views/w3m-network-switch-view/index.tsx

@@ -1,14 +1,10 @@
-/* eslint-disable valtio/state-snapshot-rule */
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
   ApiController,
-  AssetUtil,
+  AssetController,
   ConnectionController,
   ConnectionsController,
-  ConnectorController,
-  EventsController,
-  NetworkController,
   RouterController,
   RouterUtil
 } from '@reown/appkit-core-react-native';
@@ -20,30 +16,29 @@ import {
   NetworkImage,
   Text
 } from '@reown/appkit-ui-react-native';
+import { useAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function NetworkSwitchView() {
+  const { switchNetwork } = useAppKit();
   const { data } = useSnapshot(RouterController.state);
   const { recentWallets } = useSnapshot(ConnectionController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const isAuthConnected = ConnectorController.state.connectedConnector === 'AUTH';
+  const { networkImages } = useSnapshot(AssetController.state);
   const [error, setError] = useState<boolean>(false);
   const [showRetry, setShowRetry] = useState<boolean>(false);
-  const network = data?.network!;
+  const network = data?.network;
   const wallet = recentWallets?.[0];
+  const networkImage = network ? networkImages[network.id] : undefined;
 
   const onSwitchNetwork = async () => {
     try {
-      setError(false);
-      //TODO: change to appkit switchNetwork
-      await NetworkController.switchActiveNetwork(network);
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'SWITCH_NETWORK',
-        properties: {
-          network: network.id
-        }
-      });
+      if (network) {
+        setError(false);
+        const _network = ConnectionsController.state.networks.find(n => n.id === network.id);
+        if (!_network) return;
+        await switchNetwork(_network);
+      }
     } catch {
       setError(true);
       setShowRetry(true);
@@ -57,9 +52,12 @@ export function NetworkSwitchView() {
 
   useEffect(() => {
     // Go back if network is already switched
+    // eslint-disable-next-line valtio/state-snapshot-rule
     if (activeNetwork?.id === network?.id) {
       RouterUtil.navigateAfterNetworkSwitch();
     }
+
+    // eslint-disable-next-line valtio/state-snapshot-rule
   }, [activeNetwork?.id, network?.id]);
 
   const retryTemplate = () => {
@@ -95,14 +93,6 @@ export function NetworkSwitchView() {
       );
     }
 
-    if (isAuthConnected) {
-      return (
-        <Text variant="paragraph-500" style={styles.text}>
-          Switching to {network.name} network
-        </Text>
-      );
-    }
-
     return (
       <>
         <Text variant="paragraph-500" style={styles.text}>{`Approve in ${walletName}`}</Text>
@@ -117,7 +107,7 @@ export function NetworkSwitchView() {
     <FlexView alignItems="center" padding={['2xl', 's', '4xl', 's']}>
       <LoadingHexagon paused={error}>
         <NetworkImage
-          imageSrc={AssetUtil.getNetworkImage(network?.id)}
+          imageSrc={networkImage}
           imageHeaders={ApiController._getApiHeaders()}
           size="lg"
         />

package/src/views/w3m-networks-view/index.tsx

@@ -10,19 +10,22 @@ import {
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
-  NetworkController,
   RouterController,
   EventsController,
   ConnectionsController,
-  AssetUtil
+  ModalController,
+  OptionsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 import { useAppKit } from '../../AppKitContext';
+import { useSnapshot } from 'valtio';
 
 export function NetworksView() {
-  const { caipNetwork } = NetworkController.state;
+  const { networks, isConnected } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const { maxWidth: width, padding } = useCustomDimensions();
   const numColumns = 4;
@@ -33,22 +36,31 @@ export function NetworksView() {
   );
   const { switchNetwork } = useAppKit();
 
+  const networkList = isConnected ? ConnectionsController.getConnectedNetworks() : networks;
+
   const onHelpPress = () => {
     RouterController.push('WhatIsANetwork');
     EventsController.sendEvent({ type: 'track', event: 'CLICK_NETWORK_HELP' });
   };
 
   const networksTemplate = () => {
-    //TODO: should show requested networks disabled
-    // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
-    const networks = ConnectionsController.getConnectedNetworks();
-
     const onNetworkPress = async (network: AppKitNetwork) => {
       await switchNetwork(network);
-      RouterController.goBack();
+
+      if (RouterController.state.history.length > 1) {
+        RouterController.goBack();
+      } else {
+        ModalController.close();
+      }
     };
 
-    return networks.map(network => {
+    return networkList.map(network => {
+      const isSelected = ConnectionsController.state.isConnected
+        ? ConnectionsController.state.activeCaipNetworkId === network.caipNetworkId
+        : OptionsController.state.defaultNetwork?.caipNetworkId === network.caipNetworkId;
+      // eslint-disable-next-line valtio/state-snapshot-rule
+      const networkImage = network ? networkImages[network.id] : undefined;
+
       return (
         <View
           key={network.id}
@@ -64,10 +76,9 @@ export function NetworksView() {
             testID={`w3m-network-switch-${network.name ?? network.id}`}
             name={network.name ?? 'Unknown'}
             type="network"
-            imageSrc={AssetUtil.getNetworkImage(network.id)}
+            imageSrc={networkImage}
             imageHeaders={imageHeaders}
-            // disabled={!supportsAllNetworks && !approvedCaipNetworkIds?.includes(network.caipNetworkId)}
-            selected={caipNetwork?.id === network.id}
+            selected={isSelected}
             onPress={() => onNetworkPress(network)}
           />
         </View>

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

@@ -1,5 +1,5 @@
 import {
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   OnRampController,
   RouterController,
@@ -23,12 +23,13 @@ import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
 export function OnRampCheckoutView() {
   const Theme = useTheme();
   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?.id);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const value = NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
   const symbol = selectedQuote?.destinationCurrencyCode;

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();
     };
   }, []);
 

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

@@ -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">

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>
+      )}
       <Separator color="gray-glass-020" style={styles.separator} />
       <NumericKeyboard onKeyPress={handleKeyPress} />
     </FlexView>

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

@@ -1,7 +1,6 @@
 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';
 
 interface HeaderProps {
   onSettingsPress: () => void;

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"
+                  />
+                </>
+              )}
+              <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

@@ -12,7 +12,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,7 +47,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
           source={item.logos[themeMode ?? 'light']}
           style={styles.logo}
           resizeMethod="resize"
-          resizeMode="center"
+          resizeMode="contain"
         />
         {selected && (
           <IconBox
@@ -61,7 +61,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
           />
         )}
       </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 +71,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 +81,8 @@ const styles = StyleSheet.create({
     marginBottom: Spacing['4xs']
   },
   logo: {
-    width: 22,
-    height: 22
+    width: 26,
+    height: 26
   },
   checkmark: {
     borderRadius: BorderRadius.full,
@@ -92,6 +91,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

@@ -20,17 +20,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"
@@ -60,7 +62,8 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText }: Props)
               )}
             </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>