From 47fa75deaec215e04da0e134bf3e4bd204f70f71 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Wed, 13 Mar 2024 16:34:19 -0700 Subject: [PATCH 1/8] add component --- src/app/(sidebar)/account/create/page.tsx | 6 +-- src/app/(sidebar)/account/styles.scss | 11 +++++ src/components/GenerateKeypair.tsx | 57 +++++++++++++++++++++++ src/store/createStore.ts | 26 +++++------ yarn.lock | 2 +- 5 files changed, 85 insertions(+), 17 deletions(-) create mode 100644 src/components/GenerateKeypair.tsx diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 7d8008a6..ea195bc1 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -2,6 +2,8 @@ import { Card, Link, Text, Button, Icon } from "@stellar/design-system"; +import { GenerateKeypair } from "@/components/GenerateKeypair"; + import "../styles.scss"; export default function CreateAccount() { @@ -21,9 +23,7 @@ export default function CreateAccount() {
- +
diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss index 541122ec..073160c7 100644 --- a/src/app/(sidebar)/account/styles.scss +++ b/src/app/(sidebar)/account/styles.scss @@ -10,4 +10,15 @@ .CardText__button { align-self: flex-start; } + + &__keypair { + display: flex; + align-items: flex-start; + flex-direction: column; + 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..efe0c485 --- /dev/null +++ b/src/components/GenerateKeypair.tsx @@ -0,0 +1,57 @@ +import { Button, Icon, Input } from "@stellar/design-system"; +import { Keypair } from "stellar-sdk"; +import { useStore } from "@/store/useStore"; + +export const GenerateKeypair = () => { + const { account } = useStore(); + + const generateKeypair = () => { + let keypair = Keypair.random(); + + account.updateKeypair({ + publicKey: keypair.publicKey(), + secretKey: keypair.secret(), + }); + }; + + return ( +
+ + + {account.keypair.publicKey && ( + { + navigator.clipboard.writeText(account.keypair.publicKey); + }} + /> + } + /> + )} + {account.keypair.secretKey && ( + { + navigator.clipboard.writeText(account.keypair.secretKey); + }} + /> + } + /> + )} +
+ ); +}; diff --git a/src/store/createStore.ts b/src/store/createStore.ts index a47d98e6..8318825a 100644 --- a/src/store/createStore.ts +++ b/src/store/createStore.ts @@ -11,14 +11,14 @@ export interface Store { // Account account: { value: string; - nestedObject: { - nestedValue1: string; - nestedValue2: number; + keypair: { + publicKey: string; + secretKey: string; }; update: (value: string) => void; - updateNested: (nestedVal: { - nestedValue1: string; - nestedValue2: number; + updateKeypair: (nestedVal: { + publicKey: string; + secretKey: string; }) => void; reset: () => void; }; @@ -40,20 +40,20 @@ export const createStore = (options: CreateStoreOptions) => }), account: { value: "", - nestedObject: { - nestedValue1: "", - nestedValue2: 0, + keypair: { + publicKey: "", + secretKey: "", }, update: (value: string) => set((state) => { state.account.value = value; }), - updateNested: (nestedVal: { - nestedValue1: string; - nestedValue2: number; + updateKeypair: (nestedVal: { + publicKey: string; + secretKey: string; }) => set((state) => { - state.account.nestedObject = nestedVal; + state.account.keypair = nestedVal; }), reset: () => set((state) => { 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: From dd94717abe775a37c25baa41be436f1799e40678 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Wed, 13 Mar 2024 17:00:24 -0700 Subject: [PATCH 2/8] add 'Fund account with Friendbot' --- src/app/(sidebar)/account/create/page.tsx | 15 +++++++++++++-- src/app/(sidebar)/account/styles.scss | 4 ++++ src/components/GenerateKeypair.tsx | 1 + 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index ea195bc1..691732df 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -1,12 +1,15 @@ "use client"; - -import { Card, Link, Text, Button, Icon } from "@stellar/design-system"; +import { useRouter } from "next/navigation"; +import { Card, Text, Button } from "@stellar/design-system"; import { GenerateKeypair } from "@/components/GenerateKeypair"; +import { Routes } from "@/constants/routes"; import "../styles.scss"; export default function CreateAccount() { + const router = useRouter(); + return (
@@ -24,6 +27,14 @@ export default function CreateAccount() {
+ +
diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss index 073160c7..8ddb5824 100644 --- a/src/app/(sidebar)/account/styles.scss +++ b/src/app/(sidebar)/account/styles.scss @@ -11,6 +11,10 @@ align-self: flex-start; } + &__CTA { + display: flex; + gap: pxToRem(18px); + } &__keypair { display: flex; align-items: flex-start; diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx index efe0c485..cbab6762 100644 --- a/src/components/GenerateKeypair.tsx +++ b/src/components/GenerateKeypair.tsx @@ -36,6 +36,7 @@ export const GenerateKeypair = () => { } /> )} + {account.keypair.secretKey && ( Date: Thu, 14 Mar 2024 11:25:58 -0700 Subject: [PATCH 3/8] Update src/components/GenerateKeypair.tsx Co-authored-by: Iveta --- src/components/GenerateKeypair.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx index cbab6762..c591d3c8 100644 --- a/src/components/GenerateKeypair.tsx +++ b/src/components/GenerateKeypair.tsx @@ -27,13 +27,9 @@ export const GenerateKeypair = () => { fieldSize="md" label="Public Key" value={account.keypair.publicKey} - rightElement={ - { - navigator.clipboard.writeText(account.keypair.publicKey); - }} - /> - } + copyButton={{ + position: "right", + }} /> )} From 07c554fc1e71dbc8421057d9a0b424b4697c5485 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Thu, 14 Mar 2024 11:40:06 -0700 Subject: [PATCH 4/8] fix layout padding --- src/app/(sidebar)/account/create/page.tsx | 18 +++++++++++++++++- src/app/(sidebar)/account/styles.scss | 2 +- src/components/GenerateKeypair.tsx | 16 +--------------- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 691732df..71122543 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -1,15 +1,27 @@ "use client"; import { useRouter } from "next/navigation"; import { Card, Text, Button } from "@stellar/design-system"; +import { Keypair } from "stellar-sdk"; import { GenerateKeypair } from "@/components/GenerateKeypair"; import { Routes } from "@/constants/routes"; +import { useStore } from "@/store/useStore"; import "../styles.scss"; export default function CreateAccount() { + const { account } = useStore(); const router = useRouter(); + const generateKeypair = () => { + let keypair = Keypair.random(); + + account.updateKeypair({ + publicKey: keypair.publicKey(), + secretKey: keypair.secret(), + }); + }; + return (
@@ -26,7 +38,9 @@ export default function CreateAccount() {
- +
+ + diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss index 8ddb5824..afd4a844 100644 --- a/src/app/(sidebar)/account/styles.scss +++ b/src/app/(sidebar)/account/styles.scss @@ -13,7 +13,7 @@ &__CTA { display: flex; - gap: pxToRem(18px); + gap: pxToRem(18px) pxToRem(8px); } &__keypair { display: flex; diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx index c591d3c8..b151e4fa 100644 --- a/src/components/GenerateKeypair.tsx +++ b/src/components/GenerateKeypair.tsx @@ -1,25 +1,11 @@ -import { Button, Icon, Input } from "@stellar/design-system"; -import { Keypair } from "stellar-sdk"; +import { Icon, Input } from "@stellar/design-system"; import { useStore } from "@/store/useStore"; export const GenerateKeypair = () => { const { account } = useStore(); - const generateKeypair = () => { - let keypair = Keypair.random(); - - account.updateKeypair({ - publicKey: keypair.publicKey(), - secretKey: keypair.secret(), - }); - }; - return (
- - {account.keypair.publicKey && ( Date: Thu, 14 Mar 2024 13:43:42 -0700 Subject: [PATCH 5/8] add and remove secretKey --- src/app/(sidebar)/account/create/page.tsx | 16 ++++++++----- src/components/GenerateKeypair.tsx | 21 +++++++--------- src/store/createStore.ts | 29 ++++------------------- 3 files changed, 24 insertions(+), 42 deletions(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 71122543..671883c7 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -1,25 +1,27 @@ "use client"; + +import { useState } from "react"; import { useRouter } from "next/navigation"; import { Card, Text, Button } from "@stellar/design-system"; import { Keypair } from "stellar-sdk"; -import { GenerateKeypair } from "@/components/GenerateKeypair"; 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.updateKeypair({ - publicKey: keypair.publicKey(), - secretKey: keypair.secret(), - }); + account.update(keypair.publicKey()); + setSecretKey(keypair.secret()); }; return ( @@ -51,7 +53,9 @@ export default function CreateAccount() {
- + + + diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx index b151e4fa..97396529 100644 --- a/src/components/GenerateKeypair.tsx +++ b/src/components/GenerateKeypair.tsx @@ -1,38 +1,35 @@ import { Icon, Input } from "@stellar/design-system"; import { useStore } from "@/store/useStore"; -export const GenerateKeypair = () => { +export const GenerateKeypair = ({ secretKey }: { secretKey: string }) => { const { account } = useStore(); return (
- {account.keypair.publicKey && ( + {account.publicKey && ( )} - {account.keypair.secretKey && ( + {secretKey && ( { - navigator.clipboard.writeText(account.keypair.secretKey); - }} - /> - } + value={secretKey} + isPassword + copyButton={{ + position: "right", + }} /> )}
diff --git a/src/store/createStore.ts b/src/store/createStore.ts index 8318825a..7e4ebcb3 100644 --- a/src/store/createStore.ts +++ b/src/store/createStore.ts @@ -10,16 +10,8 @@ export interface Store { // Account account: { - value: string; - keypair: { - publicKey: string; - secretKey: string; - }; + publicKey: string; update: (value: string) => void; - updateKeypair: (nestedVal: { - publicKey: string; - secretKey: string; - }) => void; reset: () => void; }; } @@ -39,25 +31,14 @@ export const createStore = (options: CreateStoreOptions) => state.network = network; }), account: { - value: "", - keypair: { - publicKey: "", - secretKey: "", - }, + publicKey: "", update: (value: string) => set((state) => { - state.account.value = value; - }), - updateKeypair: (nestedVal: { - publicKey: string; - secretKey: string; - }) => - set((state) => { - state.account.keypair = 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: "||", From 9ea3945da09aad57166f67f2be190d29c8481189 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Thu, 14 Mar 2024 14:05:54 -0700 Subject: [PATCH 6/8] separate the div for expandbox --- src/app/(sidebar)/account/create/page.tsx | 7 +++---- src/app/(sidebar)/account/styles.scss | 1 + 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 671883c7..6d24f032 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -52,11 +52,10 @@ export default function CreateAccount() { Fund account with Friendbot - - - - + + + ); diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss index afd4a844..1115f112 100644 --- a/src/app/(sidebar)/account/styles.scss +++ b/src/app/(sidebar)/account/styles.scss @@ -19,6 +19,7 @@ display: flex; align-items: flex-start; flex-direction: column; + margin-top: pxToRem(24px); gap: pxToRem(16px); .Input__side-element--right { From a65f1ceabd62c48a9c2bbb9ee0f4b11bc30cf1e1 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Thu, 14 Mar 2024 14:17:16 -0700 Subject: [PATCH 7/8] do not use 'store' in components; update button variant --- src/app/(sidebar)/account/create/page.tsx | 7 +++++-- src/components/GenerateKeypair.tsx | 8 +++++++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 6d24f032..110e1c74 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -40,7 +40,7 @@ export default function CreateAccount() {
- @@ -54,7 +54,10 @@ export default function CreateAccount() {
- + diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx index 97396529..68006b6b 100644 --- a/src/components/GenerateKeypair.tsx +++ b/src/components/GenerateKeypair.tsx @@ -1,7 +1,13 @@ import { Icon, Input } from "@stellar/design-system"; import { useStore } from "@/store/useStore"; -export const GenerateKeypair = ({ secretKey }: { secretKey: string }) => { +export const GenerateKeypair = ({ + publicKey, + secretKey, +}: { + publicKey: string; + secretKey: string; +}) => { const { account } = useStore(); return ( From 99bfd8f0fc534ce082682f0525bdd5615386a7dc Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Thu, 14 Mar 2024 14:19:48 -0700 Subject: [PATCH 8/8] remove store --- src/components/GenerateKeypair.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx index 68006b6b..a209c203 100644 --- a/src/components/GenerateKeypair.tsx +++ b/src/components/GenerateKeypair.tsx @@ -1,5 +1,4 @@ import { Icon, Input } from "@stellar/design-system"; -import { useStore } from "@/store/useStore"; export const GenerateKeypair = ({ publicKey, @@ -8,17 +7,15 @@ export const GenerateKeypair = ({ publicKey: string; secretKey: string; }) => { - const { account } = useStore(); - return (
- {account.publicKey && ( + {publicKey && (