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

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

@@ -1,25 +1,25 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
-  ConnectionController,
+  WcController,
   ConstantsUtil,
   CoreHelperUtil,
   RouterController,
   SnackController,
-  type Platform,
   OptionsController,
   ApiController,
   EventsController
 } from '@reown/appkit-core-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
 import { ConnectingMobile } from '../../partials/w3m-connecting-mobile';
 import { ConnectingWeb } from '../../partials/w3m-connecting-web';
 import { ConnectingHeader } from '../../partials/w3m-connecting-header';
 import { UiUtil } from '../../utils/UiUtil';
+import { type Platform } from '@reown/appkit-common-react-native';
 
 export function ConnectingView() {
-  const { connect } = useAppKit();
+  const { connect } = useInternalAppKit();
   const { installed } = useSnapshot(ApiController.state);
   const { data } = RouterController.state;
   const [lastRetry, setLastRetry] = useState(Date.now());
@@ -32,7 +32,7 @@ export function ConnectingView() {
   const onRetry = () => {
     if (CoreHelperUtil.isAllowedRetry(lastRetry)) {
       setLastRetry(Date.now());
-      ConnectionController.clearUri();
+      WcController.clearUri();
       initializeConnection(true);
     } else {
       SnackController.showError('Please wait a second before retrying');
@@ -41,19 +41,19 @@ export function ConnectingView() {
 
   const initializeConnection = async (retry = false) => {
     try {
-      const { wcPairingExpiry } = ConnectionController.state;
+      const { wcPairingExpiry } = WcController.state;
       const { data: routeData } = RouterController.state;
       if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
-        ConnectionController.setWcError(false);
+        WcController.setWcError(false);
 
         const connectPromise = connect('walletconnect', {
           universalLink: routeData?.wallet?.link_mode ?? undefined
         });
-        ConnectionController.setWcPromise(connectPromise);
+        WcController.setWcPromise(connectPromise);
       }
     } catch (error) {
-      ConnectionController.setWcError(true);
-      ConnectionController.clearUri();
+      WcController.setWcError(true);
+      WcController.clearUri();
       SnackController.showError('Declined');
       if (isQr && CoreHelperUtil.isAllowedRetry(lastRetry)) {
         setLastRetry(Date.now());

package/src/views/w3m-get-wallet-view/index.tsx

@@ -1,6 +1,7 @@
 import { Linking, Platform, ScrollView } from 'react-native';
 import { FlexView, ListWallet } from '@reown/appkit-ui-react-native';
-import { ApiController, AssetUtil, type WcWallet } from '@reown/appkit-core-react-native';
+import { ApiController, AssetUtil } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 

package/src/views/w3m-network-switch-view/index.tsx

@@ -3,10 +3,11 @@ import { useEffect, useState } from 'react';
 import {
   ApiController,
   AssetController,
-  ConnectionController,
+  WcController,
   ConnectionsController,
   RouterController,
-  RouterUtil
+  RouterUtil,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -16,20 +17,21 @@ import {
   NetworkImage,
   Text
 } from '@reown/appkit-ui-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
+//TODO: is this used?
 export function NetworkSwitchView() {
-  const { switchNetwork } = useAppKit();
+  const { switchNetwork } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state);
+  const { recentWallets } = useSnapshot(WcController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const [error, setError] = useState<boolean>(false);
   const [showRetry, setShowRetry] = useState<boolean>(false);
   const network = data?.network;
   const wallet = recentWallets?.[0];
-  const networkImage = network ? networkImages[network.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
   const onSwitchNetwork = async () => {
     try {
@@ -111,7 +113,7 @@ export function NetworkSwitchView() {
           imageHeaders={ApiController._getApiHeaders()}
           size="lg"
         />
-        {error && (
+        {error ? (
           <IconBox
             icon="close"
             border
@@ -121,7 +123,7 @@ export function NetworkSwitchView() {
             iconColor="error-100"
             style={styles.errorIcon}
           />
-        )}
+        ) : null}
       </LoadingHexagon>
       {textTemplate()}
       {retryTemplate()}

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

@@ -13,14 +13,14 @@ import {
   RouterController,
   EventsController,
   ConnectionsController,
-  ModalController,
   OptionsController,
-  AssetController
+  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() {
@@ -34,7 +34,7 @@ export function NetworksView() {
   const itemGap = Math.abs(
     Math.trunc((usableWidth - numColumns * CardSelectWidth) / numColumns) / 2
   );
-  const { switchNetwork } = useAppKit();
+  const { switchNetwork, back } = useInternalAppKit();
 
   const networkList = isConnected ? ConnectionsController.getConnectedNetworks() : networks;
 
@@ -46,12 +46,7 @@ export function NetworksView() {
   const networksTemplate = () => {
     const onNetworkPress = async (network: AppKitNetwork) => {
       await switchNetwork(network);
-
-      if (RouterController.state.history.length > 1) {
-        RouterController.goBack();
-      } else {
-        ModalController.close();
-      }
+      back();
     };
 
     return networkList.map(network => {
@@ -59,7 +54,7 @@ export function NetworksView() {
         ? ConnectionsController.state.activeCaipNetworkId === network.caipNetworkId
         : OptionsController.state.defaultNetwork?.caipNetworkId === network.caipNetworkId;
       // eslint-disable-next-line valtio/state-snapshot-rule
-      const networkImage = network ? networkImages[network.id] : undefined;
+      const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
       return (
         <View

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

@@ -1,5 +1,6 @@
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   OnRampController,
   RouterController,
@@ -29,7 +30,7 @@ export function OnRampCheckoutView() {
   );
 
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const value = NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
   const symbol = selectedQuote?.destinationCurrencyCode;
@@ -59,7 +60,7 @@ export function OnRampCheckoutView() {
         </FlexView>
         <FlexView flexDirection="row" alignItems="center" justifyContent="center">
           <Text color="fg-200">via </Text>
-          {providerImage && <Image source={providerImage} style={styles.providerImage} />}
+          {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
           <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
         </FlexView>
       </FlexView>
@@ -86,12 +87,12 @@ export function OnRampCheckoutView() {
           <Text>
             {value} {symbol?.split('_')[0] ?? ''}
           </Text>
-          {purchaseCurrency?.symbolImageUrl && (
+          {purchaseCurrency?.symbolImageUrl ? (
             <Image
               source={purchaseCurrency?.symbolImageUrl}
               style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
             />
-          )}
+          ) : null}
         </FlexView>
       </FlexView>
       <FlexView
@@ -117,37 +118,37 @@ export function OnRampCheckoutView() {
           alignItems="center"
           style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
         >
-          {paymentLogo && (
+          {paymentLogo ? (
             <Image
               source={paymentLogo}
               style={styles.paymentMethodImage}
               tintColor={Theme['fg-150']}
             />
-          )}
+          ) : null}
           <Text variant="small-600" color="fg-150">
             {selectedPaymentMethod?.name}
           </Text>
         </FlexView>
       </FlexView>
 
-      {showFees && (
+      {showFees ? (
         <Toggle
           title={
             <>
               <Text variant="paragraph-400" color="fg-200">
                 Fees{' '}
-                {showTotalFee && (
+                {showTotalFee ? (
                   <Text variant="paragraph-400">
                     {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
                   </Text>
-                )}
+                ) : null}
               </Text>
             </>
           }
           style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
           contentContainerStyle={styles.feesToggleContent}
         >
-          {showNetworkFee && (
+          {showNetworkFee ? (
             <FlexView
               flexDirection="row"
               justifyContent="space-between"
@@ -158,19 +159,19 @@ export function OnRampCheckoutView() {
                 Network Fees
               </Text>
               <FlexView flexDirection="row" alignItems="center">
-                {networkImage && (
+                {networkImage ? (
                   <Image
                     source={networkImage}
                     style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
                   />
-                )}
+                ) : null}
                 <Text variant="small-400">
                   {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
                 </Text>
               </FlexView>
             </FlexView>
-          )}
-          {showTransactionFee && (
+          ) : null}
+          {showTransactionFee ? (
             <FlexView
               flexDirection="row"
               justifyContent="space-between"
@@ -183,9 +184,9 @@ export function OnRampCheckoutView() {
                 {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
               </Text>
             </FlexView>
-          )}
+          ) : null}
         </Toggle>
-      )}
+      ) : null}
       <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
         <Button
           variant="shade"

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,
@@ -27,7 +27,9 @@ export function Country({ onPress, item, selected }: Props) {
     <Pressable onPress={handlePress} style={styles.container} backgroundColor="transparent">
       <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 +39,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>
   );

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

@@ -2,11 +2,8 @@ import { useSnapshot } from 'valtio';
 import { memo, useState } from 'react';
 import { SvgUri } from 'react-native-svg';
 import { FlexView, ListItem, Text, useTheme, Icon, Image } from '@reown/appkit-ui-react-native';
-import {
-  OnRampController,
-  type OnRampCountry,
-  type OnRampFiatCurrency
-} from '@reown/appkit-core-react-native';
+import { OnRampController } from '@reown/appkit-core-react-native';
+import { type OnRampCountry, type OnRampFiatCurrency } from '@reown/appkit-common-react-native';
 
 import { SelectorModal } from '../../partials/w3m-selector-modal';
 import { Country } from './components/Country';
@@ -97,11 +94,11 @@ export function OnRampSettingsView() {
           </FlexView>
           <FlexView>
             <Text color="fg-100">Select Country</Text>
-            {selectedCountry?.name && (
+            {selectedCountry?.name ? (
               <Text variant="small-400" color="fg-200">
                 {selectedCountry?.name}
               </Text>
-            )}
+            ) : null}
           </FlexView>
         </ListItem>
         <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.itemContent}>
@@ -120,11 +117,11 @@ export function OnRampSettingsView() {
           </FlexView>
           <FlexView>
             <Text color="fg-100">Select Currency</Text>
-            {paymentCurrency?.name && (
+            {paymentCurrency?.name ? (
               <Text variant="small-400" color="fg-200">
                 {paymentCurrency?.name}
               </Text>
-            )}
+            ) : null}
           </FlexView>
         </ListItem>
       </FlexView>

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

@@ -1,10 +1,7 @@
 import { ITEM_HEIGHT as COUNTRY_ITEM_HEIGHT } from './components/Country';
 import { ITEM_HEIGHT as CURRENCY_ITEM_HEIGHT } from '../w3m-onramp-view/components/Currency';
-import {
-  OnRampController,
-  type OnRampCountry,
-  type OnRampFiatCurrency
-} from '@reown/appkit-core-react-native';
+import { OnRampController } from '@reown/appkit-core-react-native';
+import { type OnRampCountry, type OnRampFiatCurrency } from '@reown/appkit-common-react-native';
 
 // -------------------------- Types --------------------------
 type ModalType = 'country' | 'paymentCurrency';

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

@@ -76,15 +76,15 @@ export function OnRampTransactionView() {
                 {data?.onrampResult?.purchaseAmount}{' '}
                 {data?.onrampResult?.purchaseCurrency?.split('_')[0] ?? ''}
               </Text>
-              {data?.onrampResult?.purchaseImageUrl && (
+              {data?.onrampResult?.purchaseImageUrl ? (
                 <Image
                   source={data?.onrampResult?.purchaseImageUrl}
                   style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
                 />
-              )}
+              ) : null}
             </FlexView>
           </FlexView>
-          {showNetwork && (
+          {showNetwork ? (
             <FlexView
               flexDirection="row"
               alignItems="center"
@@ -98,8 +98,8 @@ export function OnRampTransactionView() {
                 {StringUtil.capitalize(data?.onrampResult?.network)}
               </Text>
             </FlexView>
-          )}
-          {showStatus && (
+          ) : null}
+          {showStatus ? (
             <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
               <Text variant="paragraph-400" color="fg-150">
                 Status
@@ -108,7 +108,7 @@ export function OnRampTransactionView() {
                 {StringUtil.capitalize(data?.onrampResult?.status)}
               </Text>
             </FlexView>
-          )}
+          ) : null}
         </FlexView>
       </FlexView>
       <Button variant="fill" size="md" onPress={onClose}>

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

@@ -1,7 +1,7 @@
 import {
   type OnRampFiatCurrency,
   type OnRampCryptoCurrency
-} from '@reown/appkit-core-react-native';
+} from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -53,9 +53,9 @@ export function Currency({ onPress, item, selected, title, subtitle, testID }: P
             </Text>
           </FlexView>
         </FlexView>
-        {selected && (
+        {selected ? (
           <Icon name="checkmark" size="md" color="accent-100" style={styles.checkmark} />
-        )}
+        ) : null}
       </FlexView>
     </Pressable>
   );

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

@@ -117,7 +117,7 @@ export function CurrencyInput({
           )}
         </FlexView>
       </FlexView>
-      {suggestedValues && suggestedValues.length > 0 && (
+      {suggestedValues && suggestedValues.length > 0 ? (
         <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
           {suggestedValues?.map((suggestion: number) => {
             const isSelected = suggestion.toString() === value;
@@ -144,7 +144,7 @@ export function CurrencyInput({
             );
           })}
         </FlexView>
-      )}
+      ) : null}
       <Separator color="gray-glass-020" style={styles.separator} />
       <NumericKeyboard onKeyPress={handleKeyPress} />
     </FlexView>

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

@@ -1,18 +1,16 @@
 import { StyleSheet } from 'react-native';
-import { ModalController, RouterController } from '@reown/appkit-core-react-native';
 import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
+import { useInternalAppKit } from '../../../AppKitContext';
 
 interface HeaderProps {
   onSettingsPress: () => void;
 }
 
 export function Header({ onSettingsPress }: HeaderProps) {
+  const { back } = useInternalAppKit();
+
   const handleGoBack = () => {
-    if (RouterController.state.history.length > 1) {
-      RouterController.goBack();
-    } else {
-      ModalController.close();
-    }
+    back();
   };
 
   return (

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

@@ -73,9 +73,9 @@ function PaymentButton({
           <Text variant="paragraph-400" color="fg-100">
             {title}
           </Text>
-          {subtitle && (
+          {subtitle ? (
             <FlexView flexDirection="row" alignItems="center" margin={['4xs', '0', '0', '0']}>
-              {providerLogo && (
+              {providerLogo ? (
                 <>
                   <Text variant="small-400" color="fg-150">
                     via
@@ -87,12 +87,12 @@ function PaymentButton({
                     resizeMode="contain"
                   />
                 </>
-              )}
+              ) : null}
               <Text variant="small-400" color="fg-150">
                 {subtitle}
               </Text>
             </FlexView>
-          )}
+          ) : null}
         </FlexView>
         {loading ? (
           <LoadingSpinner size="md" color="fg-200" style={styles.rightIcon} />

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

@@ -1,5 +1,6 @@
 import { useSnapshot } from 'valtio';
-import { ThemeController, type OnRampPaymentMethod } from '@reown/appkit-core-react-native';
+import { ThemeController } from '@reown/appkit-core-react-native';
+import { type OnRampPaymentMethod } from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -49,7 +50,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
           resizeMethod="resize"
           resizeMode="contain"
         />
-        {selected && (
+        {selected ? (
           <IconBox
             icon="checkmark"
             size="sm"
@@ -59,7 +60,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
             style={styles.checkmark}
             testID="payment-method-checkmark"
           />
-        )}
+        ) : null}
       </FlexView>
       <Text variant="tiny-400" color="fg-100" numberOfLines={2} style={styles.text}>
         {item.name}

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

@@ -1,5 +1,4 @@
-import { NumberUtil } from '@reown/appkit-common-react-native';
-import { type OnRampQuote } from '@reown/appkit-core-react-native';
+import { NumberUtil, type OnRampQuote } from '@reown/appkit-common-react-native';
 import {
   FlexView,
   Image,
@@ -55,11 +54,11 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText, testID }
               <Text variant="paragraph-500" style={styles.providerText}>
                 {item.serviceProvider?.toLowerCase()}
               </Text>
-              {tagText && (
+              {tagText ? (
                 <Tag variant="main" style={styles.tag}>
                   {tagText}
                 </Tag>
-              )}
+              ) : null}
             </FlexView>
             <Text variant="tiny-500">
               {NumberUtil.roundNumber(item.destinationAmount, 6, 5)}{' '}
@@ -67,7 +66,7 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText, testID }
             </Text>
           </FlexView>
         </FlexView>
-        {selected && <Icon name="checkmark" color="accent-100" />}
+        {selected ? <Icon name="checkmark" color="accent-100" /> : null}
       </FlexView>
     </Pressable>
   );