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

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

@@ -7,16 +7,21 @@ import {
   OptionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
-import { type WcWallet, ConstantsUtil } from '@reown/appkit-common-react-native';
-import { FlexView, Icon, ListItem, Separator, Text } from '@reown/appkit-ui-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';
 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);
@@ -29,13 +34,11 @@ export function ConnectView() {
   const showList = !showConnectWalletsButton && !showLoadingError;
 
   const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
-    const isExternal =
-      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
-      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id;
+    const isExternal = WcHelpersUtil.isExternalWallet(wallet);
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {
-      RouterController.push('ConnectingWalletConnect', { wallet });
+      RouterController.push('WalletConnect', { wallet });
     }
 
     const platform = EventUtil.getWalletPlatform(wallet, isInstalled);
@@ -57,7 +60,7 @@ export function ConnectView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', '0', '2xl', '0']}>
+      <FlexView padding={['xs', '0', 'xs', '0']}>
         {isSocialEnabled ? (
           <>
             <SocialLoginList options={features?.socials} />
@@ -65,7 +68,7 @@ export function ConnectView() {
           </>
         ) : null}
 
-        <FlexView padding={['0', 's', 'xs', 's']}>
+        <FlexView padding={['0', 's', '0', 's']}>
           {showConnectWalletsButton ? (
             <ListItem contentStyle={styles.connectWalletButton} onPress={onViewAllPress}>
               <Icon name="wallet" size="lg" />
@@ -89,9 +92,7 @@ export function ConnectView() {
           ) : 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}

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

@@ -1,34 +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,
   WcController,
-  AssetUtil
+  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 { useInternalAppKit } from '../../AppKitContext';
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { StoreLink } from '../../partials/w3m-connecting-mobile/components/StoreLink';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
 
 export function ConnectingExternalView() {
   const { data } = useSnapshot(RouterController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const { connect } = useInternalAppKit();
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = 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();
@@ -38,10 +53,8 @@ export function ConnectingExternalView() {
     try {
       const wallet = RouterController.state.data?.wallet;
       if (wallet) {
-        if (wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id) {
-          await connect('phantom');
-        } else if (wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id) {
-          await connect('coinbase');
+        if (WcHelpersUtil.isExternalWallet(wallet)) {
+          await connect({ wallet });
         } else {
           // All other wallets are handled by WalletConnect connector
           return;
@@ -79,17 +92,17 @@ export function ConnectingExternalView() {
   }, [onConnect]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
-      <FlexView
-        alignItems="center"
-        alignSelf="center"
-        padding={['2xl', 'l', '0', 'l']}
-        style={{ width }}
-      >
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      contentContainerStyle={styles.container}
+    >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
         <LoadingThumbnail paused={!!errorType}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
           {errorType ? (
@@ -118,6 +131,7 @@ export function ConnectingExternalView() {
           </Button>
         )}
       </FlexView>
+      <StoreLink visible={!!storeUrl} walletName={data?.wallet?.name} onPress={onStorePress} />
     </ScrollView>
   );
 }

package/src/views/w3m-connecting-external-view/styles.ts

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   container: {
-    paddingBottom: Spacing['3xl']
+    paddingBottom: Spacing['s']
   },
   retryButton: {
     marginTop: Spacing.m

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

@@ -5,12 +5,13 @@ import {
   Button,
   DoubleImageLoader,
   FlexView,
-  IconLink,
-  Text
+  Text,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ConnectionsController,
   EventsController,
+  ModalController,
   OptionsController,
   RouterController,
   SnackController
@@ -19,9 +20,11 @@ import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function ConnectingSiweView() {
   const { disconnect } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
   const { metadata } = useSnapshot(OptionsController.state);
   const { activeAddress, identity, walletInfo } = useSnapshot(ConnectionsController.state);
   const [isSigning, setIsSigning] = useState(false);
@@ -49,6 +52,8 @@ export function ConnectingSiweView() {
         properties: { network, isSmartAccount }
       });
 
+      ModalController.close();
+
       return session;
     } catch (error) {
       SnackController.showError('Signature declined');
@@ -81,46 +86,43 @@ export function ConnectingSiweView() {
   };
 
   return (
-    <FlexView padding={['2xl', 's', '3xl', 's']}>
-      <IconLink
-        icon="close"
-        size="md"
-        onPress={onCancel}
-        testID="header-close"
-        style={styles.closeButton}
-      />
-      <Text variant="paragraph-600" numberOfLines={1} center>
-        Sign in
-      </Text>
-      <DoubleImageLoader
-        style={styles.logoContainer}
-        leftImage={dappIcon}
-        rightImage={walletIcon}
-        renderRightPlaceholder={() => (
-          <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
-        )}
-        rightItemStyle={!walletIcon && styles.walletAvatar}
-      />
-      <Text center variant="medium-600" color="fg-100" style={styles.title}>
-        {dappName} needs to connect to your wallet
-      </Text>
-      <Text center variant="small-400" color="fg-200" style={styles.subtitle}>
-        Sign this message to prove you own this wallet and proceed. Cancelling will disconnect you
-      </Text>
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
-        <Button variant="shade" onPress={onCancel} style={styles.button} loading={isDisconnecting}>
-          Cancel
-        </Button>
-        <Button
-          variant="fill"
-          loading={isSigning}
-          disabled={isDisconnecting}
-          onPress={onSign}
-          style={styles.button}
-        >
-          Sign
-        </Button>
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView padding={['0', 's', 's', 's']}>
+        <DoubleImageLoader
+          style={styles.logoContainer}
+          leftImage={dappIcon}
+          rightImage={walletIcon}
+          renderRightPlaceholder={() => (
+            <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
+          )}
+          rightItemStyle={!walletIcon && styles.walletAvatar}
+        />
+        <Text center variant="medium-600" color="fg-100" style={styles.title}>
+          {dappName} needs to connect to your wallet
+        </Text>
+        <Text center variant="small-400" color="fg-200" style={styles.subtitle}>
+          Sign this message to prove you own this wallet and proceed. Cancelling will disconnect you
+        </Text>
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
+          <Button
+            variant="shade"
+            onPress={onCancel}
+            style={styles.button}
+            loading={isDisconnecting}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="fill"
+            loading={isSigning}
+            disabled={isDisconnecting}
+            onPress={onSign}
+            style={styles.button}
+          >
+            Sign
+          </Button>
+        </FlexView>
       </FlexView>
-    </FlexView>
+    </ScrollView>
   );
 }

package/src/views/w3m-connecting-siwe-view/styles.ts

@@ -16,13 +16,6 @@ export default StyleSheet.create({
     marginHorizontal: '10%',
     marginVertical: Spacing.l
   },
-  closeButton: {
-    alignSelf: 'flex-end',
-    right: Spacing.xl,
-    top: Spacing.l,
-    position: 'absolute',
-    zIndex: 2
-  },
   walletAvatar: {
     borderRadius: BorderRadius.full
   }

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

@@ -7,15 +7,22 @@ import {
   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 { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function ConnectingSocialView() {
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { connect } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
   const { wcUri } = useSnapshot(WcController.state);
@@ -52,7 +59,7 @@ export function ConnectingSocialView() {
   }, [wcUri]);
 
   const initializeConnection = useCallback(async () => {
-    const connectPromise = connect('walletconnect');
+    const connectPromise = connect();
     WcController.setWcPromise(connectPromise);
   }, [connect]);
 
@@ -68,32 +75,29 @@ export function ConnectingSocialView() {
   }, [wcUri, onConnect]);
 
   return (
-    <FlexView
-      alignItems="center"
-      alignSelf="center"
-      padding={['2xl', 'l', '3xl', 'l']}
-      style={{ width }}
-    >
-      <LoadingThumbnail paused={!!error}>
-        <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
-        {error ? (
-          <IconBox
-            icon={'close'}
-            border
-            background
-            backgroundColor="icon-box-bg-error-100"
-            size="sm"
-            iconColor="error-100"
-            style={styles.errorIcon}
-          />
-        ) : null}
-      </LoadingThumbnail>
-      <Text style={styles.continueText} variant="paragraph-500">
-        Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}
-      </Text>
-      <Text variant="small-400" color="fg-200">
-        Continue in your browser
-      </Text>
-    </FlexView>
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', 'xl', 'l']}>
+        <LoadingThumbnail paused={!!error}>
+          <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
+          {error ? (
+            <IconBox
+              icon={'close'}
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          ) : null}
+        </LoadingThumbnail>
+        <Text style={styles.continueText} variant="paragraph-500">
+          Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}
+        </Text>
+        <Text variant="small-400" color="fg-200">
+          Continue in your browser
+        </Text>
+      </FlexView>
+    </ScrollView>
   );
 }

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

@@ -15,7 +15,6 @@ 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() {
@@ -46,8 +45,8 @@ export function ConnectingView() {
       if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
         WcController.setWcError(false);
 
-        const connectPromise = connect('walletconnect', {
-          universalLink: routeData?.wallet?.link_mode ?? undefined
+        const connectPromise = connect({
+          wallet: routeData?.wallet
         });
         WcController.setWcPromise(connectPromise);
       }
@@ -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,11 +1,12 @@
 import { Linking, Platform, ScrollView } from 'react-native';
-import { FlexView, ListWallet } from '@reown/appkit-ui-react-native';
-import { ApiController, AssetUtil } from '@reown/appkit-core-react-native';
+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 { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
+import { useSnapshot } from 'valtio';
 
 export function GetWalletView() {
+  const { walletImages } = useSnapshot(AssetController.state);
   const { padding } = useCustomDimensions();
   const imageHeaders = ApiController._getApiHeaders();
 
@@ -22,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}
@@ -37,7 +38,7 @@ export function GetWalletView() {
       fadingEdgeLength={20}
       testID="get-a-wallet-view"
     >
-      <FlexView padding={['s', 's', '3xl', 's']}>
+      <FlexView padding="s">
         {listTemplate()}
         <ListWallet
           name="Explore all"