@reown/appkit-react-native 0.0.0-feat-multi-social-20250710162403 → 0.0.0-feat-multi-social-20250714194032

package/lib/typescript/partials/w3m-swap-input/index.d.ts

@@ -7,6 +7,7 @@ export interface SwapInputProps {
     gasPrice?: number;
     style?: StyleProp<ViewStyle>;
     loading?: boolean;
+    loadingValues?: boolean;
     onTokenPress?: () => void;
     onMaxPress?: () => void;
     onChange?: (value: string) => void;
@@ -15,5 +16,5 @@ export interface SwapInputProps {
     editable?: boolean;
     autoFocus?: boolean;
 }
-export declare function SwapInput({ token, value, style, loading, onTokenPress, onMaxPress, onChange, marketValue, editable, autoFocus }: SwapInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapInput({ token, value, style, loading, loadingValues, onTokenPress, onMaxPress, onChange, marketValue, editable, autoFocus }: SwapInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/partials/w3m-swap-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-swap-input/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzE,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAK5E,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAID,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAO,EACP,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACV,EAAE,cAAc,2CA0GhB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-swap-input/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzE,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAK5E,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAID,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACV,EAAE,cAAc,2CAmHhB"}

package/lib/typescript/partials/w3m-swap-input/styles.d.ts

@@ -14,6 +14,9 @@ declare const _default: {
         flex: number;
         marginRight: number;
     };
+    valueLoader: {
+        marginBottom: number;
+    };
 };
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/partials/w3m-swap-input/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-swap-input/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAGA,wBAgBG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-swap-input/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAGA,wBAmBG"}

package/lib/typescript/views/w3m-swap-view/components/select-token-view/index.d.ts

@@ -0,0 +1,8 @@
+import { type SwapInputTarget } from '@reown/appkit-core-react-native';
+interface Props {
+    onClose: () => void;
+    type?: SwapInputTarget;
+}
+export declare function SwapSelectTokenView({ onClose, type }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/views/w3m-swap-view/components/select-token-view/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,iCAAiC,CAAC;AAOzC,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,KAAK,2CAkI3D"}

package/lib/typescript/views/{w3m-swap-select-token-view → w3m-swap-view/components/select-token-view}/styles.d.ts

@@ -1,7 +1,12 @@
 declare const _default: {
     container: {
-        minHeight: number;
-        maxHeight: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        overflow: "hidden";
+        marginTop: number;
+        flex: number;
     };
     title: {
         paddingTop: number;
@@ -24,6 +29,10 @@ declare const _default: {
     suggestedSeparator: {
         marginVertical: number;
     };
+    iconPlaceholder: {
+        height: number;
+        width: number;
+    };
 };
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/views/w3m-swap-view/components/select-token-view/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAmCG"}

package/lib/typescript/views/{w3m-swap-select-token-view → w3m-swap-view/components/select-token-view}/utils.d.ts

@@ -1,6 +1,6 @@
 import { type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
 export declare function filterTokens(tokens?: SwapTokenWithBalance[], searchValue?: string): SwapTokenWithBalance[];
-export declare function createSections(isSourceToken: boolean, searchValue: string): {
+export declare function createSections(isSourceToken: boolean, searchValue: string, balances?: SwapTokenWithBalance[]): {
     title: string;
     data: SwapTokenWithBalance[];
 }[];

package/lib/typescript/views/w3m-swap-view/components/select-token-view/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAE5F,wBAAgB,YAAY,CAAC,MAAM,CAAC,EAAE,oBAAoB,EAAE,EAAE,WAAW,CAAC,EAAE,MAAM,0BAcjF;AAED,wBAAgB,cAAc,CAC5B,aAAa,EAAE,OAAO,EACtB,WAAW,EAAE,MAAM,EACnB,QAAQ,CAAC,EAAE,oBAAoB,EAAE;;;IAgBlC"}

package/lib/typescript/views/w3m-swap-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/index.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,QAAQ,4CA+LvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/index.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,QAAQ,4CAyMvB"}

package/lib/typescript/views/w3m-swap-view/styles.d.ts

@@ -17,6 +17,10 @@ declare const _default: {
         marginTop: number;
         width: "100%";
     };
+    modal: {
+        margin: number;
+        justifyContent: "flex-end";
+    };
 };
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/views/w3m-swap-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAGA,wBAmBG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAuBG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reown/appkit-react-native",
-  "version": "0.0.0-feat-multi-social-20250710162403",
+  "version": "0.0.0-feat-multi-social-20250714194032",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
@@ -37,10 +37,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@reown/appkit-common-react-native": "0.0.0-feat-multi-social-20250710162403",
-    "@reown/appkit-core-react-native": "0.0.0-feat-multi-social-20250710162403",
-    "@reown/appkit-siwe-react-native": "0.0.0-feat-multi-social-20250710162403",
-    "@reown/appkit-ui-react-native": "0.0.0-feat-multi-social-20250710162403",
+    "@reown/appkit-common-react-native": "0.0.0-feat-multi-social-20250714194032",
+    "@reown/appkit-core-react-native": "0.0.0-feat-multi-social-20250714194032",
+    "@reown/appkit-siwe-react-native": "0.0.0-feat-multi-social-20250714194032",
+    "@reown/appkit-ui-react-native": "0.0.0-feat-multi-social-20250714194032",
     "@walletconnect/universal-provider": "2.20.2",
     "valtio": "^1.13.2"
   },

package/src/AppKit.ts

@@ -496,6 +496,10 @@ export class AppKit {
       const network = this.networks.find(n => n.id?.toString() === chainId);
       this.syncBalances(adapter, network);
 
+      if (OptionsController.state.features?.swaps) {
+        SwapController.fetchTokens();
+      }
+
       if (namespace === 'eip155') {
         this.handleSiweChange({ isNetworkChange: true });
       }

package/src/modal/w3m-router/index.tsx

@@ -21,7 +21,6 @@ import { OnRampSettingsView } from '../../views/w3m-onramp-settings-view';
 import { OnRampTransactionView } from '../../views/w3m-onramp-transaction-view';
 import { SwapView } from '../../views/w3m-swap-view';
 import { SwapPreviewView } from '../../views/w3m-swap-preview-view';
-import { SwapSelectTokenView } from '../../views/w3m-swap-select-token-view';
 import { TransactionsView } from '../../views/w3m-transactions-view';
 import { UnsupportedChainView } from '../../views/w3m-unsupported-chain-view';
 import { UpgradeEmailWalletView } from '../../views/w3m-upgrade-email-wallet-view';
@@ -81,8 +80,6 @@ export function AppKitRouter() {
         return SwapView;
       case 'SwapPreview':
         return SwapPreviewView;
-      case 'SwapSelectToken':
-        return SwapSelectTokenView;
       case 'Transactions':
         return TransactionsView;
       case 'UnsupportedChain':

package/src/partials/w3m-account-tokens/index.tsx

@@ -33,10 +33,7 @@ export function AccountTokens({ style, isLoading }: Props) {
   const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
 
-  // Show all tokens that come from the API
-  const filteredBalances = balances?.filter(balance => balance.quantity);
-
-  const onRefresh = useCallback(async () => {
+  const getBalance = useCallback(async () => {
     setRefreshing(true);
     await ConnectionsController.fetchBalance();
     setRefreshing(false);
@@ -46,7 +43,7 @@ export function AccountTokens({ style, isLoading }: Props) {
     RouterController.push('WalletReceive');
   };
 
-  if (!filteredBalances?.length) {
+  if (!balances?.length) {
     return (
       <>
         <ListItem
@@ -75,14 +72,14 @@ export function AccountTokens({ style, isLoading }: Props) {
       style={style}
       refreshControl={
         <RefreshControl
-          refreshing={isLoading || refreshing}
-          onRefresh={onRefresh}
+          refreshing={refreshing}
+          onRefresh={getBalance}
           tintColor={Theme['accent-100']}
           colors={[Theme['accent-100']]}
         />
       }
     >
-      {filteredBalances.map(token => (
+      {balances.map(token => (
         <ListToken
           key={token.symbol}
           name={token.name || 'Unknown'}
@@ -94,6 +91,7 @@ export function AccountTokens({ style, isLoading }: Props) {
           pressable={false}
         />
       ))}
+      {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
     </ScrollView>
   );
 }

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

@@ -44,7 +44,6 @@ export function Header() {
       OnRampTransaction: ' ',
       SwitchNetwork: networkName ?? 'Switch network',
       Swap: 'Swap',
-      SwapSelectToken: 'Select token',
       SwapPreview: 'Review swap',
       Transactions: 'Activity',
       UnsupportedChain: 'Switch network',

package/src/partials/w3m-send-input-address/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { TextInput } from 'react-native';
 import { FlexView, useTheme } from '@reown/appkit-ui-react-native';
-import { ConnectionController, SendController } from '@reown/appkit-core-react-native';
+import { SendController } from '@reown/appkit-core-react-native';
 
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import styles from './styles';
@@ -15,20 +15,21 @@ export function SendInputAddress({ value }: SendInputAddressProps) {
   const [inputValue, setInputValue] = useState<string | undefined>(value);
 
   const onSearch = async (search: string) => {
-    SendController.setLoading(true);
-    const address = await ConnectionController.getEnsAddress(search);
-    SendController.setLoading(false);
+    // TODO: check when enabling ENS
+    // SendController.setLoading(true);
+    // const address = await ConnectionController.getEnsAddress(search);
+    // SendController.setLoading(false);
 
-    if (address) {
-      SendController.setReceiverProfileName(search);
-      SendController.setReceiverAddress(address);
-      const avatar = await ConnectionController.getEnsAvatar(search);
-      SendController.setReceiverProfileImageUrl(avatar || undefined);
-    } else {
-      SendController.setReceiverAddress(search);
-      SendController.setReceiverProfileName(undefined);
-      SendController.setReceiverProfileImageUrl(undefined);
-    }
+    // if (address) {
+    //   SendController.setReceiverProfileName(search);
+    //   SendController.setReceiverAddress(address);
+    //   const avatar = await ConnectionController.getEnsAvatar(search);
+    //   SendController.setReceiverProfileImageUrl(avatar || undefined);
+    // } else {
+    SendController.setReceiverAddress(search);
+    SendController.setReceiverProfileName(undefined);
+    SendController.setReceiverProfileImageUrl(undefined);
+    // }
   };
 
   const { debouncedCallback: onDebounceSearch } = useDebounceCallback({

package/src/partials/w3m-send-input-token/index.tsx

@@ -39,7 +39,7 @@ export function SendInputToken({
   };
 
   const onMaxPress = () => {
-    if (token?.quantity && gasPrice) {
+    if (token?.quantity?.numeric && gasPrice) {
       const isNetworkToken =
         token.address === undefined ||
         Object.values(ConstantsUtil.NATIVE_TOKEN_ADDRESS).some(

package/src/partials/w3m-send-input-token/utils.ts

@@ -13,7 +13,7 @@ export function getSendValue(token?: Balance, sendTokenAmount?: number) {
 }
 
 export function getMaxAmount(token?: Balance) {
-  if (token?.quantity) {
+  if (token?.quantity?.numeric) {
     return NumberUtil.roundNumber(Number(token.quantity.numeric), 6, 5);
   }
 

package/src/partials/w3m-swap-input/index.tsx

@@ -21,6 +21,7 @@ export interface SwapInputProps {
   gasPrice?: number;
   style?: StyleProp<ViewStyle>;
   loading?: boolean;
+  loadingValues?: boolean;
   onTokenPress?: () => void;
   onMaxPress?: () => void;
   onChange?: (value: string) => void;
@@ -37,6 +38,7 @@ export function SwapInput({
   value,
   style,
   loading,
+  loadingValues,
   onTokenPress,
   onMaxPress,
   onChange,
@@ -48,11 +50,11 @@ export function SwapInput({
   const valueInputRef = useRef<TextInput | null>(null);
   const isMarketValueGreaterThanZero =
     !!marketValue && NumberUtil.bigNumber(marketValue).isGreaterThan('0');
-  const maxAmount = UiUtil.formatNumberToLocalString(token?.quantity.numeric, 3);
-  const maxError = Number(value) > Number(token?.quantity.numeric);
+  const maxAmount = UiUtil.formatNumberToLocalString(token?.quantity?.numeric, 3);
+  const maxError = Number(value) > Number(token?.quantity?.numeric);
   const showMax =
     onMaxPress &&
-    !!token?.quantity.numeric &&
+    !!token?.quantity?.numeric &&
     NumberUtil.multiply(token?.quantity.numeric, token?.price).isGreaterThan(
       MINIMUM_USD_VALUE_TO_CONVERT
     );
@@ -85,33 +87,40 @@ export function SwapInput({
     >
       {loading ? (
         <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
-          <Shimmer height={36} width={80} borderRadius={12} />
+          <FlexView alignItems="flex-start">
+            <Shimmer height={36} width={80} borderRadius={12} style={styles.valueLoader} />
+            <Shimmer height={20} width={120} borderRadius={8} />
+          </FlexView>
           <Shimmer height={36} width={80} borderRadius={18} />
         </FlexView>
       ) : (
         <>
           <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
-            <TextInput
-              ref={valueInputRef}
-              placeholder="0"
-              placeholderTextColor={Theme['fg-275']}
-              returnKeyType="done"
-              style={[styles.input, { color: Theme['fg-100'] }]}
-              autoCapitalize="none"
-              autoCorrect={false}
-              value={value}
-              onChangeText={handleInputChange}
-              keyboardType="decimal-pad"
-              inputMode="decimal"
-              autoComplete="off"
-              spellCheck={false}
-              selectionColor={Theme['accent-100']}
-              underlineColorAndroid="transparent"
-              selectTextOnFocus={false}
-              numberOfLines={1}
-              editable={editable}
-              autoFocus={autoFocus}
-            />
+            {loadingValues ? (
+              <Shimmer height={36} width={80} borderRadius={12} style={styles.valueLoader} />
+            ) : (
+              <TextInput
+                ref={valueInputRef}
+                placeholder="0"
+                placeholderTextColor={Theme['fg-275']}
+                returnKeyType="done"
+                style={[styles.input, { color: Theme['fg-100'] }]}
+                autoCapitalize="none"
+                autoCorrect={false}
+                value={value}
+                onChangeText={handleInputChange}
+                keyboardType="decimal-pad"
+                inputMode="decimal"
+                autoComplete="off"
+                spellCheck={false}
+                selectionColor={Theme['accent-100']}
+                underlineColorAndroid="transparent"
+                selectTextOnFocus={false}
+                numberOfLines={1}
+                editable={editable}
+                autoFocus={autoFocus}
+              />
+            )}
             <TokenButton
               text={token?.symbol}
               imageUrl={token?.logoUri}
@@ -119,7 +128,9 @@ export function SwapInput({
               chevron
             />
           </FlexView>
-          {(showMax || isMarketValueGreaterThanZero) && (
+          {loadingValues ? (
+            <Shimmer height={20} width={120} borderRadius={8} />
+          ) : showMax || isMarketValueGreaterThanZero ? (
             <FlexView
               flexDirection="row"
               alignItems="center"
@@ -144,7 +155,7 @@ export function SwapInput({
                 </FlexView>
               )}
             </FlexView>
-          )}
+          ) : null}
         </>
       )}
     </FlexView>

package/src/partials/w3m-swap-input/styles.ts

@@ -16,5 +16,8 @@ export default StyleSheet.create({
   sendValue: {
     flex: 1,
     marginRight: Spacing.xs
+  },
+  valueLoader: {
+    marginBottom: Spacing.xs
   }
 });

package/src/views/{w3m-swap-select-token-view → w3m-swap-view/components/select-token-view}/index.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { ScrollView, SectionList, type SectionListData } from 'react-native';
+import { ScrollView, SectionList, View, type SectionListData } from 'react-native';
 import {
   FlexView,
+  IconLink,
   InputText,
   ListToken,
   ListTokenTotalHeight,
@@ -15,33 +16,44 @@ import {
 import {
   AssetUtil,
   ConnectionsController,
-  RouterController,
   SwapController,
+  type SwapControllerState,
+  type SwapInputTarget,
   type SwapTokenWithBalance
 } from '@reown/appkit-core-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { Placeholder } from '../../partials/w3m-placeholder';
+import { useCustomDimensions } from '../../../../hooks/useCustomDimensions';
+import { Placeholder } from '../../../../partials/w3m-placeholder';
 import styles from './styles';
 import { createSections } from './utils';
 
-export function SwapSelectTokenView() {
+interface Props {
+  onClose: () => void;
+  type?: SwapInputTarget;
+}
+
+export function SwapSelectTokenView({ onClose, type }: Props) {
   const { padding } = useCustomDimensions();
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const { sourceToken, suggestedTokens } = useSnapshot(SwapController.state);
+  const { sourceToken, suggestedTokens, myTokensWithBalance } = useSnapshot(
+    SwapController.state
+  ) as SwapControllerState;
+
   const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
   const [tokenSearch, setTokenSearch] = useState<string>('');
-  const isSourceToken = RouterController.state.data?.swapTarget === 'sourceToken';
+  const isSourceToken = type === 'sourceToken';
 
-  const [filteredTokens, setFilteredTokens] = useState(createSections(isSourceToken, tokenSearch));
+  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));
+    setFilteredTokens(createSections(isSourceToken, value, myTokensWithBalance));
   };
 
   const onTokenPress = (token: SwapTokenWithBalance) => {
@@ -53,14 +65,30 @@ export function SwapSelectTokenView() {
         SwapController.swapTokens();
       }
     }
-    RouterController.goBack();
+    onClose();
   };
 
   return (
     <FlexView
-      margin={['l', '0', '2xl', '0']}
-      style={[styles.container, { paddingHorizontal: padding }]}
+      padding={['xl', '0', '0', '0']}
+      style={[
+        styles.container,
+        {
+          paddingHorizontal: padding,
+          backgroundColor: Theme['bg-100']
+        }
+      ]}
     >
+      <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>
         <InputText
           value={tokenSearch}

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

@@ -1,10 +1,15 @@
 import { StyleSheet } from 'react-native';
-import { Spacing } from '@reown/appkit-ui-react-native';
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
   container: {
-    minHeight: 250,
-    maxHeight: 600
+    borderRadius: BorderRadius.l,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    overflow: 'hidden',
+    marginTop: 80,
+    flex: 1
   },
   title: {
     paddingTop: Spacing['2xs']
@@ -26,5 +31,9 @@ export default StyleSheet.create({
   },
   suggestedSeparator: {
     marginVertical: Spacing.s
+  },
+  iconPlaceholder: {
+    height: 32,
+    width: 32
   }
 });

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

@@ -16,14 +16,15 @@ export function filterTokens(tokens?: SwapTokenWithBalance[], searchValue?: stri
   );
 }
 
-export function createSections(isSourceToken: boolean, searchValue: string) {
-  const myTokensFiltered = filterTokens(
-    SwapController.state.myTokensWithBalance ?? [],
-    searchValue
-  );
+export function createSections(
+  isSourceToken: boolean,
+  searchValue: string,
+  balances?: SwapTokenWithBalance[]
+) {
+  const myTokensFiltered = filterTokens(balances ?? [], searchValue);
   const popularFiltered = isSourceToken
     ? []
-    : filterTokens(SwapController.getFilteredPopularTokens() ?? [], searchValue);
+    : filterTokens(SwapController.getFilteredPopularTokens(balances), searchValue);
 
   const sections = [];
   if (myTokensFiltered.length > 0) {