@reown/appkit-react-native 0.0.0-feat-multichain-20250801190527 → 0.0.0-feat-multichain-20250805142032

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

@@ -113,7 +113,7 @@ export function NetworkSwitchView() {
           imageHeaders={ApiController._getApiHeaders()}
           size="lg"
         />
-        {error && (
+        {error ? (
           <IconBox
             icon="close"
             border
@@ -123,7 +123,7 @@ export function NetworkSwitchView() {
             iconColor="error-100"
             style={styles.errorIcon}
           />
-        )}
+        ) : null}
       </LoadingHexagon>
       {textTemplate()}
       {retryTemplate()}

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

@@ -60,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>
@@ -87,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
@@ -118,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"
@@ -159,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"
@@ -184,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/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>
   );

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

@@ -11,13 +11,10 @@ import {
   Separator,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import {
-  OnRampController,
-  type OnRampPaymentMethod,
-  type OnRampQuote
-} from '@reown/appkit-core-react-native';
+import { OnRampController } from '@reown/appkit-core-react-native';
 import { Quote, ITEM_HEIGHT as QUOTE_ITEM_HEIGHT } from './Quote';
 import { PaymentMethod } from './PaymentMethod';
+import { type OnRampPaymentMethod, type OnRampQuote } from '@reown/appkit-common-react-native';
 
 interface SelectPaymentModalProps {
   title?: string;

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

@@ -3,7 +3,6 @@ import { memo, useCallback, useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
 import {
   OnRampController,
-  type OnRampCryptoCurrency,
   ThemeController,
   RouterController,
   type OnRampControllerState,
@@ -21,7 +20,11 @@ import {
   TokenButton,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
+import {
+  NumberUtil,
+  StringUtil,
+  type OnRampCryptoCurrency
+} from '@reown/appkit-common-react-native';
 import { SelectorModal } from '../../partials/w3m-selector-modal';
 import { Currency, ITEM_HEIGHT as CURRENCY_ITEM_HEIGHT } from './components/Currency';
 import { getPurchaseCurrencies, getQuotesDebounced } from './utils';

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

@@ -25,11 +25,11 @@ import {
   AssetUtil,
   ConnectionsController,
   SwapController,
-  type SwapControllerState,
-  type SwapInputTarget,
-  type SwapTokenWithBalance
+  type SwapControllerState
 } from '@reown/appkit-core-react-native';
 
+import { type SwapInputTarget, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+
 import { useCustomDimensions } from '../../../../hooks/useCustomDimensions';
 import { Placeholder } from '../../../../partials/w3m-placeholder';
 import styles from './styles';

package/src/views/w3m-swap-view/components/select-token-view/utils.ts

@@ -1,4 +1,5 @@
-import { SwapController, type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
+import { type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+import { SwapController } from '@reown/appkit-core-react-native';
 
 export function filterTokens(tokens?: SwapTokenWithBalance[], searchValue?: string) {
   if (!tokens) {

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

@@ -6,11 +6,10 @@ import {
   ConstantsUtil,
   EventsController,
   RouterController,
-  SwapController,
-  type SwapInputTarget
+  SwapController
 } from '@reown/appkit-core-react-native';
 import { Button, FlexView, IconLink, useTheme } from '@reown/appkit-ui-react-native';
-import { NumberUtil } from '@reown/appkit-common-react-native';
+import { NumberUtil, type SwapInputTarget } from '@reown/appkit-common-react-native';
 
 import { useKeyboard } from '../../hooks/useKeyboard';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
@@ -180,7 +179,7 @@ export function SwapView() {
               onTokenPress={() => setShowModal('toToken')}
               editable={false}
             />
-            {showSwitch && (
+            {showSwitch ? (
               <IconLink
                 icon="recycleHorizontal"
                 size="lg"
@@ -191,9 +190,9 @@ export function SwapView() {
                 style={[styles.arrowIcon, { borderColor: Theme['bg-100'] }]}
                 onPress={onSwitchPress}
               />
-            )}
+            ) : null}
           </FlexView>
-          {showDetails && <SwapDetails />}
+          {showDetails ? <SwapDetails /> : null}
           <Button
             style={styles.actionButton}
             loading={actionLoading}