@reown/appkit-ui-react-native 0.0.0-fix-email-login-20241010173711 → 0.0.0-fix-token-balance-20241017200828

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

@@ -1,11 +1,12 @@
 import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
 
 export default StyleSheet.create({
   container: {
     height: 40,
     flexDirection: 'row',
     paddingHorizontal: 8,
-    borderRadius: 100,
+    borderRadius: BorderRadius.full,
     borderWidth: 1,
     alignItems: 'center'
   },

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

@@ -1,5 +1,12 @@
 import { useRef, useState } from 'react';
-import { Animated, Pressable, View } from 'react-native';
+import {
+  Animated,
+  Pressable,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
 import { Icon } from '../../components/wui-icon';
 import { Text } from '../../components/wui-text';
 import { useTheme } from '../../hooks/useTheme';
@@ -8,13 +15,16 @@ import styles from './styles';
 
 export interface TabsProps {
   onTabChange: (index: number) => void;
-  tabs: TabOptionType[];
+  tabs: TabOptionType[] | string[];
+  style?: StyleProp<ViewStyle>;
 }
 
-export function Tabs({ tabs, onTabChange }: TabsProps) {
+export function Tabs({ tabs, onTabChange, style }: TabsProps) {
   const Theme = useTheme();
   const [activeTab, setActiveTab] = useState(0);
   const animatedPosition = useRef(new Animated.Value(0));
+  const [viewWidth, setViewWidth] = useState(1);
+  const tabWidth = Math.trunc(viewWidth / tabs.length) - 2;
 
   const onTabPress = (index: number) => {
     setActiveTab(index);
@@ -28,27 +38,41 @@ export function Tabs({ tabs, onTabChange }: TabsProps) {
 
   const markPosition = animatedPosition.current.interpolate({
     inputRange: [0, tabs.length - 1],
-    outputRange: [0, 100 * (tabs.length - 1)]
+    outputRange: [0, tabWidth * (tabs.length - 1)]
   });
 
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setViewWidth(width);
+  };
+
   return (
-    <View style={[styles.container, { backgroundColor: Theme['gray-glass-002'] }]}>
+    <View
+      style={[styles.container, { backgroundColor: Theme['gray-glass-002'] }, style]}
+      onLayout={onLayout}
+    >
       <Animated.View
         style={[
           styles.activeMark,
           {
             backgroundColor: Theme['gray-glass-005'],
             borderColor: Theme['gray-glass-005'],
-            left: markPosition
+            left: markPosition,
+            width: tabWidth
           }
         ]}
       />
       {tabs.map((option, index) => {
         const isActive = index === activeTab;
+        const isString = typeof option === 'string';
 
         return (
-          <Pressable onPress={() => onTabPress(index)} key={option.label} style={styles.tabItem}>
-            {option.icon && (
+          <Pressable
+            onPress={() => onTabPress(index)}
+            key={isString ? option : option.label}
+            style={[styles.tabItem, { width: tabWidth }]}
+          >
+            {!isString && option.icon && (
               <Icon
                 name={option.icon}
                 size="xs"
@@ -57,7 +81,7 @@ export function Tabs({ tabs, onTabChange }: TabsProps) {
               />
             )}
             <Text variant="small-600" color={isActive ? 'fg-100' : 'fg-200'}>
-              {option.label}
+              {isString ? option : option.label}
             </Text>
           </Pressable>
         );

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

@@ -4,6 +4,7 @@ import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
 export default StyleSheet.create({
   container: {
     height: 34,
+    width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: Spacing['3xs'],
@@ -13,7 +14,6 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    width: 100,
     paddingVertical: Spacing['2xs']
   },
   tabIcon: {
@@ -22,7 +22,6 @@ export default StyleSheet.create({
   activeMark: {
     position: 'absolute',
     height: 28,
-    width: 100,
     borderWidth: 1,
     borderRadius: BorderRadius['3xl'],
     margin: Spacing['3xs']

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,36 @@
+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/index.ts

@@ -9,8 +9,11 @@ export { Visual, type VisualProps } from './components/wui-visual';
 export { Shimmer, type ShimmerProps } from './components/wui-shimmer';
 
 export { AccountButton, type AccountButtonProps } from './composites/wui-account-button';
+export { AccountPill, type AccountPillProps } from './composites/wui-account-pill';
 export { ActionEntry, type ActionEntryProps } from './composites/wui-action-entry';
 export { Avatar, type AvatarProps } from './composites/wui-avatar';
+export { Balance, type BalanceProps } from './composites/wui-balance';
+export { Banner, type BannerProps } from './composites/wui-banner';
 export { Button, type ButtonProps } from './composites/wui-button';
 export {
   CardSelectLoader,
@@ -24,6 +27,10 @@ export {
   type CardSelectProps
 } from './composites/wui-card-select';
 export { Chip, type ChipProps } from './composites/wui-chip';
+export {
+  CompatibleNetwork,
+  type CompatibleNetworkProps
+} from './composites/wui-compatible-network';
 export { ConnectButton, type ConnectButtonProps } from './composites/wui-connect-button';
 export { EmailInput, type EmailInputProps } from './composites/wui-email-input';
 export { IconBox, type IconBoxProps } from './composites/wui-icon-box';
@@ -33,6 +40,8 @@ export { InputNumeric, type InputNumericProps } from './composites/wui-input-num
 export { InputText, type InputTextProps } from './composites/wui-input-text';
 export { Link, type LinkProps } from './composites/wui-link';
 export { ListItem, type ListItemProps } from './composites/wui-list-item';
+export { ListToken, type ListTokenProps } from './composites/wui-list-token';
+export { ListTransaction, type ListTransactionProps } from './composites/wui-list-transaction';
 export { ListWallet, type ListWalletProps } from './composites/wui-list-wallet';
 export { Logo, type LogoProps } from './composites/wui-logo';
 export { LogoSelect, type LogoSelectProps } from './composites/wui-logo-select';
@@ -44,6 +53,7 @@ export { SearchBar, type SearchBarProps } from './composites/wui-search-bar';
 export { Snackbar, type SnackbarProps } from './composites/wui-snackbar';
 export { Tabs, type TabsProps } from './composites/wui-tabs';
 export { Tag, type TagProps } from './composites/wui-tag';
+export { TokenButton, type TokenButtonProps } from './composites/wui-token-button';
 export { Tooltip, type TooltipProps } from './composites/wui-tooltip';
 export { WalletImage, type WalletImageProps } from './composites/wui-wallet-image';
 
@@ -66,6 +76,7 @@ export type {
   VisualType
 } from './utils/TypesUtil';
 export { UiUtil } from './utils/UiUtil';
+export { TransactionUtil } from './utils/TransactionUtil';
 export { Spacing, BorderRadius } from './utils/ThemeUtil';
 
 export { useTheme } from './hooks/useTheme';

package/src/utils/ThemeUtil.ts

@@ -155,7 +155,8 @@ export const BorderRadius = {
   's': 20,
   'm': 28,
   'l': 36,
-  '3xl': 80
+  '3xl': 80,
+  'full': 100
 };
 
 export const IconSize = {

package/src/utils/TransactionUtil.ts

@@ -0,0 +1,173 @@
+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);
+  }
+};

package/src/utils/TypesUtil.ts

@@ -91,14 +91,27 @@ export type ColorType =
   | 'error-100'
   | 'fg-100'
   | 'fg-150'
+  | 'fg-175'
   | 'fg-200'
   | 'fg-250'
   | 'fg-275'
   | 'fg-300'
+  | 'accent-glass-020'
+  | 'accent-glass-015'
+  | 'accent-glass-010'
+  | 'accent-glass-005'
   | 'gray-glass-020'
+  | 'gray-glass-010'
+  | 'gray-glass-005'
   | 'inverse-000'
   | 'inverse-100'
-  | 'success-100';
+  | 'success-100'
+  | 'teal-100'
+  | 'magenta-100'
+  | 'indigo-100'
+  | 'orange-100'
+  | 'purple-100'
+  | 'yellow-100';
 
 export type SizeType = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
 
@@ -112,6 +125,7 @@ export type IconType =
   | 'allWallets'
   | 'apple'
   | 'arrowBottom'
+  | 'arrowBottomCircle'
   | 'arrowLeft'
   | 'arrowRight'
   | 'arrowTop'
@@ -146,6 +160,7 @@ export type IconType =
   | 'networkPlaceholder'
   | 'nftPlaceholder'
   | 'off'
+  | 'paperplane'
   | 'qrCode'
   | 'refresh'
   | 'search'
@@ -193,7 +208,7 @@ export type CardSelectType = 'wallet' | 'network';
 
 export type TabOptionType = {
   icon: IconType;
-  label: string;
+  label?: string;
 };
 
 export type SpacingType =
@@ -238,3 +253,22 @@ export type TruncateOptions = {
   charsEnd: number;
   truncate: TruncateType;
 };
+
+export type TransactionType =
+  | 'approve'
+  | 'bought'
+  | 'borrow'
+  | 'burn'
+  | 'cancel'
+  | 'claim'
+  | 'deploy'
+  | 'deposit'
+  | 'execute'
+  | 'mint'
+  | 'receive'
+  | 'repay'
+  | 'send'
+  | 'stake'
+  | 'trade'
+  | 'unstake'
+  | 'withdraw';

package/src/utils/UiUtil.ts

@@ -68,5 +68,23 @@ export const UiUtil = {
 
   getWalletName(name: string, short = true) {
     return short ? name.split(' ')[0] : name;
+  },
+
+  formatNumberToLocalString(value: string | number | undefined, decimals = 2) {
+    if (value === undefined) {
+      return '0.00';
+    }
+
+    if (typeof value === 'number') {
+      return value.toLocaleString('en-US', {
+        maximumFractionDigits: decimals,
+        minimumFractionDigits: decimals
+      });
+    }
+
+    return parseFloat(value).toLocaleString('en-US', {
+      maximumFractionDigits: decimals,
+      minimumFractionDigits: decimals
+    });
   }
 };