@reown/appkit-ui-react-native 0.0.0-refactor-modal-migration-20241004184043 → 1.0.1

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

package/src/utils/TransactionUtil.ts

@@ -1,173 +0,0 @@
-import { DateUtil } from '@reown/appkit-common-react-native';
-import type {
-  TransactionTransfer,
-  Transaction,
-  TransactionImage
-} from '@reown/appkit-common-react-native';
-import type { TransactionType } from './TypesUtil';
-import { UiUtil } from './UiUtil';
-
-// -- Helpers --------------------------------------------- //
-const FLOAT_FIXED_VALUE = 2;
-const SMALL_FLOAT_FIXED_VALUE = 4;
-const plusTypes: TransactionType[] = ['receive', 'deposit', 'borrow', 'claim'];
-const minusTypes: TransactionType[] = ['withdraw', 'repay', 'burn'];
-
-export const TransactionUtil = {
-  getTransactionGroupTitle(year: string, month: string) {
-    const currentYear = DateUtil.getYear().toString();
-    const monthName = DateUtil.getMonth(parseInt(month));
-    const isCurrentYear = year === currentYear;
-    const groupTitle = isCurrentYear ? monthName : `${monthName} ${year}`;
-
-    return groupTitle;
-  },
-
-  getTransactionImages(transfers: TransactionTransfer[]): TransactionImage[] {
-    const [transfer, secondTransfer] = transfers;
-    const isAllNFT = Boolean(transfer) && transfers?.every(item => Boolean(item.nft_info));
-    const haveMultipleTransfers = transfers?.length > 1;
-    const haveTwoTransfers = transfers?.length === 2;
-
-    if (haveTwoTransfers && !isAllNFT) {
-      return [this.getTransactionImage(transfer), this.getTransactionImage(secondTransfer)];
-    }
-
-    if (haveMultipleTransfers) {
-      return transfers.map(item => this.getTransactionImage(item));
-    }
-
-    return [this.getTransactionImage(transfer)];
-  },
-
-  getTransactionImage(transfer?: TransactionTransfer): TransactionImage {
-    return {
-      type: TransactionUtil.getTransactionTransferTokenType(transfer),
-      url: TransactionUtil.getTransactionImageURL(transfer)
-    };
-  },
-
-  getTransactionImageURL(transfer: TransactionTransfer | undefined) {
-    let imageURL;
-    const isNFT = Boolean(transfer?.nft_info);
-    const isFungible = Boolean(transfer?.fungible_info);
-
-    if (transfer && isNFT) {
-      imageURL = transfer?.nft_info?.content?.preview?.url;
-    } else if (transfer && isFungible) {
-      imageURL = transfer?.fungible_info?.icon?.url;
-    }
-
-    return imageURL;
-  },
-
-  getTransactionTransferTokenType(transfer?: TransactionTransfer): 'FUNGIBLE' | 'NFT' | undefined {
-    if (transfer?.fungible_info) {
-      return 'FUNGIBLE';
-    } else if (transfer?.nft_info) {
-      return 'NFT';
-    }
-
-    return undefined;
-  },
-
-  getTransactionDescriptions(transaction: Transaction) {
-    const type = transaction?.metadata?.operationType as TransactionType;
-
-    const transfers = transaction?.transfers;
-    const haveTransfer = transaction?.transfers?.length > 0;
-    const haveMultipleTransfers = transaction?.transfers?.length > 1;
-    const isSendOrReceive = type === 'send' || type === 'receive';
-    const isFungible =
-      haveTransfer && transfers?.every(transfer => Boolean(transfer?.fungible_info));
-    const [firstTransfer, secondTransfer] = transfers;
-
-    let firstDescription = this.getTransferDescription(firstTransfer);
-    let secondDescription = this.getTransferDescription(secondTransfer);
-
-    if (!haveTransfer) {
-      if (isSendOrReceive && isFungible) {
-        firstDescription = UiUtil.getTruncateString({
-          string: transaction?.metadata.sentFrom,
-          charsStart: 4,
-          charsEnd: 6,
-          truncate: 'middle'
-        });
-        secondDescription = UiUtil.getTruncateString({
-          string: transaction?.metadata.sentTo,
-          charsStart: 4,
-          charsEnd: 6,
-          truncate: 'middle'
-        });
-
-        return [firstDescription, secondDescription];
-      }
-
-      return [transaction.metadata.status];
-    }
-
-    if (haveMultipleTransfers) {
-      return transfers.map(item => this.getTransferDescription(item));
-    }
-
-    let prefix = '';
-    if (plusTypes.includes(type)) {
-      prefix = '+';
-    } else if (minusTypes.includes(type)) {
-      prefix = '-';
-    }
-
-    firstDescription = prefix.concat(firstDescription);
-
-    if (isSendOrReceive) {
-      const isSend = type === 'send';
-      const address = UiUtil.getTruncateString({
-        string: isSend ? transaction.metadata.sentTo : transaction.metadata.sentFrom,
-        charsStart: 4,
-        charsEnd: 4,
-        truncate: 'middle'
-      });
-      const arrow = isSend ? '→' : '←';
-      firstDescription = firstDescription.concat(` ${arrow} ${address}`);
-    }
-
-    return [firstDescription];
-  },
-
-  getTransferDescription(transfer?: TransactionTransfer) {
-    let description = '';
-
-    if (!transfer) {
-      return description;
-    }
-
-    if (transfer?.nft_info) {
-      description = transfer?.nft_info?.name || '-';
-    } else if (transfer?.fungible_info) {
-      description = this.getFungibleTransferDescription(transfer) ?? '-';
-    }
-
-    return description;
-  },
-
-  getFungibleTransferDescription(transfer?: TransactionTransfer) {
-    if (!transfer) {
-      return null;
-    }
-
-    const quantity = this.getQuantityFixedValue(transfer?.quantity.numeric);
-    const description = [quantity, transfer?.fungible_info?.symbol].join(' ').trim();
-
-    return description;
-  },
-
-  getQuantityFixedValue(value: string | undefined) {
-    if (!value) {
-      return null;
-    }
-
-    const parsedValue = parseFloat(value);
-
-    return parsedValue.toFixed(parsedValue > 1 ? FLOAT_FIXED_VALUE : SMALL_FLOAT_FIXED_VALUE);
-  }
-};