@reown/appkit-react-native 0.0.0-chore-bump-builder-20250728194329

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

@@ -0,0 +1,130 @@
+import { useSnapshot } from 'valtio';
+import { useEffect, useState } from 'react';
+import {
+  ApiController,
+  AssetController,
+  ConnectionController,
+  ConnectionsController,
+  RouterController,
+  RouterUtil
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  IconBox,
+  LoadingHexagon,
+  NetworkImage,
+  Text
+} from '@reown/appkit-ui-react-native';
+import { useAppKit } from '../../AppKitContext';
+import styles from './styles';
+
+export function NetworkSwitchView() {
+  const { switchNetwork } = useAppKit();
+  const { data } = useSnapshot(RouterController.state);
+  const { recentWallets } = useSnapshot(ConnectionController.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 onSwitchNetwork = async () => {
+    try {
+      if (network) {
+        setError(false);
+        const _network = ConnectionsController.state.networks.find(n => n.id === network.id);
+        if (!_network) return;
+        await switchNetwork(_network);
+      }
+    } catch {
+      setError(true);
+      setShowRetry(true);
+    }
+  };
+
+  useEffect(() => {
+    onSwitchNetwork();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    // Go back if network is already switched
+    // eslint-disable-next-line valtio/state-snapshot-rule
+    if (activeNetwork?.id === network?.id) {
+      RouterUtil.navigateAfterNetworkSwitch();
+    }
+
+    // eslint-disable-next-line valtio/state-snapshot-rule
+  }, [activeNetwork?.id, network?.id]);
+
+  const retryTemplate = () => {
+    if (!showRetry) return null;
+
+    return (
+      <Button
+        size="sm"
+        variant="accent"
+        iconLeft="refresh"
+        style={styles.retryButton}
+        iconStyle={styles.retryIcon}
+        onPress={onSwitchNetwork}
+      >
+        Try again
+      </Button>
+    );
+  };
+
+  const textTemplate = () => {
+    const walletName = wallet?.name ?? 'wallet';
+    if (error) {
+      return (
+        <>
+          <Text variant="paragraph-500" style={styles.text}>
+            Switch declined
+          </Text>
+          <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+            Switch can be declined if chain is not supported by a wallet or previous request is
+            still active
+          </Text>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <Text variant="paragraph-500" style={styles.text}>{`Approve in ${walletName}`}</Text>
+        <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+          Accept switch request in your wallet
+        </Text>
+      </>
+    );
+  };
+
+  return (
+    <FlexView alignItems="center" padding={['2xl', 's', '4xl', 's']}>
+      <LoadingHexagon paused={error}>
+        <NetworkImage
+          imageSrc={networkImage}
+          imageHeaders={ApiController._getApiHeaders()}
+          size="lg"
+        />
+        {error && (
+          <IconBox
+            icon="close"
+            border
+            background
+            backgroundColor="icon-box-bg-error-100"
+            size="sm"
+            iconColor="error-100"
+            style={styles.errorIcon}
+          />
+        )}
+      </LoadingHexagon>
+      {textTemplate()}
+      {retryTemplate()}
+    </FlexView>
+  );
+}

package/src/views/w3m-network-switch-view/styles.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  descriptionText: {
+    marginHorizontal: Spacing['3xl']
+  },
+  errorIcon: {
+    position: 'absolute',
+    bottom: 12,
+    right: 20,
+    zIndex: 2
+  },
+  retryButton: {
+    marginTop: Spacing.xl
+  },
+  retryIcon: {
+    transform: [{ rotateY: '180deg' }]
+  },
+  text: {
+    marginVertical: Spacing.xs
+  }
+});

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

@@ -0,0 +1,118 @@
+import { ScrollView, View } from 'react-native';
+import {
+  CardSelect,
+  CardSelectWidth,
+  FlexView,
+  Link,
+  Separator,
+  Spacing,
+  Text
+} from '@reown/appkit-ui-react-native';
+import {
+  ApiController,
+  RouterController,
+  EventsController,
+  ConnectionsController,
+  ModalController,
+  OptionsController,
+  AssetController
+} 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 { useSnapshot } from 'valtio';
+
+export function NetworksView() {
+  const { networks, isConnected } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const imageHeaders = ApiController._getApiHeaders();
+  const { maxWidth: width, padding } = useCustomDimensions();
+  const numColumns = 4;
+  const usableWidth = width - 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 networkList = isConnected ? ConnectionsController.getConnectedNetworks() : networks;
+
+  const onHelpPress = () => {
+    RouterController.push('WhatIsANetwork');
+    EventsController.sendEvent({ type: 'track', event: 'CLICK_NETWORK_HELP' });
+  };
+
+  const networksTemplate = () => {
+    const onNetworkPress = async (network: AppKitNetwork) => {
+      await switchNetwork(network);
+
+      if (RouterController.state.history.length > 1) {
+        RouterController.goBack();
+      } else {
+        ModalController.close();
+      }
+    };
+
+    return networkList.map(network => {
+      const isSelected = ConnectionsController.state.isConnected
+        ? 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;
+
+      return (
+        <View
+          key={network.id}
+          style={[
+            styles.itemContainer,
+            {
+              width: itemWidth,
+              marginVertical: itemGap
+            }
+          ]}
+        >
+          <CardSelect
+            testID={`w3m-network-switch-${network.name ?? network.id}`}
+            name={network.name ?? 'Unknown'}
+            type="network"
+            imageSrc={networkImage}
+            imageHeaders={imageHeaders}
+            selected={isSelected}
+            onPress={() => onNetworkPress(network)}
+          />
+        </View>
+      );
+    });
+  };
+
+  return (
+    <>
+      <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+        <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', 's', 'xs']}>
+          {networksTemplate()}
+        </FlexView>
+      </ScrollView>
+      <Separator />
+      <FlexView
+        padding={['s', 's', '3xl', '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>
+        <Link
+          size="sm"
+          iconLeft="helpCircle"
+          onPress={onHelpPress}
+          style={styles.helpButton}
+          testID="what-is-a-network-button"
+        >
+          What is a network?
+        </Link>
+      </FlexView>
+    </>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  itemContainer: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  helpButton: {
+    marginTop: Spacing.s
+  }
+});

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

@@ -0,0 +1,267 @@
+import {
+  AssetController,
+  ConnectionsController,
+  OnRampController,
+  RouterController,
+  ThemeController
+} from '@reown/appkit-core-react-native';
+import {
+  BorderRadius,
+  Button,
+  FlexView,
+  Image,
+  Separator,
+  Spacing,
+  Text,
+  Toggle,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+import { useSnapshot } from 'valtio';
+import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
+
+export function OnRampCheckoutView() {
+  const Theme = useTheme();
+  const { themeMode } = useSnapshot(ThemeController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { selectedQuote, selectedPaymentMethod, purchaseCurrency } = useSnapshot(
+    OnRampController.state
+  );
+
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+
+  const value = NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
+  const symbol = selectedQuote?.destinationCurrencyCode;
+  const paymentLogo = selectedPaymentMethod?.logos[themeMode ?? 'light'];
+  const providerImage = OnRampController.getServiceProviderImage(
+    selectedQuote?.serviceProvider ?? ''
+  );
+
+  const showNetworkFee = selectedQuote?.networkFee != null;
+  const showTransactionFee = selectedQuote?.transactionFee != null;
+  const showTotalFee = selectedQuote?.totalFee != null;
+  const showFees = showNetworkFee || showTransactionFee || showTotalFee;
+
+  const onConfirm = () => {
+    RouterController.push('OnRampLoading');
+  };
+
+  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>
+        </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">
+          <Text>
+            {value} {symbol?.split('_')[0] ?? ''}
+          </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>
+      </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']}
+            />
+          )}
+          <Text variant="small-600" color="fg-150">
+            {selectedPaymentMethod?.name}
+          </Text>
+        </FlexView>
+      </FlexView>
+
+      {showFees && (
+        <Toggle
+          title={
+            <>
+              <Text variant="paragraph-400" color="fg-200">
+                Fees{' '}
+                {showTotalFee && (
+                  <Text variant="paragraph-400">
+                    {selectedQuote?.totalFee} {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'] }]}
+                  />
+                )}
+                <Text variant="small-400">
+                  {selectedQuote?.networkFee} {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>
+      </FlexView>
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  amount: {
+    fontSize: 38,
+    marginRight: Spacing['3xs']
+  },
+  separator: {
+    marginVertical: Spacing.m
+  },
+  feesToggle: {
+    borderRadius: BorderRadius.xs
+  },
+  feesToggleContent: {
+    paddingHorizontal: Spacing.xs,
+    paddingBottom: Spacing.xs
+  },
+  toggleItem: {
+    padding: Spacing.s,
+    borderRadius: BorderRadius.xxs
+  },
+  paymentMethodImage: {
+    width: 14,
+    height: 14,
+    marginRight: Spacing['3xs']
+  },
+  confirmButton: {
+    marginLeft: Spacing.s,
+    flex: 3
+  },
+  cancelButton: {
+    flex: 1
+  },
+  providerImage: {
+    height: 16,
+    width: 16,
+    marginRight: 2
+  },
+  tokenImage: {
+    height: 20,
+    width: 20,
+    marginLeft: 4,
+    borderRadius: BorderRadius.full,
+    borderWidth: 1
+  },
+  networkImage: {
+    height: 16,
+    width: 16,
+    marginRight: 4,
+    borderRadius: BorderRadius.full,
+    borderWidth: 1
+  },
+  paymentMethodContainer: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: BorderRadius.full,
+    padding: Spacing.xs
+  }
+});