@reown/appkit-react-native 0.0.0-fix-height-calc-20250815195135 → 0.0.0-fix-ui-changes-20250828183750

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

@@ -15,14 +15,16 @@ import {
   Spacing,
   Text,
   Toggle,
+  useCustomDimensions,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import { useSnapshot } from 'valtio';
 import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 export function OnRampCheckoutView() {
   const Theme = useTheme();
+  const { padding } = useCustomDimensions();
   const { themeMode } = useSnapshot(ThemeController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const { selectedQuote, selectedPaymentMethod, purchaseCurrency } = useSnapshot(
@@ -49,164 +51,166 @@ export function OnRampCheckoutView() {
   };
 
   return (
-    <FlexView padding={['2xl', 'l', '4xl', 'l']}>
-      <FlexView alignItems="center">
-        <Text color="fg-200">You Buy</Text>
-        <FlexView flexDirection="row" alignItems="center">
-          <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
-          <Text variant="paragraph-400" color="fg-200">
-            {symbol?.split('_')[0] ?? symbol ?? ''}
-          </Text>
-        </FlexView>
-        <FlexView flexDirection="row" alignItems="center" justifyContent="center">
-          <Text color="fg-200">via </Text>
-          {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
-          <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+    <ScrollView style={{ paddingHorizontal: padding }}>
+      <FlexView padding={['2xl', 'l', '4xl', 'l']}>
+        <FlexView alignItems="center">
+          <Text color="fg-200">You Buy</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
+            <Text variant="paragraph-400" color="fg-200">
+              {symbol?.split('_')[0] ?? symbol ?? ''}
+            </Text>
+          </FlexView>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+            <Text color="fg-200">via </Text>
+            {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
+            <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+          </FlexView>
         </FlexView>
-      </FlexView>
-      <Separator style={styles.separator} color="gray-glass-010" />
-      <FlexView
-        padding={['s', 's', 'xs', 's']}
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text color="fg-200">You Pay</Text>
-        <Text>
-          {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
-        </Text>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'xs', 's']}
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text color="fg-200">You Receive</Text>
-        <FlexView flexDirection="row" alignItems="center">
+        <Separator style={styles.separator} color="gray-glass-010" />
+        <FlexView
+          padding={['s', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Pay</Text>
           <Text>
-            {value} {symbol?.split('_')[0] ?? ''}
+            {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
           </Text>
-          {purchaseCurrency?.symbolImageUrl ? (
-            <Image
-              source={purchaseCurrency?.symbolImageUrl}
-              style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
-            />
-          ) : null}
         </FlexView>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'xs', 's']}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text color="fg-200">Network</Text>
-        <FlexView flexDirection="row" alignItems="center">
-          <Text>{purchaseCurrency?.chainName}</Text>
+        <FlexView
+          padding={['xs', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Receive</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>
+              {value} {symbol?.split('_')[0] ?? ''}
+            </Text>
+            {purchaseCurrency?.symbolImageUrl ? (
+              <Image
+                source={purchaseCurrency?.symbolImageUrl}
+                style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
+              />
+            ) : null}
+          </FlexView>
         </FlexView>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'm', 's']}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text color="fg-200">Pay with</Text>
         <FlexView
+          padding={['xs', 's', 'xs', 's']}
           flexDirection="row"
           alignItems="center"
-          style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          justifyContent="space-between"
         >
-          {paymentLogo ? (
-            <Image
-              source={paymentLogo}
-              style={styles.paymentMethodImage}
-              tintColor={Theme['fg-150']}
-            />
-          ) : null}
-          <Text variant="small-600" color="fg-150">
-            {selectedPaymentMethod?.name}
-          </Text>
+          <Text color="fg-200">Network</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>{purchaseCurrency?.chainName}</Text>
+          </FlexView>
+        </FlexView>
+        <FlexView
+          padding={['xs', 's', 'm', 's']}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text color="fg-200">Pay with</Text>
+          <FlexView
+            flexDirection="row"
+            alignItems="center"
+            style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          >
+            {paymentLogo ? (
+              <Image
+                source={paymentLogo}
+                style={styles.paymentMethodImage}
+                tintColor={Theme['fg-150']}
+              />
+            ) : null}
+            <Text variant="small-600" color="fg-150">
+              {selectedPaymentMethod?.name}
+            </Text>
+          </FlexView>
         </FlexView>
-      </FlexView>
 
-      {showFees ? (
-        <Toggle
-          title={
-            <>
-              <Text variant="paragraph-400" color="fg-200">
-                Fees{' '}
-                {showTotalFee ? (
-                  <Text variant="paragraph-400">
-                    {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+        {showFees ? (
+          <Toggle
+            title={
+              <>
+                <Text variant="paragraph-400" color="fg-200">
+                  Fees{' '}
+                  {showTotalFee ? (
+                    <Text variant="paragraph-400">
+                      {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+                    </Text>
+                  ) : null}
+                </Text>
+              </>
+            }
+            style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
+            contentContainerStyle={styles.feesToggleContent}
+          >
+            {showNetworkFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+                margin={['0', '0', 'xs', '0']}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Network Fees
+                </Text>
+                <FlexView flexDirection="row" alignItems="center">
+                  {networkImage ? (
+                    <Image
+                      source={networkImage}
+                      style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
+                    />
+                  ) : null}
+                  <Text variant="small-400">
+                    {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
                   </Text>
-                ) : null}
-              </Text>
-            </>
-          }
-          style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
-          contentContainerStyle={styles.feesToggleContent}
-        >
-          {showNetworkFee ? (
-            <FlexView
-              flexDirection="row"
-              justifyContent="space-between"
-              style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
-              margin={['0', '0', 'xs', '0']}
-            >
-              <Text variant="small-500" color="fg-150">
-                Network Fees
-              </Text>
-              <FlexView flexDirection="row" alignItems="center">
-                {networkImage ? (
-                  <Image
-                    source={networkImage}
-                    style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
-                  />
-                ) : null}
+                </FlexView>
+              </FlexView>
+            ) : null}
+            {showTransactionFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Transaction Fees
+                </Text>
                 <Text variant="small-400">
-                  {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
+                  {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
                 </Text>
               </FlexView>
-            </FlexView>
-          ) : null}
-          {showTransactionFee ? (
-            <FlexView
-              flexDirection="row"
-              justifyContent="space-between"
-              style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
-            >
-              <Text variant="small-500" color="fg-150">
-                Transaction Fees
-              </Text>
-              <Text variant="small-400">
-                {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
-              </Text>
-            </FlexView>
-          ) : null}
-        </Toggle>
-      ) : null}
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
-        <Button
-          variant="shade"
-          size="md"
-          style={styles.cancelButton}
-          onPress={RouterController.goBack}
-        >
-          Back
-        </Button>
-        <Button
-          variant="fill"
-          size="md"
-          style={styles.confirmButton}
-          onPress={onConfirm}
-          testID="button-confirm"
-        >
-          Confirm
-        </Button>
+            ) : null}
+          </Toggle>
+        ) : null}
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
+          <Button
+            variant="shade"
+            size="md"
+            style={styles.cancelButton}
+            onPress={RouterController.goBack}
+          >
+            Back
+          </Button>
+          <Button
+            variant="fill"
+            size="md"
+            style={styles.confirmButton}
+            onPress={onConfirm}
+            testID="button-confirm"
+          >
+            Confirm
+          </Button>
+        </FlexView>
       </FlexView>
-    </FlexView>
+    </ScrollView>
   );
 }
 

package/src/views/w3m-onramp-view/components/SelectPaymentModal.tsx

@@ -196,7 +196,7 @@ const styles = StyleSheet.create({
     paddingTop: Spacing.m
   },
   container: {
-    height: '80%',
+    height: '100%',
     borderTopLeftRadius: BorderRadius.l,
     borderTopRightRadius: BorderRadius.l
   },

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 { ScrollView, Modal } from 'react-native';
+import { ScrollView } from 'react-native';
 import {
   ConnectionsController,
   ConstantsUtil,
@@ -22,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 {
@@ -208,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,11 +20,7 @@ export default StyleSheet.create({
     marginTop: Spacing.xs,
     width: '100%'
   },
-  modalContent: {
-    margin: 0,
-    flex: 1,
-    justifyContent: 'flex-end'
-  },
+
   withKeyboard: {
     height: '100%'
   }

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

@@ -31,7 +31,7 @@ export function WalletCompatibleNetworks() {
 
   return (
     <ScrollView bounces={false} style={{ paddingHorizontal: padding }} fadingEdgeLength={20}>
-      <FlexView padding={['xl', 's', '2xl', 's']} margin={['0', '0', '2xl', '0']}>
+      <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-send-view/styles.ts

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