@reown/appkit-react-native 0.0.0-fix-ui-changes-20250829182619 → 0.0.0-fix-singleton-appkit-20251001153745

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

@@ -17,10 +17,8 @@ import {
   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';
@@ -35,12 +33,12 @@ export function ConnectView() {
   const showLoadingError = !showConnectWalletsButton && prefetchError;
   const showList = !showConnectWalletsButton && !showLoadingError;
 
-  const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
+  const onWalletPress = (wallet: WcWallet, displayIndex: number, isInstalled?: boolean) => {
     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);
@@ -50,7 +48,10 @@ export function ConnectView() {
       properties: {
         name: wallet.name ?? 'Unknown',
         platform,
-        explorer_id: wallet.id
+        explorerId: wallet.id,
+        walletRank: wallet.order,
+        displayIndex,
+        view: 'Connect'
       }
     });
   };
@@ -62,7 +63,7 @@ export function ConnectView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', '0', 's', '0']}>
+      <FlexView padding={['xs', '0', 'xs', '0']}>
         {isSocialEnabled ? (
           <>
             <SocialLoginList options={features?.socials} />
@@ -70,7 +71,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" />
@@ -94,9 +95,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

@@ -8,7 +8,9 @@ import {
   WcController,
   AssetUtil,
   AssetController,
-  CoreHelperUtil
+  CoreHelperUtil,
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -41,6 +43,21 @@ export function ConnectingExternalView() {
   const onStorePress = () => {
     if (storeUrl) {
       CoreHelperUtil.openLink(storeUrl);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'GET_WALLET',
+        properties: {
+          name: RouterController.state.data?.wallet?.name ?? 'Unknown',
+          link: storeUrl,
+          linkType: Platform.select({
+            ios: 'appstore',
+            android: 'playstore',
+            default: undefined
+          }),
+          explorerId: RouterController.state.data?.wallet?.id,
+          walletRank: RouterController.state.data?.wallet?.order
+        }
+      });
     }
   };
 
@@ -61,17 +78,22 @@ export function ConnectingExternalView() {
         }
         WcController.addRecentWallet(wallet);
         WcController.setPressedWallet(wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
           properties: {
             name: wallet?.name ?? 'Unknown',
             method: 'mobile',
-            explorer_id: wallet?.id
+            caipNetworkId,
+            explorerId: wallet?.id
           }
         });
       }
     } catch (error) {
+      LogController.sendError(error, 'ConnectingExternalView.tsx', 'onConnect');
       if (/(Wallet not found)/i.test((error as Error).message)) {
         setErrorType('not_installed');
       } else if (/(rejected)/i.test((error as Error).message)) {

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-social-view/index.tsx

@@ -5,7 +5,8 @@ import {
   CoreHelperUtil,
   EventsController,
   RouterController,
-  SnackController
+  SnackController,
+  LogController
 } from '@reown/appkit-core-react-native';
 import {
   FlexView,
@@ -48,6 +49,7 @@ export function ConnectingSocialView() {
         });
       }
     } catch (e) {
+      LogController.sendError(e, 'ConnectingSocialView.tsx', 'onConnect');
       EventsController.sendEvent({
         type: 'track',
         event: 'SOCIAL_LOGIN_ERROR',
@@ -76,7 +78,7 @@ export function ConnectingSocialView() {
 
   return (
     <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '2xl', 'l']}>
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', 'xl', 'l']}>
         <LoadingThumbnail paused={!!error}>
           <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
           {error ? (

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

@@ -1,5 +1,6 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
+import { type Platform } from '@reown/appkit-common-react-native';
 import {
   WcController,
   ConstantsUtil,
@@ -8,14 +9,14 @@ import {
   SnackController,
   OptionsController,
   ApiController,
-  EventsController
+  EventsController,
+  LogController
 } from '@reown/appkit-core-react-native';
 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 { type Platform } from '@reown/appkit-common-react-native';
 
 export function ConnectingView() {
   const { connect } = useInternalAppKit();
@@ -51,6 +52,7 @@ export function ConnectingView() {
         WcController.setWcPromise(connectPromise);
       }
     } catch (error) {
+      LogController.sendError(error, 'ConnectingView.tsx', 'initializeConnection');
       WcController.setWcError(true);
       WcController.clearUri();
       SnackController.showError('Declined');
@@ -79,34 +81,7 @@ export function ConnectingView() {
     setPlatform(tab);
   };
 
-  const headerTemplate = () => {
-    if (isQr) return null;
-
-    if (platforms.length > 1) {
-      return <ConnectingHeader platforms={platforms} onSelectPlatform={onSelectPlatform} />;
-    }
-
-    return null;
-  };
-
-  const platformTemplate = () => {
-    if (isQr) {
-      return <ConnectingQrCode />;
-    }
-
-    switch (platform) {
-      case 'mobile':
-        return (
-          <ConnectingMobile onRetry={onRetry} onCopyUri={onCopyUri} isInstalled={isInstalled} />
-        );
-      case 'web':
-        return <ConnectingWeb onCopyUri={onCopyUri} />;
-      default:
-        return undefined;
-    }
-  };
-
-  useEffect(() => {
+  useLayoutEffect(() => {
     const _platforms: Platform[] = [];
     if (data?.wallet?.mobile_link) {
       _platforms.push('mobile');
@@ -134,8 +109,16 @@ export function ConnectingView() {
 
   return (
     <>
-      {headerTemplate()}
-      {platformTemplate()}
+      {platforms.length > 1 ? (
+        <ConnectingHeader platforms={platforms} onSelectPlatform={onSelectPlatform} />
+      ) : null}
+      {isQr ? (
+        <ConnectingQrCode />
+      ) : platform === 'mobile' ? (
+        <ConnectingMobile onRetry={onRetry} onCopyUri={onCopyUri} isInstalled={isInstalled} />
+      ) : platform === 'web' ? (
+        <ConnectingWeb onCopyUri={onCopyUri} />
+      ) : null}
     </>
   );
 }

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

@@ -38,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"

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

@@ -1,13 +1,11 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   ApiController,
   AssetController,
-  WcController,
-  ConnectionsController,
-  RouterController,
-  RouterUtil,
-  AssetUtil
+  AssetUtil,
+  LogController,
+  RouterController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -15,118 +13,94 @@ import {
   IconBox,
   LoadingHexagon,
   NetworkImage,
-  Text
+  Text,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
-//TODO: is this used?
 export function NetworkSwitchView() {
-  const { switchNetwork } = useInternalAppKit();
+  const { switchNetwork, back } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
   const { data } = useSnapshot(RouterController.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 = AssetUtil.getNetworkImage(network, networkImages);
+  const [isError, setIsError] = useState<boolean>(false);
+  const networkImage = AssetUtil.getNetworkImage(data?.network, networkImages);
 
-  const onSwitchNetwork = async () => {
+  const onSwitchNetwork = useCallback(async () => {
     try {
-      if (network) {
-        setError(false);
-        const _network = ConnectionsController.state.networks.find(n => n.id === network.id);
-        if (!_network) return;
-        await switchNetwork(_network);
-      }
-    } catch {
-      setError(true);
+      if (!RouterController.state.data?.network) return;
+      setIsError(false);
+      await switchNetwork(RouterController.state.data.network);
+      back();
+    } catch (error) {
+      LogController.sendError(error, 'NetworkSwitchView.tsx', 'onSwitchNetwork');
+      setIsError(true);
       setShowRetry(true);
     }
-  };
+  }, [switchNetwork, back]);
 
   useEffect(() => {
     onSwitchNetwork();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    // Go back if network is already switched
-    // eslint-disable-next-line valtio/state-snapshot-rule
-    if (activeNetwork?.id === network?.id) {
-      RouterUtil.navigateAfterNetworkSwitch();
-    }
-
-    // eslint-disable-next-line valtio/state-snapshot-rule
-  }, [activeNetwork?.id, network?.id]);
-
-  const retryTemplate = () => {
-    if (!showRetry) return null;
-
-    return (
-      <Button
-        size="sm"
-        variant="accent"
-        iconLeft="refresh"
-        style={styles.retryButton}
-        iconStyle={styles.retryIcon}
-        onPress={onSwitchNetwork}
-      >
-        Try again
-      </Button>
-    );
-  };
-
-  const textTemplate = () => {
-    const walletName = wallet?.name ?? 'wallet';
-    if (error) {
-      return (
-        <>
-          <Text variant="paragraph-500" style={styles.text}>
-            Switch declined
-          </Text>
-          <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
-            Switch can be declined if chain is not supported by a wallet or previous request is
-            still active
-          </Text>
-        </>
-      );
-    }
-
-    return (
-      <>
-        <Text variant="paragraph-500" style={styles.text}>{`Approve in ${walletName}`}</Text>
-        <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
-          Accept switch request in your wallet
-        </Text>
-      </>
-    );
-  };
-
   return (
-    <FlexView alignItems="center" padding={['2xl', 's', '4xl', 's']}>
-      <LoadingHexagon paused={error}>
-        <NetworkImage
-          imageSrc={networkImage}
-          imageHeaders={ApiController._getApiHeaders()}
-          size="lg"
-        />
-        {error ? (
-          <IconBox
-            icon="close"
-            border
-            background
-            backgroundColor="icon-box-bg-error-100"
-            size="sm"
-            iconColor="error-100"
-            style={styles.errorIcon}
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView alignItems="center" padding={['xl', 's', 's', 's']}>
+        <LoadingHexagon paused={isError}>
+          <NetworkImage
+            imageSrc={networkImage}
+            imageHeaders={ApiController._getApiHeaders()}
+            size="lg"
           />
+          {isError ? (
+            <IconBox
+              icon="close"
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          ) : null}
+        </LoadingHexagon>
+        {isError ? (
+          <>
+            <Text variant="paragraph-500" style={styles.text}>
+              Switch declined
+            </Text>
+            <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+              Switch can be declined if chain is not supported by a wallet or previous request is
+              still active
+            </Text>
+          </>
+        ) : (
+          <>
+            <Text variant="paragraph-500" style={styles.text}>
+              Approve in your wallet
+            </Text>
+            <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+              Accept the switch request in your wallet
+            </Text>
+          </>
+        )}
+        {showRetry ? (
+          <Button
+            size="sm"
+            variant="accent"
+            iconLeft="refresh"
+            style={styles.retryButton}
+            iconStyle={styles.retryIcon}
+            onPress={onSwitchNetwork}
+          >
+            Try again
+          </Button>
         ) : null}
-      </LoadingHexagon>
-      {textTemplate()}
-      {retryTemplate()}
-    </FlexView>
+      </FlexView>
+    </ScrollView>
   );
 }

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

@@ -1,3 +1,4 @@
+/* eslint-disable valtio/state-snapshot-rule */
 import { ScrollView, useWindowDimensions, View } from 'react-native';
 import {
   CardSelect,
@@ -26,8 +27,8 @@ import { useSnapshot } from 'valtio';
 export function NetworksView() {
   const { height, width } = useWindowDimensions();
   const windowSize = Math.min(height, width);
-  const { networks, isConnected } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
+  const { activeNetwork, isConnected } = useSnapshot(ConnectionsController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const { padding } = useCustomDimensions();
   const numColumns = 4;
@@ -38,7 +39,8 @@ export function NetworksView() {
   );
   const { switchNetwork, back } = useInternalAppKit();
 
-  const networkList = isConnected ? ConnectionsController.getConnectedNetworks() : networks;
+  const networkList = ConnectionsController.getAvailableNetworks();
+  const connectedNetworks = ConnectionsController.getConnectedNetworks();
 
   const onHelpPress = () => {
     RouterController.push('WhatIsANetwork');
@@ -47,15 +49,24 @@ export function NetworksView() {
 
   const networksTemplate = () => {
     const onNetworkPress = async (network: AppKitNetwork) => {
-      await switchNetwork(network);
-      back();
+      if (
+        !isConnected ||
+        connectedNetworks.some(
+          connectedNetwork => connectedNetwork.caipNetworkId === network.caipNetworkId
+        )
+      ) {
+        await switchNetwork(network);
+        back();
+      } else {
+        RouterController.push('SwitchNetwork', { network });
+      }
     };
 
     return networkList.map(network => {
-      const isSelected = ConnectionsController.state.isConnected
-        ? ConnectionsController.state.activeCaipNetworkId === network.caipNetworkId
+      const isSelected = isConnected
+        ? activeNetwork?.caipNetworkId === network.caipNetworkId
         : OptionsController.state.defaultNetwork?.caipNetworkId === network.caipNetworkId;
-      // eslint-disable-next-line valtio/state-snapshot-rule
+
       const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
       return (
@@ -86,17 +97,12 @@ export function NetworksView() {
   return (
     <>
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-        <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', '4xl', 'xs']}>
+        <FlexView flexDirection="row" flexWrap="wrap" padding="xs">
           {networksTemplate()}
         </FlexView>
       </ScrollView>
       <Separator />
-      <FlexView
-        padding={['s', 's', '3xl', 's']}
-        alignItems="center"
-        alignSelf="center"
-        style={{ width }}
-      >
+      <FlexView padding="s" alignItems="center" alignSelf="center" style={{ width }}>
         <Text variant="small-400" color="fg-300" center>
           Your connected wallet may not support some of the networks available for this dApp
         </Text>

package/src/views/w3m-onramp-checkout-view/index.tsx

@@ -52,7 +52,7 @@ export function OnRampCheckoutView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }}>
-      <FlexView padding={['2xl', 'l', '4xl', 'l']}>
+      <FlexView padding={['2xl', 'l', 's', 'l']}>
         <FlexView alignItems="center">
           <Text color="fg-200">You Buy</Text>
           <FlexView flexDirection="row" alignItems="center">

package/src/views/w3m-onramp-loading-view/styles.ts

@@ -3,7 +3,7 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
   container: {
-    paddingBottom: Spacing['xl']
+    paddingBottom: Spacing['s']
   },
   backButton: {
     alignSelf: 'flex-start'

package/src/views/w3m-onramp-settings-view/components/Country.tsx

@@ -15,11 +15,12 @@ interface Props {
   item: OnRampCountry;
   selected: boolean;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 export const ITEM_HEIGHT = 60;
 
-export function Country({ onPress, item, selected, style }: Props) {
+export function Country({ onPress, item, selected, style, testID }: Props) {
   const handlePress = () => {
     onPress(item);
   };
@@ -29,6 +30,7 @@ export function Country({ onPress, item, selected, style }: Props) {
       onPress={handlePress}
       style={[styles.container, style]}
       backgroundColor="transparent"
+      testID={testID}
     >
       <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start" padding="s">
         <FlexView style={styles.imageContainer}>

package/src/views/w3m-onramp-settings-view/index.tsx

@@ -13,7 +13,9 @@ import {
   getItemHeight,
   getModalItems,
   getModalItemKey,
-  getModalSearchPlaceholder
+  getModalSearchPlaceholder,
+  getModalEmptyTitle,
+  getModalEmptyDescription
 } from './utils';
 import { styles } from './styles';
 
@@ -28,6 +30,11 @@ export function OnRampSettingsView() {
   const [modalType, setModalType] = useState<ModalType>();
   const [searchValue, setSearchValue] = useState('');
 
+  const onModalClose = () => {
+    setModalType(undefined);
+    setSearchValue('');
+  };
+
   const onCountryPress = () => {
     setModalType('country');
   };
@@ -56,6 +63,7 @@ export function OnRampSettingsView() {
           onPress={onPressModalItem}
           selected={parsedItem.countryCode === selectedCountry?.countryCode}
           style={styles.selectorItem}
+          testID={`country-item-${parsedItem.countryCode}`}
         />
       );
     }
@@ -76,7 +84,7 @@ export function OnRampSettingsView() {
 
   return (
     <>
-      <FlexView style={{ backgroundColor: Theme['bg-100'] }} padding={['s', 'm', '4xl', 'm']}>
+      <FlexView style={{ backgroundColor: Theme['bg-100'] }} padding={['s', 'm', 's', 'm']}>
         <ListItem
           onPress={onCountryPress}
           chevron
@@ -129,7 +137,7 @@ export function OnRampSettingsView() {
       </FlexView>
       <SelectorModal
         visible={!!modalType}
-        onClose={() => setModalType(undefined)}
+        onClose={onModalClose}
         items={getModalItems(modalType, searchValue, true)}
         selectedItem={modalType === 'country' ? selectedCountry : paymentCurrency}
         onSearch={setSearchValue}
@@ -138,6 +146,8 @@ export function OnRampSettingsView() {
         title={getModalTitle(modalType)}
         itemHeight={getItemHeight(modalType)}
         searchPlaceholder={getModalSearchPlaceholder(modalType)}
+        emptyTitle={getModalEmptyTitle(modalType)}
+        emptyDescription={getModalEmptyDescription(modalType)}
       />
     </>
   );

package/src/views/w3m-onramp-settings-view/utils.ts

@@ -17,6 +17,16 @@ const MODAL_SEARCH_PLACEHOLDERS: Record<ModalType, string> = {
   paymentCurrency: 'Search currency'
 };
 
+const MODAL_EMPTY_TITLES: Record<ModalType, string> = {
+  country: 'No countries found',
+  paymentCurrency: 'No currencies found'
+};
+
+const MODAL_EMPTY_DESCRIPTIONS: Record<ModalType, string> = {
+  country: 'There are no available countries',
+  paymentCurrency: 'There are no available currencies'
+};
+
 const ITEM_HEIGHTS: Record<ModalType, number> = {
   country: COUNTRY_ITEM_HEIGHT,
   paymentCurrency: CURRENCY_ITEM_HEIGHT
@@ -40,6 +50,14 @@ export const getModalSearchPlaceholder = (type?: ModalType) => {
   return type ? MODAL_SEARCH_PLACEHOLDERS[type] : undefined;
 };
 
+export const getModalEmptyTitle = (type?: ModalType) => {
+  return type ? MODAL_EMPTY_TITLES[type] : undefined;
+};
+
+export const getModalEmptyDescription = (type?: ModalType) => {
+  return type ? MODAL_EMPTY_DESCRIPTIONS[type] : undefined;
+};
+
 const searchFilter = (
   item: { name: string; currencyCode?: string; countryCode?: string },
   searchValue: string

package/src/views/w3m-onramp-transaction-view/index.tsx

@@ -29,7 +29,7 @@ export function OnRampTransactionView() {
   }, []);
 
   return (
-    <FlexView padding={['3xs', 'l', '4xl', 'l']}>
+    <FlexView padding={['3xs', 'l', 's', 'l']}>
       <FlexView>
         <FlexView alignItems="center">
           <IconBox