@reown/appkit-react-native 0.0.0-feat-coinbase-20250722184953 → 0.0.0-feat-coinbase-20250723173858

package/src/utils/UiUtil.ts

@@ -25,12 +25,16 @@ export const UiUtil = {
     StorageUtil.setWalletConnectDeepLink(wcLinking);
 
     if (pressedWallet) {
-      const recentWallets = await StorageUtil.addRecentWallet(pressedWallet);
-      if (recentWallets) {
-        ConnectionController.setRecentWallets(recentWallets);
-      }
+      UiUtil.storeRecentWallet(pressedWallet);
       const url = AssetUtil.getWalletImage(pressedWallet);
       ConnectionController.setConnectedWalletImageUrl(url);
     }
+  },
+
+  storeRecentWallet: async (wallet: WcWallet) => {
+    const recentWallets = await StorageUtil.addRecentWallet(wallet);
+    if (recentWallets) {
+      ConnectionController.setRecentWallets(recentWallets);
+    }
   }
 };

package/src/views/w3m-all-wallets-view/index.tsx

@@ -6,6 +6,7 @@ import {
   type WcWallet
 } from '@reown/appkit-core-react-native';
 import { FlexView, IconLink, SearchBar, Spacing, useTheme } from '@reown/appkit-ui-react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
 
 import styles from './styles';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
@@ -24,13 +25,14 @@ export function AllWalletsView() {
   const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
 
   const onWalletPress = (wallet: WcWallet) => {
-    //TODO: check this
-    // const connector = ConnectorController.state.connectors.find(c => c.explorerId === wallet.id);
-    // if (connector) {
-    //   RouterController.push('ConnectingExternal', { connector, wallet });
-    // } else {
-    RouterController.push('ConnectingWalletConnect', { wallet });
-    // }
+    const isExternal =
+      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
+      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
+    } else {
+      RouterController.push('ConnectingWalletConnect', { wallet });
+    }
 
     EventsController.sendEvent({
       type: 'track',

package/src/views/w3m-connect-view/components/all-wallet-list.tsx

@@ -14,10 +14,9 @@ import { filterOutRecentWallets } from '../utils';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onWalletPress: (wallet: WcWallet) => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function AllWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
   const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
   const imageHeaders = ApiController._getApiHeaders();
@@ -35,7 +34,7 @@ export function AllWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled
     UiUtil.TOTAL_VISIBLE_WALLETS - RECENT_COUNT
   );
 
-  if (!isWalletConnectEnabled || !list?.length) {
+  if (!list?.length) {
     return null;
   }
 

package/src/views/w3m-connect-view/components/all-wallets-button.tsx

@@ -6,16 +6,11 @@ import type { StyleProp, ViewStyle } from 'react-native';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onPress: () => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function AllWalletsButton({ itemStyle, onPress, isWalletConnectEnabled }: Props) {
+export function AllWalletsButton({ itemStyle, onPress }: Props) {
   const { installed, count } = useSnapshot(ApiController.state);
 
-  if (!isWalletConnectEnabled) {
-    return null;
-  }
-
   const total = installed.length + count;
   const label = total > 10 ? `${Math.floor(total / 10) * 10}+` : total;
 

package/src/views/w3m-connect-view/components/custom-wallet-list.tsx

@@ -15,17 +15,16 @@ import { filterOutRecentWallets } from '../utils';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onWalletPress: (wallet: CustomWallet) => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed } = useSnapshot(ApiController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  if (!isWalletConnectEnabled || !customWallets?.length) {
+  if (!customWallets?.length) {
     return null;
   }
 

package/src/views/w3m-connect-view/components/recent-wallet-list.tsx

@@ -11,16 +11,15 @@ import type { StyleProp, ViewStyle } from 'react-native';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onWalletPress: (wallet: WcWallet, installed: boolean) => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function RecentWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+export function RecentWalletList({ itemStyle, onWalletPress }: Props) {
   const installed = ApiController.state.installed;
   const { recentWallets } = useSnapshot(ConnectionController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  if (!isWalletConnectEnabled || !recentWallets?.length) {
+  if (!recentWallets?.length) {
     return null;
   }
 

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

@@ -9,6 +9,7 @@ import {
   type WcWallet
 } from '@reown/appkit-core-react-native';
 import { FlexView, Icon, ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { Placeholder } from '../../partials/w3m-placeholder';
 import { CustomWalletList } from './components/custom-wallet-list';
@@ -23,23 +24,20 @@ export function ConnectView() {
   const { features } = useSnapshot(OptionsController.state);
   const { padding } = useCustomDimensions();
 
-  //TODO: check this with Coinbase
-  const isWalletConnectEnabled = true;
-  const isCoinbaseEnabled = false;
   const isSocialEnabled = features?.socials && features?.socials.length > 0;
-  const showConnectWalletsButton =
-    isWalletConnectEnabled && isSocialEnabled && !features?.showWallets;
-  const showSeparator = isSocialEnabled && (isWalletConnectEnabled || isCoinbaseEnabled);
+  const showConnectWalletsButton = isSocialEnabled && !features?.showWallets;
   const showLoadingError = !showConnectWalletsButton && prefetchError;
   const showList = !showConnectWalletsButton && !showLoadingError;
 
   const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
-    // const connector = connectors.find(c => c.explorerId === wallet.id);
-    // if (connector) {
-    //   RouterController.push('ConnectingExternal', { connector, wallet });
-    // } else {
-    RouterController.push('ConnectingWalletConnect', { wallet });
-    // }
+    const isExternal =
+      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
+      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
+    } else {
+      RouterController.push('ConnectingWalletConnect', { wallet });
+    }
 
     const platform = EventUtil.getWalletPlatform(wallet, isInstalled);
     EventsController.sendEvent({
@@ -61,8 +59,12 @@ export function ConnectView() {
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
       <FlexView padding={['xs', '0', '2xl', '0']}>
-        {isSocialEnabled && <SocialLoginList options={features?.socials} />}
-        {showSeparator && <Separator text="or" style={styles.socialSeparator} />}
+        {isSocialEnabled && (
+          <>
+            <SocialLoginList options={features?.socials} />
+            <Separator text="or" style={styles.socialSeparator} />
+          </>
+        )}
 
         <FlexView padding={['0', 's', 'xs', 's']}>
           {showConnectWalletsButton && (
@@ -88,26 +90,10 @@ export function ConnectView() {
           )}
           {showList && (
             <>
-              <RecentWalletList
-                itemStyle={styles.item}
-                onWalletPress={onWalletPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <AllWalletList
-                itemStyle={styles.item}
-                onWalletPress={onWalletPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <CustomWalletList
-                itemStyle={styles.item}
-                onWalletPress={onWalletPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <AllWalletsButton
-                itemStyle={styles.item}
-                onPress={onViewAllPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
+              <RecentWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <AllWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <CustomWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <AllWalletsButton itemStyle={styles.item} onPress={onViewAllPress} />
             </>
           )}
         </FlexView>

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

@@ -1,11 +1,12 @@
+import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
 import {
   RouterController,
   ApiController,
-  ModalController,
   EventsController,
-  type WcWallet
+  ConnectionController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -18,12 +19,13 @@ import {
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
 import styles from './styles';
+import { useAppKit } from '../../AppKitContext';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { UiUtil } from '../../utils/UiUtil';
 
-//TODO: check if this view is needed with Coinbase
 export function ConnectingExternalView() {
-  const { data } = RouterController.state;
-  // const connector = data?.connector;
-  const connector = undefined;
+  const { data } = useSnapshot(RouterController.state);
+  const { connect } = useAppKit();
   const { maxWidth: width } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
@@ -33,37 +35,24 @@ export function ConnectingExternalView() {
     onConnect();
   };
 
-  const storeConnectedWallet = useCallback(
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async (wallet?: WcWallet) => {
-      // if (wallet) {
-      //   const recentWallets = await StorageUtil.addRecentWallet(wallet);
-      //   if (recentWallets) {
-      //     ConnectionController.setRecentWallets(recentWallets);
-      //   }
-      // }
-      // if (connector) {
-      //   const url = AssetUtil.getConnectorImage(connector);
-      //   ConnectionController.setConnectedWalletImageUrl(url);
-      // }
-    },
-    []
-  );
-
   const onConnect = useCallback(async () => {
     try {
-      if (connector) {
-        // await ConnectionController.connectExternal(connector);
-        storeConnectedWallet(data?.wallet);
-        ModalController.close();
+      const wallet = RouterController.state.data?.wallet;
+      if (wallet) {
+        if (wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID) {
+          await connect('phantom');
+        } else if (wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID) {
+          await connect('coinbase');
+        }
+        UiUtil.storeRecentWallet(wallet);
+        ConnectionController.setPressedWallet(wallet);
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
           properties: {
-            name: data?.wallet?.name ?? 'Unknown',
+            name: wallet?.name ?? 'Unknown',
             method: 'mobile',
-            explorer_id: data?.wallet?.id
+            explorer_id: wallet?.id
           }
         });
       }
@@ -81,7 +70,7 @@ export function ConnectingExternalView() {
         properties: { message: (error as Error)?.message ?? 'Unknown' }
       });
     }
-  }, [connector, storeConnectedWallet, data?.wallet]);
+  }, [connect]);
 
   useEffect(() => {
     onConnect();
@@ -98,7 +87,7 @@ export function ConnectingExternalView() {
         <LoadingThumbnail paused={!!errorType}>
           <WalletImage
             size="xl"
-            // imageSrc={AssetUtil.getConnectorImage(connector)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
             imageHeaders={ApiController._getApiHeaders()}
           />
           {errorType && (

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

@@ -11,7 +11,6 @@ import {
   ApiController,
   EventsController
 } from '@reown/appkit-core-react-native';
-import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import { useAppKit } from '../../AppKitContext';
 import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
 import { ConnectingMobile } from '../../partials/w3m-connecting-mobile';
@@ -47,16 +46,9 @@ export function ConnectingView() {
       if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
         ConnectionController.setWcError(false);
 
-        let connectPromise: Promise<void>;
-        if (data?.wallet?.id === 'phantom-wallet') {
-          connectPromise = connect('phantom');
-        } else if (data?.wallet?.id === CommonConstantsUtil.COINBASE_EXPLORER_ID) {
-          connectPromise = connect('coinbase');
-        } else {
-          connectPromise = connect('walletconnect', {
-            universalLink: routeData?.wallet?.link_mode ?? undefined
-          });
-        }
+        const connectPromise = connect('walletconnect', {
+          universalLink: routeData?.wallet?.link_mode ?? undefined
+        });
         ConnectionController.setWcPromise(connectPromise);
       }
     } catch (error) {