56cfb89 · bridge · git.iko.soy

src/indigo-react/indigo.css+5

compare with master

unifiedsplit

@@ -387,6 +387,11 @@ caption,

387 line-height: 1.33333;

388 font-weight: 400; }

389

390+.f7 {

391+ font-size: 0.5rem;

392+ line-height: 1.33333;

393+ font-weight: 400; }

394+

390@media only screen and (min-width: 550px) {

395@media only screen and (min-width: 550px) {

391 .f1-ns {

396 .f1-ns {

392 font-size: 3rem;

397 font-size: 3rem;

src/lib/routeNames.js+1

@@ -21,4 +21,5 @@ export const ROUTE_NAMES = {

21 PARTY_SET_POOL_SIZE: Symbol('PARTY_SET_POOL_SIZE'),

22 INVITE_COHORT: Symbol('INVITE_COHORT'),

23 STAR_RELEASE: Symbol('STAR_RELEASE'),

24+ URBIT_OS: Symbol('URBIT_OS'),

24};

25};

src/lib/router.js+2

@@ -15,6 +15,7 @@ import PartySetPoolSize from 'views/Party/PartySetPoolSize';

15import InviteCohort from 'views/Invite/Cohort';

16import AcceptTransfer from 'views/AcceptTransfer';

17import CancelTransfer from 'views/CancelTransfer';

18+import UrbitOS from 'views/UrbitOS';

18

19

19import { ROUTE_NAMES } from './routeNames';

20import { ROUTE_NAMES } from './routeNames';

20

21

@@ -36,4 +37,5 @@ export const ROUTES = {

36 [ROUTE_NAMES.INVITE_COHORT]: InviteCohort,

37 [ROUTE_NAMES.INVITE_COHORT]: InviteCohort,

37 [ROUTE_NAMES.STAR_RELEASE]: StarRelease,

38 [ROUTE_NAMES.STAR_RELEASE]: StarRelease,

38 [ROUTE_NAMES.SIGIL_GENERATOR]: SigilGenerator,

39 [ROUTE_NAMES.SIGIL_GENERATOR]: SigilGenerator,

40+ [ROUTE_NAMES.URBIT_OS]: UrbitOS,

39};

41};

src/views/Invite/Cohort.js+1−1

@@ -50,7 +50,7 @@ function CohortMember({ point, pending = false, className }) {

50 const DetailText = useCallback(

51 () =>

52 pending ? 'Pending' : <> {matchBlinky(sentInvites)} points invited </>,

53− [sentInvites]

53+ [pending, sentInvites]

54 );

55

56 return (

src/views/Point.js+5

@@ -75,6 +75,8 @@ export default function Point() {

75

76 const goCohort = useCallback(() => push(names.INVITE_COHORT), [push, names]);

77

78+ const goUrbitOS = useCallback(() => push(names.URBIT_OS), [push, names]);

79+

78 const goPartiesSetPoolSize = useCallback(

80 const goPartiesSetPoolSize = useCallback(

79 () => push(names.PARTY_SET_POOL_SIZE),

81 () => push(names.PARTY_SET_POOL_SIZE),

80 [push, names]

82 [push, names]

@@ -220,6 +222,9 @@ export default function Point() {

220 Sigil

222 Sigil

221 </Grid.Item>

223 </Grid.Item>

222 <Grid.Divider />

224 <Grid.Divider />

225+ <Grid.Item full as={ForwardButton} onClick={goUrbitOS}>

226+ Urbit OS

227+ </Grid.Item>

223 <Grid.Item

228 <Grid.Item

224 full

229 full

225 as={ForwardButton}

230 as={ForwardButton}

src/views/UrbitOS.jsnew file+54

@@ -0,0 +1,54 @@

1+import React from 'react';

2+import { Grid } from 'indigo-react';

3+

4+import { useHistory } from 'store/history';

5+

6+import useCurrentPointName from 'lib/useCurrentPointName';

7+import useRouter from 'lib/useRouter';

8+import { LocalRouterProvider } from 'lib/LocalRouter';

9+

10+import View from 'components/View';

11+import Crumbs from 'components/Crumbs';

12+

13+import UrbitOSHome from './UrbitOS/Home';

14+

15+const NAMES = {

16+ HOME: 'HOME',

17+ CHANGE_SPONSOR: 'CHANGE_SPONSOR',

18+ NETWORKING_KEYS: 'NETWORKING_KEYS',

19+};

20+

21+const VIEWS = {

22+ [NAMES.HOME]: UrbitOSHome,

23+ [NAMES.CHANGE_SPONSOR]: UrbitOSHome,

24+ [NAMES.NETWORKING_KEYS]: UrbitOSHome,

25+};

26+

27+export default function UrbitOS() {

28+ const history = useHistory();

29+ const name = useCurrentPointName();

30+

31+ const { Route, ...router } = useRouter({

32+ names: NAMES,

33+ views: VIEWS,

34+ initialRoutes: [{ key: NAMES.HOME }],

35+ });

36+

37+ return (

38+ <View pop={router.pop} inset>

39+ <LocalRouterProvider value={router}>

40+ <Grid className="mb4">

41+ <Grid.Item

42+ full

43+ as={Crumbs}

44+ routes={[

45+ { text: name, action: () => history.pop() },

46+ { text: 'Urbit OS' },

47+ ]}

48+ />

49+ </Grid>

50+ <Route />

51+ </LocalRouterProvider>

52+ </View>

53+ );

54+}

src/views/UrbitOS/Home.jsnew file+134

@@ -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={Change}>

37+ {sponsor}

38+ SPONSOR

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+ {name} 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+ Status: Disconnected

114+

115+ Last connected: 4m ago

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+}