@reown/appkit-ui-react-native 0.0.0-feat-coinbase-20250723185200 → 0.0.0-feat-multichain-20250725133522

package/src/assets/svg/Settings.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgSettings = (props: SvgProps) => (
   <Svg viewBox="0 0 20 20" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M2.5 6.25C2.5 6.08423 2.56585 5.92526 2.68306 5.80805C2.80027 5.69084 2.95924 5.625 3.125 5.625H6.02891C6.16362 5.17372 6.44038 4.77798 6.81803 4.4966C7.19568 4.21522 7.65405 4.06323 8.125 4.06323C8.59595 4.06323 9.05432 4.21522 9.43197 4.4966C9.80962 4.77798 10.0864 5.17372 10.2211 5.625H16.875C17.0408 5.625 17.1997 5.69084 17.3169 5.80805C17.4342 5.92526 17.5 6.08423 17.5 6.25C17.5 6.41576 17.4342 6.57473 17.3169 6.69194C17.1997 6.80915 17.0408 6.875 16.875 6.875H10.2211C10.0864 7.32627 9.80962 7.72201 9.43197 8.00339C9.05432 8.28477 8.59595 8.43676 8.125 8.43676C7.65405 8.43676 7.19568 8.28477 6.81803 8.00339C6.44038 7.72201 6.16362 7.32627 6.02891 6.875H3.125C2.95924 6.875 2.80027 6.80915 2.68306 6.69194C2.56585 6.57473 2.5 6.41576 2.5 6.25ZM16.875 13.125H15.2211C15.0864 12.6737 14.8096 12.278 14.432 11.9966C14.0543 11.7152 13.5959 11.5632 13.125 11.5632C12.6541 11.5632 12.1957 11.7152 11.818 11.9966C11.4404 12.278 11.1636 12.6737 11.0289 13.125H3.125C2.95924 13.125 2.80027 13.1908 2.68306 13.3081C2.56585 13.4253 2.5 13.5842 2.5 13.75C2.5 13.9158 2.56585 14.0747 2.68306 14.1919C2.80027 14.3091 2.95924 14.375 3.125 14.375H11.0289C11.1636 14.8263 11.4404 15.222 11.818 15.5034C12.1957 15.7848 12.6541 15.9368 13.125 15.9368C13.5959 15.9368 14.0543 15.7848 14.432 15.5034C14.8096 15.222 15.0864 14.8263 15.2211 14.375H16.875C17.0408 14.375 17.1997 14.3091 17.3169 14.1919C17.4342 14.0747 17.5 13.9158 17.5 13.75C17.5 13.5842 17.4342 13.4253 17.3169 13.3081C17.1997 13.1908 17.0408 13.125 16.875 13.125Z"
       clipRule="evenodd"

package/src/assets/svg/SwapHorizontal.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgSwapHorizontal = (props: SvgProps) => (
   <Svg viewBox="0 0 20 20" {...props} fill="none">
     <Path
-      fill={props.fill || '#FFFFFF'}
+      fill={props.fill ?? '#FFFFFF'}
       fillRule="evenodd"
       d="M6.76.3a1 1 0 0 1 0 1.4L4.07 4.4h9a1 1 0 1 1 0 2h-9l2.69 2.68a1 1 0 1 1-1.42 1.42L.95 6.09a1 1 0 0 1 0-1.4l4.4-4.4a1 1 0 0 1 1.4 0Zm6.49 9.21a1 1 0 0 1 1.41 0l4.39 4.4a1 1 0 0 1 0 1.4l-4.39 4.4a1 1 0 0 1-1.41-1.42l2.68-2.68h-9a1 1 0 0 1 0-2h9l-2.68-2.68a1 1 0 0 1 0-1.42Z"
       clipRule="evenodd"

package/src/assets/svg/SwapVertical.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgSwapVertical = (props: SvgProps) => (
   <Svg viewBox="0 0 14 14" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M3.48 2.18a1 1 0 0 1 1.41 0l2.68 2.68a1 1 0 1 1-1.41 1.42l-.98-.98v4.56a1 1 0 0 1-2 0V5.3l-.97.98A1 1 0 0 1 .79 4.86l2.69-2.68Zm6.34 2.93a1 1 0 0 1 1 1v4.56l.97-.98a1 1 0 1 1 1.42 1.42l-2.69 2.68a1 1 0 0 1-1.41 0l-2.68-2.68a1 1 0 0 1 1.41-1.42l.98.98V6.1a1 1 0 0 1 1-1Z"
       clipRule="evenodd"

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/composites/wui-double-image-loader/index.native.tsx

@@ -33,8 +33,8 @@ export function DoubleImageLoader({
   const leftPosition = useAnimatedValue(10);
   const rightPosition = useAnimatedValue(-10);
 
-  const animateLeft = () => {
-    Animated.loop(
+  useEffect(() => {
+    const leftAnimation = Animated.loop(
       Animated.sequence([
         Animated.timing(leftPosition, {
           toValue: -5,
@@ -47,11 +47,9 @@ export function DoubleImageLoader({
           useNativeDriver: true
         })
       ])
-    ).start();
-  };
+    );
 
-  const animateRight = () => {
-    Animated.loop(
+    const rightAnimation = Animated.loop(
       Animated.sequence([
         Animated.timing(rightPosition, {
           toValue: 5,
@@ -64,12 +62,15 @@ export function DoubleImageLoader({
           useNativeDriver: true
         })
       ])
-    ).start();
-  };
+    );
 
-  useEffect(() => {
-    animateLeft();
-    animateRight();
+    leftAnimation.start();
+    rightAnimation.start();
+
+    return () => {
+      leftAnimation.stop();
+      rightAnimation.stop();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

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

@@ -5,7 +5,8 @@ import {
   Animated,
   type StyleProp,
   type ViewStyle,
-  type ImageStyle
+  type ImageStyle,
+  type ImageProps
 } from 'react-native';
 import { Icon } from '../../components/wui-icon';
 import { Image } from '../../components/wui-image';
@@ -27,6 +28,7 @@ export interface ListItemProps {
   imageSrc?: string;
   imageHeaders?: Record<string, string>;
   imageStyle?: StyleProp<ImageStyle>;
+  imageProps?: ImageProps;
   imageContainerStyle?: StyleProp<ViewStyle>;
   chevron?: boolean;
   disabled?: boolean;
@@ -42,6 +44,7 @@ export function ListItem({
   children,
   icon,
   imageSrc,
+  imageProps,
   imageHeaders,
   imageStyle,
   imageContainerStyle,
@@ -74,8 +77,9 @@ export function ListItem({
           ]}
         >
           <Image
-            source={imageSrc}
+            {...imageProps}
             headers={imageHeaders}
+            source={imageSrc}
             style={[styles.image, (disabled || loading) && styles.disabledImage, imageStyle]}
           />
         </View>

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

@@ -16,9 +16,6 @@ export default StyleSheet.create({
     height: 40,
     borderRadius: BorderRadius.full
   },
-  rightIcon: {
-    marginRight: Spacing['2xs']
-  },
   disabledLogo: {
     opacity: 0.4
   },
@@ -27,5 +24,8 @@ export default StyleSheet.create({
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  rightIcon: {
+    marginRight: Spacing['2xs']
   }
 });

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-numeric-keyboard/index.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { Text } from '../../components/wui-text';
 import { FlexView } from '../../layout/wui-flex';
@@ -7,7 +8,7 @@ export interface NumericKeyboardProps {
   onKeyPress: (value: string) => void;
 }
 
-export function NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
+function _NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
   const Theme = useTheme();
   const keys = [
     ['1', '2', '3'],
@@ -48,6 +49,8 @@ export function NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
   );
 }
 
+export const NumericKeyboard = memo(_NumericKeyboard);
+
 const styles = StyleSheet.create({
   row: {
     marginBottom: 10

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

@@ -1,12 +1,12 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
 import { Image } from '../../components/wui-image';
 import { Text } from '../../components/wui-text';
 import { Button } from '../wui-button';
 import { Icon } from '../../components/wui-icon';
 import styles from './styles';
 import { useTheme } from '../../context/ThemeContext';
-import { View } from 'react-native';
-import React from 'react';
 
 export interface TokenButtonProps {
   onPress?: () => void;

package/src/utils/TransactionUtil.ts

@@ -1,9 +1,9 @@
-import { DateUtil } from '@reown/appkit-common-react-native';
-import type {
-  TransactionTransfer,
-  Transaction,
-  TransactionImage,
-  TransactionMetadata
+import {
+  type TransactionTransfer,
+  type Transaction,
+  type TransactionImage,
+  type TransactionMetadata,
+  DateUtil
 } from '@reown/appkit-common-react-native';
 import type { TransactionType } from './TypesUtil';
 import { UiUtil } from './UiUtil';