From c1e1376fd5631bea0f091c89c926fe749cf5992d Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Wed, 10 May 2023 12:20:14 +0700 Subject: [PATCH 01/10] feat(components): change back btn to breadcrumb --- src/lib/pages/account-details/index.tsx | 92 +++++--- .../components/BlockDetailsTop.tsx | 103 +++++---- src/lib/pages/block-details/index.tsx | 31 ++- src/lib/pages/code-details/index.tsx | 167 +++++++++----- .../components/ContractTop.tsx | 212 +++++++++++------- src/lib/pages/contract-details/index.tsx | 2 - src/lib/pages/execute/index.tsx | 2 - src/lib/pages/faucet/index.tsx | 2 - .../components/DetailHeader.tsx | 8 +- src/lib/pages/query/index.tsx | 2 - .../pages/tx-details/components/TxHeader.tsx | 93 ++++---- src/lib/pages/tx-details/index.tsx | 36 ++- 12 files changed, 465 insertions(+), 285 deletions(-) diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx index 21c0747bd..5632d12fb 100644 --- a/src/lib/pages/account-details/index.tsx +++ b/src/lib/pages/account-details/index.tsx @@ -8,12 +8,14 @@ import { Tabs, Text, Image, + Breadcrumb, + BreadcrumbItem, } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { useValidateAddress } from "lib/app-provider"; -import { BackButton } from "lib/components/button"; +import { AppLink } from "lib/components/AppLink"; import { CopyLink } from "lib/components/CopyLink"; import { CustomTab } from "lib/components/CustomTab"; import { CustomIcon } from "lib/components/icon"; @@ -27,7 +29,12 @@ import { usePublicProjectBySlug, } from "lib/services/publicProjectService"; import type { HumanAddr } from "lib/types"; -import { formatPrice, getFirstQueryParam, scrollToTop } from "lib/utils"; +import { + formatPrice, + getFirstQueryParam, + scrollToTop, + truncate, +} from "lib/utils"; import { AssetsSection } from "./components/asset"; import { DelegationsSection } from "./components/delegations"; @@ -86,30 +93,64 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => { return ( <> - - - {publicDetail?.logo && ( - {publicDetail.name} + {publicDetail && ( + } + > + + + {publicDetail?.name} + + + + + {truncate(accountAddress)} + + + + )} + + + {publicDetail?.logo && ( + {publicDetail.name} + )} + + {displayName} + + + + + Wallet Address: + + - )} - - {displayName} - - - - - Wallet Address: - - + {publicInfo?.description && ( @@ -332,7 +373,6 @@ const AccountDetails = () => { return ( - {validateUserAddress(accountAddressParam) && validateContractAddress(accountAddressParam) ? ( diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx index 63c70261f..295b59ff2 100644 --- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx +++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx @@ -38,67 +38,72 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => { const disablePrevious = block <= 1; return ( - - - - - {blockData.height} - - - - - Block Hash: - - + + + + + + {blockData.height} + + + + {!disablePrevious && ( + + } + variant="ghost-gray" + /> + + )} + + } + variant="ghost-gray" + /> + + + - - - + + - {dateFromNow(blockData.timestamp)} + Block Hash: + - - - {formatUTC(blockData.timestamp)} - + + + + + {dateFromNow(blockData.timestamp)} + + + + + {formatUTC(blockData.timestamp)} + + {" "} - - {!disablePrevious && ( - - } - variant="ghost-gray" - /> - - )} - - } - variant="ghost-gray" - /> - - - ); }; diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx index b6132185b..b0d8966fd 100644 --- a/src/lib/pages/block-details/index.tsx +++ b/src/lib/pages/block-details/index.tsx @@ -1,7 +1,9 @@ +import { Breadcrumb, BreadcrumbItem, Text } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { useEffect } from "react"; -import { BackButton } from "lib/components/button"; +import { AppLink } from "lib/components/AppLink"; +import { CustomIcon } from "lib/components/icon"; import { Loading } from "lib/components/Loading"; import PageContainer from "lib/components/PageContainer"; import { EmptyState } from "lib/components/state"; @@ -30,7 +32,32 @@ const BlockDetail = () => { return ( - + } + > + + + Blocks + + + + + {blockData?.height} + + + {blockData ? ( <> diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx index da4d1c72e..ab74628da 100644 --- a/src/lib/pages/code-details/index.tsx +++ b/src/lib/pages/code-details/index.tsx @@ -1,9 +1,17 @@ -import { Divider, Flex, Heading, Text, Image } from "@chakra-ui/react"; +import { + Divider, + Flex, + Heading, + Text, + Image, + Breadcrumb, + BreadcrumbItem, +} from "@chakra-ui/react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; import { useEffect } from "react"; -import { BackButton } from "lib/components/button"; +import { AppLink } from "lib/components/AppLink"; import { CopyLink } from "lib/components/CopyLink"; import { CustomIcon } from "lib/components/icon"; import { GitHubLink } from "lib/components/links"; @@ -41,70 +49,112 @@ const CodeDetailsBody = observer( return ( <> - - - - {publicProject.publicDetail?.logo && ( - {publicProject.publicDetail.name} + + } + > + + {publicProject.publicCodeData?.name ? ( + + {publicProject.publicDetail?.name} + + ) : ( + + Recents Codes + )} - - {localCodeInfo?.name ?? - publicProject.publicCodeData?.name ?? - codeId} - + + + + {codeId} + + + + + + + {publicProject.publicDetail?.logo && ( + {publicProject.publicDetail.name} + )} + + {localCodeInfo?.name ?? + publicProject.publicCodeData?.name ?? + codeId} + + + - {publicProject.publicCodeData?.name && ( + + {publicProject.publicCodeData?.name && ( + + + Public Code Name: + + + {publicProject.publicCodeData.name} + + + )} - Public Code Name: + Code ID: - {publicProject.publicCodeData.name} + - )} - - - Code ID: - - - - - - CW2 Info: - - - {cw2Info ?? "N/A"} - + + + CW2 Info: + + + {cw2Info ?? "N/A"} + + + {publicProject.publicCodeData?.github && ( + + )} - {publicProject.publicCodeData?.github && ( - - )} - {publicProject.publicCodeData?.description && ( { if (data.isLoading) return ; return ( - {!isCodeId(codeIdParam) ? ( ) : ( diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx index c52d05e02..4efa2d31a 100644 --- a/src/lib/pages/contract-details/components/ContractTop.tsx +++ b/src/lib/pages/contract-details/components/ContractTop.tsx @@ -5,10 +5,13 @@ import { Button, IconButton, Image, + Breadcrumb, + BreadcrumbItem, } from "@chakra-ui/react"; import router from "next/router"; import { useInternalNavigate } from "lib/app-provider"; +import { AppLink } from "lib/components/AppLink"; import { AdminButton } from "lib/components/button"; import { CopyLink } from "lib/components/CopyLink"; import { CustomIcon } from "lib/components/icon"; @@ -19,7 +22,7 @@ import { SaveContractDetailsModal, } from "lib/components/modal"; import type { ContractAddr, ContractData } from "lib/types"; -import { getFirstQueryParam } from "lib/utils"; +import { getFirstQueryParam, truncate } from "lib/utils"; interface ContractTopProps { contractData: ContractData; @@ -94,94 +97,131 @@ export const ContractTop = ({ contractData }: ContractTopProps) => { }; return ( - - - - {publicProject.publicDetail?.logo && ( - {publicProject.publicDetail.name} - )} - - {displayName} - - - - + + {publicProject.publicDetail && ( + } > - Contract Address: - - - - - - Label: - - - {contractData.instantiateInfo?.label} - - - {publicProject.publicInfo?.name && ( - - - Public Contract Name: - - - {publicProject.publicInfo?.name} - - - )} - {publicProject.publicInfo?.github && ( - + + + {publicProject.publicDetail.name} + + + + + {truncate(contractAddress)} + + + )} - - - - - - - {contractLocalInfo && ( - } + + + + {publicProject.publicDetail?.logo && ( + {publicProject.publicDetail.name} - } - /> - )} - {renderSaveButton()} + )} + + {displayName} + + + + + + + + {contractLocalInfo && ( + } + /> + } + /> + )} + {renderSaveButton()} + + + + + + + Contract Address: + + + + + + Label: + + + {contractData.instantiateInfo?.label} + + + {publicProject.publicInfo?.name && ( + + + Public Contract Name: + + + {publicProject.publicInfo?.name} + + + )} + {publicProject.publicInfo?.github && ( + + )} + diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx index 7906997e1..36f204c31 100644 --- a/src/lib/pages/contract-details/index.tsx +++ b/src/lib/pages/contract-details/index.tsx @@ -11,7 +11,6 @@ import { useRouter } from "next/router"; import { useEffect } from "react"; import { useValidateAddress } from "lib/app-provider"; -import { BackButton } from "lib/components/button"; import { CustomTab } from "lib/components/CustomTab"; import { Loading } from "lib/components/Loading"; import PageContainer from "lib/components/PageContainer"; @@ -149,7 +148,6 @@ const ContractDetails = observer(() => { if (isLoading) return ; return ( - {validateContractAddress(contractAddressParam) ? ( ) : ( diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx index 91eee9227..9f9ac0ccb 100644 --- a/src/lib/pages/execute/index.tsx +++ b/src/lib/pages/execute/index.tsx @@ -4,7 +4,6 @@ import { useRouter } from "next/router"; import { useCallback, useEffect, useState } from "react"; import { useInternalNavigate } from "lib/app-provider"; -import { BackButton } from "lib/components/button"; import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert"; import { ContractSelectSection } from "lib/components/ContractSelectSection"; import { CustomIcon } from "lib/components/icon"; @@ -85,7 +84,6 @@ const Execute = () => { return ( {isFetching && } - Execute Contract diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx index b0fe9ad58..d80548c23 100644 --- a/src/lib/pages/faucet/index.tsx +++ b/src/lib/pages/faucet/index.tsx @@ -17,7 +17,6 @@ import { useInternalNavigate, useValidateAddress, } from "lib/app-provider"; -import { BackButton } from "lib/components/button"; import type { FormStatus } from "lib/components/forms"; import { TextInput } from "lib/components/forms"; import { CustomIcon } from "lib/components/icon"; @@ -144,7 +143,6 @@ const Faucet = () => { return ( - Osmosis Testnet Faucet diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx index 82313745b..0d9f5aecf 100644 --- a/src/lib/pages/public-project/components/DetailHeader.tsx +++ b/src/lib/pages/public-project/components/DetailHeader.tsx @@ -51,18 +51,18 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => ( justifyContent="space-between" alignItems="flex-start" w="full" - mt={2} + mt={6} gap={5} > - + {details?.logo && ( Celatone )} diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx index 14e5861c9..5cbbde271 100644 --- a/src/lib/pages/query/index.tsx +++ b/src/lib/pages/query/index.tsx @@ -5,7 +5,6 @@ import { useRouter } from "next/router"; import { useCallback, useEffect, useState } from "react"; import { useInternalNavigate, useLCDEndpoint } from "lib/app-provider"; -import { BackButton } from "lib/components/button"; import { ContractSelectSection } from "lib/components/ContractSelectSection"; import { CustomIcon } from "lib/components/icon"; import { LoadingOverlay } from "lib/components/LoadingOverlay"; @@ -93,7 +92,6 @@ const Query = () => { return ( {isFetching && } - Query Contract diff --git a/src/lib/pages/tx-details/components/TxHeader.tsx b/src/lib/pages/tx-details/components/TxHeader.tsx index ca000d1ff..1200cfb43 100644 --- a/src/lib/pages/tx-details/components/TxHeader.tsx +++ b/src/lib/pages/tx-details/components/TxHeader.tsx @@ -26,9 +26,8 @@ export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => { - - - Transaction Hash: - - - - - - {txData.isTxFailed ? ( + + + + Transaction Hash: + + + + + + {txData.isTxFailed ? ( + <> + +

Failed

+ + ) : ( + <> + +

Success

+ + )} + + + {txData.timestamp ? ( <> - -

Failed

+

{dateFromNow(txData.timestamp)}

+ +

{formatUTC(txData.timestamp)}

) : ( - <> - -

Success

- +

N/A

)} - - {txData.timestamp ? ( - <> -

{dateFromNow(txData.timestamp)}

- -

{formatUTC(txData.timestamp)}

- - ) : ( -

N/A

- )} ); diff --git a/src/lib/pages/tx-details/index.tsx b/src/lib/pages/tx-details/index.tsx index 9d94697db..5202c18b9 100644 --- a/src/lib/pages/tx-details/index.tsx +++ b/src/lib/pages/tx-details/index.tsx @@ -1,15 +1,16 @@ -import { Flex } from "@chakra-ui/react"; +import { Breadcrumb, BreadcrumbItem, Flex, Text } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { useEffect } from "react"; -import { BackButton } from "lib/components/button"; +import { AppLink } from "lib/components/AppLink"; +import { CustomIcon } from "lib/components/icon"; import { Loading } from "lib/components/Loading"; import PageContainer from "lib/components/PageContainer"; import { EmptyState } from "lib/components/state/EmptyState"; import { AmpEvent, AmpTrack } from "lib/services/amplitude"; import { useAssetInfos } from "lib/services/assetService"; import { useTxData } from "lib/services/txService"; -import { getFirstQueryParam } from "lib/utils"; +import { getFirstQueryParam, truncate } from "lib/utils"; import { TxHeader, TxInfo } from "./components"; import { MessageSection } from "./components/MessageSection"; @@ -44,10 +45,35 @@ const TxDetails = () => { return ( - + } + > + + + Transactions + + + + + {truncate(txData?.txhash)} + + + {txData ? ( <> - + From d32203c4f7cd7e50a7c9646ca2f264bd0aac9d0a Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Wed, 10 May 2023 13:57:25 +0700 Subject: [PATCH 02/10] feat(components): create breadcrumb component --- src/lib/components/DefaultBreadcrumb.tsx | 58 ++++++++++++++++++ src/lib/pages/account-details/index.tsx | 42 +++---------- src/lib/pages/block-details/index.tsx | 35 ++--------- src/lib/pages/code-details/index.tsx | 60 +++++-------------- .../components/ContractTop.tsx | 41 +++---------- src/lib/pages/contract-list/slug.tsx | 35 ++--------- .../components/DetailHeader.tsx | 43 +++---------- src/lib/pages/tx-details/index.tsx | 36 +++-------- 8 files changed, 117 insertions(+), 233 deletions(-) create mode 100644 src/lib/components/DefaultBreadcrumb.tsx diff --git a/src/lib/components/DefaultBreadcrumb.tsx b/src/lib/components/DefaultBreadcrumb.tsx new file mode 100644 index 000000000..c5740f264 --- /dev/null +++ b/src/lib/components/DefaultBreadcrumb.tsx @@ -0,0 +1,58 @@ +import { Breadcrumb, BreadcrumbItem, Text } from "@chakra-ui/react"; + +import { AppLink } from "./AppLink"; +import { CustomIcon } from "./icon"; + +interface BreadcrumbProps { + primaryPage: string; + primaryPath: string; + secondaryPage?: string; + secondaryPath?: string; + currentPage: string; + mb?: string; +} +export const DefualtBreadcrumb = ({ + primaryPage, + primaryPath, + secondaryPage = "", + secondaryPath = "", + currentPage, + mb = "0", +}: BreadcrumbProps) => ( + } + > + + + {primaryPage} + + + {secondaryPage && ( + + + {secondaryPage} + + + )} + + + {currentPage} + + + +); diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx index 5632d12fb..d032c4b05 100644 --- a/src/lib/pages/account-details/index.tsx +++ b/src/lib/pages/account-details/index.tsx @@ -8,16 +8,14 @@ import { Tabs, Text, Image, - Breadcrumb, - BreadcrumbItem, } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { useValidateAddress } from "lib/app-provider"; -import { AppLink } from "lib/components/AppLink"; import { CopyLink } from "lib/components/CopyLink"; import { CustomTab } from "lib/components/CustomTab"; +import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb"; import { CustomIcon } from "lib/components/icon"; import PageContainer from "lib/components/PageContainer"; import { InvalidState } from "lib/components/state"; @@ -95,36 +93,14 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => { <> {publicDetail && ( - } - > - - - {publicDetail?.name} - - - - - {truncate(accountAddress)} - - - + )} diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx index b0d8966fd..9d05d36f8 100644 --- a/src/lib/pages/block-details/index.tsx +++ b/src/lib/pages/block-details/index.tsx @@ -1,9 +1,7 @@ -import { Breadcrumb, BreadcrumbItem, Text } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { useEffect } from "react"; -import { AppLink } from "lib/components/AppLink"; -import { CustomIcon } from "lib/components/icon"; +import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb"; import { Loading } from "lib/components/Loading"; import PageContainer from "lib/components/PageContainer"; import { EmptyState } from "lib/components/state"; @@ -32,32 +30,11 @@ const BlockDetail = () => { return ( - } - > - - - Blocks - - - - - {blockData?.height} - - - + {blockData ? ( <> diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx index ab74628da..7d50e3531 100644 --- a/src/lib/pages/code-details/index.tsx +++ b/src/lib/pages/code-details/index.tsx @@ -1,18 +1,10 @@ -import { - Divider, - Flex, - Heading, - Text, - Image, - Breadcrumb, - BreadcrumbItem, -} from "@chakra-ui/react"; +import { Divider, Flex, Heading, Text, Image } from "@chakra-ui/react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; import { useEffect } from "react"; -import { AppLink } from "lib/components/AppLink"; import { CopyLink } from "lib/components/CopyLink"; +import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb"; import { CustomIcon } from "lib/components/icon"; import { GitHubLink } from "lib/components/links"; import { Loading } from "lib/components/Loading"; @@ -50,41 +42,19 @@ const CodeDetailsBody = observer( return ( <> - } - > - - {publicProject.publicCodeData?.name ? ( - - {publicProject.publicDetail?.name} - - ) : ( - - Recents Codes - - )} - - - - {codeId} - - - + diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx index 4efa2d31a..bc1c329a4 100644 --- a/src/lib/pages/contract-details/components/ContractTop.tsx +++ b/src/lib/pages/contract-details/components/ContractTop.tsx @@ -5,15 +5,13 @@ import { Button, IconButton, Image, - Breadcrumb, - BreadcrumbItem, } from "@chakra-ui/react"; import router from "next/router"; import { useInternalNavigate } from "lib/app-provider"; -import { AppLink } from "lib/components/AppLink"; import { AdminButton } from "lib/components/button"; import { CopyLink } from "lib/components/CopyLink"; +import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb"; import { CustomIcon } from "lib/components/icon"; import { GitHubLink } from "lib/components/links"; import { @@ -100,35 +98,14 @@ export const ContractTop = ({ contractData }: ContractTopProps) => { {publicProject.publicDetail && ( - } - > - - - {publicProject.publicDetail.name} - - - - - {truncate(contractAddress)} - - - + )} diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index a6ae43a94..45446a8b8 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -5,16 +5,13 @@ import { Menu, MenuButton, MenuList, - Breadcrumb, - BreadcrumbItem, - Text, } from "@chakra-ui/react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; import { useEffect } from "react"; import { useInternalNavigate } from "lib/app-provider"; -import { AppLink } from "lib/components/AppLink"; +import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb"; import { CustomIcon } from "lib/components/icon"; import { EditListNameModal, @@ -80,31 +77,11 @@ const ContractsByList = observer(() => { return ( - } - > - - - Contract Lists - - - - - {contractListInfo.name} - - - + ( <> - } - > - - - Public Projects - - - - - {details?.name} - - - + { return ( - } - > - - - Transactions - - - - - {truncate(txData?.txhash)} - - - + {txData ? ( <> From 66fbbf957cb8fa3e4806e24fbd345595e5e6c3de Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Wed, 10 May 2023 14:02:57 +0700 Subject: [PATCH 03/10] fix(components): add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 820ac7839..a4a07db53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -41,6 +41,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#323](https://github.com/alleslabs/celatone-frontend/pull/323) Revise back button and breadcrumb components - [#298](https://github.com/alleslabs/celatone-frontend/pull/298) Show deposit/voting period from gov params and add minimum required alert ### Bug fixes From bbc073a9a35aa5f25f0f32af1b06a74a9306ce28 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Wed, 10 May 2023 14:38:28 +0700 Subject: [PATCH 04/10] fix(components): fix as comment --- src/lib/components/DefaultBreadcrumb.tsx | 2 +- src/lib/pages/account-details/index.tsx | 4 ++-- src/lib/pages/block-details/components/BlockDetailsTop.tsx | 2 +- src/lib/pages/block-details/index.tsx | 4 ++-- src/lib/pages/code-details/index.tsx | 4 ++-- src/lib/pages/contract-details/components/ContractTop.tsx | 4 ++-- src/lib/pages/contract-list/slug.tsx | 4 ++-- src/lib/pages/public-project/components/DetailHeader.tsx | 4 ++-- src/lib/pages/tx-details/index.tsx | 4 ++-- 9 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/lib/components/DefaultBreadcrumb.tsx b/src/lib/components/DefaultBreadcrumb.tsx index c5740f264..577262488 100644 --- a/src/lib/components/DefaultBreadcrumb.tsx +++ b/src/lib/components/DefaultBreadcrumb.tsx @@ -11,7 +11,7 @@ interface BreadcrumbProps { currentPage: string; mb?: string; } -export const DefualtBreadcrumb = ({ +export const DefaultBreadcrumb = ({ primaryPage, primaryPath, secondaryPage = "", diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx index d032c4b05..0a8e602a2 100644 --- a/src/lib/pages/account-details/index.tsx +++ b/src/lib/pages/account-details/index.tsx @@ -15,7 +15,7 @@ import { useEffect, useState } from "react"; import { useValidateAddress } from "lib/app-provider"; import { CopyLink } from "lib/components/CopyLink"; import { CustomTab } from "lib/components/CustomTab"; -import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb"; +import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb"; import { CustomIcon } from "lib/components/icon"; import PageContainer from "lib/components/PageContainer"; import { InvalidState } from "lib/components/state"; @@ -93,7 +93,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => { <> {publicDetail && ( - { {formatUTC(blockData.timestamp)} - {" "} + diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx index 9d05d36f8..8ea079b15 100644 --- a/src/lib/pages/block-details/index.tsx +++ b/src/lib/pages/block-details/index.tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; import { useEffect } from "react"; -import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb"; +import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb"; import { Loading } from "lib/components/Loading"; import PageContainer from "lib/components/PageContainer"; import { EmptyState } from "lib/components/state"; @@ -30,7 +30,7 @@ const BlockDetail = () => { return ( - - { {publicProject.publicDetail && ( - { return ( - ( <> - { return ( - Date: Wed, 10 May 2023 15:46:52 +0700 Subject: [PATCH 05/10] fix(components): add icon --- src/lib/pages/account-details/index.tsx | 1 + src/lib/pages/blocks/components/BlocksRow.tsx | 2 +- src/lib/pages/code-details/index.tsx | 1 + src/lib/pages/contract-details/components/ContractTop.tsx | 5 +++++ 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx index 0a8e602a2..16c772195 100644 --- a/src/lib/pages/account-details/index.tsx +++ b/src/lib/pages/account-details/index.tsx @@ -104,6 +104,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => { )} + {publicDetail?.logo && ( { {truncate(blockData.hash.toUpperCase())} - + + {publicProject.publicDetail?.logo && ( { + {publicProject.publicDetail?.logo && ( Date: Fri, 12 May 2023 15:10:43 +0700 Subject: [PATCH 06/10] fix(components): change mb from string to number --- src/lib/components/DefaultBreadcrumb.tsx | 6 +++--- src/lib/pages/account-details/index.tsx | 2 +- src/lib/pages/contract-details/components/ContractTop.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/components/DefaultBreadcrumb.tsx b/src/lib/components/DefaultBreadcrumb.tsx index 577262488..7f4c8725e 100644 --- a/src/lib/components/DefaultBreadcrumb.tsx +++ b/src/lib/components/DefaultBreadcrumb.tsx @@ -9,7 +9,7 @@ interface BreadcrumbProps { secondaryPage?: string; secondaryPath?: string; currentPage: string; - mb?: string; + mb?: number; } export const DefaultBreadcrumb = ({ primaryPage, @@ -17,13 +17,13 @@ export const DefaultBreadcrumb = ({ secondaryPage = "", secondaryPath = "", currentPage, - mb = "0", + mb = 0, }: BreadcrumbProps) => ( } + separator={} > { {publicDetail && ( { {publicProject.publicDetail && ( Date: Tue, 16 May 2023 11:34:08 +0700 Subject: [PATCH 07/10] chore: rename --- .../{DefaultBreadcrumb.tsx => Breadcrumb.tsx} | 25 +++++++++++-------- src/lib/pages/account-details/index.tsx | 4 +-- src/lib/pages/block-details/index.tsx | 4 +-- src/lib/pages/code-details/index.tsx | 4 +-- .../components/ContractTop.tsx | 4 +-- src/lib/pages/contract-list/slug.tsx | 4 +-- .../components/DetailHeader.tsx | 4 +-- src/lib/pages/tx-details/index.tsx | 4 +-- 8 files changed, 29 insertions(+), 24 deletions(-) rename src/lib/components/{DefaultBreadcrumb.tsx => Breadcrumb.tsx} (73%) diff --git a/src/lib/components/DefaultBreadcrumb.tsx b/src/lib/components/Breadcrumb.tsx similarity index 73% rename from src/lib/components/DefaultBreadcrumb.tsx rename to src/lib/components/Breadcrumb.tsx index 7f4c8725e..717ae0e3a 100644 --- a/src/lib/components/DefaultBreadcrumb.tsx +++ b/src/lib/components/Breadcrumb.tsx @@ -1,4 +1,8 @@ -import { Breadcrumb, BreadcrumbItem, Text } from "@chakra-ui/react"; +import { + Breadcrumb as ChakraBreadcrumb, + BreadcrumbItem as ChakraBreadcrumbItem, + Text, +} from "@chakra-ui/react"; import { AppLink } from "./AppLink"; import { CustomIcon } from "./icon"; @@ -11,7 +15,8 @@ interface BreadcrumbProps { currentPage: string; mb?: number; } -export const DefaultBreadcrumb = ({ + +export const Breadcrumb = ({ primaryPage, primaryPath, secondaryPage = "", @@ -19,31 +24,31 @@ export const DefaultBreadcrumb = ({ currentPage, mb = 0, }: BreadcrumbProps) => ( - } > - {primaryPage} - + {secondaryPage && ( - {secondaryPage} - + )} - + {currentPage} - - + + ); diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx index b2d491bd5..52816fc2e 100644 --- a/src/lib/pages/account-details/index.tsx +++ b/src/lib/pages/account-details/index.tsx @@ -12,9 +12,9 @@ import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { useValidateAddress } from "lib/app-provider"; +import { Breadcrumb } from "lib/components/Breadcrumb"; import { CopyLink } from "lib/components/CopyLink"; import { CustomTab } from "lib/components/CustomTab"; -import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb"; import { CustomIcon } from "lib/components/icon"; import { Loading } from "lib/components/Loading"; import PageContainer from "lib/components/PageContainer"; @@ -93,7 +93,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => { <> {publicDetail && ( - { return ( - - { {publicProject.publicDetail && ( - { return ( - ( <> - { return ( - Date: Fri, 26 May 2023 16:20:36 +0700 Subject: [PATCH 08/10] fix(components): restructure breadcrumb items into array --- src/lib/components/Breadcrumb.tsx | 91 ++++++++----------- src/lib/pages/account-details/index.tsx | 13 ++- src/lib/pages/block-details/index.tsx | 7 +- src/lib/pages/code-details/index.tsx | 26 +++--- .../components/ContractTop.tsx | 13 ++- src/lib/pages/contract-list/slug.tsx | 7 +- .../components/DetailHeader.tsx | 7 +- src/lib/pages/tx-details/index.tsx | 7 +- 8 files changed, 87 insertions(+), 84 deletions(-) diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx index 717ae0e3a..43deb221d 100644 --- a/src/lib/components/Breadcrumb.tsx +++ b/src/lib/components/Breadcrumb.tsx @@ -2,62 +2,51 @@ import { Breadcrumb as ChakraBreadcrumb, BreadcrumbItem as ChakraBreadcrumbItem, Text, + Flex, } from "@chakra-ui/react"; import { AppLink } from "./AppLink"; import { CustomIcon } from "./icon"; -interface BreadcrumbProps { - primaryPage: string; - primaryPath: string; - secondaryPage?: string; - secondaryPath?: string; - currentPage: string; - mb?: number; -} +type BreadcrumbItemProps = { + text: string | null; + href?: string; +}; -export const Breadcrumb = ({ - primaryPage, - primaryPath, - secondaryPage = "", - secondaryPath = "", - currentPage, - mb = 0, -}: BreadcrumbProps) => ( - } - > - - - {primaryPage} - - - {secondaryPage && ( - - - {secondaryPage} - - - )} - - - {currentPage} - - +type BreadcrumbProps = { + items: BreadcrumbItemProps[]; + mb?: number; +}; +export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => ( + + {items.map((item) => ( + <> + {item.href ? ( + + + + {item.text} + + + + + ) : ( + + + {item.text} + + + )} + + ))} ); diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx index 52816fc2e..227ddd4a7 100644 --- a/src/lib/pages/account-details/index.tsx +++ b/src/lib/pages/account-details/index.tsx @@ -94,12 +94,15 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => { {publicDetail && ( )} diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx index ab58b8d45..3977a638a 100644 --- a/src/lib/pages/block-details/index.tsx +++ b/src/lib/pages/block-details/index.tsx @@ -31,9 +31,10 @@ const BlockDetail = () => { return ( {blockData ? ( <> diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx index 20d5342ea..ed856f78a 100644 --- a/src/lib/pages/code-details/index.tsx +++ b/src/lib/pages/code-details/index.tsx @@ -43,17 +43,21 @@ const CodeDetailsBody = observer( <> diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx index 43b0633de..45ef2c67b 100644 --- a/src/lib/pages/contract-details/components/ContractTop.tsx +++ b/src/lib/pages/contract-details/components/ContractTop.tsx @@ -99,12 +99,15 @@ export const ContractTop = ({ contractData }: ContractTopProps) => { {publicProject.publicDetail && ( )} diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index 23adc4726..f234af1e8 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -78,9 +78,10 @@ const ContractsByList = observer(() => { return ( ( <> { return ( {txData ? ( <> From cc7ddc33e1963a451941669477369176657d50a0 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Tue, 30 May 2023 10:48:25 +0700 Subject: [PATCH 09/10] fix(components): refactor and remove unneeded flex --- src/lib/components/Breadcrumb.tsx | 64 +++---- src/lib/pages/account-details/index.tsx | 2 +- .../components/BlockDetailsTop.tsx | 2 +- src/lib/pages/block-details/index.tsx | 2 +- src/lib/pages/code-details/index.tsx | 157 +++++++++--------- .../components/DetailHeader.tsx | 2 +- 6 files changed, 113 insertions(+), 116 deletions(-) diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx index 43deb221d..40b5115b7 100644 --- a/src/lib/components/Breadcrumb.tsx +++ b/src/lib/components/Breadcrumb.tsx @@ -2,14 +2,15 @@ import { Breadcrumb as ChakraBreadcrumb, BreadcrumbItem as ChakraBreadcrumbItem, Text, - Flex, } from "@chakra-ui/react"; +import type { Option } from "lib/types"; + import { AppLink } from "./AppLink"; import { CustomIcon } from "./icon"; type BreadcrumbItemProps = { - text: string | null; + text: Option; href?: string; }; @@ -17,36 +18,39 @@ type BreadcrumbProps = { items: BreadcrumbItemProps[]; mb?: number; }; + export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => ( - - {items.map((item) => ( - <> - {item.href ? ( - - - - {item.text} - - - - - ) : ( - - + } + > + {items.map((item) => + item.href ? ( + item.text && ( + + {item.text} - + - )} - - ))} + ) + ) : ( + + + {item.text} + + + ) + )} ); diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx index 595f04058..1cc2c2a31 100644 --- a/src/lib/pages/account-details/index.tsx +++ b/src/lib/pages/account-details/index.tsx @@ -107,7 +107,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => { )} - + {publicDetail?.logo && ( { - + {blockData.height} diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx index 36d3400cf..4400562e1 100644 --- a/src/lib/pages/block-details/index.tsx +++ b/src/lib/pages/block-details/index.tsx @@ -29,7 +29,7 @@ const BlockDetail = () => { {blockData ? ( diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx index 89ca9ec5f..00465a752 100644 --- a/src/lib/pages/code-details/index.tsx +++ b/src/lib/pages/code-details/index.tsx @@ -41,94 +41,87 @@ const CodeDetailsBody = observer( return ( <> - - - - - - - {publicProject.publicDetail?.logo && ( - {publicProject.publicDetail.name} - )} - - {localCodeInfo?.name ?? - publicProject.publicCodeData?.name ?? - codeId} - - - - - - {publicProject.publicCodeData?.name && ( - - - Public Code Name: - - - {publicProject.publicCodeData.name} - - - )} - - - Code ID: - - + + + + + {publicProject.publicDetail?.logo && ( + {publicProject.publicDetail.name} - + )} + + {localCodeInfo?.name ?? + publicProject.publicCodeData?.name ?? + codeId} + + + + + + {publicProject.publicCodeData?.name && ( - CW2 Info: - - - {cw2Info ?? "N/A"} + Public Code Name: + {publicProject.publicCodeData.name} - {publicProject.publicCodeData?.github && ( - - )} + )} + + + Code ID: + + + + + + CW2 Info: + + + {cw2Info ?? "N/A"} + + {publicProject.publicCodeData?.github && ( + + )} {publicProject.publicCodeData?.description && ( diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx index 0fae6e79f..6321074af 100644 --- a/src/lib/pages/public-project/components/DetailHeader.tsx +++ b/src/lib/pages/public-project/components/DetailHeader.tsx @@ -16,7 +16,7 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => ( Date: Tue, 30 May 2023 14:14:41 +0700 Subject: [PATCH 10/10] fix: comment Co-authored-by: jennieramida --- src/lib/pages/code-details/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx index 00465a752..a12a341a3 100644 --- a/src/lib/pages/code-details/index.tsx +++ b/src/lib/pages/code-details/index.tsx @@ -47,7 +47,7 @@ const CodeDetailsBody = observer( text: publicProject.publicCodeData?.name ? "Public Projects" : "Codes", - href: publicProject.publicCodeData?.name ? `/projects` : "/codes", + href: publicProject.publicCodeData?.name ? "/projects" : "/codes", }, { text: publicProject.publicDetail?.name,