@reown/appkit-ui-react-native 0.0.0-feat-coinbase-20250722184953 → 0.0.0-feat-onramp-20250722205908

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

@@ -1,8 +1,9 @@
-import { Path, Svg, Image, Defs, Pattern, G } from 'react-native-svg';
+import { Path, Svg, Image, Defs, Pattern } from 'react-native-svg';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
 import type { SizeType } from '../../utils/TypesUtil';
-import NetworkPlaceholderSvg from '../../assets/svg/NetworkPlaceholder';
+import { Icon } from '../../components/wui-icon';
+import { FlexView } from '../../layout/wui-flex';
 import { PathLg, PathNormal, PathSmall, PathXS } from './styles';
 
 export interface NetworkImageProps {
@@ -30,13 +31,6 @@ const sizeToHeight = {
   xs: 20
 };
 
-const sizeToIconSize = {
-  lg: 24,
-  md: 16,
-  sm: 14,
-  xs: 12
-};
-
 export function NetworkImage({
   imageSrc,
   imageHeaders,
@@ -50,52 +44,42 @@ export function NetworkImage({
   const Theme = useTheme();
   const svgStroke = selected ? Theme['accent-100'] : Theme['gray-glass-010'];
   const opacity = disabled ? 0.5 : 1;
-  const containerSize = sizeToHeight[size];
-  const iconSize = sizeToIconSize[size];
 
   return (
     <Svg
-      width={containerSize}
-      height={containerSize}
+      width={sizeToHeight[size]}
+      height={sizeToHeight[size]}
       stroke={borderColor ?? svgStroke}
       strokeWidth={borderWidth}
       style={style}
     >
-      {imageSrc ? (
-        <>
-          <Defs>
-            <Pattern
-              id="image-pattern"
-              width={containerSize}
-              height={containerSize}
-              patternUnits="userSpaceOnUse"
-            >
-              <Image
-                height={containerSize}
-                width={containerSize}
-                opacity={opacity}
-                href={{ uri: imageSrc, headers: imageHeaders }}
-              />
-            </Pattern>
-          </Defs>
-          <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
-        </>
-      ) : (
-        <>
-          <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />
-          <G
-            transform={`translate(${(containerSize - iconSize) / 2}, ${
-              (containerSize - iconSize) / 2
-            })`}
-          >
-            <NetworkPlaceholderSvg
-              fill={selected ? Theme['accent-100'] : Theme['fg-200']}
-              width={iconSize}
-              height={iconSize}
+      <Defs>
+        <Pattern id="image-pattern">
+          {imageSrc ? (
+            <Image
+              height={sizeToHeight[size]}
+              width={sizeToHeight[size]}
+              opacity={opacity}
+              href={{ uri: imageSrc, headers: imageHeaders }}
             />
-          </G>
-        </>
-      )}
+          ) : (
+            <FlexView
+              alignItems="center"
+              justifyContent="center"
+              // eslint-disable-next-line react-native/no-inline-styles
+              style={{
+                height: sizeToHeight[size],
+                width: sizeToHeight[size],
+                backgroundColor: 'transparent'
+              }}
+            >
+              <Icon name="networkPlaceholder" size={size} color="fg-200" />
+            </FlexView>
+          )}
+        </Pattern>
+      </Defs>
+      {!imageSrc && <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />}
+      <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
     </Svg>
   );
 }

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

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/index.ts

@@ -53,6 +53,7 @@ export { NetworkImage, type NetworkImageProps } from './composites/wui-network-i
 export { NumericKeyboard, type NumericKeyboardProps } from './composites/wui-numeric-keyboard';
 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';
@@ -79,8 +80,7 @@ export type {
   SizeType,
   TagType,
   TextType,
-  VisualType,
-  TransactionType
+  VisualType
 } from './utils/TypesUtil';
 export { UiUtil } from './utils/UiUtil';
 export { TransactionUtil } from './utils/TransactionUtil';

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';

package/src/utils/TypesUtil.ts

@@ -169,7 +169,7 @@ export type IconType =
   | 'google'
   | 'helpCircle'
   | 'infoCircle'
-  | 'email'
+  | 'mail'
   | 'mobile'
   | 'more'
   | 'networkPlaceholder'
@@ -223,7 +223,6 @@ export type LogoType =
   | 'more'
   | 'telegram'
   | 'twitch'
-  | 'email'
   | 'x';
 
 export type TagType = 'main' | 'shade' | 'error' | 'success';

package/src/utils/UiUtil.ts

@@ -71,18 +71,20 @@ export const UiUtil = {
   },
 
   formatNumberToLocalString(value: string | number | undefined, decimals = 2) {
-    let numericValue: number;
-
     if (value === undefined) {
-      numericValue = 0;
-    } else if (typeof value === 'string') {
-      numericValue = parseFloat(value);
-    } else {
-      numericValue = value;
+      return '0.00';
+    }
+
+    if (typeof value === 'number') {
+      return value.toLocaleString('en-US', {
+        maximumFractionDigits: decimals,
+        minimumFractionDigits: decimals
+      });
     }
 
-    return numericValue.toLocaleString('en-US', {
-      maximumFractionDigits: decimals
+    return parseFloat(value).toLocaleString('en-US', {
+      maximumFractionDigits: decimals,
+      minimumFractionDigits: decimals
     });
   }
 };