diff --git a/front/src/components/BaseLogo/index.tsx b/front/src/components/BaseLogo/index.tsx
new file mode 100644
index 0000000..194f031
--- /dev/null
+++ b/front/src/components/BaseLogo/index.tsx
@@ -0,0 +1,15 @@
+type Props = {
+ style?: React.CSSProperties;
+};
+
+export default function BaseLogo({ style }: Props) {
+ return (
+
+ );
+}
diff --git a/front/src/components/LogoAnimated/index.tsx b/front/src/components/LogoAnimated/index.tsx
index 591ff0f..93474e0 100644
--- a/front/src/components/LogoAnimated/index.tsx
+++ b/front/src/components/LogoAnimated/index.tsx
@@ -53,21 +53,21 @@ export default function LogoAnimated({ style }: Props) {
d="M43.4803 76.6886L43.4803 76.6886L43.4871 76.69C45.1079 77.0312 46.7314 77.1308 50.2939 77.0373C54.2829 76.8814 55.1898 76.761 57.2917 76.07L57.2917 76.07L57.3007 76.0671C63.4061 74.1025 67.8707 70.9925 71.393 66.2763L71.393 66.2763L71.3992 66.2681C73.6588 63.2853 75.0321 60.5693 76.1179 57.1015C76.5028 55.8544 76.6809 55.1697 76.78 54.2024C76.885 53.1778 76.9024 51.8254 76.9024 49.2461C76.9024 46.6667 76.885 45.3143 76.78 44.2897C76.6808 43.3216 76.5024 42.6365 76.1169 41.3874L76.1168 41.3871C73.2644 32.1392 66.6558 25.4632 57.2969 22.4238L57.2915 22.422C56.1325 22.0408 55.4316 21.8527 54.5 21.7359C53.5219 21.6131 52.2684 21.566 49.9961 21.5184C46.6159 21.4553 44.4358 21.557 43.229 21.8033C33.0503 23.9236 24.4871 32.2843 21.876 42.6671C21.4426 44.4014 21.2109 46.7939 21.2109 49.2461C21.2109 51.6982 21.4427 54.0909 21.8761 55.8252C24.5156 66.3531 33.0062 74.5339 43.4803 76.6886Z"
fill="var(--accent-9)"
stroke="var(--accent-9)"
- stroke-width="3"
+ strokeWidth="3"
className="svg-elem-7"
>
diff --git a/front/src/components/OnBoarding/index.tsx b/front/src/components/OnBoarding/index.tsx
index 4f0ece7..33f4d1f 100644
--- a/front/src/components/OnBoarding/index.tsx
+++ b/front/src/components/OnBoarding/index.tsx
@@ -1,10 +1,11 @@
import { useMe } from "@/providers/MeProvider";
import { GitHubLogoIcon } from "@radix-ui/react-icons";
-import { Button, Flex, Link, TextField, IconButton } from "@radix-ui/themes";
+import { Button, Flex, Link, TextField, IconButton, Text } from "@radix-ui/themes";
import { useState } from "react";
import ThemeButton from "../ThemeButton";
import LogoAnimated from "../LogoAnimated";
import Spinner from "../Spinner";
+import BaseLogo from "../BaseLogo";
export default function OnBoarding() {
const [username, setUsername] = useState("");
@@ -18,26 +19,24 @@ export default function OnBoarding() {
direction="column"
style={{ position: "relative", width: "100%", gap: "2rem" }}
>
-
- window.open("https://github.com/passkeys-4337/smart-wallet", "_blank")}
- variant="soft"
- >
-
-
-
+
+ window.open("https://github.com/passkeys-4337/smart-wallet", "_blank")}
+ variant="soft"
+ >
+
+
+
+ Build for
+
+
+
+
{isLoading && }
@@ -62,37 +61,61 @@ export default function OnBoarding() {
}
}}
>
+
{createForm && (
- setUsername(e.target.value)}
- placeholder="Name"
- disabled={isLoading}
- size={"3"}
- style={{
- width: "250px",
- padding: "0.5rem",
- }}
- />
+
+ setUsername(e.target.value)}
+ placeholder="Wallet name"
+ disabled={isLoading}
+ size={"3"}
+ style={{
+ padding: "0.5rem",
+ }}
+ />
+
+
+
+ )}
+ {!createForm && (
+
)}
-
)}
- {!createForm && (
- !isLoading && setCreateForm(true)} size={"2"}>
- or create a new account
-
- )}
+
+ {!createForm && (
+ {
+ !isLoading && setCreateForm(true);
+ }}
+ size={"2"}
+ >
+ or create a new wallet
+
+ )}
- {createForm && (
- !isLoading && setCreateForm(false)} size={"2"}>
- or sign in with an existing account
-
- )}
+ {createForm && (
+ !isLoading && setCreateForm(false)} size={"2"}>
+ or log in with an existing passkey
+
+ )}
+
);
}