@reown/appkit-react-native 0.0.0-feat-multichain-20250513175016

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

@@ -0,0 +1,94 @@
+import { useSnapshot } from 'valtio';
+import { ScrollView, StyleSheet } from 'react-native';
+import {
+  Chip,
+  CompatibleNetwork,
+  FlexView,
+  QrCode,
+  Spacing,
+  Text,
+  UiUtil
+} from '@reown/appkit-ui-react-native';
+import {
+  AccountController,
+  ApiController,
+  AssetUtil,
+  ConnectionsController,
+  OptionsController,
+  RouterController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+
+export function WalletReceiveView() {
+  const { address, profileName /*preferredAccountType*/ } = useSnapshot(AccountController.state);
+  const { activeNetwork, networks } = useSnapshot(ConnectionsController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { padding } = useCustomDimensions();
+  const canCopy = OptionsController.isClipboardAvailable();
+  // const isSmartAccount =
+  //   preferredAccountType === 'smartAccount' && NetworkController.checkIfSmartAccountEnabled();
+  // const networks = isSmartAccount
+  //   ? NetworkController.getSmartAccountEnabledNetworks()
+  //   : NetworkController.getApprovedCaipNetworks();
+
+  const imagesArray = networks
+    .filter(network => network?.id)
+    .slice(0, 5)
+    .map(network => AssetUtil.getNetworkImage(network?.id))
+    .filter(Boolean) as string[];
+
+  const label = UiUtil.getTruncateString({
+    string: profileName ?? address ?? '',
+    charsStart: profileName ? 30 : 4,
+    charsEnd: profileName ? 0 : 4,
+    truncate: profileName ? 'end' : 'middle'
+  });
+
+  const onNetworkPress = () => {
+    RouterController.push('WalletCompatibleNetworks');
+  };
+
+  const onCopyAddress = () => {
+    if (canCopy && AccountController.state.address) {
+      OptionsController.copyToClipboard(AccountController.state.address);
+      SnackController.showSuccess('Address copied');
+    }
+  };
+
+  if (!address) return;
+
+  return (
+    <ScrollView bounces={false} style={{ paddingHorizontal: padding }}>
+      <FlexView padding={['xl', 'xl', '2xl', 'xl']} alignItems="center">
+        <Chip
+          label={label}
+          rightIcon={canCopy ? 'copy' : undefined}
+          imageSrc={networkImage}
+          variant="transparent"
+          onPress={onCopyAddress}
+        />
+        <QrCode uri={address} size={232} arenaClear style={styles.qrContainer} />
+        <Text variant="paragraph-500" color="fg-100">
+          {canCopy ? 'Copy your address or scan this QR code' : 'Scan this QR code'}
+        </Text>
+        <CompatibleNetwork
+          text="Only receive from networks"
+          onPress={onNetworkPress}
+          networkImages={imagesArray}
+          imageHeaders={ApiController._getApiHeaders()}
+          style={styles.networksButton}
+        />
+      </FlexView>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  qrContainer: {
+    marginVertical: Spacing.xl
+  },
+  networksButton: {
+    marginTop: Spacing.l
+  }
+});

package/src/views/w3m-wallet-receive-view/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});

package/src/views/w3m-wallet-send-preview-view/components/preview-send-details.tsx

@@ -0,0 +1,102 @@
+import { AssetUtil } from '@reown/appkit-core-react-native';
+import type { CaipNetwork } from '@reown/appkit-common-react-native';
+import {
+  BorderRadius,
+  FlexView,
+  NetworkImage,
+  Spacing,
+  Text,
+  UiUtil,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+
+export interface PreviewSendDetailsProps {
+  address?: string;
+  name?: string;
+  caipNetwork?: CaipNetwork;
+  networkFee?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function PreviewSendDetails({
+  address,
+  name,
+  caipNetwork,
+  networkFee,
+  style
+}: PreviewSendDetailsProps) {
+  const Theme = useTheme();
+
+  const formattedName = UiUtil.getTruncateString({
+    string: name ?? '',
+    charsStart: 20,
+    charsEnd: 0,
+    truncate: 'end'
+  });
+
+  const formattedAddress = UiUtil.getTruncateString({
+    string: address || '',
+    charsStart: 6,
+    charsEnd: 8,
+    truncate: 'middle'
+  });
+
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork?.id);
+
+  return (
+    <FlexView
+      style={[styles.container, { backgroundColor: Theme['gray-glass-002'] }, style]}
+      padding="s"
+    >
+      <Text variant="small-400" color="fg-200" style={styles.title}>
+        Details
+      </Text>
+      <FlexView style={[styles.item, { backgroundColor: Theme['gray-glass-002'] }]}>
+        <Text variant="small-400" color="fg-150">
+          Network cost
+        </Text>
+        <Text variant="small-400" color="fg-100">
+          ${UiUtil.formatNumberToLocalString(networkFee, 2)}
+        </Text>
+      </FlexView>
+      <FlexView style={[styles.item, { backgroundColor: Theme['gray-glass-002'] }]}>
+        <Text variant="small-400" color="fg-150">
+          {formattedName || 'Address'}
+        </Text>
+        <Text variant="small-400" color="fg-100">
+          {formattedAddress}
+        </Text>
+      </FlexView>
+      <FlexView style={[styles.item, { backgroundColor: Theme['gray-glass-002'] }]}>
+        <Text variant="small-400" color="fg-150">
+          Network
+        </Text>
+        <NetworkImage imageSrc={networkImage} size="xs" />
+      </FlexView>
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    borderRadius: BorderRadius.xxs
+  },
+  title: {
+    marginBottom: Spacing.xs
+  },
+  item: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: Spacing.s,
+    borderRadius: BorderRadius.xxs,
+    marginTop: Spacing['2xs']
+  },
+  networkImage: {
+    height: 24,
+    width: 24,
+    borderRadius: BorderRadius.full
+  }
+});

package/src/views/w3m-wallet-send-preview-view/components/preview-send-pill.tsx

@@ -0,0 +1,36 @@
+import { BorderRadius, FlexView, Text, useTheme } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export interface PreviewSendPillProps {
+  text: string;
+  children: React.ReactNode;
+}
+
+export function PreviewSendPill({ text, children }: PreviewSendPillProps) {
+  const Theme = useTheme();
+
+  return (
+    <FlexView
+      flexDirection="row"
+      alignItems="center"
+      justifyContent="center"
+      padding={['xs', 's', 'xs', 's']}
+      style={[
+        styles.pill,
+        { backgroundColor: Theme['gray-glass-002'], borderColor: Theme['gray-glass-010'] }
+      ]}
+    >
+      <Text variant="large-500" color="fg-100">
+        {text}
+      </Text>
+      {children}
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  pill: {
+    borderRadius: BorderRadius.full,
+    borderWidth: StyleSheet.hairlineWidth
+  }
+});

package/src/views/w3m-wallet-send-preview-view/index.tsx

@@ -0,0 +1,134 @@
+import { useSnapshot } from 'valtio';
+import { ScrollView } from 'react-native';
+import { Avatar, Button, FlexView, Icon, Image, Text, UiUtil } from '@reown/appkit-ui-react-native';
+import { NumberUtil } from '@reown/appkit-common-react-native';
+import {
+  NetworkController,
+  RouterController,
+  SendController
+} from '@reown/appkit-core-react-native';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { PreviewSendPill } from './components/preview-send-pill';
+import styles from './styles';
+import { PreviewSendDetails } from './components/preview-send-details';
+
+export function WalletSendPreviewView() {
+  const { padding } = useCustomDimensions();
+  const { caipNetwork } = useSnapshot(NetworkController.state);
+  const {
+    token,
+    receiverAddress,
+    receiverProfileName,
+    receiverProfileImageUrl,
+    gasPriceInUSD,
+    loading
+  } = useSnapshot(SendController.state);
+
+  const getSendValue = () => {
+    if (SendController.state.token && SendController.state.sendTokenAmount) {
+      const price = SendController.state.token.price;
+      const totalValue = price * SendController.state.sendTokenAmount;
+
+      return totalValue.toFixed(2);
+    }
+
+    return null;
+  };
+
+  const getTokenAmount = () => {
+    const value = SendController.state.sendTokenAmount
+      ? NumberUtil.roundNumber(SendController.state.sendTokenAmount, 6, 5)
+      : 'unknown';
+
+    return `${value} ${SendController.state.token?.symbol}`;
+  };
+
+  const formattedAddress = receiverProfileName
+    ? UiUtil.getTruncateString({
+        string: receiverProfileName,
+        charsStart: 20,
+        charsEnd: 0,
+        truncate: 'end'
+      })
+    : UiUtil.getTruncateString({
+        string: receiverAddress || '',
+        charsStart: 4,
+        charsEnd: 4,
+        truncate: 'middle'
+      });
+
+  const onSend = () => {
+    SendController.sendToken();
+  };
+
+  const onCancel = () => {
+    RouterController.goBack();
+    SendController.setLoading(false);
+  };
+
+  return (
+    <ScrollView style={{ paddingHorizontal: padding }}>
+      <FlexView padding={['l', 'xl', '3xl', 'xl']}>
+        <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+          <FlexView>
+            <Text variant="small-400" color="fg-150">
+              Send
+            </Text>
+            <Text variant="paragraph-400" color="fg-100">
+              ${getSendValue()}
+            </Text>
+          </FlexView>
+          <PreviewSendPill text={getTokenAmount()}>
+            {token?.iconUrl ? (
+              <Image source={token?.iconUrl} style={styles.tokenLogo} />
+            ) : (
+              <Icon
+                name="coinPlaceholder"
+                height={32}
+                width={32}
+                style={styles.tokenLogo}
+                color="fg-200"
+              />
+            )}
+          </PreviewSendPill>
+        </FlexView>
+        <Icon name="arrowBottom" height={14} width={14} color="fg-200" style={styles.arrow} />
+        <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+          <Text variant="small-400" color="fg-150">
+            To
+          </Text>
+          <PreviewSendPill text={formattedAddress}>
+            <Avatar
+              address={receiverAddress}
+              imageSrc={receiverProfileImageUrl}
+              size={32}
+              borderWidth={0}
+              style={styles.avatar}
+            />
+          </PreviewSendPill>
+        </FlexView>
+        <PreviewSendDetails
+          style={styles.details}
+          networkFee={gasPriceInUSD}
+          address={receiverAddress}
+          name={receiverProfileName}
+          caipNetwork={caipNetwork}
+        />
+        <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+          <Icon name="warningCircle" size="sm" color="fg-200" style={styles.reviewIcon} />
+          <Text variant="small-400" color="fg-200">
+            Review transaction carefully
+          </Text>
+        </FlexView>
+        <FlexView flexDirection="row" margin={['l', '0', '0', '0']}>
+          <Button variant="shade" style={styles.cancelButton} onPress={onCancel}>
+            Cancel
+          </Button>
+          <Button variant="fill" style={styles.sendButton} onPress={onSend} loading={loading}>
+            Send
+          </Button>
+        </FlexView>
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-wallet-send-preview-view/styles.ts

@@ -0,0 +1,35 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  tokenLogo: {
+    height: 32,
+    width: 32,
+    borderRadius: BorderRadius.full,
+    marginLeft: Spacing.xs
+  },
+  arrow: {
+    marginVertical: Spacing.xs
+  },
+  avatar: {
+    marginLeft: Spacing.xs
+  },
+  details: {
+    marginTop: Spacing['2xl'],
+    marginBottom: Spacing.s
+  },
+  reviewIcon: {
+    marginRight: Spacing['3xs']
+  },
+  cancelButton: {
+    flex: 1
+  },
+  sendButton: {
+    marginLeft: Spacing.s,
+    flex: 3
+  }
+});

package/src/views/w3m-wallet-send-select-token-view/index.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import { ScrollView } from 'react-native';
+import { FlexView, InputText, ListToken, Text } from '@reown/appkit-ui-react-native';
+import {
+  AccountController,
+  AssetUtil,
+  ConnectionsController,
+  RouterController,
+  SendController
+} from '@reown/appkit-core-react-native';
+import type { Balance } from '@reown/appkit-common-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { Placeholder } from '../../partials/w3m-placeholder';
+import styles from './styles';
+
+export function WalletSendSelectTokenView() {
+  const { padding } = useCustomDimensions();
+  const { tokenBalance } = useSnapshot(AccountController.state);
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { token } = useSnapshot(SendController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const [tokenSearch, setTokenSearch] = useState<string>('');
+  const [filteredTokens, setFilteredTokens] = useState(tokenBalance ?? []);
+
+  const onSearchChange = (value: string) => {
+    setTokenSearch(value);
+    const filtered = AccountController.state.tokenBalance?.filter(_token =>
+      _token.name.toLowerCase().includes(value.toLowerCase())
+    );
+    setFilteredTokens(filtered ?? []);
+  };
+
+  const onTokenPress = (_token: Balance) => {
+    SendController.setToken(_token);
+    SendController.setTokenAmount(undefined);
+    RouterController.goBack();
+  };
+
+  return (
+    <FlexView
+      margin={['l', '0', '2xl', '0']}
+      style={[styles.container, { paddingHorizontal: padding }]}
+    >
+      <FlexView margin={['0', 'm', 'm', 'm']}>
+        <InputText
+          value={tokenSearch}
+          icon="search"
+          placeholder="Search token"
+          onChangeText={onSearchChange}
+          clearButtonMode="while-editing"
+        />
+      </FlexView>
+      <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.tokenList}>
+        <Text variant="paragraph-500" color="fg-200" style={styles.title}>
+          Your tokens
+        </Text>
+        {filteredTokens.length ? (
+          filteredTokens.map((_token, index) => (
+            <ListToken
+              key={`${_token.name}${index}`}
+              name={_token.name}
+              imageSrc={_token.iconUrl}
+              networkSrc={networkImage}
+              value={_token.value}
+              amount={_token.quantity.numeric}
+              currency={_token.symbol}
+              onPress={() => onTokenPress(_token)}
+              disabled={_token.address === token?.address}
+            />
+          ))
+        ) : (
+          <Placeholder
+            icon="coinPlaceholder"
+            title="No tokens found"
+            description="Your tokens will appear here"
+          />
+        )}
+      </ScrollView>
+    </FlexView>
+  );
+}

package/src/views/w3m-wallet-send-select-token-view/styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  container: {
+    minHeight: 250,
+    maxHeight: 600
+  },
+  title: {
+    marginBottom: Spacing.xs
+  },
+  tokenList: {
+    paddingHorizontal: Spacing.m
+  }
+});

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

@@ -0,0 +1,129 @@
+import { useCallback, useEffect } from 'react';
+import { Platform, ScrollView } from 'react-native';
+import { useSnapshot } from 'valtio';
+import {
+  AccountController,
+  CoreHelperUtil,
+  RouterController,
+  SendController,
+  SwapController
+} from '@reown/appkit-core-react-native';
+import { Button, FlexView, IconBox, Spacing } from '@reown/appkit-ui-react-native';
+import { SendInputToken } from '../../partials/w3m-send-input-token';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { useKeyboard } from '../../hooks/useKeyboard';
+import { SendInputAddress } from '../../partials/w3m-send-input-address';
+import styles from './styles';
+
+export function WalletSendView() {
+  const { padding } = useCustomDimensions();
+  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const { token, sendTokenAmount, receiverAddress, receiverProfileName, loading, gasPrice } =
+    useSnapshot(SendController.state);
+  const { tokenBalance } = useSnapshot(AccountController.state);
+
+  const paddingBottom = Platform.select({
+    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
+    default: Spacing['2xl']
+  });
+
+  const fetchNetworkPrice = useCallback(async () => {
+    await SwapController.getNetworkTokenPrice();
+    const gas = await SwapController.getInitialGasPrice();
+    if (gas?.gasPrice && gas?.gasPriceInUSD) {
+      SendController.setGasPrice(gas.gasPrice);
+      SendController.setGasPriceInUsd(gas.gasPriceInUSD);
+    }
+  }, []);
+
+  const onSendPress = () => {
+    RouterController.push('WalletSendPreview');
+  };
+
+  const getActionText = () => {
+    if (!SendController.state.token) {
+      return 'Select token';
+    }
+
+    if (
+      SendController.state.sendTokenAmount &&
+      SendController.state.token &&
+      SendController.state.sendTokenAmount > Number(SendController.state.token.quantity.numeric)
+    ) {
+      return 'Insufficient funds';
+    }
+
+    if (!SendController.state.sendTokenAmount) {
+      return 'Add amount';
+    }
+
+    if (SendController.state.sendTokenAmount && SendController.state.token?.price) {
+      const value = SendController.state.sendTokenAmount * SendController.state.token.price;
+      if (!value) {
+        return 'Incorrect value';
+      }
+    }
+
+    if (
+      SendController.state.receiverAddress &&
+      !CoreHelperUtil.isAddress(SendController.state.receiverAddress)
+    ) {
+      return 'Invalid address';
+    }
+
+    if (!SendController.state.receiverAddress) {
+      return 'Add address';
+    }
+
+    return 'Preview send';
+  };
+
+  useEffect(() => {
+    if (!token) {
+      SendController.setToken(tokenBalance?.[0]);
+    }
+    fetchNetworkPrice();
+  }, [token, tokenBalance, fetchNetworkPrice]);
+
+  const actionText = getActionText();
+
+  return (
+    <ScrollView
+      style={{ paddingHorizontal: padding }}
+      bounces={false}
+      keyboardShouldPersistTaps="always"
+    >
+      <FlexView padding="l" alignItems="center" justifyContent="center" style={{ paddingBottom }}>
+        <SendInputToken
+          token={token}
+          sendTokenAmount={sendTokenAmount}
+          gasPrice={Number(gasPrice)}
+          style={styles.tokenInput}
+          onTokenPress={() => RouterController.push('WalletSendSelectToken')}
+        />
+        <FlexView alignItems="center" justifyContent="center" style={styles.addressContainer}>
+          <SendInputAddress value={receiverProfileName || receiverAddress} />
+          <IconBox
+            icon="arrowBottom"
+            size="lg"
+            iconColor="fg-275"
+            background
+            backgroundColor="bg-175"
+            border
+            borderColor="bg-100"
+            borderSize={10}
+            style={styles.arrowIcon}
+          />
+        </FlexView>
+        <Button
+          style={styles.sendButton}
+          onPress={onSendPress}
+          disabled={!actionText.includes('Preview send')}
+          loading={loading}
+        >
+          {actionText}
+        </Button>
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-wallet-send-view/styles.ts

@@ -0,0 +1,21 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  sendButton: {
+    width: '100%',
+    marginTop: Spacing.xl,
+    borderRadius: BorderRadius.xs
+  },
+  tokenInput: {
+    marginBottom: Spacing.xs
+  },
+  arrowIcon: {
+    position: 'absolute',
+    top: -30,
+    borderRadius: BorderRadius.s
+  },
+  addressContainer: {
+    width: '100%'
+  }
+});