From f163b052e186d1f5d472bbdae4aeafe390bcdc54 Mon Sep 17 00:00:00 2001 From: muzam1l Date: Fri, 1 Jul 2022 14:33:28 +0530 Subject: [PATCH 1/5] Allow passing desired name while creating account. --- components/Accounts.tsx | 105 +++++++++++++++++++----------- state/actions/addFaucetAccount.ts | 4 +- utils/helpers.ts | 6 ++ 3 files changed, 76 insertions(+), 39 deletions(-) diff --git a/components/Accounts.tsx b/components/Accounts.tsx index fd36b74..6b53fb6 100644 --- a/components/Accounts.tsx +++ b/components/Accounts.tsx @@ -31,6 +31,7 @@ import transactionsData from "../content/transactions.json"; import { SetHookDialog } from "./SetHookDialog"; import { addFunds } from "../state/actions/addFaucetAccount"; import { deleteHook } from "../state/actions/deployHook"; +import { capitalize } from '../utils/helpers'; export const AccountDialog = ({ activeAccountAddress, @@ -42,12 +43,12 @@ export const AccountDialog = ({ const snap = useSnapshot(state); const [showSecret, setShowSecret] = useState(false); const activeAccount = snap.accounts.find( - (account) => account.address === activeAccountAddress + account => account.address === activeAccountAddress ); return ( { + onOpenChange={open => { setShowSecret(false); !open && setActiveAccountAddress(null); }} @@ -99,7 +100,7 @@ export const AccountDialog = ({ tabIndex={-1} onClick={() => { const index = state.accounts.findIndex( - (acc) => acc.address === activeAccount?.address + acc => acc.address === activeAccount?.address ); state.accounts.splice(index, 1); }} @@ -165,7 +166,7 @@ export const AccountDialog = ({ }} ghost size="xs" - onClick={() => setShowSecret((curr) => !curr)} + onClick={() => setShowSecret(curr => !curr)} > {showSecret ? "Hide" : "Show"} @@ -252,7 +253,7 @@ export const AccountDialog = ({ }} > {activeAccount && activeAccount.hooks.length > 0 - ? activeAccount.hooks.map((i) => { + ? activeAccount.hooks.map(i => { return ( = (props) => { +const Accounts: FC = props => { const snap = useSnapshot(state); const [activeAccountAddress, setActiveAccountAddress] = useState< string | null @@ -309,7 +310,7 @@ const Accounts: FC = (props) => { useEffect(() => { const fetchAccInfo = async () => { if (snap.clientStatus === "online") { - const requests = snap.accounts.map((acc) => + const requests = snap.accounts.map(acc => snap.client?.send({ id: `hooks-builder-req-info-${acc.address}`, command: "account_info", @@ -322,7 +323,7 @@ const Accounts: FC = (props) => { const balance = res?.account_data?.Balance as string; const sequence = res?.account_data?.Sequence as number; const accountToUpdate = state.accounts.find( - (acc) => acc.address === address + acc => acc.address === address ); if (accountToUpdate) { accountToUpdate.xrp = balance; @@ -330,7 +331,7 @@ const Accounts: FC = (props) => { accountToUpdate.error = null; } else { const oldAccount = state.accounts.find( - (acc) => acc.address === res?.account + acc => acc.address === res?.account ); if (oldAccount) { oldAccount.xrp = "0"; @@ -341,7 +342,7 @@ const Accounts: FC = (props) => { } } }); - const objectRequests = snap.accounts.map((acc) => { + const objectRequests = snap.accounts.map(acc => { return snap.client?.send({ id: `hooks-builder-req-objects-${acc.address}`, command: "account_objects", @@ -352,7 +353,7 @@ const Accounts: FC = (props) => { objectResponses.forEach((res: any) => { const address = res?.account as string; const accountToUpdate = state.accounts.find( - (acc) => acc.address === address + acc => acc.address === address ); if (accountToUpdate) { accountToUpdate.hooks = @@ -416,9 +417,7 @@ const Accounts: FC = (props) => { Accounts - + @@ -435,7 +434,7 @@ const Accounts: FC = (props) => { overflowY: "auto", }} > - {snap.accounts.map((account) => ( + {snap.accounts.map(account => ( = (props) => { {!props.hideDeployBtn && (
{ + onClick={e => { e.stopPropagation(); }} > @@ -514,31 +513,67 @@ const Accounts: FC = (props) => { ); }; -export const transactionsOptions = transactionsData.map((tx) => ({ +export const transactionsOptions = transactionsData.map(tx => ({ value: tx.TransactionType, label: tx.TransactionType, })); -const ImportAccountDialog = () => { +const ImportAccountDialog = ({ + type = "import", +}: { + type?: "import" | "create"; +}) => { const [value, setValue] = useState(""); + + const btnText = type === "import" ? "Import" : "Create"; + const title = type === "import" ? "Import Account" : "Create Account"; + const labelText = type === "import" ? "Account secret" : "Account Name"; + const cancelText = type === "import" ? "Cancel" : "Skip"; + + const handleSubmit = () => { + if (type === "create") { + const name = capitalize(value); + addFaucetAccount(name, true); + return; + } + importAccount(value); + setValue(""); + }; + const handleCancel = () => { + setValue(""); + if (type === "create") { + addFaucetAccount(undefined, true); + } + }; return ( - Import account + {title} - - setValue(e.target.value)} - /> + + {type === "import" ? ( + setValue(e.target.value)} + /> + ) : ( + setValue(e.target.value)} + /> + )} { }} > - + - diff --git a/state/actions/addFaucetAccount.ts b/state/actions/addFaucetAccount.ts index 00d6b02..e21575a 100644 --- a/state/actions/addFaucetAccount.ts +++ b/state/actions/addFaucetAccount.ts @@ -27,7 +27,7 @@ export const names = [ * new account with 10 000 XRP. Hooks Testnet /newcreds endpoint * is protected with CORS so that's why we did our own endpoint */ -export const addFaucetAccount = async (showToast: boolean = false) => { +export const addFaucetAccount = async (name?: string, showToast: boolean = false) => { // Lets limit the number of faucet accounts to 5 for now if (state.accounts.length > 5) { return toast.error("You can only have maximum 6 accounts"); @@ -52,7 +52,7 @@ export const addFaucetAccount = async (showToast: boolean = false) => { } const currNames = state.accounts.map(acc => acc.name); state.accounts.push({ - name: names.filter(name => !currNames.includes(name))[0], + name: name || names.filter(name => !currNames.includes(name))[0], xrp: (json.xrp || 0 * 1000000).toString(), address: json.address, secret: json.secret, diff --git a/utils/helpers.ts b/utils/helpers.ts index 91a82b2..61b32ba 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -6,4 +6,10 @@ export const guessZipFileName = (files: File[]) => { let parts = (files.filter(f => f.name.endsWith('.c'))[0]?.name || 'hook').split('.') parts = parts.length > 1 ? parts.slice(0, -1) : parts return parts.join('') +} + +export const capitalize = (value?: string) => { + if (!value) return ''; + + return value[0].toLocaleUpperCase() + value.slice(1); } \ No newline at end of file From dfa35df465dc9ca7335631662776d892fe5c7966 Mon Sep 17 00:00:00 2001 From: muzam1l Date: Fri, 1 Jul 2022 16:27:13 +0530 Subject: [PATCH 2/5] reset input value on submit --- components/Accounts.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/Accounts.tsx b/components/Accounts.tsx index 6b53fb6..a979c62 100644 --- a/components/Accounts.tsx +++ b/components/Accounts.tsx @@ -530,10 +530,11 @@ const ImportAccountDialog = ({ const labelText = type === "import" ? "Account secret" : "Account Name"; const cancelText = type === "import" ? "Cancel" : "Skip"; - const handleSubmit = () => { + const handleSubmit = async () => { if (type === "create") { const name = capitalize(value); - addFaucetAccount(name, true); + await addFaucetAccount(name, true); + setValue(""); return; } importAccount(value); From 31ff7c0e2803787670931a6db4e492688040976e Mon Sep 17 00:00:00 2001 From: muzam1l Date: Fri, 1 Jul 2022 16:43:15 +0530 Subject: [PATCH 3/5] Name field in import account dialog. --- components/Accounts.tsx | 62 ++++++++++++++++------------------ state/actions/importAccount.ts | 4 +-- 2 files changed, 32 insertions(+), 34 deletions(-) diff --git a/components/Accounts.tsx b/components/Accounts.tsx index a979c62..301d173 100644 --- a/components/Accounts.tsx +++ b/components/Accounts.tsx @@ -31,7 +31,7 @@ import transactionsData from "../content/transactions.json"; import { SetHookDialog } from "./SetHookDialog"; import { addFunds } from "../state/actions/addFaucetAccount"; import { deleteHook } from "../state/actions/deployHook"; -import { capitalize } from '../utils/helpers'; +import { capitalize } from "../utils/helpers"; export const AccountDialog = ({ activeAccountAddress, @@ -523,28 +523,23 @@ const ImportAccountDialog = ({ }: { type?: "import" | "create"; }) => { - const [value, setValue] = useState(""); + const [secret, setSecret] = useState(""); + const [name, setName] = useState(""); const btnText = type === "import" ? "Import" : "Create"; const title = type === "import" ? "Import Account" : "Create Account"; - const labelText = type === "import" ? "Account secret" : "Account Name"; - const cancelText = type === "import" ? "Cancel" : "Skip"; const handleSubmit = async () => { if (type === "create") { - const name = capitalize(value); - await addFaucetAccount(name, true); - setValue(""); + const value = capitalize(name); + await addFaucetAccount(value, true); + setName(""); + setSecret(""); return; } - importAccount(value); - setValue(""); - }; - const handleCancel = () => { - setValue(""); - if (type === "create") { - addFaucetAccount(undefined, true); - } + importAccount(secret, name); + setName(""); + setSecret(""); }; return ( @@ -556,24 +551,29 @@ const ImportAccountDialog = ({ {title} - - {type === "import" ? ( - setValue(e.target.value)} - /> - ) : ( + + setValue(e.target.value)} + value={name} + onChange={e => setName(e.target.value)} /> + + {type === "import" && ( + + + setSecret(e.target.value)} + /> + )} @@ -585,12 +585,10 @@ const ImportAccountDialog = ({ }} > - + - diff --git a/state/actions/importAccount.ts b/state/actions/importAccount.ts index 2223e97..f0525b5 100644 --- a/state/actions/importAccount.ts +++ b/state/actions/importAccount.ts @@ -5,7 +5,7 @@ import state from '../index'; import { names } from './addFaucetAccount'; // Adds test account to global state with secret key -export const importAccount = (secret: string) => { +export const importAccount = (secret: string, name?: string) => { if (!secret) { return toast.error("You need to add secret!"); } @@ -27,7 +27,7 @@ export const importAccount = (secret: string) => { return toast.error(`Couldn't create account!`); } state.accounts.push({ - name: names[state.accounts.length], + name: name || names[state.accounts.length], address: account.address || "", secret: account.secret.familySeed || "", xrp: "0", From 53afb1d3d18a07be5eeee53730541f7fd9ddcd62 Mon Sep 17 00:00:00 2001 From: muzam1l Date: Fri, 1 Jul 2022 17:08:34 +0530 Subject: [PATCH 4/5] Fix html erros. --- components/Accounts.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/Accounts.tsx b/components/Accounts.tsx index 301d173..68da85f 100644 --- a/components/Accounts.tsx +++ b/components/Accounts.tsx @@ -548,9 +548,9 @@ const ImportAccountDialog = ({ {btnText} - - {title} - + + {title} + )} - + Date: Fri, 1 Jul 2022 19:41:52 +0530 Subject: [PATCH 5/5] Added optional tag to create account label. --- components/Accounts.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/Accounts.tsx b/components/Accounts.tsx index 68da85f..d670652 100644 --- a/components/Accounts.tsx +++ b/components/Accounts.tsx @@ -549,10 +549,12 @@ const ImportAccountDialog = ({ - {title} + {title} - +