@reown/appkit-ui-react-native 1.1.1 → 1.2.0

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

@@ -1,4 +1,4 @@
-import type { Balance } from '@reown/appkit-common-react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { Image } from '../../components/wui-image';
 import { Text } from '../../components/wui-text';
 import { Button } from '../wui-button';
@@ -6,13 +6,30 @@ import styles from './styles';
 
 export interface TokenButtonProps {
   onPress?: () => void;
-  token?: Balance;
+  imageUrl?: string;
+  text?: string;
+  inverse?: boolean;
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
 }
 
-export function TokenButton({ token, onPress }: TokenButtonProps) {
-  if (!token) {
+export function TokenButton({
+  imageUrl,
+  text,
+  inverse,
+  onPress,
+  style,
+  disabled = false
+}: TokenButtonProps) {
+  if (!text) {
     return (
-      <Button variant="accent" style={styles.selectButton} size="sm" onPress={onPress}>
+      <Button
+        variant="accent"
+        style={[styles.selectButton, style]}
+        size="sm"
+        onPress={onPress}
+        disabled={disabled}
+      >
         <Text variant="small-600" color="accent-100">
           Select token
         </Text>
@@ -20,10 +37,22 @@ export function TokenButton({ token, onPress }: TokenButtonProps) {
     );
   }
 
+  const content = [
+    imageUrl && (
+      <Image key="image" source={imageUrl} style={[styles.image, inverse && styles.imageInverse]} />
+    ),
+    <Text key="text">{text}</Text>
+  ];
+
   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
+      variant="shade"
+      style={[styles.container, style]}
+      size="sm"
+      onPress={onPress}
+      disabled={disabled}
+    >
+      {inverse ? content.reverse() : content}
     </Button>
   );
 }

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

@@ -14,5 +14,9 @@ export default StyleSheet.create({
     height: 24,
     borderRadius: BorderRadius.full,
     marginRight: Spacing['2xs']
+  },
+  imageInverse: {
+    marginRight: 0,
+    marginLeft: Spacing['2xs']
   }
 });

package/src/context/ThemeContext.tsx

@@ -0,0 +1,44 @@
+import { useColorScheme } from 'react-native';
+import { createContext, useContext, type ReactNode } from 'react';
+import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
+
+import { DarkTheme, LightTheme, getAccentColors } from '../utils/ThemeUtil';
+
+type ThemeContextType = {
+  themeMode?: ThemeMode;
+  themeVariables?: ThemeVariables;
+};
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  themeMode?: ThemeMode;
+  themeVariables?: ThemeVariables;
+}
+
+export function ThemeProvider({ children, themeMode, themeVariables }: ThemeProviderProps) {
+  return (
+    <ThemeContext.Provider value={{ themeMode, themeVariables }}>{children}</ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  const scheme = useColorScheme();
+
+  // If the theme mode is not set, use the system color scheme
+  const themeMode = context?.themeMode ?? scheme;
+  const themeVariables = context?.themeVariables ?? {};
+
+  let Theme = themeMode === 'dark' ? DarkTheme : LightTheme;
+
+  if (themeVariables.accent) {
+    Theme = {
+      ...Theme,
+      ...getAccentColors(themeVariables.accent)
+    };
+  }
+
+  return Theme;
+}

package/src/hooks/useTheme.ts

@@ -1,9 +1,5 @@
-import { useColorScheme } from 'react-native';
-import { DarkTheme, LightTheme } from '../utils/ThemeUtil';
+import { useTheme as useThemeContext } from '../context/ThemeContext';
 
-export function useTheme() {
-  const scheme = useColorScheme();
-  const Theme = scheme === 'dark' ? DarkTheme : LightTheme;
-
-  return Theme;
-}
+export const useTheme = () => {
+  return useThemeContext();
+};

package/src/index.ts

@@ -42,7 +42,7 @@ export { Link, type LinkProps } from './composites/wui-link';
 export { ListItem, type ListItemProps } from './composites/wui-list-item';
 export { ListItemLoader, type ListItemLoaderProps } from './composites/wui-list-item-loader';
 export { ListSocial, type ListSocialProps } from './composites/wui-list-social';
-export { ListToken, type ListTokenProps } from './composites/wui-list-token';
+export { ListToken, ListTokenTotalHeight, 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';
@@ -50,12 +50,14 @@ export { LogoSelect, type LogoSelectProps } from './composites/wui-logo-select';
 export { NetworkButton, type NetworkButtonProps } from './composites/wui-network-button';
 export { NetworkImage, type NetworkImageProps } from './composites/wui-network-image';
 export { Otp, type OtpProps } from './composites/wui-otp';
+export { Pressable, type PressableProps } from './components/wui-pressable';
 export { Promo, type PromoProps } from './composites/wui-promo';
 export { QrCode, type QrCodeProps } from './composites/wui-qr-code';
 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 { Toggle, type ToggleProps } from './composites/wui-toggle';
 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';
@@ -83,4 +85,5 @@ export { TransactionUtil } from './utils/TransactionUtil';
 export { Spacing, BorderRadius } from './utils/ThemeUtil';
 
 export { useTheme } from './hooks/useTheme';
+export { ThemeProvider } from './context/ThemeContext';
 export { useAnimatedValue } from './hooks/useAnimatedValue';

package/src/layout/wui-flex/index.tsx

@@ -1,4 +1,4 @@
-import { type StyleProp, type ViewStyle, View } from 'react-native';
+import { type LayoutChangeEvent, type StyleProp, type ViewStyle, View } from 'react-native';
 
 import type {
   FlexAlignType,
@@ -13,6 +13,7 @@ import { UiUtil } from '../../utils/UiUtil';
 
 export interface FlexViewProps {
   children?: React.ReactNode;
+  onLayout?: (event: LayoutChangeEvent) => void;
   flexDirection?: FlexDirectionType;
   flexWrap?: FlexWrapType;
   flexGrow?: FlexGrowType;
@@ -44,5 +45,9 @@ export function FlexView(props: FlexViewProps) {
     marginLeft: props.margin && UiUtil.getSpacingStyles(props.margin, 3)
   };
 
-  return <View style={[styles, props.style]}>{props.children}</View>;
+  return (
+    <View onLayout={props.onLayout} style={[styles, props.style]}>
+      {props.children}
+    </View>
+  );
 }

package/src/utils/ThemeUtil.ts

@@ -1,5 +1,23 @@
+import { transparentize, darken, lighten } from 'polished';
+
 import type { SpacingType, ThemeKeys } from './TypesUtil';
 
+export const getAccentColors = (baseAccentColor: string) => {
+  return {
+    'accent-100': baseAccentColor,
+    'accent-090': lighten(0.05, baseAccentColor),
+    'accent-080': lighten(0.1, baseAccentColor),
+    'accent-020': darken(0.1, baseAccentColor),
+    'accent-glass-090': transparentize(0.1, baseAccentColor),
+    'accent-glass-080': transparentize(0.2, baseAccentColor),
+    'accent-glass-020': transparentize(0.8, baseAccentColor),
+    'accent-glass-015': transparentize(0.85, baseAccentColor),
+    'accent-glass-010': transparentize(0.9, baseAccentColor),
+    'accent-glass-005': transparentize(0.95, baseAccentColor),
+    'accent-glass-002': transparentize(0.98, baseAccentColor)
+  };
+};
+
 export const DarkTheme: { [key in ThemeKeys]: string } = {
   'accent-100': '#667DFF',
   'accent-090': '#7388FD',

package/src/utils/TransactionUtil.ts

@@ -2,7 +2,8 @@ import { DateUtil } from '@reown/appkit-common-react-native';
 import type {
   TransactionTransfer,
   Transaction,
-  TransactionImage
+  TransactionImage,
+  TransactionMetadata
 } from '@reown/appkit-common-react-native';
 import type { TransactionType } from './TypesUtil';
 import { UiUtil } from './UiUtil';
@@ -24,20 +25,22 @@ export const TransactionUtil = {
   },
 
   getTransactionImages(transfers: TransactionTransfer[]): TransactionImage[] {
-    const [transfer, secondTransfer] = transfers;
-    const isAllNFT = Boolean(transfer) && transfers?.every(item => Boolean(item.nft_info));
+    const isAllNFT = Boolean(transfers[0]) && 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)];
+      const first = transfers.find(t => t?.direction === 'out');
+      const second = transfers.find(t => t?.direction === 'in');
+
+      return [this.getTransactionImage(first), this.getTransactionImage(second)];
     }
 
     if (haveMultipleTransfers) {
       return transfers.map(item => this.getTransactionImage(item));
     }
 
-    return [this.getTransactionImage(transfer)];
+    return [this.getTransactionImage(transfers[0])];
   },
 
   getTransactionImage(transfer?: TransactionTransfer): TransactionImage {
@@ -72,66 +75,83 @@ export const TransactionUtil = {
   },
 
   getTransactionDescriptions(transaction: Transaction) {
-    const type = transaction?.metadata?.operationType as TransactionType;
+    if (!transaction.metadata) {
+      return ['Unknown 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];
+
+    // Early return for trade transactions
+    if (type === 'trade') {
+      return this.getTradeDescriptions(transfers);
     }
 
-    if (haveMultipleTransfers) {
-      return transfers.map(item => this.getTransferDescription(item));
+    // Handle multiple transfers
+    if (transfers.length > 1) {
+      return transfers.map(transfer => this.getTransferDescription(transfer));
     }
 
-    let prefix = '';
-    if (plusTypes.includes(type)) {
-      prefix = '+';
-    } else if (minusTypes.includes(type)) {
-      prefix = '-';
+    // Handle single transfer
+    if (transfers.length === 1) {
+      return [this.formatSingleTransfer(transfers[0]!, type, transaction.metadata)];
     }
 
-    firstDescription = prefix.concat(firstDescription);
+    return [transaction.metadata.status];
+  },
+
+  isSendReceiveTransaction(type: TransactionType): boolean {
+    return type === 'send' || type === 'receive';
+  },
+
+  hasFungibleTransfers(transfers: TransactionTransfer[]): boolean {
+    return transfers.every(transfer => Boolean(transfer?.fungible_info));
+  },
+
+  getSendReceiveDescriptions(metadata: TransactionMetadata): string[] {
+    return [this.truncateAddress(metadata.sentFrom), this.truncateAddress(metadata.sentTo)];
+  },
+
+  truncateAddress(address: string): string {
+    return UiUtil.getTruncateString({
+      string: address,
+      charsStart: 4,
+      charsEnd: 6,
+      truncate: 'middle'
+    });
+  },
 
-    if (isSendOrReceive) {
+  formatSingleTransfer(
+    transfer: TransactionTransfer,
+    type: TransactionType,
+    metadata: TransactionMetadata
+  ): string {
+    const prefix = this.getPrefix(type);
+    let description = prefix.concat(this.getTransferDescription(transfer));
+
+    if (this.isSendReceiveTransaction(type)) {
       const isSend = type === 'send';
-      const address = UiUtil.getTruncateString({
-        string: isSend ? transaction.metadata.sentTo : transaction.metadata.sentFrom,
-        charsStart: 4,
-        charsEnd: 4,
-        truncate: 'middle'
-      });
+
+      const address = this.truncateAddress(isSend ? metadata.sentTo : metadata.sentFrom);
       const arrow = isSend ? '→' : '←';
-      firstDescription = firstDescription.concat(` ${arrow} ${address}`);
+      description = description.concat(` ${arrow} ${address}`);
     }
 
-    return [firstDescription];
+    return description;
+  },
+
+  getPrefix(type: TransactionType): string {
+    if (plusTypes.includes(type)) return '+';
+    if (minusTypes.includes(type)) return '-';
+
+    return '';
+  },
+
+  getTradeDescriptions(transfers: TransactionTransfer[]): string[] {
+    const outTransfer = transfers.find(transfer => transfer?.direction === 'out');
+    const inTransfer = transfers.find(transfer => transfer?.direction === 'in');
+
+    return [this.getTransferDescription(outTransfer), this.getTransferDescription(inTransfer)];
   },
 
   getTransferDescription(transfer?: TransactionTransfer) {

package/src/utils/TypesUtil.ts

@@ -112,6 +112,7 @@ export type ColorType =
   | 'gray-glass-020'
   | 'gray-glass-010'
   | 'gray-glass-005'
+  | 'gray-glass-002'
   | 'inverse-000'
   | 'inverse-100'
   | 'success-100'
@@ -174,6 +175,7 @@ export type IconType =
   | 'off'
   | 'paperplane'
   | 'qrCode'
+  | 'recycleHorizontal'
   | 'refresh'
   | 'search'
   | 'swapHorizontal'