cerc-io/cosmos-multisig-ui
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Add conditional rendering and kbd shortcut

Browse Source
This commit is contained in:
abefernan 2024-07-22 10:58:33 +02:00
parent 180182ab69
commit f4135eccc1
No known key found for this signature in database
1 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
pages/[chainName]/[address]/transaction/new.tsx
View File

@ -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<Account | null>(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 ? (
<Page
goBack={
chain.registryName
@ -80,7 +106,7 @@ const NewTransactionPage = () => {
</StackableContainer>
) : null}
{accountOnChain && multisigAddress ? (
<CreateTxForm senderAddress={multisigAddress} accountOnChain={accountOnChain} />
<OldCreateTxForm senderAddress={multisigAddress} accountOnChain={accountOnChain} />
) : null}
</StackableContainer>
<style jsx>{`
@ -95,7 +121,31 @@ const NewTransactionPage = () => {
}
`}</style>
</Page>
) : (
<div className="m-4 mt-8 flex max-w-xl flex-1 flex-col justify-center gap-4">
<Head title={`${chain.chainDisplayName || "Cosmos Hub"} Multisig Manager`} />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
{chain.registryName ? <Link href={`/${chain.registryName}`}>Home</Link> : null}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
{chain.registryName ? (
<Link href={`/${chain.registryName}/${multisigAddress}`}>Multisig</Link>
) : null}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Account</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<CreateTxForm />
</div>
);
};
export default NewTransactionPage;
}