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

package/src/partials/w3m-swap-input/index.tsx

@@ -21,6 +21,7 @@ export interface SwapInputProps {
   gasPrice?: number;
   style?: StyleProp<ViewStyle>;
   loading?: boolean;
+  loadingValues?: boolean;
   onTokenPress?: () => void;
   onMaxPress?: () => void;
   onChange?: (value: string) => void;
@@ -37,6 +38,7 @@ export function SwapInput({
   value,
   style,
   loading,
+  loadingValues,
   onTokenPress,
   onMaxPress,
   onChange,
@@ -48,11 +50,11 @@ export function SwapInput({
   const valueInputRef = useRef<TextInput | null>(null);
   const isMarketValueGreaterThanZero =
     !!marketValue && NumberUtil.bigNumber(marketValue).isGreaterThan('0');
-  const maxAmount = UiUtil.formatNumberToLocalString(token?.quantity.numeric, 3);
-  const maxError = Number(value) > Number(token?.quantity.numeric);
+  const maxAmount = UiUtil.formatNumberToLocalString(token?.quantity?.numeric, 3);
+  const maxError = Number(value) > Number(token?.quantity?.numeric);
   const showMax =
     onMaxPress &&
-    !!token?.quantity.numeric &&
+    !!token?.quantity?.numeric &&
     NumberUtil.multiply(token?.quantity.numeric, token?.price).isGreaterThan(
       MINIMUM_USD_VALUE_TO_CONVERT
     );
@@ -85,33 +87,40 @@ export function SwapInput({
     >
       {loading ? (
         <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
-          <Shimmer height={36} width={80} borderRadius={12} />
+          <FlexView alignItems="flex-start">
+            <Shimmer height={36} width={80} borderRadius={12} style={styles.valueLoader} />
+            <Shimmer height={20} width={120} borderRadius={8} />
+          </FlexView>
           <Shimmer height={36} width={80} borderRadius={18} />
         </FlexView>
       ) : (
         <>
           <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
-            <TextInput
-              ref={valueInputRef}
-              placeholder="0"
-              placeholderTextColor={Theme['fg-275']}
-              returnKeyType="done"
-              style={[styles.input, { color: Theme['fg-100'] }]}
-              autoCapitalize="none"
-              autoCorrect={false}
-              value={value}
-              onChangeText={handleInputChange}
-              keyboardType="decimal-pad"
-              inputMode="decimal"
-              autoComplete="off"
-              spellCheck={false}
-              selectionColor={Theme['accent-100']}
-              underlineColorAndroid="transparent"
-              selectTextOnFocus={false}
-              numberOfLines={1}
-              editable={editable}
-              autoFocus={autoFocus}
-            />
+            {loadingValues ? (
+              <Shimmer height={36} width={80} borderRadius={12} style={styles.valueLoader} />
+            ) : (
+              <TextInput
+                ref={valueInputRef}
+                placeholder="0"
+                placeholderTextColor={Theme['fg-275']}
+                returnKeyType="done"
+                style={[styles.input, { color: Theme['fg-100'] }]}
+                autoCapitalize="none"
+                autoCorrect={false}
+                value={value}
+                onChangeText={handleInputChange}
+                keyboardType="decimal-pad"
+                inputMode="decimal"
+                autoComplete="off"
+                spellCheck={false}
+                selectionColor={Theme['accent-100']}
+                underlineColorAndroid="transparent"
+                selectTextOnFocus={false}
+                numberOfLines={1}
+                editable={editable}
+                autoFocus={autoFocus}
+              />
+            )}
             <TokenButton
               text={token?.symbol}
               imageUrl={token?.logoUri}
@@ -119,7 +128,9 @@ export function SwapInput({
               chevron
             />
           </FlexView>
-          {(showMax || isMarketValueGreaterThanZero) && (
+          {loadingValues ? (
+            <Shimmer height={20} width={120} borderRadius={8} />
+          ) : showMax || isMarketValueGreaterThanZero ? (
             <FlexView
               flexDirection="row"
               alignItems="center"
@@ -128,7 +139,7 @@ export function SwapInput({
             >
               <Text variant="small-400" color="fg-200" numberOfLines={1}>
                 {isMarketValueGreaterThanZero
-                  ? `~$${UiUtil.formatNumberToLocalString(marketValue, 2)}`
+                  ? `~$${UiUtil.formatNumberToLocalString(marketValue, 6)}`
                   : ''}
               </Text>
               {showMax && (
@@ -144,7 +155,7 @@ export function SwapInput({
                 </FlexView>
               )}
             </FlexView>
-          )}
+          ) : null}
         </>
       )}
     </FlexView>

package/src/partials/w3m-swap-input/styles.ts

@@ -16,5 +16,8 @@ export default StyleSheet.create({
   sendValue: {
     flex: 1,
     marginRight: Spacing.xs
+  },
+  valueLoader: {
+    marginBottom: Spacing.xs
   }
 });

package/src/utils/HelpersUtil.ts

@@ -1,14 +1,11 @@
 import type { Namespace, NamespaceConfig } from '@walletconnect/universal-provider';
-
-import type {
-  AppKitNetwork,
-  CaipNetworkId,
-  ChainNamespace
+import {
+  type AppKitNetwork,
+  type CaipNetworkId,
+  type ChainNamespace,
+  solana,
+  solanaDevnet
 } from '@reown/appkit-common-react-native';
-import { solana, solanaDevnet } from '../networks/solana';
-// import { EnsController, type OptionsControllerState } from '@reown/appkit-controllers'
-
-// import { solana, solanaDevnet } from '../networks/index.js'
 
 export const DEFAULT_METHODS = {
   solana: [

package/src/utils/NetworkUtil.ts

@@ -1,5 +1,10 @@
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import type { AppKitNetwork, CaipNetworkId, Network } from '@reown/appkit-common-react-native';
+import {
+  type AppKitNetwork,
+  type CaipNetworkId,
+  ConstantsUtil,
+  type Network
+} from '@reown/appkit-common-react-native';
+import type { CaipNamespaces } from '@reown/appkit-core-react-native';
 
 export const NetworkUtil = {
   formatNetwork(network: Network, projectId: string): AppKitNetwork {
@@ -37,17 +42,19 @@ export const NetworkUtil = {
     return url.toString();
   },
 
-  getDefaultChainId(network?: AppKitNetwork): CaipNetworkId | undefined {
-    if (!network) return undefined;
-
-    if (network.caipNetworkId) {
-      return network.caipNetworkId;
-    }
-
-    if (network.chainNamespace) {
-      return `${network.chainNamespace}:${network.id}`;
+  getDefaultChainId(
+    namespaces: CaipNamespaces,
+    defaultNetwork?: AppKitNetwork
+  ): CaipNetworkId | undefined {
+    if (!defaultNetwork) return undefined;
+
+    const isValidDefaultNetwork = Object.values(namespaces).some(
+      namespace => namespace?.chains?.some(chain => chain === defaultNetwork.caipNetworkId)
+    );
+    if (isValidDefaultNetwork) {
+      return defaultNetwork.caipNetworkId;
     }
 
-    return `eip155:${network.id}`;
+    return undefined;
   }
 };

package/src/utils/UiUtil.ts

@@ -4,39 +4,35 @@ import {
   StorageUtil,
   type WcWallet
 } from '@reown/appkit-core-react-native';
-import {
-  LayoutAnimation,
-  type LayoutAnimationProperty,
-  type LayoutAnimationType
-} from 'react-native';
+import type { WalletDeepLink } from '@reown/appkit-common-react-native';
 
 export const UiUtil = {
   TOTAL_VISIBLE_WALLETS: 4,
 
   createViewTransition: () => {
-    LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
+    //TODO: replace this with reanimated
+    // LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
   },
 
-  animateChange: (
-    type: LayoutAnimationType = 'linear',
-    creationProp: LayoutAnimationProperty = 'scaleX'
-  ) => {
-    LayoutAnimation.configureNext(LayoutAnimation.create(150, type, creationProp));
+  animateChange: () => {
+    //TODO: replace this with reanimated
+    // LayoutAnimation.configureNext(LayoutAnimation.create(150, type, creationProp));
   },
 
-  storeConnectedWallet: async (
-    wcLinking: { name: string; href: string },
-    pressedWallet?: WcWallet
-  ) => {
+  storeConnectedWallet: async (wcLinking: WalletDeepLink, pressedWallet?: WcWallet) => {
     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-account-default-view/components/auth-buttons.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { UpgradeWalletButton } from './upgrade-wallet-button';
-import { ListItem, ListSocial, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { ListSocial, Spacing, Text } from '@reown/appkit-ui-react-native';
 import type { SocialProvider } from '@reown/appkit-common-react-native';
 
 export interface AuthButtonsProps {
@@ -21,30 +21,19 @@ export function AuthButtons({
   return (
     <>
       <UpgradeWalletButton onPress={onUpgradePress} style={styles.upgradeButton} />
-      {socialProvider ? (
+      {socialProvider && (
         <ListSocial
           logo={socialProvider}
           logoHeight={32}
           logoWidth={32}
           style={[styles.socialContainer, style]}
+          onPress={onPress}
+          chevron={socialProvider === 'email'}
         >
           <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail" style={styles.socialText}>
             {text}
           </Text>
         </ListSocial>
-      ) : (
-        <ListItem
-          icon="mail"
-          onPress={onPress}
-          chevron
-          testID="button-email"
-          iconColor="fg-100"
-          style={style}
-        >
-          <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail">
-            {text}
-          </Text>
-        </ListItem>
       )}
     </>
   );

package/src/views/w3m-account-default-view/index.tsx

@@ -2,24 +2,20 @@ import { useSnapshot } from 'valtio';
 import { useState } from 'react';
 import { Linking, ScrollView } from 'react-native';
 import {
-  AccountController,
   ApiController,
-  AssetUtil,
-  ConnectionController,
-  ConnectorController,
   CoreHelperUtil,
   EventsController,
   ModalController,
-  NetworkController,
   OptionsController,
   RouterController,
   SnackController,
-  type AppKitFrameProvider,
   ConstantsUtil,
   SwapController,
   OnRampController,
-  ConnectionsController
+  ConnectionsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
+// import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
   Avatar,
   Button,
@@ -38,30 +34,49 @@ import { AuthButtons } from './components/auth-buttons';
 import styles from './styles';
 
 export function AccountDefaultView() {
-  const { profileName, profileImage, preferredAccountType } = useSnapshot(AccountController.state);
+  const { switchAccountType, disconnect } = useAppKit();
   const { loading } = useSnapshot(ModalController.state);
   const {
     activeAddress: address,
     activeBalance: balance,
     activeNetwork,
-    activeNamespace
+    activeNamespace,
+    connection,
+    accountType,
+    identity
   } = useSnapshot(ConnectionsController.state);
   const account = address?.split(':')[2];
   const [disconnecting, setDisconnecting] = useState(false);
-  const { connectedConnector } = useSnapshot(ConnectorController.state);
-  const { connectedSocialProvider } = useSnapshot(ConnectionController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const showCopy = OptionsController.isClipboardAvailable();
-  const isAuth = connectedConnector === 'AUTH';
+  const isAuth = !!connection?.properties?.provider;
   const showBalance = balance && !isAuth;
   const showExplorer = Object.keys(activeNetwork?.blockExplorers ?? {}).length > 0 && !isAuth;
   const showBack = history.length > 1;
-  const showSwitchAccountType = isAuth && NetworkController.checkIfSmartAccountEnabled();
-  const showActivity = !isAuth && activeNamespace && ['eip155', 'solana'].includes(activeNamespace);
+  const showSwitchAccountType = isAuth && activeNamespace === 'eip155';
+  const showActivity =
+    !isAuth &&
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
+  const showSwaps =
+    !isAuth &&
+    features?.swaps &&
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
+
+  const showSend =
+    !isAuth && activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
+  const showBuy =
+    !isAuth &&
+    isOnRampEnabled &&
+    activeNamespace &&
+    ConstantsUtil.ONRAMP_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
   const { padding } = useCustomDimensions();
-  const { disconnect } = useAppKit();
 
   async function onDisconnect() {
     setDisconnecting(true);
@@ -71,41 +86,17 @@ export function AccountDefaultView() {
 
   const onSwitchAccountType = async () => {
     try {
-      if (isAuth) {
-        ModalController.setLoading(true);
-        const accountType =
-          AccountController.state.preferredAccountType === 'eoa' ? 'smartAccount' : 'eoa';
-        const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-        await provider?.setPreferredAccount(accountType);
-        EventsController.sendEvent({
-          type: 'track',
-          event: 'SET_PREFERRED_ACCOUNT_TYPE',
-          properties: {
-            accountType,
-            network: NetworkController.state.caipNetwork?.id || ''
-          }
-        });
+      const namespace = ConnectionsController.state.activeNamespace;
+      const network = ConnectionsController.state.activeNetwork;
+      if (isAuth && namespace && network) {
+        const newType = ConnectionsController.state.accountType === 'eoa' ? 'smartAccount' : 'eoa';
+        switchAccountType(namespace, newType, network);
       }
     } catch (error) {
-      ModalController.setLoading(false);
       SnackController.showError('Error switching account type');
     }
   };
 
-  const getUserEmail = () => {
-    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-    if (!provider) return '';
-
-    return provider.getEmail();
-  };
-
-  const getUsername = () => {
-    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-    if (!provider) return '';
-
-    return provider.getUsername();
-  };
-
   const onExplorerPress = () => {
     if (showExplorer && ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url) {
       Linking.openURL(ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url);
@@ -113,9 +104,8 @@ export function AccountDefaultView() {
   };
 
   const onCopyAddress = () => {
-    //TODO: Check ENS name
     if (OptionsController.isClipboardAvailable() && ConnectionsController.state.activeAddress) {
-      const _address = ConnectionsController.state.activeAddress.split(':')[2];
+      const _address = CoreHelperUtil.getPlainAddress(ConnectionsController.state.activeAddress);
       if (_address) {
         OptionsController.copyToClipboard(_address);
         SnackController.showSuccess('Address copied');
@@ -124,23 +114,16 @@ export function AccountDefaultView() {
   };
 
   const onSwapPress = () => {
-    if (
-      NetworkController.state.caipNetwork?.id &&
-      !ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(`${NetworkController.state.caipNetwork.id}`)
-    ) {
-      RouterController.push('UnsupportedChain');
-    } else {
-      SwapController.resetState();
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'OPEN_SWAP',
-        properties: {
-          network: NetworkController.state.caipNetwork?.id || '',
-          isSmartAccount: false
-        }
-      });
-      RouterController.push('Swap');
-    }
+    SwapController.clearTokens();
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SWAP',
+      properties: {
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        isSmartAccount: false
+      }
+    });
+    RouterController.push('Swap');
   };
 
   const onBuyPress = () => {
@@ -171,9 +154,30 @@ export function AccountDefaultView() {
     RouterController.push('UpgradeEmailWallet');
   };
 
-  const onEmailPress = () => {
-    if (ConnectionController.state.connectedSocialProvider) return;
-    RouterController.push('UpdateEmailWallet', { email: getUserEmail() });
+  const onSendPress = () => {
+    const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+    const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SEND',
+      properties: { network, isSmartAccount }
+    });
+    RouterController.push('WalletSend');
+  };
+
+  const onEmailPress = async () => {
+    // TODO: Uncomment when email update is enabled
+    // const email = ConnectionsController.state.connection?.properties?.email;
+    // const provider = ConnectionsController.state.connection?.properties?.provider;
+    // if (provider !== 'email' || !email) return;
+    // const sessionTopic = ConnectionsController.state.connection?.properties?.sessionTopic;
+    // if (!sessionTopic) {
+    //   throw new Error('Session topic not found');
+    // }
+    // const link = `${CommonConstantsUtil.WEB_WALLET_URL}/emailUpdate/${sessionTopic}`;
+    // await CoreHelperUtil.openLink(link);
+    // Subscribe to email update event
   };
 
   return (
@@ -189,12 +193,12 @@ export function AccountDefaultView() {
       />
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
         <FlexView alignItems="center" padding={['3xl', 's', '3xl', 's']}>
-          <Avatar imageSrc={profileImage} address={account ?? ''} />
+          <Avatar imageSrc={identity?.avatar} address={account ?? ''} />
           <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
             <Text variant="medium-title-600">
-              {profileName
+              {identity?.name
                 ? UiUtil.getTruncateString({
-                    string: profileName,
+                    string: identity?.name,
                     charsStart: 20,
                     charsEnd: 0,
                     truncate: 'end'
@@ -237,11 +241,11 @@ export function AccountDefaultView() {
             {isAuth && (
               <AuthButtons
                 onUpgradePress={onUpgradePress}
-                socialProvider={connectedSocialProvider}
+                socialProvider={connection?.properties?.provider}
                 onPress={onEmailPress}
                 style={styles.actionButton}
                 text={UiUtil.getTruncateString({
-                  string: getUsername() || getUserEmail() || '',
+                  string: connection?.properties?.username || connection?.properties?.email || '',
                   charsStart: 30,
                   charsEnd: 0,
                   truncate: 'end'
@@ -263,7 +267,7 @@ export function AccountDefaultView() {
                 {activeNetwork?.name}
               </Text>
             </ListItem>
-            {!isAuth && isOnRampEnabled && (
+            {showBuy && (
               <ListItem
                 chevron
                 icon="card"
@@ -276,7 +280,20 @@ export function AccountDefaultView() {
                 <Text color="fg-100">Buy crypto</Text>
               </ListItem>
             )}
-            {!isAuth && features?.swaps && (
+            {showSend && (
+              <ListItem
+                chevron
+                icon="paperplane"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
+                onPress={onSendPress}
+                testID="button-send"
+                style={styles.actionButton}
+              >
+                <Text color="fg-100">Send</Text>
+              </ListItem>
+            )}
+            {showSwaps && (
               <ListItem
                 chevron
                 icon="recycleHorizontal"
@@ -314,7 +331,7 @@ export function AccountDefaultView() {
                 loading={loading}
               >
                 <Text color="fg-100">{`Switch to your ${
-                  preferredAccountType === 'eoa' ? 'smart account' : 'EOA'
+                  accountType === 'eoa' ? 'smart account' : 'EOA'
                 }`}</Text>
               </ListItem>
             )}