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

package/src/partials/w3m-placeholder/index.tsx

@@ -0,0 +1,77 @@
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  IconBox,
+  Text,
+  FlexView,
+  Spacing,
+  type IconType,
+  Button,
+  type ColorType
+} from '@reown/appkit-ui-react-native';
+
+interface Props {
+  icon?: IconType;
+  iconColor?: ColorType;
+  title?: string;
+  description?: string;
+  style?: StyleProp<ViewStyle>;
+  actionIcon?: IconType;
+  actionPress?: () => void;
+  actionTitle?: string;
+}
+
+export function Placeholder({
+  icon,
+  iconColor = 'fg-175',
+  title,
+  description,
+  style,
+  actionPress,
+  actionTitle,
+  actionIcon
+}: Props) {
+  return (
+    <FlexView alignItems="center" justifyContent="center" style={[styles.container, style]}>
+      {icon ? (
+        <IconBox icon={icon} size="xl" iconColor={iconColor} background style={styles.icon} />
+      ) : null}
+      {title ? (
+        <Text variant="paragraph-500" style={styles.title}>
+          {title}
+        </Text>
+      ) : null}
+      {description ? (
+        <Text variant="small-400" color="fg-200" center>
+          {description}
+        </Text>
+      ) : null}
+      {actionPress ? (
+        <Button
+          style={styles.button}
+          iconLeft={actionIcon}
+          size="sm"
+          variant="accent"
+          onPress={actionPress}
+        >
+          {actionTitle ?? ''}
+        </Button>
+      ) : null}
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    minHeight: 200
+  },
+  icon: {
+    marginBottom: Spacing.l
+  },
+  title: {
+    marginBottom: Spacing['2xs']
+  },
+  button: {
+    marginTop: Spacing.m
+  }
+});

package/src/partials/w3m-selector-modal/index.tsx

@@ -0,0 +1,141 @@
+import { useSnapshot } from 'valtio';
+import { FlatList, View, Modal } from 'react-native';
+import {
+  FlexView,
+  IconBox,
+  IconLink,
+  Image,
+  SearchBar,
+  Separator,
+  Spacing,
+  Text,
+  useCustomDimensions,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+import { AssetController, AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
+import { Placeholder } from '../w3m-placeholder';
+import styles from './styles';
+
+interface SelectorModalProps {
+  title?: string;
+  visible: boolean;
+  onClose: () => void;
+  items: any[];
+  selectedItem?: any;
+  renderItem: ({ item }: { item: any }) => React.ReactElement;
+  keyExtractor: (item: any, index: number) => string;
+  onSearch: (value: string) => void;
+  itemHeight?: number;
+  showNetwork?: boolean;
+  searchPlaceholder?: string;
+  emptyTitle?: string;
+  emptyDescription?: string;
+}
+
+const SEPARATOR_HEIGHT = Spacing.s;
+
+export function SelectorModal({
+  title,
+  visible,
+  onClose,
+  items,
+  selectedItem,
+  renderItem,
+  onSearch,
+  searchPlaceholder,
+  keyExtractor,
+  itemHeight,
+  showNetwork,
+  emptyTitle = 'No tokens found',
+  emptyDescription = "There's no available tokens for this network"
+}: SelectorModalProps) {
+  const Theme = useTheme();
+  const { maxHeight } = useCustomDimensions();
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+
+  const renderSeparator = () => {
+    return <View style={{ height: SEPARATOR_HEIGHT }} />;
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <View style={styles.modal}>
+        <FlatList
+          data={items}
+          renderItem={renderItem}
+          fadingEdgeLength={20}
+          automaticallyAdjustKeyboardInsets={false}
+          keyboardShouldPersistTaps="always"
+          style={[styles.container, { backgroundColor: Theme['bg-100'], maxHeight }]}
+          ListHeaderComponentStyle={styles.header}
+          ListEmptyComponent={
+            <Placeholder icon="coinPlaceholder" title={emptyTitle} description={emptyDescription} />
+          }
+          ListHeaderComponent={
+            <>
+              <FlexView
+                alignItems="center"
+                justifyContent="space-between"
+                flexDirection="row"
+                style={styles.headerTop}
+              >
+                <IconLink
+                  icon="chevronLeft"
+                  onPress={onClose}
+                  testID="selector-modal-button-back"
+                />
+                {!!title && <Text variant="paragraph-600">{title}</Text>}
+                {showNetwork ? (
+                  networkImage ? (
+                    <FlexView
+                      alignItems="center"
+                      justifyContent="center"
+                      style={styles.iconPlaceholder}
+                    >
+                      <Image source={networkImage} style={styles.networkImage} />
+                    </FlexView>
+                  ) : (
+                    <IconBox
+                      style={styles.iconPlaceholder}
+                      icon="networkPlaceholder"
+                      background
+                      iconColor="fg-200"
+                      size="sm"
+                    />
+                  )
+                ) : (
+                  <View style={styles.iconPlaceholder} />
+                )}
+              </FlexView>
+              <SearchBar
+                onChangeText={onSearch}
+                style={styles.searchBar}
+                placeholder={searchPlaceholder}
+              />
+              {selectedItem ? (
+                <FlexView>
+                  {renderItem({ item: selectedItem })}
+                  <Separator style={styles.separator} color="gray-glass-005" />
+                </FlexView>
+              ) : null}
+            </>
+          }
+          contentContainerStyle={styles.listContent}
+          ItemSeparatorComponent={renderSeparator}
+          keyExtractor={keyExtractor}
+          getItemLayout={
+            itemHeight
+              ? (_, index) => ({
+                  length: itemHeight + SEPARATOR_HEIGHT,
+                  offset: (itemHeight + SEPARATOR_HEIGHT) * index,
+                  index
+                })
+              : undefined
+          }
+        />
+      </View>
+    </Modal>
+  );
+}

package/src/partials/w3m-selector-modal/styles.ts

@@ -0,0 +1,41 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  modal: {
+    flex: 1,
+    margin: 0,
+    justifyContent: 'flex-end'
+  },
+  header: {
+    paddingTop: Spacing['2xs'],
+    paddingBottom: Spacing.s
+  },
+  headerTop: {
+    paddingHorizontal: Spacing.m,
+    paddingBottom: Spacing.xs
+  },
+  container: {
+    borderTopLeftRadius: BorderRadius.l,
+    borderTopRightRadius: BorderRadius.l
+  },
+  listContent: {
+    paddingTop: Spacing.s
+  },
+  iconPlaceholder: {
+    height: 32,
+    width: 32
+  },
+  networkImage: {
+    height: 20,
+    width: 20,
+    borderRadius: BorderRadius.full
+  },
+  searchBar: {
+    marginBottom: Spacing.s,
+    marginHorizontal: Spacing.s
+  },
+  separator: {
+    marginVertical: Spacing.xs
+  }
+});

package/src/partials/w3m-send-input-address/index.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { TextInput } from 'react-native';
+import { FlexView, useTheme } from '@reown/appkit-ui-react-native';
+import { SendController } from '@reown/appkit-core-react-native';
+
+import { useDebounceCallback } from '../../hooks/useDebounceCallback';
+import styles from './styles';
+
+export interface SendInputAddressProps {
+  value?: string;
+}
+
+export function SendInputAddress({ value }: SendInputAddressProps) {
+  const Theme = useTheme();
+  const [inputValue, setInputValue] = useState<string | undefined>(value);
+
+  const onSearch = async (search: string) => {
+    SendController.setReceiverAddress(search);
+    SendController.setReceiverProfileName(undefined);
+    SendController.setReceiverProfileImageUrl(undefined);
+  };
+
+  const { debouncedCallback: onDebounceSearch } = useDebounceCallback({
+    callback: onSearch,
+    delay: 800
+  });
+
+  const onInputChange = (address: string) => {
+    setInputValue(address);
+    SendController.setReceiverAddress(address);
+    onDebounceSearch(address);
+  };
+
+  return (
+    <FlexView
+      style={[
+        styles.container,
+        { backgroundColor: Theme['gray-glass-005'], borderColor: Theme['gray-glass-005'] }
+      ]}
+      justifyContent="center"
+      padding={['xl', 'l', 'l', 'l']}
+    >
+      <TextInput
+        placeholder="Type or paste address"
+        placeholderTextColor={Theme['fg-275']}
+        returnKeyType="done"
+        style={[styles.input, { color: Theme['fg-100'] }]}
+        autoCapitalize="none"
+        autoCorrect={false}
+        value={inputValue}
+        onChangeText={onInputChange}
+        keyboardType="default"
+        inputMode="text"
+        autoComplete="off"
+        spellCheck={false}
+        selectionColor={Theme['accent-100']}
+        underlineColorAndroid="transparent"
+        selectTextOnFocus={false}
+        returnKeyLabel="Done"
+      />
+    </FlexView>
+  );
+}

package/src/partials/w3m-send-input-address/styles.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: 100,
+    width: '100%',
+    borderRadius: BorderRadius.s,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  input: {
+    fontSize: 18
+  }
+});

package/src/partials/w3m-send-input-token/index.tsx

@@ -0,0 +1,117 @@
+import { useRef, useState } from 'react';
+import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  FlexView,
+  Link,
+  Text,
+  useTheme,
+  TokenButton,
+  Shimmer
+} from '@reown/appkit-ui-react-native';
+import { NumberUtil, type Balance } from '@reown/appkit-common-react-native';
+import { SendController } from '@reown/appkit-core-react-native';
+
+import { getMaxAmount, getSendValue } from './utils';
+import styles from './styles';
+
+export interface SendInputTokenProps {
+  token?: Balance;
+  sendTokenAmount?: number;
+  style?: StyleProp<ViewStyle>;
+  onTokenPress?: () => void;
+  loading?: boolean;
+}
+
+export function SendInputToken({
+  token,
+  sendTokenAmount,
+  style,
+  onTokenPress,
+  loading
+}: SendInputTokenProps) {
+  const Theme = useTheme();
+  const valueInputRef = useRef<TextInput | null>(null);
+  const [inputValue, setInputValue] = useState<string | undefined>(sendTokenAmount?.toString());
+  const sendValue = getSendValue(token, sendTokenAmount);
+  const maxAmount = getMaxAmount(token);
+  const maxError = token && sendTokenAmount && sendTokenAmount > Number(token?.quantity?.numeric);
+
+  const onInputChange = (value: string) => {
+    const formattedValue = value.replace(/,/g, '.');
+
+    if (Number(formattedValue) >= 0 || formattedValue === '') {
+      setInputValue(formattedValue);
+      SendController.setTokenAmount(Number(formattedValue));
+    }
+  };
+
+  const onMaxPress = () => {
+    if (token?.quantity?.numeric) {
+      const maxValue = NumberUtil.bigNumber(token.quantity.numeric);
+      SendController.setTokenAmount(Number(maxValue.toFixed(20)));
+      setInputValue(maxValue.toFixed(20));
+      valueInputRef.current?.blur();
+    }
+  };
+
+  return loading ? (
+    <Shimmer width="100%" height={100} borderRadius={16} style={styles.inputLoading} />
+  ) : (
+    <FlexView
+      style={[
+        styles.container,
+        { backgroundColor: Theme['gray-glass-005'], borderColor: Theme['gray-glass-005'] },
+        style
+      ]}
+      justifyContent="center"
+      padding={['xl', 'l', 'l', 'l']}
+    >
+      <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+        <TextInput
+          ref={valueInputRef}
+          placeholder="0"
+          placeholderTextColor={Theme['fg-275']}
+          returnKeyType="done"
+          style={[styles.input, { color: Theme['fg-100'] }]}
+          autoCapitalize="none"
+          autoCorrect={false}
+          value={inputValue}
+          onChangeText={onInputChange}
+          keyboardType="decimal-pad"
+          inputMode="decimal"
+          autoComplete="off"
+          spellCheck={false}
+          selectionColor={Theme['accent-100']}
+          underlineColorAndroid="transparent"
+          selectTextOnFocus={false}
+          numberOfLines={1}
+          autoFocus={!!token}
+        />
+        <TokenButton
+          imageUrl={token?.iconUrl}
+          text={token?.symbol}
+          onPress={onTokenPress}
+          chevron
+        />
+      </FlexView>
+      {token ? (
+        <FlexView
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+          margin={['3xs', '0', '0', '0']}
+        >
+          <Text variant="small-400" color="fg-200" style={styles.sendValue} numberOfLines={1}>
+            {sendValue ?? ''}
+          </Text>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+            <Text variant="small-400" color={maxError ? 'error-100' : 'fg-200'} numberOfLines={1}>
+              {maxAmount ?? ''}
+            </Text>
+            <Link onPress={onMaxPress}>Max</Link>
+          </FlexView>
+        </FlexView>
+      ) : null}
+    </FlexView>
+  );
+}

package/src/partials/w3m-send-input-token/styles.ts

@@ -0,0 +1,23 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: 100,
+    width: '100%',
+    borderRadius: BorderRadius.s,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  input: {
+    fontSize: 32,
+    flex: 1,
+    marginRight: Spacing.xs
+  },
+  sendValue: {
+    flex: 1,
+    marginRight: Spacing.xs
+  },
+  inputLoading: {
+    marginBottom: Spacing.xs
+  }
+});

package/src/partials/w3m-send-input-token/utils.ts

@@ -0,0 +1,21 @@
+import { type Balance, NumberUtil } from '@reown/appkit-common-react-native';
+import { UiUtil } from '@reown/appkit-ui-react-native';
+
+export function getSendValue(token?: Balance, sendTokenAmount?: number) {
+  if (token?.price && sendTokenAmount) {
+    const price = token.price;
+    const totalValue = price * sendTokenAmount;
+
+    return totalValue ? `$${UiUtil.formatNumberToLocalString(totalValue, 2)}` : 'Incorrect value';
+  }
+
+  return null;
+}
+
+export function getMaxAmount(token?: Balance) {
+  if (token?.quantity?.numeric) {
+    return NumberUtil.roundNumber(Number(token.quantity.numeric), 6, 5);
+  }
+
+  return null;
+}

package/src/partials/w3m-snackbar/index.tsx

@@ -0,0 +1,43 @@
+import { useSnapshot } from 'valtio';
+import { useEffect, useMemo } from 'react';
+import { Animated } from 'react-native';
+import { SnackController, type SnackControllerState } from '@reown/appkit-core-react-native';
+import { Snackbar as SnackbarComponent } from '@reown/appkit-ui-react-native';
+
+import styles from './styles';
+
+const getIcon = (variant: SnackControllerState['variant']) => {
+  if (variant === 'loading') return 'loading';
+
+  return variant === 'success' ? 'checkmark' : 'close';
+};
+
+export function Snackbar() {
+  const { open, message, variant } = useSnapshot(SnackController.state);
+  const componentOpacity = useMemo(() => new Animated.Value(0), []);
+
+  useEffect(() => {
+    if (open) {
+      Animated.timing(componentOpacity, {
+        toValue: 1,
+        duration: 150,
+        useNativeDriver: true
+      }).start();
+    } else {
+      Animated.timing(componentOpacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      }).start();
+    }
+  }, [open, componentOpacity]);
+
+  return (
+    <SnackbarComponent
+      message={message}
+      icon={getIcon(variant)}
+      iconColor={variant === 'success' ? 'success-100' : 'error-100'}
+      style={[styles.container, { opacity: componentOpacity }]}
+    />
+  );
+}

package/src/partials/w3m-snackbar/styles.ts

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