56bd3b5 · bridge · git.iko.soy

src/components/L2/Window/HeaderPane.scss+4

compare with master

unifiedsplit

@@ -41,5 +41,9 @@

41 fill: white;

42 }

43 }

44+

45+ .header-count {

46+ color: rgba(0, 0, 0, 0.6);

47+ }

44 }

48 }

45}

49}

src/lib/routeNames.js+1

@@ -29,6 +29,7 @@ export const ROUTE_NAMES = {

29 URBIT_OS: Symbol('URBIT_OS'),

30 URBIT_ID: Symbol('URBIT_ID'),

31 RESIDENTS: Symbol('RESIDENTS'),

32+ REQUESTS: Symbol('REQUESTS'),

32 ADOPT: Symbol('ADOPT'),

33 ADOPT: Symbol('ADOPT'),

33 BITCOIN: Symbol('BITCOIN'),

34 BITCOIN: Symbol('BITCOIN'),

34 BITCOIN_XPUB: Symbol('BITCOIN_XPUB'),

35 BITCOIN_XPUB: Symbol('BITCOIN_XPUB'),

src/lib/router.js+4−1

@@ -14,7 +14,8 @@ import Activate from 'views/Activate';

14import Point from 'views/Point/Point';

15import UrbitOS from 'views/Point/UrbitOS';

16import UrbitID from 'views/Point/UrbitID';

17−import Residents from 'views/Point/Residents';

17+// import Residents from 'views/Point/Residents';

18+import { Residents } from 'views/Ops/Residents';

18import MigrateL2 from 'views/Point/MigrateL2.tsx';

19import MigrateL2 from 'views/Point/MigrateL2.tsx';

19import IssueChild from 'views/Point/IssueChild';

20import IssueChild from 'views/Point/IssueChild';

20

21

@@ -30,6 +31,7 @@ import TransactionHistory from 'views/Transactions/TransactionHistory';

30

31

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

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

32import { Ops } from 'views/Ops/Ops';

33import { Ops } from 'views/Ops/Ops';

34+import { Requests } from 'views/Ops/Requests';

33

35

34export const ROUTES = {

36export const ROUTES = {

35 [ROUTE_NAMES.DISCLAIMER]: Disclaimer,

37 [ROUTE_NAMES.DISCLAIMER]: Disclaimer,

@@ -54,6 +56,7 @@ export const ROUTES = {

54 [ROUTE_NAMES.URBIT_OS]: UrbitOS,

56 [ROUTE_NAMES.URBIT_OS]: UrbitOS,

55 [ROUTE_NAMES.URBIT_ID]: UrbitID,

57 [ROUTE_NAMES.URBIT_ID]: UrbitID,

56 [ROUTE_NAMES.RESIDENTS]: Residents,

58 [ROUTE_NAMES.RESIDENTS]: Residents,

59+ [ROUTE_NAMES.REQUESTS]: Requests,

57 [ROUTE_NAMES.ADOPT]: Adopt,

60 [ROUTE_NAMES.ADOPT]: Adopt,

58 [ROUTE_NAMES.BITCOIN]: Bitcoin,

61 [ROUTE_NAMES.BITCOIN]: Bitcoin,

59 [ROUTE_NAMES.BITCOIN_XPUB]: Xpub,

62 [ROUTE_NAMES.BITCOIN_XPUB]: Xpub,

src/views/Ops/Ops.tsx+3−3

@@ -18,6 +18,7 @@ export const Ops = () => {

18

19 const goSenate = useCallback(() => push(names.SENATE), [push, names]);

20 const goResidents = useCallback(() => push(names.RESIDENTS), [push, names]);

21+ const goRequests = useCallback(() => push(names.REQUESTS), [push, names]);

21 const goIssuePoint = useCallback(() => push(names.ISSUE_CHILD), [

22 const goIssuePoint = useCallback(() => push(names.ISSUE_CHILD), [

22 names.ISSUE_CHILD,

23 names.ISSUE_CHILD,

23 push,

24 push,

@@ -25,11 +26,10 @@ export const Ops = () => {

25

26

26 return (

27 return (

27 <View

28 <View

28− id="ops"

29 pop={pop}

30 inset

31 hideBack

32− className="urbit-id"

32+ className="ops"

33 header={<L2BackHeader hideBalance back={pop} />}>

34 <Window className="id-ops">

35 <HeaderPane>

@@ -58,7 +58,7 @@ export const Ops = () => {

58 Planets requesting your sponsorship

59 </Box>

60 </Box>

61− <Button className="secondary" onClick={goResidents}>

61+ <Button className="secondary" onClick={goRequests}>

62 View

63 </Button>

64 </Row>

src/views/Ops/Requests.tsxnew file+49

@@ -0,0 +1,49 @@

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

2+import { Row } from '@tlon/indigo-react';

3+

4+import Window from 'components/L2/Window/Window';

5+import HeaderPane from 'components/L2/Window/HeaderPane';

6+import BodyPane from 'components/L2/Window/BodyPane';

7+import { useLocalRouter } from 'lib/LocalRouter';

8+import View from 'components/View';

9+import L2BackHeader from 'components/L2/Headers/L2BackHeader';

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

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

12+import { useEffect } from 'react';

13+

14+export const Requests = () => {

15+ const { pop }: any = useLocalRouter();

16+ const { pointCursor } = usePointCursor();

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

18+

19+ const { getResidents, syncResidents } = usePointCache();

20+ const { requestCount } = getResidents(point);

21+

22+ useEffect(() => {

23+ console.log('sync');

24+ syncResidents(point);

25+ }, [point, syncResidents]);

26+

27+ return (

28+ <View

29+ className="ops-residents"

30+ pop={pop}

31+ inset

32+ hideBack

33+ header={<L2BackHeader hideBalance back={pop} />}>

34+ <Window>

35+ <HeaderPane>

36+ <Row className="header-row">

37+ <h5>

38+ Requests{' '}

39+ <span className="header-count">{requestCount?.value || 0}</span>

40+ </h5>

41+ </Row>

42+ </HeaderPane>

43+ <BodyPane>

44+ <p>Requests go here</p>

45+ </BodyPane>

46+ </Window>

47+ </View>

48+ );

49+};

src/views/Ops/Residents.scssnew file+58

@@ -0,0 +1,58 @@

1+.ops-residents {

2+ div.content-container {

3+ height: 550px;

4+ overflow-y: scroll;

5+ width: 100%;

6+

7+ // hide the vertical scrollbar

8+ -ms-overflow-style: none; /* IE and Edge */

9+ scrollbar-width: none; /* Firefox */

10+ &::-webkit-scrollbar {

11+ display: none; /* Chrome */

12+ }

13+ }

14+

15+ ul.residents-list {

16+ padding-left: unset;

17+ li {

18+ list-style: none;

19+ margin-bottom: 16px;

20+ height: 24px;

21+ display: flex;

22+ flex-flow: row nowrap;

23+

24+ &:first {

25+ margin-top: unset;

26+ }

27+

28+ div.sigil {

29+ height: 24px;

30+ width: 24px;

31+ margin-right: 8px;

32+ border-radius: 2px;

33+ background: black;

34+

35+ div.sigil-container {

36+ height: 16px;

37+ width: 16px;

38+ padding: 4px;

39+

40+ svg {

41+

42+ }

43+ }

44+

45+ }

46+

47+ .patp {

48+ font-family: Source Code Pro;

49+ font-size: 14px;

50+ font-style: normal;

51+ font-weight: 500;

52+ line-height: 16px;

53+ letter-spacing: 0em;

54+ align-self: center;

55+ }

56+ }

57+ }

58+}

src/views/Ops/Residents.tsxnew file+81

@@ -0,0 +1,81 @@

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

2+import ob from 'urbit-ob';

3+import { Box, Row } from '@tlon/indigo-react';

4+

5+import Window from 'components/L2/Window/Window';

6+import HeaderPane from 'components/L2/Window/HeaderPane';

7+import BodyPane from 'components/L2/Window/BodyPane';

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

9+import View from 'components/View';

10+import L2BackHeader from 'components/L2/Headers/L2BackHeader';

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

12+import { useCallback, useEffect, useState } from 'react';

13+

14+import './Residents.scss';

15+import Sigil from 'components/Sigil';

16+import useRoller from 'lib/useRoller';

17+import { Ship } from '@urbit/roller-api';

18+

19+export const Residents = () => {

20+ const { pop }: any = useLocalRouter();

21+ const { pointCursor } = usePointCursor();

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

23+ const { api } = useRoller();

24+ const [sponsoredPoints, setSponsoredPoints] = useState<Ship[]>([]);

25+

26+ const fetchResidents = useCallback(async () => {

27+ if (!point) {

28+ return;

29+ }

30+

31+ // TODO: remove this hack once the API is updated

32+ const { residentes, residents } = await api.getSponsoredPoints(point);

33+

34+ setSponsoredPoints((residents || residentes || []).sort());

35+ }, [api, point]);

36+

37+ useEffect(() => {

38+ fetchResidents();

39+ }, [fetchResidents]);

40+

41+ return (

42+ <View

43+ className="ops-residents"

44+ pop={pop}

45+ inset

46+ hideBack

47+ header={<L2BackHeader hideBalance back={pop} />}>

48+ <Window>

49+ <HeaderPane>

50+ <Row className="header-row">

51+ <h5>

52+ Residents{' '}

53+ <span className="header-count">{sponsoredPoints.length}</span>

54+ </h5>

55+ </Row>

56+ </HeaderPane>

57+ <BodyPane>

58+ <Box className="content-container">

59+ <ul className="residents-list">

60+ {sponsoredPoints.map(sp => (

61+ <li>

62+ <Box className="sigil">

63+ <Box className="sigil-container">

64+ <Sigil

65+ icon

66+ patp={ob.patp(sp)}

67+ size={16}

68+ colors={['#000000', '#FFFFFF']}

69+ />

70+ </Box>

71+ </Box>

72+ <Box className={'patp'}>{ob.patp(sp)}</Box>

73+ </li>

74+ ))}

75+ </ul>

76+ </Box>

77+ </BodyPane>

78+ </Window>

79+ </View>

80+ );

81+};