@reown/appkit-react-native 0.0.0-feat-coinbase-20250723185200 → 0.0.0-feat-multichain-20250725133522

package/src/AppKit.ts

@@ -37,14 +37,14 @@ import {
   type AppKitSIWEClient,
   type ConnectionProperties,
   type AccountType,
+  type AppKitOpenOptions,
   ConstantsUtil
 } from '@reown/appkit-common-react-native';
+import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { WalletConnectConnector } from './connectors/WalletConnectConnector';
 import { WcHelpersUtil } from './utils/HelpersUtil';
 import { NetworkUtil } from './utils/NetworkUtil';
-import { SIWEController } from '@reown/appkit-siwe-react-native';
-import type { OpenOptions } from './client';
 
 interface AppKitConfig {
   projectId: string;
@@ -280,7 +280,7 @@ export class AppKit {
     }
   }
 
-  open(options?: OpenOptions) {
+  open(options?: AppKitOpenOptions) {
     ModalController.open(options);
   }
 
@@ -579,12 +579,12 @@ export class AppKit {
       SIWEController.setSIWEClient(options.siweConfig);
     }
 
-    // if (
-    //   (options.features?.onramp === true || options.features?.onramp === undefined) &&
-    //   (options.metadata?.redirect?.universal || options.metadata?.redirect?.native)
-    // ) {
-    //   OptionsController.setIsOnRampEnabled(true);
-    // }
+    if (
+      (options.features?.onramp === true || options.features?.onramp === undefined) &&
+      (options.metadata?.redirect?.universal || options.metadata?.redirect?.native)
+    ) {
+      OptionsController.setIsOnRampEnabled(true);
+    }
   }
 
   private async initActiveNamespace() {

package/src/index.ts

@@ -15,7 +15,6 @@ export {
 export { AppKit } from './modal/w3m-modal';
 
 /********** Types **********/
-export type { LibraryOptions, ScaffoldOptions } from './client';
 export type * from '@reown/appkit-core-react-native';
 export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
 
@@ -33,7 +32,3 @@ export { bitcoin, bitcoinTestnet } from '@reown/appkit-common-react-native';
 /********** Main **********/
 export { createAppKit } from './AppKit';
 export { AppKitProvider } from './AppKitContext';
-
-// TODO: REMOVE
-/********** To be removed **********/
-export { CoreHelperUtil } from '@reown/appkit-core-react-native';

package/src/modal/w3m-account-button/index.tsx

@@ -1,4 +1,5 @@
 import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
   AccountController,
   CoreHelperUtil,
@@ -7,10 +8,7 @@ import {
   ConnectionsController,
   AssetController
 } from '@reown/appkit-core-react-native';
-
 import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
-import { ApiController } from '@reown/appkit-core-react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface AccountButtonProps {
   balance?: 'show' | 'hide';
@@ -39,7 +37,6 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
         address={address?.split(':')[2] ?? ''}
         profileName={profileName}
         networkSrc={networkImage}
-        imageHeaders={ApiController._getApiHeaders()}
         avatarSrc={profileImage}
         disabled={disabled}
         style={style}

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

@@ -8,9 +8,9 @@ import {
   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';
-import { PresetsUtil } from '@reown/appkit-common-react-native';
 
 export function ConnectingQrCode() {
   const { wcUri } = useSnapshot(ConnectionController.state);
@@ -38,7 +38,7 @@ export function ConnectingQrCode() {
     });
 
     //TODO: check this
-    const url = AssetUtil.getConnectorImage(PresetsUtil.ConnectorImageIds['WALLET_CONNECT']);
+    const url = AssetUtil.getConnectorImage(ConstantsUtil.WALLET_CONNECT_IMAGE_ID);
     ConnectionController.setConnectedWalletImageUrl(url);
   };
 

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

@@ -18,9 +18,6 @@ export function Header() {
   };
 
   const headings = (_data: RouterControllerState['data'], _view: RouterControllerState['view']) => {
-    // TODO: check if this is needed wiht Coinbase
-    // const connectorName = _data?.connector?.name;
-    const connectorName = undefined;
     const walletName = _data?.wallet?.name;
     const networkName = _data?.network?.name;
     const socialName = _data?.socialProvider
@@ -33,7 +30,7 @@ export function Header() {
       AllWallets: 'All wallets',
       Connect: 'Connect wallet',
       ConnectSocials: 'All socials',
-      ConnectingExternal: connectorName ?? 'Connect wallet',
+      ConnectingExternal: walletName ?? 'Connect wallet',
       ConnectingSiwe: undefined,
       ConnectingSocial: socialName ?? 'Connecting Social',
       ConnectingWalletConnect: walletName ?? 'WalletConnect',

package/src/utils/HelpersUtil.ts

@@ -1,10 +1,11 @@
 import type { Namespace, NamespaceConfig } from '@walletconnect/universal-provider';
-import type {
-  AppKitNetwork,
-  CaipNetworkId,
-  ChainNamespace
+import {
+  type AppKitNetwork,
+  type CaipNetworkId,
+  type ChainNamespace,
+  solana,
+  solanaDevnet
 } from '@reown/appkit-common-react-native';
-import { solana, solanaDevnet } from '@reown/appkit-common-react-native';
 
 export const DEFAULT_METHODS = {
   solana: [

package/src/utils/NetworkUtil.ts

@@ -1,5 +1,9 @@
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import type { AppKitNetwork, CaipNetworkId, Network } from '@reown/appkit-common-react-native';
+import {
+  type AppKitNetwork,
+  type CaipNetworkId,
+  ConstantsUtil,
+  type Network
+} from '@reown/appkit-common-react-native';
 import type { CaipNamespaces } from '@reown/appkit-core-react-native';
 
 export const NetworkUtil = {

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

@@ -43,6 +43,9 @@ export function ConnectingExternalView() {
           await connect('phantom');
         } else if (wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID) {
           await connect('coinbase');
+        } else {
+          // All other wallets are handled by WalletConnect connector
+          return;
         }
         UiUtil.storeRecentWallet(wallet);
         ConnectionController.setPressedWallet(wallet);

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import {
   Avatar,
@@ -17,11 +18,10 @@ import {
   RouterController,
   SnackController
 } from '@reown/appkit-core-react-native';
-
-import { useState } from 'react';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
-import styles from './styles';
+
 import { useAppKit } from '../../AppKitContext';
+import styles from './styles';
 
 export function ConnectingSiweView() {
   const { disconnect } = useAppKit();

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

@@ -9,10 +9,9 @@ import {
   Text,
   useTheme,
   Icon,
-  Image,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Image } from 'react-native';
 
 export const ITEM_HEIGHT = 60;
 
@@ -42,8 +41,8 @@ export function Currency({ onPress, item, selected, title, subtitle, testID }: P
       <FlexView flexDirection="row" alignItems="center" justifyContent="space-between" padding="xs">
         <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start">
           <Image
-            source={item.symbolImageUrl}
-            style={[styles.logo, { backgroundColor: Theme['fg-100'] }]}
+            source={{ uri: item.symbolImageUrl }}
+            style={[styles.logo, { backgroundColor: Theme['inverse-100'] }]}
           />
           <FlexView>
             <Text variant="paragraph-500" color="fg-100" numberOfLines={1} ellipsizeMode="tail">

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

@@ -10,8 +10,7 @@ import {
   Spacing,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { useEffect, useState } from 'react';
-import { useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 export interface InputTokenProps {
   style?: StyleProp<ViewStyle>;
@@ -91,7 +90,11 @@ export function CurrencyInput({
       <FlexView alignItems="center" margin={['m', '0', '0', '0']}>
         <FlexView flexDirection="row" alignItems="center">
           <Text style={[styles.input, { color: Theme[amountColor] }]}>{displayValue}</Text>
-          <Text variant="large-400" color={isAmountError ? 'error-100' : 'fg-200'}>
+          <Text
+            variant="large-400"
+            color={isAmountError ? 'error-100' : 'fg-200'}
+            testID="currency-input-symbol"
+          >
             {symbol || ''}
           </Text>
         </FlexView>
@@ -114,32 +117,34 @@ export function CurrencyInput({
           )}
         </FlexView>
       </FlexView>
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
-        {suggestedValues?.map((suggestion: number) => {
-          const isSelected = suggestion.toString() === value;
+      {suggestedValues && suggestedValues.length > 0 && (
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
+          {suggestedValues?.map((suggestion: number) => {
+            const isSelected = suggestion.toString() === value;
 
-          return (
-            <Button
-              key={suggestion}
-              testID={`suggested-value-${suggestion}`}
-              style={[
-                styles.suggestedValue,
-                isSelected && {
-                  ...styles.selectedValue,
-                  backgroundColor: Theme['accent-glass-020'],
-                  borderColor: Theme['accent-100']
-                }
-              ]}
-              variant="shade"
-              onPress={() => onSuggestedValuePress?.(suggestion)}
-            >
-              <Text variant="small-400" color="fg-100">
-                {`${suggestion} ${symbol ?? ''}`}
-              </Text>
-            </Button>
-          );
-        })}
-      </FlexView>
+            return (
+              <Button
+                key={suggestion}
+                testID={`suggested-value-${suggestion}`}
+                style={[
+                  styles.suggestedValue,
+                  isSelected && {
+                    ...styles.selectedValue,
+                    backgroundColor: Theme['accent-glass-020'],
+                    borderColor: Theme['accent-100']
+                  }
+                ]}
+                variant="shade"
+                onPress={() => onSuggestedValuePress?.(suggestion)}
+              >
+                <Text variant="small-400" color="fg-100">
+                  {`${suggestion} ${symbol ?? ''}`}
+                </Text>
+              </Button>
+            );
+          })}
+        </FlexView>
+      )}
       <Separator color="gray-glass-020" style={styles.separator} />
       <NumericKeyboard onKeyPress={handleKeyPress} />
     </FlexView>

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

@@ -1,7 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { ModalController, RouterController } from '@reown/appkit-core-react-native';
-import { IconLink, Text } from '@reown/appkit-ui-react-native';
-import { FlexView } from '@reown/appkit-ui-react-native';
+import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
 
 interface HeaderProps {
   onSettingsPress: () => void;

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

@@ -20,11 +20,11 @@ export function LoadingView() {
 
           {/* Currency Input Area */}
           <FlexView margin={['m', '0', 'm', '0']}>
-            <Shimmer width="100%" height={370} borderRadius={16} />
+            <Shimmer width="100%" height={323} borderRadius={16} />
           </FlexView>
 
           {/* Payment Method Button */}
-          <Shimmer width="100%" height={64} borderRadius={16} style={styles.paymentMethodButton} />
+          <Shimmer width="100%" height={64} borderRadius={16} style={styles.paymentButtonMock} />
 
           {/* Action Buttons */}
           <FlexView

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

@@ -0,0 +1,137 @@
+import {
+  BorderRadius,
+  FlexView,
+  Icon,
+  Image,
+  LoadingSpinner,
+  Pressable,
+  Spacing,
+  Text,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet, View } from 'react-native';
+
+interface PaymentButtonProps {
+  disabled?: boolean;
+  loading?: boolean;
+  title: string;
+  subtitle?: string;
+  paymentLogo?: string;
+  providerLogo?: string;
+  onPress: () => void;
+  testID?: string;
+}
+
+function PaymentButton({
+  disabled,
+  loading,
+  title,
+  subtitle,
+  paymentLogo,
+  providerLogo,
+  onPress,
+  testID
+}: PaymentButtonProps) {
+  const Theme = useTheme();
+  const backgroundColor = Theme['gray-glass-005'];
+
+  return (
+    <Pressable
+      disabled={disabled || loading}
+      onPress={onPress}
+      style={styles.pressable}
+      testID={testID}
+    >
+      <FlexView
+        style={[styles.container, { backgroundColor }]}
+        alignItems="center"
+        justifyContent="space-between"
+        flexDirection="row"
+      >
+        <FlexView
+          alignItems="center"
+          justifyContent="center"
+          style={[styles.iconContainer, { backgroundColor: Theme['bg-300'] }]}
+        >
+          {paymentLogo ? (
+            <Image
+              source={paymentLogo}
+              style={styles.paymentLogo}
+              resizeMethod="resize"
+              resizeMode="contain"
+            />
+          ) : (
+            <Icon name="card" size="lg" />
+          )}
+        </FlexView>
+        <FlexView
+          flexGrow={1}
+          flexDirection="column"
+          alignItems="flex-start"
+          margin={['0', '0', '0', 's']}
+        >
+          <Text variant="paragraph-400" color="fg-100">
+            {title}
+          </Text>
+          {subtitle && (
+            <FlexView flexDirection="row" alignItems="center" margin={['4xs', '0', '0', '0']}>
+              {providerLogo && (
+                <>
+                  <Text variant="small-400" color="fg-150">
+                    via
+                  </Text>
+                  <Image
+                    source={providerLogo}
+                    style={styles.providerLogo}
+                    resizeMethod="resize"
+                    resizeMode="contain"
+                  />
+                </>
+              )}
+              <Text variant="small-400" color="fg-150">
+                {subtitle}
+              </Text>
+            </FlexView>
+          )}
+        </FlexView>
+        {loading ? (
+          <LoadingSpinner size="md" color="fg-200" style={styles.rightIcon} />
+        ) : disabled ? (
+          <View />
+        ) : (
+          <Icon name="chevronRight" size="md" color="fg-200" style={styles.rightIcon} />
+        )}
+      </FlexView>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressable: {
+    borderRadius: BorderRadius.xs
+  },
+  container: {
+    padding: Spacing.s,
+    borderRadius: BorderRadius.xs
+  },
+  iconContainer: {
+    height: 40,
+    width: 40,
+    borderRadius: BorderRadius['3xs']
+  },
+  paymentLogo: {
+    height: 24,
+    width: 24
+  },
+  providerLogo: {
+    height: 16,
+    width: 16,
+    marginHorizontal: Spacing['4xs'],
+    borderRadius: BorderRadius['5xs']
+  },
+  rightIcon: {
+    marginRight: Spacing.xs
+  }
+});
+
+export default PaymentButton;

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

@@ -12,7 +12,7 @@ import {
 } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
-export const ITEM_SIZE = 85;
+export const ITEM_SIZE = 100;
 
 interface Props {
   onPress: (item: OnRampPaymentMethod) => void;
@@ -47,7 +47,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
           source={item.logos[themeMode ?? 'light']}
           style={styles.logo}
           resizeMethod="resize"
-          resizeMode="center"
+          resizeMode="contain"
         />
         {selected && (
           <IconBox
@@ -61,7 +61,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
           />
         )}
       </FlexView>
-      <Text variant="tiny-400" color="fg-100" numberOfLines={1} style={styles.text}>
+      <Text variant="tiny-400" color="fg-100" numberOfLines={2} style={styles.text}>
         {item.name}
       </Text>
     </Pressable>
@@ -71,8 +71,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
 const styles = StyleSheet.create({
   container: {
     height: ITEM_SIZE,
-    width: ITEM_SIZE,
-    justifyContent: 'center',
+    width: 85,
     alignItems: 'center'
   },
   logoContainer: {
@@ -82,8 +81,8 @@ const styles = StyleSheet.create({
     marginBottom: Spacing['4xs']
   },
   logo: {
-    width: 22,
-    height: 22
+    width: 26,
+    height: 26
   },
   checkmark: {
     borderRadius: BorderRadius.full,
@@ -92,6 +91,8 @@ const styles = StyleSheet.create({
     right: -10
   },
   text: {
-    marginTop: Spacing.xs
+    marginTop: Spacing.xs,
+    paddingHorizontal: Spacing['3xs'],
+    textAlign: 'center'
   }
 });

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

@@ -20,17 +20,19 @@ interface Props {
   logoURL?: string;
   onQuotePress: (item: OnRampQuote) => void;
   selected?: boolean;
+  testID?: string;
 }
 
 export const ITEM_HEIGHT = 64;
 
-export function Quote({ item, logoURL, onQuotePress, selected, tagText }: Props) {
+export function Quote({ item, logoURL, onQuotePress, selected, tagText, testID }: Props) {
   const Theme = useTheme();
 
   return (
     <Pressable
       style={[styles.container, selected && { borderColor: Theme['accent-100'] }]}
       onPress={() => onQuotePress(item)}
+      testID={testID}
     >
       <FlexView
         justifyContent="space-between"
@@ -60,7 +62,8 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText }: Props)
               )}
             </FlexView>
             <Text variant="tiny-500">
-              {NumberUtil.roundNumber(item.destinationAmount, 6, 5)} {item.destinationCurrencyCode}
+              {NumberUtil.roundNumber(item.destinationAmount, 6, 5)}{' '}
+              {item.destinationCurrencyCode?.split('_')[0]}
             </Text>
           </FlexView>
         </FlexView>