@reown/appkit-react-native 2.0.0 → 2.0.2

package/src/partials/w3m-all-wallets-search/index.tsx

@@ -1,95 +1,47 @@
+import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { FlatList, View } from 'react-native';
 import {
   ApiController,
-  AssetUtil,
-  SnackController,
-  type WcWallet
+  LogController,
+  OptionsController,
+  SnackController
 } from '@reown/appkit-core-react-native';
-import {
-  CardSelect,
-  CardSelectHeight,
-  CardSelectLoader,
-  FlexView,
-  Spacing
-} from '@reown/appkit-ui-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { type WcWallet } from '@reown/appkit-common-react-native';
+import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../w3m-placeholder';
 import styles from './styles';
 
+import { Loading } from '../w3m-all-wallets-list/components/Loading';
+import { WalletList } from '../w3m-all-wallets-list/components/WalletList';
+
 export interface AllWalletsSearchProps {
-  columns: number;
-  onItemPress: (wallet: WcWallet) => void;
-  itemWidth?: number;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
   searchQuery?: string;
 }
 
-export function AllWalletsSearch({
-  searchQuery,
-  columns,
-  itemWidth,
-  onItemPress
-}: AllWalletsSearchProps) {
+export function AllWalletsSearch({ searchQuery, onItemPress }: AllWalletsSearchProps) {
+  const { search } = useSnapshot(ApiController.state);
+  const { customWallets } = useSnapshot(OptionsController.state);
   const [loading, setLoading] = useState<boolean>(false);
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
-  const imageHeaders = ApiController._getApiHeaders();
-  const { maxWidth, padding, isLandscape } = useCustomDimensions();
-
-  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-  const walletTemplate = ({ item }: { item: WcWallet }) => {
-    const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
-
-    return (
-      <View key={item?.id} style={[styles.itemContainer, { width: itemWidth }]}>
-        <CardSelect
-          imageSrc={AssetUtil.getWalletImage(item)}
-          imageHeaders={imageHeaders}
-          name={item?.name ?? 'Unknown'}
-          onPress={() => onItemPress(item)}
-          installed={!!isInstalled}
-          testID={`wallet-search-item-${item?.id}`}
-        />
-      </View>
-    );
-  };
+  const { isLandscape } = useCustomDimensions();
 
-  const loadingTemplate = (items: number) => {
-    return (
-      <FlexView
-        flexDirection="row"
-        flexWrap="wrap"
-        alignSelf="center"
-        padding={['0', '0', 's', 'xs']}
-        style={[styles.container, { maxWidth }]}
-      >
-        {Array.from({ length: items }).map((_, index) => (
-          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
-            <CardSelectLoader />
-          </View>
-        ))}
-      </FlexView>
-    );
-  };
+  const customWalletResults = (customWallets ?? []).filter(wallet =>
+    wallet.name.toLowerCase().includes(searchQuery?.toLowerCase() ?? '')
+  );
 
-  const emptyTemplate = () => {
-    return (
-      <Placeholder
-        icon="walletPlaceholder"
-        description="No results found"
-        style={[styles.emptyContainer, isLandscape && styles.emptyLandscape]}
-      />
-    );
-  };
+  const results = [...search, ...customWalletResults];
 
   const searchFetch = useCallback(async () => {
     try {
       setLoading(true);
       setLoadingError(false);
+      // eslint-disable-next-line valtio/state-snapshot-rule
       await ApiController.searchWallet({ search: searchQuery });
       setLoading(false);
     } catch (error) {
+      LogController.sendError(error, 'AllWalletsSearch.tsx', 'searchFetch');
       SnackController.showError('Failed to load wallets');
       setLoading(false);
       setLoadingError(true);
@@ -104,7 +56,7 @@ export function AllWalletsSearch({
   }, [searchQuery, prevSearchQuery, searchFetch]);
 
   if (loading) {
-    return loadingTemplate(20);
+    return <Loading loadingItems={12} />;
   }
 
   if (loadingError) {
@@ -116,32 +68,28 @@ export function AllWalletsSearch({
         description={`This might be due to a temporary network issue.\nPlease try reloading to see if that helps.`}
         actionIcon="refresh"
         actionPress={searchFetch}
-        style={styles.placeholderContainer}
+        style={[styles.placeholderContainer]}
         actionTitle="Retry"
       />
     );
   }
 
-  if (ApiController.state.search.length === 0) {
-    return emptyTemplate();
+  if (results.length === 0) {
+    return (
+      <Placeholder
+        icon="walletPlaceholder"
+        description="No results found"
+        style={[styles.emptyContainer, isLandscape && styles.emptyLandscape]}
+      />
+    );
   }
 
   return (
-    <FlatList
-      key={columns}
-      fadingEdgeLength={20}
-      bounces={false}
-      numColumns={columns}
-      data={ApiController.state.search}
-      renderItem={walletTemplate}
-      style={styles.container}
-      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
-      keyExtractor={item => item.id}
-      getItemLayout={(_, index) => ({
-        length: ITEM_HEIGHT,
-        offset: ITEM_HEIGHT * index,
-        index
-      })}
+    <WalletList
+      onItemPress={onItemPress}
+      searchQuery={searchQuery}
+      data={results}
+      testIDKey="wallet-search-item"
     />
   );
 }

package/src/partials/w3m-all-wallets-search/styles.ts

@@ -2,11 +2,8 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  container: {
-    height: '100%'
-  },
   contentContainer: {
-    paddingBottom: Spacing['2xl']
+    paddingBottom: Spacing['xs']
   },
   placeholderContainer: {
     flex: 0,
@@ -14,6 +11,8 @@ export default StyleSheet.create({
   },
   emptyContainer: {
     flex: 0,
+    justifyContent: 'flex-start',
+    paddingTop: Spacing['4xl'],
     height: '90%'
   },
   emptyLandscape: {
@@ -22,7 +21,7 @@ export default StyleSheet.create({
   itemContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: Spacing.xs
+    margin: Spacing['4xs']
   },
   text: {
     marginTop: Spacing.xs

package/src/partials/w3m-connecting-body/index.tsx

@@ -11,12 +11,14 @@ export interface ConnectingBodyProps {
 export function ConnectingBody({ title, description }: ConnectingBodyProps) {
   return (
     <FlexView padding={['3xs', '2xl', '0', '2xl']} alignItems="center" style={styles.textContainer}>
-      <Text variant="paragraph-500">{title}</Text>
-      {description && (
+      <Text center numberOfLines={1} variant="paragraph-500">
+        {title}
+      </Text>
+      {description ? (
         <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
           {description}
         </Text>
-      )}
+      ) : null}
     </FlexView>
   );
 }

package/src/partials/w3m-connecting-header/index.tsx

@@ -1,4 +1,4 @@
-import type { Platform } from '@reown/appkit-core-react-native';
+import type { Platform } from '@reown/appkit-common-react-native';
 import { FlexView, Tabs, type IconType } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 

package/src/partials/w3m-connecting-mobile/components/StoreLink.tsx

@@ -12,7 +12,7 @@ export function StoreLink({ visible, walletName = 'Wallet', onPress }: StoreLink
 
   return (
     <ActionEntry style={styles.storeButton}>
-      <Text numberOfLines={1} variant="paragraph-500" color="fg-200">
+      <Text numberOfLines={1} style={styles.storeText} variant="paragraph-500" color="fg-200">
         {`Don't have ${walletName}?`}
       </Text>
       <Button
@@ -34,5 +34,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.l,
     marginHorizontal: Spacing.xl,
     marginTop: Spacing.l
+  },
+  storeText: {
+    flexShrink: 1
   }
 });

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -5,11 +5,14 @@ import {
   RouterController,
   ApiController,
   AssetUtil,
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   OptionsController,
   EventsController,
-  ConstantsUtil
+  ConstantsUtil,
+  AssetController,
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -17,11 +20,10 @@ import {
   LoadingThumbnail,
   WalletImage,
   Link,
-  IconBox
+  IconBox,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { UiUtil } from '../../utils/UiUtil';
 import { StoreLink } from './components/StoreLink';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../w3m-connecting-body';
 import styles from './styles';
@@ -34,8 +36,9 @@ interface Props {
 
 export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const { data } = RouterController.state;
-  const { maxWidth: width } = useCustomDimensions();
-  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const { padding } = useCustomDimensions();
+  const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const showCopy =
     OptionsController.isClipboardAvailable() &&
@@ -52,13 +55,28 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
 
   const onRetryPress = () => {
     setErrorType(undefined);
-    ConnectionController.setWcError(false);
+    WcController.setWcError(false);
     onRetry?.();
   };
 
   const onStorePress = () => {
     if (storeUrl) {
       CoreHelperUtil.openLink(storeUrl);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'GET_WALLET',
+        properties: {
+          name: data?.wallet?.name ?? 'Unknown',
+          link: storeUrl,
+          linkType: Platform.select({
+            ios: 'appstore',
+            android: 'playstore',
+            default: undefined
+          }),
+          explorerId: data?.wallet?.id,
+          walletRank: data?.wallet?.order
+        }
+      });
     }
   };
 
@@ -68,22 +86,27 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
       if (name && mobile_link && wcUri) {
         const { redirect, href } = CoreHelperUtil.formatNativeUrl(mobile_link, wcUri);
         const wcLinking = { name, href };
-        ConnectionController.setWcLinking(wcLinking);
-        ConnectionController.setPressedWallet(data?.wallet);
+        WcController.setWcLinking(wcLinking);
+        WcController.setPressedWallet(data?.wallet);
         await CoreHelperUtil.openLink(redirect);
-        await ConnectionController.state.wcPromise;
-        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking, data?.wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
           properties: {
             method: 'mobile',
             name: data?.wallet?.name ?? 'Unknown',
-            explorer_id: data?.wallet?.id
+            explorerId: data?.wallet?.id,
+            caipNetworkId
           }
         });
       }
     } catch (error: any) {
+      LogController.sendError(error, 'ConnectingMobile.tsx', 'onConnect');
       if (error.message.includes(ConstantsUtil.LINKING_ERROR)) {
         setErrorType('not_installed');
       } else {
@@ -99,20 +122,20 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   }, [wcUri, 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 || wcError}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {wcError && (
+          {wcError ? (
             <IconBox
               icon={'close'}
               border
@@ -122,10 +145,10 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
-        {showRetry && (
+        {showRetry ? (
           <Button
             size="sm"
             variant="accent"
@@ -136,9 +159,9 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
           >
             Try again
           </Button>
-        )}
+        ) : null}
       </FlexView>
-      {showCopy && (
+      {showCopy ? (
         <Link
           iconLeft="copySmall"
           color="fg-200"
@@ -147,7 +170,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
         >
           Copy link
         </Link>
-      )}
+      ) : null}
       <StoreLink
         visible={!isInstalled && !!storeUrl}
         walletName={data?.wallet?.name}

package/src/partials/w3m-connecting-mobile/styles.ts

@@ -3,7 +3,8 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
   container: {
-    paddingBottom: Spacing['3xl']
+    paddingBottom: Spacing['xs'],
+    minHeight: '30%'
   },
   retryButton: {
     marginTop: Spacing.m

package/src/partials/w3m-connecting-qrcode/components/ReownButton.tsx

@@ -0,0 +1,20 @@
+import { Linking, type StyleProp, type ViewStyle } from 'react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { FlexView, Icon, Pressable, Text } from '@reown/appkit-ui-react-native';
+
+interface Props {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ReownButton({ style }: Props) {
+  return (
+    <Pressable transparent onPress={() => Linking.openURL(ConstantsUtil.REOWN_URL)} style={style}>
+      <FlexView alignItems="center" justifyContent="center" flexDirection="row" columnGap="2xs">
+        <Text variant="small-500" color="fg-100">
+          UX by
+        </Text>
+        <Icon name="reown" color="fg-150" width={100} height={30} />
+      </FlexView>
+    </Pressable>
+  );
+}

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -1,46 +1,58 @@
 import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
 import {
-  AssetUtil,
-  ConnectionController,
-  ConnectorController,
+  WcController,
   EventsController,
   OptionsController,
-  SnackController
+  SnackController,
+  ConnectionsController,
+  CoreHelperUtil
 } from '@reown/appkit-core-react-native';
-import { FlexView, Link, QrCode, Text, Spacing } from '@reown/appkit-ui-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import {
+  FlexView,
+  Link,
+  QrCode,
+  Text,
+  Spacing,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import styles from './styles';
+import { ReownButton } from './components/ReownButton';
+import { useWindowDimensions } from 'react-native';
+
+const LOGO_SIZE = 60;
+const LOGO_BORDER_RADIUS = 10;
 
 export function ConnectingQrCode() {
-  const { wcUri } = useSnapshot(ConnectionController.state);
+  const { height, width } = useWindowDimensions();
+  const windowSize = Math.min(height, width);
+  const { wcUri } = useSnapshot(WcController.state);
   const showCopy = OptionsController.isClipboardAvailable();
-  const { maxWidth: windowSize, isPortrait } = useCustomDimensions();
+  const { isPortrait } = useCustomDimensions();
   const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5);
 
   const onCopyAddress = () => {
-    if (ConnectionController.state.wcUri) {
-      OptionsController.copyToClipboard(ConnectionController.state.wcUri);
+    if (WcController.state.wcUri) {
+      OptionsController.copyToClipboard(WcController.state.wcUri);
       SnackController.showSuccess('Link copied');
     }
   };
 
   const onConnect = async () => {
-    await ConnectionController.state.wcPromise;
+    await WcController.state.wcPromise;
+    const address = ConnectionsController.state.activeAddress;
+    const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
 
     EventsController.sendEvent({
       type: 'track',
       event: 'CONNECT_SUCCESS',
+      address: CoreHelperUtil.getPlainAddress(address),
       properties: {
         method: 'qrcode',
-        name: 'WalletConnect'
+        name: 'WalletConnect',
+        caipNetworkId
       }
     });
-
-    const connectors = ConnectorController.state.connectors;
-    const connector = connectors.find(c => c.type === 'WALLET_CONNECT');
-    const url = AssetUtil.getConnectorImage(connector);
-    ConnectionController.setConnectedWalletImageUrl(url);
   };
 
   useEffect(() => {
@@ -54,12 +66,18 @@ export function ConnectingQrCode() {
       alignItems="center"
       justifyContent="center"
       flexDirection={isPortrait ? 'column' : 'row'}
-      padding={['xl', 'xl', '2xl', 'xl']}
+      padding={['xl', 'xl', 'xs', 'xl']}
     >
-      <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
+      <QrCode
+        size={qrSize}
+        uri={wcUri}
+        testID="qr-code"
+        logoBorderRadius={LOGO_BORDER_RADIUS}
+        logoSize={LOGO_SIZE}
+      />
       <FlexView alignItems="center" margin="m">
         <Text variant="paragraph-500">Scan this QR code with your phone</Text>
-        {showCopy && (
+        {showCopy ? (
           <Link
             iconLeft="copySmall"
             color="fg-200"
@@ -69,7 +87,8 @@ export function ConnectingQrCode() {
           >
             Copy link
           </Link>
-        )}
+        ) : null}
+        <ReownButton style={styles.reownButton} />
       </FlexView>
     </FlexView>
   );

package/src/partials/w3m-connecting-qrcode/styles.ts

@@ -4,5 +4,8 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   copyButton: {
     marginTop: Spacing.m
+  },
+  reownButton: {
+    marginTop: Spacing['2xl']
   }
 });

package/src/partials/w3m-connecting-web/index.tsx

@@ -5,10 +5,13 @@ import {
   RouterController,
   ApiController,
   AssetUtil,
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   OptionsController,
-  EventsController
+  EventsController,
+  AssetController,
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -19,7 +22,6 @@ import {
   IconBox
 } from '@reown/appkit-ui-react-native';
 
-import { UiUtil } from '../../utils/UiUtil';
 import { ConnectingBody, getMessage } from '../w3m-connecting-body';
 import styles from './styles';
 
@@ -29,7 +31,8 @@ interface ConnectingWebProps {
 
 export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   const { data } = RouterController.state;
-  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const showCopy = OptionsController.isClipboardAvailable();
   const bodyMessage = getMessage({
     walletName: data?.wallet?.name,
@@ -41,39 +44,44 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
     try {
       const { name, webapp_link } = data?.wallet ?? {};
       if (name && webapp_link && wcUri) {
-        ConnectionController.setWcError(false);
+        WcController.setWcError(false);
         const { redirect, href } = CoreHelperUtil.formatUniversalUrl(webapp_link, wcUri);
         const wcLinking = { name, href };
-        ConnectionController.setWcLinking(wcLinking);
-        ConnectionController.setPressedWallet(data?.wallet);
+        WcController.setWcLinking(wcLinking);
+        WcController.setPressedWallet(data?.wallet);
         await Linking.openURL(redirect);
-        await ConnectionController.state.wcPromise;
-
-        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking, data?.wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
 
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
           properties: {
             method: 'web',
             name: data?.wallet?.name ?? 'Unknown',
-            explorer_id: data?.wallet?.id
+            explorerId: data?.wallet?.id,
+            caipNetworkId
           }
         });
       }
-    } catch {}
+    } catch (error) {
+      LogController.sendError(error, 'ConnectingWeb.tsx', 'onConnect');
+    }
   }, [data?.wallet, wcUri]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20}>
-      <FlexView alignItems="center" padding={['2xl', 'm', '3xl', 'm']}>
+    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
+      <FlexView alignItems="center" padding={['2xl', 'm', 'xs', 'm']}>
         <LoadingThumbnail paused={wcError}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {wcError && (
+          {wcError ? (
             <IconBox
               icon={'close'}
               border
@@ -83,7 +91,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
         <Button
@@ -95,7 +103,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
         >
           Open
         </Button>
-        {showCopy && (
+        {showCopy ? (
           <Link
             iconLeft="copySmall"
             color="fg-200"
@@ -104,7 +112,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
           >
             Copy link
           </Link>
-        )}
+        ) : null}
       </FlexView>
     </ScrollView>
   );