Merge branch 'main' into yash/ref-constructor-params

Author: kumaryash90

.changeset/dirty-cups-tickle.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Adds steam auth

.changeset/flat-emus-repeat.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Catch localStorage getItem and setItem unhandled errors

.changeset/small-eagles-cry.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Adds Steam as an authentication option

apps/dashboard/src/@/components/ui/table.stories.tsx

@@ -9,7 +9,9 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import type { Meta, StoryObj } from "@storybook/react";
+import Link from "next/link";
 import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { cn } from "../../lib/utils";
 import { Badge } from "./badge";
 
 const meta = {
@@ -41,6 +43,10 @@ function Component() {
         <TableDemo />
       </BadgeContainer>
 
+      <BadgeContainer label="Clickable Row">
+        <TableDemo linkBox />
+      </BadgeContainer>
+
       <BadgeContainer label="With Footer">
         <TableDemo footer />
       </BadgeContainer>
@@ -90,6 +96,7 @@ const invoices: Invoice[] = [
 
 function TableDemo(props: {
   footer?: boolean;
+  linkBox?: boolean;
 }) {
   return (
     <TableContainer>
@@ -104,8 +111,21 @@ function TableDemo(props: {
         </TableHeader>
         <TableBody>
           {invoices.map((invoice) => (
-            <TableRow key={invoice.invoice}>
-              <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableRow
+              key={invoice.invoice}
+              linkBox={props.linkBox}
+              className={cn(props.linkBox && "cursor-pointer hover:bg-muted")}
+            >
+              <TableCell className="font-medium">
+                <Link
+                  href={`/invoices/${invoice.invoice}`}
+                  className={cn(
+                    props.linkBox && "before:absolute before:inset-0",
+                  )}
+                >
+                  {invoice.invoice}
+                </Link>
+              </TableCell>
               <TableCell>
                 <Badge>{invoice.paymentStatus}</Badge>
               </TableCell>

apps/dashboard/src/@/components/ui/table.tsx

@@ -63,12 +63,19 @@ TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+  React.HTMLAttributes<HTMLTableRowElement> & {
+    /**
+     * Contain the absolutely position elements inside the row with position:relative + transform:translate(0)
+     * transform:translate(0) is required because position:relative on tr element does not work on webkit
+     */
+    linkBox?: boolean;
+  }
+>(({ className, linkBox, ...props }, ref) => (
   <tr
     ref={ref}
     className={cn(
       "border-border border-b last:border-0 data-[state=selected]:bg-muted",
+      linkBox && "relative translate-x-0 translate-y-0",
       className,
     )}
     {...props}

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

@@ -39,7 +39,7 @@ export async function ChainListRow({
 }: ChainListRowProps) {
   const chainMetadata = await getChainMetadata(chainId);
   return (
-    <TableRow className="relative hover:bg-muted/50">
+    <TableRow linkBox className="hover:bg-muted/50">
       <TableCell>{favoriteButton}</TableCell>
       {/* Name */}
       <TableCell>

apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/PublishedContractTable.tsx

@@ -190,7 +190,8 @@ function ContractTableRow(props: {
   return (
     <>
       <TableRow
-        className="relative cursor-pointer hover:bg-muted/50"
+        linkBox
+        className="cursor-pointer hover:bg-muted/50"
         {...rowProps}
         key={key}
       >

apps/dashboard/src/app/(dashboard)/trending/components/trending-table.tsx

@@ -75,7 +75,8 @@ export function TrendingContractSection(props: {
             <TableBody>
               {props.topContracts.map((contract, index) => (
                 <TableRow
-                  className="relative hover:bg-muted/50"
+                  linkBox
+                  className="hover:bg-muted/50"
                   key={`${contract.chainMetadata.chainId}${contract.contractAddress}${index}`}
                 >
                   {/* Rank */}

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/partners-table.tsx

@@ -78,10 +78,8 @@ function PartnerRow(props: {
 
   return (
     <TableRow
-      className={cn(
-        "relative hover:bg-muted/50",
-        isDeleting && "animate-pulse",
-      )}
+      linkBox
+      className={cn("hover:bg-muted/50", isDeleting && "animate-pulse")}
     >
       <TableCell className="max-w-32 truncate align-center">
         {props.partner.name}

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/types.ts

@@ -12,6 +12,7 @@ export const authOptions = [
   "telegram",
   "github",
   "twitch",
+  "steam",
   "apple",
   "coinbase",
   "line",