@reown/appkit-ui-react-native 0.0.0-canary-20240912195440 → 0.0.0-develop-20240925193922

package/src/composites/wui-network-image/styles.ts

@@ -3,3 +3,9 @@ export const PathLg =
 
 export const PathNormal =
   'M24.0002 2.34328C26.4754 0.914219 29.525 0.914219 32.0002 2.34328L48.2489 11.7245C50.7241 13.1535 52.2489 15.7946 52.2489 18.6527V37.4151C52.2489 40.2732 50.7241 42.9142 48.2489 44.3433L32.0002 53.7245C29.525 55.1535 26.4754 55.1535 24.0002 53.7245L7.75146 44.3433C5.27625 42.9142 3.75146 40.2732 3.75146 37.4151V18.6527C3.75146 15.7946 5.27626 13.1535 7.75146 11.7245L24.0002 2.34328Z';
+
+export const PathSmall =
+  'M17.1428 1.67377C18.9108 0.653013 21.0891 0.653014 22.8571 1.67377L34.4633 8.37463C36.2313 9.39539 37.3205 11.2818 37.3205 13.3233V26.7251C37.3205 28.7666 36.2313 30.653 34.4633 31.6738L22.8571 38.3746C21.0891 39.3954 18.9108 39.3954 17.1428 38.3746L5.53659 31.6738C3.76858 30.653 2.67944 28.7666 2.67944 26.7251V13.3233C2.67944 11.2818 3.76858 9.39539 5.53659 8.37463L17.1428 1.67377Z';
+
+export const PathXS =
+  'M8.57153 0.836886C9.45553 0.326507 10.5447 0.326507 11.4287 0.836886L17.2318 4.18731C18.1158 4.69769 18.6604 5.64091 18.6604 6.66167V13.3625C18.6604 14.3833 18.1158 15.3265 17.2318 15.8369L11.4287 19.1873C10.5447 19.6977 9.45553 19.6977 8.57153 19.1873L2.76841 15.8369C1.88441 15.3265 1.33984 14.3833 1.33984 13.3625V6.66167C1.33984 5.64091 1.88441 4.69769 2.76841 4.18731L8.57153 0.836886Z';

package/src/composites/wui-qr-code/index.tsx

@@ -1,9 +1,11 @@
 import { useMemo } from 'react';
-import { View } from 'react-native';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg from 'react-native-svg';
 import { Icon } from '../../components/wui-icon';
 import { Image } from '../../components/wui-image';
 import { Shimmer } from '../../components/wui-shimmer';
+import { Text } from '../../components/wui-text';
+import { FlexView } from '../../layout/wui-flex';
 import { QRCodeUtil } from '../../utils/QRCodeUtil';
 import { BorderRadius, LightTheme, Spacing } from '../../utils/ThemeUtil';
 import styles from './styles';
@@ -13,22 +15,26 @@ export interface QrCodeProps {
   uri?: string;
   imageSrc?: string;
   testID?: string;
+  arenaClear?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
-export function QrCode({ size, uri, imageSrc, testID }: QrCodeProps) {
+export function QrCode({ size, uri, imageSrc, testID, arenaClear, style }: QrCodeProps) {
   const Theme = LightTheme;
   const containerPadding = Spacing.l;
   const qrSize = size - containerPadding * 2;
+  const logoSize = arenaClear ? 0 : qrSize / 4;
+
   const dots = useMemo(
-    () => (uri ? QRCodeUtil.generate(uri, qrSize, qrSize / 4) : []),
-    [uri, qrSize]
+    () => (uri ? QRCodeUtil.generate(uri, qrSize, logoSize) : []),
+    [uri, qrSize, logoSize]
   );
 
-  const shimmerTemplate = () => {
-    return <Shimmer width={size} height={size} borderRadius={BorderRadius.l} />;
-  };
-
   const logoTemplate = () => {
+    if (arenaClear) {
+      return null;
+    }
+
     if (imageSrc) {
       return (
         <Image
@@ -56,16 +62,25 @@ export function QrCode({ size, uri, imageSrc, testID }: QrCodeProps) {
     <View
       style={[
         styles.container,
-        { height: size, width: size, backgroundColor: Theme['bg-100'], padding: containerPadding }
+        { width: size, backgroundColor: Theme['bg-100'], padding: containerPadding },
+        style
       ]}
       testID={testID}
     >
-      <Svg height={qrSize} width={qrSize}>
-        {dots}
-      </Svg>
-      {logoTemplate()}
+      <FlexView alignItems="center" justifyContent="center">
+        <Svg height={qrSize} width={qrSize}>
+          {dots}
+        </Svg>
+        {logoTemplate()}
+      </FlexView>
+      <Text variant="small-500" color="fg-150" style={styles.label}>
+        UX by{' '}
+        <Text variant="small-500" color="inverse-000">
+          Reown
+        </Text>
+      </Text>
     </View>
   ) : (
-    shimmerTemplate()
+    <Shimmer width={size} height={size} borderRadius={BorderRadius.l} />
   );
 }

package/src/composites/wui-qr-code/styles.ts

@@ -11,5 +11,8 @@ export default StyleSheet.create({
   },
   icon: {
     position: 'absolute'
+  },
+  label: {
+    marginTop: Spacing.s
   }
 });

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

@@ -17,6 +17,7 @@ export function Snackbar({ message, iconColor, icon, style }: SnackbarProps) {
 
   return (
     <Animated.View
+      pointerEvents="none"
       style={[
         styles.container,
         { backgroundColor: Theme['bg-175'], borderColor: Theme['gray-glass-005'] },

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