git.iko.soy/bridge
on master help sign in
Updated IncomingPoints
commitbd2bfea35cc6ec5e4886eded2fbcced437399a37 authorWill Galebach <willbach@gmail.com> dateMon 30 Aug 2021, 22:42 (5 years ago) parentec040ad
5 files changed+94−38
compare with master
unifiedsplit
src/components/L2/Points/IncomingPoint.scss+47 src/components/L2/Points/IncomingPoint.tsx+35 src/style/shared/variables.scss+1 src/views/Points.js+11−37 src/views/Residents.js−1
src/components/L2/Points/IncomingPoint.scssnew file+47
@@ -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;
77$mid-gray: rgba(0, 0, 0, 0.6);
88$dark-gray: rgba(102, 102, 102, 1);
99$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';
2525import CopiableAddress from 'components/copiable/CopiableAddress';
2626import NavHeader from 'components/NavHeader';
2727import L2PointHeader from 'components/L2/Headers/L2PointHeader';
28+import IncomingPoint from 'components/L2/Points/IncomingPoint';
2829
2930const maybeGetResult = (obj, key, defaultValue) =>
3031 obj.matchWith({
@@ -286,6 +287,16 @@ export default function Points() {
286287 {abbreviateAddress(address)}
287288 </CopiableAddress>
288289 </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+ ))}
289300 <Grid>
290301 {displayEmptyState && (
291302 <Grid.Item full as={HelpText} className="mt8 t-center">
@@ -294,43 +305,6 @@ export default function Points() {
294305 </Grid.Item>
295306 )}
296307
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−
334308 {outgoingPoints.length > 0 && (
335309 <Grid.Item full as={Grid} gap={1} className="mb6">
336310 <Grid.Item full as={H5}>
src/views/Residents.js−1
@@ -163,7 +163,6 @@ export default function Residents() {
163163 syncResidents(point);
164164 }, [syncResidents, point]);
165165
166− // TODO: move the requests to the Points page
167166 const { residents, requests } = getResidents(point);
168167
169168 const [currentTab, _setCurrentTab] = useState(NAMES.ALL);