@reown/appkit-react-native 0.0.0-feat-multichain-20250818154639 → 0.0.0-feat-multichain-20250903132047

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

@@ -1,132 +0,0 @@
-import { useSnapshot } from 'valtio';
-import { useEffect, useState } from 'react';
-import {
-  ApiController,
-  AssetController,
-  WcController,
-  ConnectionsController,
-  RouterController,
-  RouterUtil,
-  AssetUtil
-} from '@reown/appkit-core-react-native';
-import {
-  Button,
-  FlexView,
-  IconBox,
-  LoadingHexagon,
-  NetworkImage,
-  Text
-} from '@reown/appkit-ui-react-native';
-import { useInternalAppKit } from '../../AppKitContext';
-import styles from './styles';
-
-//TODO: is this used?
-export function NetworkSwitchView() {
-  const { switchNetwork } = useInternalAppKit();
-  const { data } = useSnapshot(RouterController.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 = AssetUtil.getNetworkImage(network, networkImages);
-
-  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}
-          />
-        ) : null}
-      </LoadingHexagon>
-      {textTemplate()}
-      {retryTemplate()}
-    </FlexView>
-  );
-}

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

@@ -1,23 +0,0 @@
-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-swap-view/components/select-token-view/index.tsx

@@ -1,176 +0,0 @@
-import { useState } from 'react';
-import { useSnapshot } from 'valtio';
-import {
-  ScrollView,
-  SectionList,
-  View,
-  type SectionListData,
-  type StyleProp,
-  type ViewStyle
-} from 'react-native';
-import {
-  FlexView,
-  IconLink,
-  InputText,
-  ListToken,
-  ListTokenTotalHeight,
-  Separator,
-  Text,
-  TokenButton,
-  useTheme,
-  useCustomDimensions
-} from '@reown/appkit-ui-react-native';
-
-import {
-  AssetController,
-  AssetUtil,
-  ConnectionsController,
-  SwapController,
-  type SwapControllerState
-} from '@reown/appkit-core-react-native';
-
-import { type SwapInputTarget, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
-
-import { Placeholder } from '../../../../partials/w3m-placeholder';
-import styles from './styles';
-import { createSections } from './utils';
-
-interface Props {
-  onClose: () => void;
-  type?: SwapInputTarget;
-  style?: StyleProp<ViewStyle>;
-}
-
-export function SwapSelectTokenView({ onClose, type, style }: Props) {
-  const { padding } = useCustomDimensions();
-  const Theme = useTheme();
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const { networkImages } = useSnapshot(AssetController.state);
-  const { sourceToken, suggestedTokens, myTokensWithBalance } = useSnapshot(
-    SwapController.state
-  ) as SwapControllerState;
-
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
-  const [tokenSearch, setTokenSearch] = useState<string>('');
-  const isSourceToken = type === 'sourceToken';
-
-  const [filteredTokens, setFilteredTokens] = useState(
-    createSections(isSourceToken, tokenSearch, myTokensWithBalance)
-  );
-  const suggestedList = suggestedTokens
-    ?.filter(token => token.address !== SwapController.state.sourceToken?.address)
-    .slice(0, 8);
-
-  const onSearchChange = (value: string) => {
-    setTokenSearch(value);
-    setFilteredTokens(createSections(isSourceToken, value, myTokensWithBalance));
-  };
-
-  const onTokenPress = (token: SwapTokenWithBalance) => {
-    if (isSourceToken) {
-      SwapController.setSourceToken(token);
-    } else {
-      SwapController.setToToken(token);
-      if (SwapController.state.sourceToken && SwapController.state.sourceTokenAmount) {
-        SwapController.swapTokens();
-      }
-    }
-    onClose();
-  };
-
-  return (
-    <FlexView
-      padding={['xl', '0', '0', '0']}
-      style={[
-        styles.container,
-        {
-          paddingHorizontal: padding,
-          backgroundColor: Theme['bg-100']
-        },
-        style
-      ]}
-    >
-      <FlexView
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-        padding={['0', 'm', 'm', 'm']}
-      >
-        <IconLink icon="chevronLeft" size="md" onPress={onClose} />
-        <Text variant="paragraph-600">Select token</Text>
-        <View style={styles.iconPlaceholder} />
-      </FlexView>
-      <FlexView>
-        <InputText
-          value={tokenSearch}
-          icon="search"
-          placeholder="Search token"
-          onChangeText={onSearchChange}
-          clearButtonMode="while-editing"
-          style={styles.input}
-        />
-        {!isSourceToken && (
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            bounces={false}
-            fadingEdgeLength={20}
-            style={styles.suggestedList}
-            contentContainerStyle={styles.suggestedListContent}
-          >
-            {suggestedList?.map((token, index) => (
-              <TokenButton
-                key={token.name}
-                text={token.symbol}
-                imageUrl={token.logoUri}
-                onPress={() => onTokenPress(token)}
-                style={index !== suggestedList.length - 1 ? styles.suggestedToken : undefined}
-              />
-            ))}
-          </ScrollView>
-        )}
-      </FlexView>
-      <Separator style={styles.suggestedSeparator} color="gray-glass-020" />
-      <SectionList
-        sections={filteredTokens as SectionListData<SwapTokenWithBalance>[]}
-        bounces={false}
-        fadingEdgeLength={20}
-        contentContainerStyle={styles.tokenList}
-        renderSectionHeader={({ section: { title } }) => (
-          <Text
-            variant="paragraph-500"
-            color="fg-200"
-            style={[{ backgroundColor: Theme['bg-100'] }, styles.title]}
-          >
-            {title}
-          </Text>
-        )}
-        ListEmptyComponent={
-          <Placeholder
-            icon="coinPlaceholder"
-            title="No tokens found"
-            description="Your tokens will appear here"
-          />
-        }
-        getItemLayout={(_, index) => ({
-          length: ListTokenTotalHeight,
-          offset: ListTokenTotalHeight * index,
-          index
-        })}
-        renderItem={({ item }) => (
-          <ListToken
-            key={item.name}
-            name={item.name}
-            imageSrc={item.logoUri}
-            networkSrc={networkImage}
-            value={item.value}
-            amount={item.quantity.numeric}
-            currency={item.symbol}
-            onPress={() => onTokenPress(item)}
-            disabled={item.address === sourceToken?.address}
-          />
-        )}
-      />
-    </FlexView>
-  );
-}