@dxos/react-client 2.23.1-dev.f5b1145e → 2.24.1-dev.98738ed5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "2.23.1-dev.f5b1145e",
+  "version": "2.24.1-dev.98738ed5",
   "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.f5b1145e",
-    "@dxos/bot-factory-client": "2.23.1-dev.f5b1145e",
-    "@dxos/client": "2.23.1-dev.f5b1145e",
-    "@dxos/config": "2.23.1-dev.f5b1145e",
-    "@dxos/credentials": "2.23.1-dev.f5b1145e",
-    "@dxos/crypto": "2.23.1-dev.f5b1145e",
-    "@dxos/debug": "2.23.1-dev.f5b1145e",
-    "@dxos/echo-db": "2.23.1-dev.f5b1145e",
-    "@dxos/util": "2.23.1-dev.f5b1145e",
+    "@dxos/async": "2.24.1-dev.98738ed5",
+    "@dxos/bot-factory-client": "2.24.1-dev.98738ed5",
+    "@dxos/client": "2.24.1-dev.98738ed5",
+    "@dxos/config": "2.24.1-dev.98738ed5",
+    "@dxos/credentials": "2.24.1-dev.98738ed5",
+    "@dxos/crypto": "2.24.1-dev.98738ed5",
+    "@dxos/debug": "2.24.1-dev.98738ed5",
+    "@dxos/echo-db": "2.24.1-dev.98738ed5",
+    "@dxos/util": "2.24.1-dev.98738ed5",
     "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.f5b1145e",
+    "@dxos/esbuild-plugins": "2.24.1-dev.98738ed5",
     "@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

@@ -1,33 +0,0 @@
-Invoking: toolchain build:test 
-
-
-typescript
-OK in 6296 ms
-
-eslint
-OK in 6123 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 (266ms)
-
-OK in 1925 ms
-
-CHECK COMPLETE in 14359 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/src/hooks/echo-queries/useContacts.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { PartyMember } from '@dxos/echo-db';
+import { PartyMember } from '@dxos/client';
 
 import { useClient } from '../client';
 

package/src/hooks/echo-queries/useMembers.tsx

@@ -4,10 +4,9 @@
 
 import { useEffect, useState } from 'react';
 
-import { PartyProxy } from '@dxos/client';
-import { PartyMember } from '@dxos/echo-db';
+import { Party, PartyMember } from '@dxos/client';
 
-export const useMembers = (party: PartyProxy | undefined) => {
+export const useMembers = (party: Party | undefined) => {
   const [members, setMembers] = useState<PartyMember[]>([]);
 
   useEffect(() => {

package/src/hooks/echo-queries/useParties.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { PartyProxy } from '@dxos/client';
+import { Party } from '@dxos/client';
 import { PublicKeyLike } from '@dxos/crypto';
 
 import { useClient } from '../client';
@@ -13,7 +13,7 @@ import { useClient } from '../client';
  * Get a specific Party.
  * Requires ClientContext to be set via ClientProvider.
  */
-export const useParty = (partyKey?: PublicKeyLike): PartyProxy | undefined => {
+export const useParty = (partyKey?: PublicKeyLike): Party | undefined => {
   const parties = useParties();
   return parties.find(party => partyKey && party.key.equals(partyKey));
 };
@@ -24,7 +24,7 @@ export const useParty = (partyKey?: PublicKeyLike): PartyProxy | undefined => {
  */
 export const useParties = () => {
   const client = useClient();
-  const [parties, setParties] = useState<PartyProxy[]>([]);
+  const [parties, setParties] = useState<Party[]>([]);
 
   useEffect(() => {
     const result = client.echo.queryParties();

package/src/hooks/echo-selections/useSelection.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { SelectionResult } from '@dxos/echo-db';
+import { SelectionResult } from '@dxos/client';
 import { Falsy } from '@dxos/util';
 
 /**

package/src/hooks/util/useResultSet.ts

@@ -5,7 +5,7 @@
 import { useMemo } from 'react';
 import { useSubscription } from 'use-subscription';
 
-import { ResultSet } from '@dxos/echo-db';
+import { ResultSet } from '@dxos/client';
 
 /**
  * A convenience hook used for subscribing to changing values of a result set.

package/stories/halo-invitations.stories.tsx

@@ -8,8 +8,7 @@ import {
   Box, Button, Divider, Paper, TextField, Toolbar
 } from '@mui/material';
 
-import { Invitation } from '@dxos/client';
-import { InvitationDescriptor } from '@dxos/echo-db';
+import { Invitation, InvitationDescriptor } from '@dxos/client';
 
 import {
   ClientProvider,
@@ -53,7 +52,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>
+  );
+};

package/stories/helpers/ClientPanel.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { Box } from '@mui/material';
 
-import { Client, PartyProxy } from '@dxos/client';
+import { Client, Party } from '@dxos/client';
 
 import { useProfile } from '../../src';
 import { JsonPanel } from './JsonPanel';
@@ -18,7 +18,7 @@ export const ClientPanel = ({
 }: {
   client: Client,
   profile?: Partial<ReturnType<typeof useProfile>>,
-  parties?: PartyProxy[]
+  parties?: Party[]
 }) => {
   const data = (parties.length !== 0) ? { parties: parties.map(({ key }) => key.toHex()) } : undefined;
 

package/stories/party-invitations.stories.tsx

@@ -8,9 +8,8 @@ import {
   Box, Button, Divider, Paper, TextField, Toolbar
 } from '@mui/material';
 
-import { PartyInvitation } from '@dxos/client';
+import { PartyInvitation, InvitationDescriptor } from '@dxos/client';
 import { PublicKey } from '@dxos/crypto';
-import { InvitationDescriptor } from '@dxos/echo-db';
 
 import {
   ClientProvider,