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

package/src/utils/HelpersUtil.ts

@@ -3,6 +3,9 @@ import {
   type AppKitNetwork,
   type CaipNetworkId,
   type ChainNamespace,
+  ConstantsUtil,
+  type UniversalProviderConfigOverride,
+  type WcWallet,
   solana,
   solanaDevnet
 } from '@reown/appkit-common-react-native';
@@ -64,7 +67,7 @@ export const WcHelpersUtil = {
 
   applyNamespaceOverrides(
     baseNamespaces: NamespaceConfig,
-    overrides?: any //TODO: add OptionsControllerState['universalProviderConfigOverride']
+    overrides?: UniversalProviderConfigOverride
   ): NamespaceConfig {
     if (!overrides) {
       return { ...baseNamespaces };
@@ -160,7 +163,7 @@ export const WcHelpersUtil = {
 
   createNamespaces(
     caipNetworks: AppKitNetwork[],
-    configOverride?: any //TODO: fix this
+    configOverride?: UniversalProviderConfigOverride
   ): NamespaceConfig {
     const defaultNamespaces = caipNetworks.reduce<NamespaceConfig>((acc, chain) => {
       const { id, rpcUrls } = chain;
@@ -199,6 +202,34 @@ export const WcHelpersUtil = {
     }, {});
 
     return this.applyNamespaceOverrides(defaultNamespaces, configOverride);
+  },
+
+  isExternalWallet(wallet?: WcWallet) {
+    if (!wallet) {
+      return false;
+    }
+
+    return (
+      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id
+    );
+  },
+
+  getConnectorTypeByWallet(wallet?: WcWallet) {
+    if (!wallet) {
+      return 'walletconnect';
+    }
+
+    if (wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id) {
+      return 'phantom';
+    } else if (wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id) {
+      return 'coinbase';
+    } else if (wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id) {
+      return 'solflare';
+    } else {
+      return 'walletconnect';
+    }
   }
 };
 

package/src/utils/NetworkUtil.ts

@@ -1,10 +1,10 @@
 import {
   type AppKitNetwork,
   type CaipNetworkId,
+  type CaipNamespaces,
   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 {
@@ -42,17 +42,17 @@ export const NetworkUtil = {
     return url.toString();
   },
 
-  getDefaultChainId(
+  getDefaultNetwork(
     namespaces: CaipNamespaces,
     defaultNetwork?: AppKitNetwork
-  ): CaipNetworkId | undefined {
+  ): AppKitNetwork | 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 defaultNetwork;
     }
 
     return undefined;

package/src/utils/RouterUtil.ts

@@ -0,0 +1,50 @@
+import {
+  EventsController,
+  OnRampController,
+  RouterController,
+  SendController,
+  SwapController
+} from '@reown/appkit-core-react-native';
+
+export const RouterUtil = {
+  checkBack() {
+    this.checkSwapBack();
+    this.checkSendBack();
+    this.checkOnRampBack();
+    this.checkSocialLoginBack();
+    this.checkOnRampBackLoading();
+  },
+  checkOnRampBackLoading() {
+    if (
+      RouterController.state.view === 'OnRampLoading' &&
+      EventsController.state.data.event === 'BUY_SUBMITTED'
+    ) {
+      // Send event only if the onramp url was already created
+      EventsController.sendEvent({ type: 'track', event: 'BUY_CANCEL' });
+    }
+  },
+  checkSocialLoginBack() {
+    if (RouterController.state.view === 'ConnectingSocial') {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_CANCELED',
+        properties: { provider: RouterController.state.data?.socialProvider! }
+      });
+    }
+  },
+  checkSwapBack() {
+    if (RouterController.state.view === 'Swap') {
+      SwapController.clearTokens();
+    }
+  },
+  checkSendBack() {
+    if (RouterController.state.view === 'WalletSend') {
+      SendController.resetState();
+    }
+  },
+  checkOnRampBack() {
+    if (RouterController.state.view === 'OnRamp') {
+      OnRampController.resetState();
+    }
+  }
+};

package/src/utils/UiUtil.ts

@@ -1,38 +1,26 @@
-import {
-  AssetUtil,
-  ConnectionController,
-  StorageUtil,
-  type WcWallet
-} from '@reown/appkit-core-react-native';
-import type { WalletDeepLink } from '@reown/appkit-common-react-native';
+import { RouterController } from '@reown/appkit-core-react-native';
+
+// Global animation instance to coordinate transitions
+let currentRouteTransition: ((direction: 'forward' | 'backward' | 'none') => Promise<void>) | null =
+  null;
 
 export const UiUtil = {
   TOTAL_VISIBLE_WALLETS: 4,
 
-  createViewTransition: () => {
-    //TODO: replace this with reanimated
-    // LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
-  },
-
-  animateChange: () => {
-    //TODO: replace this with reanimated
-    // LayoutAnimation.configureNext(LayoutAnimation.create(150, type, creationProp));
-  },
-
-  storeConnectedWallet: async (wcLinking: WalletDeepLink, pressedWallet?: WcWallet) => {
-    StorageUtil.setWalletConnectDeepLink(wcLinking);
-
-    if (pressedWallet) {
-      UiUtil.storeRecentWallet(pressedWallet);
-      const url = AssetUtil.getWalletImage(pressedWallet);
-      ConnectionController.setConnectedWalletImageUrl(url);
-    }
+  setRouteTransition: (
+    transitionFn: (direction: 'forward' | 'backward' | 'none') => Promise<void>
+  ) => {
+    currentRouteTransition = transitionFn;
   },
 
-  storeRecentWallet: async (wallet: WcWallet) => {
-    const recentWallets = await StorageUtil.addRecentWallet(wallet);
-    if (recentWallets) {
-      ConnectionController.setRecentWallets(recentWallets);
+  createViewTransition: async () => {
+    if (currentRouteTransition) {
+      const { navigationDirection } = RouterController.state;
+      await currentRouteTransition(navigationDirection);
+      // After the transition completes, ensure direction is reset to 'none'
+      if (RouterController.state.navigationDirection !== 'none') {
+        RouterController.state.navigationDirection = 'none';
+      }
     }
   }
 };

package/src/views/w3m-account-default-view/components/auth-buttons.tsx

@@ -21,7 +21,7 @@ export function AuthButtons({
   return (
     <>
       <UpgradeWalletButton onPress={onUpgradePress} style={styles.upgradeButton} />
-      {socialProvider && (
+      {socialProvider ? (
         <ListSocial
           logo={socialProvider}
           logoHeight={32}
@@ -34,7 +34,7 @@ export function AuthButtons({
             {text}
           </Text>
         </ListSocial>
-      )}
+      ) : null}
     </>
   );
 }

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

@@ -13,7 +13,8 @@ import {
   SwapController,
   OnRampController,
   ConnectionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 // import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
@@ -24,17 +25,17 @@ import {
   Text,
   UiUtil,
   Spacing,
-  ListItem
+  ListItem,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { AuthButtons } from './components/auth-buttons';
 import styles from './styles';
 
 export function AccountDefaultView() {
-  const { switchAccountType, disconnect } = useAppKit();
+  const { switchAccountType, disconnect } = useInternalAppKit();
   const { loading } = useSnapshot(ModalController.state);
   const {
     activeAddress: address,
@@ -50,7 +51,7 @@ export function AccountDefaultView() {
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showCopy = OptionsController.isClipboardAvailable();
   const isAuth = !!connection?.properties?.provider;
   const showBalance = balance && !isAuth;
@@ -182,9 +183,9 @@ export function AccountDefaultView() {
 
   return (
     <>
-      {showBack && (
+      {showBack ? (
         <IconLink icon="chevronLeft" style={styles.backIcon} onPress={RouterController.goBack} />
-      )}
+      ) : null}
       <IconLink
         icon="close"
         style={styles.closeIcon}
@@ -210,7 +211,7 @@ export function AccountDefaultView() {
                     truncate: 'middle'
                   })}
             </Text>
-            {showCopy && (
+            {showCopy ? (
               <IconLink
                 icon="copy"
                 size="md"
@@ -218,14 +219,14 @@ export function AccountDefaultView() {
                 onPress={onCopyAddress}
                 style={styles.copyButton}
               />
-            )}
+            ) : null}
           </FlexView>
-          {showBalance && (
+          {showBalance ? (
             <Text variant="paragraph-400" color="fg-200">
               {CoreHelperUtil.formatBalance(balance.amount, balance.symbol, 6)}
             </Text>
-          )}
-          {showExplorer && (
+          ) : null}
+          {showExplorer ? (
             <Button
               size="sm"
               variant="shade"
@@ -236,9 +237,9 @@ export function AccountDefaultView() {
             >
               Block Explorer
             </Button>
-          )}
+          ) : null}
           <FlexView margin={['s', '0', '0', '0']}>
-            {isAuth && (
+            {isAuth ? (
               <AuthButtons
                 onUpgradePress={onUpgradePress}
                 socialProvider={connection?.properties?.provider}
@@ -251,7 +252,7 @@ export function AccountDefaultView() {
                   truncate: 'end'
                 })}
               />
-            )}
+            ) : null}
             <ListItem
               chevron
               icon="networkPlaceholder"
@@ -267,7 +268,7 @@ export function AccountDefaultView() {
                 {activeNetwork?.name}
               </Text>
             </ListItem>
-            {showBuy && (
+            {showBuy ? (
               <ListItem
                 chevron
                 icon="card"
@@ -279,8 +280,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Buy crypto</Text>
               </ListItem>
-            )}
-            {showSend && (
+            ) : null}
+            {showSend ? (
               <ListItem
                 chevron
                 icon="paperplane"
@@ -292,8 +293,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Send</Text>
               </ListItem>
-            )}
-            {showSwaps && (
+            ) : null}
+            {showSwaps ? (
               <ListItem
                 chevron
                 icon="recycleHorizontal"
@@ -305,8 +306,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Swap</Text>
               </ListItem>
-            )}
-            {showActivity && (
+            ) : null}
+            {showActivity ? (
               <ListItem
                 chevron
                 icon="clock"
@@ -318,8 +319,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Activity</Text>
               </ListItem>
-            )}
-            {showSwitchAccountType && (
+            ) : null}
+            {showSwitchAccountType ? (
               <ListItem
                 chevron
                 icon="swapHorizontal"
@@ -334,7 +335,7 @@ export function AccountDefaultView() {
                   accountType === 'eoa' ? 'smart account' : 'EOA'
                 }`}</Text>
               </ListItem>
-            )}
+            ) : null}
             <ListItem
               icon="disconnect"
               onPress={onDisconnect}

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { ScrollView } from 'react-native';
 import {
   AccountPill,
@@ -7,11 +7,13 @@ import {
   Icon,
   IconLink,
   NetworkButton,
-  useTheme
+  useTheme,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController,
   CoreHelperUtil,
   EventsController,
@@ -20,18 +22,16 @@ import {
   SendController
 } from '@reown/appkit-core-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { AccountWalletFeatures } from '../../partials/w3m-account-wallet-features';
 import styles from './styles';
 
 export function AccountView() {
   const Theme = useTheme();
-  const [isLoading, setIsLoading] = useState(false);
   const { padding } = useCustomDimensions();
   const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const onProfilePress = () => {
     RouterController.push('AccountDefault');
@@ -46,22 +46,7 @@ export function AccountView() {
   };
 
   useEffect(() => {
-    async function fetchBalance() {
-      setIsLoading(true);
-      await ConnectionsController.fetchBalance();
-      setIsLoading(false);
-    }
-
-    fetchBalance();
     SendController.resetState();
-
-    const balanceInterval = setInterval(() => {
-      fetchBalance();
-    }, 10000);
-
-    return () => {
-      clearInterval(balanceInterval);
-    };
   }, []);
 
   return (
@@ -92,7 +77,7 @@ export function AccountView() {
           onPress={onProfilePress}
           style={styles.accountPill}
         />
-        <AccountWalletFeatures isBalanceLoading={isLoading} />
+        <AccountWalletFeatures />
       </FlexView>
     </ScrollView>
   );

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

@@ -1,33 +1,40 @@
 import { useState } from 'react';
+import { WcController, EventsController, RouterController } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import {
-  ConnectionController,
-  EventsController,
-  RouterController,
-  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';
+  FlexView,
+  IconLink,
+  SearchBar,
+  Spacing,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 
 import styles from './styles';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { AllWalletsList } from '../../partials/w3m-all-wallets-list';
 import { AllWalletsSearch } from '../../partials/w3m-all-wallets-search';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
+import type { LayoutChangeEvent } from 'react-native';
 
 export function AllWalletsView() {
   const Theme = useTheme();
   const [searchQuery, setSearchQuery] = useState<string>('');
   const { maxWidth } = useCustomDimensions();
+  const [headerHeight, setHeaderHeight] = useState<number>(0);
   const numColumns = 4;
-  const usableWidth = maxWidth - Spacing.xs * 2;
+  const usableWidth = maxWidth - Spacing['s'] * 2;
   const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
 
   const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
 
+  const onHeaderLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setHeaderHeight(height);
+  };
+
   const onWalletPress = (wallet: WcWallet) => {
-    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 {
@@ -42,8 +49,8 @@ export function AllWalletsView() {
   };
 
   const onQrCodePress = () => {
-    ConnectionController.removePressedWallet();
-    ConnectionController.removeWcLinking();
+    WcController.removePressedWallet();
+    WcController.removeWcLinking();
     RouterController.push('ConnectingWalletConnect');
 
     EventsController.sendEvent({
@@ -58,6 +65,7 @@ export function AllWalletsView() {
       <FlexView
         padding={['s', 'l', 'xs', 'l']}
         flexDirection="row"
+        onLayout={onHeaderLayout}
         alignItems="center"
         style={[
           styles.header,
@@ -91,12 +99,18 @@ export function AllWalletsView() {
           itemWidth={itemWidth}
           searchQuery={searchQuery}
           onItemPress={onWalletPress}
+          headerHeight={headerHeight}
         />
       );
     }
 
     return (
-      <AllWalletsList columns={numColumns} itemWidth={itemWidth} onItemPress={onWalletPress} />
+      <AllWalletsList
+        columns={numColumns}
+        itemWidth={itemWidth}
+        onItemPress={onWalletPress}
+        headerHeight={headerHeight}
+      />
     );
   };
 

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

@@ -6,9 +6,8 @@ import {
   OptionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
-import { FlexView, ListSocial, Text } from '@reown/appkit-ui-react-native';
+import { FlexView, ListSocial, Text, useCustomDimensions } from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function ConnectSocialsView() {

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

@@ -2,11 +2,12 @@ import { type StyleProp, type ViewStyle } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
-  ConnectionController,
-  type ConnectionControllerState,
-  type WcWallet
+  WcController,
+  type WcControllerState
 } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import { ListItemLoader, ListWallet } from '@reown/appkit-ui-react-native';
 import { UiUtil } from '../../../utils/UiUtil';
 import { filterOutRecentWallets } from '../utils';
@@ -18,7 +19,8 @@ interface Props {
 
 export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
+  const { walletImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
@@ -47,7 +49,7 @@ export function AllWalletList({ itemStyle, onWalletPress }: Props) {
     list.map(wallet => (
       <ListWallet
         key={wallet?.id}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
+        imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
         imageHeaders={imageHeaders}
         name={wallet?.name ?? 'Unknown'}
         onPress={() => onWalletPress(wallet)}

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

@@ -2,13 +2,14 @@ import { useSnapshot } from 'valtio';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {
   OptionsController,
-  type CustomWallet,
   type OptionsControllerState,
   ApiController,
-  ConnectionController,
-  type ConnectionControllerState,
-  AssetUtil
+  WcController,
+  type WcControllerState,
+  AssetUtil,
+  AssetController
 } from '@reown/appkit-core-react-native';
+import { type CustomWallet } from '@reown/appkit-common-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import { filterOutRecentWallets } from '../utils';
 
@@ -19,8 +20,9 @@ interface Props {
 
 export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed } = useSnapshot(ApiController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
-  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
@@ -28,12 +30,18 @@ export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
     return null;
   }
 
-  const list = filterOutRecentWallets(recentWallets, customWallets, RECENT_COUNT);
+  let list = filterOutRecentWallets(recentWallets, customWallets, RECENT_COUNT);
+
+  // Filter out custom wallets that are already installed
+  list = list.filter(
+    wallet =>
+      !ApiController.state.installed.find(installedWallet => installedWallet.id === wallet.id)
+  );
 
   return list.map(wallet => (
     <ListWallet
       key={wallet.id}
-      imageSrc={AssetUtil.getWalletImage(wallet)}
+      imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
       imageHeaders={imageHeaders}
       name={wallet.name}
       onPress={() => onWalletPress(wallet)}

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

@@ -1,10 +1,11 @@
 import { useSnapshot } from 'valtio';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
-  type WcWallet,
-  ConnectionController
+  WcController
 } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
@@ -15,7 +16,8 @@ interface Props {
 
 export function RecentWalletList({ itemStyle, onWalletPress }: Props) {
   const installed = ApiController.state.installed;
-  const { recentWallets } = useSnapshot(ConnectionController.state);
+  const { recentWallets } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
@@ -29,7 +31,7 @@ export function RecentWalletList({ itemStyle, onWalletPress }: Props) {
     return (
       <ListWallet
         key={wallet?.id}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
+        imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
         imageHeaders={imageHeaders}
         name={wallet?.name ?? 'Unknown'}
         onPress={() => onWalletPress(wallet, isInstalled)}