@reown/appkit-react-native 0.0.0-fix-ui-changes-20250829161224 → 0.0.0-fix-ui-changes-20250829201240

package/src/partials/w3m-selector-modal/styles.ts

@@ -8,20 +8,19 @@ export default StyleSheet.create({
     justifyContent: 'flex-end'
   },
   header: {
-    marginBottom: Spacing.s,
-    paddingHorizontal: Spacing.m
+    paddingTop: Spacing['2xs'],
+    paddingBottom: Spacing.s
+  },
+  headerTop: {
+    paddingHorizontal: Spacing.m,
+    paddingBottom: Spacing.xs
   },
   container: {
     borderTopLeftRadius: BorderRadius.l,
-    borderTopRightRadius: BorderRadius.l,
-    paddingTop: Spacing.m
-  },
-  selectedContainer: {
-    paddingHorizontal: Spacing.m
+    borderTopRightRadius: BorderRadius.l
   },
   listContent: {
-    paddingTop: Spacing.s,
-    paddingHorizontal: Spacing.m
+    paddingTop: Spacing.s
   },
   iconPlaceholder: {
     height: 32,
@@ -37,6 +36,6 @@ export default StyleSheet.create({
     marginHorizontal: Spacing.s
   },
   separator: {
-    marginTop: Spacing.m
+    marginVertical: Spacing.xs
   }
 });

package/src/views/w3m-account-default-view/index.tsx

@@ -278,7 +278,7 @@ export function AccountDefaultView() {
                 testID="button-onramp"
                 style={styles.actionButton}
               >
-                <Text color="fg-100">Buy crypto</Text>
+                <Text color="fg-100">Buy Crypto</Text>
               </ListItem>
             ) : null}
             {showSend ? (
@@ -332,7 +332,7 @@ export function AccountDefaultView() {
                 loading={loading}
               >
                 <Text color="fg-100">{`Switch to your ${
-                  accountType === 'eoa' ? 'smart account' : 'EOA'
+                  accountType === 'eoa' ? 'Smart Account' : 'EOA'
                 }`}</Text>
               </ListItem>
             ) : null}

package/src/views/w3m-onramp-settings-view/components/Country.tsx

@@ -7,24 +7,29 @@ import {
   Icon,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
 interface Props {
   onPress: (item: OnRampCountry) => void;
   item: OnRampCountry;
   selected: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 export const ITEM_HEIGHT = 60;
 
-export function Country({ onPress, item, selected }: Props) {
+export function Country({ onPress, item, selected, style }: Props) {
   const handlePress = () => {
     onPress(item);
   };
 
   return (
-    <Pressable onPress={handlePress} style={styles.container} backgroundColor="transparent">
+    <Pressable
+      onPress={handlePress}
+      style={[styles.container, style]}
+      backgroundColor="transparent"
+    >
       <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start" padding="s">
         <FlexView style={styles.imageContainer}>
           {item.flagImageUrl && SvgUri ? (

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

@@ -55,6 +55,7 @@ export function OnRampSettingsView() {
           item={parsedItem}
           onPress={onPressModalItem}
           selected={parsedItem.countryCode === selectedCountry?.countryCode}
+          style={styles.selectorItem}
         />
       );
     }
@@ -68,6 +69,7 @@ export function OnRampSettingsView() {
         selected={parsedItem.currencyCode === paymentCurrency?.currencyCode}
         title={parsedItem.name}
         subtitle={parsedItem.currencyCode}
+        style={styles.selectorItem}
       />
     );
   };
@@ -79,7 +81,7 @@ export function OnRampSettingsView() {
           onPress={onCountryPress}
           chevron
           style={styles.firstItem}
-          contentStyle={styles.itemContent}
+          contentStyle={styles.listItem}
         >
           <FlexView
             alignItems="center"
@@ -101,7 +103,7 @@ export function OnRampSettingsView() {
             ) : null}
           </FlexView>
         </ListItem>
-        <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.itemContent}>
+        <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.listItem}>
           <FlexView
             alignItems="center"
             justifyContent="center"

package/src/views/w3m-onramp-settings-view/styles.ts

@@ -2,7 +2,7 @@ import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
-  itemContent: {
+  listItem: {
     paddingLeft: 0
   },
   firstItem: {
@@ -21,5 +21,8 @@ export const styles = StyleSheet.create({
   imageBorder: {
     borderRadius: BorderRadius.full,
     overflow: 'hidden'
+  },
+  selectorItem: {
+    paddingHorizontal: Spacing.m
   }
 });

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

@@ -11,7 +11,7 @@ import {
   Icon,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet, Image } from 'react-native';
+import { StyleSheet, Image, type StyleProp, type ViewStyle } from 'react-native';
 
 export const ITEM_HEIGHT = 60;
 
@@ -22,9 +22,10 @@ interface Props {
   title: string;
   subtitle: string;
   testID?: string;
+  style?: StyleProp<ViewStyle>;
 }
 
-export function Currency({ onPress, item, selected, title, subtitle, testID }: Props) {
+export function Currency({ onPress, item, selected, title, subtitle, testID, style }: Props) {
   const Theme = useTheme();
 
   const handlePress = () => {
@@ -34,7 +35,7 @@ export function Currency({ onPress, item, selected, title, subtitle, testID }: P
   return (
     <Pressable
       onPress={handlePress}
-      style={styles.container}
+      style={[styles.container, style]}
       backgroundColor="transparent"
       testID={testID}
     >

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

@@ -23,7 +23,7 @@ export function Header({ onSettingsPress }: HeaderProps) {
         style={styles.icon}
       />
       <Text variant="paragraph-600" numberOfLines={1} testID="header-text">
-        Buy crypto
+        Buy Crypto
       </Text>
       <IconLink
         icon="settings"

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

@@ -135,6 +135,7 @@ export function OnRampView() {
         title={item.name}
         subtitle={item.currencyCode.split('_')[0] ?? item.currencyCode}
         testID={`currency-item-${item.currencyCode}`}
+        style={styles.currencyItem}
       />
     );
   };
@@ -183,7 +184,7 @@ export function OnRampView() {
               You Buy
             </Text>
             <TokenButton
-              placeholder={'Select currency'}
+              placeholder={'Select Token'}
               imageUrl={purchaseCurrency?.symbolImageUrl}
               text={purchaseCurrencyCode}
               onPress={() => setIsCurrencyModalVisible(true)}
@@ -258,7 +259,7 @@ export function OnRampView() {
             onSearch={handleSearch}
             renderItem={renderCurrencyItem}
             keyExtractor={item => item.currencyCode}
-            title="Select token"
+            title="Select Token"
             itemHeight={CURRENCY_ITEM_HEIGHT}
             showNetwork
           />

package/src/views/w3m-onramp-view/styles.ts

@@ -24,6 +24,9 @@ export default StyleSheet.create({
     borderWidth: 0,
     borderRadius: BorderRadius['3xs']
   },
+  currencyItem: {
+    paddingHorizontal: Spacing.m
+  },
   currencyInput: {
     marginBottom: Spacing.m
   },

package/src/views/w3m-upgrade-email-wallet-view/index.tsx

@@ -1,13 +1,11 @@
-import { Linking, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { Chip, FlexView, Spacing, Text } from '@reown/appkit-ui-react-native';
 import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { CoreHelperUtil } from '@reown/appkit-core-react-native';
 
 export function UpgradeEmailWalletView() {
   const onLinkPress = () => {
-    const link = ConstantsUtil.SECURE_SITE_DASHBOARD;
-    Linking.canOpenURL(link).then(supported => {
-      if (supported) Linking.openURL(link);
-    });
+    CoreHelperUtil.openLink(ConstantsUtil.SECURE_SITE_DASHBOARD);
   };
 
   return (