[Dashboard] Add some informative badges to the Explorer

Author: kien-ngo

apps/dashboard/src/components/contract-functions/contract-function.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
@@ -34,7 +36,7 @@ import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
 import { toFunctionSelector } from "thirdweb/utils";
-import { Badge, Button, Card, Heading, Text } from "tw-components";
+import { Button, Card, Heading, Text } from "tw-components";
 import { useDebounce } from "use-debounce";
 import { useContractFunctionSelectors } from "../../contract-ui/hooks/useContractFunctionSelectors";
 import {
@@ -85,6 +87,11 @@ function ContractFunctionInner({ contract, fn }: ContractFunctionProps) {
     return undefined;
   }, [isERC20, isERC721Query.data, isERC1155Query.data]);
 
+  const functionSelector = useMemo(
+    () => (fn?.type === "function" ? toFunctionSelector(fn) : undefined),
+    [fn],
+  );
+
   if (!fn) {
     return null;
   }
@@ -111,21 +118,22 @@ function ContractFunctionInner({ contract, fn }: ContractFunctionProps) {
 
   return (
     <Flex direction="column" gap={1.5}>
-      <Flex
-        alignItems={{ base: "start", md: "center" }}
-        gap={2}
-        direction={{ base: "column", md: "row" }}
-      >
+      <Flex alignItems="center" gap={2} direction="row" flexWrap="wrap">
         <Flex alignItems="baseline" gap={1} flexWrap="wrap">
           <Heading size="subtitle.md">{camelToTitle(fn.name)}</Heading>
           <Heading size="subtitle.sm" className="text-muted-foreground">
             ({fn.name})
           </Heading>
         </Flex>
-        {isFunction && (
-          <Badge size="label.sm" variant="subtle" colorScheme="green">
-            {fn.stateMutability}
-          </Badge>
+        {isFunction && <Badge variant="success">{fn.stateMutability}</Badge>}
+        {functionSelector && (
+          <CopyTextButton
+            textToCopy={functionSelector}
+            textToShow={functionSelector}
+            copyIconPosition="right"
+            tooltip="The selector of this function"
+            className="ml-auto text-xs"
+          />
         )}
       </Flex>
 
@@ -173,11 +181,7 @@ function ContractFunctionInputs(props: {
             ({fn.name})
           </Heading>
         </Flex>
-        {isFunction && (
-          <Badge size="label.sm" variant="subtle" colorScheme="green">
-            {fn.stateMutability}
-          </Badge>
-        )}
+        {isFunction && <Badge variant="success">{fn.stateMutability}</Badge>}
       </Flex>
 
       {fn.inputs?.length ? (

apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Badge } from "@/components/ui/badge";
 import { InlineCode } from "@/components/ui/inline-code";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
@@ -416,7 +417,15 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = ({
           ) : formattedResponseData ? (
             <>
               <Divider />
-              <Heading size="label.sm">Output</Heading>
+              <div className="flex flex-row items-center gap-2">
+                <Heading size="label.sm">Output</Heading>
+                {/* Show the Solidity type of the function's output */}
+                {abiFunction.outputs.length > 0 && (
+                  <Badge variant="default">
+                    {abiFunction.outputs[0]?.type}
+                  </Badge>
+                )}
+              </div>
               <CodeBlock
                 w="full"
                 position="relative"