@dxos/react-client 2.23.1-dev.ed17952c → 2.24.1-dev.79448ad7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "2.23.1-dev.ed17952c",
+  "version": "2.24.1-dev.79448ad7",
   "description": "React client API",
   "keywords": [],
   "license": "AGPL-3.0",
@@ -8,24 +8,24 @@
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
   "dependencies": {
-    "@dxos/async": "2.23.1-dev.ed17952c",
-    "@dxos/bot-factory-client": "2.23.1-dev.ed17952c",
-    "@dxos/client": "2.23.1-dev.ed17952c",
-    "@dxos/config": "2.23.1-dev.ed17952c",
-    "@dxos/credentials": "2.23.1-dev.ed17952c",
-    "@dxos/crypto": "2.23.1-dev.ed17952c",
-    "@dxos/debug": "2.23.1-dev.ed17952c",
-    "@dxos/echo-db": "2.23.1-dev.ed17952c",
-    "@dxos/util": "2.23.1-dev.ed17952c",
+    "@dxos/async": "2.24.1-dev.79448ad7",
+    "@dxos/bot-factory-client": "2.24.1-dev.79448ad7",
+    "@dxos/client": "2.24.1-dev.79448ad7",
+    "@dxos/config": "2.24.1-dev.79448ad7",
+    "@dxos/credentials": "2.24.1-dev.79448ad7",
+    "@dxos/crypto": "2.24.1-dev.79448ad7",
+    "@dxos/debug": "2.24.1-dev.79448ad7",
+    "@dxos/echo-db": "2.24.1-dev.79448ad7",
+    "@dxos/util": "2.24.1-dev.79448ad7",
     "assert": "^2.0.0",
     "debug": "^4.3.3",
     "react-display-name": "^0.2.5",
     "use-subscription": "^1.4.1"
   },
   "devDependencies": {
-    "@dxos/esbuild-plugins": "2.23.1-dev.ed17952c",
+    "@dxos/esbuild-plugins": "2.24.1-dev.79448ad7",
     "@dxos/esbuild-server": "~1.7.4",
-    "@dxos/toolchain-node-library": "2.23.0",
+    "@dxos/toolchain-node-library": "2.24.0",
     "@mui/material": "^5.0.1",
     "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "5.1.2",

package/react-client.build.log

@@ -0,0 +1,33 @@
+Invoking: toolchain build:test 
+
+
+typescript
+OK in 7607 ms
+
+eslint
+OK in 7853 ms
+
+mocha
+This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills
+This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills
+
+
+  ClientProvider
+    ✓ Renders with children
+    ✓ Provides the client
+
+  Client hook
+    ✓ should throw when used outside a context
+    ✓ should return client when used properly in a context
+
+  Config hook
+    ✓ should throw when used outside a context
+    ✓ should return default client config when no config is passed in a context
+    ✓ should return custom client config when used properly in a context
+
+
+  7 passing (362ms)
+
+OK in 2825 ms
+
+CHECK COMPLETE in 18304 ms

package/src/containers/ClientProvider.tsx

@@ -6,7 +6,7 @@ import debug from 'debug';
 import React, { MutableRefObject, ReactNode, useEffect, useState } from 'react';
 
 import { Client, ClientOptions } from '@dxos/client';
-import { Config, ConfigObject } from '@dxos/config';
+import { Config, ConfigObject, ConfigV1Object } from '@dxos/config';
 import { MaybeFunction, MaybePromise, getAsyncValue } from '@dxos/util';
 
 import { printBanner } from '../banner';
@@ -17,7 +17,7 @@ const log = debug('dxos:react-client');
 export type ClientProvider = MaybeFunction<MaybePromise<Client>>
 
 // TODO(burdon): Why defs?
-export type ConfigProvider = MaybeFunction<MaybePromise<Config | ConfigObject>>
+export type ConfigProvider = MaybeFunction<MaybePromise<Config | ConfigObject | ConfigV1Object>>
 
 export interface ClientProviderProps {
   children?: ReactNode

package/src/hooks/bot-factory/useBotFactoryClient.ts

@@ -18,7 +18,7 @@ export const useBotFactoryClient = (): BotFactoryClient | undefined => {
 
   useEffect(() => {
     const botFactoryClient = new BotFactoryClient(client.echo.networkManager);
-    const topic = config.get('services.bot.topic') ??
+    const topic = config.get('runtime.services.bot.topic') ??
       raise(new Error('Bot factory topic is not provided'));
     setImmediate(async () => {
       await botFactoryClient.start(PublicKey.from(topic));

package/src/hooks/client/client.test.tsx

@@ -7,7 +7,7 @@ import expect from 'expect';
 import React from 'react';
 
 import { Client } from '@dxos/client';
-import { defs } from '@dxos/config';
+import { ConfigV1Object } from '@dxos/config';
 
 import { ClientProvider } from '../../containers';
 import { useClient } from './useClient';
@@ -21,10 +21,13 @@ describe('Client hook', () => {
   });
 
   it('should return client when used properly in a context', () => {
-    const config: defs.Config = {
-      system: {
-        storage: {
-          persistent: false
+    const config: ConfigV1Object = {
+      version: 1,
+      runtime: {
+        client: {
+          storage: {
+            persistent: false
+          }
         }
       }
     };

package/src/hooks/client/config.test.tsx

@@ -7,7 +7,7 @@ import expect from 'expect';
 import React from 'react';
 
 import { Client } from '@dxos/client';
-import { ConfigObject } from '@dxos/config';
+import { ConfigV1Object } from '@dxos/config';
 
 import { ClientProvider } from '../../containers';
 import { useConfig } from './useConfig';
@@ -29,10 +29,13 @@ describe('Config hook', () => {
   });
 
   it('should return custom client config when used properly in a context', () => {
-    const config: ConfigObject = {
-      system: {
-        storage: {
-          persistent: false
+    const config: ConfigV1Object = {
+      version: 1,
+      runtime: {
+        client: {
+          storage: {
+            persistent: false
+          }
         }
       }
     };
@@ -40,6 +43,6 @@ describe('Config hook', () => {
     const wrapper = ({ children }: any) => <ClientProvider client={client}>{children}</ClientProvider>;
     const { result } = renderHook(render, { wrapper });
     expect(result.error?.message).not.toBeDefined();
-    expect(result.current.get('system.storage')).toEqual(config.system?.storage);
+    expect(result.current.get('runtime.client.storage')).toEqual(config.runtime?.client?.storage);
   });
 });

package/stories/halo-invitations.stories.tsx

@@ -53,7 +53,7 @@ const HaloInvitationContainer = () => {
     setInvitationCode(invitation.descriptor.encode());
   };
 
-  if (!client.halo.hasProfile()) {
+  if (!client.halo.profile) {
     return null;
   }
 

package/stories/halo-recovery.stories.tsx

@@ -0,0 +1,126 @@
+//
+// Copyright 2021 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import {
+  Box, Button, Divider, Input, Paper, Toolbar
+} from '@mui/material';
+
+import { generateSeedPhrase, keyPairFromSeedPhrase } from '@dxos/crypto';
+
+import {
+  ClientProvider, useClient,
+  useParties,
+  useProfile
+} from '../src';
+import {
+  ClientPanel, Container
+} from './helpers';
+
+export default {
+  title: 'react-client/HALO Recovery'
+};
+
+const HaloCreationContainer = () => {
+  const client = useClient();
+  const profile = useProfile();
+  const [seed, setSeed] = useState('');
+
+  const handleCreateHalo = async () => {
+    const seedPhrase = generateSeedPhrase();
+    const keyPair = keyPairFromSeedPhrase(seedPhrase);
+
+    await client.halo.createProfile({ ...keyPair });
+    setSeed(seedPhrase);
+  };
+
+  return (
+    <Box sx={{ padding: 1 }}>
+      {profile && (
+        <p>Generated with seedphrase: {seed}</p>
+      )}
+      {!profile && (
+        <Toolbar>
+          <Button
+            onClick={handleCreateHalo}
+          >
+            Create Halo
+          </Button>
+        </Toolbar>
+      )}
+
+    </Box>
+  );
+};
+
+const HaloRecoveryContainer = () => {
+  const client = useClient();
+  const [seed, setSeed] = useState('');
+
+  const handleRecover = async () => {
+    await client.halo.recoverProfile(seed);
+  };
+
+  return (
+    <Box sx={{ padding: 1 }}>
+      <Input
+        value={seed}
+        onChange={(e) => setSeed(e.target.value)}
+      />
+      <Button
+        disabled={!seed}
+        onClick={handleRecover}
+      >
+        Recover
+      </Button>
+    </Box>
+  );
+};
+
+const TestApp = () => {
+  const client = useClient();
+  const parties = useParties();
+  const profile = useProfile();
+
+  return (
+    <Box sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+      flexShrink: 0,
+      overflow: 'hidden',
+      margin: 1
+    }}>
+      <Paper>
+        <ClientPanel client={client} profile={profile} parties={parties} />
+        <Divider />
+        <HaloCreationContainer />
+        {!profile && (
+          <>
+            <Divider />
+            <HaloRecoveryContainer />
+          </>
+        )}
+      </Paper>
+    </Box>
+  );
+};
+
+export const HaloRecovery = () => {
+  return (
+    <Container>
+      <Box sx={{ display: 'flex', flex: 1, padding: 1, justifyContent: 'space-around' }}>
+        {/* Instantiated Client. */}
+        <ClientProvider>
+          <TestApp />
+        </ClientProvider>
+
+        <ClientProvider>
+          <TestApp />
+        </ClientProvider>
+      </Box>
+    </Container>
+  );
+};