@@ -1,4 +1,4 @@
1−import React, { useCallback, useState } from 'react';
1+import React, { useCallback, useState, useEffect } from 'react';
2import { Grid, Button, SelectInput } from 'indigo-react';
2import { Grid, Button, SelectInput } from 'indigo-react';
3import * as ob from 'urbit-ob';
3import * as ob from 'urbit-ob';
4import { azimuth } from 'azimuth-js';
4import { azimuth } from 'azimuth-js';
@@ -14,12 +14,15 @@ import {
14 OutButton,
14 OutButton,
15 ForwardButton,
15 ForwardButton,
16 BootUrbitOSButton,
16 BootUrbitOSButton,
17} from 'components/Buttons';
18} from 'components/Buttons';
18import CopyButton from 'components/CopyButton';
19import CopyButton from 'components/CopyButton';
19import NetworkingKeys from 'components/NetworkingKeys';
20import NetworkingKeys from 'components/NetworkingKeys';
21import BridgeForm from 'form/BridgeForm';
22import BridgeForm from 'form/BridgeForm';
22import { useLocalRouter } from 'lib/LocalRouter';
23import { useLocalRouter } from 'lib/LocalRouter';
24+import { useHosting } from 'store/hosting';
25+import DownloadKeyfileButton from 'components/DownloadKeyfileButton';
24export default function UrbitOSHome() {
27export default function UrbitOSHome() {
25 const { pointCursor } = usePointCursor();
28 const { pointCursor } = usePointCursor();
@@ -32,8 +35,6 @@ export default function UrbitOSHome() {
33 const sponsor = ob.patp(details.sponsor);
36 const sponsor = ob.patp(details.sponsor);
35− const { code, notice } = useKeyfileGenerator();
37 const [showKeys, setShowKeys] = useState(false);
38 const [showKeys, setShowKeys] = useState(false);
39 const showSponsor = azimuth.getPointSize(point) !== azimuth.PointSize.Galaxy;
40 const showSponsor = azimuth.getPointSize(point) !== azimuth.PointSize.Galaxy;
@@ -53,13 +54,7 @@ export default function UrbitOSHome() {
56− <Grid>
57+ <Hosting />
57− <Grid.Item full className="mv7">
61− <Grid.Item full as={BootUrbitOSButton} />
65 <Grid.Item full className="mv7 f5">
60 <Grid.Item full className="mv7 f5">
@@ -80,15 +75,7 @@ export default function UrbitOSHome() {
80 <Grid.Divider />
75 <Grid.Divider />
86− accessory={code && <CopyButton text={code} />}
87− detail={code || notice}
89− detailClassName="mono">
92 <Grid.Divider />
79 <Grid.Divider />
93 <Grid.Item full as={ForwardButton} onClick={goNetworkingKeys}>
80 <Grid.Item full as={ForwardButton} onClick={goNetworkingKeys}>
94 Reset Networking Keys
81 Reset Networking Keys
@@ -109,52 +96,133 @@ export default function UrbitOSHome() {
110// eslint-disable-next-line
97// eslint-disable-next-line
111function Hosting() {
98function Hosting() {
99+ const bind = useKeyfileGenerator();
100+ const { keyfile, code, notice } = bind;
101+ const ship = { connected: true }; //useHosting();
103+ const { syncStatus } = ship;
105+ const createShip = useCallback(() => ship.create(keyfile), [keyfile, ship]);
112 const name = useCurrentPointName();
107 const name = useCurrentPointName();
113 const options = [{ text: 'Tlon', value: 'tlon' }];
108 const options = [{ text: 'Tlon', value: 'tlon' }];
115− const props = { name, options };
110+ const props = { name, options, ship };
116− const connected = false;
120− <Grid.Item full className="f5">
112+ const renderMain = useCallback(() => {
124− {(connected && <HostingConnected {...props} />) || (
113+ if (ship.connected) {
116+ <Grid.Item cols={[1, 9]} as={OutButton} solid success>
119+ <Grid.Item cols={[9, 13]} as={Button} className="b-black b1" center>
125+ if (ship.missing || ship.booting) {
132+ disabled={ship.booting || !keyfile}
133+ loading={ship.booting}
134+ onClick={createShip}>
139+ if (ship.running || ship.connecting) {
125− <HostingDisconnected {...props} />
140+ return <HostingDisconnected {...props} />;
127− </Grid>
143+ ship.connected,
131−function HostingConnected({ name, options }) {
153+ const renderDetails = useCallback(() => {
132− return (
154+ if (ship.connected) {
133− <BridgeForm initialValues={{ provider: 'tlon' }}>
155+ return (
136 <Grid.Item full>Status: Connected</Grid.Item>
157 <Grid.Item full>Status: Connected</Grid.Item>
137 <Grid.Item cols={[1, 9]} className="gray4">
158 <Grid.Item cols={[1, 9]} className="gray4">
138 <span className="mono">{name}</span> is connected to Tlon and has
159 <span className="mono">{name}</span> is connected to Tlon and has
139 the IP address 127.0.0.1
160 the IP address 127.0.0.1
140 </Grid.Item>
161 </Grid.Item>
141− <Grid.Item cols={[1, 9]} as={OutButton} solid success>
162+ </>
165+ if (ship.running || ship.connected) {
168+ <Grid.Item full className="gray4">
169+ <span className="gray3">Status:</span> Disconnected
171+ <span className="f6">Last connected: 4m ago</span>
143 </Grid.Item>
172 </Grid.Item>
144− <Grid.Item cols={[9, 13]} as={Button} className="b-black b1" center>
173+
145− Disconnect
174+ <Grid.Item full as={ForwardButton} solid>
146 </Grid.Item>
176 </Grid.Item>
151− label="Host Provider"
185+ <Grid.Item full className="f5">
157− </BridgeForm>
188+ <BridgeForm initialValues={{ provider: 'tlon' }}>
197+ label="Host Provider"
208+ as={DownloadKeyfileButton}
211+ detail="A keyfile authenticates your Urbit ID to Urbit OS"
218+ accessory={code && <CopyButton text={code} />}
219+ detail={code || notice}
221+ detailClassName="mono">