Replace login links with button router push

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -3,6 +3,7 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useStore } from "@/lib/reactive";
 import { cn } from "@/lib/utils";
 import { getSDKTheme } from "app/components/sdk-component-theme";
@@ -43,6 +44,7 @@ export const CustomConnectWallet = (props: {
   const thirdwebClient = useThirdwebClient();
   const loginRequired =
     props.loginRequired === undefined ? true : props.loginRequired;
+  const router = useDashboardRouter();
 
   const { theme } = useTheme();
   const t = theme === "light" ? "light" : "dark";
@@ -142,16 +144,16 @@ export const CustomConnectWallet = (props: {
     return (
       <>
         <Button
-          asChild
           variant="default"
           className={props.signInLinkButtonClassName}
           size="lg"
+          onClick={() => {
+            router.push(
+              `/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`,
+            );
+          }}
         >
-          <Link
-            href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
-          >
-            Sign In
-          </Link>
+          Sign In
         </Button>
       </>
     );

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useApiKeys, useCreateApiKey } from "@3rdweb-sdk/react/hooks/useApi";
 import { Flex, FormControl, Input, Select } from "@chakra-ui/react";
 import { LazyCreateAPIKeyDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
@@ -294,6 +295,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
   const [showCreateAPIKeyModal, setShowCreateAPIKeyModal] = useState(false);
   const activeAccount = useActiveAccount();
   const pathname = usePathname();
+  const router = useDashboardRouter();
 
   return (
     <Flex gap={8} direction="column">
@@ -377,14 +379,17 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
           <FormControl>
             <FormLabel>Client ID</FormLabel>
             {!activeAccount ? (
-              <Button asChild className="w-full">
-                <Link
-                  href={`/login${
-                    pathname ? `?next=${encodeURIComponent(pathname)}` : ""
-                  }`}
-                >
-                  Sign in to create a client ID
-                </Link>
+              <Button
+                className="w-full"
+                onClick={() => {
+                  router.push(
+                    `/login${
+                      pathname ? `?next=${encodeURIComponent(pathname)}` : ""
+                    }`,
+                  );
+                }}
+              >
+                Sign in to create a client ID
               </Button>
             ) : validApiKey ? (
               <Input

apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -13,6 +14,7 @@ export function TeamHeaderLoggedOutDesktopUI(props: {
   className?: string;
 }) {
   const pathname = usePathname();
+  const router = useDashboardRouter();
   return (
     <header
       className={cn(
@@ -31,12 +33,17 @@ export function TeamHeaderLoggedOutDesktopUI(props: {
       <div className="flex items-center gap-6">
         <SecondaryNavLinks />
 
-        <Button size="sm" variant="primary" className="rounded-lg" asChild>
-          <Link
-            href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
-          >
-            Sign in
-          </Link>
+        <Button
+          size="sm"
+          variant="primary"
+          className="rounded-lg"
+          onClick={() => {
+            router.push(
+              `/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`,
+            );
+          }}
+        >
+          Sign in
         </Button>
       </div>
     </header>
@@ -47,6 +54,7 @@ export function TeamHeaderLoggedOutMobileUI(props: {
   className?: string;
 }) {
   const pathname = usePathname();
+  const router = useDashboardRouter();
 
   return (
     <header
@@ -60,12 +68,17 @@ export function TeamHeaderLoggedOutMobileUI(props: {
       </Link>
 
       <div className="flex items-center gap-3">
-        <Button size="sm" variant="primary" className="rounded-lg" asChild>
-          <Link
-            href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
-          >
-            Sign in
-          </Link>
+        <Button
+          size="sm"
+          variant="primary"
+          className="rounded-lg"
+          onClick={() => {
+            router.push(
+              `/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`,
+            );
+          }}
+        >
+          Sign in
         </Button>
         <MobileBurgerMenuButton type="loggedOut" />
       </div>