@reown/appkit-ui-react-native 0.0.0-develop-20250221191324 → 0.0.0-develop-20250724123349

package/src/assets/svg/Verify.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgVerify = ({ fill, ...props }: SvgProps) => (
   <Svg fill="none" viewBox="0 0 28 28" {...props}>
     <Path
-      fill={fill || '#fff'}
+      fill={fill ?? '#fff'}
       fillRule="evenodd"
       d="M18.1 4.76c-.42-.73-1.33-1.01-2.09-.66l-1.42.66c-.37.18-.8.18-1.18 0l-1.4-.65a1.63 1.63 0 0 0-2.1.66l-.84 1.45c-.2.34-.53.59-.92.67l-1.7.35c-.83.17-1.39.94-1.3 1.78l.19 1.56c.04.39-.08.78-.33 1.07l-1.12 1.3c-.52.6-.52 1.5 0 2.11L5 16.38c.25.3.37.68.33 1.06l-.18 1.57c-.1.83.46 1.6 1.28 1.78l1.7.35c.4.08.73.32.93.66l.84 1.43a1.63 1.63 0 0 0 2.09.66l1.41-.66c.37-.17.8-.17 1.18 0l1.43.67c.76.35 1.66.07 2.08-.65l.86-1.45c.2-.34.54-.58.92-.66l1.68-.35A1.63 1.63 0 0 0 22.84 19l-.18-1.57a1.4 1.4 0 0 1 .33-1.06l1.12-1.32c.52-.6.52-1.5 0-2.11l-1.12-1.3a1.4 1.4 0 0 1-.33-1.07l.18-1.57c.1-.83-.46-1.6-1.28-1.77l-1.68-.35a1.4 1.4 0 0 1-.92-.66l-.86-1.47Zm-3.27-3.2a4.43 4.43 0 0 1 5.69 1.78l.54.93 1.07.22a4.43 4.43 0 0 1 3.5 4.84l-.11.96.7.83a4.43 4.43 0 0 1 .02 5.76l-.72.85.1.96a4.43 4.43 0 0 1-3.5 4.84l-1.06.22-.54.92a4.43 4.43 0 0 1-5.68 1.77l-.84-.4-.82.39a4.43 4.43 0 0 1-5.7-1.79l-.51-.89-1.09-.22a4.43 4.43 0 0 1-3.5-4.84l.1-.96-.72-.85a4.43 4.43 0 0 1 .01-5.76l.71-.83-.1-.95a4.43 4.43 0 0 1 3.5-4.84l1.08-.23.53-.9a4.43 4.43 0 0 1 5.7-1.8l.81.38.83-.39ZM18.2 9.4c.65.42.84 1.28.42 1.93l-4.4 6.87a1.4 1.4 0 0 1-2.26.14L9.5 15.39a1.4 1.4 0 0 1 2.15-1.8l1.23 1.48 3.38-5.26a1.4 1.4 0 0 1 1.93-.42Z"
       clipRule="evenodd"

package/src/assets/svg/Wallet.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgWallet = (props: SvgProps) => (
   <Svg viewBox="0 0 20 20" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M0 5.5c0-1.8 1.46-3.25 3.25-3.25H14.5c1.8 0 3.25 1.46 3.25 3.25v.28A3.25 3.25 0 0 1 20 8.88v2.24c0 1.45-.94 2.68-2.25 3.1v.28c0 1.8-1.46 3.25-3.25 3.25H3.25A3.25 3.25 0 0 1 0 14.5v-9Zm15.75 8.88h-2.38a4.38 4.38 0 0 1 0-8.76h2.38V5.5c0-.69-.56-1.25-1.25-1.25H3.25C2.56 4.25 2 4.81 2 5.5v9c0 .69.56 1.25 1.25 1.25H14.5c.69 0 1.25-.56 1.25-1.25v-.13Zm-2.38-6.76a2.37 2.37 0 1 0 0 4.75h3.38c.69 0 1.25-.55 1.25-1.24V8.87c0-.69-.56-1.24-1.25-1.24h-3.38Z"
       clipRule="evenodd"

package/src/assets/svg/WalletConnect.tsx

@@ -2,7 +2,7 @@ import Svg, { ClipPath, Defs, G, Path, type SvgProps } from 'react-native-svg';
 const SvgWalletConnect = (props: SvgProps) => (
   <Svg fill="none" viewBox="0 0 96 67" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       d="M25.32 18.8a32.56 32.56 0 0 1 45.36 0l1.5 1.47c.63.62.63 1.61 0 2.22l-5.15 5.05c-.31.3-.82.3-1.14 0l-2.07-2.03a22.71 22.71 0 0 0-31.64 0l-2.22 2.18c-.31.3-.82.3-1.14 0l-5.15-5.05a1.55 1.55 0 0 1 0-2.22l1.65-1.62Zm56.02 10.44 4.59 4.5c.63.6.63 1.6 0 2.21l-20.7 20.26c-.62.61-1.63.61-2.26 0L48.28 41.83a.4.4 0 0 0-.56 0L33.03 56.21c-.63.61-1.64.61-2.27 0L10.07 35.95a1.55 1.55 0 0 1 0-2.22l4.59-4.5a1.63 1.63 0 0 1 2.27 0L31.6 43.63a.4.4 0 0 0 .57 0l14.69-14.38a1.63 1.63 0 0 1 2.26 0l14.69 14.38a.4.4 0 0 0 .57 0l14.68-14.38a1.63 1.63 0 0 1 2.27 0Z"
     />
     <Path

package/src/assets/svg/WalletPlaceholder.tsx

@@ -11,7 +11,7 @@ const SvgWalletPlaceholder = (props: SvgProps) => {
         d="M4.56 8.64c-1.23 1.68-1.23 4.08-1.23 8.88v8.96c0 4.8 0 7.2 1.23 8.88.39.55.87 1.02 1.41 1.42C7.65 38 10.05 38 14.85 38h14.3c4.8 0 7.2 0 8.88-1.22a6.4 6.4 0 0 0 1.41-1.42c.83-1.14 1.1-2.6 1.19-4.92a6.4 6.4 0 0 0 5.16-4.65c.21-.81.21-1.8.21-3.79 0-1.98 0-2.98-.22-3.79a6.4 6.4 0 0 0-5.15-4.65c-.1-2.32-.36-3.78-1.19-4.92a6.4 6.4 0 0 0-1.41-1.42C36.35 6 33.95 6 29.15 6h-14.3c-4.8 0-7.2 0-8.88 1.22a6.4 6.4 0 0 0-1.41 1.42Z"
       />
       <Path
-        fill={props.fill || Theme['bg-300']}
+        fill={props.fill ?? Theme['bg-300']}
         fillRule="evenodd"
         d="M2.27 11.33a6.4 6.4 0 0 1 6.4-6.4h26.66a6.4 6.4 0 0 1 6.4 6.4v1.7a6.4 6.4 0 0 1 5.34 6.3v5.34a6.4 6.4 0 0 1-5.34 6.3v1.7a6.4 6.4 0 0 1-6.4 6.4H8.67a6.4 6.4 0 0 1-6.4-6.4V11.33ZM39.6 31.07h-6.93a9.07 9.07 0 1 1 0-18.14h6.93v-1.6a4.27 4.27 0 0 0-4.27-4.26H8.67a4.27 4.27 0 0 0-4.27 4.26v21.34a4.27 4.27 0 0 0 4.27 4.26h26.66a4.27 4.27 0 0 0 4.27-4.26v-1.6Zm-6.93-16a6.93 6.93 0 0 0 0 13.86h8a4.27 4.27 0 0 0 4.26-4.26v-5.34a4.27 4.27 0 0 0-4.26-4.26h-8Z"
         clipRule="evenodd"

package/src/assets/svg/WalletSmall.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgWalletSmall = (props: SvgProps) => (
   <Svg viewBox="0 0 14 14" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M0 4C0 2.61929 1.11929 1.5 2.5 1.5H10C11.3666 1.5 12.4772 2.59659 12.4997 3.95787C13.3828 4.34357 14 5.22471 14 6.25V7.75C14 8.77529 13.3828 9.65643 12.4997 10.0421C12.4772 11.4034 11.3666 12.5 10 12.5H2.5C1.11929 12.5 0 11.3807 0 10V4ZM10.4331 10.25H9.25C7.45507 10.25 6 8.79492 6 7C6 5.20507 7.45507 3.75 9.25 3.75L10.4331 3.75C10.3467 3.60055 10.1851 3.5 10 3.5H2.5C2.22386 3.5 2 3.72386 2 4V10C2 10.2761 2.22386 10.5 2.5 10.5H10C10.1851 10.5 10.3467 10.3995 10.4331 10.25ZM9.25 5.75C8.55964 5.75 8 6.30964 8 7C8 7.69036 8.55964 8.25 9.25 8.25H11.5C11.7761 8.25 12 8.02614 12 7.75V6.25C12 5.97386 11.7761 5.75 11.5 5.75L9.25 5.75Z"
       clipRule="evenodd"

package/src/assets/svg/WarningCircle.tsx

@@ -2,11 +2,11 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgWarningCircle = (props: SvgProps) => (
   <Svg viewBox="0 0 20 20" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       d="M11 6.67a1 1 0 1 0-2 0v2.66a1 1 0 0 0 2 0V6.67ZM10 14.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"
     />
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-7 9a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"
       clipRule="evenodd"

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

@@ -10,6 +10,7 @@ import ArrowLeftSvg from '../../assets/svg/ArrowLeft';
 import ArrowRightSvg from '../../assets/svg/ArrowRight';
 import ArrowTopSvg from '../../assets/svg/ArrowTop';
 import BrowserSvg from '../../assets/svg/Browser';
+import CardSvg from '../../assets/svg/Card';
 import CheckmarkSvg from '../../assets/svg/Checkmark';
 import ChevronBottomSvg from '../../assets/svg/ChevronBottom';
 import ChevronLeftSvg from '../../assets/svg/ChevronLeft';
@@ -23,6 +24,7 @@ import CoinPlaceholderSvg from '../../assets/svg/CoinPlaceholder';
 import CopySvg from '../../assets/svg/Copy';
 import CopySmallSvg from '../../assets/svg/CopySmall';
 import CursorSvg from '../../assets/svg/Cursor';
+import CurrencyDollarSvg from '../../assets/svg/CurrencyDollar';
 import DesktopSvg from '../../assets/svg/Desktop';
 import DisconnectSvg from '../../assets/svg/Disconnect';
 import DiscordSvg from '../../assets/svg/Discord';
@@ -48,6 +50,7 @@ import QrCodeSvg from '../../assets/svg/QrCode';
 import RecycleHorizontalSvg from '../../assets/svg/RecycleHorizontal';
 import RefreshSvg from '../../assets/svg/Refresh';
 import SearchSvg from '../../assets/svg/Search';
+import SettingsSvg from '../../assets/svg/Settings';
 import SwapHorizontalSvg from '../../assets/svg/SwapHorizontal';
 import SwapVerticalSvg from '../../assets/svg/SwapVertical';
 import TelegramSvg from '../../assets/svg/Telegram';
@@ -71,6 +74,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   arrowRight: ArrowRightSvg,
   arrowTop: ArrowTopSvg,
   browser: BrowserSvg,
+  card: CardSvg,
   checkmark: CheckmarkSvg,
   chevronBottom: ChevronBottomSvg,
   chevronLeft: ChevronLeftSvg,
@@ -84,6 +88,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   copy: CopySvg,
   copySmall: CopySmallSvg,
   cursor: CursorSvg,
+  currencyDollar: CurrencyDollarSvg,
   desktop: DesktopSvg,
   disconnect: DisconnectSvg,
   discord: DiscordSvg,
@@ -109,6 +114,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   recycleHorizontal: RecycleHorizontalSvg,
   refresh: RefreshSvg,
   search: SearchSvg,
+  settings: SettingsSvg,
   swapHorizontal: SwapHorizontalSvg,
   swapVertical: SwapVerticalSvg,
   telegram: TelegramSvg,

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

@@ -20,6 +20,7 @@ export interface PressableProps extends RNPressableProps {
   animationDuration?: number;
   disabled?: boolean;
   pressable?: boolean;
+  transparent?: boolean;
 }
 
 export function Pressable({
@@ -28,6 +29,7 @@ export function Pressable({
   disabled = false,
   pressable = true,
   onPress,
+  transparent = false,
   backgroundColor = 'gray-glass-002',
   pressedBackgroundColor = 'gray-glass-010',
   bounceScale = 0.99, // Scale to 99% of original size
@@ -80,7 +82,14 @@ export function Pressable({
   return (
     <AnimatedPressable
       disabled={disabled || !pressable}
-      style={[{ backgroundColor: bgColor, transform: [{ scale: scaleAnimation.current }] }, style]}
+      style={[
+        // eslint-disable-next-line react-native/no-inline-styles
+        {
+          backgroundColor: transparent ? 'transparent' : bgColor,
+          transform: [{ scale: scaleAnimation.current }]
+        },
+        style
+      ]}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       onPress={onPress}

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

@@ -5,8 +5,8 @@ import { useTheme } from '../../hooks/useTheme';
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
 export interface ShimmerProps {
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
   duration?: number;
   borderRadius?: number;
   backgroundColor?: string;

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

@@ -28,6 +28,7 @@ export type ButtonProps = NativeProps & {
   style?: StyleProp<ViewStyle>;
   iconStyle?: SvgProps['style'];
   loading?: boolean;
+  testID?: string;
 };
 
 export function Button({
@@ -41,6 +42,7 @@ export function Button({
   iconRight,
   iconStyle,
   loading,
+  testID,
   ...rest
 }: ButtonProps) {
   const Theme = useTheme();
@@ -84,6 +86,7 @@ export function Button({
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       onPress={onPress}
+      testID={testID}
       {...rest}
     >
       <FlexView flexDirection="row" alignItems="center" justifyContent="center">

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

@@ -28,7 +28,7 @@ export const getThemedButtonStyle = (
 
   return {
     ...buttonBaseStyle,
-    backgroundColor: variant === 'fill' ? theme['accent-100'] : theme['gray-glass-002']
+    backgroundColor: variant === 'fill' ? theme['accent-100'] : theme['gray-glass-005']
   };
 };
 

package/src/composites/wui-double-image-loader/index.native.tsx

@@ -0,0 +1,120 @@
+import { Animated, useAnimatedValue, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useEffect } from 'react';
+import { useTheme } from '../../hooks/useTheme';
+import { FlexView } from '../../layout/wui-flex';
+import { Image } from '../../components/wui-image';
+import { Icon } from '../../components/wui-icon';
+import { type IconType } from '../../utils/TypesUtil';
+import { WalletImage } from '../wui-wallet-image';
+import styles from './styles';
+interface Props {
+  style?: StyleProp<ViewStyle>;
+  leftImage?: string;
+  rightImage?: string;
+  renderRightPlaceholder?: () => React.ReactElement;
+  leftPlaceholderIcon?: IconType;
+  rightPlaceholderIcon?: IconType;
+  leftItemStyle?: StyleProp<ViewStyle>;
+  rightItemStyle?: StyleProp<ViewStyle>;
+}
+
+export function DoubleImageLoader({
+  style,
+  leftImage,
+  rightImage,
+  renderRightPlaceholder,
+  leftPlaceholderIcon = 'mobile',
+  rightPlaceholderIcon = 'browser',
+  leftItemStyle,
+  rightItemStyle
+}: Props) {
+  const Theme = useTheme();
+  const leftPosition = useAnimatedValue(10);
+  const rightPosition = useAnimatedValue(-10);
+
+  useEffect(() => {
+    const leftAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(leftPosition, {
+          toValue: -5,
+          duration: 1500,
+          useNativeDriver: true
+        }),
+        Animated.timing(leftPosition, {
+          toValue: 10,
+          duration: 1500,
+          useNativeDriver: true
+        })
+      ])
+    );
+
+    const rightAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(rightPosition, {
+          toValue: 5,
+          duration: 1500,
+          useNativeDriver: true
+        }),
+        Animated.timing(rightPosition, {
+          toValue: -10,
+          duration: 1500,
+          useNativeDriver: true
+        })
+      ])
+    );
+
+    leftAnimation.start();
+    rightAnimation.start();
+
+    return () => {
+      leftAnimation.stop();
+      rightAnimation.stop();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <FlexView flexDirection="row" alignItems="center" justifyContent="center" style={style}>
+      <Animated.View
+        style={[
+          styles.itemBorder,
+          styles.leftItemBorder,
+          {
+            transform: [{ translateX: leftPosition }],
+            backgroundColor: Theme['bg-200']
+          },
+          leftItemStyle
+        ]}
+      >
+        {leftImage ? (
+          <Image
+            source={leftImage}
+            style={[styles.rightImage, { backgroundColor: Theme['bg-200'] }]}
+          />
+        ) : (
+          <Icon name={leftPlaceholderIcon} size="lg" color="fg-200" />
+        )}
+      </Animated.View>
+      <Animated.View
+        style={[
+          styles.itemBorder,
+          styles.rightItemBorder,
+          {
+            transform: [{ translateX: rightPosition }],
+            backgroundColor: Theme['bg-200']
+          },
+          rightItemStyle
+        ]}
+      >
+        {rightImage ? (
+          <WalletImage imageSrc={rightImage} size="lg" border={false} />
+        ) : (
+          renderRightPlaceholder?.() ?? (
+            <Icon name={rightPlaceholderIcon} size="lg" color="fg-200" />
+          )
+        )}
+      </Animated.View>
+    </FlexView>
+  );
+}

package/src/composites/wui-double-image-loader/index.tsx

@@ -0,0 +1,74 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../hooks/useTheme';
+import { FlexView } from '../../layout/wui-flex';
+import { Image } from '../../components/wui-image';
+import { Icon } from '../../components/wui-icon';
+import { type IconType } from '../../utils/TypesUtil';
+import { WalletImage } from '../wui-wallet-image';
+import styles from './styles';
+interface Props {
+  style?: StyleProp<ViewStyle>;
+  leftImage?: string;
+  rightImage?: string;
+  renderRightPlaceholder?: () => React.ReactElement;
+  leftPlaceholderIcon?: IconType;
+  rightPlaceholderIcon?: IconType;
+  leftItemStyle?: StyleProp<ViewStyle>;
+  rightItemStyle?: StyleProp<ViewStyle>;
+}
+
+export function DoubleImageLoader({
+  style,
+  leftImage,
+  rightImage,
+  renderRightPlaceholder,
+  leftPlaceholderIcon = 'mobile',
+  rightPlaceholderIcon = 'browser',
+  leftItemStyle,
+  rightItemStyle
+}: Props) {
+  const Theme = useTheme();
+
+  return (
+    <FlexView flexDirection="row" alignItems="center" justifyContent="center" style={style}>
+      <FlexView
+        style={[
+          styles.itemBorder,
+          styles.leftItemBorder,
+          {
+            backgroundColor: Theme['bg-200']
+          },
+          leftItemStyle
+        ]}
+      >
+        {leftImage ? (
+          <Image
+            source={leftImage}
+            style={[styles.rightImage, { backgroundColor: Theme['bg-200'] }]}
+          />
+        ) : (
+          <Icon name={leftPlaceholderIcon} size="lg" color="fg-200" />
+        )}
+      </FlexView>
+      <FlexView
+        style={[
+          styles.itemBorder,
+          styles.rightItemBorder,
+          {
+            backgroundColor: Theme['bg-200']
+          },
+          rightItemStyle
+        ]}
+      >
+        {rightImage ? (
+          <WalletImage imageSrc={rightImage} size="lg" border={false} />
+        ) : (
+          renderRightPlaceholder?.() ?? (
+            <Icon name={rightPlaceholderIcon} size="lg" color="fg-200" />
+          )
+        )}
+      </FlexView>
+    </FlexView>
+  );
+}

package/src/composites/wui-double-image-loader/styles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  rightImage: {
+    height: 64,
+    width: 64,
+    borderRadius: BorderRadius.full
+  },
+  itemBorder: {
+    width: 74,
+    height: 74,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  leftItemBorder: {
+    borderRadius: BorderRadius.full,
+    zIndex: 2
+  },
+  rightItemBorder: {
+    borderRadius: 22,
+    width: 72,
+    height: 72
+  }
+});

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

@@ -16,6 +16,7 @@ export interface IconBoxProps {
   borderColor?: ThemeKeys;
   borderSize?: number;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 export function IconBox({
@@ -28,7 +29,8 @@ export function IconBox({
   border,
   borderColor,
   borderSize = 4,
-  style
+  style,
+  testID
 }: IconBoxProps) {
   const Theme = useTheme();
   let _iconSize: SizeType;
@@ -97,6 +99,7 @@ export function IconBox({
         border && { borderColor: Theme[borderColor || 'bg-125'], borderWidth: borderSize / 2 },
         style
       ]}
+      testID={testID}
     >
       <Icon size={iconSize || _iconSize} color={iconColor} name={icon} />
     </View>

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

@@ -1,5 +1,13 @@
 import type { ReactNode } from 'react';
-import { View, Pressable, Animated, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  View,
+  Pressable,
+  Animated,
+  type StyleProp,
+  type ViewStyle,
+  type ImageStyle,
+  type ImageProps
+} from 'react-native';
 import { Icon } from '../../components/wui-icon';
 import { Image } from '../../components/wui-image';
 import { LoadingSpinner } from '../../components/wui-loading-spinner';
@@ -16,8 +24,12 @@ export interface ListItemProps {
   iconColor?: ColorType;
   iconBackgroundColor?: ColorType;
   iconBorderColor?: ColorType;
+  backgroundColor?: ColorType;
   imageSrc?: string;
   imageHeaders?: Record<string, string>;
+  imageStyle?: StyleProp<ImageStyle>;
+  imageProps?: ImageProps;
+  imageContainerStyle?: StyleProp<ViewStyle>;
   chevron?: boolean;
   disabled?: boolean;
   loading?: boolean;
@@ -32,7 +44,10 @@ export function ListItem({
   children,
   icon,
   imageSrc,
+  imageProps,
   imageHeaders,
+  imageStyle,
+  imageContainerStyle,
   iconColor = 'fg-200',
   iconBackgroundColor,
   iconBorderColor = 'gray-glass-005',
@@ -42,28 +57,42 @@ export function ListItem({
   onPress,
   style,
   contentStyle,
-  testID
+  testID,
+  backgroundColor = 'gray-glass-002'
 }: ListItemProps) {
   const Theme = useTheme();
   const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
-    Theme['gray-glass-002'],
+    Theme[backgroundColor],
     Theme['gray-glass-010']
   );
 
   function visualTemplate() {
     if (imageSrc) {
       return (
-        <View style={[styles.imageContainer, { borderColor: Theme['gray-glass-005'] }]}>
+        <View
+          style={[
+            styles.imageContainer,
+            { borderColor: Theme['gray-glass-005'] },
+            imageContainerStyle
+          ]}
+        >
           <Image
-            source={imageSrc}
+            {...imageProps}
             headers={imageHeaders}
-            style={[styles.image, (disabled || loading) && styles.disabledImage]}
+            source={imageSrc}
+            style={[styles.image, (disabled || loading) && styles.disabledImage, imageStyle]}
           />
         </View>
       );
     } else if (icon) {
       return (
-        <View style={[styles.imageContainer, { borderColor: Theme[iconBorderColor] }]}>
+        <View
+          style={[
+            styles.imageContainer,
+            { borderColor: Theme[iconBorderColor] },
+            imageContainerStyle
+          ]}
+        >
           <IconBox
             icon={icon}
             iconColor={iconColor}

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

@@ -14,7 +14,7 @@ export default StyleSheet.create({
   rightPlaceholder: {
     width: 40,
     height: 40,
-    borderRadius: 100
+    borderRadius: BorderRadius.full
   },
   disabledLogo: {
     opacity: 0.4

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

@@ -50,10 +50,7 @@ export function ListToken({
       >
         <FlexView flexDirection="row" alignItems="center">
           {imageSrc ? (
-            <Image
-              source={imageSrc}
-              style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}
-            />
+            <Image source={imageSrc} style={styles.image} />
           ) : (
             <FlexView
               style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}

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

@@ -21,8 +21,7 @@ export default StyleSheet.create({
     height: 24,
     width: 24,
     borderRadius: BorderRadius.full,
-    borderWidth: 2,
-    paddingLeft: Spacing['4xs']
+    borderWidth: 2
   },
   imageDisabled: {
     opacity: 0.4

package/src/composites/wui-numeric-keyboard/index.tsx

@@ -0,0 +1,67 @@
+import { memo } from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { Text } from '../../components/wui-text';
+import { FlexView } from '../../layout/wui-flex';
+import { useTheme } from '../../hooks/useTheme';
+
+export interface NumericKeyboardProps {
+  onKeyPress: (value: string) => void;
+}
+
+function _NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
+  const Theme = useTheme();
+  const keys = [
+    ['1', '2', '3'],
+    ['4', '5', '6'],
+    ['7', '8', '9'],
+    [',', '0', 'erase']
+  ];
+
+  const handlePress = (key: string) => {
+    onKeyPress(key);
+  };
+
+  return (
+    <FlexView>
+      {keys.map((row, rowIndex) => (
+        <FlexView
+          key={`row-${rowIndex}`}
+          flexDirection="row"
+          justifyContent="space-around"
+          style={styles.row}
+        >
+          {row.map(key => (
+            <TouchableOpacity key={key} style={styles.key} onPress={() => handlePress(key)}>
+              {key === 'erase' ? (
+                <Text testID="key-erase" style={[styles.keyText, { color: Theme['fg-100'] }]}>
+                  ←
+                </Text>
+              ) : (
+                <Text testID={`key-${key}`} style={[styles.keyText, { color: Theme['fg-100'] }]}>
+                  {key}
+                </Text>
+              )}
+            </TouchableOpacity>
+          ))}
+        </FlexView>
+      ))}
+    </FlexView>
+  );
+}
+
+export const NumericKeyboard = memo(_NumericKeyboard);
+
+const styles = StyleSheet.create({
+  row: {
+    marginBottom: 10
+  },
+  key: {
+    width: 70,
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  keyText: {
+    fontSize: 26
+  }
+});