@reown/appkit-ui-react-native 0.0.0-fix-token-balance-20241017200828 → 0.0.0-fix-fetch-error-improvements-20241114122508

package/src/components/wui-icon/index.tsx

@@ -30,6 +30,8 @@ import EtherscanSvg from '../../assets/svg/Etherscan';
 import ExtensionSvg from '../../assets/svg/Extension';
 import ExternalLinkSvg from '../../assets/svg/ExternalLink';
 import FacebookSvg from '../../assets/svg/Facebook';
+import FarcasterSvg from '../../assets/svg/Farcaster';
+import FarcasterSquareSvg from '../../assets/svg/FarcasterSquare';
 import FiltersSvg from '../../assets/svg/Filters';
 import GithubSvg from '../../assets/svg/Github';
 import GoogleSvg from '../../assets/svg/Google';
@@ -37,6 +39,7 @@ import HelpCircleSvg from '../../assets/svg/HelpCircle';
 import InfoCircleSvg from '../../assets/svg/InfoCircle';
 import MailSvg from '../../assets/svg/Mail';
 import MobileSvg from '../../assets/svg/Mobile';
+import MoreSvg from '../../assets/svg/More';
 import NetworkPlaceholderSvg from '../../assets/svg/NetworkPlaceholder';
 import NftPlaceholderSvg from '../../assets/svg/NftPlaceholder';
 import OffSvg from '../../assets/svg/Off';
@@ -47,15 +50,14 @@ import SearchSvg from '../../assets/svg/Search';
 import SwapHorizontalSvg from '../../assets/svg/SwapHorizontal';
 import SwapVerticalSvg from '../../assets/svg/SwapVertical';
 import TelegramSvg from '../../assets/svg/Telegram';
-import TwitterSvg from '../../assets/svg/Twitter';
+import TwitchSvg from '../../assets/svg/Twitch';
 import VerifySvg from '../../assets/svg/Verify';
-import WalletConnectSvg from '../../assets/svg/WalletConnect';
+import WalletConnectSvg, { WalletConnectLightBrownSvg } from '../../assets/svg/WalletConnect';
 import WalletSvg from '../../assets/svg/Wallet';
 import WalletSmallSvg from '../../assets/svg/WalletSmall';
 import WarningCircleSvg from '../../assets/svg/WarningCircle';
-import TwitchSvg from '../../assets/svg/Twitch';
-import TwitterIconSvg from '../../assets/svg/TwitterIcon';
 import WalletPlaceholderSvg from '../../assets/svg/WalletPlaceholder';
+import XSvg from '../../assets/svg/X';
 import { useTheme } from '../../hooks/useTheme';
 import { IconSize } from '../../utils/ThemeUtil';
 
@@ -88,6 +90,8 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   extension: ExtensionSvg,
   externalLink: ExternalLinkSvg,
   facebook: FacebookSvg,
+  farcaster: FarcasterSvg,
+  farcasterSquare: FarcasterSquareSvg,
   filters: FiltersSvg,
   github: GithubSvg,
   google: GoogleSvg,
@@ -95,6 +99,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   infoCircle: InfoCircleSvg,
   mail: MailSvg,
   mobile: MobileSvg,
+  more: MoreSvg,
   networkPlaceholder: NetworkPlaceholderSvg,
   nftPlaceholder: NftPlaceholderSvg,
   off: OffSvg,
@@ -106,19 +111,19 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   swapVertical: SwapVerticalSvg,
   telegram: TelegramSvg,
   twitch: TwitchSvg,
-  twitter: TwitterSvg,
-  twitterIcon: TwitterIconSvg,
   verify: VerifySvg,
   wallet: WalletSvg,
   walletSmall: WalletSmallSvg,
   warningCircle: WarningCircleSvg,
   walletConnect: WalletConnectSvg,
-  walletPlaceholder: WalletPlaceholderSvg
+  walletConnectLightBrown: WalletConnectLightBrownSvg,
+  walletPlaceholder: WalletPlaceholderSvg,
+  x: XSvg
 };
 
 export type IconProps = SvgProps & {
   name: IconType;
-  size?: Exclude<SizeType, 'xl'>;
+  size?: SizeType;
   color?: ColorType;
   style?: SvgProps['style'];
 };

package/src/components/wui-lean-text/index.tsx

@@ -0,0 +1,10 @@
+import { type ComponentType, createElement, forwardRef } from 'react';
+import type { TextProps } from 'react-native';
+
+const LeanText = forwardRef((props, ref) => {
+  return createElement('RCTText', { ...props, ref });
+}) as ComponentType<TextProps>;
+
+LeanText.displayName = 'RCTText';
+
+export { LeanText };

package/src/components/wui-lean-view/index.tsx

@@ -0,0 +1,10 @@
+import { type ComponentType, createElement, forwardRef } from 'react';
+import type { ViewProps } from 'react-native';
+
+const LeanView = forwardRef((props, ref) => {
+  return createElement('RCTView', { ...props, ref });
+}) as ComponentType<ViewProps>;
+
+LeanView.displayName = 'RCTView';
+
+export { LeanView };

package/src/components/wui-text/index.tsx

@@ -1,5 +1,6 @@
-import { Text as NativeText, type TextProps as NativeProps } from 'react-native';
+import { type TextProps as NativeProps } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
+import { LeanText } from '../wui-lean-text';
 import type { ColorType, TextType } from '../../utils/TypesUtil';
 import styles from './styles';
 
@@ -20,7 +21,7 @@ export function Text({
   const Theme = useTheme();
 
   return (
-    <NativeText
+    <LeanText
       style={[
         styles.base,
         styles[variant],
@@ -31,6 +32,6 @@ export function Text({
       {...rest}
     >
       {children}
-    </NativeText>
+    </LeanText>
   );
 }

package/src/components/wui-visual/index.tsx

@@ -14,6 +14,9 @@ import NounSvg from '../../assets/visual/Noun';
 import ProfileSvg from '../../assets/visual/Profile';
 import SystemSvg from '../../assets/visual/System';
 import type { VisualType } from '../../utils/TypesUtil';
+import GoogleSvg from '../../assets/visual/Google';
+import LightbulbSvg from '../../assets/visual/Lightbulb';
+import PencilSvg from '../../assets/visual/Pencil';
 
 const svgOptions: Record<VisualType, (props: SvgProps) => JSX.Element> = {
   browser: BrowserSvg,
@@ -21,12 +24,15 @@ const svgOptions: Record<VisualType, (props: SvgProps) => JSX.Element> = {
   defi: DefiSvg,
   defiAlt: DefiAltSvg,
   eth: EthSvg,
+  google: GoogleSvg,
   layers: LayersSvg,
+  lightbulb: LightbulbSvg,
   lock: LockSvg,
   login: LoginSvg,
   network: NetworkSvg,
   nft: NftSvg,
   noun: NounSvg,
+  pencil: PencilSvg,
   profile: ProfileSvg,
   system: SystemSvg
 };

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

@@ -6,7 +6,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     height: 40,
     borderRadius: BorderRadius.full,
-    borderWidth: 1,
+    borderWidth: StyleSheet.hairlineWidth,
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: Spacing['3xs']
@@ -36,7 +36,7 @@ export default StyleSheet.create({
     paddingLeft: Spacing['3xs'],
     paddingRight: Spacing.xs,
     borderRadius: BorderRadius.full,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   address: {
     marginLeft: Spacing['3xs']

package/src/composites/wui-account-pill/index.tsx

@@ -1,15 +1,14 @@
 import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
 import { Avatar } from '../wui-avatar';
 import { UiUtil } from '../../utils/UiUtil';
-import { IconLink } from '../wui-icon-link';
 import { Text } from '../../components/wui-text';
 import useAnimatedValue from '../../hooks/useAnimatedValue';
 import { useTheme } from '../../hooks/useTheme';
 import styles from './styles';
+import { Icon } from '../../components/wui-icon';
 
 export interface AccountPillProps {
   onPress: () => void;
-  onCopy: (address: string) => void;
   address?: string;
   profileName?: string;
   profileImage?: string;
@@ -20,7 +19,6 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 export function AccountPill({
   onPress,
-  onCopy,
   address,
   profileName,
   profileImage,
@@ -36,12 +34,6 @@ export function AccountPill({
   const backgroundColor = animatedValue;
   const borderColor = Theme['gray-glass-005'];
 
-  const handleCopyAddress = () => {
-    if (address) {
-      onCopy(address);
-    }
-  };
-
   return (
     <AnimatedPressable
       style={[styles.container, { backgroundColor, borderColor }, style]}
@@ -66,7 +58,7 @@ export function AccountPill({
               truncate: 'middle'
             })}
       </Text>
-      <IconLink icon="copy" size="sm" iconColor="fg-200" onPress={handleCopyAddress} />
+      <Icon name="chevronBottom" size="sm" color="fg-200" style={styles.copyButton} />
     </AnimatedPressable>
   );
 }

package/src/composites/wui-account-pill/styles.ts

@@ -11,9 +11,13 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: BorderRadius.full,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   text: {
     marginLeft: Spacing['2xs']
+  },
+  copyButton: {
+    marginLeft: Spacing.xs,
+    marginRight: Spacing.s
   }
 });

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

@@ -62,7 +62,7 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: BorderRadius.xs,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   smButton: {
     height: 32,

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

@@ -12,7 +12,8 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export interface ChipProps {
   label?: string;
   imageSrc?: string;
-  icon?: IconType;
+  leftIcon?: IconType;
+  rightIcon?: IconType;
   variant?: ChipType;
   size?: Exclude<SizeType, 'xl' | 'lg' | 'xs' | 'xxs'>;
   disabled?: boolean;
@@ -23,7 +24,8 @@ export interface ChipProps {
 export function Chip({
   onPress,
   imageSrc,
-  icon,
+  leftIcon,
+  rightIcon,
   variant = 'fill',
   size = 'md',
   disabled,
@@ -89,15 +91,16 @@ export function Chip({
           source={imageSrc}
         />
       )}
+      {leftIcon && <Icon name={leftIcon} color={themedTextColor as ColorType} />}
       <Text
         variant={size === 'md' ? 'paragraph-600' : 'small-600'}
         style={[styles.link, { color: Theme[themedTextColor] }]}
       >
         {label}
       </Text>
-      {icon && (
+      {rightIcon && (
         <Icon
-          name={icon}
+          name={rightIcon}
           size={iconSize}
           color={themedTextColor as ColorType}
           style={styles.icon}

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

@@ -65,11 +65,11 @@ export default StyleSheet.create({
     paddingHorizontal: Spacing.xs,
     alignItems: 'center',
     borderRadius: BorderRadius.s,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   image: {
     borderRadius: BorderRadius.full,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   smImage: {
     width: 16,

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

@@ -13,9 +13,6 @@ export interface CompatibleNetworkProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const offset = [20, 15, 10, 5, 0];
-const zIndex = [5, 4, 3, 2, 1];
-
 export function CompatibleNetwork({
   text,
   onPress,
@@ -44,7 +41,7 @@ export function CompatibleNetwork({
             imageHeaders={imageHeaders}
             borderColor={Theme['bg-200']}
             borderWidth={2}
-            style={{ left: offset[index], zIndex: zIndex[index] }}
+            style={[styles.item, { zIndex: networkImages.length - index }]}
           />
         ))}
       </FlexView>
@@ -60,5 +57,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingRight: 0
+  },
+  item: {
+    marginLeft: -5
   }
 });

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

@@ -51,7 +51,7 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: BorderRadius.s,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   smButton: {
     height: 32

package/src/composites/wui-icon-box/index.tsx

@@ -7,7 +7,7 @@ import styles from './styles';
 
 export interface IconBoxProps {
   icon: IconType;
-  size?: Exclude<SizeType, 'xl' | 'xs' | 'xxs'>;
+  size?: Exclude<SizeType, 'xs' | 'xxs'>;
   iconColor?: ColorType;
   iconSize?: Exclude<SizeType, 'xl'>;
   background?: boolean;
@@ -33,6 +33,9 @@ export function IconBox({
   const Theme = useTheme();
   let _iconSize: SizeType;
   switch (size) {
+    case 'xl':
+      _iconSize = 'xl';
+      break;
     case 'lg':
       _iconSize = 'lg';
       break;
@@ -48,6 +51,9 @@ export function IconBox({
 
   let boxSize: number;
   switch (size) {
+    case 'xl':
+      boxSize = 56;
+      break;
     case 'lg':
       boxSize = 40;
       break;
@@ -58,7 +64,17 @@ export function IconBox({
       boxSize = 24;
   }
 
-  const borderRadius = size === 'lg' ? 'xxs' : '3xl';
+  let borderRadius: keyof typeof BorderRadius;
+  switch (size) {
+    case 'xl':
+      borderRadius = 's';
+      break;
+    case 'lg':
+      borderRadius = 'xxs';
+      break;
+    default:
+      borderRadius = '3xl';
+  }
 
   const backgroundStyle = {
     backgroundColor:

package/src/composites/wui-input-text/styles.ts

@@ -7,7 +7,7 @@ const baseStyle = {
   borderRadius: BorderRadius.xxs,
   alignItems: 'center',
   paddingHorizontal: Spacing.xs,
-  borderWidth: 1
+  borderWidth: StyleSheet.hairlineWidth
 } as ViewStyle;
 
 export const outerBorderRadius = {

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

@@ -0,0 +1,65 @@
+import { View, Pressable, Animated, type StyleProp, type ViewStyle } from 'react-native';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { LogoType } from '../../utils/TypesUtil';
+
+import styles from './styles';
+import { Logo } from '../wui-logo';
+import type { ReactNode } from 'react';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface ListSocialProps {
+  children?: ReactNode;
+  disabled?: boolean;
+  logo: LogoType;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  logoWidth?: number;
+  logoHeight?: number;
+}
+
+export function ListSocial({
+  logo,
+  children,
+  disabled,
+  onPress,
+  style,
+  testID,
+  logoHeight = 40,
+  logoWidth = 40
+}: ListSocialProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-002'],
+    Theme['gray-glass-010']
+  );
+
+  return (
+    <AnimatedPressable
+      disabled={disabled}
+      style={[styles.container, { backgroundColor: animatedValue }, style]}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      testID={testID}
+    >
+      <View
+        style={[
+          styles.border,
+          { height: logoHeight + 1, width: logoWidth + 1, borderColor: Theme['gray-glass-005'] }
+        ]}
+      >
+        <Logo
+          logo={logo}
+          style={disabled && styles.disabledLogo}
+          width={logoWidth}
+          height={logoHeight}
+        />
+      </View>
+      {children}
+      <View style={styles.rightPlaceholder} />
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 56,
+    width: '100%',
+    padding: Spacing.s,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: BorderRadius.s
+  },
+  rightPlaceholder: {
+    width: 40,
+    height: 40,
+    borderRadius: 100
+  },
+  disabledLogo: {
+    opacity: 0.4
+  },
+  border: {
+    borderRadius: BorderRadius.full,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

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

@@ -1,4 +1,4 @@
-import { Animated, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
 import { Text } from '../../components/wui-text';
 import useAnimatedValue from '../../hooks/useAnimatedValue';
 import { useTheme } from '../../hooks/useTheme';
@@ -6,9 +6,10 @@ import type { IconType, TagType } from '../../utils/TypesUtil';
 import { Tag } from '../wui-tag';
 import { WalletImage } from '../wui-wallet-image';
 import { Icon } from '../../components/wui-icon';
+import { LeanView } from '../../components/wui-lean-view';
+import { IconBox } from '../wui-icon-box';
 
 import styles from './styles';
-import { IconBox } from '../wui-icon-box';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
@@ -67,7 +68,7 @@ export function ListWallet({
 
   function imageTemplate() {
     return (
-      <View>
+      <LeanView>
         <WalletImage
           style={[styles.image, disabled && styles.imageDisabled]}
           imageSrc={imageSrc}
@@ -76,7 +77,7 @@ export function ListWallet({
           size="sm"
         />
         {templateInstalled()}
-      </View>
+      </LeanView>
     );
   }
 
@@ -116,12 +117,12 @@ export function ListWallet({
       onPressOut={setStartValue}
       testID={testID}
     >
-      <View style={styles.leftSide}>
+      <LeanView style={styles.leftSide}>
         {imageTemplate()}
         <Text variant="paragraph-500" style={styles.name} color={disabled ? 'fg-300' : 'fg-100'}>
           {name}
         </Text>
-      </View>
+      </LeanView>
       {iconTemplate()}
     </AnimatedPressable>
   );

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

@@ -6,9 +6,11 @@ import type { LogoType } from '../../utils/TypesUtil';
 export interface LogoProps {
   logo: LogoType;
   disabled?: boolean;
+  height?: number;
+  width?: number;
   style?: SvgProps['style'];
 }
 
-export function Logo({ logo, style }: LogoProps) {
-  return <Icon width={40} height={40} name={logo} style={style} />;
+export function Logo({ width = 40, height = 40, logo, style }: LogoProps) {
+  return <Icon width={width} height={height} name={logo} style={style} />;
 }

package/src/composites/wui-logo-select/index.tsx

@@ -1,4 +1,4 @@
-import { Animated, Pressable } from 'react-native';
+import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
 import useAnimatedValue from '../../hooks/useAnimatedValue';
 import { useTheme } from '../../hooks/useTheme';
 import type { LogoType } from '../../utils/TypesUtil';
@@ -10,20 +10,23 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export interface LogoSelectProps {
   logo: LogoType;
   disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
 }
 
-export function LogoSelect({ logo, disabled }: LogoSelectProps) {
+export function LogoSelect({ logo, disabled, style, onPress }: LogoSelectProps) {
   const Theme = useTheme();
   const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
-    Theme['gray-glass-005'],
+    Theme['gray-glass-002'],
     Theme['gray-glass-010']
   );
 
   return (
     <AnimatedPressable
+      onPress={onPress}
       onPressIn={setEndValue}
       onPressOut={setStartValue}
-      style={[styles.box, { backgroundColor: animatedValue }]}
+      style={[styles.box, { backgroundColor: animatedValue }, style]}
       disabled={disabled}
     >
       <Logo logo={logo} style={disabled && styles.disabled} />

package/src/composites/wui-logo-select/styles.ts

@@ -3,9 +3,9 @@ import { BorderRadius } from '../../utils/ThemeUtil';
 
 export default StyleSheet.create({
   box: {
-    height: 50,
-    width: 50,
-    borderRadius: BorderRadius.xs,
+    height: 56,
+    width: 56,
+    borderRadius: BorderRadius.s,
     alignItems: 'center',
     justifyContent: 'center'
   },

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

@@ -7,7 +7,7 @@ export default StyleSheet.create({
     height: 40,
     alignItems: 'center',
     justifyContent: 'center',
-    borderWidth: 1,
+    borderWidth: StyleSheet.hairlineWidth,
     borderRadius: BorderRadius.full,
     paddingHorizontal: Spacing['2xs']
   },

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

@@ -3,8 +3,7 @@ import {
   type NativeSyntheticEvent,
   TextInput,
   type TextInputKeyPressEventData,
-  View,
-  Platform
+  View
 } from 'react-native';
 import { InputNumeric, type InputNumericProps } from '../wui-input-numeric';
 import styles from './styles';
@@ -90,8 +89,7 @@ export function Otp({ length, style, onChangeText, autoFocus }: OtpProps) {
           inputRef={refArray[index]}
           onChangeText={text => _onChangeText(text, index)}
           onKeyPress={(e: any) => onKeyPress(e, index)}
-          textContentType="oneTimeCode"
-          autoComplete={Platform.OS === 'android' ? 'sms-otp' : 'one-time-code'}
+          autoComplete="off"
         />
       ))}
     </View>

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

@@ -0,0 +1,42 @@
+import { Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import { FlexView } from '../../layout/wui-flex';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export interface PromoProps {
+  text: string;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+}
+
+export function Promo({ text, style, onPress }: PromoProps) {
+  const Theme = useTheme();
+
+  return (
+    <Pressable style={style} onPress={onPress}>
+      <FlexView
+        alignItems="center"
+        justifyContent="center"
+        flexDirection="row"
+        padding={['xs', 'xs', 'xs', 'm']}
+        style={[styles.container, { backgroundColor: Theme['gray-glass-090'] }]}
+      >
+        <Text variant="small-600" color="bg-100">
+          {text}
+        </Text>
+        <Icon style={styles.icon} name="arrowRight" color="bg-100" size="xs" />
+      </FlexView>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: BorderRadius.full
+  },
+  icon: {
+    marginLeft: Spacing['2xs']
+  }
+});