[Dashboard] Remove <Code /> component (ez mode) (#4787)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing code readability by replacing instances of the `Code` component from Chakra UI with a new `InlineCode` component, which provides a consistent styling for inline code snippets across various files.

### Detailed summary
- Added `InlineCode` component in `inline-code.tsx`.
- Replaced `Code` with `InlineCode` in multiple components for improved consistency:
  - `ChainValidation`
  - `EngineCorsConfig`
  - `EngineIpAllowlistConfig`
  - `InteractiveAbiFunction`
  - `EngineAccessTokens`
  - `SnapshotUpload`
  - `UploadStep`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/@/components/ui/inline-code.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils";
+
+export function InlineCode({
+  code,
+  className,
+}: { code: string; className?: string }) {
+  return (
+    <code
+      className={cn(
+        "inline-block rounded bg-muted px-2 font-mono text-sm",
+        className,
+      )}
+    >
+      {code}
+    </code>
+  );
+}

apps/dashboard/src/components/chain-validation/index.tsx

@@ -1,5 +1,5 @@
+import { InlineCode } from "@/components/ui/inline-code";
 import {
-  Code,
   FormControl,
   Icon,
   Input,
@@ -104,7 +104,7 @@ const ChainValidation: React.FC = () => {
                   <>
                     <Tr>
                       <Td>
-                        RPC supports <Code>eth_chainId</Code> method
+                        RPC supports <InlineCode code="eth_chainId" /> method
                       </Td>
                       <Td textAlign="right">
                         <StatusCheck
@@ -118,7 +118,8 @@ const ChainValidation: React.FC = () => {
                     </Tr>
                     <Tr>
                       <Td>
-                        RPC supports <Code>eth_blockNumber</Code> method
+                        RPC supports <InlineCode code="eth_blockNumber" />{" "}
+                        method
                       </Td>
                       <Td textAlign="right">
                         <StatusCheck
@@ -135,7 +136,7 @@ const ChainValidation: React.FC = () => {
                         <Td>
                           Chain ID{" "}
                           {existingChain?.id ? (
-                            <Code mr={1}>{existingChain.id}</Code>
+                            <code className="mr-1">{existingChain.id}</code>
                           ) : (
                             ""
                           )}

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

@@ -1,9 +1,9 @@
 "use client";
 
+import { InlineCode } from "@/components/ui/inline-code";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
   ButtonGroup,
-  Code,
   Divider,
   Flex,
   FormControl,
@@ -408,21 +408,11 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = ({
             <>
               <Divider />
               <Heading size="label.sm">Error</Heading>
-              <Text
-                borderColor="borderColor"
-                as={Code}
-                p={4}
-                w="full"
-                bgColor="backgroundHighlight"
-                borderRadius="md"
-                color="red.500"
-                whiteSpace="pre-wrap"
-                borderWidth="1px"
-                position="relative"
-              >
-                {/* biome-ignore lint/suspicious/noExplicitAny: FIXME */}
-                {formatError(error as any)}
-              </Text>
+              <InlineCode
+                //  biome-ignore lint/suspicious/noExplicitAny: FIXME
+                code={formatError(error as any)}
+                className="relative w-full whitespace-pre-wrap rounded-md border border-border p-4 text-red-500"
+              />
             </>
           ) : formattedResponseData ? (
             <>

apps/dashboard/src/components/engine/configuration/cors.tsx

@@ -1,8 +1,9 @@
+import { InlineCode } from "@/components/ui/inline-code";
 import {
   useEngineCorsConfiguration,
   useEngineSetCorsConfiguration,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Code, Flex, Textarea } from "@chakra-ui/react";
+import { Flex, Textarea } from "@chakra-ui/react";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { useForm } from "react-hook-form";
 import { Button, Heading, Text } from "tw-components";
@@ -55,7 +56,8 @@ export const EngineCorsConfig: React.FC<EngineCorsConfigProps> = ({
         <Heading size="title.md">Allowlisted Domains</Heading>
         <Text>
           Specify the origins that can call Engine (
-          <Code>https://example.com</Code>).
+          <InlineCode code="https://example.com" />
+          ).
           <br />
           Enter one origin per line, or leave this list empty to disallow calls
           from web clients.

apps/dashboard/src/components/engine/configuration/ip-allowlist.tsx

@@ -1,9 +1,10 @@
+import { InlineCode } from "@/components/ui/inline-code";
 import {
   useEngineIpAllowlistConfiguration,
   useEngineSetIpAllowlistConfiguration,
   useEngineSystemHealth,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Code, Flex, Textarea } from "@chakra-ui/react";
+import { Flex, Textarea } from "@chakra-ui/react";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { isValid } from "ipaddr.js";
 import { useForm } from "react-hook-form";
@@ -74,7 +75,9 @@ export const EngineIpAllowlistConfig: React.FC<
       <Flex flexDir="column" gap={2}>
         <Heading size="title.md">Allowlist IPs</Heading>
         <Text>
-          Specify the IP Addresses that can call Engine (<Code>8.8.8.8</Code>).
+          Specify the IP Addresses that can call Engine (
+          <InlineCode code="8.8.8.8" />
+          ).
           <br />
           Enter a comma separated list of IPs, or one IP per line, or leave this
           list empty to allow all IPs.

apps/dashboard/src/components/engine/permissions/engine-access-tokens.tsx

@@ -1,11 +1,12 @@
 "use client";
 
+import { InlineCode } from "@/components/ui/inline-code";
 import {
   useEngineAccessTokens,
   useEngineKeypairs,
   useEngineSystemHealth,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { ButtonGroup, Code, Flex } from "@chakra-ui/react";
+import { ButtonGroup, Flex } from "@chakra-ui/react";
 import { useState } from "react";
 import { Button, CodeBlock, Heading, Link, Text } from "tw-components";
 import { AccessTokensTable } from "./access-tokens-table";
@@ -104,7 +105,7 @@ const StandardAccessTokensPanel = ({
       <Flex direction="column" gap={2} mt={16}>
         <Heading size="title.md">Authenticate with your access token</Heading>
         <Text>
-          Set the <Code>authorization</Code> header.
+          Set the <InlineCode code="authorization" /> header.
         </Text>
         <CodeBlock
           language="typescript"
@@ -155,7 +156,7 @@ const KeypairAuthenticationPanel = ({
         <Heading size="title.md">Authenticate with your access token</Heading>
 
         <Text>
-          Set the <Code>authorization</Code> header.
+          Set the <InlineCode code="authorization" /> header.
         </Text>
         <CodeBlock
           language="typescript"

apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx

@@ -1,8 +1,8 @@
+import { InlineCode } from "@/components/ui/inline-code";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { cn } from "@/lib/utils";
 import {
   Box,
-  Code,
   Container,
   Flex,
   Icon,
@@ -266,8 +266,9 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                       <>
                         <Text as={ListItem}>
                           Files <em>must</em> contain one .csv file with a list
-                          of addresses and their <Code>maxClaimable</Code>.
-                          (amount each wallet is allowed to claim)
+                          of addresses and their{" "}
+                          <InlineCode code="maxClaimable" />. (amount each
+                          wallet is allowed to claim)
                           <br />
                           <Link
                             download
@@ -279,10 +280,10 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                           </Link>
                         </Text>
                         <Text as={ListItem}>
-                          You may optionally add <Code>price</Code> and{" "}
-                          <Code>currencyAddress</Code> overrides as well. This
-                          lets you override the currency and price you would
-                          like to charge per wallet you specified
+                          You may optionally add <InlineCode code="price" /> and
+                          <InlineCode code="currencyAddress" /> overrides as
+                          well. This lets you override the currency and price
+                          you would like to charge per wallet you specified
                           <br />
                           <Link
                             download
@@ -306,7 +307,8 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                           </Link>
                         </Text>
                         <Text as={ListItem}>
-                          You may optionally add a <Code>maxClaimable</Code>{" "}
+                          You may optionally add a{" "}
+                          <InlineCode code="maxClaimable" />
                           column override. (amount each wallet is allowed to
                           claim) If not specified, the default value is the one
                           you have set on your claim phase.
@@ -321,10 +323,10 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                           </Link>
                         </Text>
                         <Text as={ListItem}>
-                          You may optionally add <Code>price</Code> and{" "}
-                          <Code>currencyAddress</Code> overrides. This lets you
-                          override the currency and price you would like to
-                          charge per wallet you specified.{" "}
+                          You may optionally add <InlineCode code="price" /> and
+                          <InlineCode code="currencyAddress" /> overrides. This
+                          lets you override the currency and price you would
+                          like to charge per wallet you specified.{" "}
                           <strong>
                             When defining a custom currency address, you must
                             also define a price override.

apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-tab.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import {} from "@chakra-ui/react";
 import { Flex, Icon, useDisclosure } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import {

apps/dashboard/src/contract-ui/tabs/nfts/components/transfer-tab.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import {} from "@chakra-ui/react";
 import { FormControl, Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { SolidityInput } from "contract-ui/components/solidity-inputs";

apps/dashboard/src/contract-ui/tabs/permissions/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { InlineCode } from "@/components/ui/inline-code";
 import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
-import { ButtonGroup, Code, Divider, Flex } from "@chakra-ui/react";
+import { ButtonGroup, Divider, Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { Card, Heading, Link, LinkButton, Text } from "tw-components";
 import { Permissions } from "./components";
@@ -29,7 +30,8 @@ export const ContractPermissionsPage: React.FC<
           Missing PermissionsEnumerable Extension
         </Heading>
         <Text>
-          This contract does not support the <Code>PermissionsEnumerable</Code>{" "}
+          This contract does not support the{" "}
+          <InlineCode code="PermissionsEnumerable" />
           extension.
           <br />
           As a result, you can only view and manage basic permissions via the{" "}