fix: Disable Hardware Authenticator identities for unsupported Neighborhoods

src/api/neighborhoods/provider.tsx

@@ -12,39 +12,78 @@
  Tokens,
 } from "@liftedinit/many-js";
 import { useAccountsStore } from "features/accounts";
-import { createContext, ReactNode, useMemo } from "react";
+import {
+ createContext,
+ ReactNode,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from "react";
 import { useNeighborhoodStore } from "./store";
 
-export const NeighborhoodContext = createContext<Network | undefined>(
- undefined
-);
+interface INeighborhoodContext {
+ query?: Network;
+ command?: Network;
+ services: Set<string>;
+}
+
+export const NeighborhoodContext = createContext<INeighborhoodContext>({
+ services: new Set(),
+});
 
 export function NeighborhoodProvider({ children }: { children: ReactNode }) {
- const activeNeighborhood = useNeighborhoodStore(
- (s) => s.neighborhoods[s.activeId]
- );
- const activeAccount = useAccountsStore((s) => s.byId.get(s.activeId))!;
-
- const neighborhood = useMemo(() => {
- const identity = activeAccount?.identity ?? new AnonymousIdentity();
- const network = new Network(activeNeighborhood.url, identity);
- network.apply([
- Account,
- Base,
- Blockchain,
- Compute,
- Events,
- IdStore,
- KvStore,
- Ledger,
- Tokens,
- ]);
- return network;
- }, [activeAccount, activeNeighborhood]);
+ const { url } = useNeighborhoodStore((s) => s.neighborhoods[s.activeId]);
+ const account = useAccountsStore((s) => s.byId.get(s.activeId))!;
+ const [services, setServices] = useState<Set<string>>(new Set());
+
+ const context = useMemo(() => {
+ const anonymous = new AnonymousIdentity();
+ const identity = account?.identity ?? anonymous;
+
+ const query = new Network(url, anonymous);
+ const command = new Network(url, identity);
+ [query, command].forEach((network) =>
+ network.apply([
+ Account,
+ Base,
+ Blockchain,
+ Compute,
+ Events,
+ IdStore,
+ KvStore,
+ Ledger,
+ Tokens,
+ ])
+ );
+ return { query, command, services };
+ }, [account, url, services]);
+
+ useEffect(() => {
+ async function updateServices() {
+ if (!context.query || !context.query.base) {
+ return;
+ }
+ const updated = new Set<string>();
+ try {
+ const { endpoints } = await context.query.base.endpoints();
+ endpoints
+ .map((endpoint: string) => endpoint.split(".")[0])
+ .forEach((service: string) => updated.add(service));
+ } catch (error) {
+ console.error(`Couldn't update services: ${(error as Error).message}`);
+ }
+ setServices(updated);
+ }
+ updateServices();
+ // eslint-disable-next-line
+ }, [url]);
 
  return (
- <NeighborhoodContext.Provider value={neighborhood}>
+ <NeighborhoodContext.Provider value={context}>
  {children}
  </NeighborhoodContext.Provider>
  );
 }
+
+export const useNeighborhoodContext = () => useContext(NeighborhoodContext);

src/features/accounts/api/create-account.ts

@@ -3,8 +3,7 @@
  AccountMultisigArgument,
  CreateAccountResponse,
 } from "@liftedinit/many-js";
-import { NeighborhoodContext } from "api/neighborhoods";
-import { useContext } from "react";
+import { useNeighborhoodContext } from "api/neighborhoods";
 import { useMutation } from "react-query";
 import { accountLedgerFeature, accountMultisigFeature } from "../types";
 
@@ -20,7 +19,7 @@
 };
 
 export function useCreateAccount() {
- const n = useContext(NeighborhoodContext);
+ const { command: n } = useNeighborhoodContext();
  return useMutation<CreateAccountResponse, Error, CreateAccountFormData>(
  async (vars: CreateAccountFormData) => {
  const name = vars.accountSettings.name;

src/features/accounts/api/get-account-info.ts

@@ -3,13 +3,12 @@
  AccountRole,
  GetAccountInfoResponse,
 } from "@liftedinit/many-js";
-import { NeighborhoodContext } from "api/neighborhoods";
-import { useContext } from "react";
+import { useNeighborhoodContext } from "api/neighborhoods";
 import { useQuery } from "react-query";
 import { useAccountsStore } from "../stores";
 
 export function useGetAccountInfo(accountAddress?: string) {
- const n = useContext(NeighborhoodContext);
+ const { query: n } = useNeighborhoodContext();
  const activeIdentity = useAccountsStore((s) => s.byId.get(s.activeId));
  const address = activeIdentity?.address;
 

src/features/accounts/api/get-webauthn-credential.ts

@@ -1,19 +1,18 @@
-import { NeighborhoodContext } from "api/neighborhoods";
-import { useContext } from "react";
+import { useNeighborhoodContext } from "api/neighborhoods";
 import { useMutation } from "react-query";
 import { RecoverOptions } from "../types";
 
 /**
  * get webauthn account data from k-v store during import/recovery
  */
 export function useGetWebauthnCredential() {
- const queryNetwork = useContext(NeighborhoodContext);
+ const { query } = useNeighborhoodContext();
  return useMutation(
  async ({ getFrom, value }: { getFrom: RecoverOptions; value: string }) => {
  const getFn =
  getFrom === RecoverOptions.phrase
- ? queryNetwork?.idStore.getFromRecallPhrase
- : queryNetwork?.idStore.getFromAddress;
+ ? query?.idStore.getFromRecallPhrase
+ : query?.idStore.getFromAddress;
  const res = await getFn(value);
  return res;
  }

src/features/accounts/api/save-webauthn-credential.ts

@@ -1,10 +1,9 @@
 import { IdStore, Network, WebAuthnIdentity } from "@liftedinit/many-js";
-import { NeighborhoodContext } from "api/neighborhoods";
-import { useContext } from "react";
+import { useNeighborhoodContext } from "api/neighborhoods";
 import { useMutation } from "react-query";
 
 export function useSaveWebauthnCredential() {
- const network = useContext(NeighborhoodContext);
+ const { command } = useNeighborhoodContext();
  return useMutation<
  { phrase: string },
  Error,
@@ -15,7 +14,7 @@
  identity: WebAuthnIdentity;
  }
  >(async ({ address, credentialId, cosePublicKey, identity }) => {
- const n = new Network(network?.url ?? "", identity);
+ const n = new Network(command?.url ?? "", identity);
  n.apply([IdStore]);
  const res = await n?.idStore.store(address, credentialId, cosePublicKey);
  return res;

src/features/accounts/components/accounts-menu/accounts-menu.tsx

@@ -1,37 +1,39 @@
-import React from "react";
 import {
  AnonymousIdentity,
  ANON_IDENTITY,
  WebAuthnIdentity,
 } from "@liftedinit/many-js";
-import { useAccountsStore } from "features/accounts";
 import {
+ AddressText,
  Box,
  Button,
+ ChevronDownIcon,
  Circle,
+ EditIcon,
  Flex,
  HStack,
  Icon,
  IconButton,
  Menu,
  MenuButton,
- MenuList,
+ MenuDivider,
  MenuItem,
+ MenuList,
  MenuOptionGroup,
- MenuDivider,
  SimpleGrid,
  Text,
+ UsbIcon,
  useDisclosure,
- VStack,
- AddressText,
- ChevronDownIcon,
- EditIcon,
  UserIcon,
- UsbIcon,
+ useToast,
+ VStack,
 } from "@liftedinit/ui";
+import { useNeighborhoodContext } from "api/neighborhoods";
+import { useAccountsStore } from "features/accounts";
+import { useEffect, useState } from "react";
+import { Account, AccountId } from "../../types";
 import { AddAccountModal } from "./add-account-modal";
 import { EditAccountModal } from "./edit-account-modal";
-import { Account, AccountId } from "../../types";
 
 export type AccountItemWithIdDisplayStrings = [
  AccountId,
@@ -66,7 +68,25 @@
  })
  );
 
- const [editAccount, setEditAccount] = React.useState<
+ const toast = useToast();
+ const { services } = useNeighborhoodContext();
+ useEffect(() => {
+ (async () => {
+ const isWebAuthnIdentity =
+ activeAccount?.identity instanceof WebAuthnIdentity;
+ if (isWebAuthnIdentity && !services.has("idstore")) {
+ setActiveId(0); // reset to Anonymous
+ toast({
+ status: "warning",
+ title: "Unsupported Identity",
+ description:
+ "Selected Neighborhood does not support Hardware Authenticators",
+ });
+ }
+ })();
+ }, [activeAccount, services, setActiveId, toast]);
+
+ const [editAccount, setEditAccount] = useState<
  [number, Account] | undefined
  >();