@reown/appkit-react-native 0.0.0-canary-20251008180350

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

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  Modal,
+  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;
+  visible: boolean;
+  type?: SwapInputTarget;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SwapSelectTokenModal({ onClose, type, style, visible }: Props) {
+  const { padding, maxHeight } = 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 = createSections(isSourceToken, tokenSearch, myTokensWithBalance);
+
+  const suggestedList = suggestedTokens
+    ?.filter(token => token.address !== SwapController.state.sourceToken?.address)
+    .slice(0, 8);
+
+  const onSearchChange = (value: string) => {
+    setTokenSearch(value);
+  };
+
+  const onTokenPress = (token: SwapTokenWithBalance) => {
+    if (isSourceToken) {
+      SwapController.setSourceToken(token);
+    } else {
+      SwapController.setToToken(token);
+      if (SwapController.state.sourceToken && SwapController.state.sourceTokenAmount) {
+        SwapController.swapTokens();
+      }
+    }
+    onClose();
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <FlexView
+        padding={['xl', '0', '0', '0']}
+        style={[
+          styles.container,
+          {
+            paddingHorizontal: padding,
+            backgroundColor: Theme['bg-100'],
+            height: maxHeight
+          },
+          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 margin={['0', '0', 'xs', '0']}>
+          <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>
+              <Separator style={styles.suggestedSeparator} color="gray-glass-005" />
+            </>
+          )}
+        </FlexView>
+        <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>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  container: {
+    borderRadius: BorderRadius.l,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    overflow: 'hidden',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: 0
+  },
+  title: {
+    paddingTop: Spacing['2xs']
+  },
+  tokenList: {
+    paddingHorizontal: Spacing.m
+  },
+  input: {
+    marginHorizontal: Spacing.xs
+  },
+  suggestedList: {
+    marginTop: Spacing.xs
+  },
+  suggestedListContent: {
+    paddingHorizontal: Spacing.s
+  },
+  suggestedToken: {
+    marginRight: Spacing.s
+  },
+  suggestedSeparator: {
+    marginTop: Spacing.s
+  },
+  iconPlaceholder: {
+    height: 32,
+    width: 32
+  }
+});

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

@@ -0,0 +1,39 @@
+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) {
+    return [];
+  }
+
+  if (!searchValue) {
+    return tokens;
+  }
+
+  return tokens.filter(
+    token =>
+      token.name?.toLowerCase().includes(searchValue.toLowerCase()) ||
+      token.symbol.toLowerCase().includes(searchValue.toLowerCase())
+  );
+}
+
+export function createSections(
+  isSourceToken: boolean,
+  searchValue: string,
+  balances?: SwapTokenWithBalance[]
+) {
+  const myTokensFiltered = filterTokens(balances ?? [], searchValue);
+  const popularFiltered = isSourceToken
+    ? []
+    : filterTokens(SwapController.getFilteredPopularTokens(balances), searchValue);
+
+  const sections = [];
+  if (myTokensFiltered.length > 0) {
+    sections.push({ title: 'Your tokens', data: myTokensFiltered });
+  }
+  if (popularFiltered.length > 0) {
+    sections.push({ title: 'Popular tokens', data: popularFiltered });
+  }
+
+  return sections;
+}

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

@@ -0,0 +1,217 @@
+import { useSnapshot } from 'valtio';
+import { useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
+import {
+  ConnectionsController,
+  ConstantsUtil,
+  EventsController,
+  RouterController,
+  SwapController
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  IconLink,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import { NumberUtil, type SwapInputTarget } from '@reown/appkit-common-react-native';
+
+import { useKeyboard } from '../../hooks/useKeyboard';
+import { SwapInput } from '../../partials/w3m-swap-input';
+import { useDebounceCallback } from '../../hooks/useDebounceCallback';
+import { SwapDetails } from '../../partials/w3m-swap-details';
+import styles from './styles';
+import { SwapSelectTokenModal } from './components/select-token-modal';
+
+export function SwapView() {
+  const {
+    loadingTokens,
+    sourceToken,
+    toToken,
+    sourceTokenAmount,
+    toTokenAmount,
+    loadingPrices,
+    loadingQuote,
+    sourceTokenPriceInUSD,
+    toTokenPriceInUSD,
+    myTokensWithBalance,
+    inputError
+  } = useSnapshot(SwapController.state);
+  const Theme = useTheme();
+  const { padding, maxHeight } = useCustomDimensions();
+  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const [showModal, setShowModal] = useState<SwapInputTarget | undefined>();
+  const showDetails = !!sourceToken && !!toToken && !inputError;
+
+  const onModalClose = () => {
+    setShowModal(undefined);
+  };
+
+  const showSwitch =
+    myTokensWithBalance &&
+    myTokensWithBalance.findIndex(
+      token => token.address === SwapController.state.toToken?.address
+    ) >= 0;
+
+  const getActionButtonState = () => {
+    if (!SwapController.state.sourceToken || !SwapController.state.toToken) {
+      return { text: 'Select token', disabled: true };
+    }
+
+    if (!SwapController.state.sourceTokenAmount || !SwapController.state.toTokenAmount) {
+      return { text: 'Enter amount', disabled: true };
+    }
+
+    if (SwapController.state.inputError) {
+      return { text: SwapController.state.inputError, disabled: true };
+    }
+
+    return { text: 'Review swap', disabled: false };
+  };
+
+  const actionState = getActionButtonState();
+  const actionLoading = loadingTokens || loadingPrices || loadingQuote;
+
+  const { debouncedCallback: onDebouncedSwap } = useDebounceCallback({
+    callback: SwapController.swapTokens.bind(SwapController),
+    delay: 400
+  });
+
+  const onSourceTokenChange = (value: string) => {
+    SwapController.setSourceTokenAmount(value);
+    onDebouncedSwap();
+  };
+
+  const onToTokenChange = (value: string) => {
+    SwapController.setToTokenAmount(value);
+    onDebouncedSwap();
+  };
+
+  const onReviewPress = () => {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'INITIATE_SWAP',
+      properties: {
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId,
+        swapFromToken: SwapController.state.sourceToken?.symbol || '',
+        swapToToken: SwapController.state.toToken?.symbol || '',
+        swapFromAmount: SwapController.state.sourceTokenAmount || '',
+        swapToAmount: SwapController.state.toTokenAmount || '',
+        isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
+      }
+    });
+    RouterController.push('SwapPreview');
+  };
+
+  const onSourceMaxPress = () => {
+    const { activeNamespace, activeCaipNetworkId } = ConnectionsController.state;
+    const networkTokenAddress = activeNamespace
+      ? `${activeCaipNetworkId}:${ConstantsUtil.NATIVE_TOKEN_ADDRESS[activeNamespace]}`
+      : undefined;
+
+    const isNetworkToken = SwapController.state.sourceToken?.address === networkTokenAddress;
+
+    const _gasPriceInUSD = SwapController.state.gasPriceInUSD;
+    const _sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;
+    const _balance = SwapController.state.sourceToken?.quantity.numeric;
+
+    if (_balance) {
+      if (!_gasPriceInUSD) {
+        return SwapController.setSourceTokenAmount(_balance);
+      }
+
+      const amountOfTokenGasRequires = NumberUtil.bigNumber(_gasPriceInUSD.toFixed(5)).dividedBy(
+        _sourceTokenPriceInUSD
+      );
+
+      const maxValue = isNetworkToken
+        ? NumberUtil.bigNumber(_balance).minus(amountOfTokenGasRequires)
+        : NumberUtil.bigNumber(_balance);
+
+      SwapController.setSourceTokenAmount(maxValue.isGreaterThan(0) ? maxValue.toFixed(20) : '0');
+      SwapController.swapTokens();
+    }
+  };
+
+  const onSwitchPress = () => {
+    SwapController.switchTokens();
+  };
+
+  useEffect(() => {
+    SwapController.fetchTokens();
+
+    function watchTokens() {
+      SwapController.getNetworkTokenPrice();
+      SwapController.getMyTokensWithBalance();
+      SwapController.swapTokens();
+    }
+
+    const interval = setInterval(watchTokens, 10000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <>
+      <ScrollView
+        style={[{ paddingHorizontal: padding, maxHeight }]}
+        contentContainerStyle={
+          keyboardShown && !showModal ? { paddingBottom: keyboardHeight } : undefined
+        }
+        bounces={false}
+        keyboardShouldPersistTaps="always"
+      >
+        <FlexView padding="l" alignItems="center" justifyContent="center">
+          <SwapInput
+            token={sourceToken}
+            value={sourceTokenAmount}
+            marketValue={parseFloat(sourceTokenAmount) * sourceTokenPriceInUSD}
+            style={styles.tokenInput}
+            loading={loadingTokens}
+            onChange={onSourceTokenChange}
+            onTokenPress={() => setShowModal('sourceToken')}
+            onMaxPress={onSourceMaxPress}
+          />
+          <FlexView alignItems="center" justifyContent="center" style={styles.bottomInputContainer}>
+            <SwapInput
+              token={toToken}
+              value={toTokenAmount}
+              marketValue={NumberUtil.parseLocalStringToNumber(toTokenAmount) * toTokenPriceInUSD}
+              style={styles.tokenInput}
+              loading={loadingTokens}
+              loadingValues={actionLoading}
+              onChange={onToTokenChange}
+              onTokenPress={() => setShowModal('toToken')}
+              editable={false}
+            />
+            {showSwitch ? (
+              <IconLink
+                icon="recycleHorizontal"
+                size="lg"
+                iconColor="fg-275"
+                background
+                backgroundColor="bg-175"
+                pressedColor="bg-250"
+                style={[styles.arrowIcon, { borderColor: Theme['bg-100'] }]}
+                onPress={onSwitchPress}
+              />
+            ) : null}
+          </FlexView>
+          {showDetails ? <SwapDetails /> : null}
+          <Button
+            style={styles.actionButton}
+            loading={actionLoading}
+            disabled={actionState.disabled || actionLoading}
+            onPress={onReviewPress}
+          >
+            {actionState.text}
+          </Button>
+        </FlexView>
+      </ScrollView>
+      <SwapSelectTokenModal visible={!!showModal} onClose={onModalClose} type={showModal} />
+    </>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  bottomInputContainer: {
+    width: '100%'
+  },
+  arrowIcon: {
+    position: 'absolute',
+    top: -30,
+    borderRadius: BorderRadius.xs,
+    borderWidth: 4,
+    height: 50,
+    width: 50
+  },
+  tokenInput: {
+    marginBottom: Spacing.xs
+  },
+  actionButton: {
+    marginTop: Spacing.xs,
+    width: '100%'
+  }
+});

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

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { AccountActivity } from '../../partials/w3m-account-activity';
+
+export function TransactionsView() {
+  return <AccountActivity style={styles.container} />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: Spacing.l,
+    marginTop: Spacing.s
+  }
+});

package/src/views/w3m-unsupported-chain-view/index.tsx

@@ -0,0 +1,77 @@
+import { useSnapshot } from 'valtio';
+import { useState } from 'react';
+import { FlatList } from 'react-native';
+import { ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
+import {
+  ApiController,
+  AssetController,
+  AssetUtil,
+  ConnectionsController
+} from '@reown/appkit-core-react-native';
+import type { AppKitNetwork } from '@reown/appkit-common-react-native';
+import { useInternalAppKit } from '../../AppKitContext';
+import styles from './styles';
+
+export function UnsupportedChainView() {
+  const { networkImages } = useSnapshot(AssetController.state);
+  const [disconnecting, setDisconnecting] = useState(false);
+  const networks = ConnectionsController.getAvailableNetworks();
+  const imageHeaders = ApiController._getApiHeaders();
+  const { disconnect, switchNetwork } = useInternalAppKit();
+
+  const onNetworkPress = async (network: AppKitNetwork) => {
+    await switchNetwork(network);
+  };
+
+  const onDisconnect = async () => {
+    setDisconnecting(true);
+    await disconnect(ConnectionsController.state.activeNamespace);
+    setDisconnecting(false);
+  };
+
+  return (
+    <FlatList
+      data={networks}
+      fadingEdgeLength={20}
+      ListHeaderComponentStyle={styles.header}
+      ListHeaderComponent={
+        <Text variant="small-400" color="fg-200" center>
+          The current network is not supported by this application. Please switch to an available
+          option to continue.
+        </Text>
+      }
+      contentContainerStyle={styles.contentContainer}
+      renderItem={({ item }) => (
+        <ListItem
+          key={item.id}
+          icon="networkPlaceholder"
+          iconBackgroundColor="gray-glass-010"
+          imageSrc={AssetUtil.getNetworkImage(item, networkImages)}
+          imageHeaders={imageHeaders}
+          onPress={() => onNetworkPress(item)}
+          testID="button-network"
+          style={styles.networkItem}
+          contentStyle={styles.networkItemContent}
+        >
+          <Text numberOfLines={1} color="fg-100">
+            {item.name ?? 'Unknown'}
+          </Text>
+        </ListItem>
+      )}
+      ListFooterComponent={
+        <>
+          <Separator text="or" style={styles.separator} />
+          <ListItem
+            icon="disconnect"
+            onPress={onDisconnect}
+            loading={disconnecting}
+            iconBackgroundColor="gray-glass-010"
+            testID="button-disconnect"
+          >
+            <Text color="fg-200">Disconnect</Text>
+          </ListItem>
+        </>
+      }
+    />
+  );
+}

package/src/views/w3m-unsupported-chain-view/styles.ts

@@ -0,0 +1,21 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  contentContainer: {
+    padding: Spacing.s,
+    paddingBottom: Spacing['s']
+  },
+  header: {
+    marginBottom: Spacing.s
+  },
+  networkItem: {
+    marginVertical: Spacing['3xs']
+  },
+  networkItemContent: {
+    justifyContent: 'space-between'
+  },
+  separator: {
+    marginBottom: Spacing['2xs']
+  }
+});

package/src/views/w3m-upgrade-email-wallet-view/index.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { Chip, FlexView, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { CoreHelperUtil } from '@reown/appkit-core-react-native';
+
+export function UpgradeEmailWalletView() {
+  const onLinkPress = () => {
+    CoreHelperUtil.openLink(ConstantsUtil.SECURE_SITE_DASHBOARD);
+  };
+
+  return (
+    <FlexView padding={['l', 'l', 's', 'l']} alignItems="center">
+      <Text variant="paragraph-400">Follow the instructions on</Text>
+      <Chip
+        label="secure.reown.com"
+        rightIcon="externalLink"
+        imageSrc={ConstantsUtil.SECURE_SITE_ICON}
+        style={styles.chip}
+        onPress={onLinkPress}
+      />
+      <Text variant="small-400" color="fg-200">
+        You will have to reconnect for security reasons
+      </Text>
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    marginVertical: Spacing.m
+  }
+});