Move deploy multiple and publish multiple pages to app router + migrate to shadcn/tailwind (#5381)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on the removal of several components and hooks related to contract deployment and publishing, while introducing new pages and components for handling these processes more effectively, including improved loading states and contract metadata handling.

### Detailed summary
- Deleted several files related to contract hooks and components.
- Introduced `DeployMultipleContractsPage` and `PublishMultipleContractsPage` for contract deployment and publishing.
- Added `SanctionedAddressesChecker` to handle blocked wallet addresses.
- Updated `DeployableContractTable` to fetch and display contract metadata.
- Refactored `ContractIdImage` to utilize fetched metadata directly.
- Changed table structure in `DeployableContractTable` to use new UI components.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

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}</>;
+};