diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
index 7d8008a6..110e1c74 100644
--- a/src/app/(sidebar)/account/create/page.tsx
+++ b/src/app/(sidebar)/account/create/page.tsx
@@ -1,10 +1,29 @@
"use client";
-import { Card, Link, Text, Button, Icon } from "@stellar/design-system";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, Text, Button } from "@stellar/design-system";
+import { Keypair } from "stellar-sdk";
+
+import { Routes } from "@/constants/routes";
+import { useStore } from "@/store/useStore";
+import { GenerateKeypair } from "@/components/GenerateKeypair";
+import { ExpandBox } from "@/components/ExpandBox";
import "../styles.scss";
export default function CreateAccount() {
+ const { account } = useStore();
+ const router = useRouter();
+ const [secretKey, setSecretKey] = useState("");
+
+ const generateKeypair = () => {
+ let keypair = Keypair.random();
+
+ account.update(keypair.publicKey());
+ setSecretKey(keypair.secret());
+ };
+
return (
@@ -21,11 +40,25 @@ export default function CreateAccount() {
-
+
+
+
);
diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss
index 541122ec..1115f112 100644
--- a/src/app/(sidebar)/account/styles.scss
+++ b/src/app/(sidebar)/account/styles.scss
@@ -10,4 +10,20 @@
.CardText__button {
align-self: flex-start;
}
+
+ &__CTA {
+ display: flex;
+ gap: pxToRem(18px) pxToRem(8px);
+ }
+ &__keypair {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ margin-top: pxToRem(24px);
+ gap: pxToRem(16px);
+
+ .Input__side-element--right {
+ cursor: pointer;
+ }
+ }
}
diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx
new file mode 100644
index 00000000..a209c203
--- /dev/null
+++ b/src/components/GenerateKeypair.tsx
@@ -0,0 +1,40 @@
+import { Icon, Input } from "@stellar/design-system";
+
+export const GenerateKeypair = ({
+ publicKey,
+ secretKey,
+}: {
+ publicKey: string;
+ secretKey: string;
+}) => {
+ return (
+
+ {publicKey && (
+
+ )}
+
+ {secretKey && (
+
+ )}
+
+ );
+};
diff --git a/src/store/createStore.ts b/src/store/createStore.ts
index a47d98e6..7e4ebcb3 100644
--- a/src/store/createStore.ts
+++ b/src/store/createStore.ts
@@ -10,16 +10,8 @@ export interface Store {
// Account
account: {
- value: string;
- nestedObject: {
- nestedValue1: string;
- nestedValue2: number;
- };
+ publicKey: string;
update: (value: string) => void;
- updateNested: (nestedVal: {
- nestedValue1: string;
- nestedValue2: number;
- }) => void;
reset: () => void;
};
}
@@ -39,25 +31,14 @@ export const createStore = (options: CreateStoreOptions) =>
state.network = network;
}),
account: {
- value: "",
- nestedObject: {
- nestedValue1: "",
- nestedValue2: 0,
- },
+ publicKey: "",
update: (value: string) =>
set((state) => {
- state.account.value = value;
- }),
- updateNested: (nestedVal: {
- nestedValue1: string;
- nestedValue2: number;
- }) =>
- set((state) => {
- state.account.nestedObject = nestedVal;
+ state.account.publicKey = value;
}),
reset: () =>
set((state) => {
- state.account.value = "";
+ state.account.publicKey = "";
}),
},
})),
@@ -67,7 +48,7 @@ export const createStore = (options: CreateStoreOptions) =>
select() {
return {
network: true,
- account: true,
+ account: false,
};
},
key: "||",
diff --git a/yarn.lock b/yarn.lock
index cd3a15f3..acdf5550 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1622,7 +1622,7 @@ inflight@^1.0.4:
inherits@2, inherits@^2.0.1:
version "2.0.4"
- resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+ resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
inline-style-parser@0.2.2: