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: