Proof of Concept /invite wallet

next.config.js

@@ -1,3 +1,5 @@
+import { isServer } from "@tanstack/react-query";
+
 /**
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
@@ -29,6 +31,16 @@ const config = {
       asyncWebAssembly: true,
       layers: true,
     };
+    // For server builds, place the WASM files one level up
+    config.output.webassemblyModuleFilename = isServer
+      ? "../static/wasm/[modulehash].wasm"
+      : "static/wasm/[modulehash].wasm";
+
+    // Optional: add a rule to ensure WASM files are treated as assets
+    config.module.rules.push({
+      test: /\.wasm$/,
+      type: "asset/resource",
+    });
     return config;
   },
 };

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^1.6.0",
+    "@emurgo/cardano-serialization-lib-browser": "^14.1.1",
     "@hookform/resolvers": "^3.9.0",
     "@jinglescode/nostr-chat-plugin": "^0.0.11",
     "@meshsdk/core": "^1.9.0-beta.18",
@@ -51,6 +52,7 @@
     "@trpc/react-query": "^11.0.0-rc.446",
     "@trpc/server": "^11.0.0-rc.446",
     "@vercel/blob": "^0.23.4",
+    "blakejs": "^1.2.1",
     "busboy": "^1.6.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/components/common/overall-layout/layout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { api } from "@/utils/api";
 import ConnectWallet from "../cardano-objects/connect-wallet";
@@ -25,6 +25,7 @@ import { publicRoutes } from "@/data/public-routes";
 import Loading from "./loading";
 import DialogReport from "./dialog-report";
 import { useRouter } from "next/router";
+import { Menu as MenuIcon } from "lucide-react";
 
 export default function RootLayout({
   children,
@@ -36,6 +37,7 @@ export default function RootLayout({
   const router = useRouter();
   const { appWallet } = useAppWallet();
   const { generateNsec } = useNostrChat();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   const userAddress = useUserStore((state) => state.userAddress);
   const setUserAddress = useUserStore((state) => state.setUserAddress);
@@ -88,6 +90,16 @@ export default function RootLayout({
   return (
     <div className="grid h-screen w-full overflow-hidden md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
       {isLoading && <Loading />}
+      {mobileMenuOpen && (
+        <div className="fixed inset-0 z-30 flex">
+          <div className="w-64 bg-muted p-4">
+            <button className="mb-4" onClick={() => setMobileMenuOpen(false)}>Close</button>
+            <MenuWallets />
+            {router.pathname.includes("/wallets/[wallet]") && <MenuWallet />}
+          </div>
+          <div className="flex-1 bg-black opacity-50" onClick={() => setMobileMenuOpen(false)}></div>
+        </div>
+      )}
 
       {/* Sidebar for larger screens */}
       <aside className="hidden border-r bg-muted/40 md:block">
@@ -110,6 +122,9 @@ export default function RootLayout({
       <div className="flex h-screen flex-col">
         <header className="pointer-events-auto relative z-10 border-b bg-muted/40 px-4 lg:px-6">
           <div className="flex h-14 items-center gap-4 lg:h-[60px]">
+            <button className="md:hidden" onClick={() => setMobileMenuOpen(true)}>
+              <MenuIcon className="h-6 w-6" />
+            </button>
             {/* Wallet selection + breadcrumb row */}
             {isLoggedIn && (
               <div className="border-t border-border">

src/components/common/overall-layout/wallet-data-loader.tsx

@@ -45,6 +45,7 @@ export default function WalletDataLoader() {
   }
 
   async function getTransactionsOnChain() {
+
     try {
       if (appWallet) {
         const maxPage = 4;
@@ -152,6 +153,7 @@ export default function WalletDataLoader() {
     if (appWallet && prevWalletIdRef.current !== appWallet.id) {
       refreshWallet();
       prevWalletIdRef.current = appWallet.id;
+
     }
   }, [appWallet]);
 

src/components/pages/homepage/index.tsx

@@ -4,14 +4,13 @@ import Link from "next/link";
 import useUser from "@/hooks/useUser";
 import { useRouter } from "next/router";
 import { api } from "@/utils/api";
-import CardUI from "@/components/common/card-content";
-import RowLabelInfo from "@/components/common/row-label-info";
 import Globe from "./globe";
+import PageNewWalletInvite from "./wallets/invite";
 
 export function PageHomepage() {
   const { user } = useUser();
   const router = useRouter();
-  const pathIsNewWallet = router.pathname == "/wallets/invite/[id]";
+  const pathIsNewWallet = router.pathname === "/wallets/invite/[id]";
   const newWalletId = pathIsNewWallet ? (router.query.id as string) : undefined;
 
   const { data: newWallet } = api.wallet.getNewWallet.useQuery(
@@ -22,45 +21,41 @@ export function PageHomepage() {
   );
 
   return (
-    <div className="h-screen w-full lg:grid lg:grid-cols-3">
-      <div className="flex items-center justify-center py-12">
-        <div className="mx-auto grid max-w-[500px] gap-6">
-          <div className="grid gap-2 text-center">
+    <div className="relative min-h-screen">
+      {/* Background Globe */}
+      <div className="absolute inset-0 -z-10 flex items-center justify-center">
+        <Globe />
+      </div>
+
+      {newWallet ? (
+        /* Render the invite page if a new wallet is found */
+        <PageNewWalletInvite />
+      ) : (
+        /* Otherwise show the homepage */
+        <div className="container mx-auto px-4 py-8 relative z-10 flex flex-col items-center justify-center">
+          <div className="mx-auto grid max-w-[500px] gap-6 text-center">
             <h1 className="text-3xl font-bold">Multisig Platform</h1>
             <p className="text-balance text-muted-foreground">
-              Secure your treasury and participant in governance, as a team with
-              multi-signature
+              Secure your treasury and participate in governance as a team with multi-signature
             </p>
-            {newWallet && (
-              <CardUI
-                title={`Invited as signer`}
-                description={`You have been invited to join this wallet as a signer, connect your wallet to accept the invitation`}
-                cardClassName="text-left mt-4"
-              >
-                <RowLabelInfo label="Name" value={newWallet.name} />
-                <RowLabelInfo label="About" value={newWallet.description} />
-              </CardUI>
-            )}
-          </div>
-          <div className="flex items-center justify-center">
-            {user ? (
-              <div className="flex gap-2">
-                <Button size="sm" asChild>
-                  <Link href="/wallets/new-wallet">New Wallet</Link>
-                </Button>
-                <Button size="sm" asChild>
-                  <Link href="/wallets">Your Wallets</Link>
-                </Button>
-              </div>
-            ) : (
-              <ConnectWallet />
-            )}
+
+            <div>
+              {user ? (
+                <div className="flex gap-2 justify-center">
+                  <Button size="sm" asChild>
+                    <Link href="/wallets/new-wallet">New Wallet</Link>
+                  </Button>
+                  <Button size="sm" asChild>
+                    <Link href="/wallets">Your Wallets</Link>
+                  </Button>
+                </div>
+              ) : (
+                <ConnectWallet />
+              )}
+            </div>
           </div>
         </div>
-      </div>
-      <div className="col-span-2">
-        <Globe />
-      </div>
+      )}
     </div>
   );
-}
+}

src/components/pages/homepage/wallets/invite/cip146/146Import.tsx

@@ -0,0 +1,132 @@
+import React, { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+//import { Bip32PublicKey, Address } from "@emurgo/cardano-serialization-lib-browser";
+import { bech32 } from "bech32"; // used only for debugging the payload
+
+interface ImportProps {
+  onImport: (accountKeyHex: string) => void;
+}
+
+const ImportComponent: React.FC<ImportProps> = ({ onImport }) => {
+  //const fileInputRef = useRef<HTMLInputElement>(null);
+  const [directInput, setDirectInput] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  // const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   const file = e.target.files?.[0];
+  //   if (!file) return;
+  //   const fileReader = new FileReader();
+  //   fileReader.onload = (event) => {
+  //     try {
+  //       const importedData = JSON.parse(event.target?.result as string);
+  //       // Check for our simple export format: directly exported account key.
+  //       if (importedData.acct_shared_xsk) {
+  //         onImport(importedData.acct_shared_xsk);
+  //         return;
+  //       }
+  //       // Check for our multisig export format.
+  //       if (
+  //         importedData.wallet &&
+  //         importedData.wallet.multiSig &&
+  //         Array.isArray(importedData.wallet.multiSig) &&
+  //         importedData.wallet.multiSig.length > 0
+  //       ) {
+  //         const ms = importedData.wallet.multiSig[0];
+  //         if (ms.priv) {
+  //           onImport(ms.priv);
+  //           return;
+  //         } else if (ms.pub) {
+  //           onImport(ms.pub);
+  //           return;
+  //         }
+  //       }
+  //         setErrorMessage("Invalid file. Account key not found.");
+  //     } catch (error) {
+  //       console.error(error);
+  //       setErrorMessage("Failed to import account key.");
+  //     }
+  //   };
+  //   fileReader.readAsText(file);
+  // };
+
+  // const handleFileImport = () => {
+  //   fileInputRef.current?.click();
+  // };
+
+  // const handleDirectImport = () => {
+  //   if (!directInput.trim()) {
+  //     setErrorMessage("Please enter an account key.");
+  //     return;
+  //   }
+  //   setErrorMessage("");
+  //   // Simply pass the direct input to the callback.
+  //   onImport(directInput.trim());
+  // };
+
+  const importFromBech32 = () => {
+    if (!directInput.trim()) {
+      setErrorMessage("Please enter a Bech32 address.");
+      return;
+    }
+
+    const input = directInput.trim();
+    try {
+      // Only support extended account keys with prefix 'acct_shared_xvk'
+      if (!input.startsWith("acct_shared_xvk")) {
+        throw new Error("Unsupported Bech32 format. Expected extended account key with prefix acct_shared_xvk.");
+      }
+
+      // Manually decode the Bech32 string using the bech32 library
+      const decoded = bech32.decode(input, 200);
+      const dataBytes = new Uint8Array(bech32.fromWords(decoded.words));
+      const bytesToHex = (bytes: Uint8Array): string =>
+        bytes.reduce((str, byte) => str + byte.toString(16).padStart(2, "0"), "");
+      const pubKeyHex = bytesToHex(dataBytes);
+      // Validate the decoded key by parsing it with from_hex
+      //const bip32Pub = Bip32PublicKey.from_hex(pubKeyHex);
+
+      onImport(pubKeyHex);
+      setErrorMessage("");
+    } catch (error) {
+      console.error("Bech32 decoding error:", error);
+      setErrorMessage("Invalid Bech32 address: " );
+    }
+  };
+
+  return (
+    <div>
+      {/* <div className="flex gap-2">
+        <Button onClick={handleFileImport} variant="outline">
+          Import Account Key (File)
+        </Button>
+        <input
+          type="file"
+          accept=".json"
+          ref={fileInputRef}
+          onChange={handleFileChange}
+          style={{ display: "none" }}
+        />
+      </div> */}
+      <div className="flex flex-col gap-1 mt-2">
+        <Label htmlFor="directKey">Paste account key (Bech32):</Label>
+        <Input
+          id="directKey"
+          type="text"
+          placeholder="Enter acct_shared_xvk"
+          value={directInput}
+          onChange={(e) => setDirectInput(e.target.value)}
+        />
+        {errorMessage && <p className="text-red-500">{errorMessage}</p>}
+        <div className="flex gap-2">
+          <Button onClick={importFromBech32} variant="outline">
+            Import
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImportComponent;