Merge pull request #1116 from alleslabs/feature/cfe-610-evm-contract-…

…assets [CFE-610]: Feature - evm contract assets
alleslabs · Aug 28, 2024 · 49d45ed · 49d45ed
2 parents 8efc4a6 + ed81101
commit 49d45ed
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1116](https://github.com/alleslabs/celatone-frontend/pull/1116) Add EVM contract details assets
 - [#1112](https://github.com/alleslabs/celatone-frontend/pull/1112) Add EVM contract details bytecodes
 - [#1109](https://github.com/alleslabs/celatone-frontend/pull/1109) Add EVM contract details overview
 - [#1106](https://github.com/alleslabs/celatone-frontend/pull/1106) Add EVM contract details HTML skeleton layout

diff --git a/src/lib/pages/evm-contract-details/components/EvmContractDetailsOverview.tsx b/src/lib/pages/evm-contract-details/components/EvmContractDetailsOverview.tsx
@@ -1,24 +1,29 @@
 import { Grid, Heading, Spinner, Stack, Text } from "@chakra-ui/react";
 
 import { useCelatoneApp } from "lib/app-provider";
+import { AssetsSection } from "lib/components/asset";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
 import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
-import type { BechAddr, Option } from "lib/types";
+import type { BechAddr, BechAddr20, Option } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 interface EvmContractDetailsOverviewProps {
+  contractAddress: BechAddr20;
   hash: Option<string>;
   sender: Option<BechAddr>;
   created: Option<Date>;
   isContractInfoLoading: boolean;
+  onViewMoreAssets: () => void;
 }
 
 export const EvmContractDetailsOverview = ({
+  contractAddress,
   hash,
   sender,
   created,
   isContractInfoLoading,
+  onViewMoreAssets,
 }: EvmContractDetailsOverviewProps) => {
   const { currentChainId } = useCelatoneApp();
   const formatAddresses = useFormatAddresses();
@@ -75,12 +80,7 @@ export const EvmContractDetailsOverview = ({
           </LabelText>
         </Grid>
       </Stack>
-      <Stack gap={4}>
-        <Heading as="h6" variant="h6">
-          Assets
-        </Heading>
-        <Text>Assets</Text>
-      </Stack>
+      <AssetsSection address={contractAddress} onViewMore={onViewMoreAssets} />
       <Stack gap={4}>
         <Heading as="h6" variant="h6">
           Transactions

diff --git a/src/lib/pages/evm-contract-details/index.tsx b/src/lib/pages/evm-contract-details/index.tsx
@@ -4,12 +4,18 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
 
 import { AmpEvent, trackUseTab } from "lib/amplitude";
-import { useEvmConfig, useInternalNavigate } from "lib/app-provider";
+import {
+  useConvertHexAddress,
+  useEvmConfig,
+  useInternalNavigate,
+} from "lib/app-provider";
+import { AssetsSection } from "lib/components/asset";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { CelatoneSeo } from "lib/components/Seo";
 import { ErrorFetching, InvalidState } from "lib/components/state";
+import { useBalanceInfos } from "lib/services/bank";
 import {
   useEvmCodesByAddress,
   useEvmContractInfoSequencer,
@@ -36,6 +42,9 @@ const EvmContractDetailsBody = ({
   tab,
 }: EvmContractDetailsBodyProps) => {
   const navigate = useInternalNavigate();
+  const { convertHexWalletAddress } = useConvertHexAddress();
+  const contractAddressBechAddr = convertHexWalletAddress(contractAddress);
+
   const {
     data: evmCodesByAddressData,
     isLoading: isEvmCodesByAddressLoading,
@@ -44,6 +53,10 @@ const EvmContractDetailsBody = ({
   const { data: evmContractInfoData, isLoading: isEvmContractInfoLoading } =
     useEvmContractInfoSequencer(contractAddress);
 
+  const { totalData: totalAssets = 0 } = useBalanceInfos(
+    contractAddressBechAddr
+  );
+
   const handleTabChange = useCallback(
     (nextTab: TabIndex) => () => {
       if (nextTab === tab) return;
@@ -91,7 +104,10 @@ const EvmContractDetailsBody = ({
             <CustomTab onClick={handleTabChange(TabIndex.Contract)}>
               Contract
             </CustomTab>
-            <CustomTab onClick={handleTabChange(TabIndex.Assets)}>
+            <CustomTab
+              onClick={handleTabChange(TabIndex.Assets)}
+              count={totalAssets}
+            >
               Assets
             </CustomTab>
             <CustomTab onClick={handleTabChange(TabIndex.Transactions)}>
@@ -101,16 +117,20 @@ const EvmContractDetailsBody = ({
           <TabPanels>
             <TabPanel p={0} pt={8}>
               <EvmContractDetailsOverview
+                contractAddress={contractAddressBechAddr}
                 hash={evmContractInfoData?.hash}
                 sender={evmContractInfoData?.sender}
                 created={evmContractInfoData?.created}
                 isContractInfoLoading={isEvmContractInfoLoading}
+                onViewMoreAssets={handleTabChange(TabIndex.Assets)}
               />
             </TabPanel>
             <TabPanel p={0} pt={8}>
               <EvmContractDetailsBytecode code={evmCodesByAddressData.code} />
             </TabPanel>
-            <TabPanel p={0}>Assets</TabPanel>
+            <TabPanel p={0}>
+              <AssetsSection address={contractAddressBechAddr} />
+            </TabPanel>
             <TabPanel p={0}>Transactions</TabPanel>
           </TabPanels>
         </Tabs>