Restore deleted whitespaces, Remove unsafe biome formatting (thirdweb…

…-dev#4789)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the user interface by adding space between certain text elements and enhancing readability across various components in the dashboard application.

### Detailed summary
- Added space after text in various components to improve readability.
- Updated text elements in `templates.tsx`, `index.tsx`, `TransactionModeScreen.tsx`, and others.
- Ensured consistent formatting in `HeroSection.tsx`, `PricingCard.tsx`, and various settings pages.

> The following files were skipped due to too many changes: `apps/dashboard/src/components/embedded-wallets/Configure/index.tsx`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/ContractChecklist.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx`, `apps/dashboard/src/core-ui/batch-upload/upload-step.tsx`, `packages/thirdweb/package.json`, `apps/dashboard/src/pages/template/[id].tsx`

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

<!-- end pr-codex -->

.changeset/twenty-islands-unite.md

@@ -0,0 +1,7 @@
+---
+"@thirdweb-dev/react-native-adapter": patch
+"@thirdweb-dev/service-utils": patch
+"thirdweb": patch
+---
+
+Fix whitespaces in UI components

apps/dashboard/package.json

@@ -9,7 +9,7 @@
     "start": "next start",
     "format": "biome format ./src --write",
     "lint": "biome check ./src && knip && eslint ./src",
-    "fix": "biome check ./src --fix --unsafe && eslint ./src --fix",
+    "fix": "biome check ./src --fix && eslint ./src --fix",
     "typecheck": "tsc --noEmit",
     "gen:theme-typings": "chakra-cli tokens src/theme/index.ts",
     "postinstall": "pnpm run gen:theme-typings",

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -141,7 +141,7 @@ export function FaucetButton({
       <Button variant="outline" className="!opacity-100 w-full " disabled>
         {canClaimFaucetQuery.data.type === "throttle" && (
           <>
-            Your next claim is available
+            Your next claim is available{" "}
             {formatTime(canClaimFaucetQuery.data.ttlSeconds)}
           </>
         )}
@@ -186,7 +186,7 @@ export function FaucetButton({
 
       {faucetWalletBalanceQuery.data && (
         <p className="mt-3 text-muted-foreground text-xs">
-          {Number(faucetWalletBalanceQuery.data.displayValue).toFixed(3)}
+          {Number(faucetWalletBalanceQuery.data.displayValue).toFixed(3)}{" "}
           {faucetWalletBalanceQuery.data.symbol} left in the faucet
         </p>
       )}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx

@@ -34,7 +34,7 @@ export async function FaucetSection(props: { chain: ChainMetadata }) {
           <div className="h-2" />
 
           <p className="max-w-[520px] px-4 text-center text-muted-foreground text-sm">
-            Get free {chain.nativeCurrency.symbol} fast and reliably.
+            Get free {chain.nativeCurrency.symbol} fast and reliably.{" "}
             {amountToGive} {chain.nativeCurrency.symbol}/day.
           </p>
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx

@@ -46,7 +46,7 @@ export default async function Page(props: {
       <header className="flex flex-col gap-y-2">
         <p className="font-bold text-3xl">Transaction Details</p>
         <div className="flex gap-x-2">
-          {shortenAddress(transaction.from)} called on
+          {shortenAddress(transaction.from)} called on{" "}
           {shortenAddress(transaction.to || ZERO_ADDRESS)}
         </div>
       </header>
@@ -131,8 +131,8 @@ export default async function Page(props: {
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-x-2">Gas fees (Gwei)</div>
           <p>
-            Base: {toTokens(block.baseFeePerGas || 0n, 9)} | Max:
-            {toTokens(transaction.maxFeePerGas || 0n, 9)} | Max priority:
+            Base: {toTokens(block.baseFeePerGas || 0n, 9)} | Max:{" "}
+            {toTokens(transaction.maxFeePerGas || 0n, 9)} | Max priority:{" "}
             {transaction.maxPriorityFeePerGas?.toString()}
           </p>
         </div>
@@ -150,7 +150,7 @@ export default async function Page(props: {
           <div className="flex items-center gap-x-2">Other</div>
           <p>
             Txn type: {hexToNumber(transaction.typeHex || "0x0")} (
-            {transaction.type}) | Nonce: {transaction.nonce} | Position:
+            {transaction.type}) | Nonce: {transaction.nonce} | Position:{" "}
             {transaction.transactionIndex}
           </p>
         </div>

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/[chain_type]/page.tsx

@@ -115,7 +115,7 @@ export default async function ChainListLayout(props: {
           <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
             <div className="flex flex-row items-center justify-between gap-4 lg:flex-col lg:justify-start">
               <h1 className="font-semibold text-4xl tracking-tighter lg:text-5xl">
-                List of
+                List of{" "}
                 {props.params.chain_type.charAt(0).toUpperCase() +
                   props.params.chain_type.slice(1)}
               </h1>

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chain-table.tsx

@@ -236,13 +236,13 @@ export async function ChainsData(props: {
       )}
       <div className="h-4" />
       <p className="text-balance text-center text-muted-foreground text-sm">
-        Showing
-        <span className="text-accent-foreground">{paginatedChains.length}</span>
-        out of
+        Showing{" "}
+        <span className="text-accent-foreground">{paginatedChains.length}</span>{" "}
+        out of{" "}
         {filteredCount !== totalCount ? (
           <>
-            <span className="text-accent-foreground">{filteredCount}</span>
-            chains that match filters. (Total:
+            <span className="text-accent-foreground">{filteredCount}</span>{" "}
+            chains that match filters. (Total:{" "}
             <span className="text-accent-foreground">{totalCount}</span>)
           </>
         ) : (

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/server/ecosystem-partners-section.tsx

@@ -14,7 +14,7 @@ export function EcosystemPartnersSection({
           </h4>
           <p className="text-muted-foreground text-sm leading-normal">
             Configure apps that can use your wallet. Creating a partner will
-            generate a unique partner ID that can access your ecosystem. <br />
+            generate a unique partner ID that can access your ecosystem. <br />{" "}
             You will need to generate at least one partner ID for use in your
             own app.
           </p>

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/server/partners-table.tsx

@@ -129,7 +129,7 @@ function PartnerRow(props: {
             description={
               <span>
                 Their partner key will no longer be able to use your ecosystem
-                wallet. Their users will still have access to their assets at
+                wallet. Their users will still have access to their assets at{" "}
                 <Link
                   href={`https://${props.ecosystem.slug}.ecosystem.thirdweb.com`}
                   target="_blank"

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/pricing-card.tsx

@@ -14,7 +14,7 @@ export function EcosystemWalletPricingCard(props: { className?: string }) {
       <Image src={headerImage} alt="" sizes="50vw" className="w-full" />
       <div className="relative border-border border-t p-4 pb-8 md:p-6 md:pb-8">
         <h4 className="font-bold text-4xl text-foreground">
-          $250
+          $250{" "}
           <span className="font-normal text-lg text-muted-foreground">
             per month
           </span>

apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/layout.tsx

@@ -13,7 +13,7 @@ export default async function Layout(props: {
           <p className="text-muted-foreground leading-7">
             Pay allows your users to purchase cryptocurrencies and execute
             transactions with their credit card or debit card, or with any token
-            via cross-chain routing.
+            via cross-chain routing.{" "}
             <Link
               target="_blank"
               href="https://portal.thirdweb.com/connect/pay/overview"

apps/dashboard/src/app/(dashboard)/explore/[category]/page.tsx

@@ -72,7 +72,7 @@ export default async function ExploreCategoryPage(
           {category.displayName || category.name}
         </h1>
         <p className="max-w-screen-md text-base text-muted-foreground lg:text-lg">
-          {category.description}
+          {category.description}{" "}
           {category.learnMore && (
             <Link href={category.learnMore}>Learn more</Link>
           )}

apps/dashboard/src/app/(dashboard)/tools/keccak256-converter/components/Keccak256Converter.tsx

@@ -47,7 +47,7 @@ export const Keccak256Converter = () => {
 
       <Card className="flex flex-col gap-2 p-4">
         <p>
-          Or use the
+          Or use the{" "}
           <a
             href="https://portal.thirdweb.com/typescript/v5"
             target="_blank"

apps/dashboard/src/app/(dashboard)/tools/wei-converter/components/WeiConverter.tsx

@@ -75,7 +75,7 @@ export const WeiConverter = () => {
 
       <Card className="flex flex-col gap-2 p-4">
         <p>
-          Or use the
+          Or use the{" "}
           <a
             href="https://portal.thirdweb.com/typescript/v5"
             target="_blank"

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx

@@ -51,7 +51,7 @@ export function AccountAbstractionPage(props: {
 
       <p className="text-muted-foreground text-sm">
         Easily integrate Account abstraction (ERC-4337) compliant smart accounts
-        into your apps.
+        into your apps.{" "}
         <TrackedLinkTW
           target="_blank"
           label="docs-wallets"

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/page.tsx

@@ -31,7 +31,7 @@ export default async function Page(props: {
       <p className="mt-3 mb-7 max-w-[700px] text-muted-foreground">
         A wallet infrastructure that enables apps to create, manage, and control
         their users wallets. Email login, social login, and bring-your-own auth
-        supported.
+        supported.{" "}
         <TrackedLinkTW
           target="_blank"
           href="https://portal.thirdweb.com/connect/in-app-wallet/overview"

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/layout.tsx

@@ -31,7 +31,7 @@ export default async function Layout(props: {
           <p className="text-muted-foreground text-sm leading-relaxed md:text-base">
             Pay allows your users to purchase cryptocurrencies and execute
             transactions with their credit card or debit card, or with any token
-            via cross-chain routing.
+            via cross-chain routing.{" "}
             <Link
               target="_blank"
               href="https://portal.thirdweb.com/connect/pay/overview"

apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx

@@ -310,27 +310,27 @@ function AllowedDomainsSetting(props: {
   const helperText = (
     <ul className="flex list-disc flex-col gap-1.5 py-1 pl-3 text-muted-foreground text-sm [&>li]:pl-1">
       <li>
-        Authorize all domains with
+        Authorize all domains with{" "}
         <span className="inline-block rounded bg-muted px-2 font-mono text-xs">
           *
         </span>
-        .
+        {". "}
         <span>
-          Example:
+          Example:{" "}
           <span className="inline-block rounded bg-muted px-2 font-mono text-xs">
             *.thirdweb.com
-          </span>
+          </span>{" "}
           accepts all
           <span className="inline-block rounded bg-muted px-2 font-mono text-xs">
             .thirdweb.com
-          </span>
+          </span>{" "}
           sites
         </span>
       </li>
       <li>
-        Authorize localhost URLs with
+        Authorize localhost URLs with{" "}
         <span className="inline-block rounded bg-muted px-2 font-mono text-xs">
-          localhost:&lt;port&gt;
+          {"localhost:<port>"}
         </span>
       </li>
       <li>Enter domains separated by commas or new lines</li>
@@ -647,7 +647,7 @@ function APIKeyDetails({
         <div>
           <h3>Secret Key</h3>
           <p className="mb-2 text-muted-foreground text-sm">
-            Identifies and authenticates your application from a backend. <br />
+            Identifies and authenticates your application from a backend. <br />{" "}
             This is not the full secret key, Refer to your saved secret key at
             the time of creation for the full secret key.
           </p>

apps/dashboard/src/components/FTUX/slides.tsx

@@ -50,8 +50,8 @@ export const slides: Slide[] = [
               color="blue.500"
             >
               Hooks
-            </TrackedLink>
-            and
+            </TrackedLink>{" "}
+            and{" "}
             <TrackedLink
               category={TRACK_CATEGORY}
               href="https://portal.thirdweb.com/typescript"
@@ -60,7 +60,7 @@ export const slides: Slide[] = [
               color="blue.500"
             >
               functions
-            </TrackedLink>
+            </TrackedLink>{" "}
             that let you easily interact with contracts, wallets, and
             transactions.
           </ListItem>
@@ -73,7 +73,7 @@ export const slides: Slide[] = [
               color="blue.500"
             >
               In-App wallets
-            </TrackedLink>
+            </TrackedLink>{" "}
             with different key management structures.
           </ListItem>
           <ListItem>
@@ -85,7 +85,7 @@ export const slides: Slide[] = [
               color="blue.500"
             >
               Plug and play UI components
-            </TrackedLink>
+            </TrackedLink>{" "}
             that you can drop into your app to easily integrate web3
             functionality
           </ListItem>
@@ -147,7 +147,7 @@ export const slides: Slide[] = [
               color="blue.500"
             >
               Interact
-            </TrackedLink>
+            </TrackedLink>{" "}
             with contracts.
           </ListItem>
           <ListItem>
@@ -159,7 +159,7 @@ export const slides: Slide[] = [
               color="blue.500"
             >
               Deploy
-            </TrackedLink>
+            </TrackedLink>{" "}
             contracts to blockchain.
           </ListItem>
         </UnorderedList>
@@ -203,8 +203,8 @@ export const slides: Slide[] = [
           }}
         >
           Privacy Policy
-        </TrackedLink>
-        and
+        </TrackedLink>{" "}
+        and{" "}
         <TrackedLink
           href="/tos"
           isExternal

apps/dashboard/src/components/buttons/MismatchButton.tsx

@@ -455,14 +455,14 @@ const MismatchNotice: React.FC<{
       </Heading>
 
       <Text>
-        Your wallet is connected to the
+        Your wallet is connected to the{" "}
         <Box as="strong" textTransform="capitalize">
           {walletConnectedNetworkInfo?.name}
-        </Box>
-        network but this action requires you to connect to the
+        </Box>{" "}
+        network but this action requires you to connect to the{" "}
         <Box as="strong" textTransform="capitalize">
           {chain?.name}
-        </Box>
+        </Box>{" "}
         network.
       </Text>
 

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

@@ -134,7 +134,7 @@ const ChainValidation: React.FC = () => {
                     {validationReport.chainIdSupported && (
                       <Tr>
                         <Td>
-                          Chain ID
+                          Chain ID{" "}
                           {existingChain?.id ? (
                             <Code mr={1}>{existingChain.id}</Code>
                           ) : (

apps/dashboard/src/components/cmd-k-search/index.tsx

@@ -340,7 +340,7 @@ const SearchResult: React.FC<SearchResultProps> = ({
           </Link>
         </h3>
         <p className="text-muted-foreground text-xs">
-          {result.chainMetadata.name} -
+          {result.chainMetadata.name} -{" "}
           <span className="font-mono">
             {shortenIfAddress(result.contractAddress)}
           </span>

apps/dashboard/src/components/configure-networks/Form/NetworkIdInput.tsx

@@ -23,14 +23,14 @@ export const NetworkIDInput: React.FC<{
           dashboard.
           <p className="mt-2 mb-1 font-semibold">Example</p>
           <p className="text-muted-foreground text-sm">
-            thirdweb.com/&lt;slug&gt;/...
+            {"thirdweb.com/<slug>..."}
           </p>
         </span>
       }
       errorMessage={
         form.formState.errors.slug?.type === "taken" ? (
           <>
-            Can not use {`"${slug}"`}.
+            Can not use {`"${slug}"`}.{" "}
             {slug &&
               existingChain &&
               `It is being used by "${existingChain.name}"`}

apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx

@@ -805,7 +805,7 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
 
                 <p className="mb-3 text-muted-foreground text-sm">
                   Select a network to deploy this contract on. We recommend
-                  starting with a testnet.
+                  starting with a testnet.{" "}
                   <TrackedLinkTW
                     href="/chainlist"
                     category="deploy"
@@ -917,7 +917,7 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
                   }
                 />
                 <span>
-                  Import so I can find it in the list of my contracts at
+                  Import so I can find it in the list of my contracts at{" "}
                   <TrackedLinkTW
                     className="text-link-foreground hover:text-foreground"
                     href="/dashboard"

apps/dashboard/src/components/contract-components/contract-publish-form/default-factory.tsx

@@ -16,15 +16,15 @@ export const DefaultFactory: React.FC<DefaultFactoryProps> = ({ abi }) => {
     <Flex px={0} pb={0} flexDir="column" gap={12}>
       <UnorderedList>
         <Text as={ListItem}>
-          Default factory lets users deploy your contract to
+          Default factory lets users deploy your contract to{" "}
           <strong>any EVM network</strong>.
         </Text>
         <Text as={ListItem}>
           The factory deploys EIP-1167 minimal proxies of your contract. This
           makes it much cheaper to deploy.
         </Text>
         <Text as={ListItem}>
-          The factory is
+          The factory is{" "}
           <Link
             color="primary.500"
             isExternal