@reown/appkit-ui-react-native 0.0.0-chore-update-valtio-20250611193623 → 0.0.0-chore-canary-20250722145858

package/src/assets/svg/Mail.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgMail = (props: SvgProps) => (
   <Svg viewBox="0 0 16 16" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M4.83 1.34h6.34c.68 0 1.26 0 1.73.04.5.05.97.15 1.42.4.52.3.95.72 1.24 1.24.26.45.35.92.4 1.42.04.47.04 1.05.04 1.73v3.71c0 .69 0 1.26-.04 1.74-.05.5-.14.97-.4 1.41-.3.52-.72.95-1.24 1.25-.45.25-.92.35-1.42.4-.47.03-1.05.03-1.73.03H4.83c-.68 0-1.26 0-1.73-.04-.5-.04-.97-.14-1.42-.4-.52-.29-.95-.72-1.24-1.24a3.39 3.39 0 0 1-.4-1.41A20.9 20.9 0 0 1 0 9.88v-3.7c0-.7 0-1.27.04-1.74.05-.5.14-.97.4-1.42.3-.52.72-.95 1.24-1.24.45-.25.92-.35 1.42-.4.47-.04 1.05-.04 1.73-.04ZM3.28 3.38c-.36.03-.51.08-.6.14-.21.11-.39.29-.5.5a.8.8 0 0 0-.08.19l5.16 3.44c.45.3 1.03.3 1.48 0L13.9 4.2a.79.79 0 0 0-.08-.2c-.11-.2-.29-.38-.5-.5-.09-.05-.24-.1-.6-.13-.37-.04-.86-.04-1.6-.04H4.88c-.73 0-1.22 0-1.6.04ZM14 6.54 9.85 9.31a3.33 3.33 0 0 1-3.7 0L2 6.54v3.3c0 .74 0 1.22.03 1.6.04.36.1.5.15.6.11.2.29.38.5.5.09.05.24.1.6.14.37.03.86.03 1.6.03h6.25c.73 0 1.22 0 1.6-.03.35-.03.5-.09.6-.14.2-.12.38-.3.5-.5.05-.1.1-.24.14-.6.03-.38.03-.86.03-1.6v-3.3Z"
       clipRule="evenodd"

package/src/assets/svg/Mobile.tsx

@@ -1,9 +1,9 @@
 import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgMobile = (props: SvgProps) => (
   <Svg viewBox="0 0 20 20" fill="none" {...props}>
-    <Path fill={props.fill || '#fff'} d="M10.81 5.81a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
+    <Path fill={props.fill ?? '#fff'} d="M10.81 5.81a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M3 4.75A4.75 4.75 0 0 1 7.75 0h4.5A4.75 4.75 0 0 1 17 4.75v10.5A4.75 4.75 0 0 1 12.25 20h-4.5A4.75 4.75 0 0 1 3 15.25V4.75ZM7.75 2A2.75 2.75 0 0 0 5 4.75v10.5A2.75 2.75 0 0 0 7.75 18h4.5A2.75 2.75 0 0 0 15 15.25V4.75A2.75 2.75 0 0 0 12.25 2h-4.5Z"
       clipRule="evenodd"

package/src/assets/svg/More.tsx

@@ -2,7 +2,7 @@ import Svg, { Circle, Path, type SvgProps } from 'react-native-svg';
 const SvgMore = (props: SvgProps) => (
   <Svg viewBox="0 0 41 40" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillOpacity=".05"
       d="M.6 20a20 20 0 1 1 40 0 20 20 0 0 1-40 0Z"
     />

package/src/assets/svg/NetworkPlaceholder.tsx

@@ -2,13 +2,13 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgNetworkPlaceholder = (props: SvgProps) => (
   <Svg viewBox="0 0 22 20" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M16.32 13.62a3.14 3.14 0 1 1-.99 1.72l-1.6-.93a3.83 3.83 0 0 1-3.71 1 3.66 3.66 0 0 1-1.74-1l-1.6.94a3.14 3.14 0 1 1-1-1.73l1.6-.94a3.7 3.7 0 0 1 0-2 3.81 3.81 0 0 1 1.8-2.33c.29-.17.6-.3.92-.38V6.1a3.14 3.14 0 1 1 2 0l-.01.02v1.85H12a3.82 3.82 0 0 1 2.33 1.8 3.7 3.7 0 0 1 .39 2.91l1.6.93ZM2.6 16.54a1.14 1.14 0 0 0 1.98-1.14 1.14 1.14 0 0 0-1.98 1.14ZM11 2.01a1.14 1.14 0 1 0 0 2.28 1.14 1.14 0 0 0 0-2.28Zm1.68 10.45c.08-.19.14-.38.16-.58v-.05l.02-.13v-.13a1.92 1.92 0 0 0-.24-.8l-.11-.15a1.89 1.89 0 0 0-.74-.6 1.86 1.86 0 0 0-.77-.17h-.19a1.97 1.97 0 0 0-.89.34 1.98 1.98 0 0 0-.61.74 1.99 1.99 0 0 0-.16.9v.05a1.87 1.87 0 0 0 .24.74l.1.15c.12.16.26.3.42.42l.16.1.13.07.04.02a1.84 1.84 0 0 0 .76.17h.17a2 2 0 0 0 .91-.35 1.78 1.78 0 0 0 .52-.58l.03-.05a.84.84 0 0 0 .05-.11Zm5.15 4.5a1.14 1.14 0 0 0 1.14-1.97 1.13 1.13 0 0 0-1.55.41c-.32.55-.13 1.25.41 1.56Z"
       clipRule="evenodd"
     />
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M4.63 9.43a1.5 1.5 0 1 0 1.5-2.6 1.5 1.5 0 0 0-1.5 2.6Zm.32-1.55a.5.5 0 0 1 .68-.19.5.5 0 0 1 .18.68.5.5 0 0 1-.68.19.5.5 0 0 1-.18-.68ZM17.94 8.88a1.5 1.5 0 1 1-2.6-1.5 1.5 1.5 0 1 1 2.6 1.5ZM16.9 7.69a.5.5 0 0 0-.68.19.5.5 0 0 0 .18.68.5.5 0 0 0 .68-.19.5.5 0 0 0-.18-.68ZM9.75 17.75a1.5 1.5 0 1 1 2.6 1.5 1.5 1.5 0 1 1-2.6-1.5Zm1.05 1.18a.5.5 0 0 0 .68-.18.5.5 0 0 0-.18-.68.5.5 0 0 0-.68.18.5.5 0 0 0 .18.68Z"
       clipRule="evenodd"

package/src/assets/svg/NftPlaceholder.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgNftPlaceholder = (props: SvgProps) => (
   <Svg viewBox="0 0 20 20" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M9.13 1h1.71c1.46 0 2.63 0 3.56.1.97.1 1.8.33 2.53.85a5 5 0 0 1 1.1 1.11c.53.73.75 1.56.86 2.53.1.93.1 2.1.1 3.55v1.72c0 1.45 0 2.62-.1 3.55-.1.97-.33 1.8-.86 2.53a5 5 0 0 1-1.1 1.1c-.73.53-1.56.75-2.53.86-.93.1-2.1.1-3.55.1H9.13c-1.45 0-2.62 0-3.56-.1-.96-.1-1.8-.33-2.52-.85a5 5 0 0 1-1.1-1.11 5.05 5.05 0 0 1-.86-2.53c-.1-.93-.1-2.1-.1-3.55V9.14c0-1.45 0-2.62.1-3.55.1-.97.33-1.8.85-2.53a5 5 0 0 1 1.1-1.1 5.05 5.05 0 0 1 2.53-.86C6.51 1 7.67 1 9.13 1ZM5.79 3.09a3.1 3.1 0 0 0-1.57.48 3 3 0 0 0-.66.67c-.24.32-.4.77-.48 1.56-.1.82-.1 1.88-.1 3.4v1.6c0 1.15 0 2.04.05 2.76l.41-.42c.5-.5.93-.92 1.32-1.24.41-.33.86-.6 1.43-.7a3 3 0 0 1 .94 0c.35.06.66.2.95.37a17.11 17.11 0 0 0 .8.45c.1-.08.2-.2.41-.4l.04-.03a27 27 0 0 1 1.95-1.84 4.03 4.03 0 0 1 1.91-.94 4 4 0 0 1 1.25 0c.73.11 1.33.46 1.91.94l.64.55V9.2c0-1.52 0-2.58-.1-3.4a3.1 3.1 0 0 0-.48-1.56 3 3 0 0 0-.66-.67 3.1 3.1 0 0 0-1.56-.48C13.37 3 12.3 3 10.79 3h-1.6c-1.52 0-2.59 0-3.4.09Zm11.18 10-.04-.05a26.24 26.24 0 0 0-1.83-1.74c-.45-.36-.73-.48-.97-.52a2 2 0 0 0-.63 0c-.24.04-.51.16-.97.52-.46.38-1.01.93-1.83 1.74l-.02.02c-.17.18-.34.34-.49.47a2.04 2.04 0 0 1-1.08.5 1.97 1.97 0 0 1-1.25-.27l-.79-.46-.02-.02a.65.65 0 0 0-.24-.1 1 1 0 0 0-.31 0c-.08.02-.21.06-.49.28-.3.24-.65.59-1.2 1.14l-.56.56-.65.66a3 3 0 0 0 .62.6c.33.24.77.4 1.57.49.81.09 1.88.09 3.4.09h1.6c1.52 0 2.58 0 3.4-.09a3.1 3.1 0 0 0 1.56-.48 3 3 0 0 0 .66-.67c.24-.32.4-.77.49-1.56l.07-1.12Zm-8.02-1.03ZM4.99 7a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"
       clipRule="evenodd"

package/src/assets/svg/Off.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgOff = (props: SvgProps) => (
   <Svg viewBox="0 0 16 16" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M8 0a1 1 0 0 1 1 1v5.38a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1ZM5.26 2.6a1 1 0 0 1-.28 1.39 5.46 5.46 0 1 0 6.04 0 1 1 0 1 1 1.1-1.67 7.46 7.46 0 1 1-8.25 0 1 1 0 0 1 1.4.28Z"
       clipRule="evenodd"

package/src/assets/svg/Paperplane.tsx

@@ -5,7 +5,7 @@ const SvgPaperplane = (props: SvgProps) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M13.8808 2.34818C13.22 2.47804 12.3501 2.75876 11.0748 3.17302L8.50869 4.00652C6.40631 4.68941 4.90679 5.17786 3.88121 5.63184C3.37166 5.8574 3.0351 6.05097 2.82022 6.22041C2.61183 6.38473 2.57011 6.48493 2.55969 6.51823C2.48058 6.77109 2.48009 7.04201 2.55831 7.29515C2.56861 7.3285 2.60998 7.42884 2.81777 7.5939C3.03205 7.7641 3.36792 7.95887 3.87667 8.18624C4.79287 8.59572 6.08844 9.03414 7.85529 9.61644L10.3876 6.5986C10.7426 6.17553 11.3733 6.12034 11.7964 6.47534C12.2195 6.83035 12.2746 7.4611 11.9196 7.88418L9.38738 10.902C10.2676 12.5409 10.9244 13.7407 11.4867 14.5718C11.799 15.0334 12.0491 15.3303 12.2539 15.5118C12.4526 15.6878 12.5586 15.7111 12.5932 15.7154C12.8561 15.7485 13.1228 15.701 13.3581 15.5792C13.3891 15.5631 13.4805 15.5046 13.6061 15.2709C13.7357 15.0298 13.8679 14.6648 14.0015 14.1238C14.2705 13.035 14.4912 11.4734 14.7986 9.28438L15.1738 6.61255C15.3603 5.28462 15.4857 4.37923 15.4989 3.70596C15.512 3.03708 15.4047 2.80566 15.3145 2.69189C15.2044 2.55304 15.0673 2.43798 14.9114 2.35371C14.7837 2.28465 14.5372 2.21916 13.8808 2.34818ZM7.49373 11.603C5.61919 10.9864 4.1304 10.4903 3.0606 10.0122C2.48683 9.75574 1.9778 9.48086 1.57383 9.15998C1.16337 8.83395 0.813119 8.42178 0.647443 7.88557C0.449667 7.24547 0.450886 6.56041 0.65094 5.92102C0.818524 5.3854 1.17024 4.97448 1.58185 4.64992C1.98697 4.33047 2.49697 4.0574 3.07166 3.80301C4.20309 3.30217 5.80179 2.7829 7.82903 2.12443L10.5196 1.25048C11.7166 0.861654 12.7017 0.541645 13.4951 0.385722C14.3065 0.22624 15.1202 0.192948 15.8627 0.594428C16.2568 0.807527 16.6035 1.09845 16.8818 1.44956C17.4062 2.11106 17.5147 2.91821 17.4985 3.74503C17.4827 4.55338 17.3386 5.57909 17.1636 6.8254L16.7701 9.62688C16.4737 11.7377 16.2399 13.4023 15.9432 14.6035C15.7924 15.2136 15.6121 15.7633 15.3678 16.2177C15.1197 16.6794 14.7761 17.0972 14.2777 17.3552C13.6827 17.6632 13.0083 17.7834 12.3436 17.6998C11.7867 17.6297 11.32 17.3564 10.9277 17.0088C10.5415 16.6667 10.1824 16.2131 9.83023 15.6926C9.17361 14.7221 8.42648 13.342 7.49373 11.603Z"
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
     />
   </Svg>
 );

package/src/assets/svg/Plus.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgPlus = (props: SvgProps) => (
   <Svg viewBox="0 0 16 16" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M.282 8a1 1 0 0 1 1-1H7V1.282a1 1 0 1 1 2 0V7h5.717a1 1 0 1 1 0 2H9v5.717a1 1 0 1 1-2 0V9H1.282a1 1 0 0 1-1-1Z"
       clipRule="evenodd"

package/src/assets/svg/QrCode.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgQrCode = (props: SvgProps) => (
   <Svg viewBox="0 0 20 20" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M3 6a3 3 0 0 1 3-3h1a1 1 0 1 0 0-2H6a5 5 0 0 0-5 5v1a1 1 0 0 0 2 0V6ZM13 1a1 1 0 1 0 0 2h1a3 3 0 0 1 3 3v1a1 1 0 1 0 2 0V6a5 5 0 0 0-5-5h-1ZM3 13a1 1 0 1 0-2 0v1a5 5 0 0 0 5 5h1a1 1 0 1 0 0-2H6a3 3 0 0 1-3-3v-1ZM19 13a1 1 0 1 0-2 0v1a3 3 0 0 1-3 3h-1a1 1 0 1 0 0 2h1.01a5 5 0 0 0 5-5v-1ZM5.3 6.36c-.04.2-.04.43-.04.89s0 .7.05.89c.14.52.54.92 1.06 1.06.19.05.42.05.89.05.46 0 .7 0 .88-.05A1.5 1.5 0 0 0 9.2 8.14c.06-.2.06-.43.06-.89s0-.7-.06-.89A1.5 1.5 0 0 0 8.14 5.3c-.19-.05-.42-.05-.88-.05-.47 0-.7 0-.9.05a1.5 1.5 0 0 0-1.05 1.06ZM10.8 6.36c-.04.2-.04.43-.04.89s0 .7.05.89c.14.52.54.92 1.06 1.06.19.05.42.05.89.05.46 0 .7 0 .88-.05a1.5 1.5 0 0 0 1.06-1.06c.06-.2.06-.43.06-.89s0-.7-.06-.89a1.5 1.5 0 0 0-1.06-1.06c-.19-.05-.42-.05-.88-.05-.47 0-.7 0-.9.05a1.5 1.5 0 0 0-1.05 1.06ZM5.26 12.75c0-.46 0-.7.05-.89a1.5 1.5 0 0 1 1.06-1.06c.19-.05.42-.05.89-.05.46 0 .7 0 .88.05.52.14.93.54 1.06 1.06.06.2.06.43.06.89s0 .7-.06.89a1.5 1.5 0 0 1-1.06 1.06c-.19.05-.42.05-.88.05-.47 0-.7 0-.9-.05a1.5 1.5 0 0 1-1.05-1.06c-.05-.2-.05-.43-.05-.89ZM10.8 11.86c-.04.2-.04.43-.04.89s0 .7.05.89c.14.52.54.92 1.06 1.06.19.05.42.05.89.05.46 0 .7 0 .88-.05a1.5 1.5 0 0 0 1.06-1.06c.06-.2.06-.43.06-.89s0-.7-.06-.89a1.5 1.5 0 0 0-1.06-1.06c-.19-.05-.42-.05-.88-.05-.47 0-.7 0-.9.05a1.5 1.5 0 0 0-1.05 1.06Z"
       clipRule="evenodd"

package/src/assets/svg/RecycleHorizontal.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const RecycleHorizontalSvg = (props: SvgProps) => (
   <Svg viewBox="0 0 21 20" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M8.8071 0.292893C9.19763 0.683417 9.19763 1.31658 8.8071 1.70711L6.91421 3.6H11.8404C14.3368 3.6 16.5533 5.1975 17.3427 7.56588L17.4487 7.88377C17.6233 8.40772 17.3402 8.97404 16.8162 9.14868C16.2923 9.32333 15.726 9.04017 15.5513 8.51623L15.4453 8.19834C14.9281 6.64664 13.476 5.6 11.8404 5.6H6.91421L8.8071 7.49289C9.19763 7.88342 9.19763 8.51658 8.8071 8.90711C8.41658 9.29763 7.78341 9.29763 7.39289 8.90711L3.79289 5.30711C3.40236 4.91658 3.40236 4.28342 3.79289 3.89289L7.39289 0.292893C7.78341 -0.0976311 8.41658 -0.0976311 8.8071 0.292893ZM4.18377 10.8513C4.70771 10.6767 5.27403 10.9598 5.44868 11.4838L5.55464 11.8017C6.07188 13.3534 7.52401 14.4 9.15964 14.4L14.0858 14.4L12.1929 12.5071C11.8024 12.1166 11.8024 11.4834 12.1929 11.0929C12.5834 10.7024 13.2166 10.7024 13.6071 11.0929L17.2071 14.6929C17.5976 15.0834 17.5976 15.7166 17.2071 16.1071L13.6071 19.7071C13.2166 20.0976 12.5834 20.0976 12.1929 19.7071C11.8024 19.3166 11.8024 18.6834 12.1929 18.2929L14.0858 16.4L9.15964 16.4C6.66314 16.4 4.44674 14.8025 3.65728 12.4341L3.55131 12.1162C3.37667 11.5923 3.65983 11.026 4.18377 10.8513Z"
       clipRule="evenodd"

package/src/assets/svg/Refresh.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgRefresh = (props: SvgProps) => (
   <Svg viewBox="0 0 14 15" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M10.06 1.03a1 1 0 0 0-.7 1.23l.48 1.68a5.85 5.85 0 1 0 2.88 6.88 1 1 0 1 0-1.92-.58 3.86 3.86 0 1 1-1.82-4.49l-1.87.53a1 1 0 0 0 .55 1.92l4.1-1.15a1 1 0 0 0 .69-1.23l-1.16-4.1a1 1 0 0 0-1.23-.7Z"
       clipRule="evenodd"

package/src/assets/svg/Search.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgMagnifier = (props: SvgProps) => (
   <Svg viewBox="0 0 20 20" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M9.36 4.21a5.14 5.14 0 1 0 0 10.29 5.14 5.14 0 0 0 0-10.29ZM1.64 9.36a7.71 7.71 0 1 1 14 4.47l2.52 2.5a1.29 1.29 0 1 1-1.82 1.83l-2.51-2.51A7.71 7.71 0 0 1 1.65 9.36Z"
       clipRule="evenodd"

package/src/assets/svg/Settings.tsx

@@ -0,0 +1,12 @@
+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'}
+      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"
+    />
+  </Svg>
+);
+export default SvgSettings;

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/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>