@@ -1,254 +1,176 @@
1+import React, { useCallback, useEffect, useMemo, useState } from 'react';
1−import { Just, Nothing } from 'folktale/maybe';
2+import { Nothing, Just } from 'folktale/maybe';
2−import React from 'react';
3+import cn from 'classnames';
3−import { azimuth, ecliptic } from 'azimuth-js';
4+import { Grid, Text, Input } from 'indigo-react';
5+import * as azimuth from 'azimuth-js';
4import * as ob from 'urbit-ob';
6import * as ob from 'urbit-ob';
5−import * as need from '../lib/need';
16−} from '../components/old/Base';
18−import StatelessTransaction from '../components/old/StatelessTransaction';
20−import { NETWORK_TYPES } from '../lib/network';
21−import { getSpawnCandidate } from '../lib/child';
22−import { canDecodePatp } from '../lib/txn';
24−import { isValidAddress } from '../lib/wallet';
25−import { withNetwork } from '../store/network';
26−import { compose } from '../lib/lib';
27−import { withPointCursor } from '../store/pointCursor';
28−import View from 'components/View';
30−const setFind = (set, pred) => {
31− for (const e of set) {
39−class IssueChild extends React.Component {
43− const issuingPoint = need.point(props.pointCursor);
45− const getCandidate = () => ob.patp(getSpawnCandidate(issuingPoint));
47− const suggestions = [
55− receivingAddress: '',
56− issuingPoint: issuingPoint,
58− isAvailable: Nothing(), // use Nothing to allow attempt when offline
59− suggestions: suggestions,
60− validChildren: new Set(),
64− this.handlePointInput = this.handlePointInput.bind(this);
65− this.handleAddressInput = this.handleAddressInput.bind(this);
66− this.createUnsignedTxn = this.createUnsignedTxn.bind(this);
67− this.statelessRef = React.createRef();
70− handleAddressInput = receivingAddress => {
71− this.setState({ receivingAddress });
72− this.statelessRef.current.clearTxn();
75− componentWillMount() {
76− const { issuingPoint } = this.state;
78− const validContracts = need.contracts(this.props.contracts);
81− .getUnspawnedChildren(validContracts, parseInt(issuingPoint, 10))
82− .then(ps => this.setState({ validChildren: new Set(ps.map(ob.patp)) }));
85− handlePointInput(desiredPoint) {
86− if (desiredPoint.length < 15) {
87− const suggestedPoint =
88− setFind(this.state.validChildren, e => e.startsWith(desiredPoint)) ||
91− ' '.repeat(desiredPoint.length) +
92− suggestedPoint.substring(desiredPoint.length);
94− const available = Just(this.state.validChildren.has(desiredPoint));
98− isAvailable: available,
99− autoComplete: rendered,
101− this.statelessRef.current.clearTxn();
105− createUnsignedTxn() {
106− const { state, props } = this;
108− if (isValidAddress(state.receivingAddress) === false) return Nothing();
109− if (state.isAvailable === false) return Nothing();
110− if (canDecodePatp(state.desiredPoint) === false) return Nothing();
112− const validContracts = need.contracts(props.contracts);
114− const pointDec = ob.patp2dec(state.desiredPoint);
116− const txn = ecliptic.spawn(
8+import { useNetwork } from 'store/network';
117− validContracts,
9+import { useHistory } from 'store/history';
118− pointDec,
10+import { usePointCache } from 'store/pointCache';
119− state.receivingAddress
122− return Just(txn);
12+import * as need from 'lib/need';
123− }
13+import { useAddressInput, usePointInput } from 'lib/useInputs';
14+import useEthereumTransaction from 'lib/useEthereumTransaction';
15+import { GAS_LIMITS } from 'lib/constants';
16+import patp2dec from 'lib/patp2dec';
125− validatePoint = patp => {
18+import ViewHeader from 'components/ViewHeader';
126− const point = this.point;
19+import MiniBackButton from 'components/MiniBackButton';
127−
20+import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
128− let vpatp = false;
21+import View from 'components/View';
129− try {
22+import useLifecycle from 'lib/useLifecycle';
130− vpatp = ob.isValidPatp(patp);
23+import { usePointCursor } from 'store/pointCursor';
131− } catch (_) {}
24+import { validateInSet } from 'lib/validators';
132−
25+import { getSpawnCandidate } from 'lib/child';
135− vchild = ob.sein(patp) === ob.patp(point);
138− return vpatp && vchild;
27+function useIssueChild() {
139− };
28+ const { contracts } = useNetwork();
29+ const { syncKnownPoint } = usePointCache();
141− render() {
31+ const _contracts = need.contracts(contracts);
142− const { props, state } = this;
144− const validAddress = isValidAddress(state.receivingAddress);
33+ const [spawnedPoint, setSpawnedPoint] = useState();
146− const canGenerate = props.web3.matchWith({
35+ return useEthereumTransaction(
147− Nothing: () => {
36+ useCallback(
148− return validAddress === true;
37+ (spawnedPoint, owner) => {
149− },
38+ setSpawnedPoint(spawnedPoint);
150− Just: () => {
39+ return azimuth.ecliptic.spawn(_contracts, spawnedPoint, owner);
151− return validAddress === true && state.isAvailable.value === true;
155− const esvisible =
43+ useCallback(() => syncKnownPoint(spawnedPoint), [
156− props.networkType === NETWORK_TYPES.ROPSTEN ||
44+ spawnedPoint,
157− props.networkType === NETWORK_TYPES.MAINNET;
45+ syncKnownPoint,
159− const esdomain =
47+ GAS_LIMITS.DEFAULT
160− props.networkType === NETWORK_TYPES.ROPSTEN
161− ? 'ropsten.etherscan.io'
167− {'Issue a Child From '}{' '}
168− <code>{`${ob.patp(state.issuingPoint)}`}</code>
172− {`Please enter the point you would like to issue, and specify the
173− receiving Ethereum address. If you need to create an address, you
174− can also use Wallet Generator.`}
178− {`Your point can only issue children with particular names. Some
179− valid suggestions for `}
180− {<code>{ob.patp(state.issuingPoint)}</code>}
182− <code>{state.suggestions[0]}</code>
184− <code>{state.suggestions[1]}</code>
186− <code>{state.suggestions[2]}</code>
192− prop-format="innerLabel"
193− className={'mono mt-8'}
194− placeholder={`e.g. ${state.suggestions[3]}`}
195− value={state.desiredPoint}
196− onChange={this.handlePointInput}>
197− <InnerLabel>{'Point to Issue'}</InnerLabel>
200− marginTop: '8.8rem',
201− marginLeft: '4.6rem',
204− whiteSpace: 'pre-wrap',
206− className="abs tl-0 mono">
207− {state.autoComplete}
210− className={'tr-0 mt-05 mr-0 abs'}
211− patp={state.desiredPoint}
214− validator={() => this.validatePoint(state.desiredPoint)}
219− className="text-mono mt-8"
221− prop-format="innerLabel"
222− placeholder={`e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f`}
223− value={state.receivingAddress}
225− Nothing.hasInstance(state.isAvailable) || !state.isAvailable.value
227− onChange={v => this.handleAddressInput(v)}>
228− <InnerLabel>{'Receiving Address'}</InnerLabel>
229− <ShowBlockie className={'mt-1'} address={state.receivingAddress} />
235− prop-disabled={!isValidAddress(state.receivingAddress) || !esvisible}
237− href={`https://${esdomain}/address/${state.receivingAddress}`}>
238− {'View on Etherscan ↗'}
241− <StatelessTransaction
242− canGenerate={canGenerate}
243− createUnsignedTxn={this.createUnsignedTxn}
244− ref={this.statelessRef}
251−export default compose(
51+export default function IssueChild() {
252− withNetwork,
52+ const { pop } = useHistory();
253− withPointCursor
53+ const { contracts } = useNetwork();
254−)(IssueChild);
54+ const { pointCursor } = usePointCursor();
56+ const _contracts = need.contracts(contracts);
57+ const _point = need.point(pointCursor);
59+ const [availablePointNames, setAvailablePointNames] = useState(Nothing());
61+ const candidates = useMemo(() => {
62+ const getCandidate = () => ob.patp(getSpawnCandidate(_point));
64+ return [getCandidate(), getCandidate(), getCandidate(), getCandidate()];
76+ const validators = useMemo(
79+ availablePointNames.getOrElse(new Set()),
80+ 'This point cannot be spawned.'
83+ [availablePointNames]
87+ { pass: validPointName, value: pointName },
88+ // ^ we use value: here so our effect runs onChange
91+ disabled: inputsLocked,
94+ error: availablePointNames.matchWith({
95+ Nothing: () => 'Loading availability...',
96+ Just: () => undefined,
100+ const [ownerInput, { pass: validOwner, data: owner }] = useAddressInput({
102+ label: `Ethereum Address`,
103+ disabled: inputsLocked,
107+ if (validPointName && validOwner) {
108+ construct(patp2dec(pointName), owner);
112+ }, [owner, construct, unconstruct, validPointName, validOwner, pointName]);
114+ useLifecycle(() => {
118+ const availablePoints = await azimuth.azimuth.getUnspawnedChildren(
127+ setAvailablePointNames(Just(new Set(availablePoints.map(ob.patp))));
130+ return () => (mounted = false);
136+ <Grid.Item full as={MiniBackButton} onClick={() => pop()} />
138+ <Grid.Item full as={ViewHeader}>
142+ {isDefaultState && (
143+ <Grid.Item full as={Text}>
144+ Perhaps one of {candidates.slice(0, 3).join(', ')}, or{' '}
145+ {candidates[candidates.length - 1]}?
153+ className={cn('f5', {
156+ {pointName} has been spawned and can be claimed by {owner}.
162+ <Grid.Item full as={Input} {...pointNameInput} className="mt4" />
163+ <Grid.Item full as={Input} {...ownerInput} className="mb4" />
169+ as={InlineEthereumTransaction}
171+ onReturn={() => pop()}