@reown/appkit-react-native 2.0.0-alpha.1 → 2.0.0-alpha.2

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

@@ -8,8 +8,7 @@ import {
 } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
-  AccountController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
@@ -19,23 +18,25 @@ import {
   Text,
   ListToken,
   useTheme,
-  Spacing
+  Spacing,
+  LoadingSpinner
 } from '@reown/appkit-ui-react-native';
 
 interface Props {
   style?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
 }
 
-export function AccountTokens({ style }: Props) {
+export function AccountTokens({ style, isLoading }: Props) {
   const Theme = useTheme();
   const [refreshing, setRefreshing] = useState(false);
-  const { tokenBalance } = useSnapshot(AccountController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
-  const onRefresh = useCallback(async () => {
+  const getBalance = useCallback(async () => {
     setRefreshing(true);
-    AccountController.fetchTokenBalance();
+    await ConnectionsController.fetchBalance();
     setRefreshing(false);
   }, []);
 
@@ -43,23 +44,26 @@ export function AccountTokens({ style }: Props) {
     RouterController.push('WalletReceive');
   };
 
-  if (!tokenBalance?.length) {
+  if (!balances?.length) {
     return (
-      <ListItem
-        icon="arrowBottomCircle"
-        iconColor="magenta-100"
-        onPress={onReceivePress}
-        style={styles.receiveButton}
-      >
-        <FlexView flexDirection="column" alignItems="flex-start">
-          <Text variant="paragraph-500" color="fg-100">
-            Receive funds
-          </Text>
-          <Text variant="small-400" color="fg-200">
-            Transfer tokens on your wallet
-          </Text>
-        </FlexView>
-      </ListItem>
+      <>
+        <ListItem
+          icon="arrowBottomCircle"
+          iconColor="magenta-100"
+          onPress={onReceivePress}
+          style={styles.receiveButton}
+        >
+          <FlexView flexDirection="column" alignItems="flex-start">
+            <Text variant="paragraph-500" color="fg-100">
+              Receive funds
+            </Text>
+            <Text variant="small-400" color="fg-200">
+              Transfer tokens on your wallet
+            </Text>
+          </FlexView>
+        </ListItem>
+        {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
+      </>
     );
   }
 
@@ -70,24 +74,25 @@ export function AccountTokens({ style }: Props) {
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
-          onRefresh={onRefresh}
+          onRefresh={getBalance}
           tintColor={Theme['accent-100']}
           colors={[Theme['accent-100']]}
         />
       }
     >
-      {tokenBalance.map(token => (
+      {balances.map(token => (
         <ListToken
-          key={token.name}
-          name={token.name}
+          key={token.symbol}
+          name={token.name || 'Unknown'}
           imageSrc={token.iconUrl}
           networkSrc={networkImage}
           value={token.value}
-          amount={token.quantity.numeric}
+          amount={token.quantity?.numeric}
           currency={token.symbol}
           pressable={false}
         />
       ))}
+      {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
     </ScrollView>
   );
 }
@@ -96,5 +101,8 @@ const styles = StyleSheet.create({
   receiveButton: {
     width: 'auto',
     marginHorizontal: Spacing.s
+  },
+  loadingSpinner: {
+    marginTop: Spacing.m
   }
 });

package/src/partials/w3m-account-wallet-features/index.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import { Balance, FlexView, IconLink, Tabs } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ConnectionsController,
   ConstantsUtil,
   CoreHelperUtil,
@@ -18,15 +17,18 @@ import { AccountTokens } from '../w3m-account-tokens';
 import styles from './styles';
 
 export interface AccountWalletFeaturesProps {
-  value: string;
+  isBalanceLoading: boolean;
 }
 
-export function AccountWalletFeatures() {
+export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeaturesProps) {
   const [activeTab, setActiveTab] = useState(0);
-  const { tokenBalance } = useSnapshot(AccountController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const balance = CoreHelperUtil.calculateAndFormatBalance(tokenBalance as BalanceType[]);
+  const { activeNetwork, balances, activeNamespace } = useSnapshot(ConnectionsController.state);
+  const balance = CoreHelperUtil.calculateAndFormatBalance(balances as BalanceType[]);
+  const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+  const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+  const showSend =
+    activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
   const isSwapsEnabled =
     features?.swaps &&
     activeNetwork?.caipNetworkId &&
@@ -43,9 +45,7 @@ export function AccountWalletFeatures() {
     EventsController.sendEvent({
       type: 'track',
       event: 'CLICK_TRANSACTIONS',
-      properties: {
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { isSmartAccount }
     });
   };
 
@@ -54,10 +54,7 @@ export function AccountWalletFeatures() {
     EventsController.sendEvent({
       type: 'track',
       event: 'OPEN_SWAP',
-      properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { network, isSmartAccount }
     });
     RouterController.push('Swap');
   };
@@ -66,10 +63,7 @@ export function AccountWalletFeatures() {
     EventsController.sendEvent({
       type: 'track',
       event: 'OPEN_SEND',
-      properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { network, isSmartAccount }
     });
     RouterController.push('WalletSend');
   };
@@ -130,22 +124,26 @@ export function AccountWalletFeatures() {
           style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
           onPress={onReceivePress}
         />
-        <IconLink
-          icon="paperplane"
-          size="lg"
-          iconColor="accent-100"
-          background
-          backgroundColor="accent-glass-010"
-          pressedColor="accent-glass-020"
-          style={[styles.action, styles.actionRight]}
-          onPress={onSendPress}
-        />
+        {showSend && (
+          <IconLink
+            icon="paperplane"
+            size="lg"
+            iconColor="accent-100"
+            background
+            backgroundColor="accent-glass-010"
+            pressedColor="accent-glass-020"
+            style={[styles.action, styles.actionRight]}
+            onPress={onSendPress}
+          />
+        )}
       </FlexView>
       <FlexView style={styles.tab}>
         <Tabs tabs={['Tokens', 'Activity']} onTabChange={onTabChange} />
       </FlexView>
       <FlexView padding={['m', '0', '0', '0']} style={styles.tabContainer}>
-        {activeTab === 0 && <AccountTokens style={styles.tabContent} />}
+        {activeTab === 0 && (
+          <AccountTokens style={styles.tabContent} isLoading={isBalanceLoading} />
+        )}
         {activeTab === 1 && <AccountActivity style={styles.tabContent} />}
       </FlexView>
     </FlexView>

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

@@ -3,12 +3,12 @@ import { useSnapshot } from 'valtio';
 import {
   AssetUtil,
   ConnectionController,
-  ConnectorController,
   EventsController,
   OptionsController,
   SnackController
 } from '@reown/appkit-core-react-native';
 import { FlexView, Link, QrCode, Text, Spacing } from '@reown/appkit-ui-react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
@@ -37,9 +37,8 @@ export function ConnectingQrCode() {
       }
     });
 
-    const connectors = ConnectorController.state.connectors;
-    const connector = connectors.find(c => c.type === 'WALLET_CONNECT');
-    const url = AssetUtil.getConnectorImage(connector);
+    //TODO: check this
+    const url = AssetUtil.getConnectorImage(ConstantsUtil.WALLET_CONNECT_IMAGE_ID);
     ConnectionController.setConnectedWalletImageUrl(url);
   };
 

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

@@ -3,10 +3,7 @@ import {
   RouterController,
   ModalController,
   EventsController,
-  type RouterControllerState,
-  ConnectionController,
-  ConnectorController,
-  type AppKitFrameProvider
+  type RouterControllerState
 } from '@reown/appkit-core-react-native';
 import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
 import { StringUtil } from '@reown/appkit-common-react-native';
@@ -21,11 +18,10 @@ export function Header() {
   };
 
   const headings = (_data: RouterControllerState['data'], _view: RouterControllerState['view']) => {
-    const connectorName = _data?.connector?.name;
     const walletName = _data?.wallet?.name;
     const networkName = _data?.network?.name;
-    const socialName = ConnectionController.state.selectedSocialProvider
-      ? StringUtil.capitalize(ConnectionController.state.selectedSocialProvider)
+    const socialName = _data?.socialProvider
+      ? StringUtil.capitalize(_data?.socialProvider)
       : undefined;
 
     return {
@@ -34,14 +30,10 @@ export function Header() {
       AllWallets: 'All wallets',
       Connect: 'Connect wallet',
       ConnectSocials: 'All socials',
-      ConnectingExternal: connectorName ?? 'Connect wallet',
+      ConnectingExternal: walletName ?? 'Connect wallet',
       ConnectingSiwe: undefined,
-      ConnectingFarcaster: socialName ?? 'Connecting Social',
       ConnectingSocial: socialName ?? 'Connecting Social',
       ConnectingWalletConnect: walletName ?? 'WalletConnect',
-      Create: 'Create wallet',
-      EmailVerifyDevice: ' ',
-      EmailVerifyOtp: 'Confirm email',
       GetWallet: 'Get a wallet',
       Networks: 'Select network',
       OnRamp: undefined,
@@ -51,15 +43,10 @@ export function Header() {
       OnRampTransaction: ' ',
       SwitchNetwork: networkName ?? 'Switch network',
       Swap: 'Swap',
-      SwapSelectToken: 'Select token',
       SwapPreview: 'Review swap',
       Transactions: 'Activity',
       UnsupportedChain: 'Switch network',
-      UpdateEmailPrimaryOtp: 'Confirm current email',
-      UpdateEmailSecondaryOtp: 'Confirm new email',
-      UpdateEmailWallet: 'Edit email',
       UpgradeEmailWallet: 'Upgrade wallet',
-      UpgradeToSmartAccount: undefined,
       WalletCompatibleNetworks: 'Compatible networks',
       WalletReceive: 'Receive',
       WalletSend: 'Send',
@@ -75,23 +62,11 @@ export function Header() {
   const header = headings(data, view);
 
   const checkSocial = () => {
-    if (
-      RouterController.state.view === 'ConnectingFarcaster' ||
-      RouterController.state.view === 'ConnectingSocial'
-    ) {
-      const socialProvider = ConnectionController.state.selectedSocialProvider;
-      const authProvider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-
-      if (authProvider && socialProvider === 'farcaster') {
-        // TODO: remove this once Farcaster session refresh is implemented
-        // @ts-expect-error
-        authProvider.webviewRef?.current?.reload();
-      }
-
+    if (RouterController.state.view === 'ConnectingSocial') {
       EventsController.sendEvent({
         type: 'track',
         event: 'SOCIAL_LOGIN_CANCELED',
-        properties: { provider: ConnectionController.state.selectedSocialProvider! }
+        properties: { provider: RouterController.state.data?.socialProvider! }
       });
     }
   };

package/src/partials/w3m-selector-modal/index.tsx

@@ -13,7 +13,7 @@ import {
   useTheme
 } from '@reown/appkit-ui-react-native';
 import styles from './styles';
-import { AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
+import { AssetController, ConnectionsController } from '@reown/appkit-core-react-native';
 
 interface SelectorModalProps {
   title?: string;
@@ -46,7 +46,8 @@ export function SelectorModal({
 }: SelectorModalProps) {
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const renderSeparator = () => {
     return <View style={{ height: SEPARATOR_HEIGHT }} />;

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,9 @@ 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);
-
-    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);
-    }
+    SendController.setReceiverAddress(search);
+    SendController.setReceiverProfileName(undefined);
+    SendController.setReceiverProfileImageUrl(undefined);
   };
 
   const { debouncedCallback: onDebounceSearch } = useDebounceCallback({

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

@@ -1,8 +1,15 @@
 import { useRef, useState } from 'react';
 import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
-import { FlexView, Link, Text, useTheme, TokenButton } from '@reown/appkit-ui-react-native';
+import {
+  FlexView,
+  Link,
+  Text,
+  useTheme,
+  TokenButton,
+  Shimmer
+} from '@reown/appkit-ui-react-native';
 import { NumberUtil, type Balance } from '@reown/appkit-common-react-native';
-import { ConstantsUtil, SendController } from '@reown/appkit-core-react-native';
+import { SendController } from '@reown/appkit-core-react-native';
 
 import { getMaxAmount, getSendValue } from './utils';
 import styles from './styles';
@@ -10,24 +17,24 @@ import styles from './styles';
 export interface SendInputTokenProps {
   token?: Balance;
   sendTokenAmount?: number;
-  gasPrice?: number;
   style?: StyleProp<ViewStyle>;
   onTokenPress?: () => void;
+  loading?: boolean;
 }
 
 export function SendInputToken({
   token,
   sendTokenAmount,
-  gasPrice,
   style,
-  onTokenPress
+  onTokenPress,
+  loading
 }: SendInputTokenProps) {
   const Theme = useTheme();
   const valueInputRef = useRef<TextInput | null>(null);
   const [inputValue, setInputValue] = useState<string | undefined>(sendTokenAmount?.toString());
   const sendValue = getSendValue(token, sendTokenAmount);
   const maxAmount = getMaxAmount(token);
-  const maxError = token && sendTokenAmount && sendTokenAmount > Number(token.quantity.numeric);
+  const maxError = token && sendTokenAmount && sendTokenAmount > Number(token?.quantity?.numeric);
 
   const onInputChange = (value: string) => {
     const formattedValue = value.replace(/,/g, '.');
@@ -39,26 +46,17 @@ export function SendInputToken({
   };
 
   const onMaxPress = () => {
-    if (token && gasPrice) {
-      const isNetworkToken =
-        token.address === undefined ||
-        Object.values(ConstantsUtil.NATIVE_TOKEN_ADDRESS).some(
-          nativeAddress => token?.address?.split(':')[2] === nativeAddress
-        );
-
-      const numericGas = NumberUtil.bigNumber(gasPrice).shiftedBy(-token.quantity.decimals);
-
-      const maxValue = isNetworkToken
-        ? NumberUtil.bigNumber(token.quantity.numeric).minus(numericGas)
-        : NumberUtil.bigNumber(token.quantity.numeric);
-
+    if (token?.quantity?.numeric) {
+      const maxValue = NumberUtil.bigNumber(token.quantity.numeric);
       SendController.setTokenAmount(Number(maxValue.toFixed(20)));
       setInputValue(maxValue.toFixed(20));
       valueInputRef.current?.blur();
     }
   };
 
-  return (
+  return loading ? (
+    <Shimmer width="100%" height={100} borderRadius={16} style={styles.inputLoading} />
+  ) : (
     <FlexView
       style={[
         styles.container,

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

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

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

@@ -2,7 +2,7 @@ import { type Balance, NumberUtil } from '@reown/appkit-common-react-native';
 import { UiUtil } from '@reown/appkit-ui-react-native';
 
 export function getSendValue(token?: Balance, sendTokenAmount?: number) {
-  if (token && sendTokenAmount) {
+  if (token?.price && sendTokenAmount) {
     const price = token.price;
     const totalValue = price * sendTokenAmount;
 
@@ -13,7 +13,7 @@ export function getSendValue(token?: Balance, sendTokenAmount?: number) {
 }
 
 export function getMaxAmount(token?: Balance) {
-  if (token) {
+  if (token?.quantity?.numeric) {
     return NumberUtil.roundNumber(Number(token.quantity.numeric), 6, 5);
   }
 

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

@@ -13,7 +13,7 @@ const getIcon = (variant: SnackControllerState['variant']) => {
 };
 
 export function Snackbar() {
-  const { open, message, variant, long } = useSnapshot(SnackController.state);
+  const { open, message, variant } = useSnapshot(SnackController.state);
   const componentOpacity = useMemo(() => new Animated.Value(0), []);
 
   useEffect(() => {
@@ -23,20 +23,14 @@ export function Snackbar() {
         duration: 150,
         useNativeDriver: true
       }).start();
-      setTimeout(
-        () => {
-          Animated.timing(componentOpacity, {
-            toValue: 0,
-            duration: 300,
-            useNativeDriver: true
-          }).start(() => {
-            SnackController.hide();
-          });
-        },
-        long ? 15000 : 2200
-      );
+    } else {
+      Animated.timing(componentOpacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      }).start();
     }
-  }, [open, long, componentOpacity]);
+  }, [open, componentOpacity]);
 
   return (
     <SnackbarComponent

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
   }
 });