@reown/appkit-ui-react-native 0.0.0-canary-20240912195440

package/src/assets/svg/TwitterIcon.tsx

@@ -0,0 +1,10 @@
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+const SvgTwitter = (props: SvgProps) => (
+  <Svg viewBox="0 0 16 16" fill="none" {...props}>
+    <Path
+      fill={props.fill || '#fff'}
+      d="m14.36 4.74.01.42c0 4.34-3.3 9.34-9.34 9.34A9.3 9.3 0 0 1 0 13.03a6.6 6.6 0 0 0 4.86-1.36 3.29 3.29 0 0 1-3.07-2.28c.5.1 1 .07 1.48-.06A3.28 3.28 0 0 1 .64 6.11v-.04c.46.26.97.4 1.49.41A3.29 3.29 0 0 1 1.11 2.1a9.32 9.32 0 0 0 6.77 3.43 3.28 3.28 0 0 1 5.6-3 6.59 6.59 0 0 0 2.08-.8 3.3 3.3 0 0 1-1.45 1.82A6.53 6.53 0 0 0 16 3.04c-.44.66-1 1.23-1.64 1.7Z"
+    />
+  </Svg>
+);
+export default SvgTwitter;

package/src/assets/svg/Verify.tsx

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

package/src/assets/svg/Wallet.tsx

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

package/src/assets/svg/WalletConnect.tsx

@@ -0,0 +1,15 @@
+import Svg, { 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'}
+      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
+      stroke="#000"
+      strokeOpacity=".1"
+      d="M25.67 19.15a32.06 32.06 0 0 1 44.66 0l1.5 1.48c.43.42.43 1.09 0 1.5l-5.15 5.05a.31.31 0 0 1-.44 0l-2.07-2.03a23.21 23.21 0 0 0-32.34 0l-2.22 2.18a.31.31 0 0 1-.44 0l-5.15-5.05a1.05 1.05 0 0 1 0-1.5l1.65-1.63ZM81 29.6l4.6 4.5c.42.41.42 1.09 0 1.5l-20.7 20.26c-.43.43-1.14.43-1.57 0L48.63 41.47a.9.9 0 0 0-1.26 0L32.68 55.85c-.43.43-1.14.43-1.57 0L10.42 35.6a1.05 1.05 0 0 1 0-1.5l4.59-4.5a1.13 1.13 0 0 1 1.57 0l14.68 14.38a.9.9 0 0 0 1.27 0l-.35-.35.35.35L47.22 29.6a1.13 1.13 0 0 1 1.56 0l14.7 14.38a.9.9 0 0 0 1.26 0L79.42 29.6a1.13 1.13 0 0 1 1.57 0Z"
+    />
+  </Svg>
+);
+export default SvgWalletConnect;

package/src/assets/svg/WalletPlaceholder.tsx

@@ -0,0 +1,22 @@
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+import { useTheme } from '../../hooks/useTheme';
+
+const SvgWalletPlaceholder = (props: SvgProps) => {
+  const Theme = useTheme();
+
+  return (
+    <Svg fill="none" viewBox="0 0 48 44" {...props}>
+      <Path
+        fill="none"
+        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']}
+        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"
+      />
+    </Svg>
+  );
+};
+export default SvgWalletPlaceholder;

package/src/assets/svg/WalletSmall.tsx

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

package/src/assets/svg/WarningCircle.tsx

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

package/src/assets/visual/Browser.tsx

@@ -0,0 +1,24 @@
+import Svg, { Circle, Path, Rect, type SvgProps } from 'react-native-svg';
+const SvgBrowser = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <Rect width="60" height="60" fill="#1DC956" rx="30" />
+    <Circle cx="30" cy="30" r="3" fill="#fff" />
+    <Path
+      fill="#2BEE6C"
+      stroke="#fff"
+      strokeWidth="2"
+      d="m45.32 17.9-.88-.42.88.42.02-.05c.1-.2.21-.44.26-.7l-.82-.15.82.16a2 2 0 0 0-.24-1.4c-.13-.23-.32-.42-.47-.57a8.42 8.42 0 0 1-.04-.04l-.04-.04a2.9 2.9 0 0 0-.56-.47l-.51.86.5-.86a2 2 0 0 0-1.4-.24c-.26.05-.5.16-.69.26l-.05.02-15.05 7.25-.1.05c-1.14.55-1.85.89-2.46 1.37a7 7 0 0 0-1.13 1.14c-.5.6-.83 1.32-1.38 2.45l-.05.11-7.25 15.05-.02.05c-.1.2-.21.43-.26.69a2 2 0 0 0 .24 1.4l.85-.5-.85.5c.13.23.32.42.47.57l.04.04.04.04c.15.15.34.34.56.47a2 2 0 0 0 1.41.24l-.2-.98.2.98c.25-.05.5-.17.69-.26l.05-.02-.42-.87.42.87 15.05-7.25.1-.05c1.14-.55 1.85-.89 2.46-1.38a7 7 0 0 0 1.13-1.13 12.87 12.87 0 0 0 1.43-2.56l7.25-15.05Z"
+    />
+    <Path
+      fill="#1DC956"
+      d="M33.38 32.72 30.7 29.3 15.86 44.14l.2.2a1 1 0 0 0 1.14.2l15.1-7.27a3 3 0 0 0 1.08-4.55Z"
+    />
+    <Path
+      fill="#86F999"
+      d="m26.62 27.28 2.67 3.43 14.85-14.85-.2-.2a1 1 0 0 0-1.14-.2l-15.1 7.27a3 3 0 0 0-1.08 4.55Z"
+    />
+    <Circle cx="30" cy="30" r="3" fill="#fff" transform="rotate(45 30 30)" />
+    <Rect width="59" height="59" x=".5" y=".5" stroke="#062B2B" strokeOpacity=".1" rx="29.5" />
+  </Svg>
+);
+export default SvgBrowser;

package/src/assets/visual/Dao.tsx

@@ -0,0 +1,48 @@
+import Svg, { Circle, ClipPath, Defs, G, Path, type SvgProps } from 'react-native-svg';
+const SvgDao = (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="M19 52a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z"
+      />
+      <Path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M42.84 8.33a1 1 0 0 0-1.68 0L28.98 27.46a1 1 0 0 0 .84 1.54h24.36a1 1 0 0 0 .84-1.54L42.84 8.33Z"
+        clipRule="evenodd"
+      />
+      <Path
+        fill="#FF974C"
+        fillRule="evenodd"
+        d="M42.33 11.65c.33.11.58.5 1.07 1.28l7.33 11.52c.57.88.85 1.32.8 1.69a1 1 0 0 1-.35.62c-.28.24-.8.24-1.85.24H34.67c-1.05 0-1.57 0-1.85-.24a1 1 0 0 1-.35-.62c-.05-.37.23-.8.8-1.7l7.33-11.51c.5-.78.74-1.17 1.07-1.28a1 1 0 0 1 .66 0ZM35 27a7 7 0 0 0 7-7 7 7 0 0 0 7 7H35Z"
+        clipRule="evenodd"
+      />
+      <Path
+        fill="#FF974C"
+        stroke="#fff"
+        strokeWidth="2"
+        d="M10.1 9.36c-.1.32-.1.68-.1.97v15.34c0 .3 0 .65.1.97a2 2 0 0 0 1.26 1.25c.32.11.68.11.97.11H19a10 10 0 0 0 0-20h-6.67c-.3 0-.65 0-.97.1a2 2 0 0 0-1.25 1.26Z"
+      />
+      <Circle cx="19" cy="18" r="4" fill="#EB8B47" stroke="#fff" strokeWidth="2" />
+      <Circle cx="19" cy="42" r="4" fill="#EB8B47" stroke="#fff" strokeWidth="2" />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M0 0h60v60H0z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default SvgDao;

package/src/assets/visual/Defi.tsx

@@ -0,0 +1,38 @@
+import Svg, { ClipPath, Defs, G, Path, type SvgProps } from 'react-native-svg';
+const SvgDefi = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <G clipPath="url(#a)">
+      <Path
+        fill="#1DC956"
+        d="M0 25.01c0-9.25 0-13.88 1.97-17.33a15 15 0 0 1 5.6-5.6C11.02.11 15.65.11 24.9.11h10.2c9.25 0 13.88 0 17.33 1.97a15 15 0 0 1 5.6 5.6C60 11.13 60 15.76 60 25v10.2c0 9.25 0 13.88-1.97 17.33a15 15 0 0 1-5.6 5.6c-3.45 1.97-8.08 1.97-17.33 1.97H24.9c-9.25 0-13.88 0-17.33-1.97a15 15 0 0 1-5.6-5.6C0 49.1 0 44.46 0 35.21v-10.2Z"
+      />
+      <Path
+        fill="#2BEE6C"
+        d="M16.1 60c-3.82-.18-6.4-.64-8.53-1.86a15 15 0 0 1-5.6-5.6C.55 50.06.16 46.97.04 41.98L4.2 40.6a4 4 0 0 0 2.48-2.39l4.65-12.4a2 2 0 0 1 2.5-1.2l2.53.84a2 2 0 0 0 2.43-1l2.96-5.94a2 2 0 0 1 3.7.32l3.78 12.58a2 2 0 0 0 3.03 1.09l3.34-2.23a2 2 0 0 0 .65-.7l5.3-9.72a2 2 0 0 1 1.42-1.01l4.14-.69a2 2 0 0 1 1.6.44l3.9 3.24a2 2 0 0 0 2.7-.12l4.62-4.63c.08 2.2.08 4.8.08 7.93v10.2c0 9.25 0 13.88-1.97 17.33a15 15 0 0 1-5.6 5.6c-2.13 1.22-4.7 1.68-8.54 1.86H16.11Z"
+      />
+      <Path
+        fill="#fff"
+        d="m.07 43.03-.05-2.1 3.85-1.28a3 3 0 0 0 1.86-1.79l4.66-12.4a3 3 0 0 1 3.75-1.8l2.53.84a1 1 0 0 0 1.21-.5l2.97-5.94a3 3 0 0 1 5.56.48l3.77 12.58a1 1 0 0 0 1.51.55l3.34-2.23a1 1 0 0 0 .33-.35l5.3-9.71a3 3 0 0 1 2.14-1.53l4.13-.69a3 3 0 0 1 2.41.66l3.9 3.24a1 1 0 0 0 1.34-.06l5.28-5.28c.05.85.08 1.75.1 2.73L56 22.41a3 3 0 0 1-4.04.19l-3.9-3.25a1 1 0 0 0-.8-.21l-4.13.69a1 1 0 0 0-.72.5l-5.3 9.72a3 3 0 0 1-.97 1.05l-3.34 2.23a3 3 0 0 1-4.53-1.63l-3.78-12.58a1 1 0 0 0-1.85-.16l-2.97 5.94a3 3 0 0 1-3.63 1.5l-2.53-.84a1 1 0 0 0-1.25.6l-4.65 12.4a5 5 0 0 1-3.1 3L.07 43.02Z"
+      />
+      <Path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M49.5 19a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
+        clipRule="evenodd"
+      />
+      <Path fill="#fff" d="M45 .28v59.66l-2 .1V.19c.7.02 1.37.05 2 .1Z" />
+      <Path fill="#2BEE6C" d="M47.5 19a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" />
+      <Path
+        stroke="#fff"
+        strokeOpacity=".1"
+        d="M.5 25.01c0-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.41C9.46 1.58 11.39 1.1 14.1.85A133 133 0 0 1 24.9.61h10.2c4.63 0 8.08 0 10.8.24 2.7.25 4.65.73 6.28 1.67a14.5 14.5 0 0 1 5.42 5.4c.93 1.65 1.41 3.58 1.66 6.3.24 2.71.24 6.16.24 10.79v10.2c0 4.64 0 8.08-.24 10.8-.25 2.7-.73 4.65-1.66 6.28a14.5 14.5 0 0 1-5.42 5.42c-1.63.93-3.57 1.41-6.28 1.66-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.66a14.5 14.5 0 0 1-5.42-5.42C1.47 50.66 1 48.72.74 46.01A133 133 0 0 1 .5 35.2v-10.2Z"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M0 0h60v60H0z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default SvgDefi;

package/src/assets/visual/DefiAlt.tsx

@@ -0,0 +1,31 @@
+import Svg, { ClipPath, Defs, G, Path, Rect, type SvgProps } from 'react-native-svg';
+const SvgDefiAlt = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <G clipPath="url(#a)">
+      <Rect width="60" height="60" fill="#C653C6" rx="30" />
+      <Path
+        fill="#E87DE8"
+        d="M57.98.01v19.5a4.09 4.09 0 0 0-2.63 2.29L50.7 34.2a2 2 0 0 1-2.5 1.2l-2.53-.84a2 2 0 0 0-2.42 1l-2.97 5.94a2 2 0 0 1-3.7-.32L32.8 28.6a2 2 0 0 0-3.02-1.09l-3.35 2.23a2 2 0 0 0-.64.7l-5.3 9.72a2 2 0 0 1-1.43 1.01l-4.13.69a2 2 0 0 1-1.61-.44l-3.9-3.24a2 2 0 0 0-2.69.12L2.1 42.93.02 43V.01h57.96Z"
+      />
+      <Path
+        fill="#fff"
+        d="m61.95 16.94.05 2.1-3.85 1.28a3 3 0 0 0-1.86 1.79l-4.65 12.4a3 3 0 0 1-3.76 1.8l-2.53-.84a1 1 0 0 0-1.2.5l-2.98 5.94a3 3 0 0 1-5.55-.48l-3.78-12.58a1 1 0 0 0-1.5-.55l-3.35 2.23a1 1 0 0 0-.32.35l-5.3 9.72a3 3 0 0 1-2.14 1.52l-4.14.69a3 3 0 0 1-2.41-.66l-3.9-3.24a1 1 0 0 0-1.34.06l-5.28 5.28c-.05-.84-.08-1.75-.1-2.73l3.97-3.96a3 3 0 0 1 4.04-.19l3.89 3.25a1 1 0 0 0 .8.21l4.14-.68a1 1 0 0 0 .71-.51l5.3-9.71a3 3 0 0 1 .97-1.06l3.34-2.23a3 3 0 0 1 4.54 1.63l3.77 12.58a1 1 0 0 0 1.86.16l2.96-5.93a3 3 0 0 1 3.64-1.5l2.52.83a1 1 0 0 0 1.25-.6l4.66-12.4a5 5 0 0 1 3.1-2.99l4.43-1.48Z"
+      />
+      <Path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M35.5 27a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
+        clipRule="evenodd"
+      />
+      <Path fill="#fff" d="M31 0v60h-2V0h2Z" />
+      <Path fill="#E87DE8" d="M33.5 27a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" />
+    </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 SvgDefiAlt;

package/src/assets/visual/Eth.tsx

@@ -0,0 +1,45 @@
+import Svg, { ClipPath, Defs, G, Path, Rect, type SvgProps } from 'react-native-svg';
+const SvgEth = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <G clipPath="url(#a)">
+      <Rect width="60" height="60" fill="#987DE8" rx="30" />
+      <Path
+        fill="#fff"
+        fillRule="evenodd"
+        d="m15.48 28.37 11.97-19.3a3 3 0 0 1 5.1 0l11.97 19.3a6 6 0 0 1 .9 3.14v.03a6 6 0 0 1-1.16 3.56L33.23 50.2a4 4 0 0 1-6.46 0L15.73 35.1a6 6 0 0 1-1.15-3.54v-.03a6 6 0 0 1 .9-3.16Z"
+        clipRule="evenodd"
+      />
+      <Path
+        fill="#643CDD"
+        d="M30.84 10.11a1 1 0 0 0-.84-.46V24.5l12.6 5.53a2 2 0 0 0-.28-1.4L30.84 10.11Z"
+      />
+      <Path
+        fill="#BDADEB"
+        d="M30 9.65a1 1 0 0 0-.85.46L17.66 28.64a2 2 0 0 0-.26 1.39L30 24.5V9.65Z"
+      />
+      <Path
+        fill="#643CDD"
+        d="M30 50.54a1 1 0 0 0 .8-.4l11.24-15.38c.3-.44-.2-1-.66-.73l-9.89 5.68a3 3 0 0 1-1.5.4v10.43Z"
+      />
+      <Path
+        fill="#BDADEB"
+        d="m17.97 34.76 11.22 15.37c.2.28.5.41.8.41V40.11a3 3 0 0 1-1.49-.4l-9.88-5.68c-.47-.27-.97.3-.65.73Z"
+      />
+      <Path
+        fill="#401AB3"
+        d="M42.6 30.03 30 24.5v13.14a3 3 0 0 0 1.5-.4l10.14-5.83a2 2 0 0 0 .95-1.38Z"
+      />
+      <Path
+        fill="#7C5AE2"
+        d="M30 37.64V24.46l-12.6 5.57a2 2 0 0 0 .97 1.39l10.13 5.82a3 3 0 0 0 1.5.4Z"
+      />
+    </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 SvgEth;

package/src/assets/visual/Layers.tsx

@@ -0,0 +1,26 @@
+import Svg, { Path, Rect, type SvgProps } from 'react-native-svg';
+const SvgLayers = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 60 60" {...props}>
+    <Rect width="60" height="60" fill="#1DC956" rx="3" />
+    <Path
+      fill="#1FAD7E"
+      stroke="#fff"
+      strokeWidth="2"
+      d="m30.49 29.13-.49-.27-.49.27-12.77 7.1-.05.02c-.86.48-1.58.88-2.1 1.24-.54.37-1.04.81-1.28 1.45a3 3 0 0 0 0 2.12c.24.63.74 1.08 1.27 1.45.53.36 1.25.76 2.11 1.24l.05.03 6.33 3.51.17.1c2.33 1.3 3.72 2.06 5.22 2.32a9 9 0 0 0 3.08 0c1.5-.26 2.9-1.03 5.22-2.32l.18-.1 6.32-3.51.05-.03a26.9 26.9 0 0 0 2.1-1.24 3.21 3.21 0 0 0 1.28-1.45l-.94-.35.94.35a3 3 0 0 0 0-2.12l-.94.35.94-.35a3.21 3.21 0 0 0-1.27-1.45c-.53-.36-1.25-.76-2.11-1.24l-.05-.03-12.77-7.1Z"
+    />
+    <Path
+      fill="#2BEE6C"
+      stroke="#fff"
+      strokeWidth="2"
+      d="m30.49 19.13-.49-.27-.49.27-12.77 7.1-.05.02c-.86.48-1.58.88-2.1 1.24-.54.37-1.04.81-1.28 1.45a3 3 0 0 0 0 2.12c.24.63.74 1.08 1.27 1.45.53.36 1.25.76 2.11 1.24l.05.03 6.33 3.51.17.1c2.33 1.3 3.72 2.06 5.22 2.32a9 9 0 0 0 3.08 0c1.5-.26 2.9-1.03 5.22-2.32l.18-.1 6.32-3.51.05-.03a26.9 26.9 0 0 0 2.1-1.24 3.21 3.21 0 0 0 1.28-1.45l-.94-.35.94.35a3 3 0 0 0 0-2.12l-.94.35.94-.35a3.21 3.21 0 0 0-1.27-1.45c-.53-.36-1.25-.76-2.11-1.24l-.05-.03-12.77-7.1Z"
+    />
+    <Path
+      fill="#86F999"
+      stroke="#fff"
+      strokeWidth="2"
+      d="m46.69 21.06-.94-.35.94.35a3 3 0 0 0 0-2.12l-.94.35.94-.35a3.21 3.21 0 0 0-1.27-1.45c-.53-.36-1.25-.76-2.11-1.24l-.05-.03-6.32-3.51-.18-.1c-2.33-1.3-3.72-2.06-5.22-2.33a9 9 0 0 0-3.08 0c-1.5.27-2.9 1.04-5.22 2.33l-.17.1-6.33 3.51-.05.03c-.86.48-1.58.88-2.1 1.24-.54.37-1.04.81-1.28 1.45a3 3 0 0 0 0 2.12c.24.63.74 1.08 1.27 1.45.53.36 1.25.76 2.11 1.24l.05.03 6.33 3.51.17.1c2.33 1.3 3.72 2.06 5.22 2.32a9 9 0 0 0 3.08 0c1.5-.26 2.9-1.03 5.22-2.32l.18-.1 6.32-3.51.05-.03a26.9 26.9 0 0 0 2.1-1.24 3.21 3.21 0 0 0 1.28-1.45Z"
+    />
+    <Rect width="59" height="59" x=".5" y=".5" stroke="#fff" strokeOpacity=".1" rx="2.5" />
+  </Svg>
+);
+export default SvgLayers;

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/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"
+        stroke-linecap="round"
+        stroke-linejoin="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,28 @@
+import type { ReactNode } from 'react';
+import { type StyleProp, type ViewStyle, KeyboardAvoidingView, Platform } 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 (
+    <KeyboardAvoidingView
+      behavior="padding"
+      enabled={Platform.OS === 'ios'}
+      style={[
+        styles.container,
+        { backgroundColor: Theme['bg-100'], borderColor: Theme['gray-glass-005'] },
+        style
+      ]}
+    >
+      {children}
+    </KeyboardAvoidingView>
+  );
+}

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

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