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

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{" "}

apps/dashboard/src/core-ui/batch-upload/upload-step.tsx

@@ -1,6 +1,6 @@
-import { UnorderedList } from "@/components/ui/List/List";
+import { InlineCode } from "@/components/ui/inline-code";
 import { cn } from "@/lib/utils";
-import { Code, Container, Flex, Icon, Link } from "@chakra-ui/react";
+import { Container, Flex, Icon, Link, UnorderedList } from "@chakra-ui/react";
 import { BsFillCloudUploadFill } from "react-icons/bs";
 import { Heading, Text } from "tw-components";
 
@@ -81,13 +81,14 @@ export const UploadStep: React.FC<UploadStepProps> = ({
                 .
               </li>
               <li>
-                The csv <em>must</em> have a <Code>name</Code> column, which
-                defines the name of the NFT.
+                The csv <em>must</em> have a <InlineCode code="name" /> column,
+                which defines the name of the NFT.
               </li>
               <li>
                 Asset names <em>must</em> be sequential 0,1,2,3...n.[extension].
                 It doesn&apos;t matter at what number you begin. (Example:{" "}
-                <Code>131.png</Code>, <Code>132.png</Code>).
+                <InlineCode code="131.png" />, <InlineCode code="132.png" />
+                ).
               </li>
               <li>
                 Make sure to drag and drop the CSV/JSON and the images{" "}
@@ -103,23 +104,26 @@ export const UploadStep: React.FC<UploadStepProps> = ({
                 <br />
                 <small>
                   They both have to follow the asset naming convention above.
-                  (Example: <Code>0.png</Code> and <Code>0.mp4</Code>,{" "}
-                  <Code>1.png</Code> and <Code>1.glb</Code>, etc.)
+                  (Example: <InlineCode code="0.png" /> and{" "}
+                  <InlineCode code="0.mp4" />,<InlineCode code="1.png" /> and{" "}
+                  <InlineCode code="1.glb" />, etc.)
                 </small>
               </li>
               <li>
                 When uploading files, we will upload them and pin them to IPFS
                 automatically for you. If you already have the files uploaded,
-                you can add an <Code>image</Code> and/or{" "}
-                <Code>animation_url</Code> column and add the IPFS hashes there.{" "}
+                you can add an <InlineCode code="image" /> and/or
+                <InlineCode code="animation_url" /> column and add the IPFS
+                hashes there.
                 <Link download color="blue.500" href="/example-with-ipfs.csv">
                   Download example.csv
                 </Link>
               </li>
               <li>
                 If you want to make your media files map to your NFTs, you can
-                add add the name of your files to the <Code>image</Code> and{" "}
-                <Code>animation_url</Code> column.{" "}
+                add add the name of your files to the{" "}
+                <InlineCode code="image" /> and
+                <InlineCode code="animation_url" /> column.
                 <Link download color="blue.500" href="/example-with-maps.csv">
                   Download example.csv
                 </Link>