From f4135eccc18d6ea5e32bd01c8e99c043c2e4c751 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Mon, 22 Jul 2024 10:58:33 +0200 Subject: [PATCH] Add conditional rendering and kbd shortcut --- .../[chainName]/[address]/transaction/new.tsx | 68 ++++++++++++++++--- 1 file changed, 59 insertions(+), 9 deletions(-) diff --git a/pages/[chainName]/[address]/transaction/new.tsx b/pages/[chainName]/[address]/transaction/new.tsx index 2302ef1..b08bc36 100644 --- a/pages/[chainName]/[address]/transaction/new.tsx +++ b/pages/[chainName]/[address]/transaction/new.tsx @@ -1,16 +1,28 @@ +import CreateTxForm from "@/components/forms/CreateTxForm"; +import Head from "@/components/head"; +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/components/ui/breadcrumb"; import { isChainInfoFilled } from "@/context/ChainsContext/helpers"; import { Account } from "@cosmjs/stargate"; import { assert } from "@cosmjs/utils"; +import Link from "next/link"; import { useRouter } from "next/router"; -import { useEffect, useState } from "react"; -import CreateTxForm from "../../../../components/forms/CreateTxForm"; +import { useCallback, useEffect, useState } from "react"; +import OldCreateTxForm from "../../../../components/forms/OldCreateTxForm"; import Page from "../../../../components/layout/Page"; import StackableContainer from "../../../../components/layout/StackableContainer"; import { useChains } from "../../../../context/ChainsContext"; -import { isAccount, getHostedMultisig } from "../../../../lib/multisigHelpers"; +import { getHostedMultisig, isAccount } from "../../../../lib/multisigHelpers"; -const NewTransactionPage = () => { +export default function CreateTxPage() { const { chain } = useChains(); + const [showOldForm, setShowOldForm] = useState(true); const [accountOnChain, setAccountOnChain] = useState(null); const [hasAccountError, setHasAccountError] = useState(false); const router = useRouter(); @@ -41,7 +53,21 @@ const NewTransactionPage = () => { })(); }, [chain, multisigAddress]); - return ( + const toggleOldNewForm = useCallback((event: KeyboardEvent) => { + if (event.ctrlKey && event.key === ".") { + setShowOldForm((prev) => !prev); + event.preventDefault(); + } + }, []); + + useEffect(() => { + window.addEventListener("keyup", toggleOldNewForm); + return () => { + window.removeEventListener("keyup", toggleOldNewForm); + }; + }, [toggleOldNewForm]); + + return showOldForm ? ( { ) : null} {accountOnChain && multisigAddress ? ( - + ) : null} + ) : ( +
+ + + + + + {chain.registryName ? Home : null} + + + + + + {chain.registryName ? ( + Multisig + ) : null} + + + + + Account + + + + +
); -}; - -export default NewTransactionPage; +}