@reown/appkit-react-native 0.0.0-feat-multichain-20250902153701 → 0.0.0-feat-multichain-20250903180809

package/src/connectors/WalletConnectConnector.ts

@@ -207,13 +207,16 @@ export class WalletConnectConnector extends WalletConnector {
       throw new Error('WalletConnectConnector: Provider not initialized. Call init() first.');
     }
 
-    const provider = this.provider as IUniversalProvider;
+    const provider = this.provider;
 
     if (namespace) {
-      // @ts-ignore
       return {
-        ...provider,
-        request: (args: RequestArguments, chainId?: CaipNetworkId) => {
+        ...this.provider,
+        connect: async (params?: any) => provider.connect(params) as Promise<any>,
+        disconnect: provider.disconnect.bind(provider),
+        on: provider.on.bind(provider),
+        off: provider.off.bind(provider),
+        request: async (args: RequestArguments, chainId?: CaipNetworkId) => {
           const _chainId = this.getChainId(namespace);
 
           return provider.request(args, chainId || _chainId);

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['3xl'],
+    minHeight: '30%'
   },
   retryButton: {
     marginTop: Spacing.m

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

@@ -65,7 +65,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   }, [data?.wallet, wcUri]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20}>
+    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
       <FlexView alignItems="center" padding={['2xl', 'm', '3xl', 'm']}>
         <LoadingThumbnail paused={wcError}>
           <WalletImage

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

@@ -2,6 +2,9 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
+  container: {
+    minHeight: '30%'
+  },
   openButton: {
     marginTop: Spacing.m
   },

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

@@ -32,7 +32,7 @@ export function Header() {
       Connect: 'Connect wallet',
       ConnectSocials: 'All socials',
       ConnectingExternal: walletName ?? 'Connect wallet',
-      ConnectingSiwe: undefined,
+      ConnectingSiwe: 'Sign in',
       ConnectingSocial: socialName ?? 'Connecting Social',
       ConnectingWalletConnect: walletName ?? 'WalletConnect',
       GetWallet: 'Get a wallet',
@@ -58,7 +58,7 @@ export function Header() {
     }[_view];
   };
 
-  const noCloseViews = ['OnRampSettings'];
+  const noCloseViews = ['OnRampSettings', 'ConnectingSiwe'];
   const noBackViews = ['UnsupportedChain'];
   const showClose = !noCloseViews.includes(view);
   const header = headings(data, view);

package/src/views/w3m-connecting-external-view/styles.ts

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

package/src/views/w3m-connecting-siwe-view/index.tsx

@@ -5,8 +5,8 @@ import {
   Button,
   DoubleImageLoader,
   FlexView,
-  IconLink,
-  Text
+  Text,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ConnectionsController,
@@ -20,9 +20,11 @@ import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function ConnectingSiweView() {
   const { disconnect } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
   const { metadata } = useSnapshot(OptionsController.state);
   const { activeAddress, identity, walletInfo } = useSnapshot(ConnectionsController.state);
   const [isSigning, setIsSigning] = useState(false);
@@ -84,46 +86,48 @@ export function ConnectingSiweView() {
   };
 
   return (
-    <FlexView padding={['2xl', 's', '3xl', 's']}>
-      <IconLink
-        icon="close"
-        size="md"
-        onPress={onCancel}
-        testID="header-close"
-        style={styles.closeButton}
-      />
-      <Text variant="paragraph-600" numberOfLines={1} center>
-        Sign in
-      </Text>
-      <DoubleImageLoader
-        style={styles.logoContainer}
-        leftImage={dappIcon}
-        rightImage={walletIcon}
-        renderRightPlaceholder={() => (
-          <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
-        )}
-        rightItemStyle={!walletIcon && styles.walletAvatar}
-      />
-      <Text center variant="medium-600" color="fg-100" style={styles.title}>
-        {dappName} needs to connect to your wallet
-      </Text>
-      <Text center variant="small-400" color="fg-200" style={styles.subtitle}>
-        Sign this message to prove you own this wallet and proceed. Cancelling will disconnect you
-      </Text>
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
-        <Button variant="shade" onPress={onCancel} style={styles.button} loading={isDisconnecting}>
-          Cancel
-        </Button>
-        <Button
-          variant="fill"
-          loading={isSigning}
-          disabled={isDisconnecting}
-          onPress={onSign}
-          style={styles.button}
-        >
-          Sign
-        </Button>
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      contentContainerStyle={styles.container}
+    >
+      <FlexView padding={['0', 's', '3xl', 's']}>
+        <DoubleImageLoader
+          style={styles.logoContainer}
+          leftImage={dappIcon}
+          rightImage={walletIcon}
+          renderRightPlaceholder={() => (
+            <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
+          )}
+          rightItemStyle={!walletIcon && styles.walletAvatar}
+        />
+        <Text center variant="medium-600" color="fg-100" style={styles.title}>
+          {dappName} needs to connect to your wallet
+        </Text>
+        <Text center variant="small-400" color="fg-200" style={styles.subtitle}>
+          Sign this message to prove you own this wallet and proceed. Cancelling will disconnect you
+        </Text>
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
+          <Button
+            variant="shade"
+            onPress={onCancel}
+            style={styles.button}
+            loading={isDisconnecting}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="fill"
+            loading={isSigning}
+            disabled={isDisconnecting}
+            onPress={onSign}
+            style={styles.button}
+          >
+            Sign
+          </Button>
+        </FlexView>
       </FlexView>
-    </FlexView>
+    </ScrollView>
   );
 }

package/src/views/w3m-connecting-siwe-view/styles.ts

@@ -2,6 +2,9 @@ import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
+  container: {
+    minHeight: '30%'
+  },
   logoContainer: {
     marginTop: Spacing.xl,
     marginBottom: Spacing.m
@@ -16,13 +19,6 @@ export default StyleSheet.create({
     marginHorizontal: '10%',
     marginVertical: Spacing.l
   },
-  closeButton: {
-    alignSelf: 'flex-end',
-    right: Spacing.xl,
-    top: Spacing.l,
-    position: 'absolute',
-    zIndex: 2
-  },
   walletAvatar: {
     borderRadius: BorderRadius.full
   }

package/src/views/w3m-connecting-social-view/index.tsx

@@ -75,7 +75,12 @@ export function ConnectingSocialView() {
   }, [wcUri, onConnect]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      contentContainerStyle={styles.container}
+    >
       <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '2xl', 'l']}>
         <LoadingThumbnail paused={!!error}>
           <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />

package/src/views/w3m-connecting-social-view/styles.ts

@@ -2,6 +2,9 @@ import { StyleSheet } from 'react-native';
 import { Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
+  container: {
+    minHeight: '30%'
+  },
   errorIcon: {
     position: 'absolute',
     bottom: 8,

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

@@ -56,16 +56,14 @@ export function SwapSelectTokenModal({ onClose, type, style, visible }: Props) {
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const isSourceToken = type === 'sourceToken';
 
-  const [filteredTokens, setFilteredTokens] = useState(
-    createSections(isSourceToken, tokenSearch, myTokensWithBalance)
-  );
+  const filteredTokens = 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) => {