From acd765bddf0945e867f62190cf99591d4dbd22fe Mon Sep 17 00:00:00 2001 From: bkioshn Date: Wed, 1 Feb 2023 17:19:09 +0700 Subject: [PATCH 1/4] fix: add empty states for select code modal --- .../code-select/CodeSelectModalButton.tsx | 25 +++++++-- .../code-select/MyStoredCodeContent.tsx | 51 +++++++++++++++++++ 2 files changed, 72 insertions(+), 4 deletions(-) create mode 100644 src/lib/pages/instantiate/component/code-select/MyStoredCodeContent.tsx diff --git a/src/lib/pages/instantiate/component/code-select/CodeSelectModalButton.tsx b/src/lib/pages/instantiate/component/code-select/CodeSelectModalButton.tsx index 66439e0b6..940eccaf1 100644 --- a/src/lib/pages/instantiate/component/code-select/CodeSelectModalButton.tsx +++ b/src/lib/pages/instantiate/component/code-select/CodeSelectModalButton.tsx @@ -10,12 +10,15 @@ import { Text, Heading, Icon, + Flex, } from "@chakra-ui/react"; import { IoList } from "react-icons/io5"; +import { EmptyState } from "lib/components/state/EmptyState"; import { useCodeListData } from "lib/pages/codes/data"; import { CodeTableReadOnly } from "./CodeTableReadOnly"; +import { MyStoredCodeContent } from "./MyStoredCodeContent"; interface CodeSelectModalButtonProps { onCodeSelect: (code: string) => void; @@ -67,9 +70,9 @@ export const CodeSelectModalButton = ({ My Stored Codes - Saved Codes - + {savedCodes.length ? ( + + ) : ( + + + + )} diff --git a/src/lib/pages/instantiate/component/code-select/MyStoredCodeContent.tsx b/src/lib/pages/instantiate/component/code-select/MyStoredCodeContent.tsx new file mode 100644 index 000000000..e00cf804a --- /dev/null +++ b/src/lib/pages/instantiate/component/code-select/MyStoredCodeContent.tsx @@ -0,0 +1,51 @@ +import { Flex, Text } from "@chakra-ui/react"; +import { useWallet } from "@cosmos-kit/react"; + +import { ConnectWalletBtn } from "lib/components/button"; +import { EmptyState } from "lib/components/state/EmptyState"; +import type { CodeInfo } from "lib/types"; + +import { CodeTableReadOnly } from "./CodeTableReadOnly"; + +interface MyStoredCodeContentProps { + handleSelect: (code: string) => void; + storedCodes: CodeInfo[]; +} + +export const MyStoredCodeContent = ({ + handleSelect, + storedCodes, +}: MyStoredCodeContentProps) => { + const { address } = useWallet(); + if (!address) { + return ( + + + Connect your wallet to upload and see your stored Codes. + + + + ); + } + + if (!storedCodes.length) { + return ( + + + + ); + } + return ; +}; From 66265a6fb903e6264dd61c3d03510e63d4a109d3 Mon Sep 17 00:00:00 2001 From: bkioshn Date: Wed, 1 Feb 2023 17:23:51 +0700 Subject: [PATCH 2/4] chore: add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 39f53f239..4e40d5349 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -105,6 +105,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#147](https://github.com/alleslabs/celatone-frontend/pull/147) Add empty state for select code modal - [#140](https://github.com/alleslabs/celatone-frontend/pull/140) Add placeholder texts to upload&instantiate, save code, and save&edit contract - [#139](https://github.com/alleslabs/celatone-frontend/pull/139) Fix Date to Dayjs - [#135](https://github.com/alleslabs/celatone-frontend/pull/135) Invalidate queries after update/clear admin tx From 57a98786df6cc869cb67f773efaf59e3eddd38d1 Mon Sep 17 00:00:00 2001 From: bkioshn Date: Thu, 2 Feb 2023 10:34:02 +0700 Subject: [PATCH 3/4] refactor: create MySavedCodeContent --- .../code-select/CodeSelectModalButton.tsx | 23 ++++---------- .../code-select/MySavedCodeContent.tsx | 30 +++++++++++++++++++ 2 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx diff --git a/src/lib/pages/instantiate/component/code-select/CodeSelectModalButton.tsx b/src/lib/pages/instantiate/component/code-select/CodeSelectModalButton.tsx index 940eccaf1..4cb8cd534 100644 --- a/src/lib/pages/instantiate/component/code-select/CodeSelectModalButton.tsx +++ b/src/lib/pages/instantiate/component/code-select/CodeSelectModalButton.tsx @@ -10,14 +10,12 @@ import { Text, Heading, Icon, - Flex, } from "@chakra-ui/react"; import { IoList } from "react-icons/io5"; -import { EmptyState } from "lib/components/state/EmptyState"; import { useCodeListData } from "lib/pages/codes/data"; -import { CodeTableReadOnly } from "./CodeTableReadOnly"; +import { MySavedCodeContent } from "./MySavedCodeContent"; import { MyStoredCodeContent } from "./MyStoredCodeContent"; interface CodeSelectModalButtonProps { @@ -83,21 +81,10 @@ export const CodeSelectModalButton = ({ > Saved Codes - {savedCodes.length ? ( - - ) : ( - - - - )} + diff --git a/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx b/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx new file mode 100644 index 000000000..aaf91d49e --- /dev/null +++ b/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx @@ -0,0 +1,30 @@ +import { Flex } from "@chakra-ui/react"; + +import { EmptyState } from "lib/components/state/EmptyState"; +import type { CodeInfo } from "lib/types"; + +import { CodeTableReadOnly } from "./CodeTableReadOnly"; + +interface MySavedCodeContentProps { + handleSelect: (code: string) => void; + savedCodes: CodeInfo[]; +} + +export const MySavedCodeContent = ({ + handleSelect, + savedCodes, +}: MySavedCodeContentProps) => { + if (savedCodes.length) { + return ; + } + return ( + + + + ); +}; From 1e5540ca2e68b7b30d841395e4d0434e9f0ca563 Mon Sep 17 00:00:00 2001 From: bkioshn Date: Thu, 2 Feb 2023 10:46:08 +0700 Subject: [PATCH 4/4] fix: fix logic in MySavedCodeContent --- .../code-select/MySavedCodeContent.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx b/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx index aaf91d49e..ceda4a295 100644 --- a/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx +++ b/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx @@ -14,17 +14,17 @@ export const MySavedCodeContent = ({ handleSelect, savedCodes, }: MySavedCodeContentProps) => { - if (savedCodes.length) { - return ; + if (!savedCodes.length) { + return ( + + + + ); } - return ( - - - - ); + return ; };