@reown/appkit-react-native 0.0.0-accounts-canary.1-20251023174733

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

@@ -0,0 +1,57 @@
+import { ScrollView } from 'react-native';
+import { useSnapshot } from 'valtio';
+import {
+  FlexView,
+  Text,
+  Banner,
+  NetworkImage,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import {
+  ApiController,
+  AssetController,
+  AssetUtil,
+  ConnectionsController
+} from '@reown/appkit-core-react-native';
+import styles from './styles';
+
+export function WalletCompatibleNetworks() {
+  const { padding } = useCustomDimensions();
+  const { networks, accountType } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const isSmartAccount = accountType === 'smartAccount';
+
+  const approvedNetworks = isSmartAccount
+    ? ConnectionsController.getSmartAccountEnabledNetworks()
+    : networks.filter(
+        network => network?.chainNamespace === ConnectionsController.state.activeNamespace
+      );
+
+  const imageHeaders = ApiController._getApiHeaders();
+
+  return (
+    <ScrollView bounces={false} style={{ paddingHorizontal: padding }} fadingEdgeLength={20}>
+      <FlexView padding={['xl', 's', 's', 's']}>
+        <Banner icon="warningCircle" text="You can only receive assets on these networks." />
+        {approvedNetworks.map((network, index) => (
+          <FlexView
+            key={network?.id ?? index}
+            flexDirection="row"
+            alignItems="center"
+            padding={['s', 's', 's', 's']}
+          >
+            <NetworkImage
+              imageSrc={AssetUtil.getNetworkImage(network, networkImages)}
+              imageHeaders={imageHeaders}
+              size="sm"
+              style={styles.image}
+            />
+            <Text color="fg-100" variant="paragraph-500">
+              {network?.name ?? 'Unknown Network'}
+            </Text>
+          </FlexView>
+        ))}
+      </FlexView>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,8 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  image: {
+    marginRight: Spacing.s
+  }
+});

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

@@ -0,0 +1,103 @@
+import { useSnapshot } from 'valtio';
+import { ScrollView, StyleSheet } from 'react-native';
+import {
+  Chip,
+  CompatibleNetwork,
+  FlexView,
+  QrCode,
+  Spacing,
+  Text,
+  UiUtil,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import {
+  ApiController,
+  AssetController,
+  AssetUtil,
+  ConnectionsController,
+  CoreHelperUtil,
+  OptionsController,
+  RouterController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+
+export function WalletReceiveView() {
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { activeNetwork, networks, activeAddress, accountType, identity } = useSnapshot(
+    ConnectionsController.state
+  );
+  const address = CoreHelperUtil.getPlainAddress(activeAddress);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+  const { padding } = useCustomDimensions();
+  const canCopy = OptionsController.isClipboardAvailable();
+  const isSmartAccount = accountType === 'smartAccount';
+
+  const approvedNetworks = isSmartAccount
+    ? ConnectionsController.getSmartAccountEnabledNetworks()
+    : networks.filter(
+        network => network?.chainNamespace === ConnectionsController.state.activeNamespace
+      );
+
+  const imagesArray = approvedNetworks
+    .filter(network => network?.id)
+    .slice(0, 5)
+    .map(
+      network =>
+        network.imageUrl ?? AssetUtil.getNetworkImage(network, AssetController.state.networkImages)
+    )
+    .filter(Boolean) as string[];
+
+  const label = UiUtil.getTruncateString({
+    string: identity?.name ?? address ?? '',
+    charsStart: identity?.name ? 30 : 4,
+    charsEnd: identity?.name ? 0 : 4,
+    truncate: identity?.name ? 'end' : 'middle'
+  });
+
+  const onNetworkPress = () => {
+    RouterController.push('WalletCompatibleNetworks');
+  };
+
+  const onCopyAddress = () => {
+    if (canCopy && address) {
+      OptionsController.copyToClipboard(address);
+      SnackController.showSuccess('Address copied');
+    }
+  };
+
+  if (!address) return;
+
+  return (
+    <ScrollView bounces={false} style={{ paddingHorizontal: padding }}>
+      <FlexView padding="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,95 @@
+import { AssetController, AssetUtil } from '@reown/appkit-core-react-native';
+import type { AppKitNetwork } 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';
+import { useSnapshot } from 'valtio';
+
+export interface PreviewSendDetailsProps {
+  address?: string;
+  name?: string;
+  activeNetwork?: AppKitNetwork;
+  networkFee?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function PreviewSendDetails({
+  address,
+  name,
+  activeNetwork,
+  style
+}: PreviewSendDetailsProps) {
+  const Theme = useTheme();
+  const { networkImages } = useSnapshot(AssetController.state);
+
+  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(activeNetwork, networkImages);
+
+  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">
+          {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,135 @@
+import { useSnapshot } from 'valtio';
+import { ScrollView } from 'react-native';
+import {
+  Avatar,
+  Button,
+  FlexView,
+  Icon,
+  Image,
+  Text,
+  UiUtil,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import { NumberUtil } from '@reown/appkit-common-react-native';
+import {
+  ConnectionsController,
+  RouterController,
+  SendController
+} from '@reown/appkit-core-react-native';
+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 { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { token, receiverAddress, receiverProfileName, receiverProfileImageUrl, loading } =
+    useSnapshot(SendController.state);
+
+  const getSendValue = () => {
+    if (SendController.state.token?.price && 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', 'l', '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}
+          address={receiverAddress}
+          name={receiverProfileName}
+          activeNetwork={activeNetwork}
+        />
+        <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,86 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import { ScrollView } from 'react-native';
+import {
+  FlexView,
+  InputText,
+  ListToken,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import {
+  AssetController,
+  AssetUtil,
+  ConnectionsController,
+  RouterController,
+  SendController
+} from '@reown/appkit-core-react-native';
+import type { Balance } from '@reown/appkit-common-react-native';
+
+import { Placeholder } from '../../partials/w3m-placeholder';
+import styles from './styles';
+
+export function WalletSendSelectTokenView() {
+  const { padding, maxHeight } = useCustomDimensions();
+  const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+  const [tokenSearch, setTokenSearch] = useState<string>('');
+  const [filteredTokens, setFilteredTokens] = useState(balances ?? []);
+
+  const onSearchChange = (value: string) => {
+    setTokenSearch(value);
+    const filtered = ConnectionsController.state.balances?.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', 'l', '0']}
+      style={[styles.container, { paddingHorizontal: padding, height: maxHeight }]}
+    >
+      <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 || '0'}
+              currency={_token.symbol}
+              onPress={() => onTokenPress(_token)}
+            />
+          ))
+        ) : (
+          <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
+  }
+});