git.iko.soy/bridge
on master help sign in
bridge/src/views/CreateGalaxy.jsx
166 lines 4.3 kB history raw
1import React, { useCallback, useMemo, useState } from 'react';
2import cn from 'classnames';
3import { Grid, Text } from 'indigo-react';
4import * as azimuth from 'azimuth-js';
6import { useNetwork } from 'store/network';
7import { usePointCache } from 'store/pointCache';
9import * as need from 'lib/need';
10import useEthereumTransaction from 'lib/useEthereumTransaction';
11import { GAS_LIMITS } from 'lib/constants';
12import { patp2dec } from 'lib/patp2dec';
13import { isZeroAddress } from 'lib/utils/address';
14import { useLocalRouter } from 'lib/LocalRouter';
16import ViewHeader from 'components/ViewHeader';
17import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
18import View from 'components/View';
19import BridgeForm from 'form/BridgeForm';
20import { PointInput, AddressInput } from 'form/Inputs';
21import {
22 composeValidator,
23 buildPointValidator,
24 buildAddressValidator,
25 hasErrors,
26} from 'form/validators';
27import FormError from 'form/FormError';
28import CopiableAddress from 'components/copiable/CopiableAddress';
30function useCreateGalaxy() {
31 const { contracts } = useNetwork();
32 const { syncDates } = usePointCache();
34 const _contracts = need.contracts(contracts);
36 const [galaxy, setGalaxy] = useState();
38 return useEthereumTransaction(
39 useCallback(
40 (galaxy, owner) => {
41 setGalaxy(galaxy);
42 return azimuth.ecliptic.createGalaxy(_contracts, galaxy, owner);
43 },
44 [_contracts]
45 ),
46 useCallback(() => syncDates(galaxy), [galaxy, syncDates]),
47 GAS_LIMITS.DEFAULT
48 );
51export default function CreateGalaxy() {
52 const { pop } = useLocalRouter();
53 const { contracts } = useNetwork();
54 const _contracts = need.contracts(contracts);
56 const {
57 construct,
58 unconstruct,
59 completed,
60 inputsLocked,
61 bind,
62 } = useCreateGalaxy();
64 const validateFormAsync = useCallback(
65 async values => {
66 const currentOwner = await azimuth.azimuth.getOwner(
67 _contracts,
68 patp2dec(values.galaxyName)
69 );
71 const isAvailable = isZeroAddress(currentOwner);
72 if (!isAvailable) {
73 return { galaxyName: 'This galaxy is already spawned and owned.' };
74 }
75 },
76 [_contracts]
77 );
79 const validateForm = useCallback(
80 (values, errors) => {
81 if (hasErrors(errors)) {
82 return errors;
83 }
85 return validateFormAsync(values, errors);
86 },
87 [validateFormAsync]
88 );
90 const validate = useMemo(
91 () =>
92 composeValidator(
93 {
94 galaxyName: buildPointValidator(1),
95 owner: buildAddressValidator(),
96 },
97 validateForm
98 ),
99 [validateForm]
100 );
102 const onValues = useCallback(
103 ({ valid, values }) => {
104 if (valid) {
105 construct(patp2dec(values.galaxyName), values.owner);
106 } else {
107 unconstruct();
108 }
109 },
110 [construct, unconstruct]
111 );
113 return (
114 <View pop={pop} inset>
115 <Grid>
116 <Grid.Item full as={ViewHeader}>
117 Create a Galaxy
118 </Grid.Item>
120 <BridgeForm validate={validate} onValues={onValues}>
121 {({ handleSubmit, values }) => (
122 <>
123 {completed && (
124 <Grid.Item
125 full
126 as={Text}
127 className={cn('f5 wrap', {
128 green3: completed,
129 })}>
130 {values.galaxyName} has been created and can be claimed by{' '}
131 <CopiableAddress>{values.owner}</CopiableAddress>.
132 </Grid.Item>
133 )}
135 <Grid.Item
136 full
137 as={PointInput}
138 className="mt4"
139 name="galaxyName"
140 label="Galaxy Name"
141 disabled={inputsLocked}
142 />
143 <Grid.Item
144 full
145 as={AddressInput}
146 className="mb4"
147 name="owner"
148 label="Ethereum Address"
149 disabled={inputsLocked}
150 />
152 <Grid.Item full as={FormError} />
154 <Grid.Item
155 full
156 as={InlineEthereumTransaction}
157 {...bind}
158 onReturn={() => pop()}
159 />
160 </>
161 )}
162 </BridgeForm>
163 </Grid>
164 </View>
165 );