@reown/appkit-ui-react-native 0.0.0-accounts-canary.1-20251023174733

package/src/assets/visual/Lightbulb.tsx

@@ -0,0 +1,54 @@
+import Svg, { ClipPath, Defs, G, Path, Rect, type SvgProps } from 'react-native-svg';
+const LightbulbSvg = (props: SvgProps) => (
+  <Svg width="64" height="64" viewBox="0 0 64 64" fill="none" {...props}>
+    <G clip-path="url(#clip0_241_31636)">
+      <Path
+        d="M0 26.5595C0 16.6913 0 11.7572 2.1019 8.07217C3.5216 5.58318 5.58366 3.52111 8.07266 2.10141C11.7577 -0.000488281 16.6918 -0.000488281 26.56 -0.000488281H37.44C47.3082 -0.000488281 52.2423 -0.000488281 55.9273 2.10141C58.4163 3.52111 60.4784 5.58318 61.8981 8.07217C64 11.7572 64 16.6913 64 26.5595V37.4395C64 47.3077 64 52.2418 61.8981 55.9269C60.4784 58.4159 58.4163 60.4779 55.9273 61.8976C52.2423 63.9995 47.3082 63.9995 37.44 63.9995H26.56C16.6918 63.9995 11.7577 63.9995 8.07266 61.8976C5.58366 60.4779 3.5216 58.4159 2.1019 55.9269C0 52.2418 0 47.3077 0 37.4395V26.5595Z"
+        fill="#794CFF"
+      />
+      <Path
+        d="M0.5 26.5595C0.5 21.6163 0.50047 17.942 0.760736 15.0418C1.02039 12.1485 1.53555 10.0742 2.53621 8.3199C3.91155 5.90869 5.90917 3.91106 8.32039 2.53572C10.0747 1.53506 12.1489 1.01991 15.0423 0.760247C17.9425 0.499981 21.6168 0.499512 26.56 0.499512H37.44C42.3832 0.499512 46.0575 0.499981 48.9577 0.760247C51.8511 1.01991 53.9253 1.53506 55.6796 2.53572C58.0908 3.91106 60.0885 5.90869 61.4638 8.3199C62.4645 10.0742 62.9796 12.1485 63.2393 15.0418C63.4995 17.942 63.5 21.6163 63.5 26.5595V37.4395C63.5 42.3827 63.4995 46.057 63.2393 48.9572C62.9796 51.8506 62.4645 53.9248 61.4638 55.6791C60.0885 58.0903 58.0908 60.088 55.6796 61.4633C53.9253 62.464 51.8511 62.9791 48.9577 63.2388C46.0575 63.499 42.3832 63.4995 37.44 63.4995H26.56C21.6168 63.4995 17.9425 63.499 15.0423 63.2388C12.1489 62.9791 10.0747 62.464 8.32039 61.4633C5.90917 60.088 3.91155 58.0903 2.53621 55.6791C1.53555 53.9248 1.02039 51.8506 0.760736 48.9572C0.50047 46.057 0.5 42.3827 0.5 37.4395V26.5595Z"
+        stroke="#141414"
+        strokeOpacity="0.1"
+      />
+      <Path
+        d="M40 39.4595C44.7824 36.693 48 31.5222 48 25.6C48 16.7634 40.8366 9.59998 32 9.59998C23.1634 9.59998 16 16.7634 16 25.6C16 31.5222 19.2176 36.693 24 39.4595V45.8144H40V39.4595Z"
+        fill="#906EF7"
+      />
+      <Path
+        d="M24 49.9689C24 51.8192 24 52.7444 24.3941 53.4353C24.6603 53.902 25.0469 54.2886 25.5136 54.5548C26.2046 54.9489 27.1297 54.9489 28.98 54.9489H35.02C36.8703 54.9489 37.7954 54.9489 38.4864 54.5548C38.9531 54.2886 39.3397 53.902 39.6059 53.4353C40 52.7444 40 51.8192 40 49.9689V45.8144H24V49.9689Z"
+        fill="#906EF7"
+      />
+      <Path
+        d="M24 45.8144V39.4595C19.2176 36.693 16 31.5222 16 25.6C16 16.7634 23.1634 9.59998 32 9.59998C40.8366 9.59998 48 16.7634 48 25.6C48 31.5222 44.7824 36.693 40 39.4595V45.8144M24 45.8144H40M24 45.8144V49.9689C24 51.8192 24 52.7444 24.3941 53.4353C24.6603 53.902 25.0469 54.2886 25.5136 54.5548C26.2046 54.9489 27.1297 54.9489 28.98 54.9489H35.02C36.8703 54.9489 37.7954 54.9489 38.4864 54.5548C38.9531 54.2886 39.3397 53.902 39.6059 53.4353C40 52.7444 40 51.8192 40 49.9689V45.8144"
+        stroke="white"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M24 49.9689C24 51.8192 24 52.7444 24.3941 53.4353C24.6603 53.902 25.0469 54.2886 25.5136 54.5548C26.2046 54.9489 27.1297 54.9489 28.98 54.9489H35.02C36.8703 54.9489 37.7954 54.9489 38.4864 54.5548C38.9531 54.2886 39.3397 53.902 39.6059 53.4353C40 52.7444 40 51.8192 40 49.9689V45.8144H24V49.9689Z"
+        fill="#643CDD"
+        stroke="white"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M29.6735 26.9101V29.1109H34.0753V26.9101C34.0753 25.6945 35.0607 24.7092 36.2762 24.7092C37.4917 24.7092 38.4771 25.6945 38.4771 26.9101C38.4771 28.1256 37.4917 29.1109 36.2762 29.1109H34.0753H29.6735H27.4726C26.2571 29.1109 25.2717 28.1256 25.2717 26.9101C25.2717 25.6945 26.2571 24.7092 27.4726 24.7092C28.6881 24.7092 29.6735 25.6945 29.6735 26.9101Z"
+        fill="#906EF7"
+      />
+      <Path
+        d="M29.6735 45.3183V26.9101C29.6735 25.6945 28.6881 24.7092 27.4726 24.7092V24.7092C26.2571 24.7092 25.2717 25.6945 25.2717 26.9101V26.9101C25.2717 28.1256 26.2571 29.1109 27.4726 29.1109H36.2762C37.4917 29.1109 38.4771 28.1256 38.4771 26.9101V26.9101C38.4771 25.6945 37.4917 24.7092 36.2762 24.7092V24.7092C35.0607 24.7092 34.0753 25.6945 34.0753 26.9101V45.3183"
+        stroke="white"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_241_31636">
+        <Rect width="64" height="64" fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export default LightbulbSvg;

package/src/assets/visual/Lock.tsx

@@ -0,0 +1,22 @@
+import Svg, { Path, Rect, type SvgProps } from 'react-native-svg';
+const SvgLock = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <Rect width="60" height="60" fill="#C653C6" rx="3" />
+    <Path
+      fill="#fff"
+      d="M20.03 15.22C20 15.6 20 16.07 20 17v2.8c0 1.14 0 1.7-.2 2.12-.15.31-.3.5-.58.71-.37.28-1.06.42-2.43.7-.59.12-1.11.29-1.6.51a9 9 0 0 0-4.35 4.36C10 30 10 32.34 10 37c0 4.66 0 7 .84 8.8a9 9 0 0 0 4.36 4.36C17 51 19.34 51 24 51h12c4.66 0 7 0 8.8-.84a9 9 0 0 0 4.36-4.36C50 44 50 41.66 50 37c0-4.66 0-7-.84-8.8a9 9 0 0 0-4.36-4.36c-.48-.22-1-.39-1.6-.5-1.36-.29-2.05-.43-2.42-.7-.27-.22-.43-.4-.58-.72-.2-.42-.2-.98-.2-2.11V17c0-.93 0-1.4-.03-1.78a9 9 0 0 0-8.19-8.19C31.4 7 30.93 7 30 7s-1.4 0-1.78.03a9 9 0 0 0-8.19 8.19Z"
+    />
+    <Path
+      fill="#E87DE8"
+      d="M22 17c0-.93 0-1.4.04-1.78a7 7 0 0 1 6.18-6.18C28.6 9 29.07 9 30 9s1.4 0 1.78.04a7 7 0 0 1 6.18 6.18c.04.39.04.85.04 1.78v4.5a1.5 1.5 0 0 1-3 0V17c0-.93 0-1.4-.08-1.78a4 4 0 0 0-3.14-3.14C31.39 12 30.93 12 30 12s-1.4 0-1.78.08a4 4 0 0 0-3.14 3.14c-.08.39-.08.85-.08 1.78v4.5a1.5 1.5 0 0 1-3 0V17Z"
+    />
+    <Path
+      fill="#E87DE8"
+      fillRule="evenodd"
+      d="M12 36.62c0-4.32 0-6.48.92-8.09a7 7 0 0 1 2.61-2.61C17.14 25 19.3 25 23.62 25h6.86c.46 0 .7 0 .9.02 2.73.22 4.37 2.43 4.62 4.98.27-2.7 2.11-5 5.02-5A6.98 6.98 0 0 1 48 31.98v5.4c0 4.32 0 6.48-.92 8.09a7 7 0 0 1-2.61 2.61c-1.61.92-3.77.92-8.09.92h-5.86c-.46 0-.7 0-.9-.02-2.73-.22-4.37-2.43-4.62-4.98-.26 2.58-1.94 4.82-4.71 4.99l-.7.01c-.55 0-.82 0-1.05-.02a7 7 0 0 1-6.52-6.52c-.02-.23-.02-.5-.02-1.05v-4.79Zm21.24-.27a4 4 0 1 0-6.48 0 31.28 31.28 0 0 1 1.57 2.23c.17.4.17.81.17 1.24V42.5a1.5 1.5 0 0 0 3 0V39.82c0-.43 0-.85.17-1.24.09-.2.58-.87 1.57-2.23Z"
+      clipRule="evenodd"
+    />
+    <Rect width="59" height="59" x=".5" y=".5" stroke="#fff" strokeOpacity=".1" rx="2.5" />
+  </Svg>
+);
+export default SvgLock;

package/src/assets/visual/Login.tsx

@@ -0,0 +1,29 @@
+import Svg, { Circle, ClipPath, Defs, G, Path, type SvgProps } from 'react-native-svg';
+const SvgLogin = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <G clipPath="url(#a)">
+      <Path
+        fill="#EB8B47"
+        d="M0 24.9c0-9.25 0-13.88 1.97-17.33a15 15 0 0 1 5.6-5.6C11.02 0 15.65 0 24.9 0h10.2c9.25 0 13.88 0 17.33 1.97a15 15 0 0 1 5.6 5.6C60 11.02 60 15.65 60 24.9v10.2c0 9.25 0 13.88-1.97 17.33a15 15 0 0 1-5.6 5.6C48.98 60 44.35 60 35.1 60H24.9c-9.25 0-13.88 0-17.33-1.97a15 15 0 0 1-5.6-5.6C0 48.98 0 44.35 0 35.1V24.9Z"
+      />
+      <Path
+        stroke="#062B2B"
+        strokeOpacity=".1"
+        d="M.5 24.9c0-4.64 0-8.08.24-10.8.25-2.7.73-4.65 1.66-6.28A14.5 14.5 0 0 1 7.82 2.4C9.46 1.47 11.39 1 14.1.74A133 133 0 0 1 24.9.5h10.2c4.63 0 8.08 0 10.8.24 2.7.25 4.65.73 6.28 1.66a14.5 14.5 0 0 1 5.42 5.42c.93 1.63 1.41 3.57 1.66 6.28.24 2.72.24 6.16.24 10.8v10.2c0 4.63 0 8.08-.24 10.8-.25 2.7-.73 4.64-1.66 6.28a14.5 14.5 0 0 1-5.42 5.41c-1.63.94-3.57 1.42-6.28 1.67-2.72.24-6.17.24-10.8.24H24.9c-4.63 0-8.08 0-10.8-.24-2.7-.25-4.64-.73-6.28-1.67a14.5 14.5 0 0 1-5.42-5.4C1.47 50.53 1 48.6.74 45.88A133 133 0 0 1 .5 35.1V24.9Z"
+      />
+      <Path
+        fill="#FF974C"
+        stroke="#fff"
+        strokeWidth="2"
+        d="M39.2 29.2a13 13 0 1 0-18.4 0l1.3 1.28a12.82 12.82 0 0 1 2.1 2.39 6 6 0 0 1 .6 1.47c.2.76.2 1.56.2 3.17v11.24c0 1.08 0 1.61.13 2.12a4 4 0 0 0 .41.98c.26.45.64.83 1.4 1.6l.3.29c.65.65.98.98 1.36 1.09.26.07.54.07.8 0 .38-.11.7-.44 1.36-1.1l3.48-3.47c.65-.65.98-.98 1.09-1.36a1.5 1.5 0 0 0 0-.8c-.1-.38-.44-.7-1.1-1.36l-.47-.48c-.65-.65-.98-.98-1.09-1.36a1.5 1.5 0 0 1 0-.8c.1-.38.44-.7 1.1-1.36l.47-.48c.65-.65.98-.98 1.09-1.36a1.5 1.5 0 0 0 0-.8c-.1-.38-.44-.7-1.1-1.36l-.48-.5c-.65-.64-.98-.97-1.08-1.35a1.5 1.5 0 0 1 0-.79c.1-.38.42-.7 1.06-1.36l5.46-5.55Z"
+      />
+      <Circle cx="30" cy="17" r="4" fill="#EB8B47" stroke="#fff" strokeWidth="2" />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M0 0h60v60H0z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default SvgLogin;

package/src/assets/visual/Network.tsx

@@ -0,0 +1,23 @@
+import Svg, { Circle, ClipPath, Defs, G, Rect, type SvgProps } from 'react-native-svg';
+const SvgNetwork = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <G clipPath="url(#a)">
+      <Rect width="60" height="60" fill="#00ACE6" rx="30" />
+      <Circle cx="64" cy="39" r="50" fill="#1AC6FF" stroke="#fff" strokeWidth="2" />
+      <Circle cx="78" cy="30" r="50" fill="#4DD2FF" stroke="#fff" strokeWidth="2" />
+      <Circle cx="72" cy="15" r="35" fill="#80DFFF" stroke="#fff" strokeWidth="2" />
+      <Circle cx="34" cy="-17" r="45" stroke="#fff" strokeWidth="2" />
+      <Circle cx="34" cy="-5" r="50" stroke="#fff" strokeWidth="2" />
+      <Circle cx="30" cy="45" r="4" fill="#4DD2FF" stroke="#fff" strokeWidth="2" />
+      <Circle cx="39.5" cy="27.5" r="4" fill="#80DFFF" stroke="#fff" strokeWidth="2" />
+      <Circle cx="16" cy="24" r="4" fill="#19C6FF" stroke="#fff" strokeWidth="2" />
+    </G>
+    <Rect width="59" height="59" x=".5" y=".5" stroke="#062B2B" strokeOpacity=".1" rx="29.5" />
+    <Defs>
+      <ClipPath id="a">
+        <Rect width="60" height="60" fill="#fff" rx="30" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default SvgNetwork;

package/src/assets/visual/Nft.tsx

@@ -0,0 +1,27 @@
+import Svg, { ClipPath, Defs, G, Path, Rect, type SvgProps } from 'react-native-svg';
+const SvgNft = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <G clipPath="url(#a)">
+      <Rect width="60" height="60" fill="#C653C6" rx="3" />
+      <Path
+        fill="#E87DE8"
+        stroke="#fff"
+        strokeWidth="2"
+        d="M52.1 47.34c0-4.24-1.44-9.55-5.9-12.4a2.86 2.86 0 0 0-1.6-3.89v-.82c0-1.19-.52-2.26-1.35-3a4.74 4.74 0 0 0-2.4-6.26v-5.5a11.31 11.31 0 1 0-22.63 0v2.15a3.34 3.34 0 0 0-1.18 5.05 4.74 4.74 0 0 0-.68 6.44A5.22 5.22 0 0 0 14 35.92c-3.06 4.13-6.1 8.3-6.1 15.64 0 2.67.37 4.86.74 6.39a20.3 20.3 0 0 0 .73 2.39l.02.04v.01l.92-.39-.92.4.26.6h38.26l.3-.49-.87-.51.86.5.02-.01.03-.07a16.32 16.32 0 0 0 .57-1.05c.36-.72.85-1.74 1.33-2.96a25.51 25.51 0 0 0 1.94-9.07Z"
+      />
+      <Path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M26.5 29.5c-3-.5-5.5-3-5.5-7v-7c0-.47 0-.7.03-.9a3 3 0 0 1 2.58-2.57c.2-.03.42-.03.89-.03 2 0 2.5-2.5 2.5-2.5s0 2.5 2.5 2.5c1.4 0 2.1 0 2.65.23a3 3 0 0 1 1.62 1.62c.23.55.23 1.25.23 2.65v6c0 4-3 7-6.5 7 1.35.23 4 0 6.5-2v9.53C34 38.5 31.5 40 28 40s-6-1.5-6-2.97L24 34l2.5 1.5v-6ZM26 47h4.5c2.5 0 3 4 3 5.5h-3l-1-1.5H26v-4Zm-6.25 5.5H24V57h-8c0-1 1-4.5 3.75-4.5Z"
+        clipRule="evenodd"
+      />
+    </G>
+    <Rect width="59" height="59" x=".5" y=".5" stroke="#fff" strokeOpacity=".1" rx="2.5" />
+    <Defs>
+      <ClipPath id="a">
+        <Rect width="60" height="60" fill="#fff" rx="3" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default SvgNft;

package/src/assets/visual/Noun.tsx

@@ -0,0 +1,19 @@
+import Svg, { Path, Rect, type SvgProps } from 'react-native-svg';
+const SvgNoun = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <Rect width="60" height="60" fill="#794CFF" rx="3" />
+    <Path
+      fill="#987DE8"
+      stroke="#fff"
+      strokeWidth="2"
+      d="M33 22.5v-1H16v5H8.5V36H13v-5h3v7.5h17V31h1v7.5h17v-17H34v5h-1v-4Z"
+    />
+    <Path fill="#fff" d="M37.5 25h10v10h-10z" />
+    <Path fill="#4019B2" d="M42.5 25h5v10h-5z" />
+    <Path fill="#fff" d="M19.5 25h10v10h-10z" />
+    <Path fill="#4019B2" d="M24.5 25h5v10h-5z" />
+    <Path fill="#fff" d="M12 30.5h4V37h-4v-6.5Z" />
+    <Rect width="59" height="59" x=".5" y=".5" stroke="#fff" strokeOpacity=".1" rx="2.5" />
+  </Svg>
+);
+export default SvgNoun;

package/src/assets/visual/Pencil.tsx

@@ -0,0 +1,80 @@
+import Svg, { ClipPath, Defs, G, Path, Rect, type SvgProps } from 'react-native-svg';
+
+const PencilSvg = (props: SvgProps) => (
+  <Svg width="64" height="64" viewBox="0 0 64 64" fill="none" {...props}>
+    <G clip-path="url(#clip0_241_31635)">
+      <Path
+        d="M0 26.5595C0 16.6913 0 11.7572 2.1019 8.07217C3.5216 5.58317 5.58366 3.52111 8.07266 2.10141C11.7577 -0.000488281 16.6918 -0.000488281 26.56 -0.000488281H37.44C47.3082 -0.000488281 52.2423 -0.000488281 55.9273 2.10141C58.4163 3.52111 60.4784 5.58317 61.8981 8.07217C64 11.7572 64 16.6913 64 26.5595V37.4395C64 47.3077 64 52.2418 61.8981 55.9268C60.4784 58.4158 58.4163 60.4779 55.9273 61.8976C52.2423 63.9995 47.3082 63.9995 37.44 63.9995H26.56C16.6918 63.9995 11.7577 63.9995 8.07266 61.8976C5.58366 60.4779 3.5216 58.4158 2.1019 55.9268C0 52.2418 0 47.3077 0 37.4395V26.5595Z"
+        fill="#EB8B47"
+      />
+      <Path
+        d="M0.5 26.5595C0.5 21.6163 0.50047 17.942 0.760736 15.0418C1.02039 12.1485 1.53555 10.0742 2.53621 8.3199C3.91155 5.90869 5.90917 3.91106 8.32039 2.53572C10.0747 1.53506 12.1489 1.01991 15.0423 0.760247C17.9425 0.499981 21.6168 0.499512 26.56 0.499512H37.44C42.3832 0.499512 46.0575 0.499981 48.9577 0.760247C51.8511 1.01991 53.9253 1.53506 55.6796 2.53572C58.0908 3.91106 60.0885 5.90869 61.4638 8.3199C62.4645 10.0742 62.9796 12.1485 63.2393 15.0418C63.4995 17.942 63.5 21.6163 63.5 26.5595V37.4395C63.5 42.3827 63.4995 46.057 63.2393 48.9572C62.9796 51.8506 62.4645 53.9248 61.4638 55.6791C60.0885 58.0903 58.0908 60.088 55.6796 61.4633C53.9253 62.464 51.8511 62.9791 48.9577 63.2388C46.0575 63.499 42.3832 63.4995 37.44 63.4995H26.56C21.6168 63.4995 17.9425 63.499 15.0423 63.2388C12.1489 62.9791 10.0747 62.464 8.32039 61.4633C5.90917 60.088 3.91155 58.0903 2.53621 55.6791C1.53555 53.9248 1.02039 51.8506 0.760736 48.9572C0.50047 46.057 0.5 42.3827 0.5 37.4395V26.5595Z"
+        stroke="#141414"
+        strokeOpacity="0.1"
+      />
+      <Path
+        d="M28.1042 49.2329L13.1024 51.2077L15.0772 36.2059L37.1015 14.1815C39.2441 12.039 40.3154 10.9677 41.5718 10.624C42.4205 10.3918 43.3159 10.3918 44.1645 10.624C45.421 10.9677 46.4922 12.039 48.6348 14.1815L50.1286 15.6753C52.2711 17.8179 53.3424 18.8891 53.6861 20.1456C53.9183 20.9942 53.9183 21.8896 53.6861 22.7383C53.3424 23.9947 52.2711 25.066 50.1286 27.2086L28.1042 49.2329Z"
+        fill="#FF974C"
+        stroke="#E4E7E7"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M38.5962 20.5376L22.4199 36.7139"
+        stroke="#E4E7E7"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M43.7727 25.714L27.5964 41.8903"
+        stroke="#E4E7E7"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M22.3703 36.7635C19.3258 39.808 16.0198 36.6395 16.2616 35.0324"
+        stroke="#E4E7E7"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M27.5466 41.9399C24.5034 44.9831 28.155 48.7098 29.2738 48.0475"
+        stroke="#E4E7E7"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M27.5468 41.9398C23.428 46.0586 18.2516 40.8822 22.3704 36.7634"
+        stroke="#E4E7E7"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M15.8191 50.5214C15.4711 49.5823 14.728 48.8392 13.7889 48.4912"
+        stroke="#E4E7E7"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M49.2862 29.5805L34.7275 15.0219"
+        stroke="#E4E7E7"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_241_31635">
+        <Rect width="64" height="64" fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export default PencilSvg;

package/src/assets/visual/Profile.tsx

@@ -0,0 +1,30 @@
+import Svg, { Circle, ClipPath, Defs, G, Path, Rect, type SvgProps } from 'react-native-svg';
+const SvgProfile = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <G clipPath="url(#a)">
+      <Rect width="60" height="60" fill="#00ACE6" rx="30" />
+      <Path
+        fill="#1AC6FF"
+        stroke="#fff"
+        strokeWidth="2"
+        d="M59 73a29 29 0 1 1-58 0c0-16.02 11-29 29-29s29 12.98 29 29ZM18.7 19.9a11 11 0 0 1 9.27-8.69c1.35-.19 2.7-.19 4.06 0a11 11 0 0 1 9.28 8.7c.18.86.32 1.74.44 2.62a11 11 0 0 1 0 2.94c-.12.88-.26 1.76-.44 2.63a11 11 0 0 1-9.28 8.69c-1.35.18-2.7.18-4.06 0a11 11 0 0 1-9.28-8.7c-.18-.86-.32-1.74-.44-2.62a11 11 0 0 1 0-2.94c.12-.88.26-1.76.44-2.63Z"
+      />
+      <Circle cx="24.5" cy="23.5" r="1.5" fill="#fff" />
+      <Circle cx="35.5" cy="23.5" r="1.5" fill="#fff" />
+      <Path
+        stroke="#fff"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="m31 20-3 8h4"
+      />
+    </G>
+    <Rect width="59" height="59" x=".5" y=".5" stroke="#fff" strokeOpacity=".1" rx="29.5" />
+    <Defs>
+      <ClipPath id="a">
+        <Rect width="60" height="60" fill="#fff" rx="30" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default SvgProfile;

package/src/assets/visual/System.tsx

@@ -0,0 +1,36 @@
+import Svg, { Circle, ClipPath, Defs, G, Path, type SvgProps } from 'react-native-svg';
+const SvgSystem = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <G clipPath="url(#a)">
+      <Path
+        fill="#794CFF"
+        d="M0 24.9c0-9.25 0-13.88 1.97-17.33a15 15 0 0 1 5.6-5.6C11.02 0 15.65 0 24.9 0h10.2c9.25 0 13.88 0 17.33 1.97a15 15 0 0 1 5.6 5.6C60 11.02 60 15.65 60 24.9v10.2c0 9.25 0 13.88-1.97 17.33a15 15 0 0 1-5.6 5.6C48.98 60 44.35 60 35.1 60H24.9c-9.25 0-13.88 0-17.33-1.97a15 15 0 0 1-5.6-5.6C0 48.98 0 44.35 0 35.1V24.9Z"
+      />
+      <Path
+        stroke="#062B2B"
+        strokeOpacity=".1"
+        d="M.5 24.9c0-4.64 0-8.08.24-10.8.25-2.7.73-4.65 1.66-6.28A14.5 14.5 0 0 1 7.82 2.4C9.46 1.47 11.39 1 14.1.74A133 133 0 0 1 24.9.5h10.2c4.63 0 8.08 0 10.8.24 2.7.25 4.65.73 6.28 1.66a14.5 14.5 0 0 1 5.42 5.42c.93 1.63 1.41 3.57 1.66 6.28.24 2.72.24 6.16.24 10.8v10.2c0 4.63 0 8.08-.24 10.8-.25 2.7-.73 4.64-1.66 6.28a14.5 14.5 0 0 1-5.42 5.41c-1.63.94-3.57 1.42-6.28 1.67-2.72.24-6.17.24-10.8.24H24.9c-4.63 0-8.08 0-10.8-.24-2.7-.25-4.64-.73-6.28-1.67a14.5 14.5 0 0 1-5.42-5.4C1.47 50.53 1 48.6.74 45.88A133 133 0 0 1 .5 35.1V24.9Z"
+      />
+      <Path
+        fill="#906EF7"
+        stroke="#fff"
+        strokeWidth="2"
+        d="M35.14 31.5a1.5 1.5 0 0 1 .7-1.33c.28-.17.64-.32.95-.4a1.5 1.5 0 0 1 1.45.42c.61.64 1.06 1.5 1.56 2.22.48.68 1.67.84 2.17.1.51-.78.97-1.69 1.6-2.37.37-.4.92-.56 1.44-.44.32.07.68.22.96.38.46.28.73.78.72 1.32-.02.9-.31 1.86-.47 2.75-.16.86.68 1.68 1.54 1.51.89-.17 1.83-.48 2.74-.52a1.5 1.5 0 0 1 1.33.7c.17.28.32.64.4.95a1.5 1.5 0 0 1-.42 1.45c-.64.61-1.5 1.06-2.22 1.56-.69.48-.84 1.67-.1 2.17.77.51 1.69.97 2.37 1.6.4.37.56.92.44 1.44a3.5 3.5 0 0 1-.38.95 1.5 1.5 0 0 1-1.32.73c-.91-.02-1.86-.31-2.75-.47-.86-.16-1.69.68-1.52 1.54.18.89.5 1.83.53 2.74a1.5 1.5 0 0 1-.7 1.33 3.5 3.5 0 0 1-.95.4 1.5 1.5 0 0 1-1.45-.42c-.61-.64-1.06-1.5-1.56-2.22-.48-.69-1.67-.84-2.17-.1-.51.77-.97 1.68-1.6 2.37-.37.4-.92.56-1.44.44a3.49 3.49 0 0 1-.96-.38 1.5 1.5 0 0 1-.72-1.32c.02-.91.31-1.86.47-2.75.16-.86-.69-1.69-1.54-1.52-.89.18-1.83.5-2.74.53a1.5 1.5 0 0 1-1.33-.7 3.5 3.5 0 0 1-.4-.95 1.5 1.5 0 0 1 .42-1.45c.64-.61 1.5-1.06 2.22-1.56.69-.48.84-1.67.1-2.17-.78-.52-1.69-.97-2.37-1.6a1.5 1.5 0 0 1-.44-1.44c.07-.32.22-.68.38-.96a1.5 1.5 0 0 1 1.32-.72c.9.02 1.86.31 2.75.47.86.16 1.68-.69 1.52-1.54-.18-.89-.5-1.83-.53-2.74Z"
+      />
+      <Path
+        fill="#906EF7"
+        stroke="#fff"
+        strokeWidth="2"
+        d="M20.77 8.22A1.5 1.5 0 0 1 22.24 7h1.52c.72 0 1.34.51 1.47 1.22.28 1.47.25 3.41 1.89 4.04l.56.23c1.6.72 2.96-.67 4.2-1.52.59-.4 1.39-.33 1.9.18l1.07 1.07c.5.51.58 1.31.17 1.9-.84 1.24-2.23 2.6-1.51 4.2l.23.56c.63 1.64 2.57 1.61 4.04 1.89.7.13 1.22.75 1.22 1.47v1.51a1.5 1.5 0 0 1-1.22 1.48c-1.47.27-3.41.25-4.04 1.89l-.23.56c-.72 1.6.67 2.96 1.52 4.2.4.59.33 1.39-.18 1.9l-1.07 1.07a1.5 1.5 0 0 1-1.9.17c-1.24-.84-2.6-2.23-4.2-1.51l-.56.23c-1.64.63-1.61 2.57-1.9 4.04A1.5 1.5 0 0 1 23.77 39h-1.52a1.5 1.5 0 0 1-1.47-1.22c-.28-1.47-.25-3.41-1.89-4.04l-.56-.23c-1.6-.72-2.96.67-4.2 1.51-.59.41-1.39.34-1.9-.17l-1.07-1.07a1.5 1.5 0 0 1-.17-1.9c.84-1.24 2.23-2.6 1.51-4.2l-.23-.56c-.63-1.64-2.57-1.62-4.04-1.9A1.5 1.5 0 0 1 7 23.76v-1.5c0-.73.51-1.35 1.22-1.48 1.47-.28 3.41-.25 4.04-1.89l.23-.56c.72-1.6-.67-2.96-1.52-4.2-.4-.59-.33-1.39.18-1.9l1.07-1.07a1.5 1.5 0 0 1 1.9-.18c1.24.85 2.6 2.24 4.2 1.52l.56-.23c1.64-.63 1.61-2.57 1.9-4.04Z"
+      />
+      <Circle cx="23" cy="23" r="6" fill="#794CFF" stroke="#fff" strokeWidth="2" />
+      <Circle cx="41" cy="41" r="4" fill="#794CFF" stroke="#fff" strokeWidth="2" />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M0 0h60v60H0z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default SvgSystem;

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { type StyleProp, type ViewStyle, View } from 'react-native';
+
+import { useTheme } from '../../hooks/useTheme';
+import styles from './styles';
+
+export interface CardProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Card({ children, style }: CardProps) {
+  const Theme = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: Theme['bg-100'], borderColor: Theme['gray-glass-015'] },
+        style
+      ]}
+    >
+      {children}
+    </View>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    borderRadius: BorderRadius.l,
+    borderWidth: 0.5,
+    borderBottomWidth: 0,
+    overflow: 'hidden'
+  }
+});

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

@@ -0,0 +1,162 @@
+import type { SvgProps } from 'react-native-svg';
+import type { ColorType, IconType, SizeType, ThemeKeys } from '../../utils/TypesUtil';
+
+// -- Svg's-------------------------------- //
+import AllWalletsSvg from '../../assets/svg/AllWallets';
+import AppleSvg from '../../assets/svg/Apple';
+import ArrowBottomSvg from '../../assets/svg/ArrowBottom';
+import ArrowBottomCircleSvg from '../../assets/svg/ArrowBottomCircle';
+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';
+import ChevronRightSvg from '../../assets/svg/ChevronRight';
+import ChevronRightSmallSvg from '../../assets/svg/ChevronRightSmall';
+import ChevronTopSvg from '../../assets/svg/ChevronTop';
+import ClockSvg from '../../assets/svg/Clock';
+import CloseSvg from '../../assets/svg/Close';
+import CompassSvg from '../../assets/svg/Compass';
+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';
+import EtherscanSvg from '../../assets/svg/Etherscan';
+import ExtensionSvg from '../../assets/svg/Extension';
+import ExternalLinkSvg from '../../assets/svg/ExternalLink';
+import FacebookSvg from '../../assets/svg/Facebook';
+import FarcasterSvg from '../../assets/svg/Farcaster';
+import FarcasterSquareSvg from '../../assets/svg/FarcasterSquare';
+import FiltersSvg from '../../assets/svg/Filters';
+import GithubSvg from '../../assets/svg/Github';
+import GoogleSvg from '../../assets/svg/Google';
+import HelpCircleSvg from '../../assets/svg/HelpCircle';
+import InfoCircleSvg from '../../assets/svg/InfoCircle';
+import MailSvg from '../../assets/svg/Mail';
+import MobileSvg from '../../assets/svg/Mobile';
+import MoreSvg from '../../assets/svg/More';
+import NetworkPlaceholderSvg from '../../assets/svg/NetworkPlaceholder';
+import NftPlaceholderSvg from '../../assets/svg/NftPlaceholder';
+import OffSvg from '../../assets/svg/Off';
+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';
+import SwapVerticalSvg from '../../assets/svg/SwapVertical';
+import TelegramSvg from '../../assets/svg/Telegram';
+import TwitchSvg from '../../assets/svg/Twitch';
+import VerifySvg from '../../assets/svg/Verify';
+import WalletConnectSvg, { WalletConnectLightBrownSvg } from '../../assets/svg/WalletConnect';
+import WalletSvg from '../../assets/svg/Wallet';
+import WalletSmallSvg from '../../assets/svg/WalletSmall';
+import WarningCircleSvg from '../../assets/svg/WarningCircle';
+import WalletPlaceholderSvg from '../../assets/svg/WalletPlaceholder';
+import XSvg from '../../assets/svg/X';
+import { useTheme } from '../../hooks/useTheme';
+import { IconSize } from '../../utils/ThemeUtil';
+
+const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
+  allWallets: AllWalletsSvg,
+  apple: AppleSvg,
+  arrowBottom: ArrowBottomSvg,
+  arrowBottomCircle: ArrowBottomCircleSvg,
+  arrowLeft: ArrowLeftSvg,
+  arrowRight: ArrowRightSvg,
+  arrowTop: ArrowTopSvg,
+  browser: BrowserSvg,
+  card: CardSvg,
+  checkmark: CheckmarkSvg,
+  chevronBottom: ChevronBottomSvg,
+  chevronLeft: ChevronLeftSvg,
+  chevronRight: ChevronRightSvg,
+  chevronRightSmall: ChevronRightSmallSvg,
+  chevronTop: ChevronTopSvg,
+  clock: ClockSvg,
+  close: CloseSvg,
+  compass: CompassSvg,
+  coinPlaceholder: CoinPlaceholderSvg,
+  copy: CopySvg,
+  copySmall: CopySmallSvg,
+  cursor: CursorSvg,
+  currencyDollar: CurrencyDollarSvg,
+  desktop: DesktopSvg,
+  disconnect: DisconnectSvg,
+  discord: DiscordSvg,
+  email: MailSvg,
+  etherscan: EtherscanSvg,
+  extension: ExtensionSvg,
+  externalLink: ExternalLinkSvg,
+  facebook: FacebookSvg,
+  farcaster: FarcasterSvg,
+  farcasterSquare: FarcasterSquareSvg,
+  filters: FiltersSvg,
+  github: GithubSvg,
+  google: GoogleSvg,
+  helpCircle: HelpCircleSvg,
+  infoCircle: InfoCircleSvg,
+  mobile: MobileSvg,
+  more: MoreSvg,
+  networkPlaceholder: NetworkPlaceholderSvg,
+  nftPlaceholder: NftPlaceholderSvg,
+  off: OffSvg,
+  paperplane: PaperplaneSvg,
+  qrCode: QrCodeSvg,
+  recycleHorizontal: RecycleHorizontalSvg,
+  refresh: RefreshSvg,
+  reown: ReownSvg,
+  search: SearchSvg,
+  settings: SettingsSvg,
+  swapHorizontal: SwapHorizontalSvg,
+  swapVertical: SwapVerticalSvg,
+  telegram: TelegramSvg,
+  twitch: TwitchSvg,
+  verify: VerifySvg,
+  wallet: WalletSvg,
+  walletSmall: WalletSmallSvg,
+  warningCircle: WarningCircleSvg,
+  walletConnect: WalletConnectSvg,
+  walletConnectLightBrown: WalletConnectLightBrownSvg,
+  walletPlaceholder: WalletPlaceholderSvg,
+  x: XSvg
+};
+
+export type IconProps = SvgProps & {
+  name: IconType;
+  size?: SizeType;
+  color?: ColorType;
+  style?: SvgProps['style'];
+};
+
+export function Icon({
+  name,
+  width,
+  height,
+  color = 'fg-100',
+  size = 'md',
+  style,
+  ...rest
+}: IconProps) {
+  const Theme = useTheme();
+  const Component = svgOptions[name];
+
+  return (
+    <Component
+      fill={Theme[color as ThemeKeys]}
+      width={width || IconSize[size]}
+      height={height || IconSize[size]}
+      style={style}
+      {...rest}
+    />
+  );
+}

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

@@ -0,0 +1,38 @@
+import { useRef } from 'react';
+import {
+  Animated,
+  Image as NativeImage,
+  type ImageProps as NativeProps,
+  Platform
+} from 'react-native';
+import styles from './styles';
+
+export type ImageProps = Omit<NativeProps, 'source'> & {
+  source: string;
+  headers?: Record<string, string>;
+};
+
+export function Image({ source, headers, style, ...rest }: ImageProps) {
+  const opacity = useRef(new Animated.Value(0));
+  const isIos = Platform.OS === 'ios';
+
+  // Fade in image on load for iOS. Android does this by default.
+  const onLoadEnd = () => {
+    Animated.timing(opacity.current, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: true
+    }).start();
+  };
+
+  return isIos ? (
+    <Animated.Image
+      source={{ uri: source, headers }}
+      onLoadEnd={onLoadEnd}
+      style={[styles.image, { opacity: opacity.current }, style]}
+      {...rest}
+    />
+  ) : (
+    <NativeImage source={{ uri: source, headers }} style={[styles.image, style]} {...rest} />
+  );
+}

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

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  image: {
+    width: 150,
+    height: 150
+  }
+});

package/src/components/wui-loading-hexagon/index.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useMemo, useRef, type ReactNode } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import Svg, { Path, Use } from 'react-native-svg';
+import { useTheme } from '../../hooks/useTheme';
+import styles from './styles';
+
+const AnimatedUse = Animated.createAnimatedComponent(Use);
+
+const HEXAGON_PATH =
+  'M17.22 5.295c3.877-2.277 5.737-3.363 7.72-3.726a11.44 11.44 0 0 1 4.12 0c1.983.363 3.844 1.45 7.72 3.726l6.065 3.562c3.876 2.276 5.731 3.372 7.032 4.938a11.896 11.896 0 0 1 2.06 3.63c.683 1.928.688 4.11.688 8.663v7.124c0 4.553-.005 6.735-.688 8.664a11.896 11.896 0 0 1-2.06 3.63c-1.3 1.565-3.156 2.66-7.032 4.937l-6.065 3.563c-3.877 2.276-5.737 3.362-7.72 3.725a11.46 11.46 0 0 1-4.12 0c-1.983-.363-3.844-1.449-7.72-3.726l-6.065-3.562c-3.876-2.276-5.731-3.372-7.032-4.938a11.885 11.885 0 0 1-2.06-3.63c-.682-1.928-.688-4.11-.688-8.663v-7.124c0-4.553.006-6.735.688-8.664a11.885 11.885 0 0 1 2.06-3.63c1.3-1.565 3.156-2.66 7.032-4.937l6.065-3.562Z';
+
+export interface LoadingHexagonProps {
+  children?: ReactNode;
+  paused?: boolean;
+}
+
+export function LoadingHexagon({ children, paused }: LoadingHexagonProps) {
+  const Theme = useTheme();
+  const spinValue = useRef(new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.timing(spinValue.current, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: true,
+      easing: Easing.linear
+    });
+
+    const loop = Animated.loop(animation);
+    loop.start();
+
+    return () => {
+      loop.stop();
+    };
+  }, []);
+
+  const spin = useMemo(() => {
+    return spinValue.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, -172]
+    });
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Svg width={120} height={120} viewBox="0 0 54 59" style={styles.loader} fill="none">
+        <Path id="wui-loader-path" d={HEXAGON_PATH} />
+        <AnimatedUse
+          stroke={paused ? 'transparent' : Theme['accent-100']}
+          strokeDasharray="54, 118"
+          strokeWidth={2}
+          strokeDashoffset={spin}
+          xlinkHref="#wui-loader-path"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+      </Svg>
+      {children ?? null}
+    </View>
+  );
+}