From adf59ad687869945f9d2b25371c770ad3d6249d2 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 26 Mar 2024 17:07:34 -0700 Subject: [PATCH] updating based on recommendations --- .nvmrc | 2 +- src/app/(sidebar)/account/create/page.tsx | 57 +++++---- .../(sidebar)/account/muxed-create/page.tsx | 111 ++++++++++-------- .../(sidebar)/account/muxed-parse/page.tsx | 27 +++-- src/app/(sidebar)/account/styles.scss | 13 +- src/components/FormElements/MuxedIdPicker.tsx | 39 ------ .../FormElements/MuxedKeyPicker.tsx | 39 ------ src/helpers/muxedAccount.ts | 31 ++--- src/store/createStore.ts | 12 +- src/types/types.ts | 6 +- 10 files changed, 138 insertions(+), 199 deletions(-) delete mode 100644 src/components/FormElements/MuxedIdPicker.tsx delete mode 100644 src/components/FormElements/MuxedKeyPicker.tsx diff --git a/.nvmrc b/.nvmrc index 0828ab79..3462e8c2 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18 \ No newline at end of file +v18.19.0 \ No newline at end of file diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index ec6a8383..693495c4 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -27,37 +27,42 @@ export default function CreateAccount() { return (
-
-
- - Keypair Generator - +
+
+
+ + Keypair Generator + - - These keypairs can be used on the Stellar network where one is - required. For example, it can be used as an account master key, - account signer, and/or as a stellar-core node key. - -
-
- + + These keypairs can be used on the Stellar network where one is + required. For example, it can be used as an account master key, + account signer, and/or as a stellar-core node key. + +
+
+ - + +
+ - +
+ +
diff --git a/src/app/(sidebar)/account/muxed-create/page.tsx b/src/app/(sidebar)/account/muxed-create/page.tsx index 32054503..6f81ec14 100644 --- a/src/app/(sidebar)/account/muxed-create/page.tsx +++ b/src/app/(sidebar)/account/muxed-create/page.tsx @@ -1,13 +1,11 @@ "use client"; import { useState } from "react"; -import { Alert, Card, Text, Button } from "@stellar/design-system"; +import { Alert, Button, Card, Input, Text } from "@stellar/design-system"; import { useStore } from "@/store/useStore"; import { ExpandBox } from "@/components/ExpandBox"; -import { MuxedIdPicker } from "@/components/FormElements/MuxedIdPicker"; -import { MuxedKeyPicker } from "@/components/FormElements/MuxedKeyPicker"; import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker"; import { SdsLink } from "@/components/SdsLink"; import { muxedAccount } from "@/helpers/muxedAccount"; @@ -87,9 +85,15 @@ export default function CreateMuxedAccount() { setReset(true); setBaseAddress(e.target.value); - const error = validate.publicKey(e.target.value); + let error = ""; - setBaseFieldErrorMessage(error || ""); + if (e.target.value.startsWith("M")) { + error = "Base account address should start with G"; + } else { + error = validate.publicKey(e.target.value) || ""; + } + + setBaseFieldErrorMessage(error); }} error={baseFieldErrorMessage} copyButton={{ @@ -97,9 +101,11 @@ export default function CreateMuxedAccount() { }} /> - { setReset(true); @@ -116,7 +122,11 @@ export default function CreateMuxedAccount() {
- - -
- - - - - -
-
+ + +
+ + + + + +
+ - @@ -106,7 +112,7 @@ export default function ParseMuxedAccount() { - - { - id: string; - fieldSize?: "sm" | "md" | "lg"; - label: string; - labelSuffix?: string | React.ReactNode; - placeholder?: string; - readOnly?: boolean; - value: string; - error: string | undefined; - // eslint-disable-next-line no-unused-vars - onChange?: (e: React.ChangeEvent) => void; -} - -export const MuxedIdPicker = ({ - id, - fieldSize = "md", - label, - labelSuffix, - placeholder = "Ex: 1", - value, - error, - onChange, - ...props -}: MuxedIdPickerProps) => ( - -); diff --git a/src/components/FormElements/MuxedKeyPicker.tsx b/src/components/FormElements/MuxedKeyPicker.tsx deleted file mode 100644 index 24bbd31a..00000000 --- a/src/components/FormElements/MuxedKeyPicker.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import { Input, InputProps } from "@stellar/design-system"; - -interface MuxedKeyPickerProps extends Omit { - id: string; - fieldSize?: "sm" | "md" | "lg"; - label: string; - labelSuffix?: string | React.ReactNode; - placeholder?: string; - readOnly?: boolean; - value: string; - error: string | undefined; - // eslint-disable-next-line no-unused-vars - onChange?: (e: React.ChangeEvent) => void; -} - -export const MuxedKeyPicker = ({ - id, - fieldSize = "md", - label, - labelSuffix, - placeholder = "Ex: MBRWSVNURRYVIYSWLRFQ5AAAUWPKOZZNZVVVIXHFGUSGIRVKLVIDYAAAAAAAAAAD5GJ4U", - value, - error, - onChange, - ...props -}: MuxedKeyPickerProps) => ( - -); diff --git a/src/helpers/muxedAccount.ts b/src/helpers/muxedAccount.ts index c4501b2b..cbeb9bc4 100644 --- a/src/helpers/muxedAccount.ts +++ b/src/helpers/muxedAccount.ts @@ -1,6 +1,6 @@ import { MuxedAccountFieldType } from "@/types/types"; -import { Account, MuxedAccount } from "stellar-sdk"; +import { Account, MuxedAccount } from "@stellar/stellar-sdk"; export const muxedAccount = { generate: ({ @@ -12,29 +12,33 @@ export const muxedAccount = { }): Partial => { let muxedAddress = ""; let error = ""; - + try { const muxedAccount = new MuxedAccount( new Account(baseAddress, "0"), muxedAccountId, ); - + muxedAddress = muxedAccount.accountId(); } catch (e: any) { error = `Something went wrong. ${e.toString()}`; } - - return { muxedAddress, error } + + return { muxedAddress, error }; }, parse: ({ muxedAddress, }: { muxedAddress: string; }): Partial => { + let baseAddress = ""; + let muxedAccountId = ""; + let error = ""; + try { const muxedAccount = MuxedAccount.fromAddress(muxedAddress, "0"); - const baseAddress = muxedAccount.baseAccount().accountId(); - const muxedAccountId = muxedAccount.id(); + baseAddress = muxedAccount.baseAccount().accountId(); + muxedAccountId = muxedAccount.id(); if (!baseAddress) { throw new Error("Base account for this muxed account was not found."); @@ -45,18 +49,9 @@ export const muxedAccount = { "Muxed account ID for this muxed account was not found.", ); } - - return { - id: muxedAccountId, - baseAddress, - error: "", - }; } catch (e: any) { - return { - id: "", - baseAddress: "", - error: `Something went wrong. ${e.toString()}`, - }; + error = `Something went wrong. ${e.toString()}`; } + return { id: muxedAccountId, baseAddress, error }; }, }; diff --git a/src/store/createStore.ts b/src/store/createStore.ts index 63eaf8bb..22d0aa42 100644 --- a/src/store/createStore.ts +++ b/src/store/createStore.ts @@ -79,14 +79,14 @@ export const createStore = (options: CreateStoreOptions) => account: { publicKey: "", generatedMuxedAccount: { - id: "", - baseAddress: "", - muxedAddress: "", + id: undefined, + baseAddress: undefined, + muxedAddress: undefined, }, parsedMuxedAccount: { - id: "", - baseAddress: "", - muxedAddress: "", + id: undefined, + baseAddress: undefined, + muxedAddress: undefined, }, updateGeneratedMuxedAccount: (newMuxedAccount: MuxedAccount) => set((state) => { diff --git a/src/types/types.ts b/src/types/types.ts index 9b55cadc..8268d9d9 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -45,9 +45,9 @@ export type StatusPageScheduled = { // Account // ============================================================================= export type MuxedAccount = { - id: string; - baseAddress: string; - muxedAddress: string; + id: string | undefined; + baseAddress: string | undefined; + muxedAddress: string | undefined; }; export type MuxedAccountFieldType = MuxedAccount & {