Move deploy multiple and publish multiple pages to app router + migrate to shadcn/tailwind

Author: MananTank

apps/dashboard/src/app/(dashboard)/contracts/deploy/page.tsx

@@ -0,0 +1,42 @@
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
+import { DeployableContractTable } from "components/contract-components/contract-table";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Suspense } from "react";
+
+export default async function DeployMultipleContractsPage(props: {
+  searchParams?: Promise<{
+    ipfs?: string[] | string;
+  }>;
+}) {
+  const searchParams = await props.searchParams;
+  const ipfsHashes = searchParams?.ipfs;
+
+  if (!ipfsHashes || !Array.isArray(ipfsHashes) || ipfsHashes.length === 0) {
+    notFound();
+  }
+
+  return (
+    <div className="container flex grow flex-col py-10">
+      <h1 className="mb-1 font-semibold text-2xl tracking-tight">
+        Deploy Contracts
+      </h1>
+      <p className="text-muted-foreground">
+        Welcome to the thirdweb contract deployment flow.{" "}
+        <Link
+          className="text-link-foreground hover:text-foreground"
+          target="_blank"
+          href="https://portal.thirdweb.com/contracts/deploy/overview"
+        >
+          Learn more about deploying your contracts.
+        </Link>
+      </p>
+
+      <div className="h-6" />
+
+      <Suspense fallback={<GenericLoadingPage />}>
+        <DeployableContractTable contractIds={ipfsHashes} context="deploy" />
+      </Suspense>
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/contracts/publish/page.tsx

@@ -0,0 +1,42 @@
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
+import { DeployableContractTable } from "components/contract-components/contract-table";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Suspense } from "react";
+
+export default async function PublishMultipleContractsPage(props: {
+  searchParams?: Promise<{
+    ipfs?: string[] | string;
+  }>;
+}) {
+  const searchParams = await props.searchParams;
+  const ipfsHashes = searchParams?.ipfs;
+
+  if (!ipfsHashes || !Array.isArray(ipfsHashes) || ipfsHashes.length === 0) {
+    notFound();
+  }
+
+  return (
+    <div className="container flex grow flex-col py-10">
+      <h1 className="mb-1 font-semibold text-2xl tracking-tight">
+        Publish Contracts
+      </h1>
+      <p className="text-muted-foreground">
+        Welcome to the thirdweb contract publish flow.{" "}
+        <Link
+          className="text-link-foreground hover:text-foreground"
+          target="_blank"
+          href="https://portal.thirdweb.com/contracts/publish/overview"
+        >
+          Learn more about publishing your contracts.
+        </Link>
+      </p>
+
+      <div className="h-6" />
+
+      <Suspense fallback={<GenericLoadingPage />}>
+        <DeployableContractTable contractIds={ipfsHashes} context="publish" />
+      </Suspense>
+    </div>
+  );
+}

apps/dashboard/src/app/account/components/account-header.client.tsx

@@ -2,11 +2,15 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "next-themes";
-import { ThirdwebProvider } from "thirdweb/react";
+import { useMemo } from "react";
+import { ThirdwebProvider, useActiveAccount } from "thirdweb/react";
+import { CustomConnectWallet } from "../@3rdweb-sdk/react/components/connect-wallet";
 import { Onboarding } from "../components/onboarding";
 import { OpCreditsGrantedModalWrapper } from "../components/onboarding/OpCreditsGrantedModalWrapper";
 import { PosthogIdentifier } from "../components/wallets/PosthogIdentifier";
+import { isSanctionedAddress } from "../data/eth-sanctioned-addresses";
 import { SyncChainStores } from "../stores/chainStores";
+import type { ComponentWithChildren } from "../types/component-with-children";
 import { TWAutoConnect } from "./components/autoconnect";
 
 const queryClient = new QueryClient();
@@ -26,9 +30,30 @@ export function AppRouterProviders(props: { children: React.ReactNode }) {
           enableSystem={false}
           defaultTheme="dark"
         >
-          {props.children}
+          <SanctionedAddressesChecker>
+            {props.children}
+          </SanctionedAddressesChecker>
         </ThemeProvider>
       </ThirdwebProvider>
     </QueryClientProvider>
   );
 }
+
+const SanctionedAddressesChecker: ComponentWithChildren = ({ children }) => {
+  const address = useActiveAccount()?.address;
+  const isBlocked = useMemo(() => {
+    return address && isSanctionedAddress(address);
+  }, [address]);
+
+  if (isBlocked) {
+    return (
+      <div className="fixed inset-0 flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-4">
+          <p> Your wallet address is blocked </p>
+          <CustomConnectWallet />
+        </div>
+      </div>
+    );
+  }
+  return <>{children}</>;
+};