From 3ff25032772fdfeb6924e6161ac6d2a6a91bc780 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Thu, 9 Mar 2023 17:58:44 +0700 Subject: [PATCH 1/6] feat(components): fix css for new features attach asset, faucet, sidebar collapsable --- src/lib/components/ContractSelectSection.tsx | 4 +++- src/lib/components/copy/Copier.tsx | 2 +- src/lib/components/forms/TextInput.tsx | 16 +++++++++------- src/lib/components/json/JsonReadOnly.tsx | 2 +- .../select-contract/SelectContractAdmin.tsx | 2 +- .../SelectContractInstantiator.tsx | 2 +- src/lib/layout/navbar/Collapse.tsx | 11 +++++++++++ src/lib/layout/navbar/index.tsx | 2 +- src/lib/pages/faucet/index.tsx | 3 ++- src/lib/pages/query/components/QueryArea.tsx | 10 +++++----- 10 files changed, 35 insertions(+), 19 deletions(-) diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx index f47bd541b..9d99daf82 100644 --- a/src/lib/components/ContractSelectSection.tsx +++ b/src/lib/components/ContractSelectSection.tsx @@ -120,7 +120,9 @@ const ContractDetailsButton = ({ variant="outline-gray" float="right" size="sm" - leftIcon={} + leftIcon={ + + } > Add To List diff --git a/src/lib/components/copy/Copier.tsx b/src/lib/components/copy/Copier.tsx index c1fcc55c8..b526dda75 100644 --- a/src/lib/components/copy/Copier.tsx +++ b/src/lib/components/copy/Copier.tsx @@ -31,7 +31,7 @@ export const Copier = ({ marginLeft={ml} onClick={() => AmpTrack(AmpEvent.USE_COPIER)} name="copy" - boxSize="16px" + boxSize="12px" /> } /> diff --git a/src/lib/components/forms/TextInput.tsx b/src/lib/components/forms/TextInput.tsx index e0b13ce70..d2ac2985d 100644 --- a/src/lib/components/forms/TextInput.tsx +++ b/src/lib/components/forms/TextInput.tsx @@ -78,13 +78,15 @@ export const TextInput = ({ {error ? ( {error} ) : ( - - {status?.message ? ( - getResponseMsg(status, helperText) - ) : ( - {helperText} - )} - + helperText && ( + + {status?.message ? ( + getResponseMsg(status, helperText) + ) : ( + {helperText} + )} + + ) )} {helperAction} diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx index 6d58fb483..cc560b587 100644 --- a/src/lib/components/json/JsonReadOnly.tsx +++ b/src/lib/components/json/JsonReadOnly.tsx @@ -40,7 +40,7 @@ const JsonReadOnly = ({ const zeroHeight = height === 0; return ( + ) : undefined } disabled={!address} diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx index 6bcd5f3bb..870c85047 100644 --- a/src/lib/components/select-contract/SelectContractInstantiator.tsx +++ b/src/lib/components/select-contract/SelectContractInstantiator.tsx @@ -113,7 +113,7 @@ export const SelectContractInstantiator = ({ }} leftIcon={ !notSelected ? ( - + ) : undefined } > diff --git a/src/lib/layout/navbar/Collapse.tsx b/src/lib/layout/navbar/Collapse.tsx index 7b26f0903..ce7f29f40 100644 --- a/src/lib/layout/navbar/Collapse.tsx +++ b/src/lib/layout/navbar/Collapse.tsx @@ -77,11 +77,22 @@ export const CollapseNavMenu = ({ _hover={{ bg: "pebble.700", borderRadius: "8px" }} transition="all .25s ease-in-out" alignItems="center" + position="relative" bgColor={ isCurrentPage(submenu.slug) ? "pebble.800" : "transparent" } borderRadius={isCurrentPage(submenu.slug) ? "8px" : "0px"} > + {submenu.icon && } {submenu.logo && ( { if (network) { return slug === "/" ? pathName === `/${network}` - : pathName === `/${network}${slug}`; + : pathName.includes(`/${network}${slug}`); } return pathName === `${slug}`; }, diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx index f5d82ada2..042ca282d 100644 --- a/src/lib/pages/faucet/index.tsx +++ b/src/lib/pages/faucet/index.tsx @@ -149,7 +149,7 @@ const Faucet = () => { Testnet OSMO Faucet - + The Faucet provides 10.00 testnet OSMO per request for osmo-test-4 network. Please note that there is a limit of one request per hour. @@ -167,6 +167,7 @@ const Faucet = () => { variant="body3" cursor="pointer" alignSelf="flex-start" + ml="3" onClick={() => { AmpTrack(AmpEvent.USE_ASSIGN_ME); setAddress(walletAddress); diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx index 71996a1fa..7d7f18e92 100644 --- a/src/lib/pages/query/components/QueryArea.tsx +++ b/src/lib/pages/query/components/QueryArea.tsx @@ -89,9 +89,9 @@ export const QueryArea = ({ return ( - + {contractAddress && ( - + Message Suggestions: )} @@ -99,7 +99,7 @@ export const QueryArea = ({ button": { marginInlineStart: "0 !important", @@ -120,13 +120,13 @@ export const QueryArea = ({ ) : ( contractAddress && ( - + No QueryMsgs suggestion available ) )} - + Date: Thu, 9 Mar 2023 18:00:56 +0700 Subject: [PATCH 2/6] fix(components): add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 007569913..7102625c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -62,6 +62,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Bug fixes +- [#235](https://github.com/alleslabs/celatone-frontend/pull/235) Fix css bugs and aesthetics improvement - [#231](https://github.com/alleslabs/celatone-frontend/pull/231) Fix double slash for endpoint, disable calling endpoint when there is no contract addr in contract details page - [#229](https://github.com/alleslabs/celatone-frontend/pull/229) Disable Sentry debug to prevent "logger.info is not a function" error - [#219](https://github.com/alleslabs/celatone-frontend/pull/219) Fix asset value and price formatter From 3398b572c6d9e257002e320acf5c591ff3c3cf0a Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Thu, 9 Mar 2023 18:02:24 +0700 Subject: [PATCH 3/6] fix(components): replace gray color --- src/lib/components/table/TableTitle.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/table/TableTitle.tsx b/src/lib/components/table/TableTitle.tsx index aa81405f0..2e17344e7 100644 --- a/src/lib/components/table/TableTitle.tsx +++ b/src/lib/components/table/TableTitle.tsx @@ -22,12 +22,12 @@ export const TableTitle = ({ {count} - + {helperText} From 8518c2de5f3650361eaf7c805556be082f2e3daf Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Thu, 9 Mar 2023 18:27:46 +0700 Subject: [PATCH 4/6] fix(components): fix currentPage issue in sidebar --- src/lib/layout/navbar/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx index 9cc360375..89945988e 100644 --- a/src/lib/layout/navbar/index.tsx +++ b/src/lib/layout/navbar/index.tsx @@ -30,9 +30,16 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => { const isCurrentPage = useCallback( (slug: string) => { if (network) { - return slug === "/" - ? pathName === `/${network}` - : pathName.includes(`/${network}${slug}`); + switch (slug) { + case "/": + return pathName === `/${network}`; + case "/contract-list": + return pathName === `/${network}${slug}`; + case "/public-project": + return pathName === `/${network}${slug}`; + default: + return pathName.includes(`/${network}${slug}`); + } } return pathName === `${slug}`; }, From 8fd7badb772f5fef433915b505196fd1f4e934ff Mon Sep 17 00:00:00 2001 From: Ramida J Date: Fri, 10 Mar 2023 17:55:45 +0700 Subject: [PATCH 5/6] fix(components): fix as comment --- src/lib/components/forms/TextInput.tsx | 16 ++++++------- src/lib/layout/navbar/index.tsx | 24 +++++++++---------- src/lib/pages/faucet/index.tsx | 1 - .../components/PublicProjectCard.tsx | 2 +- src/lib/pages/query/components/QueryArea.tsx | 10 ++++---- 5 files changed, 25 insertions(+), 28 deletions(-) diff --git a/src/lib/components/forms/TextInput.tsx b/src/lib/components/forms/TextInput.tsx index d2ac2985d..e0b13ce70 100644 --- a/src/lib/components/forms/TextInput.tsx +++ b/src/lib/components/forms/TextInput.tsx @@ -78,15 +78,13 @@ export const TextInput = ({ {error ? ( {error} ) : ( - helperText && ( - - {status?.message ? ( - getResponseMsg(status, helperText) - ) : ( - {helperText} - )} - - ) + + {status?.message ? ( + getResponseMsg(status, helperText) + ) : ( + {helperText} + )} + )} {helperAction} diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx index 89945988e..7ae5e2614 100644 --- a/src/lib/layout/navbar/index.tsx +++ b/src/lib/layout/navbar/index.tsx @@ -29,19 +29,19 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => { const isCurrentPage = useCallback( (slug: string) => { - if (network) { - switch (slug) { - case "/": - return pathName === `/${network}`; - case "/contract-list": - return pathName === `/${network}${slug}`; - case "/public-project": - return pathName === `/${network}${slug}`; - default: - return pathName.includes(`/${network}${slug}`); - } + const networkPath = network ? `/${network}` : ""; + switch (slug) { + // handle home page + case "/": + return pathName === `${networkPath}`; + // handle contract list page and public project page + case "/contract-list": + case "/public-project": + return pathName === `${networkPath}${slug}`; + // handle page with query param + default: + return pathName.includes(`${networkPath}${slug}`); } - return pathName === `${slug}`; }, [network, pathName] ); diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx index 60587177b..f2b35d598 100644 --- a/src/lib/pages/faucet/index.tsx +++ b/src/lib/pages/faucet/index.tsx @@ -167,7 +167,6 @@ const Faucet = () => { variant="body3" cursor="pointer" alignSelf="flex-start" - ml="3" onClick={() => { AmpTrack(AmpEvent.USE_ASSIGN_ME); setAddress(walletAddress); diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx index 690262b82..a27687d71 100644 --- a/src/lib/pages/public-project/components/PublicProjectCard.tsx +++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx @@ -17,7 +17,7 @@ export const PublicProjectCard = observer( ({ item, slug }: PublicProjectCardProps) => { const navigate = useInternalNavigate(); const handleOnClick = () => { - navigate({ pathname: `/public-project/${slug}` }); + navigate({ pathname: `/public-project/[slug]`, query: { slug } }); }; const [ref, { clampedText }] = useClampText({ diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx index 7d7f18e92..f95c8d764 100644 --- a/src/lib/pages/query/components/QueryArea.tsx +++ b/src/lib/pages/query/components/QueryArea.tsx @@ -89,9 +89,9 @@ export const QueryArea = ({ return ( - + {contractAddress && ( - + Message Suggestions: )} @@ -99,7 +99,7 @@ export const QueryArea = ({ button": { marginInlineStart: "0 !important", @@ -120,13 +120,13 @@ export const QueryArea = ({ ) : ( contractAddress && ( - + No QueryMsgs suggestion available ) )} - + Date: Fri, 10 Mar 2023 17:58:11 +0700 Subject: [PATCH 6/6] fix(components): fix chevron down icon in pagination --- src/lib/components/pagination/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/pagination/index.tsx b/src/lib/components/pagination/index.tsx index ad00fc252..e63b51476 100644 --- a/src/lib/components/pagination/index.tsx +++ b/src/lib/components/pagination/index.tsx @@ -63,7 +63,6 @@ export const Pagination = ({ w="70px" fontSize="12px" focusBorderColor="none" - icon={} cursor="pointer" onChange={onPageSizeChange} > @@ -71,6 +70,7 @@ export const Pagination = ({ + {`${offsetData} - ${lastDataInPage} of ${totalData}`}