@reown/appkit-react-native 0.0.0-fix-improvements-20250827190629 → 0.0.0-fix-ui-changes-20250828191102

package/src/views/w3m-swap-view/components/select-token-modal/index.tsx

@@ -0,0 +1,182 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  Modal,
+  ScrollView,
+  SectionList,
+  View,
+  type SectionListData,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import {
+  FlexView,
+  IconLink,
+  InputText,
+  ListToken,
+  ListTokenTotalHeight,
+  Separator,
+  Text,
+  TokenButton,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+
+import {
+  AssetController,
+  AssetUtil,
+  ConnectionsController,
+  SwapController,
+  type SwapControllerState
+} from '@reown/appkit-core-react-native';
+
+import { type SwapInputTarget, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+
+import { Placeholder } from '../../../../partials/w3m-placeholder';
+import styles from './styles';
+import { createSections } from './utils';
+
+interface Props {
+  onClose: () => void;
+  visible: boolean;
+  type?: SwapInputTarget;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SwapSelectTokenModal({ onClose, type, style, visible }: Props) {
+  const { padding } = useCustomDimensions();
+  const Theme = useTheme();
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { sourceToken, suggestedTokens, myTokensWithBalance } = useSnapshot(
+    SwapController.state
+  ) as SwapControllerState;
+
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+  const [tokenSearch, setTokenSearch] = useState<string>('');
+  const isSourceToken = type === 'sourceToken';
+
+  const [filteredTokens, setFilteredTokens] = useState(
+    createSections(isSourceToken, tokenSearch, myTokensWithBalance)
+  );
+  const suggestedList = suggestedTokens
+    ?.filter(token => token.address !== SwapController.state.sourceToken?.address)
+    .slice(0, 8);
+
+  const onSearchChange = (value: string) => {
+    setTokenSearch(value);
+    setFilteredTokens(createSections(isSourceToken, value, myTokensWithBalance));
+  };
+
+  const onTokenPress = (token: SwapTokenWithBalance) => {
+    if (isSourceToken) {
+      SwapController.setSourceToken(token);
+    } else {
+      SwapController.setToToken(token);
+      if (SwapController.state.sourceToken && SwapController.state.sourceTokenAmount) {
+        SwapController.swapTokens();
+      }
+    }
+    onClose();
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <FlexView
+        padding={['xl', '0', '0', '0']}
+        style={[
+          styles.container,
+          {
+            paddingHorizontal: padding,
+            backgroundColor: Theme['bg-100']
+          },
+          style
+        ]}
+      >
+        <FlexView
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+          padding={['0', 'm', 'm', 'm']}
+        >
+          <IconLink icon="chevronLeft" size="md" onPress={onClose} />
+          <Text variant="paragraph-600">Select token</Text>
+          <View style={styles.iconPlaceholder} />
+        </FlexView>
+        <FlexView margin={['0', '0', 'xs', '0']}>
+          <InputText
+            value={tokenSearch}
+            icon="search"
+            placeholder="Search token"
+            onChangeText={onSearchChange}
+            clearButtonMode="while-editing"
+            style={styles.input}
+          />
+          {!isSourceToken && (
+            <>
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                bounces={false}
+                fadingEdgeLength={20}
+                style={styles.suggestedList}
+                contentContainerStyle={styles.suggestedListContent}
+              >
+                {suggestedList?.map((token, index) => (
+                  <TokenButton
+                    key={token.name}
+                    text={token.symbol}
+                    imageUrl={token.logoUri}
+                    onPress={() => onTokenPress(token)}
+                    style={index !== suggestedList.length - 1 ? styles.suggestedToken : undefined}
+                  />
+                ))}
+              </ScrollView>
+              <Separator style={styles.suggestedSeparator} color="gray-glass-005" />
+            </>
+          )}
+        </FlexView>
+        <SectionList
+          sections={filteredTokens as SectionListData<SwapTokenWithBalance>[]}
+          bounces={false}
+          fadingEdgeLength={20}
+          contentContainerStyle={styles.tokenList}
+          renderSectionHeader={({ section: { title } }) => (
+            <Text
+              variant="paragraph-500"
+              color="fg-200"
+              style={[{ backgroundColor: Theme['bg-100'] }, styles.title]}
+            >
+              {title}
+            </Text>
+          )}
+          ListEmptyComponent={
+            <Placeholder
+              icon="coinPlaceholder"
+              title="No tokens found"
+              description="Your tokens will appear here"
+            />
+          }
+          getItemLayout={(_, index) => ({
+            length: ListTokenTotalHeight,
+            offset: ListTokenTotalHeight * index,
+            index
+          })}
+          renderItem={({ item }) => (
+            <ListToken
+              key={item.name}
+              name={item.name}
+              imageSrc={item.logoUri}
+              networkSrc={networkImage}
+              value={item.value}
+              amount={item.quantity.numeric}
+              currency={item.symbol}
+              onPress={() => onTokenPress(item)}
+              disabled={item.address === sourceToken?.address}
+            />
+          )}
+        />
+      </FlexView>
+    </Modal>
+  );
+}

package/src/views/w3m-swap-view/components/{select-token-view → select-token-modal}/styles.ts

@@ -8,7 +8,9 @@ export default StyleSheet.create({
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
     overflow: 'hidden',
-    marginTop: 80
+    margin: 0,
+    flex: 1,
+    justifyContent: 'flex-end'
   },
   title: {
     paddingTop: Spacing['2xs']
@@ -29,7 +31,7 @@ export default StyleSheet.create({
     marginRight: Spacing.s
   },
   suggestedSeparator: {
-    marginVertical: Spacing.s
+    marginTop: Spacing.s
   },
   iconPlaceholder: {
     height: 32,

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

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
-import { Modal } from 'react-native';
+import { ScrollView } from 'react-native';
 import {
   ConnectionsController,
   ConstantsUtil,
@@ -8,7 +8,13 @@ import {
   RouterController,
   SwapController
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconLink, useTheme, ScrollView } from '@reown/appkit-ui-react-native';
+import {
+  Button,
+  FlexView,
+  IconLink,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import { NumberUtil, type SwapInputTarget } from '@reown/appkit-common-react-native';
 
 import { useKeyboard } from '../../hooks/useKeyboard';
@@ -16,7 +22,7 @@ import { SwapInput } from '../../partials/w3m-swap-input';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { SwapDetails } from '../../partials/w3m-swap-details';
 import styles from './styles';
-import { SwapSelectTokenView } from './components/select-token-view';
+import { SwapSelectTokenModal } from './components/select-token-modal';
 
 export function SwapView() {
   const {
@@ -33,7 +39,8 @@ export function SwapView() {
     inputError
   } = useSnapshot(SwapController.state);
   const Theme = useTheme();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const { padding } = useCustomDimensions();
+  const { keyboardShown } = useKeyboard();
   const [showModal, setShowModal] = useState<SwapInputTarget | undefined>();
   const showDetails = !!sourceToken && !!toToken && !inputError;
 
@@ -150,7 +157,8 @@ export function SwapView() {
   return (
     <>
       <ScrollView
-        style={keyboardShown ? [styles.withKeyboard, { marginBottom: keyboardHeight }] : undefined}
+        style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
+        bounces={false}
         keyboardShouldPersistTaps="always"
       >
         <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">
@@ -200,9 +208,7 @@ export function SwapView() {
           </Button>
         </FlexView>
       </ScrollView>
-      <Modal visible={!!showModal} transparent animationType="slide" onRequestClose={onModalClose}>
-        <SwapSelectTokenView style={styles.modalContent} onClose={onModalClose} type={showModal} />
-      </Modal>
+      <SwapSelectTokenModal visible={!!showModal} onClose={onModalClose} type={showModal} />
     </>
   );
 }

package/src/views/w3m-swap-view/styles.ts

@@ -20,13 +20,8 @@ export default StyleSheet.create({
     marginTop: Spacing.xs,
     width: '100%'
   },
-  modalContent: {
-    margin: 0,
-    flex: 1,
-    justifyContent: 'flex-end'
-  },
+
   withKeyboard: {
-    height: '100%',
-    maxHeight: '100%'
+    height: '100%'
   }
 });

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

@@ -1,5 +1,12 @@
+import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
-import { FlexView, Text, Banner, NetworkImage, ScrollView } from '@reown/appkit-ui-react-native';
+import {
+  FlexView,
+  Text,
+  Banner,
+  NetworkImage,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   AssetController,
@@ -9,6 +16,7 @@ import {
 import styles from './styles';
 
 export function WalletCompatibleNetworks() {
+  const { padding } = useCustomDimensions();
   const { networks, accountType } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const isSmartAccount = accountType === 'smartAccount';
@@ -22,8 +30,8 @@ export function WalletCompatibleNetworks() {
   const imageHeaders = ApiController._getApiHeaders();
 
   return (
-    <ScrollView>
-      <FlexView padding={['xl', 's', 'l', 's']}>
+    <ScrollView bounces={false} style={{ paddingHorizontal: padding }} fadingEdgeLength={20}>
+      <FlexView padding={['xl', 's', 's', 's']}>
         <Banner icon="warningCircle" text="You can only receive assets on these networks." />
         {approvedNetworks.map((network, index) => (
           <FlexView

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { StyleSheet } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import {
   Chip,
   CompatibleNetwork,
@@ -8,7 +8,7 @@ import {
   Spacing,
   Text,
   UiUtil,
-  ScrollView
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -28,6 +28,7 @@ export function WalletReceiveView() {
   );
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+  const { padding } = useCustomDimensions();
   const canCopy = OptionsController.isClipboardAvailable();
   const isSmartAccount = accountType === 'smartAccount';
 
@@ -67,7 +68,7 @@ export function WalletReceiveView() {
   if (!address) return;
 
   return (
-    <ScrollView>
+    <ScrollView bounces={false} style={{ paddingHorizontal: padding }}>
       <FlexView padding={['xl', 'xl', '2xl', 'xl']} alignItems="center">
         <Chip
           label={label}

package/src/views/w3m-wallet-send-preview-view/index.tsx

@@ -1,4 +1,5 @@
 import { useSnapshot } from 'valtio';
+import { ScrollView } from 'react-native';
 import {
   Avatar,
   Button,
@@ -7,7 +8,7 @@ import {
   Image,
   Text,
   UiUtil,
-  ScrollView
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
 import {
@@ -20,6 +21,7 @@ import styles from './styles';
 import { PreviewSendDetails } from './components/preview-send-details';
 
 export function WalletSendPreviewView() {
+  const { padding } = useCustomDimensions();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { token, receiverAddress, receiverProfileName, receiverProfileImageUrl, loading } =
     useSnapshot(SendController.state);
@@ -67,7 +69,7 @@ export function WalletSendPreviewView() {
   };
 
   return (
-    <ScrollView>
+    <ScrollView style={{ paddingHorizontal: padding }}>
       <FlexView padding={['l', 'xl', '3xl', 'xl']}>
         <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
           <FlexView>

package/src/views/w3m-wallet-send-select-token-view/index.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
+import { ScrollView } from 'react-native';
 import {
   FlexView,
   InputText,
   ListToken,
   Text,
-  useCustomDimensions,
-  ScrollView
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   AssetController,
@@ -19,16 +19,14 @@ import type { Balance } from '@reown/appkit-common-react-native';
 
 import { Placeholder } from '../../partials/w3m-placeholder';
 import styles from './styles';
-import type { LayoutChangeEvent } from 'react-native';
 
 export function WalletSendSelectTokenView() {
-  const { padding, maxHeight } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const [filteredTokens, setFilteredTokens] = useState(balances ?? []);
-  const [headerHeight, setHeaderHeight] = useState<number>(0);
 
   const onSearchChange = (value: string) => {
     setTokenSearch(value);
@@ -38,12 +36,6 @@ export function WalletSendSelectTokenView() {
     setFilteredTokens(filtered ?? []);
   };
 
-  const onLayout = (event: LayoutChangeEvent) => {
-    const { height } = event.nativeEvent.layout;
-    // Main header height + input height
-    setHeaderHeight(height + 60);
-  };
-
   const onTokenPress = (_token: Balance) => {
     SendController.setToken(_token);
     SendController.setTokenAmount(undefined);
@@ -52,10 +44,10 @@ export function WalletSendSelectTokenView() {
 
   return (
     <FlexView
-      margin={['l', '0', '0', '0']}
+      margin={['l', '0', '2xl', '0']}
       style={[styles.container, { paddingHorizontal: padding }]}
     >
-      <FlexView margin={['0', 'm', 'm', 'm']} onLayout={onLayout}>
+      <FlexView margin={['0', 'm', 'm', 'm']}>
         <InputText
           value={tokenSearch}
           icon="search"
@@ -64,11 +56,7 @@ export function WalletSendSelectTokenView() {
           clearButtonMode="while-editing"
         />
       </FlexView>
-      <ScrollView
-        disablePadding
-        contentContainerStyle={styles.tokenList}
-        style={{ height: maxHeight - headerHeight }}
-      >
+      <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.tokenList}>
         <Text variant="paragraph-500" color="fg-200" style={styles.title}>
           Your tokens
         </Text>

package/src/views/w3m-wallet-send-select-token-view/styles.ts

@@ -10,7 +10,6 @@ export default StyleSheet.create({
     marginBottom: Spacing.xs
   },
   tokenList: {
-    paddingHorizontal: Spacing.m,
-    paddingBottom: Spacing.m
+    paddingHorizontal: Spacing.m
   }
 });

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-
+import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
   ConnectionsController,
@@ -7,14 +7,15 @@ import {
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconBox, ScrollView } from '@reown/appkit-ui-react-native';
+import { Button, FlexView, IconBox, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { SendInputToken } from '../../partials/w3m-send-input-token';
 import { useKeyboard } from '../../hooks/useKeyboard';
 import { SendInputAddress } from '../../partials/w3m-send-input-address';
 import styles from './styles';
 
 export function WalletSendView() {
-  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const { padding } = useCustomDimensions();
+  const { keyboardShown } = useKeyboard();
   const [isBalanceLoading, setBalanceLoading] = useState(false);
   const { token, sendTokenAmount, receiverAddress, receiverProfileName, loading } = useSnapshot(
     SendController.state
@@ -79,7 +80,8 @@ export function WalletSendView() {
 
   return (
     <ScrollView
-      style={keyboardShown ? [styles.withKeyboard, { marginBottom: keyboardHeight }] : undefined}
+      style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
+      bounces={false}
       keyboardShouldPersistTaps="always"
     >
       <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">

package/src/views/w3m-wallet-send-view/styles.ts

@@ -19,7 +19,6 @@ export default StyleSheet.create({
     width: '100%'
   },
   withKeyboard: {
-    height: '100%',
-    maxHeight: '100%'
+    height: '80%'
   }
 });

package/src/views/w3m-what-is-a-network-view/index.tsx

@@ -1,15 +1,16 @@
-import { Linking } from 'react-native';
-import { Button, FlexView, Text, Visual, ScrollView } from '@reown/appkit-ui-react-native';
+import { Linking, ScrollView } from 'react-native';
+import { Button, FlexView, Text, Visual, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import styles from './styles';
 
 export function WhatIsANetworkView() {
+  const { padding } = useCustomDimensions();
   const onLearnMorePress = () => {
     Linking.openURL('https://ethereum.org/en/developers/docs/networks/');
   };
 
   return (
-    <ScrollView>
-      <FlexView alignItems="center" padding={['l', '4xl', '2xl', '4xl']}>
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView alignItems="center" padding={['l', '4xl', '3xl', '4xl']}>
         <FlexView flexDirection="row" padding={['0', '0', 'xs', '0']}>
           <Visual name="network" />
           <Visual name="layers" style={styles.visual} />

package/src/views/w3m-what-is-a-wallet-view/index.tsx

@@ -1,16 +1,24 @@
-import { Button, FlexView, Text, Visual, ScrollView } from '@reown/appkit-ui-react-native';
+import { ScrollView } from 'react-native';
+import { Button, FlexView, Text, Visual, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { EventsController, RouterController } from '@reown/appkit-core-react-native';
 import styles from './styles';
 
 export function WhatIsAWalletView() {
+  const { padding } = useCustomDimensions();
+
   const onGetWalletPress = () => {
     RouterController.push('GetWallet');
     EventsController.sendEvent({ type: 'track', event: 'CLICK_GET_WALLET' });
   };
 
   return (
-    <ScrollView testID="what-is-a-wallet-view">
-      <FlexView alignItems="center" padding={['xs', '4xl', 's', '4xl']}>
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      testID="what-is-a-wallet-view"
+    >
+      <FlexView alignItems="center" padding={['xs', '4xl', 'xl', '4xl']}>
         <FlexView flexDirection="row" padding={['0', '0', 's', '0']}>
           <Visual name="login" />
           <Visual name="profile" style={styles.visual} />