@reown/appkit-react-native 0.0.0-chore-bump-builder-20250728194329

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

@@ -0,0 +1,65 @@
+import Modal from 'react-native-modal';
+import {
+  FlexView,
+  Text,
+  type IconType,
+  IconBox,
+  useTheme,
+  Button
+} from '@reown/appkit-ui-react-native';
+import styles from './styles';
+
+interface InformationModalProps {
+  iconName: IconType;
+  title?: string;
+  description?: string;
+  visible: boolean;
+  onClose: () => void;
+}
+
+export function InformationModal({
+  iconName,
+  title,
+  description,
+  visible,
+  onClose
+}: InformationModalProps) {
+  const Theme = useTheme();
+
+  return (
+    <Modal
+      isVisible={visible}
+      useNativeDriver
+      useNativeDriverForBackdrop
+      onBackdropPress={onClose}
+      onDismiss={onClose}
+      style={styles.modal}
+    >
+      <FlexView
+        style={[
+          styles.content,
+          {
+            backgroundColor: Theme['bg-200']
+          }
+        ]}
+        padding="2xl"
+      >
+        <IconBox icon={iconName} size="lg" background />
+        {!!title && (
+          <Text variant="paragraph-500" style={styles.title}>
+            {title}
+          </Text>
+        )}
+
+        {!!description && (
+          <Text variant="small-400" color="fg-150" center>
+            {description}
+          </Text>
+        )}
+        <Button onPress={onClose} variant="fill" style={styles.button}>
+          Got it
+        </Button>
+      </FlexView>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end'
+  },
+  content: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    alignItems: 'center'
+  },
+  title: {
+    marginTop: Spacing.s,
+    marginBottom: Spacing.xs
+  },
+  button: {
+    marginTop: Spacing.xl,
+    width: '100%'
+  }
+});

package/src/partials/w3m-otp-code/index.tsx

@@ -0,0 +1,81 @@
+import { Platform } from 'react-native';
+import { FlexView, Link, LoadingSpinner, Otp, Spacing, Text } from '@reown/appkit-ui-react-native';
+
+import { useKeyboard } from '../../hooks/useKeyboard';
+import styles from './styles';
+
+interface Props {
+  onCodeChange?: (code: string) => void;
+  onSubmit: (code: string) => void;
+  onRetry: () => void;
+  loading?: boolean;
+  error?: string;
+  email?: string;
+  timeLeft?: number;
+  codeExpiry?: number;
+  retryLabel?: string;
+  retryDisabledButtonLabel?: string;
+  retryButtonLabel?: string;
+}
+
+export function OtpCodeView({
+  onCodeChange,
+  onSubmit,
+  onRetry,
+  error,
+  loading,
+  email,
+  timeLeft = 0,
+  codeExpiry = 20,
+  retryLabel = "Didn't receive it?",
+  retryDisabledButtonLabel = 'Resend',
+  retryButtonLabel = 'Resend code'
+}: Props) {
+  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const paddingBottom = Platform.select({
+    android: keyboardShown ? keyboardHeight + Spacing.l : Spacing.l,
+    default: Spacing.l
+  });
+
+  const handleCodeChange = (code: string) => {
+    onCodeChange?.(code);
+
+    if (code.length === 6) {
+      onSubmit?.(code);
+    }
+  };
+
+  return (
+    <FlexView padding={['l', 'l', '3xl', 'l']} alignItems="center" style={{ paddingBottom }}>
+      <Text center variant="paragraph-400">
+        Enter the code we sent to{' '}
+      </Text>
+      <Text variant="paragraph-500">{email ?? 'your email'}</Text>
+      <Text style={styles.expiryText} variant="small-400" color="fg-200">
+        {`The code expires in ${codeExpiry} minutes`}
+      </Text>
+      <FlexView justifyContent="center" style={styles.otpContainer}>
+        {loading ? (
+          <LoadingSpinner size="xl" />
+        ) : (
+          <Otp length={6} onChangeText={handleCodeChange} autoFocus />
+        )}
+      </FlexView>
+      {error && (
+        <Text variant="small-400" color="error-100" style={styles.errorText}>
+          {error}
+        </Text>
+      )}
+      {!loading && (
+        <FlexView alignItems="center" flexDirection="row" margin={['s', '0', '0', '0']}>
+          <Text variant="small-400" color="fg-200">
+            {retryLabel}
+          </Text>
+          <Link onPress={onRetry} disabled={timeLeft > 0 || loading}>
+            {timeLeft > 0 ? `${retryDisabledButtonLabel} in ${timeLeft}s` : retryButtonLabel}
+          </Link>
+        </FlexView>
+      )}
+    </FlexView>
+  );
+}

package/src/partials/w3m-otp-code/styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  expiryText: {
+    marginTop: Spacing.s,
+    marginBottom: Spacing.l
+  },
+  otpContainer: {
+    height: 60
+  },
+  errorText: {
+    marginTop: Spacing['2xs']
+  }
+});

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} />
+      )}
+      {title && (
+        <Text variant="paragraph-500" style={styles.title}>
+          {title}
+        </Text>
+      )}
+      {description && (
+        <Text variant="small-400" color="fg-200" center>
+          {description}
+        </Text>
+      )}
+      {actionPress && (
+        <Button
+          style={styles.button}
+          iconLeft={actionIcon}
+          size="sm"
+          variant="accent"
+          onPress={actionPress}
+        >
+          {actionTitle ?? ''}
+        </Button>
+      )}
+    </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,125 @@
+import { useSnapshot } from 'valtio';
+import Modal from 'react-native-modal';
+import { FlatList, View } from 'react-native';
+import {
+  FlexView,
+  IconBox,
+  IconLink,
+  Image,
+  SearchBar,
+  Separator,
+  Spacing,
+  Text,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+import styles from './styles';
+import { AssetController, ConnectionsController } from '@reown/appkit-core-react-native';
+
+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;
+}
+
+const SEPARATOR_HEIGHT = Spacing.s;
+
+export function SelectorModal({
+  title,
+  visible,
+  onClose,
+  items,
+  selectedItem,
+  renderItem,
+  onSearch,
+  searchPlaceholder,
+  keyExtractor,
+  itemHeight,
+  showNetwork
+}: SelectorModalProps) {
+  const Theme = useTheme();
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+
+  const renderSeparator = () => {
+    return <View style={{ height: SEPARATOR_HEIGHT }} />;
+  };
+
+  return (
+    <Modal
+      isVisible={visible}
+      useNativeDriver
+      useNativeDriverForBackdrop
+      statusBarTranslucent
+      hideModalContentWhileAnimating
+      onBackdropPress={onClose}
+      onDismiss={onClose}
+      style={styles.modal}
+    >
+      <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
+        <FlexView
+          alignItems="center"
+          justifyContent="space-between"
+          flexDirection="row"
+          style={styles.header}
+        >
+          <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 style={styles.selectedContainer}>
+            {renderItem({ item: selectedItem })}
+            <Separator style={styles.separator} color="gray-glass-020" />
+          </FlexView>
+        )}
+        <FlatList
+          data={items}
+          renderItem={renderItem}
+          fadingEdgeLength={20}
+          contentContainerStyle={styles.listContent}
+          ItemSeparatorComponent={renderSeparator}
+          keyExtractor={keyExtractor}
+          getItemLayout={
+            itemHeight
+              ? (_, index) => ({
+                  length: itemHeight + SEPARATOR_HEIGHT,
+                  offset: (itemHeight + SEPARATOR_HEIGHT) * index,
+                  index
+                })
+              : undefined
+          }
+        />
+      </FlexView>
+    </Modal>
+  );
+}

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

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

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>
+      )}
+    </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;
+}