@@ -1,4 +1,4 @@
1−import React, { useCallback, useState, useEffect } from 'react';
1+import React, { useCallback, useState, useEffect, useMemo } from 'react';
22import cn from 'classnames';
33import { Grid, Button, SelectInput, Flex } from 'indigo-react';
44import * as ob from 'urbit-ob';
@@ -22,6 +22,7 @@ import { useLocalRouter } from 'lib/LocalRouter';
2222import { useHosting } from 'store/hosting';
2323import DownloadKeyfileButton from 'components/DownloadKeyfileButton';
2424import useLifecycle from 'lib/useLifecycle';
25+import useLocalHosting from 'lib/useLocaHosting';
2526
2627export default function UrbitOSHome({ manualNetworkSeed }) {
2728 const { pointCursor } = usePointCursor();
@@ -104,6 +105,13 @@ function Hosting({ manualNetworkSeed }) {
104105 disabled,
105106 } = ship;
106107
108+ const { running: localRunning, url: localUrl } = useLocalHosting();
109+
110+ let running = useMemo(() => localRunning || ship.running, [
111+ ship,
112+ localRunning,
113+ ]);
114+
107115 useLifecycle(() => {
108116 syncStatus();
109117 });
@@ -114,6 +122,19 @@ function Hosting({ manualNetworkSeed }) {
114122 const options = [{ text: 'Tlon', value: 'tlon' }];
115123
116124 const renderMain = useCallback(() => {
125+ if (localRunning) {
126+ return (
127+ <Grid.Item
128+ full
129+ as={LoginButton}
130+ solid
131+ success
132+ url={localUrl}
133+ code={code}>
134+ Open OS
135+ </Grid.Item>
136+ );
137+ }
117138 if (ship.running) {
118139 return (
119140 <>
@@ -158,6 +179,7 @@ function Hosting({ manualNetworkSeed }) {
158179 );
159180 }
160181 }, [
182+ localRunning,
161183 ship.missing,
162184 ship.running,
163185 ship.pending,
@@ -202,11 +224,8 @@ function Hosting({ manualNetworkSeed }) {
202224 <Grid.Item full className="f5" as={Flex}>
203225 <Flex.Item>Urbit OS </Flex.Item>
204226 <Flex.Item
205− className={cn(
206− { green3: ship.running, gray4: !ship.running },
207− 'ml3'
208− )}>
209− {ship.running ? 'Connected' : 'Disconnected'}
227+ className={cn({ green3: running, gray4: !running }, 'ml3')}>
228+ {running ? 'Connected' : 'Disconnected'}
210229 </Flex.Item>
211230 </Grid.Item>
212231 <BridgeForm initialValues={{ provider: 'tlon' }}>
@@ -214,14 +233,16 @@ function Hosting({ manualNetworkSeed }) {
214233 <>
215234 {renderDetails()}
216235 {renderMain()}
217− <Grid.Item
218− full
219− as={SelectInput}
220− name="provider"
221− label="Host Provider"
222− options={options}
223− disabled
224− />
236+ {!localRunning && (
237+ <Grid.Item
238+ full
239+ as={SelectInput}
240+ name="provider"
241+ label="Host Provider"
242+ options={options}
243+ disabled
244+ />
245+ )}
225246 </>
226247 )}
227248 </BridgeForm>