git.iko.soy/bridge
on e94ff4f help sign in
bridge/src/views/CreateGalaxy.js
161 lines 4.2 kB history raw
1import React, { useCallback, useEffect, useState } from 'react';
2import { Nothing, Just } from 'folktale/maybe';
3import cn from 'classnames';
4import { Grid, Text, Input } from 'indigo-react';
5import * as azimuth from 'azimuth-js';
7import { useNetwork } from 'store/network';
8import { useHistory } from 'store/history';
9import { usePointCache } from 'store/pointCache';
11import * as need from 'lib/need';
12import { useAddressInput, useGalaxyInput } from 'lib/useInputs';
13import useEthereumTransaction from 'lib/useEthereumTransaction';
14import { GAS_LIMITS } from 'lib/constants';
15import patp2dec from 'lib/patp2dec';
17import ViewHeader from 'components/ViewHeader';
18import MiniBackButton from 'components/MiniBackButton';
19import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
20import View from 'components/View';
21import { isZeroAddress } from 'lib/wallet';
23function useCreateGalaxy() {
24 const { contracts } = useNetwork();
25 const { syncKnownPoint } = usePointCache();
27 const _contracts = need.contracts(contracts);
29 const [galaxy, setGalaxy] = useState();
31 return useEthereumTransaction(
32 useCallback(
33 (galaxy, owner) => {
34 setGalaxy(galaxy);
35 return azimuth.ecliptic.createGalaxy(_contracts, galaxy, owner);
36 },
37 [_contracts]
38 ),
39 useCallback(() => syncKnownPoint(galaxy), [galaxy, syncKnownPoint]),
40 GAS_LIMITS.DEFAULT
41 );
44export default function CreateGalaxy() {
45 const { pop } = useHistory();
46 const { contracts } = useNetwork();
47 const _contracts = need.contracts(contracts);
49 const [error, setError] = useState();
50 const [isAvailable, setIsAvailable] = useState(Nothing());
52 const {
53 construct,
54 unconstruct,
55 completed,
56 inputsLocked,
57 bind,
58 } = useCreateGalaxy();
60 const [
61 galaxyNameInput,
62 { pass: validGalaxyName, syncPass: syncValidGalaxyName, value: galaxyName },
63 // ^ we use value: here so our effect runs onChange
64 ] = useGalaxyInput({
65 disabled: inputsLocked,
66 autoFocus: true,
67 error:
68 error ||
69 isAvailable.matchWith({
70 Nothing: () => 'Loading availabiliy...', // TODO: make async loading?
71 Just: p => (p.value ? undefined : 'This galaxy is already owned.'),
72 }),
73 });
75 const [ownerInput, { pass: validOwner, data: owner }] = useAddressInput({
76 name: 'owner',
77 label: `Ethereum Address`,
78 disabled: inputsLocked,
79 });
81 useEffect(() => {
82 if (validGalaxyName && validOwner) {
83 construct(patp2dec(galaxyName), owner);
84 } else {
85 unconstruct();
86 }
87 }, [owner, construct, unconstruct, validGalaxyName, validOwner, galaxyName]);
89 useEffect(() => {
90 if (!syncValidGalaxyName || inputsLocked) {
91 return;
92 }
94 setError();
95 setIsAvailable(Nothing());
97 let cancelled = false;
99 (async () => {
100 try {
101 const currentOwner = await azimuth.azimuth.getOwner(
102 _contracts,
103 patp2dec(galaxyName)
104 );
106 const isAvailable = isZeroAddress(currentOwner);
108 if (cancelled) {
109 return;
110 }
112 setIsAvailable(Just(isAvailable));
113 } catch (error) {
114 console.error(error);
115 setError(error.message);
116 setIsAvailable(Just(false));
117 }
118 })();
120 return () => (cancelled = true);
121 }, [
122 _contracts,
123 galaxyName,
124 inputsLocked,
125 setIsAvailable,
126 syncValidGalaxyName,
127 ]);
129 return (
130 <View inset>
131 <Grid>
132 <Grid.Item full as={MiniBackButton} onClick={() => pop()} />
134 <Grid.Item full as={ViewHeader}>
135 Create a Galaxy
136 </Grid.Item>
138 {completed && (
139 <Grid.Item
140 full
141 as={Text}
142 className={cn('f5', {
143 green3: completed,
144 })}>
145 {galaxyName} has been created and is owned by {owner}.
146 </Grid.Item>
147 )}
149 <Grid.Item full as={Input} {...galaxyNameInput} className="mt4" />
150 <Grid.Item full as={Input} {...ownerInput} className="mb4" />
152 <Grid.Item
153 full
154 as={InlineEthereumTransaction}
155 {...bind}
156 onReturn={() => pop()}
157 />
158 </Grid>
159 </View>
160 );