Merge pull request #727 from alleslabs/feat/nft-amplitude

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#727](https://github.com/alleslabs/celatone-frontend/pull/727) Add amp nft pages
 - [#720](https://github.com/alleslabs/celatone-frontend/pull/720) Add delegations for contract detail
 - [#684](https://github.com/alleslabs/celatone-frontend/pull/684) Add nft page
 - [#717](https://github.com/alleslabs/celatone-frontend/pull/717) Add total value for contract detail

src/config/chain/neutron.ts

@@ -80,7 +80,7 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
         enabled: false,
       },
       nft: {
-        enabled: true,
+        enabled: false,
       },
     },
     gas: {

src/lib/amplitude/types.ts

@@ -29,7 +29,7 @@ export enum AmpEvent {
   // NAVIGATE
   TO_OVERVIEW = "To Overview",
   TO_BLOCKS = "To Blocks",
-  TO_BLOCK_DETAIL = "To Block Detail",
+  TO_BLOCK_DETAILS = "To Block Detail",
   TO_TXS = "To Txs",
   TO_MODULES = "To Modules",
   TO_PAST_TXS = "To Past Txs",
@@ -51,25 +51,25 @@ export enum AmpEvent {
   TO_LIST_OTHERS = "To List Others",
   TO_ALL_LISTS = "To All Lists",
   TO_ALL_PROJECTS = "To All Public Projects",
-  TO_ACCOUNT_DETAIL = "To Account Detail",
-  TO_CONTRACT_DETAIL = "To Contract Detail",
-  TO_CODE_DETAIL = "To Code Detail",
-  TO_PROJECT_DETAIL = "To Public Project Detail",
-  TO_TRANSACTION_DETAIL = "To Transaction Detail",
+  TO_ACCOUNT_DETAILS = "To Account Detail",
+  TO_CONTRACT_DETAILS = "To Contract Detail",
+  TO_CODE_DETAILS = "To Code Detail",
+  TO_PROJECT_DETAILS = "To Public Project Detail",
+  TO_TRANSACTION_DETAILS = "To Transaction Detail",
   TO_NOT_FOUND = "To 404 Not Found",
   TO_FAUCET = "To Faucet",
   TO_POOL_LIST = "To Pool List",
-  TO_POOL_DETAIL = "To Pool Detail",
+  TO_POOL_DETAILS = "To Pool Detail",
   TO_PROPOSAL_TO_STORE_CODE = "To Proposal To Store Code",
   TO_PROPOSAL_TO_WHITELIST = "To Proposal To Whitelist",
-  TO_MODULE_DETAIL = "To Module Detail",
+  TO_MODULE_DETAILS = "To Module Detail",
   TO_MODULE_INTERACTION = "To Module Interaction",
   TO_PUBLISH_MODULE = "To Publish Module",
   TO_DEPLOY_SCRIPT = "To Deploy Script",
   TO_MY_PUBLISHED_MODULES = "To My Published Modules",
-  TO_NFT_COLLECTIONS = "To NFT Collections",
-  TO_NFT_COLLECTION_DETAIL = "To NFT Collection Detail",
-  TO_NFT_DETAIL = "To NFT Detail",
+  TO_NFT_COLLECTIONS_LIST = "To NFT Collections List",
+  TO_NFT_COLLECTION_DETAILS = "To NFT Collection Detail",
+  TO_NFT_DETAILS = "To NFT Detail",
   // ACTIONS
   ACTION_UPLOAD = "Action Upload",
   ACTION_INSTANTIATE = "Action Instantiate",
@@ -152,7 +152,7 @@ export enum AmpEvent {
   USE_CONTRACT_STATES_DOWNLOAD = "Use Contract States Download",
   USE_NAMESPACE_TAB = "Use Namespace Tab",
   USE_NAVIGATING_BUTTON = "Use Navigating Button",
-  USE_MODULE_DETAIL_MAIN_CTA = "Use Module Detail Main CTA",
+  USE_MODULE_DETAILS_MAIN_CTA = "Use Module Detail Main CTA",
   USE_MODULE_FUNCTION_CTA = "Use Module Function CTA",
   USE_BREADCRUMB = "Use Breadcrumb",
   USE_MODULE_SELECTION_DRAWER = "Use Module Selection Drawer",
@@ -175,6 +175,10 @@ export enum AmpEvent {
   USE_MY_PUBLISHED_MODULES_CTA = "Use My Publised Modules CTA",
   USE_SELECT_RESOURCE_GROUP = "Use Select Resource Group",
   USE_MODULE_CARD = "Use Module Card",
+  USE_NFT_COLLECTION_INFO_CARD = "Use NFT Collection Info Card",
+  USE_NFT_VIEW_RESOURCE_CTA = "Use NFT View Resource CTA",
+  USE_NFT_CARD = "Use NFT Card",
+  USE_SELECT_NFT_COLLECTION_GROUP = "Use Select NFT Selection Group",
 
   // TX
   TX_SUCCEED = "Tx Succeed",

src/lib/components/copy/Copier.tsx

@@ -25,7 +25,6 @@ export const Copier = ({
   <CopyTemplate
     value={value}
     copyLabel={copyLabel}
-    display={display}
     triggerElement={
       <CustomIcon
         id={type}

src/lib/components/copy/CopyTemplate.tsx

@@ -1,4 +1,4 @@
-import type { BoxProps, LayoutProps } from "@chakra-ui/react";
+import type { BoxProps } from "@chakra-ui/react";
 import { Flex, useClipboard } from "@chakra-ui/react";
 import { useEffect } from "react";
 
@@ -11,7 +11,6 @@ interface CopyTemplateProps {
   isDisabled?: boolean;
   ml?: BoxProps["ml"];
   w?: BoxProps["width"];
-  display?: LayoutProps["display"];
 }
 
 export const CopyTemplate = ({
@@ -21,22 +20,21 @@ export const CopyTemplate = ({
   isDisabled = false,
   ml,
   w = "auto",
-  display,
 }: CopyTemplateProps) => {
   const { onCopy, hasCopied, setValue } = useClipboard(value);
   useEffect(() => setValue(value), [value, setValue]);
 
   return (
     <Tooltip isOpen={!isDisabled && hasCopied} label={copyLabel}>
       <Flex
+        display="inline"
         direction="column"
         onClick={(e) => {
           onCopy();
           e.stopPropagation();
         }}
         w={w}
         ml={ml}
-        display={display}
       >
         {triggerElement}
       </Flex>

src/lib/components/nft/NftCard.tsx

@@ -1,6 +1,7 @@
 import { Box, Image, Flex, Text } from "@chakra-ui/react";
 
 import { AppLink } from "../AppLink";
+import { AmpEvent, track } from "lib/amplitude";
 import { NFT_IMAGE_PLACEHOLDER } from "lib/data";
 import { useMetadata } from "lib/services/nft";
 import type { HexAddr32, Option } from "lib/types";
@@ -26,7 +27,10 @@ export const NftCard = ({
 
   return (
     <Flex direction="column" minW="full">
-      <AppLink href={`/nft-collections/${collectionAddress}/nft/${nftAddress}`}>
+      <AppLink
+        href={`/nft-collections/${collectionAddress}/nft/${nftAddress}`}
+        onClick={() => track(AmpEvent.USE_NFT_CARD, { showCollection })}
+      >
         <Box position="relative" width="100%" paddingBottom="100%" mb={2}>
           <Image
             position="absolute"

src/lib/pages/account-details/components/nfts/FilterItem.tsx

@@ -1,5 +1,6 @@
 import { Badge, Box, Flex, Image, Text } from "@chakra-ui/react";
 
+import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import { useMetadata } from "lib/services/nft";
 
@@ -27,7 +28,13 @@ export const FilterItem = ({
       borderRadius="8px"
       _hover={{ bg: "gray.800" }}
       cursor="pointer"
-      onClick={onClick}
+      onClick={() => {
+        track(AmpEvent.USE_SELECT_NFT_COLLECTION_GROUP, {
+          collectionName,
+          nftsCount: count,
+        });
+        onClick();
+      }}
       align="center"
       justify="space-between"
     >

src/lib/pages/account-details/components/nfts/NftsByCollection.tsx

@@ -59,6 +59,7 @@ export const NftsByCollection = ({
         autoFocus
         onChange={(e) => setSearchKeyword(e.target.value)}
         size={{ base: "md", md: "lg" }}
+        amptrackSection="nft-account-detail-tokenid-search"
       />
       <NftList
         nfts={nfts}

src/lib/pages/account-details/index.tsx

@@ -485,7 +485,7 @@ const AccountDetails = () => {
 
   useEffect(() => {
     if (router.isReady && validated.success)
-      track(AmpEvent.TO_ACCOUNT_DETAIL, { tab: validated.data.tab });
+      track(AmpEvent.TO_ACCOUNT_DETAILS, { tab: validated.data.tab });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 

src/lib/pages/block-details/index.tsx

@@ -42,7 +42,7 @@ const BlockDetails = () => {
   const validated = zBlockDetailQueryParams.safeParse(router.query);
 
   useEffect(() => {
-    if (router.isReady) track(AmpEvent.TO_BLOCK_DETAIL);
+    if (router.isReady) track(AmpEvent.TO_BLOCK_DETAILS);
   }, [router.isReady]);
 
   return (

src/lib/pages/code-details/index.tsx

@@ -50,7 +50,7 @@ const CodeDetailsBody = observer(
     const tab = getFirstQueryParam(router.query.tab) as TabIndex;
 
     useEffect(() => {
-      if (router.isReady) track(AmpEvent.TO_CODE_DETAIL, { tab });
+      if (router.isReady) track(AmpEvent.TO_CODE_DETAILS, { tab });
       // Note: we don't want to track when tab changes
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [router.isReady, track]);

src/lib/pages/contract-details/index.tsx

@@ -256,7 +256,7 @@ const ContractDetails = observer(() => {
 
   useEffect(() => {
     if (router.isReady && validated.success)
-      track(AmpEvent.TO_CONTRACT_DETAIL, { tab: validated.data.tab });
+      track(AmpEvent.TO_CONTRACT_DETAILS, { tab: validated.data.tab });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 

src/lib/pages/module-details/components/ModuleTop.tsx

@@ -202,7 +202,9 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
                 leftIcon={<CustomIcon name="query" mr={0} />}
                 size={{ base: "sm", md: "md" }}
                 onClick={() => {
-                  track(AmpEvent.USE_MODULE_DETAIL_MAIN_CTA, { label: "view" });
+                  track(AmpEvent.USE_MODULE_DETAILS_MAIN_CTA, {
+                    label: "view",
+                  });
                   navigate({
                     pathname: "/interact",
                     query: {
@@ -221,7 +223,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
                 leftIcon={<CustomIcon name="execute" mr={0} />}
                 size={{ base: "sm", md: "md" }}
                 onClick={() => {
-                  track(AmpEvent.USE_MODULE_DETAIL_MAIN_CTA, {
+                  track(AmpEvent.USE_MODULE_DETAILS_MAIN_CTA, {
                     label: "execute",
                   });
                   navigate({
@@ -248,7 +250,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
                   leftIcon={<CustomIcon name="migrate" mr={0} />}
                   size={{ base: "sm", md: "md" }}
                   onClick={() => {
-                    track(AmpEvent.USE_MODULE_DETAIL_MAIN_CTA, {
+                    track(AmpEvent.USE_MODULE_DETAILS_MAIN_CTA, {
                       label: "republish",
                     });
                     navigate({

src/lib/pages/module-details/index.tsx

@@ -127,7 +127,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
 
   useEffect(() => {
     if (router.isReady && tab && !verificationLoading)
-      track(AmpEvent.TO_MODULE_DETAIL, {
+      track(AmpEvent.TO_MODULE_DETAILS, {
         tab,
         isVerified: Boolean(verificationData),
       });

src/lib/pages/nft-collection-details/components/CollectionInfoSection.tsx

@@ -1,7 +1,6 @@
 import { Flex, Heading, Link, Text } from "@chakra-ui/react";
 
-import { useInternalNavigate, useMobile } from "lib/app-provider";
-import { CopyLink } from "lib/components/CopyLink";
+import { useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
 import { Loading } from "lib/components/Loading";
@@ -19,6 +18,8 @@ interface CollectionInfoSectionProps {
   activities: number;
   mutateEventes: number;
   royalty: number;
+  onClickActivities: () => void;
+  onClickMutateEvents: () => void;
 }
 
 export const CollectionInfoSection = ({
@@ -29,10 +30,10 @@ export const CollectionInfoSection = ({
   activities,
   mutateEventes,
   royalty,
+  onClickActivities,
+  onClickMutateEvents,
 }: CollectionInfoSectionProps) => {
   const isMobile = useMobile();
-  const navigate = useInternalNavigate();
-
   const { data: collectionCreator, isLoading } =
     useCollectionCreator(collectionAddress);
 
@@ -65,6 +66,7 @@ export const CollectionInfoSection = ({
               type="block_height"
               showCopyOnHover
               fixedHeight
+              ampCopierSection="collection-creation-information"
             />
           </LabelText>
           <LabelText label="Created by" helperText1="(VM Address)">
@@ -73,10 +75,16 @@ export const CollectionInfoSection = ({
               type="user_address"
               showCopyOnHover
               fixedHeight
+              ampCopierSection="collection-creation-information"
             />
           </LabelText>
           <LabelText label="Created Transaction">
-            <ExplorerLink value={txhash} type="tx_hash" showCopyOnHover />
+            <ExplorerLink
+              value={txhash.toUpperCase()}
+              type="tx_hash"
+              showCopyOnHover
+              ampCopierSection="collection-creation-information"
+            />
           </LabelText>
         </Flex>
         <Flex
@@ -91,10 +99,13 @@ export const CollectionInfoSection = ({
             <Text fontWeight={600} minW={24} variant="body2">
               Collection
             </Text>
-            <CopyLink
+            <ExplorerLink
               value={collectionAddress}
               type="user_address"
+              textFormat="normal"
+              maxWidth="full"
               showCopyOnHover
+              ampCopierSection="collection-information"
             />
           </Flex>
           <Flex gap={infoGap} flexDir={infoDirection}>
@@ -144,24 +155,14 @@ export const CollectionInfoSection = ({
           title="Activities"
           icon="list"
           content={activities}
-          onClick={() =>
-            navigate({
-              pathname: `/nft-collections/[collectionAddress]/activities`,
-              query: { collectionAddress },
-            })
-          }
+          onClick={onClickActivities}
           isDisabled={!activities}
         />
         <InfoCard
           title="Mutate Events"
           icon="migrate"
           content={mutateEventes}
-          onClick={() =>
-            navigate({
-              pathname: `/nft-collections/[collectionAddress]/mutate_events`,
-              query: { collectionAddress },
-            })
-          }
+          onClick={onClickMutateEvents}
           isDisabled={!mutateEventes}
         />
       </Flex>

src/lib/pages/nft-collection-details/components/CollectionSupplies.tsx

@@ -49,6 +49,7 @@ export const CollectionSupplies = ({
         autoFocus
         onChange={(e) => setSearchKeyword(e.target.value)}
         size={{ base: "md", md: "lg" }}
+        amptrackSection="collection-supplies-tokenId-search"
       />
       <NftList
         nfts={nfts}