bd2bfea · bridge · git.iko.soy

src/components/L2/Points/IncomingPoint.scssnew file+47

compare with master

unifiedsplit

@@ -0,0 +1,47 @@

1+@import 'style/shared/variables.scss';

2+

3+.incoming-point {

4+ width: calc(100% - 18px);

5+ padding: 8px;

6+ border-radius: $large-border-radius;

7+ border: 1px solid $light-gray;

8+ margin-bottom: 16px;

9+ font-size: 14px;

10+

11+ .top {

12+ .title {

13+ font-weight: 600;

14+ }

15+ }

16+

17+ .top, .bottom {

18+ display: flex;

19+ flex-direction: row;

20+ justify-content: space-between;

21+ align-items: center;

22+ }

23+

24+ .bottom {

25+ margin-top: 4px;

26+ }

27+

28+ .button-row {

29+ display: flex;

30+ flex-direction: row;

31+ }

32+

33+ .accept, .reject {

34+ border-radius: $medium-border-radius;

35+ padding: 4px 10px;

36+ }

37+

38+ .accept {

39+ margin-right: 4px;

40+ color: white;

41+ background-color: $accept-green;

42+ }

43+

44+ .reject {

45+ background-color: $washedGray;

46+ }

47+}

src/components/L2/Points/IncomingPoint.tsxnew file+35

@@ -0,0 +1,35 @@

1+import React from 'react';

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

3+

4+import LayerIndicator from '../LayerIndicator';

5+import './IncomingPoint.scss';

6+

7+export interface IncomingPointProps {

8+ point: number;

9+ accept: () => void;

10+ reject: () => void;

11+}

12+

13+const IncomingPoint = ({ point, accept, reject }: IncomingPointProps) => {

14+ return (

15+ <div className="incoming-point" key={`incoming-${point}`}>

16+ <div className="top">

17+ <div className="title">Incoming Point: {ob.patp(point)}</div>

18+ <div className="button-row">

19+ <button className="accept" onClick={accept}>

20+ Accept

21+ </button>

22+ <button className="reject" onClick={reject}>

23+ Reject

24+ </button>

25+ </div>

26+ </div>

27+ <div className="bottom">

28+ <LayerIndicator layer={1} size="sm" />

29+ <div className="date"></div>

30+ </div>

31+ </div>

32+ );

33+};

34+

35+export default IncomingPoint;

src/style/shared/variables.scss+1

@@ -7,3 +7,4 @@ $light-gray: #d0d0d0;

7$mid-gray: rgba(0, 0, 0, 0.6);

8$dark-gray: rgba(102, 102, 102, 1);

9$rollup-yellow: rgba(255, 199, 0, 1);

10+$accept-green: rgba(0, 159, 101, 1);

src/views/Points.js+11−37

@@ -25,6 +25,7 @@ import { ForwardButton } from 'components/Buttons';

25import CopiableAddress from 'components/copiable/CopiableAddress';

26import NavHeader from 'components/NavHeader';

27import L2PointHeader from 'components/L2/Headers/L2PointHeader';

28+import IncomingPoint from 'components/L2/Points/IncomingPoint';

28

29

29const maybeGetResult = (obj, key, defaultValue) =>

30const maybeGetResult = (obj, key, defaultValue) =>

30 obj.matchWith({

31 obj.matchWith({

@@ -286,6 +287,16 @@ export default function Points() {

286 {abbreviateAddress(address)}

287 {abbreviateAddress(address)}

287 </CopiableAddress>

288 </CopiableAddress>

288 </NavHeader>

289 </NavHeader>

290+ {incomingPoints.map(point => (

291+ <IncomingPoint

292+ point={point}

293+ accept={() => {

294+ setPointCursor(Just(point));

295+ push(names.ACCEPT_TRANSFER);

296+ }}

297+ reject={() => addRejectedPoint(point)}

298+ />

299+ ))}

289 <Grid>

300 <Grid>

290 {displayEmptyState && (

301 {displayEmptyState && (

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

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

@@ -294,43 +305,6 @@ export default function Points() {

294 </Grid.Item>

305 </Grid.Item>

295 )}

306 )}

296

307

297− {incomingPoints.length > 0 && (

298− <Grid.Item full as={Grid} gap={1} className="mb6">

299− <Grid.Item full as={H5}>

300− {pluralize(

301− incomingPoints.length,

302− 'Incoming Transfer',

303− 'Incoming Transfers'

304− )}

305− </Grid.Item>

306− <Grid.Item

307− full

308− as={PointList}

309− points={incomingPoints}

310− actions={(point, i) => (

311− <ActionButtons

312− actions={[

313− {

314− text: 'Accept',

315− onClick: () => {

316− setPointCursor(Just(point));

317− push(names.ACCEPT_TRANSFER);

318− },

319− },

320− {

321− text: 'Reject',

322− onClick: () => {

323− addRejectedPoint(point);

324− },

325− },

326− ]}

327− />

328− )}

329− inverted

330− />

331− </Grid.Item>

332− )}

333−

334 {outgoingPoints.length > 0 && (

308 {outgoingPoints.length > 0 && (

335 <Grid.Item full as={Grid} gap={1} className="mb6">

309 <Grid.Item full as={Grid} gap={1} className="mb6">

336 <Grid.Item full as={H5}>

310 <Grid.Item full as={H5}>

src/views/Residents.js−1

@@ -163,7 +163,6 @@ export default function Residents() {

163 syncResidents(point);

164 }, [syncResidents, point]);

165

166− // TODO: move the requests to the Points page

167 const { residents, requests } = getResidents(point);

166 const { residents, requests } = getResidents(point);

168

167

169 const [currentTab, _setCurrentTab] = useState(NAMES.ALL);

168 const [currentTab, _setCurrentTab] = useState(NAMES.ALL);