Remove <Code /> component`

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

@@ -1,5 +1,4 @@
 import {
-  Code,
   FormControl,
   Icon,
   Input,
@@ -104,7 +103,7 @@ const ChainValidation: React.FC = () => {
                   <>
                     <Tr>
                       <Td>
-                        RPC supports <Code>eth_chainId</Code> method
+                        RPC supports <code>eth_chainId</code> method
                       </Td>
                       <Td textAlign="right">
                         <StatusCheck
@@ -118,7 +117,7 @@ const ChainValidation: React.FC = () => {
                     </Tr>
                     <Tr>
                       <Td>
-                        RPC supports <Code>eth_blockNumber</Code> method
+                        RPC supports <code>eth_blockNumber</code> method
                       </Td>
                       <Td textAlign="right">
                         <StatusCheck
@@ -135,7 +134,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/engine/configuration/cors.tsx

@@ -2,7 +2,7 @@ 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 +55,7 @@ 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>).
+          <code>https://example.com</code>).
           <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

@@ -3,7 +3,7 @@ import {
   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 +74,7 @@ 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 (<code>8.8.8.8</code>).
           <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

@@ -5,7 +5,7 @@ import {
   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 +104,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 <code>authorization</code> header.
         </Text>
         <CodeBlock
           language="typescript"
@@ -155,7 +155,7 @@ const KeypairAuthenticationPanel = ({
         <Heading size="title.md">Authenticate with your access token</Heading>
 
         <Text>
-          Set the <Code>authorization</Code> header.
+          Set the <code>authorization</code> header.
         </Text>
         <CodeBlock
           language="typescript"

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

@@ -2,7 +2,6 @@ import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { cn } from "@/lib/utils";
 import {
   Box,
-  Code,
   Container,
   Flex,
   Icon,
@@ -267,7 +266,7 @@ 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>.
+                          of addresses and their <code>maxClaimable</code>.
                           (amount each wallet is allowed to claim)
                           <br />
                           <Link
@@ -280,8 +279,8 @@ 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
+                          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
                           <br />
@@ -307,7 +306,7 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                           </Link>
                         </Text>
                         <Text as={ListItem}>
-                          You may optionally add a <Code>maxClaimable</Code>{" "}
+                          You may optionally add a <code>maxClaimable</code>
                           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.
@@ -322,8 +321,8 @@ 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
+                          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.{" "}
                           <strong>

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
-import { ButtonGroup, Code, Divider, Flex } from "@chakra-ui/react";
+import { ButtonGroup, Divider, Flex } from "@chakra-ui/react";
 import { useTabHref } from "contract-ui/utils";
 import type { ThirdwebContract } from "thirdweb";
 import { Card, Heading, Link, LinkButton, Text } from "tw-components";
@@ -29,7 +29,7 @@ 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 <code>PermissionsEnumerable</code>
           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,5 @@
 import { cn } from "@/lib/utils";
 import {
-  Code,
   Container,
   Flex,
   Icon,
@@ -82,13 +81,13 @@ export const UploadStep: React.FC<UploadStepProps> = ({
                 .
               </ListItem>
               <ListItem>
-                The csv <em>must</em> have a <Code>name</Code> column, which
+                The csv <em>must</em> have a <code>name</code> column, which
                 defines the name of the NFT.
               </ListItem>
               <ListItem>
                 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>).
+                It doesn&apos;t matter at what number you begin. (Example:
+                <code>131.png</code>, <code>132.png</code>).
               </ListItem>
               <ListItem>
                 Make sure to drag and drop the CSV/JSON and the images{" "}
@@ -104,23 +103,23 @@ 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: <code>0.png</code> and <code>0.mp4</code>,
+                  <code>1.png</code> and <code>1.glb</code>, etc.)
                 </small>
               </ListItem>
               <ListItem>
                 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 <code>image</code> and/or
+                <code>animation_url</code> column and add the IPFS hashes there.
                 <Link download color="blue.500" href="/example-with-ipfs.csv">
                   Download example.csv
                 </Link>
               </ListItem>
               <ListItem>
                 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 <code>image</code> and
+                <code>animation_url</code> column.
                 <Link download color="blue.500" href="/example-with-maps.csv">
                   Download example.csv
                 </Link>