@reown/appkit-ui-react-native 0.0.0-feat-wallet-features-20240925132010 → 0.0.0-fix-email-login-20241010173711

package/src/composites/wui-banner/index.tsx

@@ -1,28 +0,0 @@
-import type { IconType } from '../../utils/TypesUtil';
-import { FlexView } from '../../layout/wui-flex';
-import { IconBox } from '../wui-icon-box';
-import { Text } from '../../components/wui-text';
-import { useTheme } from '../../hooks/useTheme';
-import styles from './styles';
-
-export interface BannerProps {
-  icon: IconType;
-  text: string;
-}
-
-export function Banner({ icon, text }: BannerProps) {
-  const Theme = useTheme();
-
-  return (
-    <FlexView
-      flexDirection="row"
-      alignItems="center"
-      style={[styles.container, { backgroundColor: Theme['accent-glass-010'] }]}
-    >
-      <IconBox icon={icon} size="sm" iconColor="fg-200" background style={styles.icon} />
-      <Text variant="small-400" color="fg-200" style={styles.text}>
-        {text}
-      </Text>
-    </FlexView>
-  );
-}

package/src/composites/wui-banner/styles.ts

@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
-
-export default StyleSheet.create({
-  container: {
-    padding: Spacing.s,
-    borderRadius: BorderRadius.s
-  },
-  icon: {
-    marginRight: Spacing.xs
-  },
-  text: {
-    flex: 1
-  }
-});

package/src/composites/wui-compatible-network/index.tsx

@@ -1,64 +0,0 @@
-import { Text } from '../../components/wui-text';
-import { NetworkImage } from '../wui-network-image';
-import { FlexView } from '../../layout/wui-flex';
-import { ListItem } from '../wui-list-item';
-import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import { useTheme } from '../../hooks/useTheme';
-
-export interface CompatibleNetworkProps {
-  text: string;
-  onPress: () => void;
-  networkImages: string[];
-  imageHeaders: Record<string, string>;
-  style?: StyleProp<ViewStyle>;
-}
-
-const offset = [20, 15, 10, 5, 0];
-const zIndex = [5, 4, 3, 2, 1];
-
-export function CompatibleNetwork({
-  text,
-  onPress,
-  networkImages,
-  imageHeaders,
-  style
-}: CompatibleNetworkProps) {
-  const Theme = useTheme();
-
-  return (
-    <ListItem
-      onPress={onPress}
-      style={[styles.container, style]}
-      contentStyle={styles.contentContainer}
-      chevron
-    >
-      <Text color="fg-200" variant="small-400">
-        {text}
-      </Text>
-      <FlexView flexDirection="row" justifyContent="center" alignItems="center">
-        {networkImages?.map((image, index) => (
-          <NetworkImage
-            size="xs"
-            key={image}
-            imageSrc={image}
-            imageHeaders={imageHeaders}
-            borderColor={Theme['bg-200']}
-            borderWidth={2}
-            style={{ left: offset[index], zIndex: zIndex[index] }}
-          />
-        ))}
-      </FlexView>
-    </ListItem>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: 48
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingRight: 0
-  }
-});

package/src/composites/wui-list-token/index.tsx

@@ -1,83 +0,0 @@
-import { Pressable } from 'react-native';
-import { Icon } from '../../components/wui-icon';
-import { Image } from '../../components/wui-image';
-import { Text } from '../../components/wui-text';
-import { useTheme } from '../../hooks/useTheme';
-import { FlexView } from '../../layout/wui-flex';
-import { UiUtil } from '../../utils/UiUtil';
-import styles from './styles';
-
-export interface ListTokenProps {
-  imageSrc: string;
-  networkSrc?: string;
-  name: string;
-  value?: number;
-  amount?: string;
-  currency: string;
-  onPress?: () => void;
-}
-
-export function ListToken({
-  imageSrc,
-  networkSrc,
-  name,
-  value,
-  amount,
-  currency,
-  onPress
-}: ListTokenProps) {
-  const Theme = useTheme();
-
-  return (
-    <Pressable onPress={onPress}>
-      <FlexView
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-        padding={['2xs', 'm', '2xs', 'xs']}
-      >
-        <FlexView flexDirection="row" alignItems="center">
-          {imageSrc ? (
-            <Image
-              source={imageSrc}
-              style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}
-            />
-          ) : (
-            <FlexView
-              style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}
-              alignItems="center"
-              justifyContent="center"
-            >
-              <Icon name="coinPlaceholder" size="lg" color="fg-200" />
-            </FlexView>
-          )}
-          <FlexView
-            alignItems="center"
-            justifyContent="center"
-            style={[
-              styles.networkImageContainer,
-              { borderColor: Theme['bg-100'], backgroundColor: Theme['bg-200'] }
-            ]}
-          >
-            {networkSrc ? (
-              <Image source={networkSrc} style={styles.networkImage} />
-            ) : (
-              <Icon name="networkPlaceholder" size="xxs" color="fg-200" />
-            )}
-          </FlexView>
-          <FlexView padding={['0', 's', '0', 's']}>
-            <Text color="fg-100" variant="paragraph-500">
-              {name}
-            </Text>
-            <Text variant="small-400" color="fg-200">
-              {UiUtil.formatNumberToLocalString(amount, 4)} {currency}
-            </Text>
-          </FlexView>
-        </FlexView>
-        <Text color="fg-100" variant="paragraph-500">
-          ${value?.toFixed(2) ?? '0.00'}
-        </Text>
-      </FlexView>
-    </Pressable>
-  );
-}

package/src/composites/wui-list-token/styles.ts

@@ -1,24 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { BorderRadius, WalletImageSize } from '../../utils/ThemeUtil';
-
-export default StyleSheet.create({
-  image: {
-    height: WalletImageSize.sm,
-    width: WalletImageSize.sm,
-    borderRadius: BorderRadius.full
-  },
-  networkImageContainer: {
-    position: 'absolute',
-    bottom: -2,
-    left: 24,
-    borderWidth: 2,
-    borderRadius: BorderRadius.full,
-    width: 18,
-    height: 18
-  },
-  networkImage: {
-    width: 14,
-    height: 14,
-    borderRadius: BorderRadius.full
-  }
-});

package/src/composites/wui-list-transaction/index.tsx

@@ -1,65 +0,0 @@
-import { type TransactionImage, type TransactionStatus } from '@reown/appkit-common-react-native';
-
-import type { TransactionType } from '../../utils/TypesUtil';
-import { Text } from '../../components/wui-text';
-import { FlexView } from '../../layout/wui-flex';
-import { IconBox } from '../wui-icon-box';
-import { TransactionVisual } from '../wui-transaction-visual';
-import { getIcon, getTypeLabel, getIconColor } from './utils';
-import styles from './styles';
-import type { StyleProp, ViewStyle } from 'react-native';
-
-export interface ListTransactionProps {
-  date: string;
-  status?: TransactionStatus;
-  type?: TransactionType;
-  descriptions?: string[];
-  images?: TransactionImage[];
-  networkSrc?: string;
-  style?: StyleProp<ViewStyle>;
-  isAllNFT?: boolean;
-}
-
-export function ListTransaction({
-  date,
-  type,
-  descriptions,
-  images,
-  networkSrc,
-  style,
-  isAllNFT,
-  status
-}: ListTransactionProps) {
-  const joinSymbol = type === 'trade' ? ' → ' : ' - ';
-
-  return (
-    <FlexView flexDirection="row" alignItems="center" style={style}>
-      <TransactionVisual images={images} networkSrc={networkSrc} isAllNFT={isAllNFT} />
-      <FlexView flexDirection="row" alignItems="center" style={styles.middleContainer}>
-        <FlexView justifyContent="center" alignItems="flex-start">
-          <FlexView flexDirection="row" alignItems="center">
-            {type && (
-              <IconBox
-                icon={getIcon(type)}
-                size="sm"
-                iconColor={getIconColor(status)}
-                background
-                border
-                borderColor="bg-100"
-              />
-            )}
-            <Text variant="paragraph-500" color="fg-100">
-              {getTypeLabel(type)}
-            </Text>
-          </FlexView>
-          <Text variant="small-400" color="fg-200" numberOfLines={1} ellipsizeMode="tail">
-            {descriptions?.join(joinSymbol)}
-          </Text>
-        </FlexView>
-      </FlexView>
-      <Text variant="micro-700" color="fg-300" style={styles.date}>
-        {date}
-      </Text>
-    </FlexView>
-  );
-}

package/src/composites/wui-list-transaction/styles.ts

@@ -1,10 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  middleContainer: {
-    flex: 1
-  },
-  date: {
-    textTransform: 'uppercase'
-  }
-});

package/src/composites/wui-list-transaction/utils.ts

@@ -1,83 +0,0 @@
-import type { TransactionStatus } from '@reown/appkit-common-react-native';
-import type { IconType, TransactionType } from '../../utils/TypesUtil';
-
-export const getIcon = (type: TransactionType): IconType => {
-  switch (type) {
-    case 'approve':
-    case 'execute':
-      return 'checkmark';
-    case 'repay':
-    case 'send':
-    case 'stake':
-    case 'withdraw':
-      return 'arrowTop';
-    case 'burn':
-    case 'cancel':
-      return 'close';
-    case 'trade':
-      return 'swapHorizontal';
-    case 'deploy':
-      return 'arrowRight';
-    default:
-      return 'arrowBottom';
-  }
-};
-
-//Utils
-export const getIconColor = (status?: TransactionStatus) => {
-  switch (status) {
-    case 'confirmed':
-      return 'success-100';
-    case 'failed':
-      return 'error-100';
-    case 'pending':
-      return 'fg-200';
-    default:
-      return 'fg-200';
-  }
-};
-
-export const getTypeLabel = (type?: TransactionType) => {
-  if (!type) {
-    return 'Unknown';
-  }
-
-  switch (type) {
-    case 'approve':
-      return 'Approved';
-    case 'bought':
-      return 'Bought';
-    case 'borrow':
-      return 'Borrowed';
-    case 'burn':
-      return 'Burnt';
-    case 'cancel':
-      return 'Canceled';
-    case 'claim':
-      return 'Claimed';
-    case 'deploy':
-      return 'Deployed';
-    case 'deposit':
-      return 'Deposited';
-    case 'execute':
-      return 'Executed';
-    case 'mint':
-      return 'Minted';
-    case 'receive':
-      return 'Received';
-    case 'repay':
-      return 'Repaid';
-    case 'send':
-      return 'Sent';
-    case 'stake':
-      return 'Staked';
-    case 'trade':
-      return 'Swapped';
-    case 'unstake':
-      return 'Unstaked';
-    case 'withdraw':
-      return 'Withdrawn';
-    default:
-      return 'Unknown';
-  }
-};

package/src/composites/wui-token-button/index.tsx

@@ -1,29 +0,0 @@
-import type { Balance } from '@reown/appkit-common-react-native';
-import { Image } from '../../components/wui-image';
-import { Text } from '../../components/wui-text';
-import { Button } from '../wui-button';
-import styles from './styles';
-
-export interface TokenButtonProps {
-  onPress?: () => void;
-  token?: Balance;
-}
-
-export function TokenButton({ token, onPress }: TokenButtonProps) {
-  if (!token) {
-    return (
-      <Button variant="accent" style={styles.selectButton} size="sm" onPress={onPress}>
-        <Text variant="small-600" color="accent-100">
-          Select token
-        </Text>
-      </Button>
-    );
-  }
-
-  return (
-    <Button variant="shade" style={styles.container} size="sm" onPress={onPress}>
-      {token?.iconUrl && <Image source={token?.iconUrl} style={styles.image} />}
-      {token?.symbol && <Text>{token.symbol}</Text>}
-    </Button>
-  );
-}

package/src/composites/wui-token-button/styles.ts

@@ -1,18 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
-
-export default StyleSheet.create({
-  selectButton: {
-    height: 40,
-    paddingHorizontal: Spacing.m
-  },
-  container: {
-    height: 40
-  },
-  image: {
-    width: 24,
-    height: 24,
-    borderRadius: BorderRadius.full,
-    marginRight: Spacing['2xs']
-  }
-});

package/src/composites/wui-transaction-visual/index.tsx

@@ -1,78 +0,0 @@
-import type { TransactionImage } from '@reown/appkit-common-react-native';
-
-import { FlexView } from '../../layout/wui-flex';
-import { Icon } from '../../components/wui-icon';
-import { Image } from '../../components/wui-image';
-import { useTheme } from '../../hooks/useTheme';
-import styles from './styles';
-
-export interface TransactionVisualProps {
-  images?: TransactionImage[];
-  networkSrc?: string;
-  isAllNFT?: boolean;
-}
-
-export function TransactionVisual({ images, networkSrc, isAllNFT }: TransactionVisualProps) {
-  const Theme = useTheme();
-  const backgroundColor = Theme['bg-200'];
-  const isFirstNFT = Boolean(images?.[0]?.type === 'NFT');
-  const filteredImages = images?.filter(image => image.url);
-  const [firstImage, secondImage] = filteredImages ?? [];
-  const hasOneImage = filteredImages?.length === 1;
-  const hasTwoImages = filteredImages && filteredImages?.length > 1;
-
-  return (
-    <FlexView>
-      {!filteredImages?.length && (
-        <FlexView
-          alignItems="center"
-          justifyContent="center"
-          style={[styles.image, { backgroundColor }]}
-        >
-          <Icon name={isFirstNFT ? 'nftPlaceholder' : 'coinPlaceholder'} size="sm" color="fg-200" />
-        </FlexView>
-      )}
-      {hasOneImage && firstImage?.url && (
-        <Image
-          source={firstImage.url}
-          style={[styles.image, firstImage?.type === 'NFT' && styles.imageNft, { backgroundColor }]}
-        />
-      )}
-      {hasTwoImages && firstImage?.url && secondImage?.url && (
-        <FlexView flexDirection="row" padding={['0', 's', '0', '0']}>
-          <FlexView style={styles.halfContainer}>
-            <Image
-              source={firstImage.url}
-              style={[styles.image, isAllNFT && styles.imageNft, { backgroundColor }]}
-            />
-          </FlexView>
-          <FlexView style={styles.halfContainer}>
-            <Image
-              source={secondImage.url}
-              style={[
-                styles.image,
-                styles.halfRight,
-                isAllNFT && styles.imageNft,
-                { backgroundColor }
-              ]}
-            />
-          </FlexView>
-        </FlexView>
-      )}
-      <FlexView
-        alignItems="center"
-        justifyContent="center"
-        style={[
-          styles.networkImageContainer,
-          { borderColor: Theme['bg-100'], backgroundColor: Theme['bg-200'] }
-        ]}
-      >
-        {networkSrc ? (
-          <Image source={networkSrc} style={styles.networkImage} />
-        ) : (
-          <Icon name="networkPlaceholder" size="xxs" color="fg-200" />
-        )}
-      </FlexView>
-    </FlexView>
-  );
-}

package/src/composites/wui-transaction-visual/styles.ts

@@ -1,36 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
-
-export default StyleSheet.create({
-  image: {
-    height: 40,
-    width: 40,
-    borderRadius: BorderRadius.full,
-    marginRight: Spacing.s
-  },
-  imageNft: {
-    borderRadius: BorderRadius.xxs
-  },
-  halfContainer: {
-    overflow: 'hidden',
-    width: 20,
-    marginRight: 2
-  },
-  halfRight: {
-    left: -20
-  },
-  networkImageContainer: {
-    position: 'absolute',
-    bottom: -2,
-    left: 24,
-    borderWidth: 2,
-    borderRadius: BorderRadius.full,
-    width: 18,
-    height: 18
-  },
-  networkImage: {
-    width: 14,
-    height: 14,
-    borderRadius: BorderRadius.full
-  }
-});