@@ -0,0 +1,134 @@
1+import React from 'react';
2+import { Grid, Button, SelectInput } from 'indigo-react';
3+import * as ob from 'urbit-ob';
4+
5+import { usePointCursor } from 'store/pointCursor';
6+import { usePointCache } from 'store/pointCache';
7+
8+import useCurrentPointName from 'lib/useCurrentPointName';
9+import * as need from 'lib/need';
10+
11+import { OutButton, ForwardButton } from 'components/Buttons';
12+import ViewHeader from 'components/ViewHeader';
13+
14+import BridgeForm from 'form/BridgeForm';
15+
16+export default function UrbitOSHome() {
17+ const { pointCursor } = usePointCursor();
18+ const { getDetails } = usePointCache();
19+
20+ const point = need.point(pointCursor);
21+ const details = need.details(getDetails(point));
22+
23+ const sponsor = ob.patp(details.sponsor);
24+ return (
25+ <>
26+ <Hosting />
27+ <Grid>
28+ <Grid.Item full className="mv7 f5">
29+ Network
30+ </Grid.Item>
31+ <Grid.Divider />
32+ <Grid.Item
33+ full
34+ as={ForwardButton}
35+ detail="A sponsor finds new peers in your network"
36+ accessory={<u>Change</u>}>
37+ <span className="mono">{sponsor}</span>
38+ <span className="f7 bg-black white p1 ml2 r4">SPONSOR</span>
39+ </Grid.Item>
40+ <Grid.Divider />
41+ <Grid.Item full as={ForwardButton}>
42+ Reset Networking Keys
43+ </Grid.Item>
44+ <Grid.Divider />
45+ <Grid.Item full as={ForwardButton}>
46+ Unset
47+ </Grid.Item>
48+ <Grid.Divider />
49+ <Grid.Item full as={ForwardButton}>
50+ View Networking Keys
51+ </Grid.Item>
52+ </Grid>
53+ </>
54+ );
55+}
56+
57+function Hosting() {
58+ const name = useCurrentPointName();
59+ const options = [{ text: 'Tlon', value: 'tlon' }];
60+
61+ const props = { name, options };
62+ const connected = false;
63+
64+ return (
65+ <Grid gap={4}>
66+ <Grid.Item full className="f5">
67+ Urbit OS
68+ </Grid.Item>
69+
70+ {(connected && <HostingConnected {...props} />) || (
71+ <HostingDisconnected {...props} />
72+ )}
73+ </Grid>
74+ );
75+}
76+
77+function HostingConnected({ name, options }) {
78+ return (
79+ <BridgeForm initialValues={{ provider: 'tlon' }}>
80+ {() => (
81+ <>
82+ <Grid.Item full>Status: Connected</Grid.Item>
83+ <Grid.Item cols={[1, 9]} className="gray4">
84+ <span className="mono">{name}</span> is connected to Tlon and has
85+ the IP address 127.0.0.1
86+ </Grid.Item>
87+ <Grid.Item cols={[1, 9]} as={OutButton} solid success>
88+ Open OS
89+ </Grid.Item>
90+ <Grid.Item cols={[9, 13]} as={Button} className="b-black b1" center>
91+ Disconnect
92+ </Grid.Item>
93+ <Grid.Item
94+ full
95+ as={SelectInput}
96+ name="provider"
97+ label="Host Provider"
98+ options={options}
99+ disabled
100+ />
101+ </>
102+ )}
103+ </BridgeForm>
104+ );
105+}
106+
107+function HostingDisconnected({ options }) {
108+ return (
109+ <BridgeForm initialValues={{ provider: 'tlon' }}>
110+ {() => (
111+ <>
112+ <Grid.Item full className="gray4">
113+ <span className="gray3">Status:</span> Disconnected
114+ <br />
115+ <span className="f6">Last connected: 4m ago</span>
116+ </Grid.Item>
117+
118+ <Grid.Item full as={ForwardButton} solid>
119+ Connect
120+ </Grid.Item>
121+
122+ <Grid.Item
123+ full
124+ as={SelectInput}
125+ name="provider"
126+ label="Host Provider"
127+ options={options}
128+ disabled
129+ />
130+ </>
131+ )}
132+ </BridgeForm>
133+ );
134+}