diff --git a/CHANGELOG.md b/CHANGELOG.md index ba98952a3..b357bcaaf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -52,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#675](https://github.com/alleslabs/celatone-frontend/pull/675) Make module links clickable with command/ctrl and add copier for struct names - [#674](https://github.com/alleslabs/celatone-frontend/pull/674) Adjust contract list card and microcopies - [#672](https://github.com/alleslabs/celatone-frontend/pull/672) Refactor balances - [#682](https://github.com/alleslabs/celatone-frontend/pull/682) Render token amount < 0.000001 properly diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx index 729502719..f998a5e55 100644 --- a/src/lib/components/module/ModuleCard.tsx +++ b/src/lib/components/module/ModuleCard.tsx @@ -1,5 +1,8 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { Flex, Grid, Text } from "@chakra-ui/react"; +import { useMemo } from "react"; +import { AppLink } from "../AppLink"; import { CustomIcon } from "../icon"; import type { IndexedModule } from "lib/services/move/moduleService"; import { useVerifyModule } from "lib/services/move/moduleService"; @@ -11,7 +14,7 @@ interface ModuleCardProps { selectedAddress: MoveAccountAddr; module: IndexedModule; selectedModule: Option; - setSelectedModule: (module: IndexedModule) => void; + setSelectedModule?: (module: IndexedModule) => void; } export const ModuleCard = ({ @@ -25,42 +28,61 @@ export const ModuleCard = ({ moduleName: module.moduleName, }); - return ( - setSelectedModule(module)} - gap={1} - templateColumns="20px 1fr auto" - _hover={{ - bg: "gray.700", - }} - transition=".25s all ease-out" - > - - - - {module.moduleName} - - {isVerified && ( - ( + setSelectedModule?.(module)} + gap={1} + templateColumns="20px 1fr auto" + _hover={{ + bg: "gray.700", + }} + transition=".25s all ease-out" + > + + + + {module.moduleName} + + {isVerified && ( + + )} + + + + - )} - - - - - - + + + ), + [ + isVerified, + JSON.stringify(module), + selectedModule?.moduleName, + setSelectedModule, + ] + ); + + return setSelectedModule ? ( + card + ) : ( + + {card} + ); }; diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx index ea6d3bb30..4d8702fa6 100644 --- a/src/lib/components/resource/ResourceDetailCard.tsx +++ b/src/lib/components/resource/ResourceDetailCard.tsx @@ -7,8 +7,9 @@ import { Text, } from "@chakra-ui/react"; -import { CopyButton } from "../copy"; +import { Copier, CopyButton } from "../copy"; import { CustomIcon } from "../icon"; +import { useMobile } from "lib/app-provider"; import type { InternalResource } from "lib/types"; import { parseJsonStr } from "lib/utils"; @@ -20,6 +21,7 @@ export const ResourceDetailCard = ({ resourceData, }: ResourceDetailCardProps) => { const parsedMoveResource = parseJsonStr(resourceData.moveResource); + const isMobile = useMobile(); // Handle fallback case where the move resource is invalid // TODO: revisit later @@ -59,17 +61,25 @@ export const ResourceDetailCard = ({ justifyContent="space-between" w="full" align="center" - gap={{ base: 4, md: 8 }} + className="copier-wrapper" > - - {resourceData.structTag} - - + + + {resourceData.structTag} + + + + - e.stopPropagation()} > - {`${truncate(hexAddr)} :: ${moduleName}`} - + + {`${truncate(hexAddr)} :: ${moduleName}`} + + navigate({ diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx index 6eb68efdf..26bfc0fbe 100644 --- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx +++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx @@ -28,7 +28,7 @@ export const ModuleLists = ({ const isMobile = useMobile(); const isMobileOverview = isMobile && !!onViewMore; return ( - + {isMobileOverview ? ( { - const navigate = useInternalNavigate(); - const filteredModules = useMemo(() => { if (!keyword) return modules; @@ -34,25 +31,18 @@ export const ModuleListsBody = ({ ); }, [keyword, modules]); - const handleOnSelect = (module: IndexedModule) => { - navigate({ - pathname: `/modules/[address]/[moduleName]`, - query: { - address: selectedAddress, - moduleName: module.moduleName, - }, - }); - }; - if (isLoading) return ; if (!modules) return ; if (!filteredModules?.length) return ( ); return ( @@ -64,7 +54,6 @@ export const ModuleListsBody = ({ selectedAddress={selectedAddress} module={item} selectedModule={undefined} - setSelectedModule={handleOnSelect} /> ) )} diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx index 43a273f0b..ec95dd50c 100644 --- a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx +++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx @@ -2,6 +2,8 @@ import { Accordion, Badge, Box, Button, Flex, Heading } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; +import { useMobile } from "lib/app-provider"; +import { Copier } from "lib/components/copy"; import { CustomIcon } from "lib/components/icon"; import { Loading } from "lib/components/Loading"; import { ResourceDetailCard } from "lib/components/resource"; @@ -23,6 +25,8 @@ export const ResourceSectionBody = ({ isLoading, }: ResourceSectionBodyProps) => { const router = useRouter(); + const isMobile = useMobile(); + const [expandedIndexes, setExpandedIndexes] = useState([]); const selectedAccountParam = getFirstQueryParam( @@ -59,13 +63,19 @@ export const ResourceSectionBody = ({ pb={6} gap={12} > - + {selectedResource.account}::{selectedResource.group} {selectedResource.items.length} +