From 830848780ddbe5affb0b9d7dc0e7eb06f1103767 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 29 Sep 2023 17:09:03 +0700
Subject: [PATCH 1/3] feat: cmd button
---
CHANGELOG.md | 2 ++
src/lib/app-provider/hooks/index.ts | 1 +
src/lib/app-provider/hooks/usePlatform.ts | 15 +++++++++++++
.../pages/execute/components/JsonExecute.tsx | 10 ++++++---
.../interact/component/form/ExecuteArea.tsx | 21 ++++++++++++++++--
.../interact/component/form/ViewArea.tsx | 22 +++++++++++++++----
src/lib/pages/query/components/JsonQuery.tsx | 10 ++++++---
7 files changed, 69 insertions(+), 12 deletions(-)
create mode 100644 src/lib/app-provider/hooks/usePlatform.ts
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8872fbaa..0f33bc8d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -76,6 +76,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Improvements
+- [#553](https://github.com/alleslabs/celatone-frontend/pull/553) Use Cmd on Mac OS while Ctrl on others
+- [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
- [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
- [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
- [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts
index 1c16c0e72..adec0f195 100644
--- a/src/lib/app-provider/hooks/index.ts
+++ b/src/lib/app-provider/hooks/index.ts
@@ -14,3 +14,4 @@ export * from "./useConfig";
export * from "./useCurrentChain";
export * from "./useConvertHexAddress";
export * from "./usePreviousPathname";
+export * from "./usePlatform";
diff --git a/src/lib/app-provider/hooks/usePlatform.ts b/src/lib/app-provider/hooks/usePlatform.ts
new file mode 100644
index 000000000..a60bc5514
--- /dev/null
+++ b/src/lib/app-provider/hooks/usePlatform.ts
@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+
+export const usePlatform = () => {
+ return useMemo(() => {
+ if (navigator.userAgent.indexOf("Mac OS X") !== -1) {
+ return "Mac";
+ }
+ return "Windows";
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [navigator]);
+};
+
+export const useIsMac = () => {
+ return usePlatform() === "Mac";
+};
diff --git a/src/lib/pages/execute/components/JsonExecute.tsx b/src/lib/pages/execute/components/JsonExecute.tsx
index febcb971a..cdae57f55 100644
--- a/src/lib/pages/execute/components/JsonExecute.tsx
+++ b/src/lib/pages/execute/components/JsonExecute.tsx
@@ -10,6 +10,7 @@ import {
useExecuteContractTx,
useCurrentChain,
useMobile,
+ useIsMac,
} from "lib/app-provider";
import { useAttachFunds } from "lib/app-provider/hooks/useAttachFunds";
import { useSimulateFeeQuery } from "lib/app-provider/queries";
@@ -63,6 +64,7 @@ export const JsonExecute = ({
// --------------DEPENDENCIES----------------//
// ------------------------------------------//
const isMobile = useMobile();
+ const isMac = useIsMac();
const { address } = useCurrentChain();
const fabricateFee = useFabricateFee();
const executeTx = useExecuteContractTx();
@@ -237,10 +239,12 @@ export const JsonExecute = ({
assetsSelect,
]);
+ const isButtonDisabled = !enableExecute || !fee || isFetching;
useEffect(() => {
const keydownHandler = (e: KeyboardEvent) => {
// TODO: problem with safari if focusing in the textarea
- if (e.ctrlKey && e.key === "Enter") {
+ const specialKey = isMac ? e.metaKey : e.ctrlKey;
+ if (!isButtonDisabled && specialKey && e.key === "Enter") {
proceed();
}
};
@@ -294,12 +298,12 @@ export const JsonExecute = ({
fontSize="14px"
p="6px 16px"
onClick={proceed}
- isDisabled={!enableExecute || !fee || isFetching}
+ isDisabled={isButtonDisabled}
leftIcon={}
isLoading={processing}
sx={{ pointerEvents: processing && "none" }}
>
- Execute {!isMobile && "(Ctrl + Enter)"}
+ Execute {!isMobile && ` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
diff --git a/src/lib/pages/interact/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx
index f2e8dea8b..56578142f 100644
--- a/src/lib/pages/interact/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interact/component/form/ExecuteArea.tsx
@@ -9,6 +9,7 @@ import {
useSimulateFeeQuery,
useExecuteModuleTx,
useCurrentChain,
+ useIsMac,
} from "lib/app-provider";
import { AbiForm } from "lib/components/abi";
import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -35,6 +36,7 @@ export const ExecuteArea = ({
? fn.params.slice(1)
: fn.params;
+ const isMac = useIsMac();
const { address } = useCurrentChain();
const fabricateFee = useFabricateFee();
const executeModuleTx = useExecuteModuleTx();
@@ -119,6 +121,21 @@ export const ExecuteArea = ({
return () => {};
}, [address, data, enableExecute, executeFn, moduleAddress, moduleName]);
+ const isButtonDisabled = !enableExecute || !fee || isFetching;
+ useEffect(() => {
+ const keydownHandler = (e: KeyboardEvent) => {
+ // TODO: problem with safari if focusing in the textarea
+ const specialKey = isMac ? e.metaKey : e.ctrlKey;
+ if (!isButtonDisabled && specialKey && e.key === "Enter") {
+ proceed();
+ }
+ };
+ document.addEventListener("keydown", keydownHandler);
+ return () => {
+ document.removeEventListener("keydown", keydownHandler);
+ };
+ });
+
return (
{fn.is_entry ? (
@@ -166,12 +183,12 @@ export const ExecuteArea = ({
fontSize="14px"
p="6px 16px"
onClick={proceed}
- isDisabled={!enableExecute || !fee || isFetching}
+ isDisabled={isButtonDisabled}
leftIcon={}
isLoading={processing}
sx={{ pointerEvents: processing && "none" }}
>
- Execute
+ Execute{` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
diff --git a/src/lib/pages/interact/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx
index 579100ba8..7f3cbf693 100644
--- a/src/lib/pages/interact/component/form/ViewArea.tsx
+++ b/src/lib/pages/interact/component/form/ViewArea.tsx
@@ -9,8 +9,9 @@ import {
Spinner,
Text,
} from "@chakra-ui/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useIsMac } from "lib/app-provider";
import { AbiForm } from "lib/components/abi";
import { CustomIcon } from "lib/components/icon";
import JsonReadOnly from "lib/components/json/JsonReadOnly";
@@ -34,6 +35,7 @@ export const ViewArea = ({
moduleName: string;
fn: ExposedFunction;
}) => {
+ const isMac = useIsMac();
const [abiData, setAbiData] = useState({
typeArgs: getAbiInitialData(fn.generic_type_params.length),
args: getAbiInitialData(fn.params.length),
@@ -61,7 +63,19 @@ export const ViewArea = ({
};
const isLoading = queryFetching || queryRefetching;
- const isDisabled = Boolean(abiErrors.length);
+ const isButtonDisabled = Boolean(abiErrors.length);
+ useEffect(() => {
+ const keydownHandler = (e: KeyboardEvent) => {
+ // TODO: problem with safari if focusing in the textarea
+ const specialKey = isMac ? e.metaKey : e.ctrlKey;
+ if (!isButtonDisabled && specialKey && e.key === "Enter") handleQuery();
+ };
+ document.addEventListener("keydown", keydownHandler);
+ return () => {
+ document.removeEventListener("keydown", keydownHandler);
+ };
+ });
+
return (
@@ -79,11 +93,11 @@ export const ViewArea = ({
p="6px 16px"
size={{ base: "sm", md: "md" }}
onClick={handleQuery}
- isDisabled={isDisabled}
+ isDisabled={isButtonDisabled}
isLoading={isLoading}
leftIcon={}
>
- View
+ View{` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
diff --git a/src/lib/pages/query/components/JsonQuery.tsx b/src/lib/pages/query/components/JsonQuery.tsx
index b6857989a..399a0430d 100644
--- a/src/lib/pages/query/components/JsonQuery.tsx
+++ b/src/lib/pages/query/components/JsonQuery.tsx
@@ -9,6 +9,7 @@ import {
CELATONE_QUERY_KEYS,
useBaseApiRoute,
useCurrentChain,
+ useIsMac,
useMobile,
} from "lib/app-provider";
import { ContractCmdButton } from "lib/components/ContractCmdButton";
@@ -42,6 +43,7 @@ interface JsonQueryProps {
export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
const { track, trackAction } = useTrack();
const isMobile = useMobile();
+ const isMac = useIsMac();
const { isFetching: cmdsFetching, queryCmds } = useQueryCmds(contractAddress);
const lcdEndpoint = useBaseApiRoute("rest");
const { addActivity } = useContractStore();
@@ -88,10 +90,12 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
refetch();
};
+ const isButtonDisabled = jsonValidate(msg) !== null;
useEffect(() => {
const keydownHandler = (e: KeyboardEvent) => {
// TODO: problem with safari if focusing in the textarea
- if (e.ctrlKey && e.key === "Enter") handleQuery();
+ const specialKey = isMac ? e.metaKey : e.ctrlKey;
+ if (!isButtonDisabled && specialKey && e.key === "Enter") handleQuery();
};
document.addEventListener("keydown", keydownHandler);
return () => {
@@ -161,11 +165,11 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
p="6px 16px"
size={{ base: "sm", md: "md" }}
onClick={handleQuery}
- isDisabled={jsonValidate(msg) !== null}
+ isDisabled={isButtonDisabled}
isLoading={queryFetching || queryRefetching}
leftIcon={}
>
- Query {!isMobile && "(Ctrl + Enter)"}
+ Query{!isMobile && ` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
From faab0235925d3fcc229c680fe389a6d8b2060e7f Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 29 Sep 2023 17:19:51 +0700
Subject: [PATCH 2/3] fix: changelog
---
CHANGELOG.md | 1 -
1 file changed, 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f33bc8d0..917350389 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -78,7 +78,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- [#553](https://github.com/alleslabs/celatone-frontend/pull/553) Use Cmd on Mac OS while Ctrl on others
- [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
-- [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
- [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
- [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
- [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure
From 5f50013944517896889b1b4c31ea4d591958178d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 10 Oct 2023 11:54:06 +0700
Subject: [PATCH 3/3] fix: comment
---
src/lib/app-provider/hooks/usePlatform.ts | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
diff --git a/src/lib/app-provider/hooks/usePlatform.ts b/src/lib/app-provider/hooks/usePlatform.ts
index a60bc5514..c03f690f2 100644
--- a/src/lib/app-provider/hooks/usePlatform.ts
+++ b/src/lib/app-provider/hooks/usePlatform.ts
@@ -2,12 +2,13 @@ import { useMemo } from "react";
export const usePlatform = () => {
return useMemo(() => {
- if (navigator.userAgent.indexOf("Mac OS X") !== -1) {
- return "Mac";
+ if (typeof navigator === "undefined") {
+ return "Unknown";
}
- return "Windows";
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [navigator]);
+ const { userAgent } = navigator;
+ const isMac = /Mac OS X/.test(userAgent);
+ return isMac ? "Mac" : "Windows";
+ }, []);
};
export const useIsMac = () => {