@reown/appkit-ui-react-native 2.0.0-alpha.1 → 2.0.0-alpha.3

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/Reown.tsx

@@ -0,0 +1,40 @@
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+const SvgReown = (props: SvgProps) => (
+  <Svg viewBox="0 0 60 16" fill="none" {...props}>
+    <Path
+      d="M9.3335 4.66667C9.3335 2.08934 11.4229 0 14.0002 0H20.6669C23.2442 0 25.3335 2.08934 25.3335 4.66667V11.3333C25.3335 13.9106 23.2442 16 20.6669 16H14.0002C11.4229 16 9.3335 13.9106 9.3335 11.3333V4.66667Z"
+      fill="#363636"
+    />
+    <Path d="M15.6055 11.0003L17.9448 4.66699H18.6316L16.2923 11.0003H15.6055Z" fill="#F6F6F6" />
+    <Path
+      d="M0 4.33333C0 1.9401 1.9401 0 4.33333 0C6.72657 0 8.66669 1.9401 8.66669 4.33333V11.6667C8.66669 14.0599 6.72657 16 4.33333 16C1.9401 16 0 14.0599 0 11.6667V4.33333Z"
+      fill="#363636"
+    />
+    <Path d="M3.9165 9.99934V9.16602H4.74983V9.99934H3.9165Z" fill="#F6F6F6" />
+    <Path
+      d="M26 8C26 3.58172 29.3517 0 33.4863 0H52.5137C56.6483 0 60 3.58172 60 8C60 12.4183 56.6483 16 52.5137 16H33.4863C29.3517 16 26 12.4183 26 8Z"
+      fill="#363636"
+    />
+    <Path
+      d="M49.3687 9.95834V6.26232H50.0213V6.81966C50.256 6.40899 50.7326 6.16699 51.2606 6.16699C52.0599 6.16699 52.6173 6.67299 52.6173 7.65566V9.95834H51.972V7.69234C51.972 7.04696 51.6053 6.70966 51.07 6.70966C50.4906 6.70966 50.0213 7.17168 50.0213 7.82433V9.95834H49.3687Z"
+      fill="#F6F6F6"
+    />
+    <Path
+      d="M45.2538 9.95773L44.5718 6.26172H45.1877L45.6717 9.31242L46.3098 7.30306H46.9184L47.5491 9.29041L48.0404 6.26172H48.6564L47.9744 9.95773H47.2411L46.6178 8.03641L45.9871 9.95773H45.2538Z"
+      fill="#F6F6F6"
+    />
+    <Path
+      d="M42.3709 10.0536C41.2489 10.0536 40.5889 9.21765 40.5889 8.1103C40.5889 7.01035 41.2489 6.16699 42.3709 6.16699C43.4929 6.16699 44.1529 7.01035 44.1529 8.1103C44.1529 9.21765 43.4929 10.0536 42.3709 10.0536ZM42.3709 9.51096C43.1775 9.51096 43.4856 8.82164 43.4856 8.10296C43.4856 7.39163 43.1775 6.70966 42.3709 6.70966C41.5642 6.70966 41.2562 7.39163 41.2562 8.10296C41.2562 8.82164 41.5642 9.51096 42.3709 9.51096Z"
+      fill="#F6F6F6"
+    />
+    <Path
+      d="M38.2805 10.0536C37.1952 10.0536 36.5132 9.22499 36.5132 8.1103C36.5132 7.00302 37.1952 6.16699 38.2805 6.16699C39.1972 6.16699 40.0038 6.68766 39.9159 8.27896H37.1805C37.2319 8.96103 37.5472 9.5183 38.2805 9.5183C38.7718 9.5183 39.0945 9.21765 39.2045 8.87299H39.8499C39.7472 9.48903 39.1679 10.0536 38.2805 10.0536ZM37.1952 7.78765H39.2852C39.2338 7.04696 38.8892 6.70232 38.2805 6.70232C37.6132 6.70232 37.2832 7.18635 37.1952 7.78765Z"
+      fill="#F6F6F6"
+    />
+    <Path
+      d="M33.3828 9.95773V6.26172H34.0501V6.88506C34.2848 6.47439 34.6882 6.26172 35.1061 6.26172H35.9935V6.88506H35.0548C34.4682 6.88506 34.0501 7.26638 34.0501 8.00706V9.95773H33.3828Z"
+      fill="#F6F6F6"
+    />
+  </Svg>
+);
+export default SvgReown;

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

@@ -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/components/wui-card/styles.ts

@@ -5,6 +5,7 @@ export default StyleSheet.create({
   container: {
     borderRadius: BorderRadius.l,
     borderWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 0,
     overflow: 'hidden'
   }
 });

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

@@ -49,6 +49,7 @@ import PaperplaneSvg from '../../assets/svg/Paperplane';
 import QrCodeSvg from '../../assets/svg/QrCode';
 import RecycleHorizontalSvg from '../../assets/svg/RecycleHorizontal';
 import RefreshSvg from '../../assets/svg/Refresh';
+import ReownSvg from '../../assets/svg/Reown';
 import SearchSvg from '../../assets/svg/Search';
 import SettingsSvg from '../../assets/svg/Settings';
 import SwapHorizontalSvg from '../../assets/svg/SwapHorizontal';
@@ -92,6 +93,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   desktop: DesktopSvg,
   disconnect: DisconnectSvg,
   discord: DiscordSvg,
+  email: MailSvg,
   etherscan: EtherscanSvg,
   extension: ExtensionSvg,
   externalLink: ExternalLinkSvg,
@@ -103,7 +105,6 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   google: GoogleSvg,
   helpCircle: HelpCircleSvg,
   infoCircle: InfoCircleSvg,
-  mail: MailSvg,
   mobile: MobileSvg,
   more: MoreSvg,
   networkPlaceholder: NetworkPlaceholderSvg,
@@ -113,6 +114,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   qrCode: QrCodeSvg,
   recycleHorizontal: RecycleHorizontalSvg,
   refresh: RefreshSvg,
+  reown: ReownSvg,
   search: SearchSvg,
   settings: SettingsSvg,
   swapHorizontal: SwapHorizontalSvg,

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

@@ -0,0 +1,139 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  useWindowDimensions,
+  Modal as RNModal,
+  type ModalProps as RNModalProps,
+  TouchableOpacity,
+  Animated
+} from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import styles from './styles';
+
+export type ModalProps = Pick<
+  RNModalProps,
+  'visible' | 'onDismiss' | 'testID' | 'onRequestClose'
+> & {
+  children: React.ReactNode;
+  onBackdropPress?: () => void;
+};
+
+export function Modal({ visible, onBackdropPress, onRequestClose, testID, children }: ModalProps) {
+  const Theme = useTheme();
+  const { height } = useWindowDimensions();
+
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(height)).current;
+  const [showBackdrop, setShowBackdrop] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  const onContentLayout = (event: any) => {
+    const { height: measuredHeight } = event.nativeEvent.layout;
+    setContentHeight(measuredHeight);
+  };
+
+  // Handle modal visibility
+  useEffect(() => {
+    if (visible) {
+      setModalVisible(true);
+      setShowBackdrop(true);
+    }
+  }, [visible]);
+
+  // Handle backdrop animation
+  useEffect(() => {
+    let backdropAnimation: Animated.CompositeAnimation;
+
+    if (visible) {
+      backdropAnimation = Animated.timing(backdropOpacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true
+      });
+      backdropAnimation.start();
+    } else if (modalVisible) {
+      backdropAnimation = Animated.timing(backdropOpacity, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true
+      });
+      backdropAnimation.start(() => {
+        setShowBackdrop(false);
+      });
+    }
+
+    return () => {
+      backdropAnimation?.stop();
+    };
+  }, [visible, modalVisible, backdropOpacity]);
+
+  // Handle modal position animation + visibility
+  useEffect(() => {
+    let modalAnimation: Animated.CompositeAnimation;
+
+    if (visible && modalVisible) {
+      // Calculate the target position (screen height - card height)
+      const targetY = contentHeight > 0 ? height - contentHeight : height * 0.2; // fallback to 20% from bottom
+
+      modalAnimation = Animated.spring(translateY, {
+        toValue: targetY,
+        damping: 25,
+        stiffness: 220,
+        mass: 1,
+        useNativeDriver: true
+      });
+      modalAnimation.start();
+    } else if (!visible && modalVisible) {
+      // Hide modal to the bottom of the screen. Not using spring as it blocks the UI for a bit when closed
+      modalAnimation = Animated.timing(translateY, {
+        toValue: height,
+        duration: 150,
+        useNativeDriver: true
+      });
+      modalAnimation.start(() => {
+        setModalVisible(false);
+      });
+    }
+
+    return () => {
+      modalAnimation?.stop();
+    };
+  }, [visible, modalVisible, translateY, height, contentHeight]);
+
+  // Reset animation values when modal is fully closed
+  useEffect(() => {
+    if (!modalVisible) {
+      translateY.setValue(height);
+      backdropOpacity.setValue(0);
+    }
+  }, [modalVisible, translateY, backdropOpacity, height]);
+
+  return (
+    <>
+      {showBackdrop ? (
+        <Animated.View style={[styles.outerBackdrop, { opacity: backdropOpacity }]} />
+      ) : null}
+      <RNModal
+        visible={modalVisible}
+        transparent
+        animationType="none"
+        statusBarTranslucent
+        onRequestClose={onRequestClose}
+        testID={testID}
+      >
+        {showBackdrop ? (
+          <TouchableOpacity
+            style={styles.innerBackdropTouchable}
+            activeOpacity={1}
+            onPress={onBackdropPress}
+          />
+        ) : null}
+        <Animated.View
+          style={[styles.modal, { backgroundColor: Theme['bg-100'], transform: [{ translateY }] }]}
+        >
+          <Animated.View onLayout={onContentLayout}>{children}</Animated.View>
+        </Animated.View>
+      </RNModal>
+    </>
+  );
+}

package/src/components/wui-modal/styles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  outerBackdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  innerBackdropTouchable: {
+    flexGrow: 1
+  },
+  modal: {
+    borderTopLeftRadius: BorderRadius.l,
+    borderTopRightRadius: BorderRadius.l,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});

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

@@ -114,11 +114,11 @@ export function AccountButton({
           borderWidth={2}
           style={[styles.image, !avatarSrc && styles.avatarPlaceholder]}
         />
-        {address && (
+        {address ? (
           <Text variant="paragraph-500" color="fg-200" style={styles.address}>
             {formattedAddress}
           </Text>
-        )}
+        ) : null}
       </View>
     </AnimatedPressable>
   );

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

@@ -90,15 +90,15 @@ export function Button({
       {...rest}
     >
       <FlexView flexDirection="row" alignItems="center" justifyContent="center">
-        {iconLeft && (
+        {iconLeft ? (
           <Icon
             color={iconColor}
             name={iconLeft}
             size={iconSize}
             style={[styles.iconLeft, iconStyle]}
           />
-        )}
-        {loading && <LoadingSpinner color={iconColor} size="md" />}
+        ) : null}
+        {loading ? <LoadingSpinner color={iconColor} size="md" /> : null}
         {!loading &&
           (typeof children === 'string' ? (
             <Text
@@ -110,14 +110,14 @@ export function Button({
           ) : (
             children
           ))}
-        {iconRight && (
+        {iconRight ? (
           <Icon
             color={iconColor}
             name={iconRight}
             size={iconSize}
             style={[styles.iconRight, iconStyle]}
           />
-        )}
+        ) : null}
       </FlexView>
     </AnimatedPressable>
   );

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

@@ -86,7 +86,7 @@ function _CardSelect({
           imageSrc={imageSrc}
           imageHeaders={imageHeaders}
           size="md"
-          style={disabled && styles.disabledImage}
+          style={disabled ? styles.disabledImage : null}
           selected={selected}
           disabled={disabled}
         />

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

@@ -80,7 +80,7 @@ export function Chip({
       onPressOut={onPressOut}
       onPress={handlePress}
     >
-      {imageSrc && (
+      {imageSrc ? (
         <Image
           style={[
             styles.image,
@@ -90,22 +90,22 @@ export function Chip({
           ]}
           source={imageSrc}
         />
-      )}
-      {leftIcon && <Icon name={leftIcon} color={themedTextColor as ColorType} />}
+      ) : null}
+      {leftIcon ? <Icon name={leftIcon} color={themedTextColor as ColorType} /> : null}
       <Text
         variant={size === 'md' ? 'paragraph-600' : 'small-600'}
         style={[styles.link, { color: Theme[themedTextColor] }]}
       >
         {label}
       </Text>
-      {rightIcon && (
+      {rightIcon ? (
         <Icon
           name={rightIcon}
           size={iconSize}
           color={themedTextColor as ColorType}
           style={styles.icon}
         />
-      )}
+      ) : null}
     </AnimatedPressable>
   );
 }

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-email-input/index.tsx

@@ -84,7 +84,7 @@ export function EmailInput({
     return (
       <RightIcon
         loading={loading}
-        showChevron={submitEnabled && !errorMessage}
+        showChevron={submitEnabled ? !errorMessage : false}
         onPress={handleChevronPress}
       />
     );
@@ -93,7 +93,7 @@ export function EmailInput({
   return (
     <View style={style}>
       <InputText
-        icon="mail"
+        icon="email"
         placeholder="Email"
         size="md"
         onSubmitEditing={handleSubmitEditing}
@@ -107,11 +107,11 @@ export function EmailInput({
       >
         {rightIconTemplate()}
       </InputText>
-      {errorMessage && (
+      {errorMessage ? (
         <Text color="error-100" variant="tiny-500" style={styles.text}>
           {errorMessage}
         </Text>
-      )}
+      ) : null}
     </View>
   );
 }

package/src/composites/wui-input-text/index.tsx

@@ -113,7 +113,7 @@ export const InputText = forwardRef<InputRef, InputTextProps>(
               disabled && { backgroundColor: Theme['gray-glass-002'] }
             ]}
           >
-            {icon && <Icon name={icon} size="md" color="fg-275" style={styles.icon} />}
+            {icon ? <Icon name={icon} size="md" color="fg-275" style={styles.icon} /> : null}
             <TextInput
               ref={inputRef}
               onFocus={handleFocus}

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

@@ -54,15 +54,15 @@ export function Link({
       {...rest}
     >
       <FlexView flexDirection="row" alignItems="center" justifyContent="center">
-        {iconLeft && (
+        {iconLeft ? (
           <Icon color={_color} name={iconLeft} size={iconSize} style={styles.iconLeft} />
-        )}
+        ) : null}
         <Text variant={size === 'md' ? 'paragraph-600' : 'small-600'} color={_color}>
           {children}
         </Text>
-        {iconRight && (
+        {iconRight ? (
           <Icon color={_color} name={iconRight} size={iconSize} style={styles.iconRight} />
-        )}
+        ) : null}
       </FlexView>
     </AnimatedPressable>
   );