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

package/src/views/w3m-connect-view/components/social-login-list.tsx

@@ -40,13 +40,13 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
 
   return (
     <FlexView padding={['xs', 's', '0', 's']}>
-      {topSocial && (
+      {topSocial ? (
         <ListSocial logo={topSocial} disabled={disabled} onPress={() => onItemPress(topSocial)}>
           <Text style={styles.topDescription} color={disabled ? 'fg-300' : 'fg-100'}>
             {`Continue with ${StringUtil.capitalize(topSocial)}`}
           </Text>
         </ListSocial>
-      )}
+      ) : null}
       <FlexView flexDirection="row" justifyContent="space-between" margin={['xs', '0', '0', '0']}>
         {bottomSocials?.map((social: SocialProvider, index) => (
           <LogoSelect
@@ -61,14 +61,14 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
             ]}
           />
         ))}
-        {showMoreButton && (
+        {showMoreButton ? (
           <LogoSelect
             logo="more"
             disabled={disabled}
             style={[styles.socialItem, styles.socialItemLast]}
             onPress={onMorePress}
           />
-        )}
+        ) : null}
       </FlexView>
     </FlexView>
   );

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

@@ -5,12 +5,17 @@ import {
   EventUtil,
   EventsController,
   OptionsController,
-  RouterController,
-  type WcWallet
+  RouterController
 } 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 { type WcWallet } from '@reown/appkit-common-react-native';
+import {
+  FlexView,
+  Icon,
+  ListItem,
+  Separator,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../../partials/w3m-placeholder';
 import { CustomWalletList } from './components/custom-wallet-list';
 import { AllWalletsButton } from './components/all-wallets-button';
@@ -18,6 +23,7 @@ import { AllWalletList } from './components/all-wallet-list';
 import { RecentWalletList } from './components/recent-wallet-list';
 import { SocialLoginList } from './components/social-login-list';
 import styles from './styles';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
 
 export function ConnectView() {
   const { prefetchError } = useSnapshot(ApiController.state);
@@ -30,9 +36,7 @@ export function ConnectView() {
   const showList = !showConnectWalletsButton && !showLoadingError;
 
   const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
-    const isExternal =
-      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
-      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+    const isExternal = WcHelpersUtil.isExternalWallet(wallet);
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {
@@ -59,22 +63,22 @@ export function ConnectView() {
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
       <FlexView padding={['xs', '0', '2xl', '0']}>
-        {isSocialEnabled && (
+        {isSocialEnabled ? (
           <>
             <SocialLoginList options={features?.socials} />
             <Separator text="or" style={styles.socialSeparator} />
           </>
-        )}
+        ) : null}
 
         <FlexView padding={['0', 's', 'xs', 's']}>
-          {showConnectWalletsButton && (
+          {showConnectWalletsButton ? (
             <ListItem contentStyle={styles.connectWalletButton} onPress={onViewAllPress}>
               <Icon name="wallet" size="lg" />
               <Text variant="paragraph-500">Continue with a wallet</Text>
               <View style={styles.connectWalletEmpty} />
             </ListItem>
-          )}
-          {showLoadingError && (
+          ) : null}
+          {showLoadingError ? (
             <FlexView alignItems="center" justifyContent="center" margin={['l', '0', '0', '0']}>
               <Placeholder
                 icon="warningCircle"
@@ -87,15 +91,15 @@ export function ConnectView() {
               />
               <Separator style={styles.socialSeparator} />
             </FlexView>
-          )}
-          {showList && (
+          ) : null}
+          {showList ? (
             <>
               <RecentWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
               <AllWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
               <CustomWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
               <AllWalletsButton itemStyle={styles.item} onPress={onViewAllPress} />
             </>
-          )}
+          ) : null}
         </FlexView>
       </FlexView>
     </ScrollView>

package/src/views/w3m-connect-view/utils.ts

@@ -1,4 +1,4 @@
-import type { WcWallet } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 
 export const filterOutRecentWallets = (
   recentWallets?: WcWallet[],

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

@@ -1,35 +1,49 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { ScrollView } from 'react-native';
+import { Platform, ScrollView } from 'react-native';
 import {
   RouterController,
   ApiController,
   EventsController,
-  ConnectionController,
-  AssetUtil
+  WcController,
+  AssetUtil,
+  AssetController,
+  CoreHelperUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
   FlexView,
   IconBox,
   LoadingThumbnail,
-  WalletImage
+  WalletImage,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
-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';
+import { useInternalAppKit } from '../../AppKitContext';
+import { StoreLink } from '../../partials/w3m-connecting-mobile/components/StoreLink';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
 
 export function ConnectingExternalView() {
   const { data } = useSnapshot(RouterController.state);
-  const { connect } = useAppKit();
+  const { walletImages } = useSnapshot(AssetController.state);
+  const { connect } = useInternalAppKit();
   const { maxWidth: width } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
 
+  const storeUrl = Platform.select({
+    ios: data?.wallet?.app_store,
+    android: data?.wallet?.play_store
+  });
+
+  const onStorePress = () => {
+    if (storeUrl) {
+      CoreHelperUtil.openLink(storeUrl);
+    }
+  };
+
   const onRetryPress = () => {
     setErrorType(undefined);
     onConnect();
@@ -39,16 +53,14 @@ export function ConnectingExternalView() {
     try {
       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');
+        if (WcHelpersUtil.isExternalWallet(wallet)) {
+          await connect({ wallet });
         } else {
           // All other wallets are handled by WalletConnect connector
           return;
         }
-        UiUtil.storeRecentWallet(wallet);
-        ConnectionController.setPressedWallet(wallet);
+        WcController.addRecentWallet(wallet);
+        WcController.setPressedWallet(wallet);
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
@@ -90,10 +102,10 @@ export function ConnectingExternalView() {
         <LoadingThumbnail paused={!!errorType}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {errorType && (
+          {errorType ? (
             <IconBox
               icon={'close'}
               border
@@ -103,7 +115,7 @@ export function ConnectingExternalView() {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
         {errorType !== 'not_installed' && (
@@ -119,6 +131,7 @@ export function ConnectingExternalView() {
           </Button>
         )}
       </FlexView>
+      <StoreLink visible={!!storeUrl} walletName={data?.wallet?.name} onPress={onStorePress} />
     </ScrollView>
   );
 }

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

@@ -9,31 +9,27 @@ import {
   Text
 } from '@reown/appkit-ui-react-native';
 import {
-  AssetUtil,
-  ConnectionController,
   ConnectionsController,
   EventsController,
-  ModalController,
   OptionsController,
   RouterController,
   SnackController
 } from '@reown/appkit-core-react-native';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
 
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function ConnectingSiweView() {
-  const { disconnect } = useAppKit();
+  const { disconnect } = useInternalAppKit();
   const { metadata } = useSnapshot(OptionsController.state);
-  const { connectedWalletImageUrl, pressedWallet } = useSnapshot(ConnectionController.state);
-  const { activeAddress } = useSnapshot(ConnectionsController.state);
+  const { activeAddress, identity, walletInfo } = useSnapshot(ConnectionsController.state);
   const [isSigning, setIsSigning] = useState(false);
   const [isDisconnecting, setIsDisconnecting] = useState(false);
 
   const dappName = metadata?.name || 'Dapp';
   const dappIcon = metadata?.icons[0] || '';
-  const walletIcon = AssetUtil.getWalletImage(pressedWallet) || connectedWalletImageUrl;
+  const walletIcon = walletInfo?.icon;
   const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
   const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
 
@@ -73,7 +69,6 @@ export function ConnectingSiweView() {
     if (ConnectionsController.state.activeAddress) {
       setIsDisconnecting(true);
       await disconnect();
-      ModalController.close();
       setIsDisconnecting(false);
     } else {
       RouterController.push('Connect');
@@ -85,7 +80,6 @@ export function ConnectingSiweView() {
     });
   };
 
-  //TODO: Add profile image in Avatar
   return (
     <FlexView padding={['2xl', 's', '3xl', 's']}>
       <IconLink
@@ -103,7 +97,7 @@ export function ConnectingSiweView() {
         leftImage={dappIcon}
         rightImage={walletIcon}
         renderRightPlaceholder={() => (
-          <Avatar imageSrc={undefined} address={activeAddress} size={60} borderWidth={0} />
+          <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
         )}
         rightItemStyle={!walletIcon && styles.walletAvatar}
       />

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

@@ -1,25 +1,30 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
 import {
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   EventsController,
   RouterController,
   SnackController
 } from '@reown/appkit-core-react-native';
-import { FlexView, LoadingThumbnail, IconBox, Logo, Text } from '@reown/appkit-ui-react-native';
+import {
+  FlexView,
+  LoadingThumbnail,
+  IconBox,
+  Logo,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import { ConstantsUtil, StringUtil } from '@reown/appkit-common-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { useAppKit } from '../../AppKitContext';
-import { UiUtil } from '../../utils/UiUtil';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function ConnectingSocialView() {
   const { maxWidth: width } = useCustomDimensions();
-  const { connect } = useAppKit();
+  const { connect } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
-  const { wcUri } = useSnapshot(ConnectionController.state);
+  const { wcUri } = useSnapshot(WcController.state);
   const [error, setError] = useState(false);
 
   const onConnect = useCallback(async () => {
@@ -31,11 +36,10 @@ export function ConnectingSocialView() {
           RouterController.state.data?.socialProvider
         );
         const wcLinking = { name: 'Reown Wallet', href };
-        ConnectionController.setWcLinking(wcLinking);
+        WcController.setWcLinking(wcLinking);
         await CoreHelperUtil.openLink(redirect);
-        await ConnectionController.state.wcPromise;
-        //todo: rename this. its not just UI
-        UiUtil.storeConnectedWallet(wcLinking);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking);
         EventsController.sendEvent({
           type: 'track',
           event: 'SOCIAL_LOGIN_SUCCESS',
@@ -54,8 +58,8 @@ export function ConnectingSocialView() {
   }, [wcUri]);
 
   const initializeConnection = useCallback(async () => {
-    const connectPromise = connect('walletconnect');
-    ConnectionController.setWcPromise(connectPromise);
+    const connectPromise = connect();
+    WcController.setWcPromise(connectPromise);
   }, [connect]);
 
   useEffect(() => {
@@ -78,7 +82,7 @@ export function ConnectingSocialView() {
     >
       <LoadingThumbnail paused={!!error}>
         <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
-        {error && (
+        {error ? (
           <IconBox
             icon={'close'}
             border
@@ -88,7 +92,7 @@ export function ConnectingSocialView() {
             iconColor="error-100"
             style={styles.errorIcon}
           />
-        )}
+        ) : null}
       </LoadingThumbnail>
       <Text style={styles.continueText} variant="paragraph-500">
         Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}

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

@@ -1,25 +1,24 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
-  ConnectionController,
+  WcController,
   ConstantsUtil,
   CoreHelperUtil,
   RouterController,
   SnackController,
-  type Platform,
   OptionsController,
   ApiController,
   EventsController
 } from '@reown/appkit-core-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());
@@ -32,7 +31,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');
@@ -41,19 +40,19 @@ export function ConnectingView() {
 
   const initializeConnection = async (retry = false) => {
     try {
-      const { wcPairingExpiry } = ConnectionController.state;
+      const { wcPairingExpiry } = WcController.state;
       const { data: routeData } = RouterController.state;
       if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
-        ConnectionController.setWcError(false);
+        WcController.setWcError(false);
 
-        const connectPromise = connect('walletconnect', {
-          universalLink: routeData?.wallet?.link_mode ?? undefined
+        const connectPromise = connect({
+          wallet: routeData?.wallet
         });
-        ConnectionController.setWcPromise(connectPromise);
+        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());
@@ -77,7 +76,6 @@ export function ConnectingView() {
   };
 
   const onSelectPlatform = (tab: Platform) => {
-    UiUtil.createViewTransition();
     setPlatform(tab);
   };
 

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

@@ -1,10 +1,12 @@
 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 { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { FlexView, ListWallet, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { ApiController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import styles from './styles';
+import { useSnapshot } from 'valtio';
 
 export function GetWalletView() {
+  const { walletImages } = useSnapshot(AssetController.state);
   const { padding } = useCustomDimensions();
   const imageHeaders = ApiController._getApiHeaders();
 
@@ -21,7 +23,7 @@ export function GetWalletView() {
       <ListWallet
         key={wallet.id}
         name={wallet.name}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
+        imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
         imageHeaders={imageHeaders}
         onPress={() => onWalletPress(wallet)}
         style={styles.item}

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

@@ -3,10 +3,11 @@ import { useEffect, useState } from 'react';
 import {
   ApiController,
   AssetController,
-  ConnectionController,
+  WcController,
   ConnectionsController,
   RouterController,
-  RouterUtil
+  RouterUtil,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -16,20 +17,21 @@ import {
   NetworkImage,
   Text
 } from '@reown/appkit-ui-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
+//TODO: is this used?
 export function NetworkSwitchView() {
-  const { switchNetwork } = useAppKit();
+  const { switchNetwork } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state);
+  const { recentWallets } = useSnapshot(WcController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const [error, setError] = useState<boolean>(false);
   const [showRetry, setShowRetry] = useState<boolean>(false);
   const network = data?.network;
   const wallet = recentWallets?.[0];
-  const networkImage = network ? networkImages[network.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
   const onSwitchNetwork = async () => {
     try {
@@ -111,7 +113,7 @@ export function NetworkSwitchView() {
           imageHeaders={ApiController._getApiHeaders()}
           size="lg"
         />
-        {error && (
+        {error ? (
           <IconBox
             icon="close"
             border
@@ -121,7 +123,7 @@ export function NetworkSwitchView() {
             iconColor="error-100"
             style={styles.errorIcon}
           />
-        )}
+        ) : null}
       </LoadingHexagon>
       {textTemplate()}
       {retryTemplate()}

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

@@ -6,21 +6,21 @@ import {
   Link,
   Separator,
   Spacing,
-  Text
+  Text,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   RouterController,
   EventsController,
   ConnectionsController,
-  ModalController,
   OptionsController,
-  AssetController
+  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() {
@@ -34,7 +34,7 @@ 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;
 
@@ -46,12 +46,7 @@ export function NetworksView() {
   const networksTemplate = () => {
     const onNetworkPress = async (network: AppKitNetwork) => {
       await switchNetwork(network);
-
-      if (RouterController.state.history.length > 1) {
-        RouterController.goBack();
-      } else {
-        ModalController.close();
-      }
+      back();
     };
 
     return networkList.map(network => {
@@ -59,7 +54,7 @@ export function NetworksView() {
         ? 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;
+      const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
       return (
         <View
@@ -88,8 +83,12 @@ export function NetworksView() {
 
   return (
     <>
-      <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-        <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', 's', 'xs']}>
+      <ScrollView
+        bounces={false}
+        fadingEdgeLength={20}
+        style={{ paddingHorizontal: padding, marginBottom: Spacing.xl }}
+      >
+        <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', '4xl', 'xs']}>
           {networksTemplate()}
         </FlexView>
       </ScrollView>