git.iko.soy/bridge
on master help sign in
star-ops-ux: Spawn view enhancements

- refactor using Indigo components - shuffle suggested point names - click point to populate name field - click Address button to populate ownership field

commit1c7537c440cee0de56c0760176653132d8ee8114 authortomholford <tomholford@users.noreply.github.com> dateMon 15 Nov 2021, 17:28 (5 years ago) parent81aa3a5
5 files changed+366−197
compare with master
unifiedsplit
src/views/Point/AddressButton.tsx+29 src/views/Point/IssueChild.js−197 src/views/Point/IssueChild.scss+59 src/views/Point/IssueChild.tsx+251 src/views/Point/PatpBadge.tsx+27
src/views/Point/AddressButton.tsxnew file+29
@@ -0,0 +1,29 @@
1+import * as need from 'lib/need';
2+import { Button, ButtonProps } from '@tlon/indigo-react';
3+import { useCallback } from 'react';
4+import { useForm } from 'react-final-form';
5+import { useWallet } from 'store/wallet';
6+
7+interface AddressButtonProps {
8+ children?: React.ReactNode;
9+ rest?: ButtonProps;
10+}
11+
12+export const AddressButton = ({ children, ...rest }: AddressButtonProps) => {
13+ const { change } = useForm();
14+ const { wallet }: any = useWallet();
15+ const address = need.addressFromWallet(wallet);
16+
17+ const onClick = useCallback(
18+ (_event: React.MouseEvent<HTMLSpanElement>) => {
19+ change('owner', address);
20+ },
21+ [address, change]
22+ );
23+
24+ return (
25+ <Button onClick={onClick} {...rest} className={'secondary'}>
26+ {children}
27+ </Button>
28+ );
29+};
src/views/Point/IssueChild.jsdeleted−197
@@ -1,197 +0,0 @@
1−import React, { useCallback, useMemo, useState } from 'react';
2−import cn from 'classnames';
3−import { Grid, Text } from 'indigo-react';
4−import * as azimuth from 'azimuth-js';
5−import ob from 'urbit-ob';
6−
7−import { useNetwork } from 'store/network';
8−import { usePointCache } from 'store/pointCache';
9−import { usePointCursor } from 'store/pointCursor';
10−
11−import * as need from 'lib/need';
12−import useEthereumTransaction from 'lib/useEthereumTransaction';
13−import { GAS_LIMITS } from 'lib/constants';
14−import { patp2dec } from 'lib/patp2dec';
15−import { getSpawnCandidate } from 'lib/child';
16−import { useLocalRouter } from 'lib/LocalRouter';
17−import useConstant from 'lib/useConstant';
18−import { validateChild } from 'lib/validators';
19−
20−import ViewHeader from 'components/ViewHeader';
21−import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
22−import View from 'components/View';
23−import { PointInput, AddressInput } from 'form/Inputs';
24−import {
25− composeValidator,
26− buildPointValidator,
27− buildAddressValidator,
28− hasErrors,
29−} from 'form/validators';
30−import BridgeForm from 'form/BridgeForm';
31−import FormError from 'form/FormError';
32−import CopiableAddress from 'components/copiable/CopiableAddress';
33−import { convertToInt } from 'lib/convertToInt';
34−import useCurrentPermissions from 'lib/useCurrentPermissions';
35−
36−export function useIssueChild() {
37− const { contracts } = useNetwork();
38− const { syncDates } = usePointCache();
39−
40− const _contracts = need.contracts(contracts);
41−
42− const [spawnedPoint, setSpawnedPoint] = useState();
43−
44− return useEthereumTransaction(
45− useCallback(
46− (spawnedPoint, owner) => {
47− setSpawnedPoint(spawnedPoint);
48− return azimuth.ecliptic.spawn(_contracts, spawnedPoint, owner);
49− },
50− [_contracts]
51− ),
52− useCallback(() => syncDates(spawnedPoint), [spawnedPoint, syncDates]),
53− GAS_LIMITS.DEFAULT
54− );
55−}
56−
57−export default function IssueChild() {
58− const { pop } = useLocalRouter();
59− const { contracts } = useNetwork();
60− const { pointCursor } = usePointCursor();
61−
62− const _contracts = need.contracts(contracts);
63− const _point = convertToInt(need.point(pointCursor), 10);
64−
65− const availablePointsPromise = useConstant(() =>
66− azimuth.azimuth
67− .getUnspawnedChildren(_contracts, _point)
68− .then(points => new Set(points))
69− );
70−
71− const candidates = useMemo(() => {
72− const getCandidate = () => ob.patp(getSpawnCandidate(_point));
73−
74− return [getCandidate(), getCandidate(), getCandidate(), getCandidate()];
75− }, [_point]);
76−
77− const {
78− isDefaultState,
79− construct,
80− unconstruct,
81− completed,
82− inputsLocked,
83− bind,
84− } = useIssueChild();
85−
86− const validateFormAsync = useCallback(
87− async values => {
88− const point = patp2dec(values.point);
89− const hasPoint = (await availablePointsPromise).has(point);
90−
91− if (!hasPoint) {
92− return { point: 'This point cannot be spawned.' };
93− }
94− },
95− [availablePointsPromise]
96− );
97−
98− const validateForm = useCallback(
99− (values, errors) => {
100− if (hasErrors(errors)) {
101− return errors;
102− }
103−
104− return validateFormAsync(values, errors);
105− },
106− [validateFormAsync]
107− );
108−
109− const validate = useMemo(
110− () =>
111− composeValidator(
112− {
113− point: buildPointValidator(4, [validateChild(ob.patp(_point))]),
114− owner: buildAddressValidator(),
115− },
116− validateForm
117− ),
118− [_point, validateForm]
119− );
120−
121− const onValues = useCallback(
122− ({ valid, values }) => {
123− if (valid) {
124− construct(patp2dec(values.point), values.owner);
125− } else {
126− unconstruct();
127− }
128− },
129− [construct, unconstruct]
130− );
131−
132− const { isStar } = useCurrentPermissions();
133−
134− return (
135− <View pop={pop} inset>
136− <Grid>
137− <Grid.Item full as={ViewHeader}>
138− Spawn {isStar ? ' Planets' : ' Stars'}
139− </Grid.Item>
140−
141− {isDefaultState && (
142− <Grid.Item full as={Text}>
143− Perhaps one of {candidates.slice(0, 3).join(', ')}, or{' '}
144− {candidates[candidates.length - 1]}?
145− </Grid.Item>
146− )}
147−
148− <BridgeForm validate={validate} onValues={onValues}>
149− {({ handleSubmit, values }) => (
150− <>
151− {completed && (
152− <Grid.Item
153− full
154− as={Text}
155− className={cn('f5 wrap', {
156− green3: completed,
157− })}>
158− {values.point} has been spawned and can be claimed by{' '}
159− <CopiableAddress>{values.owner}</CopiableAddress>.
160− </Grid.Item>
161− )}
162−
163− {!completed && (
164− <>
165− <Grid.Item
166− full
167− as={PointInput}
168− name="point"
169− disabled={inputsLocked}
170− className="mt4"
171− />
172− <Grid.Item
173− full
174− as={AddressInput}
175− className="mb4"
176− name="owner"
177− label="Ethereum Address"
178− disabled={inputsLocked}
179− />
180− </>
181− )}
182−
183− <Grid.Item full as={FormError} />
184−
185− <Grid.Item
186− full
187− as={InlineEthereumTransaction}
188− {...bind}
189− onReturn={() => pop()}
190− />
191− </>
192− )}
193− </BridgeForm>
194− </Grid>
195− </View>
196− );
197−}
src/views/Point/IssueChild.scssnew file+59
@@ -0,0 +1,59 @@
1+.id-issue-child {
2+ div.body-pane {
3+ div.inner-container {
4+ width: 100%;
5+ }
6+ }
7+
8+ .input-label {
9+ font-family: Inter;
10+ font-size: 14px;
11+ font-style: normal;
12+ font-weight: 500;
13+ line-height: 16px;
14+ letter-spacing: 0em;
15+ text-align: left;
16+ color: rgba(0, 0, 0, 1);
17+ }
18+
19+ .input-hint {
20+ font-family: Inter;
21+ font-size: 14px;
22+ font-style: normal;
23+ font-weight: 500;
24+ line-height: 16px;
25+ letter-spacing: 0em;
26+ text-align: left;
27+ color: rgba(0, 0, 0, 0.6);
28+ }
29+
30+ .patp-badge-container {
31+ width: 100%;
32+ margin-top: 4px;
33+ margin-bottom: 16px;
34+ display: flex;
35+ flex-flow: row nowrap;
36+ justify-content: space-between;
37+
38+ .badges {
39+ .patp-badge {
40+ padding: 4px;
41+ font-family: Source Code Pro;
42+ font-size: 14px;
43+ font-style: normal;
44+ font-weight: 500;
45+ line-height: 16px;
46+ letter-spacing: 0em;
47+ text-align: center;
48+ background: rgba(0, 0, 0, 0.04);
49+ color: rgba(0, 0, 0, 1);
50+ margin-right: 8px;
51+ cursor: pointer;
52+ }
53+ }
54+
55+ .shuffle {
56+ cursor: pointer;
57+ }
58+ }
59+}
src/views/Point/IssueChild.tsxnew file+251
@@ -0,0 +1,251 @@
1+import React, { useCallback, useEffect, useMemo, useState } from 'react';
2+import cn from 'classnames';
3+import { Grid } from 'indigo-react';
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+
8+import * as azimuth from 'azimuth-js';
9+import ob from 'urbit-ob';
10+
11+import { useNetwork } from 'store/network';
12+import { usePointCache } from 'store/pointCache';
13+import { usePointCursor } from 'store/pointCursor';
14+
15+import * as need from 'lib/need';
16+import useEthereumTransaction from 'lib/useEthereumTransaction';
17+import { GAS_LIMITS } from 'lib/constants';
18+import { patp2dec } from 'lib/patp2dec';
19+import { getSpawnCandidate } from 'lib/child';
20+import { useLocalRouter } from 'lib/LocalRouter';
21+import { validateChild } from 'lib/validators';
22+
23+import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
24+import View from 'components/View';
25+import { PointInput, AddressInput } from 'form/Inputs';
26+import {
27+ composeValidator,
28+ buildPointValidator,
29+ buildAddressValidator,
30+ hasErrors,
31+} from 'form/validators';
32+import BridgeForm from 'form/BridgeForm';
33+import FormError from 'form/FormError';
34+import CopiableAddress from 'components/copiable/CopiableAddress';
35+import { convertToInt } from 'lib/convertToInt';
36+import { Box, Icon, Row, Text } from '@tlon/indigo-react';
37+import { isGalaxy } from 'lib/utils/point';
38+import L2BackHeader from 'components/L2/Headers/L2BackHeader';
39+
40+import './IssueChild.scss';
41+import { PatpBadge } from './PatpBadge';
42+import useRoller from 'lib/useRoller';
43+import { AddressButton } from './AddressButton';
44+
45+export function useIssueChild() {
46+ const { contracts } = useNetwork();
47+ const { syncDates } = usePointCache();
48+
49+ const _contracts = need.contracts(contracts);
50+
51+ const [spawnedPoint, setSpawnedPoint] = useState();
52+
53+ return useEthereumTransaction(
54+ useCallback(
55+ (spawnedPoint, owner) => {
56+ setSpawnedPoint(spawnedPoint);
57+ return azimuth.ecliptic.spawn(_contracts, spawnedPoint, owner);
58+ },
59+ [_contracts]
60+ ),
61+ useCallback(() => syncDates(spawnedPoint), [spawnedPoint, syncDates]),
62+ GAS_LIMITS.DEFAULT
63+ );
64+}
65+
66+export default function IssueChild() {
67+ const { pop } = useLocalRouter();
68+ const { api } = useRoller();
69+ const { pointCursor } = usePointCursor();
70+
71+ const _point = convertToInt(need.point(pointCursor), 10);
72+ const [availablePoints, setAvailablePoints] = useState<Set<number> | null>(
73+ null
74+ );
75+ const [candidates, setCandidates] = useState<string[]>([]);
76+
77+ const fetchAvailablePoints = useCallback(async () => {
78+ const available = await api.getUnspawned(_point);
79+ setAvailablePoints(new Set(available));
80+ }, [_point, api]);
81+
82+ const shuffle = useCallback(() => {
83+ const newCandidates = Array.from({ length: 3 }, () => {
84+ return ob.patp(getSpawnCandidate(_point));
85+ });
86+
87+ setCandidates(newCandidates);
88+ }, [_point]);
89+
90+ const handleShuffleClick = useCallback(() => {
91+ shuffle();
92+ }, [shuffle]);
93+
94+ useEffect(() => {
95+ // load the availablePoints for validation
96+ fetchAvailablePoints();
97+ // set the candidates
98+ shuffle();
99+ }, [fetchAvailablePoints, shuffle]);
100+
101+ const {
102+ isDefaultState,
103+ construct,
104+ unconstruct,
105+ completed,
106+ inputsLocked,
107+ bind,
108+ } = useIssueChild();
109+
110+ const validateFormAsync = useCallback(
111+ async values => {
112+ const point = patp2dec(values.point);
113+ const hasPoint = availablePoints && availablePoints.has(point);
114+
115+ if (!hasPoint) {
116+ return { point: 'This point cannot be spawned.' };
117+ }
118+ },
119+ [availablePoints]
120+ );
121+
122+ const validateForm = useCallback(
123+ (values, errors) => {
124+ if (hasErrors(errors)) {
125+ return errors;
126+ }
127+
128+ return validateFormAsync(values, errors);
129+ },
130+ [validateFormAsync]
131+ );
132+
133+ const validate = useMemo(
134+ () =>
135+ composeValidator(
136+ {
137+ point: buildPointValidator(4, [validateChild(ob.patp(_point))]),
138+ owner: buildAddressValidator(),
139+ },
140+ validateForm
141+ ),
142+ [_point, validateForm]
143+ );
144+
145+ const onValues = useCallback(
146+ ({ valid, values }) => {
147+ if (valid) {
148+ construct(patp2dec(values.point), values.owner);
149+ } else {
150+ unconstruct();
151+ }
152+ },
153+ [construct, unconstruct]
154+ );
155+
156+ return (
157+ <View
158+ pop={pop}
159+ hideBack
160+ inset
161+ header={<L2BackHeader hideBalance={false} back={pop} />}>
162+ <Window className="id-issue-child">
163+ <HeaderPane>
164+ <Row>
165+ <h5>Spawn {isGalaxy(_point) ? 'Star' : 'Planet'}</h5>
166+ </Row>
167+ </HeaderPane>
168+ <BodyPane>
169+ <Box className="inner-container">
170+ <BridgeForm
171+ style={{ width: '100%' }}
172+ validate={validate}
173+ onValues={onValues}>
174+ {({ handleSubmit, values }) => (
175+ <>
176+ {completed && (
177+ <Grid.Item
178+ full
179+ as={Text}
180+ className={cn('f5 wrap', {
181+ green3: completed,
182+ })}>
183+ {values.point} has been spawned and can be claimed by{' '}
184+ <CopiableAddress>{values.owner}</CopiableAddress>.
185+ </Grid.Item>
186+ )}
187+
188+ {!completed && (
189+ <>
190+ <Grid.Item
191+ full
192+ as={PointInput}
193+ name="point"
194+ disabled={inputsLocked}
195+ className="mt4"
196+ />
197+
198+ {isDefaultState && candidates.length > 0 && (
199+ <>
200+ <Text className={'input-hint'}>Perhaps:</Text>
201+ <Row>
202+ <Box className={'patp-badge-container'}>
203+ <Box className="badges">
204+ {candidates.map(p => (
205+ <PatpBadge className={'patp-badge'}>
206+ {p}
207+ </PatpBadge>
208+ ))}
209+ </Box>
210+ <Box className="shuffle">
211+ <Icon
212+ size={16}
213+ icon="ArrowRefresh"
214+ onClick={handleShuffleClick}></Icon>
215+ </Box>
216+ </Box>
217+ </Row>
218+ </>
219+ )}
220+
221+ <Grid.Item
222+ full
223+ as={AddressInput}
224+ className="mb4"
225+ name="owner"
226+ label="Ethereum Address"
227+ disabled={inputsLocked}
228+ />
229+ <Box>
230+ <AddressButton>Use my address</AddressButton>
231+ </Box>
232+ </>
233+ )}
234+
235+ <Grid.Item full as={FormError} />
236+
237+ <Grid.Item
238+ full
239+ as={InlineEthereumTransaction}
240+ {...bind}
241+ onReturn={() => pop()}
242+ />
243+ </>
244+ )}
245+ </BridgeForm>
246+ </Box>
247+ </BodyPane>
248+ </Window>
249+ </View>
250+ );
251+}
src/views/Point/PatpBadge.tsxnew file+27
@@ -0,0 +1,27 @@
1+import { Badge, TextProps } from '@tlon/indigo-react';
2+import { useCallback } from 'react';
3+import { useForm } from 'react-final-form';
4+
5+interface PatpBadgeProps {
6+ children?: React.ReactNode;
7+ className?: string;
8+ rest?: TextProps;
9+}
10+
11+export const PatpBadge = ({ children, className, ...rest }: PatpBadgeProps) => {
12+ const { change } = useForm();
13+
14+ const onClick = useCallback(
15+ (event: React.MouseEvent<HTMLSpanElement>) => {
16+ const patp = event.currentTarget.innerText;
17+ change('point', patp);
18+ },
19+ [change]
20+ );
21+
22+ return (
23+ <Badge onClick={onClick} {...rest} className={className}>
24+ {children}
25+ </Badge>
26+ );
27+};