8227348 · bridge · git.iko.soy

git.iko.soy/bridge

add adoption functionality

commit82273483637d376f7d8ccfefec1feb4fc9d3e471 authorLiam Fitzgerald <liam@urizen.co> dateSat 29 Feb 2020, 16:14 (7 years ago) parent68e8ca5

5 files changed+131−14

compare with master

unifiedsplit

src/lib/routeNames.js+1 src/lib/router.js+2 src/lib/useRouter.js+7−1 src/views/Adopt.js+89 src/views/Residents.js+32−13

src/lib/routeNames.js+1

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

2525 HOSTING: Symbol('HOSTING'),

2626 URBIT_ID: Symbol('URBIT_ID'),

2727 RESIDENTS: Symbol('RESIDENTS'),

28+ ADOPT: Symbol('ADOPT'),

2829};

src/lib/router.js+2

@@ -17,6 +17,7 @@ import CancelTransfer from 'views/CancelTransfer';

1717import UrbitOS from 'views/UrbitOS';

1818import UrbitID from 'views/UrbitID';

1919import Residents from 'views/Residents';

20+import Adopt from 'views/Adopt';

2021

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

2223

@@ -42,4 +43,5 @@ export const ROUTES = {

4243 [ROUTE_NAMES.HOSTING]: Hosting,

4344 [ROUTE_NAMES.URBIT_ID]: UrbitID,

4445 [ROUTE_NAMES.RESIDENTS]: Residents,

46+ [ROUTE_NAMES.ADOPT]: Adopt,

4547};

src/lib/useRouter.js+7−1

@@ -88,7 +88,13 @@ export default function useRouter({

8888 const includes = useCallback(key => _includes(routes.map(r => r.key), key), [

8989 routes,

9090 ]);

91− const data = useMemo(() => last(routes).data || NULL_DATA, [routes]);

91+ const data = useMemo(() => {

92+ try {

93+ return last(routes).data || NULL_DATA;

94+ } catch (e) {

95+ debugger;

96+ }

97+ }, [routes]);

9298 const Route = useMemo(() => views[peek().key], [views, peek]);

9399

94100 // Scroll to top of page with each route transition

src/views/Adopt.jsnew file+89

@@ -0,0 +1,89 @@

1+import React, { useCallback, useEffect, useMemo } from 'react';

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

3+import * as ob from 'urbit-ob';

4+import { ecliptic } from 'azimuth-js';

6+import View from 'components/View';

7+import InlineEthereumTransaction from 'components/InlineEthereumTransaction';

8+import ViewHeader from 'components/ViewHeader';

10+import { useNetwork } from 'store/network';

11+import { usePointCache } from 'store/pointCache';

12+import { usePointCursor } from 'store/pointCursor';

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

14+

15+import { GAS_LIMITS } from 'lib/constants';

16+import useEthereumTransaction from 'lib/useEthereumTransaction';

17+import * as need from 'lib/need';

18+

19+function useAdopt() {

20+ const { contracts } = useNetwork();

21+ const _contracts = need.contracts(contracts);

22+

23+ const { pointCursor } = usePointCursor();

24+ const point = need.point(pointCursor);

25+

26+ const { syncResidents } = usePointCache();

27+

28+ return useEthereumTransaction(

29+ useCallback(

30+ (adoptee, denied) =>

31+ denied

32+ ? ecliptic.reject(_contracts, adoptee)

33+ : ecliptic.adopt(_contracts, adoptee),

34+ [_contracts]

35+ ),

36+ useCallback(() => syncResidents(point), [syncResidents, point]),

37+ GAS_LIMITS.DEFAULT

38+ );

39+}

40+

41+export default function Adopt() {

42+ const { pop, data } = useHistory();

43+

44+ const { adoptee, denied } = data;

45+

46+ const patp = useMemo(() => ob.patp(adoptee), [adoptee]);

47+

48+ // const header = //useMemo(() => denied ? 'A Request' : 'Accept Request', [denied]);

49+ const { construct, bind, completed } = useAdopt();

50+

51+ const body = useMemo(

52+ () =>

53+ denied ? (

54+ <>

55+ {completed ? 'Denied' : 'Denying'} adoption request to{' '}

56+ <span className="mono">{patp}</span>

57+ </>

58+ ) : (

59+ <>

60+ {completed ? 'Approved' : 'Approving'} adoption request to{' '}

61+ <span className="mono">{patp}</span>

62+ </>

63+ ),

64+ [patp, denied, completed]

65+ );

66+

67+ useEffect(() => {

68+ construct(adoptee, denied);

69+ }, [construct, adoptee, denied]);

70+

71+ return (

72+ <View pop={() => pop()} inset>

73+ <Grid>

74+ <Grid.Item full as={ViewHeader} className="mb2">

75+ Adopt

76+ </Grid.Item>

77+ <Grid.Item full className="gray4 f5 mv2">

78+ {body}

79+ </Grid.Item>

80+ <Grid.Item

81+ full

82+ {...bind}

83+ as={InlineEthereumTransaction}

84+ onReturn={() => pop()}

85+ />

86+ </Grid>

87+ </View>

88+ );

89+}

src/views/Residents.js+32−13

@@ -1,5 +1,5 @@

11import React, { useState, useEffect, useCallback } from 'react';

2−import { Grid, H4 } from 'indigo-react';

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

33import { Nothing } from 'folktale/maybe';

44import * as ob from 'urbit-ob';

@@ -7,6 +7,7 @@ import View from 'components/View';

77import Tabs from 'components/Tabs';

88import Crumbs from 'components/Crumbs';

99import Sigil from 'components/Sigil';

10+import Blinky from 'components/Blinky';

1011

1112import { useLocalRouter } from 'lib/LocalRouter';

1213import useCurrentPointName from 'lib/useCurrentPointName';

@@ -30,13 +31,13 @@ const VIEWS = {

3031 [NAMES.ALL]: AllResidents,

3132};

3233

33−function Requests({ className, requests }) {

34− const onThing = () => {};

35−

34+function Requests({ className, requests, onAccept, onDecline }) {

3635 if (Nothing.hasInstance(requests)) {

3736 return (

3837 <Grid className={className}>

39− <Grid.Item full>Loading...</Grid.Item>

38+ <Grid.Item full as={HelpText} className="mt8 t-center">

39+ <Blinky /> Loading...

40+ </Grid.Item>

4041 </Grid>

4142 );

4243 }

@@ -49,8 +50,8 @@ function Requests({ className, requests }) {

4950 <Resident

5051 key={point}

5152 point={point}

52− onAccept={onThing}

53− onDecline={onThing}

53+ onAccept={onAccept}

54+ onDecline={onDecline}

5455 />

5556 ))}

5657 </Grid>

@@ -81,13 +82,15 @@ function Resident({ point, onAccept, onDecline }) {

8182 {isRequest && (

8283 <>

8384 <Grid.Item

84− className="flex-row-r align-center underline green3"

85− cols={[7, 10]}>

85+ className="flex-row-r align-center underline green3 pointer"

86+ cols={[7, 10]}

87+ onClick={() => onAccept(point)}>

8688 Accept

8789 </Grid.Item>

8890 <Grid.Item

89− className="flex-row-r align-center underline red4"

90− cols={[10, 13]}>

91+ className="flex-row-r align-center underline red4 pointer"

92+ cols={[10, 13]}

93+ onClick={() => onDecline(point)}>

9194 Decline

9295 </Grid.Item>

9396 </>

@@ -118,7 +121,7 @@ function AllResidents({ className, residents }) {

118121}

119122

120123export default function Residents() {

121− const { pop } = useLocalRouter();

124+ const { pop, push, names } = useLocalRouter();

122125 const name = useCurrentPointName();

123126

124127 const { pointCursor } = usePointCursor();

@@ -133,8 +136,22 @@ export default function Residents() {

133136

134137 const [currentTab, setCurrentTab] = useState(NAMES.ALL);

135138

139+ const onAccept = useCallback(adoptee =>

140+ push(names.ADOPT, {

141+ adoptee,

142+ denied: false,

143+ })

144+ );

145+

146+ const onDecline = useCallback(adoptee =>

147+ push(names.ADOPT, {

148+ adoptee,

149+ denied: true,

150+ })

151+ );

152+

136153 return (

137− <View pop={pop}>

154+ <View pop={pop} inset>

138155 <Grid>

139156 <Grid.Item

140157 full

@@ -156,6 +173,8 @@ export default function Residents() {

156173 // Props for tab

157174 residents={residents}

158175 requests={requests}

176+ onAccept={onAccept}

177+ onDecline={onDecline}

159178 />

160179 </Grid>

161180 </View>