init commit for testing on branch deployment

apps/abstraxion-dashboard/components/ModalViews/AddAuthenticators/AddAuthenticatorsForm.tsx

@@ -9,6 +9,7 @@ import Image from "next/image";
 import { WalletType, useAccount, useSuggestChainAndConnect } from "graz";
 import { useQuery } from "@apollo/client";
 import { useStytchUser } from "@stytch/nextjs";
+import { create } from "@github/webauthn-json/browser-ponyfill";
 import {
   Button,
   KeplrLogo,
@@ -25,7 +26,7 @@ import { encodeHex } from "@/utils";
 import { AllSmartWalletQuery } from "@/utils/queries";
 
 // TODO: Add webauthn to this and remove "disable" prop from button when implemented
-type AuthenticatorStates = "none" | "keplr" | "metamask" | "okx";
+type AuthenticatorStates = "none" | "keplr" | "metamask" | "okx" | "passkey";
 
 export function AddAuthenticatorsForm({
   setIsOpen,
@@ -110,6 +111,9 @@ export function AddAuthenticatorsForm({
       case "okx":
         await addOkxAuthenticator();
         break;
+      case "passkey":
+        await addWebauthnAuthenticator();
+        break;
       default:
         break;
     }
@@ -225,6 +229,78 @@ export function AddAuthenticatorsForm({
     }
   }
 
+  const addWebauthnAuthenticator = async () => {
+    try {
+      setIsLoading(true);
+      const encoder = new TextEncoder();
+      const challenge = Buffer.from(encoder.encode(abstractAccount?.id));
+      const rpUrl = "http://localhost:3000"; // TODO: This will have to be pointing to current domain, ex. testnet-dashboard.xion.com OR mainnet-dashboard.xion.com
+      const options: CredentialCreationOptions = {
+        publicKey: {
+          rp: {
+            name: rpUrl,
+          },
+          user: {
+            name: abstractAccount.id,
+            displayName: abstractAccount.id,
+            id: challenge,
+          },
+          pubKeyCredParams: [{ type: "public-key", alg: -7 }],
+          challenge,
+          authenticatorSelection: { userVerification: "preferred" },
+          timeout: 300000, // 5 minutes,
+          excludeCredentials: [],
+        },
+      };
+
+      // What happens on a failed addAuthenticator tx, do we just delete the registered browser key or just leave it and let them try again?
+
+      const publicKeyCredential = await create(options);
+      if (publicKeyCredential === null) {
+        console.log("null credential");
+        return;
+      }
+      console.log("publicKeyCredential: ", publicKeyCredential);
+      const publicKeyCredentialJSON = JSON.stringify(publicKeyCredential);
+      // Encode Uint8Array as base64
+      const base64EncodedCredential = Buffer.from(
+        encoder.encode(publicKeyCredentialJSON),
+      ).toString("base64");
+
+      const accountIndex = abstractAccount?.authenticators.nodes.length; // TODO: Be careful here, if indexer returns wrong number this can overwrite accounts
+
+      const msg = {
+        add_auth_method: {
+          add_authenticator: {
+            Passkey: {
+              id: accountIndex,
+              url: rpUrl,
+              credential: base64EncodedCredential,
+            },
+          },
+        },
+      };
+      const res = await client?.addAbstractAccountAuthenticator(msg, "", {
+        amount: [{ amount: "0", denom: "uxion" }],
+        gas: "500000",
+      });
+
+      if (res?.rawLog?.includes("failed")) {
+        throw new Error(res.rawLog);
+      }
+
+      console.log(res);
+      return res;
+    } catch (error) {
+      console.log(error);
+      setErrorMessage(
+        "Something went wrong trying to add Webauthn as authenticator",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   async function addEthAuthenticator() {
     if (!window.ethereum) {
       alert("Please install wallet extension");
@@ -351,9 +427,17 @@ export function AddAuthenticatorsForm({
                 alt="OKX Logo"
               />
             </Button>
-            {/* <Button disabled structure="outlined">
+            <Button
+              className={
+                selectedAuthenticator === "passkey" ? "!ui-border-white" : ""
+              }
+              onClick={() => {
+                handleSwitch("passkey");
+              }}
+              structure="outlined"
+            >
               <PasskeyIcon className="ui-w-12" />
-            </Button> */}
+            </Button>
           </div>
         </>
       ) : null}

apps/abstraxion-dashboard/package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@burnt-labs/tsconfig": "workspace:*",
+    "@github/webauthn-json": "^2.1.1",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",

apps/abstraxion-settings/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --port 3000",
+    "dev": "vite --port 3002",
     "build": "vite build",
     "preview": "vite preview"
   },
@@ -35,4 +35,4 @@
     "vite": "^4.3.2",
     "vite-plugin-node-polyfills": "^0.17.0"
   }
-}
+}

packages/signers/src/interfaces/smartAccount.ts

@@ -34,6 +34,8 @@ export enum AAAlgo {
   JWT = "jwt",
   ethWallet = "ethWallet",
   ETHWALLET = "EthWallet",
+  passkey = "passkey",
+  Passket = "Passkey",
 }
 
 export interface AddSecp256K1Authenticator {
@@ -85,8 +87,21 @@ export interface AddJwtAuthenticator {
   };
 }
 
+export interface AddPasskeyAuthenticator {
+  add_auth_method: {
+    add_authenticator: {
+      Passkey: {
+        id: number;
+        url: string;
+        credential: string; // base64 encoded
+      };
+    };
+  };
+}
+
 export type AddAuthenticator =
   | AddSecp256K1Authenticator
   | AddEd25519Authenticator
   | AddEthWalletAuthenticator
-  | AddJwtAuthenticator;
+  | AddJwtAuthenticator
+  | AddPasskeyAuthenticator;