Webauthn init

apps/playground/src/components/cardano/connect-browser-wallet.tsx

@@ -45,6 +45,11 @@ export function CommonCardanoWallet() {
         networkId: 0,
         provider: provider,
       }}
+      // webauthn={{
+      //   networkId: 0,
+      //   provider: provider,
+      //   url: "http://localhost:3000",
+      // }}
     />
   );
 }

apps/playground/src/pages/apis/txbuilder/governance/vote-delegation.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 
-import { keepRelevant, Quantity, Unit } from "@meshsdk/core";
 import { useWallet } from "@meshsdk/react";
 
 import Input from "~/components/form/input";
@@ -36,8 +35,8 @@ function Left() {
   codeTx += `    },\n`;
   codeTx += `    rewardAddress,\n`;
   codeTx += `  )\n`;
-  codeTx += `  .changeAddress(changeAddress)`;
-  codeTx += `  .selectUtxos(utxos, "keepRelevant", "10000000")\n`;
+  codeTx += `  .changeAddress(changeAddress)\n`;
+  codeTx += `  .selectUtxos(utxos, "keepRelevant", "10000000")`;
 
   let codeBuildSign = ``;
   codeBuildSign += `const unsignedTx = await txBuilder.complete();\n`;
@@ -129,7 +128,7 @@ function Right() {
   codeSnippet += `txBuilder\n`;
   codeSnippet += `  .voteDelegationCertificate(\n`;
   codeSnippet += `    {\n`;
-  codeSnippet += `      dRepId: drepid,\n`;
+  codeSnippet += `      dRepId: '${drepid}',\n`;
   codeSnippet += `    },\n`;
   codeSnippet += `    rewardAddress,\n`;
   codeSnippet += `  )\n`;

apps/playground/src/pages/apis/wallets/meshwallet/load-wallet.tsx

@@ -242,8 +242,8 @@ function Right(
           });
           setWallet(_wallet);
 
-          const address = _wallet.getChangeAddress();
-          setResponseAddress(address);
+          const addresses = _wallet.getAddresses();
+          setResponseAddress(JSON.stringify(addresses, null, 2));
         }
       } catch (error) {
         setResponseError(`${error}`);
@@ -262,8 +262,8 @@ function Right(
         });
         setWallet(_wallet);
 
-        const address = _wallet.getChangeAddress();
-        setResponseAddress(address);
+        const addresses = _wallet.getAddresses();
+        setResponseAddress(JSON.stringify(addresses, null, 2));
       } catch (error) {
         setResponseError(`${error}`);
       }
@@ -283,8 +283,8 @@ function Right(
         });
         setWallet(_wallet);
 
-        const address = _wallet.getChangeAddress();
-        setResponseAddress(address);
+        const addresses = _wallet.getAddresses();
+        setResponseAddress(JSON.stringify(addresses, null, 2));
       } catch (error) {
         setResponseError(`${error}`);
       }
@@ -302,8 +302,8 @@ function Right(
         });
         setWallet(_wallet);
 
-        const address = _wallet.getChangeAddress();
-        setResponseAddress(address);
+        const addresses = _wallet.getAddresses();
+        setResponseAddress(JSON.stringify(addresses, null, 2));
       } catch (error) {
         setResponseError(`${error}`);
       }
@@ -362,7 +362,7 @@ function Right(
           response={responseAddress}
           label="Load wallet and get address"
         />
-        <DemoResult response={responseAddress} label="Wallet's address" />
+        <DemoResult response={responseAddress} label="Wallet's addresses" />
         <DemoResult response={responseError} label="Error" />
       </Card>
     </>

apps/playground/src/pages/sitemap.xml.ts

@@ -30,15 +30,22 @@ function SiteMap() {}
 
 function addLinks(pagesUrls: string[], pages: MenuItem[]) {
   pages.forEach((api) => {
-    pagesUrls.push(api.link);
+    pushLink(pagesUrls, api.link);
     if (api.items) {
       api.items.forEach((item) => {
-        pagesUrls.push(item.link);
+        pushLink(pagesUrls, item.link);
       });
     }
   });
 }
 
+function pushLink(pagesUrls: string[], link: string) {
+  if (link.includes("http") && !link.includes("meshjs.dev")) {
+    return;
+  }
+  pagesUrls.push(link);
+}
+
 export async function getServerSideProps({ res }: { res: any }) {
   const pagesUrls: string[] = [];
 

packages/mesh-react/package.json

@@ -36,6 +36,7 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-tooltip": "^1.1.4",
     "class-variance-authority": "^0.7.1",
     "tailwindcss-animate": "^1.0.7",

packages/mesh-react/src/cardano-wallet/data.ts

@@ -11,4 +11,9 @@ export const screens = {
     subtitle:
       "Instantly create a new burner wallet. No seed phrase required, keys are generated on your device.",
   },
+  webauthn: {
+    title: "Passkey",
+    subtitle:
+      "Derive self-custody wallet on Chrome, Safari, or Firefox browsers on Android, iOS, macOS, and Windows devices, or using password managers.",
+  },
 };

packages/mesh-react/src/cardano-wallet/index.tsx

@@ -19,6 +19,7 @@ import { screens } from "./data";
 import ScreenBurner from "./screen-burner";
 import ScreenMain from "./screen-main";
 import ScreenP2P from "./screen-p2p";
+import ScreenWebauthn from "./screen-webauthn";
 
 interface ButtonProps {
   label?: string;
@@ -39,6 +40,11 @@ interface ButtonProps {
     networkId: 0 | 1;
     provider: IFetcher & ISubmitter;
   };
+  webauthn?: {
+    networkId: 0 | 1;
+    provider: IFetcher & ISubmitter;
+    url: string;
+  };
 }
 
 export const CardanoWallet = ({
@@ -49,13 +55,14 @@ export const CardanoWallet = ({
   metamask = undefined,
   cardanoPeerConnect = undefined,
   burnerWallet = undefined,
+  webauthn = undefined,
 }: ButtonProps) => {
   const [open, setOpen] = useState(false);
   const [screen, setScreen] = useState("main");
   const { wallet, connected } = useWallet();
 
   useEffect(() => {
-    if (connected && wallet) {
+    if (connected) {
       if (onConnected) onConnected();
     }
   }, [connected, wallet]);
@@ -86,6 +93,7 @@ export const CardanoWallet = ({
             setScreen={setScreen}
             cardanoPeerConnect={cardanoPeerConnect != undefined}
             burnerWallet={burnerWallet != undefined}
+            webauthn={webauthn != undefined}
           />
         )}
         {screen == "p2p" && (
@@ -101,7 +109,14 @@ export const CardanoWallet = ({
             setOpen={setOpen}
           />
         )}
-
+        {screen == "webauthn" && webauthn && (
+          <ScreenWebauthn
+            url={webauthn.url}
+            networkId={webauthn.networkId}
+            provider={webauthn.provider}
+            setOpen={setOpen}
+          />
+        )}
         <Footer />
       </DialogContent>
     </Dialog>