@reown/appkit-react-native 2.0.0 → 2.0.1

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

@@ -1,4 +1,5 @@
-import { ScrollView, View } from 'react-native';
+/* eslint-disable valtio/state-snapshot-rule */
+import { ScrollView, useWindowDimensions, View } from 'react-native';
 import {
   CardSelect,
   CardSelectWidth,
@@ -6,32 +7,40 @@ import {
   Link,
   Separator,
   Spacing,
-  Text
+  Text,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
-  NetworkController,
   RouterController,
   EventsController,
   ConnectionsController,
+  OptionsController,
+  AssetController,
   AssetUtil
 } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
+import { useSnapshot } from 'valtio';
 
 export function NetworksView() {
-  const { caipNetwork } = NetworkController.state;
+  const { height, width } = useWindowDimensions();
+  const windowSize = Math.min(height, width);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { activeNetwork, isConnected } = useSnapshot(ConnectionsController.state);
   const imageHeaders = ApiController._getApiHeaders();
-  const { maxWidth: width, padding } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const numColumns = 4;
-  const usableWidth = width - Spacing.xs * 2 - Spacing['4xs'];
+  const usableWidth = windowSize - Spacing.xs * 2 - Spacing['4xs'];
   const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
   const itemGap = Math.abs(
     Math.trunc((usableWidth - numColumns * CardSelectWidth) / numColumns) / 2
   );
-  const { switchNetwork } = useAppKit();
+  const { switchNetwork, back } = useInternalAppKit();
+
+  const networkList = ConnectionsController.getAvailableNetworks();
+  const connectedNetworks = ConnectionsController.getConnectedNetworks();
 
   const onHelpPress = () => {
     RouterController.push('WhatIsANetwork');
@@ -39,16 +48,27 @@ export function NetworksView() {
   };
 
   const networksTemplate = () => {
-    //TODO: should show requested networks disabled
-    // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
-    const networks = ConnectionsController.getConnectedNetworks();
-
     const onNetworkPress = async (network: AppKitNetwork) => {
-      await switchNetwork(network);
-      RouterController.goBack();
+      if (
+        !isConnected ||
+        connectedNetworks.some(
+          connectedNetwork => connectedNetwork.caipNetworkId === network.caipNetworkId
+        )
+      ) {
+        await switchNetwork(network);
+        back();
+      } else {
+        RouterController.push('SwitchNetwork', { network });
+      }
     };
 
-    return networks.map(network => {
+    return networkList.map(network => {
+      const isSelected = isConnected
+        ? activeNetwork?.caipNetworkId === network.caipNetworkId
+        : OptionsController.state.defaultNetwork?.caipNetworkId === network.caipNetworkId;
+
+      const networkImage = AssetUtil.getNetworkImage(network, networkImages);
+
       return (
         <View
           key={network.id}
@@ -64,10 +84,9 @@ export function NetworksView() {
             testID={`w3m-network-switch-${network.name ?? network.id}`}
             name={network.name ?? 'Unknown'}
             type="network"
-            imageSrc={AssetUtil.getNetworkImage(network.id)}
+            imageSrc={networkImage}
             imageHeaders={imageHeaders}
-            // disabled={!supportsAllNetworks && !approvedCaipNetworkIds?.includes(network.caipNetworkId)}
-            selected={caipNetwork?.id === network.id}
+            selected={isSelected}
             onPress={() => onNetworkPress(network)}
           />
         </View>
@@ -78,17 +97,12 @@ export function NetworksView() {
   return (
     <>
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-        <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', 's', 'xs']}>
+        <FlexView flexDirection="row" flexWrap="wrap" padding="xs">
           {networksTemplate()}
         </FlexView>
       </ScrollView>
       <Separator />
-      <FlexView
-        padding={['s', 's', '3xl', 's']}
-        alignItems="center"
-        alignSelf="center"
-        style={{ width }}
-      >
+      <FlexView padding="s" alignItems="center" alignSelf="center" style={{ width }}>
         <Text variant="small-400" color="fg-300" center>
           Your connected wallet may not support some of the networks available for this dApp
         </Text>

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

@@ -1,4 +1,5 @@
 import {
+  AssetController,
   AssetUtil,
   ConnectionsController,
   OnRampController,
@@ -14,21 +15,24 @@ import {
   Spacing,
   Text,
   Toggle,
+  useCustomDimensions,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import { useSnapshot } from 'valtio';
 import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 export function OnRampCheckoutView() {
   const Theme = useTheme();
+  const { padding } = useCustomDimensions();
   const { themeMode } = useSnapshot(ThemeController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { selectedQuote, selectedPaymentMethod, purchaseCurrency } = useSnapshot(
     OnRampController.state
   );
 
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const value = NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
   const symbol = selectedQuote?.destinationCurrencyCode;
@@ -47,164 +51,166 @@ export function OnRampCheckoutView() {
   };
 
   return (
-    <FlexView padding={['2xl', 'l', '4xl', 'l']}>
-      <FlexView alignItems="center">
-        <Text color="fg-200">You Buy</Text>
-        <FlexView flexDirection="row" alignItems="center">
-          <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
-          <Text variant="paragraph-400" color="fg-200">
-            {symbol?.split('_')[0] ?? symbol ?? ''}
-          </Text>
-        </FlexView>
-        <FlexView flexDirection="row" alignItems="center" justifyContent="center">
-          <Text color="fg-200">via </Text>
-          {providerImage && <Image source={providerImage} style={styles.providerImage} />}
-          <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+    <ScrollView style={{ paddingHorizontal: padding }}>
+      <FlexView padding={['2xl', 'l', 's', 'l']}>
+        <FlexView alignItems="center">
+          <Text color="fg-200">You Buy</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
+            <Text variant="paragraph-400" color="fg-200">
+              {symbol?.split('_')[0] ?? symbol ?? ''}
+            </Text>
+          </FlexView>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+            <Text color="fg-200">via </Text>
+            {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
+            <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+          </FlexView>
         </FlexView>
-      </FlexView>
-      <Separator style={styles.separator} color="gray-glass-010" />
-      <FlexView
-        padding={['s', 's', 'xs', 's']}
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text color="fg-200">You Pay</Text>
-        <Text>
-          {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
-        </Text>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'xs', 's']}
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text color="fg-200">You Receive</Text>
-        <FlexView flexDirection="row" alignItems="center">
+        <Separator style={styles.separator} color="gray-glass-010" />
+        <FlexView
+          padding={['s', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Pay</Text>
           <Text>
-            {value} {symbol?.split('_')[0] ?? ''}
+            {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
           </Text>
-          {purchaseCurrency?.symbolImageUrl && (
-            <Image
-              source={purchaseCurrency?.symbolImageUrl}
-              style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
-            />
-          )}
         </FlexView>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'xs', 's']}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text color="fg-200">Network</Text>
-        <FlexView flexDirection="row" alignItems="center">
-          <Text>{purchaseCurrency?.chainName}</Text>
+        <FlexView
+          padding={['xs', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Receive</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>
+              {value} {symbol?.split('_')[0] ?? ''}
+            </Text>
+            {purchaseCurrency?.symbolImageUrl ? (
+              <Image
+                source={purchaseCurrency?.symbolImageUrl}
+                style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
+              />
+            ) : null}
+          </FlexView>
         </FlexView>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'm', 's']}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text color="fg-200">Pay with</Text>
         <FlexView
+          padding={['xs', 's', 'xs', 's']}
           flexDirection="row"
           alignItems="center"
-          style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          justifyContent="space-between"
         >
-          {paymentLogo && (
-            <Image
-              source={paymentLogo}
-              style={styles.paymentMethodImage}
-              tintColor={Theme['fg-150']}
-            />
-          )}
-          <Text variant="small-600" color="fg-150">
-            {selectedPaymentMethod?.name}
-          </Text>
+          <Text color="fg-200">Network</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>{purchaseCurrency?.chainName}</Text>
+          </FlexView>
+        </FlexView>
+        <FlexView
+          padding={['xs', 's', 'm', 's']}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text color="fg-200">Pay with</Text>
+          <FlexView
+            flexDirection="row"
+            alignItems="center"
+            style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          >
+            {paymentLogo ? (
+              <Image
+                source={paymentLogo}
+                style={styles.paymentMethodImage}
+                tintColor={Theme['fg-150']}
+              />
+            ) : null}
+            <Text variant="small-600" color="fg-150">
+              {selectedPaymentMethod?.name}
+            </Text>
+          </FlexView>
         </FlexView>
-      </FlexView>
 
-      {showFees && (
-        <Toggle
-          title={
-            <>
-              <Text variant="paragraph-400" color="fg-200">
-                Fees{' '}
-                {showTotalFee && (
-                  <Text variant="paragraph-400">
-                    {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+        {showFees ? (
+          <Toggle
+            title={
+              <>
+                <Text variant="paragraph-400" color="fg-200">
+                  Fees{' '}
+                  {showTotalFee ? (
+                    <Text variant="paragraph-400">
+                      {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+                    </Text>
+                  ) : null}
+                </Text>
+              </>
+            }
+            style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
+            contentContainerStyle={styles.feesToggleContent}
+          >
+            {showNetworkFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+                margin={['0', '0', 'xs', '0']}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Network Fees
+                </Text>
+                <FlexView flexDirection="row" alignItems="center">
+                  {networkImage ? (
+                    <Image
+                      source={networkImage}
+                      style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
+                    />
+                  ) : null}
+                  <Text variant="small-400">
+                    {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
                   </Text>
-                )}
-              </Text>
-            </>
-          }
-          style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
-          contentContainerStyle={styles.feesToggleContent}
-        >
-          {showNetworkFee && (
-            <FlexView
-              flexDirection="row"
-              justifyContent="space-between"
-              style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
-              margin={['0', '0', 'xs', '0']}
-            >
-              <Text variant="small-500" color="fg-150">
-                Network Fees
-              </Text>
-              <FlexView flexDirection="row" alignItems="center">
-                {networkImage && (
-                  <Image
-                    source={networkImage}
-                    style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
-                  />
-                )}
+                </FlexView>
+              </FlexView>
+            ) : null}
+            {showTransactionFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Transaction Fees
+                </Text>
                 <Text variant="small-400">
-                  {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
+                  {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
                 </Text>
               </FlexView>
-            </FlexView>
-          )}
-          {showTransactionFee && (
-            <FlexView
-              flexDirection="row"
-              justifyContent="space-between"
-              style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
-            >
-              <Text variant="small-500" color="fg-150">
-                Transaction Fees
-              </Text>
-              <Text variant="small-400">
-                {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
-              </Text>
-            </FlexView>
-          )}
-        </Toggle>
-      )}
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
-        <Button
-          variant="shade"
-          size="md"
-          style={styles.cancelButton}
-          onPress={RouterController.goBack}
-        >
-          Back
-        </Button>
-        <Button
-          variant="fill"
-          size="md"
-          style={styles.confirmButton}
-          onPress={onConfirm}
-          testID="button-confirm"
-        >
-          Confirm
-        </Button>
+            ) : null}
+          </Toggle>
+        ) : null}
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
+          <Button
+            variant="shade"
+            size="md"
+            style={styles.cancelButton}
+            onPress={RouterController.goBack}
+          >
+            Back
+          </Button>
+          <Button
+            variant="fill"
+            size="md"
+            style={styles.confirmButton}
+            onPress={onConfirm}
+            testID="button-confirm"
+          >
+            Confirm
+          </Button>
+        </FlexView>
       </FlexView>
-    </FlexView>
+    </ScrollView>
   );
 }
 

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

@@ -7,15 +7,21 @@ import {
   OptionsController,
   EventsController
 } from '@reown/appkit-core-react-native';
-import { FlexView, DoubleImageLoader, IconLink, Button, Text } from '@reown/appkit-ui-react-native';
+import {
+  FlexView,
+  DoubleImageLoader,
+  IconLink,
+  Button,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { ConnectingBody } from '../../partials/w3m-connecting-body';
 import styles from './styles';
 import { StringUtil } from '@reown/appkit-common-react-native';
 
 export function OnRampLoadingView() {
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { error } = useSnapshot(OnRampController.state);
   const providerName = StringUtil.capitalize(
     OnRampController.state.selectedQuote?.serviceProvider.toLowerCase()
@@ -105,14 +111,10 @@ export function OnRampLoadingView() {
       bounces={false}
       fadingEdgeLength={20}
       contentContainerStyle={styles.container}
+      style={{ paddingHorizontal: padding }}
       testID="onramp-loading-widget-view"
     >
-      <FlexView
-        alignItems="center"
-        alignSelf="center"
-        padding={['2xl', 'l', '0', 'l']}
-        style={{ width }}
-      >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
         <IconLink
           icon="chevronLeft"
           size="md"

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

@@ -3,7 +3,7 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
   container: {
-    paddingBottom: Spacing['3xl']
+    paddingBottom: Spacing['s']
   },
   backButton: {
     alignSelf: 'flex-start'

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

@@ -1,4 +1,4 @@
-import type { OnRampCountry } from '@reown/appkit-core-react-native';
+import { type OnRampCountry } from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -7,27 +7,36 @@ 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>;
+  testID?: string;
 }
 
 export const ITEM_HEIGHT = 60;
 
-export function Country({ onPress, item, selected }: Props) {
+export function Country({ onPress, item, selected, style, testID }: Props) {
   const handlePress = () => {
     onPress(item);
   };
 
   return (
-    <Pressable onPress={handlePress} style={styles.container} backgroundColor="transparent">
+    <Pressable
+      onPress={handlePress}
+      style={[styles.container, style]}
+      backgroundColor="transparent"
+      testID={testID}
+    >
       <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start" padding="s">
         <FlexView style={styles.imageContainer}>
-          {item.flagImageUrl && SvgUri && <SvgUri uri={item.flagImageUrl} width={36} height={36} />}
+          {item.flagImageUrl && SvgUri ? (
+            <SvgUri uri={item.flagImageUrl} width={36} height={36} />
+          ) : null}
         </FlexView>
         <FlexView style={styles.textContainer}>
           <Text variant="paragraph-400" color="fg-100" numberOfLines={1} ellipsizeMode="tail">
@@ -37,9 +46,9 @@ export function Country({ onPress, item, selected }: Props) {
             {item.countryCode}
           </Text>
         </FlexView>
-        {selected && (
+        {selected ? (
           <Icon name="checkmark" size="md" color="accent-100" style={styles.checkmark} />
-        )}
+        ) : null}
       </FlexView>
     </Pressable>
   );