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

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

@@ -1,121 +1,71 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { Platform } from 'react-native';
 import {
-  ConnectionController,
-  ConnectorController,
+  WcController,
+  CoreHelperUtil,
   EventsController,
-  ModalController,
   RouterController,
-  SnackController,
-  WebviewController,
-  type AppKitFrameProvider
+  SnackController
 } from '@reown/appkit-core-react-native';
 import { FlexView, LoadingThumbnail, IconBox, Logo, Text } from '@reown/appkit-ui-react-native';
-import { StringUtil } from '@reown/appkit-common-react-native';
+import { ConstantsUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function ConnectingSocialView() {
   const { maxWidth: width } = useCustomDimensions();
-  const { processingAuth } = useSnapshot(WebviewController.state);
-  const { selectedSocialProvider } = useSnapshot(ConnectionController.state);
-  const authConnector = ConnectorController.getAuthConnector();
+  const { connect } = useInternalAppKit();
+  const { data } = useSnapshot(RouterController.state);
+  const { wcUri } = useSnapshot(WcController.state);
   const [error, setError] = useState(false);
-  const provider = authConnector?.provider as AppKitFrameProvider;
 
   const onConnect = useCallback(async () => {
     try {
-      if (
-        !WebviewController.state.connecting &&
-        provider &&
-        ConnectionController.state.selectedSocialProvider
-      ) {
-        const { uri } = await provider.getSocialRedirectUri({
-          provider: ConnectionController.state.selectedSocialProvider
+      if (wcUri) {
+        const { redirect, href } = CoreHelperUtil.formatUniversalUrl(
+          ConstantsUtil.WEB_WALLET_URL,
+          wcUri,
+          RouterController.state.data?.socialProvider
+        );
+        const wcLinking = { name: 'Reown Wallet', href };
+        WcController.setWcLinking(wcLinking);
+        await CoreHelperUtil.openLink(redirect);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking);
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SOCIAL_LOGIN_SUCCESS',
+          properties: { provider: RouterController.state.data?.socialProvider! }
         });
-        WebviewController.setWebviewUrl(uri);
-
-        const isNativeApple =
-          ConnectionController.state.selectedSocialProvider === 'apple' && Platform.OS === 'ios';
-
-        WebviewController.setWebviewVisible(!isNativeApple);
-        WebviewController.setConnecting(true);
-        WebviewController.setConnectingProvider(ConnectionController.state.selectedSocialProvider);
       }
     } catch (e) {
-      WebviewController.setWebviewVisible(false);
-      WebviewController.setWebviewUrl(undefined);
-      WebviewController.setConnecting(false);
-      WebviewController.setConnectingProvider(undefined);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_ERROR',
+        properties: { provider: RouterController.state.data?.socialProvider! }
+      });
       SnackController.showError('Something went wrong');
       setError(true);
     }
-  }, [provider]);
-
-  const socialMessageHandler = useCallback(
-    async (url: string) => {
-      try {
-        if (
-          url.includes('/sdk/oauth') &&
-          ConnectionController.state.selectedSocialProvider &&
-          authConnector &&
-          !WebviewController.state.processingAuth
-        ) {
-          WebviewController.setProcessingAuth(true);
-          WebviewController.setWebviewVisible(false);
-          const parsedUrl = new URL(url);
-
-          EventsController.sendEvent({
-            type: 'track',
-            event: 'SOCIAL_LOGIN_REQUEST_USER_DATA',
-            properties: { provider: ConnectionController.state.selectedSocialProvider }
-          });
-
-          await provider?.connectSocial(parsedUrl.search);
-          await ConnectionController.connectExternal(authConnector);
-          ConnectionController.setConnectedSocialProvider(
-            ConnectionController.state.selectedSocialProvider
-          );
-          WebviewController.setConnecting(false);
-
-          EventsController.sendEvent({
-            type: 'track',
-            event: 'SOCIAL_LOGIN_SUCCESS',
-            properties: { provider: ConnectionController.state.selectedSocialProvider }
-          });
+  }, [wcUri]);
 
-          ModalController.close();
-          WebviewController.reset();
-        }
-      } catch (e) {
-        EventsController.sendEvent({
-          type: 'track',
-          event: 'SOCIAL_LOGIN_ERROR',
-          properties: { provider: ConnectionController.state.selectedSocialProvider! }
-        });
-        WebviewController.reset();
-        RouterController.goBack();
-        SnackController.showError('Something went wrong');
-      }
-    },
-    [authConnector, provider]
-  );
+  const initializeConnection = useCallback(async () => {
+    const connectPromise = connect('walletconnect');
+    WcController.setWcPromise(connectPromise);
+  }, [connect]);
 
   useEffect(() => {
-    onConnect();
-  }, [onConnect]);
+    initializeConnection();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
-    if (!provider) return;
-
-    const unsubscribe = provider?.getEventEmitter().addListener('social', socialMessageHandler);
-
-    return () => {
-      unsubscribe.removeListener('social', socialMessageHandler);
-    };
-  }, [socialMessageHandler, provider]);
+    if (wcUri) {
+      onConnect();
+    }
+  }, [wcUri, onConnect]);
 
   return (
     <FlexView
@@ -125,8 +75,8 @@ export function ConnectingSocialView() {
       style={{ width }}
     >
       <LoadingThumbnail paused={!!error}>
-        <Logo logo={selectedSocialProvider ?? 'more'} height={72} width={72} />
-        {error && (
+        <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
+        {error ? (
           <IconBox
             icon={'close'}
             border
@@ -136,17 +86,13 @@ export function ConnectingSocialView() {
             iconColor="error-100"
             style={styles.errorIcon}
           />
-        )}
+        ) : null}
       </LoadingThumbnail>
       <Text style={styles.continueText} variant="paragraph-500">
-        {processingAuth
-          ? 'Loading user data'
-          : `Continue with ${StringUtil.capitalize(selectedSocialProvider)}`}
+        Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}
       </Text>
       <Text variant="small-400" color="fg-200">
-        {processingAuth
-          ? 'Please wait a moment while we load your data'
-          : 'Connect in the provider window'}
+        Continue in your browser
       </Text>
     </FlexView>
   );

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

@@ -1,28 +1,25 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
-  AccountController,
-  ConnectionController,
+  WcController,
   ConstantsUtil,
   CoreHelperUtil,
-  ModalController,
   RouterController,
   SnackController,
-  type Platform,
   OptionsController,
   ApiController,
   EventsController
 } from '@reown/appkit-core-react-native';
-import { SIWEController } from '@reown/appkit-siwe-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
 import { ConnectingMobile } from '../../partials/w3m-connecting-mobile';
 import { ConnectingWeb } from '../../partials/w3m-connecting-web';
 import { ConnectingHeader } from '../../partials/w3m-connecting-header';
 import { UiUtil } from '../../utils/UiUtil';
+import { type Platform } from '@reown/appkit-common-react-native';
 
 export function ConnectingView() {
-  const { connect } = useAppKit();
+  const { connect } = useInternalAppKit();
   const { installed } = useSnapshot(ApiController.state);
   const { data } = RouterController.state;
   const [lastRetry, setLastRetry] = useState(Date.now());
@@ -35,7 +32,7 @@ export function ConnectingView() {
   const onRetry = () => {
     if (CoreHelperUtil.isAllowedRetry(lastRetry)) {
       setLastRetry(Date.now());
-      ConnectionController.clearUri();
+      WcController.clearUri();
       initializeConnection(true);
     } else {
       SnackController.showError('Please wait a second before retrying');
@@ -44,39 +41,19 @@ export function ConnectingView() {
 
   const initializeConnection = async (retry = false) => {
     try {
-      const { wcPairingExpiry } = ConnectionController.state;
-      // const { data: routeData } = RouterController.state;
+      const { wcPairingExpiry } = WcController.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');
-        }
-        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();
-        }
+        WcController.setWcError(false);
+
+        const connectPromise = connect('walletconnect', {
+          universalLink: routeData?.wallet?.link_mode ?? undefined
+        });
+        WcController.setWcPromise(connectPromise);
       }
     } catch (error) {
-      ConnectionController.setWcError(true);
-      ConnectionController.clearUri();
+      WcController.setWcError(true);
+      WcController.clearUri();
       SnackController.showError('Declined');
       if (isQr && CoreHelperUtil.isAllowedRetry(lastRetry)) {
         setLastRetry(Date.now());

package/src/views/w3m-get-wallet-view/index.tsx

@@ -1,6 +1,7 @@
 import { Linking, Platform, ScrollView } from 'react-native';
 import { FlexView, ListWallet } from '@reown/appkit-ui-react-native';
-import { ApiController, AssetUtil, type WcWallet } from '@reown/appkit-core-react-native';
+import { ApiController, AssetUtil } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 

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

@@ -1,16 +1,13 @@
-/* eslint-disable valtio/state-snapshot-rule */
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
   ApiController,
-  AssetUtil,
-  ConnectionController,
+  AssetController,
+  WcController,
   ConnectionsController,
-  ConnectorController,
-  EventsController,
-  NetworkController,
   RouterController,
-  RouterUtil
+  RouterUtil,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -20,30 +17,30 @@ import {
   NetworkImage,
   Text
 } from '@reown/appkit-ui-react-native';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
+//TODO: is this used?
 export function NetworkSwitchView() {
+  const { switchNetwork } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state);
+  const { recentWallets } = useSnapshot(WcController.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 = AssetUtil.getNetworkImage(network, networkImages);
 
   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 +54,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 +95,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,11 +109,11 @@ 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"
         />
-        {error && (
+        {error ? (
           <IconBox
             icon="close"
             border
@@ -131,7 +123,7 @@ export function NetworkSwitchView() {
             iconColor="error-100"
             style={styles.errorIcon}
           />
-        )}
+        ) : null}
       </LoadingHexagon>
       {textTemplate()}
       {retryTemplate()}

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,
+  OptionsController,
+  AssetController,
   AssetUtil
 } 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 { useInternalAppKit } 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;
@@ -31,7 +34,9 @@ export function NetworksView() {
   const itemGap = Math.abs(
     Math.trunc((usableWidth - numColumns * CardSelectWidth) / numColumns) / 2
   );
-  const { switchNetwork } = useAppKit();
+  const { switchNetwork, back } = useInternalAppKit();
+
+  const networkList = isConnected ? ConnectionsController.getConnectedNetworks() : networks;
 
   const onHelpPress = () => {
     RouterController.push('WhatIsANetwork');
@@ -39,16 +44,18 @@ export function NetworksView() {
   };
 
   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();
+      back();
     };
 
-    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 = AssetUtil.getNetworkImage(network, networkImages);
+
       return (
         <View
           key={network.id}
@@ -64,10 +71,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,4 +1,5 @@
 import {
+  AssetController,
   AssetUtil,
   ConnectionsController,
   OnRampController,
@@ -23,12 +24,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 = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const value = NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
   const symbol = selectedQuote?.destinationCurrencyCode;
@@ -58,7 +60,7 @@ export function OnRampCheckoutView() {
         </FlexView>
         <FlexView flexDirection="row" alignItems="center" justifyContent="center">
           <Text color="fg-200">via </Text>
-          {providerImage && <Image source={providerImage} style={styles.providerImage} />}
+          {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
           <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
         </FlexView>
       </FlexView>
@@ -85,12 +87,12 @@ export function OnRampCheckoutView() {
           <Text>
             {value} {symbol?.split('_')[0] ?? ''}
           </Text>
-          {purchaseCurrency?.symbolImageUrl && (
+          {purchaseCurrency?.symbolImageUrl ? (
             <Image
               source={purchaseCurrency?.symbolImageUrl}
               style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
             />
-          )}
+          ) : null}
         </FlexView>
       </FlexView>
       <FlexView
@@ -116,37 +118,37 @@ export function OnRampCheckoutView() {
           alignItems="center"
           style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
         >
-          {paymentLogo && (
+          {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 && (
+      {showFees ? (
         <Toggle
           title={
             <>
               <Text variant="paragraph-400" color="fg-200">
                 Fees{' '}
-                {showTotalFee && (
+                {showTotalFee ? (
                   <Text variant="paragraph-400">
                     {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
                   </Text>
-                )}
+                ) : null}
               </Text>
             </>
           }
           style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
           contentContainerStyle={styles.feesToggleContent}
         >
-          {showNetworkFee && (
+          {showNetworkFee ? (
             <FlexView
               flexDirection="row"
               justifyContent="space-between"
@@ -157,19 +159,19 @@ export function OnRampCheckoutView() {
                 Network Fees
               </Text>
               <FlexView flexDirection="row" alignItems="center">
-                {networkImage && (
+                {networkImage ? (
                   <Image
                     source={networkImage}
                     style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
                   />
-                )}
+                ) : null}
                 <Text variant="small-400">
                   {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
                 </Text>
               </FlexView>
             </FlexView>
-          )}
-          {showTransactionFee && (
+          ) : null}
+          {showTransactionFee ? (
             <FlexView
               flexDirection="row"
               justifyContent="space-between"
@@ -182,9 +184,9 @@ export function OnRampCheckoutView() {
                 {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
               </Text>
             </FlexView>
-          )}
+          ) : null}
         </Toggle>
-      )}
+      ) : null}
       <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
         <Button
           variant="shade"

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

@@ -1,4 +1,4 @@
-import type { OnRampCountry } from '@reown/appkit-core-react-native';
+import { type OnRampCountry } from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -27,7 +27,9 @@ export function Country({ onPress, item, selected }: Props) {
     <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} />}
+          {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">
@@ -37,9 +39,9 @@ export function Country({ onPress, item, selected }: Props) {
             {item.countryCode}
           </Text>
         </FlexView>
-        {selected && (
+        {selected ? (
           <Icon name="checkmark" size="md" color="accent-100" style={styles.checkmark} />
-        )}
+        ) : null}
       </FlexView>
     </Pressable>
   );