feat: allow people fund via the profile page

frontend/src/components/stripe-button.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+
+const StripeButton: React.FC = () => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "https://js.stripe.com/v3/buy-button.js";
+    script.async = true;
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: `
+        <stripe-buy-button
+            buy-button-id="buy_btn_1PGow3AKPHx99o8IGvwDtS4E"
+            publishable-key="pk_live_51NA1xHAKPHx99o8I87C1SBDbmMDaxuiuL3l4hGjNtkcDQv1xFhV900UB8oX6J2iHM8IYVnN6OPDQ4QzqLWCeZeOi00m2L6N4MM"
+        ></stripe-buy-button>
+    `,
+      }}
+    ></div>
+  );
+};
+
+export default StripeButton;

frontend/src/pages/profile.tsx

@@ -4,9 +4,11 @@ import { getServerSession } from "next-auth";
 import { useSession, signOut } from "next-auth/react";
 
 import { authOptions } from "./api/auth/[...nextauth]";
-import { DashboardLayout } from "~/components/layouts";
+import { DashboardLayout, Meta } from "~/components/layouts";
 import { Button, Dialog, DialogContent, DialogDescription, DialogTitle } from "~/components/ui";
 import { deletePrivateKey } from "~/utils/auth";
+import Link from "next/link";
+import StripeButton from "~/components/stripe-button";
 
 const AccountPage: NextPage = () => {
   const { data: session } = useSession();
@@ -19,6 +21,12 @@ const AccountPage: NextPage = () => {
 
   return (
     <DashboardLayout>
+      <Meta
+        meta={{
+          title: "Profile | NeuroFusion Explorer",
+          description: "Your account profile. You have been assigned an anonymous account.",
+        }}
+      />
       <h1 className="text-4xl">Profile</h1>
       <p className="mb-10 mt-2 text-lg dark:text-slate-400">You have been assigned an anonymous account</p>
 
@@ -38,7 +46,8 @@ const AccountPage: NextPage = () => {
       </div>
 
       <div>
-        <p className="mt-5">You're on the Fusion Free Plan.</p>
+        <p className="mt-5">Fusion is open source. Fund our development!</p>
+        <StripeButton />
       </div>
     </DashboardLayout>
   );