⚗️ app: panda signature test UI

Author: nfmelendez

src/components/pay-mode/PaySelector.tsx

@@ -72,7 +72,7 @@ export default function PaySelector() {
     },
     onSettled: async (data) => {
       await queryClient.invalidateQueries({ queryKey: ["card", "details"] });
-      if (data && "mode" in data && data.mode > 0) {
+      if (data && "mode" in data && typeof data.mode === "number" && data.mode > 0) {
         queryClient.setQueryData(["settings", "installments"], data.mode);
       }
     },

src/components/settings/Settings.tsx

@@ -5,9 +5,18 @@ import { Alert, Pressable } from "react-native";
 import { setStringAsync } from "expo-clipboard";
 import { useRouter } from "expo-router";
 
-import { ArrowLeft, Check, HelpCircle, LogOut, SendHorizontal } from "@tamagui/lucide-icons";
+import {
+  ArrowLeft,
+  Check,
+  FileSignature,
+  Fingerprint,
+  HelpCircle,
+  LogOut,
+  SendHorizontal,
+} from "@tamagui/lucide-icons";
 import { ScrollView, Separator, XStack } from "tamagui";
 
+import { useMutation } from "@tanstack/react-query";
 import { useDisconnect } from "wagmi";
 
 import release from "../../generated/release";
@@ -16,6 +25,7 @@ import { logout as logoutIntercom, present } from "../../utils/intercom";
 import { logout as logoutOnesignal } from "../../utils/onesignal";
 import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
+import { signCard, signCardWebauthn } from "../../utils/server";
 import useAccount from "../../utils/useAccount";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
@@ -27,6 +37,28 @@ export default function Settings() {
   const { t } = useTranslation();
   const { mutate: disconnectAccount } = useDisconnect();
   const { mutate: submitCoverage, isSuccess: coverageSuccess, isError: coverageError } = useSubmitCoverage();
+  const {
+    mutate: sign,
+    isPending: signingPending,
+    isSuccess: signingSuccess,
+    isError: signingError,
+  } = useMutation({
+    mutationFn: () => signCard(),
+    onError: (error) => {
+      reportError(error);
+    },
+  });
+  const {
+    mutate: signWebauthn,
+    isPending: signWebauthnPending,
+    isSuccess: signWebauthnSuccess,
+    isError: signWebauthnError,
+  } = useMutation({
+    mutationFn: () => signCardWebauthn(),
+    onError: (error) => {
+      reportError(error);
+    },
+  });
   return (
     <SafeView fullScreen tab>
       <View fullScreen padded gap="$s5">
@@ -68,6 +100,46 @@ export default function Settings() {
                 </XStack>
               </Pressable>
               <Separator borderColor="$borderNeutralSoft" />
+              <Pressable
+                onPress={() => {
+                  if (!signingPending) sign();
+                }}
+              >
+                <XStack justifyContent="space-between" alignItems="center" padding="$s4">
+                  <XStack justifyContent="space-between" flex={1}>
+                    <XStack gap="$s3" justifyContent="flex-start" alignItems="center">
+                      <FileSignature color="$backgroundBrand" />
+                      <Text subHeadline color="$uiNeutralPrimary">
+                        {t("Signature")}
+                      </Text>
+                    </XStack>
+                    {(signingSuccess || signingError) && (
+                      <Check color={signingSuccess ? "$backgroundBrand" : "$interactiveBaseErrorDefault"} />
+                    )}
+                  </XStack>
+                </XStack>
+              </Pressable>
+              <Separator borderColor="$borderNeutralSoft" />
+              <Pressable
+                onPress={() => {
+                  if (!signWebauthnPending) signWebauthn();
+                }}
+              >
+                <XStack justifyContent="space-between" alignItems="center" padding="$s4">
+                  <XStack justifyContent="space-between" flex={1}>
+                    <XStack gap="$s3" justifyContent="flex-start" alignItems="center">
+                      <Fingerprint color="$backgroundBrand" />
+                      <Text subHeadline color="$uiNeutralPrimary">
+                        {t("Signature webauthn")}
+                      </Text>
+                    </XStack>
+                    {(signWebauthnSuccess || signWebauthnError) && (
+                      <Check color={signWebauthnSuccess ? "$backgroundBrand" : "$interactiveBaseErrorDefault"} />
+                    )}
+                  </XStack>
+                </XStack>
+              </Pressable>
+              <Separator borderColor="$borderNeutralSoft" />
               <Pressable
                 onPress={() => {
                   if (!connector) return;

src/i18n/es.json

@@ -4,6 +4,8 @@
   "Swap": "Intercambiar",
   "Settings": "Configuración",
   "Support": "Soporte",
+  "Signature": "Firma",
+  "Signature webauthn": "Firma webauthn",
   "Logout": "Cerrar sesión",
   "Copied": "Copiado",
   "App version has been copied to the clipboard.": "La versión de la aplicación fue copiada al portapapeles.",

src/utils/server.ts

@@ -2,22 +2,23 @@ import { Platform } from "react-native";
 import { get as assert, create } from "react-native-passkeys";
 
 import { sdk } from "@farcaster/miniapp-sdk";
+import { bufferToBase64URLString } from "@simplewebauthn/browser";
 import { getConnection, signMessage } from "@wagmi/core";
 import { hc, parseResponse, type InferResponseType } from "hono/client";
 import { check, number, object, parse, pipe, safeParse, string, ValiError } from "valibot";
-import { UserRejectedRequestError } from "viem";
 
+import { hashMessage, hexToBytes, UserRejectedRequestError } from "viem";
 import AUTH_EXPIRY from "@exactly/common/AUTH_EXPIRY";
 import deriveAddress from "@exactly/common/deriveAddress";
 import domain from "@exactly/common/domain";
-import { Credential } from "@exactly/common/validation";
 
+import { Credential } from "@exactly/common/validation";
 import { login as loginIntercom, logout as logoutIntercom } from "./intercom";
 import { decrypt, decryptPIN, encryptPIN, session } from "./panda";
 import queryClient, { APIError, triage, type AuthMethod } from "./queryClient";
 import { classifyError } from "./reportError";
-import ownerConfig from "./wagmi/owner";
 
+import ownerConfig from "./wagmi/owner";
 import type { ExaAPI } from "@exactly/server/api"; // eslint-disable-line @nx/enforce-module-boundaries
 
 queryClient.setQueryDefaults<number | undefined>(["auth"], {
@@ -157,6 +158,37 @@ export async function setCardPIN(pin: string) {
   if (!response.ok) throw new APIError(response.status, stringOrLegacy(await response.json()));
 }
 
+export async function signCard() {
+  await auth();
+  const address = getConnection(ownerConfig).address;
+  if (!address) throw new Error("no owner wallet connected");
+  const token = await api.card.$patch({ json: { method: "siwe", action: "challenge" } });
+  if (!token.ok) throw new APIError(token.status, stringOrLegacy(await token.json()));
+  const { challenge } = parse(object({ challenge: string() }), await token.json());
+  const signature = await signMessage(ownerConfig, { account: address, message: challenge });
+  const verify = await api.card.$patch({ json: { method: "siwe", action: "verify", message: challenge, signature } });
+  if (!verify.ok) throw new APIError(verify.status, stringOrLegacy(await verify.json()));
+}
+
+export async function signCardWebauthn() {
+  await auth();
+  const credential = await getCredential();
+  const challengeResponse = await api.card.$patch({ json: { method: "webauthn", action: "challenge" } });
+  if (!challengeResponse.ok) {
+    throw new APIError(challengeResponse.status, stringOrLegacy(await challengeResponse.json()));
+  }
+  const { challenge } = parse(object({ challenge: string() }), await challengeResponse.json());
+
+  const assertion = await assert({
+    challenge: bufferToBase64URLString(hexToBytes(hashMessage(challenge)).buffer as ArrayBuffer),
+    rpId: domain,
+    allowCredentials: Platform.OS === "android" ? undefined : [{ id: credential.credentialId, type: "public-key" }],
+  });
+  if (!assertion) throw new Error("bad assertion");
+  const verify = await api.card.$patch({ json: { method: "webauthn", action: "verify", assertion } });
+  if (!verify.ok) throw new APIError(verify.status, stringOrLegacy(await verify.json()));
+}
+
 export async function getKYCTokens(scope: "basic" | "cardLimit" | "manteca" = "basic", redirectURI?: string) {
   await auth();
   const response = await api.kyc.$post({ json: { scope, redirectURI } });