add capabilities context and loader

src/app/components/CapabilitiesLoader.tsx

@@ -0,0 +1,19 @@
+import { ReactNode, useCallback, useEffect } from 'react';
+import { Capabilities } from 'matrix-js-sdk';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+
+type CapabilitiesLoaderProps = {
+  children: (capabilities: Capabilities | undefined) => ReactNode;
+};
+export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) {
+  const mx = useMatrixClient();
+
+  const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(true), [mx]));
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return children(state.status === AsyncStatus.Success ? state.data : undefined);
+}

src/app/hooks/useCapabilities.ts

@@ -0,0 +1,12 @@
+import { Capabilities } from 'matrix-js-sdk';
+import { createContext, useContext } from 'react';
+
+const CapabilitiesContext = createContext<Capabilities | null>(null);
+
+export const CapabilitiesProvider = CapabilitiesContext.Provider;
+
+export function useCapabilities(): Capabilities {
+  const capabilities = useContext(CapabilitiesContext);
+  if (!capabilities) throw new Error('Capabilities are not not provided!');
+  return capabilities;
+}