refactor(components): migrate extra-content to React JSX syntax

Simplified button rendering.

Author: tnkshuuhei

components/global/extra-content.tsx

@@ -1,5 +1,4 @@
-import { Button, buttonVariants } from "@/components/ui/button";
-import { createElement } from "react";
+import { Button } from "@/components/ui/button";
 import type { Chain, TransactionReceipt } from "viem";
 import { generateBlockExplorerLink } from "@/lib/utils";
 
@@ -8,57 +7,43 @@ export const createExtraContent = (
   hypercertId?: string,
   chain?: Chain,
 ) => {
-  const receiptButton =
-    receipt &&
-    createElement(
-      "a",
-      {
-        href: generateBlockExplorerLink(chain, receipt.transactionHash),
-        target: "_blank",
-        rel: "noopener noreferrer",
-      },
-      createElement(
-        Button,
-        {
-          size: "default",
-          className: buttonVariants({ variant: "secondary" }),
-        },
-        "View transaction",
-      ),
-    );
+  const receiptButton = receipt && (
+    <>
+      <a
+        href={generateBlockExplorerLink(chain, receipt.transactionHash)}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Button size="default" variant={"secondary"}>
+          View transaction
+        </Button>
+      </a>
+    </>
+  );
 
-  const hypercertButton =
-    hypercertId &&
-    createElement(
-      "a",
-      {
-        href: `/hypercerts/${hypercertId}`,
-        target: "_blank",
-        rel: "noopener noreferrer",
-      },
-      createElement(
-        Button,
-        {
-          size: "default",
-          className: buttonVariants({ variant: "default" }),
-        },
-        "View hypercert",
-      ),
-    );
+  const hypercertButton = hypercertId && (
+    <>
+      <a
+        href={`/hypercerts/${hypercertId}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Button size="default" variant={"default"}>
+          View hypercert
+        </Button>
+      </a>
+    </>
+  );
 
-  return createElement(
-    "div",
-    { className: "flex flex-col space-y-2" },
-    createElement(
-      "p",
-      { className: "text-sm font-medium" },
-      "Your hypercert has been minted successfully!",
-    ),
-    createElement(
-      "div",
-      { className: "flex space-x-4" },
-      receiptButton,
-      hypercertButton,
-    ),
+  return (
+    <div className="flex flex-col space-y-2">
+      <p className="text-sm font-medium">
+        Your hypercert has been minted successfully!
+      </p>
+      <div className="flex space-x-4">
+        {receiptButton}
+        {hypercertButton}
+      </div>
+    </div>
   );
 };