Dashboard: Published Contract page UI improvements, Fix audit link

apps/dashboard/src/@/components/blocks/TokenSelector.tsx

@@ -11,9 +11,9 @@ import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useTokensData } from "@/hooks/tokens";
-import { replaceIpfsUrl } from "@/lib/sdk";
 import { cn } from "@/lib/utils";
 import { fallbackChainIcon } from "@/utils/chain-icons";
+import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
 import { Spinner } from "../ui/Spinner/Spinner";
 
 type Option = { label: string; value: string };
@@ -122,7 +122,10 @@ export function TokenSelector(props: {
         return option.label;
       }
       const resolvedSrc = token.iconUri
-        ? replaceIpfsUrl(token.iconUri, props.client)
+        ? resolveSchemeWithErrorHandler({
+            client: props.client,
+            uri: token.iconUri,
+          })
         : fallbackChainIcon;
 
       return (

apps/dashboard/src/@/components/contract-components/contract-deploy-form/platform-fee-fieldset.tsx

@@ -1,8 +1,8 @@
-import Link from "next/link";
 import type { ThirdwebClient } from "thirdweb";
 import { BasisPointsInput } from "@/components/blocks/BasisPointsInput";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SolidityInput } from "@/components/solidity-inputs";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { Fieldset } from "./common";
 import type { CustomContractDeploymentForm } from "./custom-contract";
 
@@ -78,30 +78,28 @@ export const PlatformFeeFieldset: React.FC<PlatformFeeFieldsetProps> = ({
             </FormFieldSetup>
           </>
         ) : isMarketplace ? (
-          <p className="mb-3 pt-4 text-muted-foreground text-sm italic">
+          <p className="text-muted-foreground text-sm leading-relaxed">
             A 2.5% platform fee is deducted from each sale to support ongoing
-            platform operations and improvements.{" "}
-            <Link
-              className="text-blue-500 underline"
+            platform operations and improvements. <br />
+            <UnderlineLink
               href={"https://thirdweb.com/pricing"}
               rel="noopener noreferrer"
               target="_blank"
             >
               See fee breakdown on pricing page.
-            </Link>
+            </UnderlineLink>
           </p>
         ) : (
-          <p className="mb-3 pt-4 text-muted-foreground text-sm italic">
+          <p className="text-muted-foreground text-sm leading-relaxed">
             A 2.5% platform fee is deducted from each primary sale price to
-            support ongoing platform operations and improvements.{" "}
-            <Link
-              className="text-blue-500 underline"
+            support ongoing platform operations and improvements. <br />
+            <UnderlineLink
               href={"https://thirdweb.com/pricing"}
               rel="noopener noreferrer"
               target="_blank"
             >
               See fee breakdown on pricing page.
-            </Link>
+            </UnderlineLink>
           </p>
         )}
       </div>

apps/dashboard/src/@/components/contract-components/publisher/publisher-header.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { ExternalLinkIcon } from "lucide-react";
+import { Edit3Icon } from "lucide-react";
 import Link from "next/link";
 import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import {
   AccountAddress,
   AccountAvatar,
-  AccountBlobbie,
   AccountName,
   AccountProvider,
 } from "thirdweb/react";
@@ -15,77 +14,69 @@ import { useEns } from "@/hooks/contract-hooks";
 import { replaceDeployerAddress } from "@/lib/publisher-utils";
 import { shortenIfAddress } from "@/utils/usedapp-external";
 
-interface PublisherHeaderProps {
-  wallet: string;
-  client: ThirdwebClient;
-}
-export const PublisherHeader: React.FC<PublisherHeaderProps> = ({
+export function PublisherLink({
   wallet,
   client,
-}) => {
+}: {
+  wallet: string;
+  client: ThirdwebClient;
+}) {
   const ensQuery = useEns({
     addressOrEnsName: wallet,
     client,
   });
 
   return (
-    <div>
-      <h4 className="font-medium text-base mb-3">Published by</h4>
-      <AccountProvider
-        // passing zero address during loading time to prevent the component from crashing
-        address={ensQuery.data?.address || ZERO_ADDRESS}
-        client={client}
-      >
-        <div className="flex items-center gap-3 relative">
-          <div className="translate-y-0.5">
-            <AccountAvatar
-              className="size-[34px] rounded-full border border-border border-solid object-cover"
-              fallbackComponent={
-                <AccountBlobbie className="size-[34px] rounded-full" />
-              }
-              loadingComponent={
-                <Skeleton className="size-[34px] rounded-full" />
-              }
-            />
-          </div>
-
-          <div className="space-y-1">
-            <Link
-              className="hover:underline leading-none before:absolute before:inset-0"
-              href={replaceDeployerAddress(
-                `/${ensQuery.data?.ensName || wallet}`,
-              )}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <AccountName
-                className="text-base leading-none font-medium"
-                fallbackComponent={
-                  // When social profile API support other TLDs as well - we can remove this condition
-                  ensQuery.data?.ensName ? (
-                    <span className="text-base leading-none font-medium">
-                      {ensQuery.data?.ensName}
-                    </span>
-                  ) : (
-                    <AccountAddress
-                      formatFn={(addr) =>
-                        shortenIfAddress(replaceDeployerAddress(addr))
-                      }
-                    />
-                  )
-                }
-                formatFn={(name) => replaceDeployerAddress(name)}
-                loadingComponent={<Skeleton className="h-6 w-40" />}
-              />
-            </Link>
+    <AccountProvider
+      // passing zero address during loading time to prevent the component from crashing
+      address={ensQuery.data?.address || ZERO_ADDRESS}
+      client={client}
+    >
+      <div className="flex items-center gap-2.5 relative">
+        <div>
+          <AccountAvatar
+            className="size-[34px] rounded-full border border-border border-solid object-cover"
+            fallbackComponent={
+              <div className="size-[34px] rounded-full flex items-center justify-center border bg-card">
+                <Edit3Icon className="size-3.5 text-muted-foreground" />
+              </div>
+            }
+            loadingComponent={<Skeleton className="size-[34px] rounded-full" />}
+          />
+        </div>
 
-            <span className="text-sm text-muted-foreground flex items-center gap-1.5 leading-none">
-              View all published contracts{" "}
-              <ExternalLinkIcon className="size-3 text-muted-foreground" />
-            </span>
+        <Link
+          className="hover:underline before:absolute before:inset-0 space-y-1.5"
+          href={replaceDeployerAddress(`/${ensQuery.data?.ensName || wallet}`)}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <div className="text-sm font-medium text-foreground leading-none">
+            Published by
           </div>
-        </div>
-      </AccountProvider>
-    </div>
+
+          <AccountName
+            className="text-sm text-foreground leading-none"
+            fallbackComponent={
+              // When social profile API support other TLDs as well - we can remove this condition
+              ensQuery.data?.ensName ? (
+                <span className="text-sm text-muted-foreground leading-none">
+                  {ensQuery.data?.ensName}
+                </span>
+              ) : (
+                <AccountAddress
+                  className="text-sm text-muted-foreground leading-none"
+                  formatFn={(addr) =>
+                    shortenIfAddress(replaceDeployerAddress(addr))
+                  }
+                />
+              )
+            }
+            formatFn={(name) => replaceDeployerAddress(name)}
+            loadingComponent={<Skeleton className="h-[17px] w-40" />}
+          />
+        </Link>
+      </div>
+    </AccountProvider>
   );
-};
+}

apps/dashboard/src/@/components/contract-components/shared/contract-id-image.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import type { FetchDeployMetadataResult } from "thirdweb/contract";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { getConfiguredThirdwebClient } from "@/constants/thirdweb.server";
-import { replaceIpfsUrl } from "@/lib/sdk";
+import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
 import generalContractIcon from "../../../../../public/assets/tw-icons/general.png";
 
 type ContractIdImageProps = {
@@ -29,13 +29,13 @@ export const ContractIdImage: React.FC<ContractIdImageProps> = ({
         className="size-8 rounded-full"
         src={
           DASHBOARD_THIRDWEB_SECRET_KEY
-            ? replaceIpfsUrl(
-                logo,
-                getConfiguredThirdwebClient({
+            ? resolveSchemeWithErrorHandler({
+                client: getConfiguredThirdwebClient({
                   secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
                   teamId: undefined,
                 }),
-              )
+                uri: logo,
+              })
             : logo
         }
       />

apps/dashboard/src/@/components/contracts/code-overview.tsx

@@ -657,7 +657,7 @@ export function CodeOverview(props: {
 
       <div className="flex flex-col gap-4">
         <div className="space-y-2">
-          <h2 className="text-lg font-semibold tracking-tight">
+          <h2 className="text-2xl font-semibold tracking-tight">
             {isAccountFactory
               ? "Direct contract interaction (advanced)"
               : chainInfo
@@ -851,7 +851,7 @@ function AccentButton(props: {
   return (
     <Button
       className={cn(
-        "text-sm justify-start h-auto py-1 px-2 text-muted-foreground",
+        "text-sm justify-start h-auto py-1.5 px-2 text-muted-foreground font-normal font-mono",
         props.isActive && "text-foreground bg-accent",
       )}
       onClick={props.onClick}