Merge branch 'main' into yash/compute-ref-deployment-info

Author: kumaryash90

.changeset/four-ducks-try.md

@@ -0,0 +1,9 @@
+---
+"thirdweb": minor
+---
+
+Feature: Allows hiding the "Linked Profiles" button in the `ConnectButton` Details Modal
+
+```tsx
+<ConnectButton detailsModal={{ manageWallet: { allowLinkingProfiles: false } }} />
+```

.changeset/shy-bats-eat.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Validate getContract params

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

@@ -65,6 +65,7 @@ export function Img(props: imgElementProps) {
           "fade-in-0 object-cover transition-opacity duration-300",
           className,
         )}
+        decoding="async"
       />
 
       {status !== "loaded" && (

apps/dashboard/src/@/components/blocks/MultiNetworkSelector.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { MultiNetworkSelector } from "./NetworkSelectors";
+
+const meta = {
+  title: "blocks/Cards/MultiNetworkSelector",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+      <Variant label="No Chains selected by default" selectedChainIds={[]} />
+      <Variant
+        label="Polygon, Ethereum selected by default"
+        selectedChainIds={[1, 137]}
+      />
+    </div>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  selectedChainIds: number[];
+}) {
+  const [chainIds, setChainIds] = useState<number[]>(props.selectedChainIds);
+  return (
+    <BadgeContainer label={props.label}>
+      <MultiNetworkSelector
+        selectedChainIds={chainIds}
+        onChange={setChainIds}
+      />
+    </BadgeContainer>
+  );
+}

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

@@ -4,6 +4,7 @@ import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
 import { useCallback, useMemo } from "react";
+import { ChainIcon } from "../../../components/icons/ChainIcon";
 import { useAllChainsData } from "../../../hooks/chains/allChains";
 
 function cleanChainName(chainName: string) {
@@ -51,7 +52,7 @@ export function MultiNetworkSelector(props: {
 
       return (
         <div className="flex justify-between gap-4">
-          <span className="grow truncate text-left">
+          <span className="flex grow gap-2 truncate text-left">
             {cleanChainName(chain.name)}
           </span>
           <Badge variant="outline" className="gap-2">
@@ -133,8 +134,15 @@ export function SingleNetworkSelector(props: {
 
       return (
         <div className="flex justify-between gap-4">
-          <span className="grow truncate text-left">{chain.name}</span>
-          <Badge variant="outline" className="gap-2">
+          <span className="flex grow gap-2 truncate text-left">
+            <ChainIcon
+              className="size-5"
+              ipfsSrc={chain.icon?.url}
+              loading="lazy"
+            />
+            {chain.name}
+          </span>
+          <Badge variant="outline" className="gap-2 max-sm:hidden">
             <span className="text-muted-foreground">Chain ID</span>
             {chain.chainId}
           </Badge>

apps/dashboard/src/@/components/blocks/SingleNetworkSelector.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { SingleNetworkSelector } from "./NetworkSelectors";
+
+const meta = {
+  title: "blocks/Cards/SingleNetworkSelector",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+      <Variant label="No Chain ID selected by default" chainId={undefined} />
+      <Variant label="Polygon selected by default" chainId={137} />
+      <Variant
+        label="Show certain chains only"
+        chainId={undefined}
+        chainIds={[1, 137, 10]}
+      />
+    </div>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  chainId: number | undefined;
+  chainIds?: number[];
+}) {
+  const [chainId, setChainId] = useState<number | undefined>(props.chainId);
+  return (
+    <BadgeContainer label={props.label}>
+      <SingleNetworkSelector
+        chainId={chainId}
+        onChange={setChainId}
+        chainIds={props.chainIds}
+      />
+    </BadgeContainer>
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx

@@ -85,7 +85,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
                 href={`/${chain.slug}`}
                 className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-muted/50 px-2.5 py-1.5 hover:bg-muted"
               >
-                <ChainIcon ipfsSrc={chain.icon?.url} size={16} />
+                <ChainIcon ipfsSrc={chain.icon?.url} className="size-4" />
                 {cleanedChainName && (
                   <span className="text-xs">{cleanedChainName}</span>
                 )}

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

@@ -4,9 +4,7 @@ import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/env";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { cn } from "@/lib/utils";
-
-const fallbackChainIcon =
-  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTY4LjE1MTkgNzUuNzM3MkM2Mi4yOTQzIDc5Ljk5MyA1NS4yMzk3IDgyLjI4NTIgNDcuOTk5MyA4Mi4yODUyQzQwLjc1ODkgODIuMjg1MiAzMy43MDQzIDc5Ljk5MyAyNy44NDY2IDc1LjczNzJNNjMuMDI5MSAxNy4xODM3QzY5LjUzNjggMjAuMzU3NyA3NC44NzI2IDI1LjUxMDQgNzguMjcxOCAzMS45MDMzQzgxLjY3MDkgMzguMjk2MiA4Mi45NTkgNDUuNjAxMiA4MS45NTEzIDUyLjc3MTFNMTQuMDQ3NiA1Mi43NzA4QzEzLjAzOTkgNDUuNjAwOCAxNC4zMjggMzguMjk1OSAxNy43MjcxIDMxLjkwM0MyMS4xMjYzIDI1LjUxMDEgMjYuNDYyMSAyMC4zNTczIDMyLjk2OTggMTcuMTgzM000Ni4wNTk4IDI5LjM2NzVMMjkuMzY3MyA0Ni4wNkMyOC42ODg1IDQ2LjczODkgMjguMzQ5IDQ3LjA3ODMgMjguMjIxOCA0Ny40Njk3QzI4LjExIDQ3LjgxNCAyOC4xMSA0OC4xODQ5IDI4LjIyMTggNDguNTI5MkMyOC4zNDkgNDguOTIwNiAyOC42ODg1IDQ5LjI2MDEgMjkuMzY3MyA0OS45MzlMNDYuMDU5OCA2Ni42MzE0QzQ2LjczODcgNjcuMzEwMyA0Ny4wNzgxIDY3LjY0OTcgNDcuNDY5NSA2Ny43NzY5QzQ3LjgxMzggNjcuODg4OCA0OC4xODQ3IDY3Ljg4ODggNDguNTI5IDY3Ljc3NjlDNDguOTIwNCA2Ny42NDk3IDQ5LjI1OTkgNjcuMzEwMyA0OS45Mzg4IDY2LjYzMTRMNjYuNjMxMiA0OS45MzlDNjcuMzEwMSA0OS4yNjAxIDY3LjY0OTUgNDguOTIwNiA2Ny43NzY3IDQ4LjUyOTJDNjcuODg4NiA0OC4xODQ5IDY3Ljg4ODYgNDcuODE0IDY3Ljc3NjcgNDcuNDY5N0M2Ny42NDk1IDQ3LjA3ODMgNjcuMzEwMSA0Ni43Mzg5IDY2LjYzMTIgNDYuMDZMNDkuOTM4OCAyOS4zNjc1QzQ5LjI1OTkgMjguNjg4NyA0OC45MjA0IDI4LjM0OTIgNDguNTI5IDI4LjIyMkM0OC4xODQ3IDI4LjExMDIgNDcuODEzOCAyOC4xMTAyIDQ3LjQ2OTUgMjguMjIyQzQ3LjA3ODEgMjguMzQ5MiA0Ni43Mzg3IDI4LjY4ODcgNDYuMDU5OCAyOS4zNjc1WiIgc3Ryb2tlPSIjNDA0MDQwIiBzdHJva2Utd2lkdGg9IjYuODU3MTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
+import { fallbackChainIcon } from "../../../../../utils/chain-icons";
 
 export async function ChainIcon(props: {
   iconUrl?: string;
@@ -35,6 +33,11 @@ export async function ChainIcon(props: {
 
       if (res?.status === 200) {
         imageLink = resolved;
+        // check that its an image
+        const contentType = res.headers.get("content-type");
+        if (!contentType?.startsWith("image")) {
+          imageLink = fallbackChainIcon;
+        }
       }
     }
 

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx

@@ -22,7 +22,7 @@ export function ChatPageContent(props: {
 }) {
   const address = useActiveAccount()?.address;
   const activeChain = useActiveWalletChain();
-  const client = useThirdwebClient();
+  const client = useThirdwebClient(props.authToken);
   const [userHasSubmittedMessage, setUserHasSubmittedMessage] = useState(false);
   const [messages, setMessages] = useState<Array<ChatMessage>>(() => {
     if (props.session?.history) {

apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx

@@ -3,7 +3,6 @@ import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { cn } from "@/lib/utils";
 import type { Account as TWAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { useMutation } from "@tanstack/react-query";
@@ -17,8 +16,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
-import { sendTransaction } from "thirdweb";
-import { useActiveAccount } from "thirdweb/react";
+import { useSendTransaction } from "thirdweb/react";
 import type { Account } from "thirdweb/wallets";
 import { TransactionButton } from "../../../../components/buttons/TransactionButton";
 import { MarkdownRenderer } from "../../../../components/contract-components/published-contract/markdown-renderer";
@@ -170,9 +168,10 @@ export function Chats(props: {
                           {message.text}
                         </span>
                       ) : message.type === "send_transaction" ? (
-                        <SendTransactionButton
+                        <ExecuteTransaction
                           txData={message.data}
                           twAccount={props.twAccount}
+                          client={props.client}
                         />
                       ) : (
                         <span className="leading-loose">{message.text}</span>
@@ -203,6 +202,29 @@ export function Chats(props: {
   );
 }
 
+function ExecuteTransaction(props: {
+  txData: SendTransactionOption | null;
+  twAccount: TWAccount;
+  client: ThirdwebClient;
+}) {
+  if (!props.txData) {
+    return (
+      <Alert variant="destructive">
+        <AlertCircleIcon className="size-5" />
+        <AlertTitle>Failed to parse transaction data</AlertTitle>
+      </Alert>
+    );
+  }
+
+  return (
+    <SendTransactionButton
+      txData={props.txData}
+      twAccount={props.twAccount}
+      client={props.client}
+    />
+  );
+}
+
 function MessageActions(props: {
   authToken: string;
   requestId: string;
@@ -297,51 +319,28 @@ function MessageActions(props: {
 }
 
 function SendTransactionButton(props: {
-  txData: SendTransactionOption | null;
+  txData: SendTransactionOption;
   twAccount: TWAccount;
+  client: ThirdwebClient;
 }) {
-  const account = useActiveAccount();
-  const chain = useV5DashboardChain(props.txData?.chainId);
-
-  const sendTxMutation = useMutation({
-    mutationFn: () => {
-      if (!account) {
-        throw new Error("No active account");
-      }
-
-      if (!props.txData || !chain) {
-        throw new Error("Invalid transaction");
-      }
-
-      return sendTransaction({
-        account,
-        transaction: {
-          ...props.txData,
-          nonce: Number(props.txData.nonce),
-          to: props.txData.to || undefined, // Get rid of the potential null value
-          chain,
-          client: getThirdwebClient(),
-        },
-      });
-    },
-  });
-
-  if (!props.txData) {
-    return (
-      <Alert variant="destructive">
-        <AlertCircleIcon className="size-5" />
-        <AlertTitle>Failed to parse transaction data</AlertTitle>
-      </Alert>
-    );
-  }
+  const { txData } = props;
+  const sendTransaction = useSendTransaction();
+  const chain = useV5DashboardChain(txData.chainId);
 
   return (
     <TransactionButton
-      isPending={sendTxMutation.isPending}
+      isPending={sendTransaction.isPending}
       transactionCount={1}
-      txChainID={props.txData.chainId}
+      txChainID={txData.chainId}
       onClick={() => {
-        const promise = sendTxMutation.mutateAsync();
+        const promise = sendTransaction.mutateAsync({
+          ...props.txData,
+          nonce: Number(txData.nonce),
+          to: txData.to || undefined, // Get rid of the potential null value
+          chain: chain,
+          client: props.client,
+        });
+
         toast.promise(promise, {
           success: "Transaction sent successfully",
           error: "Failed to send transaction",