Merge pull request #619 from alleslabs/fix/bugbash

Fix observer, logo (mobile) and add disable delegation flag

CHANGELOG.md

@@ -88,6 +88,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#619](https://github.com/alleslabs/celatone-frontend/pull/619) Fix observer, logo and disable delegation in Account Detail Page
 - [#617](https://github.com/alleslabs/celatone-frontend/pull/617) Fix textwrap module path on module detail, framer motion incorrect transition prop, loadingoverlay not centered
 - [#610](https://github.com/alleslabs/celatone-frontend/pull/610) Remove `.at()` from code
 - [#615](https://github.com/alleslabs/celatone-frontend/pull/615) Fix useEffect on pool page

src/config/chain/neutron.ts

@@ -49,7 +49,7 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://www.mintscan.io/neutron/validators",
       proposal: "",
     },
-    extra: {},
+    extra: { disableDelegation: true },
   },
   "pion-1": {
     chain: "neutron",
@@ -97,6 +97,6 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://www.mintscan.io/neutron/validators",
       proposal: "",
     },
-    extra: {},
+    extra: { disableDelegation: true },
   },
 };

src/config/chain/types.ts

@@ -77,6 +77,7 @@ export interface ChainConfig {
   explorerLink: ExplorerConfig;
   extra: {
     disableAnyOfAddresses?: boolean;
+    disableDelegation?: boolean;
   };
 }
 

src/lib/components/table/MobileTitle.tsx

@@ -13,17 +13,16 @@ interface MobileTitleProps {
 const cardProps = {
   width: "100%",
   justifyContent: "space-between",
-  background: "gray.900",
   padding: "16px",
   borderRadius: "8px",
 };
 
 export const MobileTitle = ({ onViewMore, title, count }: MobileTitleProps) => (
   <Flex
     style={cardProps}
-    onClick={count === 0 ? undefined : onViewMore}
+    onClick={!count ? undefined : onViewMore}
+    opacity={!count ? 0.5 : 1}
     bg="gray.900"
-    opacity={count === 0 ? 0.5 : 1}
   >
     <TableTitle title={title} count={count} mb={0} />
     <CustomIcon name="chevron-right" color="gray.600" />

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

@@ -137,28 +137,23 @@ export const AssetsSection = ({
   walletAddress,
   onViewMore,
 }: AssetsSectionProps) => {
+  const isMobile = useMobile();
   const { supportedAssets, unsupportedAssets, isLoading, error } =
     useUserAssetInfos(walletAddress);
+  const isMobileOverview = isMobile && !!onViewMore;
 
-  let totalValue = big(0) as USD<Big>;
-  if (supportedAssets) totalValue = calTotalValue(supportedAssets);
+  if (isLoading) return <Loading withBorder />;
 
-  const isMobile = useMobile();
+  const totalValue = supportedAssets
+    ? calTotalValue(supportedAssets)
+    : (big(0) as USD<Big>);
   const TotalAssetValueInfo = (
     <UserAssetInfoCard
       value={totalValue && supportedAssets ? formatPrice(totalValue) : "N/A"}
       isZeroValue={totalValue.eq(0) || !supportedAssets}
       helperText="Total Asset Value"
     />
   );
-  let isMobileDetail = null;
-  if (isMobile && onViewMore) {
-    isMobileDetail = false;
-  } else {
-    isMobileDetail = true;
-  }
-
-  if (isLoading) return <Loading withBorder />;
 
   const totalAsset =
     (supportedAssets?.length ?? 0) + (unsupportedAssets?.length ?? 0);
@@ -174,7 +169,7 @@ export const AssetsSection = ({
       <AssetTitle onViewMore={onViewMore} totalAsset={totalAsset}>
         {TotalAssetValueInfo}
       </AssetTitle>
-      {isMobileDetail && (
+      {!isMobileOverview && (
         <>
           <Flex
             justify={{ base: "flex-start", md: "space-between" }}
@@ -203,14 +198,13 @@ export const AssetsSection = ({
               totalAsset={totalAsset}
             />
           )}
+          {onViewMore &&
+            supportedAssets &&
+            supportedAssets.length > MAX_ASSETS_SHOW && (
+              <ViewMore onClick={onViewMore} />
+            )}
         </>
       )}
-      {!isMobile &&
-        supportedAssets &&
-        onViewMore &&
-        supportedAssets.length > MAX_ASSETS_SHOW && (
-          <ViewMore onClick={onViewMore} />
-        )}
     </Flex>
   );
 };

src/lib/pages/account-details/components/modules/ModuleLists.tsx

@@ -1,10 +1,9 @@
-import { Flex } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { useState } from "react";
 
 import { useMobile } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
-import { TableTitle, ViewMore } from "lib/components/table";
+import { MobileTitle, TableTitle, ViewMore } from "lib/components/table";
 import { type IndexedModule } from "lib/services/move/moduleService";
 import type { MoveAccountAddr, Option } from "lib/types";
 
@@ -28,50 +27,41 @@ export const ModuleLists = ({
   const [keyword, setKeyword] = useState("");
   const isMobile = useMobile();
   const isMobileOverview = isMobile && !!onViewMore;
-  return isMobileOverview ? (
-    <Flex
-      justify="space-between"
-      w="full"
-      bg="gray.900"
-      borderRadius="8px"
-      p={4}
-      onClick={onViewMore}
-    >
-      <TableTitle title="Modules" count={totalCount} mb={0} />
-      <CustomIcon name="chevron-right" color="gray.600" />
-    </Flex>
-  ) : (
-    <Flex
-      direction="column"
-      mt={{ base: 4, md: 8 }}
-      mb={{ base: 0, md: 8 }}
-      width="full"
-      gap={6}
-    >
-      <TableTitle
-        title="Module Instances"
-        helperText="Modules are ‘smart contracts’ deployed by this account"
-        count={totalCount}
-        mb={0}
-      />
-      {!onViewMore && (
-        <InputWithIcon
-          placeholder="Search with Module Name..."
-          value={keyword}
-          onChange={(e) => setKeyword(e.target.value)}
-          action="execute-message-search"
+  return (
+    <Box mt={{ base: 4, md: 8 }}>
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Modules"
+          count={totalCount}
+          onViewMore={onViewMore}
         />
+      ) : (
+        <>
+          <TableTitle
+            title="Module Instances"
+            helperText="Modules are ‘smart contracts’ deployed by this account"
+            count={totalCount}
+          />
+          {!onViewMore && (
+            <InputWithIcon
+              placeholder="Search with Module Name..."
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              action="execute-message-search"
+            />
+          )}
+          <ModuleListsBody
+            selectedAddress={selectedAddress}
+            keyword={keyword}
+            modules={modules}
+            isLoading={isLoading}
+            onViewMore={onViewMore}
+          />
+          {onViewMore && !!totalCount && totalCount > 9 && (
+            <ViewMore onClick={onViewMore} />
+          )}
+        </>
       )}
-      <ModuleListsBody
-        selectedAddress={selectedAddress}
-        keyword={keyword}
-        modules={modules}
-        isLoading={isLoading}
-        onViewMore={onViewMore}
-      />
-      {onViewMore && totalCount && totalCount > 9 && (
-        <ViewMore onClick={onViewMore} />
-      )}
-    </Flex>
+    </Box>
   );
 };

src/lib/pages/account-details/components/modules/ModuleListsBody.tsx

@@ -57,7 +57,7 @@ export const ModuleListsBody = ({
       />
     );
   return (
-    <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4}>
+    <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} my={4} spacing={4}>
       {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
         (item) => (
           <ModuleCard

src/lib/pages/account-details/components/resources/ResourceOverview.tsx

@@ -1,8 +1,7 @@
-import { Flex } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
-import { TableTitle } from "lib/components/table";
+import { MobileTitle, TableTitle } from "lib/components/table";
 import type { MoveAccountAddr, Option, ResourceGroup } from "lib/types";
 
 import { ResourceOverviewBody } from "./ResourceOverviewBody";
@@ -24,36 +23,29 @@ export const ResourceOverview = ({
 }: ResourceOverviewProps) => {
   const isMobile = useMobile();
 
-  return isMobile ? (
-    <Flex
-      justify="space-between"
-      w="full"
-      bg="gray.900"
-      borderRadius="8px"
-      p={4}
-      onClick={onViewMore}
-    >
-      <TableTitle title="Resources" count={totalCount} mb={0} />
-      <CustomIcon name="chevron-right" color="gray.600" />
-    </Flex>
-  ) : (
-    <Flex
-      direction="column"
-      mt={{ base: 4, md: 8 }}
-      mb={{ base: 0, md: 8 }}
-      width="full"
-    >
-      <TableTitle
-        title="Resources"
-        helperText="Resources stored in this account"
-        count={totalCount}
-      />
-      <ResourceOverviewBody
-        address={address}
-        resourcesByName={resourcesByName}
-        isLoading={isLoading}
-        onViewMore={onViewMore}
-      />
-    </Flex>
+  return (
+    <Box mt={{ base: 4, md: 8 }}>
+      {isMobile ? (
+        <MobileTitle
+          title="Resources"
+          count={totalCount}
+          onViewMore={onViewMore}
+        />
+      ) : (
+        <>
+          <TableTitle
+            title="Resources"
+            helperText="Resources stored in this account"
+            count={totalCount}
+          />
+          <ResourceOverviewBody
+            address={address}
+            resourcesByName={resourcesByName}
+            isLoading={isLoading}
+            onViewMore={onViewMore}
+          />
+        </>
+      )}
+    </Box>
   );
 };