git.iko.soy/bridge
on bb22285 help sign in
bridge/src/views/UrbitID/SetProxy.js
319 lines 8.9 kB history raw
1import React, { useCallback, useEffect, useMemo, useState } from 'react';
2import cn from 'classnames';
3import { Grid, Text, Flex, Button } from 'indigo-react';
4import * as azimuth from 'azimuth-js';
6import './SetProxy.scss';
8import { useNetwork } from 'store/network';
9import { usePointCache } from 'store/pointCache';
10import { usePointCursor } from 'store/pointCursor';
11import { useRollerStore } from 'store/rollerStore';
13import {
14 PROXY_TYPE,
15 proxyTypeToHuman,
16 proxyTypeToHumanDescription,
17} from 'lib/proxy';
18import * as need from 'lib/need';
19import { useLocalRouter } from 'lib/LocalRouter';
20import { eqAddr, isZeroAddress } from 'lib/utils/address';
21import { capitalize } from 'lib/capitalize';
22import useEthereumTransaction from 'lib/useEthereumTransaction';
23import useRoller from 'lib/useRoller';
25import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
26import { ETH_ZERO_ADDR, GAS_LIMITS } from 'lib/constants';
27import { AddressInput } from 'form/Inputs';
28import {
29 composeValidator,
30 buildCheckboxValidator,
31 buildAddressValidator,
32} from 'form/validators';
33import BridgeForm from 'form/BridgeForm';
34import FormError from 'form/FormError';
35import Window from 'components/L2/Window/Window';
36import HeaderPane from 'components/L2/Window/HeaderPane';
37import BodyPane from 'components/L2/Window/BodyPane';
38import { Row } from '@tlon/indigo-react';
40const getL2ProxyName = proxy =>
41 proxy === PROXY_TYPE.MANAGEMENT
42 ? 'manage'
43 : proxy === PROXY_TYPE.SPAWN
44 ? 'spawn'
45 : proxy === PROXY_TYPE.TRANSFER
46 ? 'transfer'
47 : '';
49const proxyFromDetails = (details, contracts, proxyType) => {
50 switch (proxyType) {
51 case PROXY_TYPE.MANAGEMENT:
52 return details.managementProxy;
53 case PROXY_TYPE.SPAWN:
54 return details.spawnProxy;
55 case PROXY_TYPE.TRANSFER:
56 return details.transferProxy;
57 case PROXY_TYPE.VOTING:
58 if (eqAddr(details.votingProxy, contracts.delegatedSending.address)) {
59 return `${details.votingProxy} (invites contract)`;
60 } else {
61 return details.votingProxy;
62 }
63 default:
64 throw new Error(`Unknown proxyType: ${proxyType}`);
65 }
66};
68const getButtonText = proxyType => {
69 switch (proxyType) {
70 case PROXY_TYPE.MANAGEMENT:
71 return 'Set Management Proxy';
72 case PROXY_TYPE.SPAWN:
73 return 'Set Spawn Proxy';
74 case PROXY_TYPE.TRANSFER:
75 return 'Set Transfer Proxy';
76 default:
77 return 'Set Management Proxy';
78 }
79};
81function useSetProxy(proxyType) {
82 const { contracts } = useNetwork();
83 const { pointCursor } = usePointCursor();
84 const { syncDetails } = usePointCache();
86 const _contracts = need.contracts(contracts);
87 const _point = need.point(pointCursor);
89 const { construct, ...rest } = useEthereumTransaction(
90 useCallback(
91 address => {
92 const txArgs = [_contracts, _point, address];
94 switch (proxyType) {
95 case PROXY_TYPE.MANAGEMENT:
96 return azimuth.ecliptic.setManagementProxy(...txArgs);
97 case PROXY_TYPE.SPAWN:
98 return azimuth.ecliptic.setSpawnProxy(...txArgs);
99 case PROXY_TYPE.TRANSFER:
100 return azimuth.ecliptic.setTransferProxy(...txArgs);
101 case PROXY_TYPE.VOTING:
102 return azimuth.ecliptic.setVotingProxy(...txArgs);
103 default:
104 throw new Error(`Unknown proxyType ${proxyType}`);
105 }
106 },
107 [_contracts, _point, proxyType]
108 ),
109 useCallback(() => syncDetails(_point), [_point, syncDetails]),
110 GAS_LIMITS.SET_PROXY
111 );
113 // force-unset
114 const unset = useCallback(() => {
115 construct(ETH_ZERO_ADDR);
116 }, [construct]);
118 return {
119 construct,
120 unset,
121 ...rest,
122 };
125export default function SetProxy() {
126 const { data, pop } = useLocalRouter();
127 const { contracts } = useNetwork();
128 const { point, setLoading } = useRollerStore();
129 const {
130 setProxyAddress,
131 getPendingTransactions,
132 checkForUpdates,
133 } = useRoller();
134 const [newAddress, setNewAddress] = useState('');
136 const _contracts = need.contracts(contracts);
138 const humanProxyType = proxyTypeToHuman(data.proxyType);
139 const properProxyType = capitalize(humanProxyType);
141 const { isL2, isL2Spawn } = point;
143 const isL2Tx =
144 (data.proxyType === 'MANAGEMENT' && isL2) ||
145 (data.proxyType === 'SPAWN' && isL2Spawn) ||
146 (data.proxyType === 'TRANSFER' && isL2);
148 const {
149 construct,
150 unconstruct,
151 unset,
152 inputsLocked,
153 completed,
154 bind,
155 } = useSetProxy(data.proxyType);
157 const setProxy = useCallback(async () => {
158 setLoading(true);
159 if (newAddress === '') return;
160 try {
161 await setProxyAddress(getL2ProxyName(data.proxyType), newAddress);
162 getPendingTransactions(point.value);
163 pop();
164 } catch (error) {
165 // setError(error);
166 } finally {
167 setLoading(false);
168 }
169 }, [
170 newAddress,
171 getPendingTransactions,
172 point,
173 pop,
174 data.proxyType,
175 setProxyAddress,
176 setLoading,
177 ]);
179 useEffect(() => {
180 if (completed) {
181 checkForUpdates(
182 point.value,
183 `${point.patp}'s ${humanProxyType} proxy has been set!`
184 );
185 }
186 }, [completed]); // eslint-disable-line react-hooks/exhaustive-deps
188 const validateForm = useCallback((values, errors) => {
189 if (!values.unset && errors.address) {
190 return errors;
191 }
192 }, []);
194 const validate = useMemo(
195 () =>
196 composeValidator(
197 {
198 unset: buildCheckboxValidator(),
199 address: buildAddressValidator(),
200 },
201 validateForm
202 ),
203 [validateForm]
204 );
206 const onValues = useCallback(
207 ({ valid, values, form }) => {
208 if (valid) {
209 if (values.unset) {
210 unset();
211 form.change('address', '');
212 setNewAddress('');
213 } else {
214 construct(values.address);
215 setNewAddress(values.address);
216 }
217 } else {
218 unconstruct();
219 }
220 },
221 [construct, unconstruct, unset, setNewAddress]
222 );
224 const initialValues = useMemo(() => ({ unset: false }), []);
226 const proxyAddress = proxyFromDetails(point, _contracts, data.proxyType);
227 const isProxySet = !isZeroAddress(proxyAddress);
229 const header = useMemo(() => {
230 const pfix = completed ? 'New' : 'Edit';
231 return `${pfix} ${properProxyType} Key`;
232 }, [completed, properProxyType]);
234 return (
235 <Window>
236 <HeaderPane>
237 <Row className="header-row">
238 <h5>{header}</h5>
239 </Row>
240 </HeaderPane>
241 <BodyPane>
242 <Grid className="w-full">
243 {!completed && (
244 <>
245 <Grid.Item full as={Text} className="mb4 f5 gray4">
246 {proxyTypeToHumanDescription(data.proxyType)}
247 </Grid.Item>
248 <Grid.Item
249 full
250 as={Text}
251 className={cn('f6', {
252 green3: completed,
253 })}>
254 Current
255 </Grid.Item>
256 </>
257 )}
259 <BridgeForm
260 validate={validate}
261 onValues={onValues}
262 initialValues={initialValues}>
263 {({ handleSubmit, values }) => (
264 <>
265 <Grid.Item full as={Flex} row justify="between" align="center">
266 <Flex.Item
267 flex
268 as={Text}
269 className={cn('mono mv3 gray4', {
270 black: !completed && isProxySet,
271 gray4: !completed && !isProxySet,
272 green3: completed,
273 })}>
274 {isProxySet ? proxyAddress : 'Unset'}
275 </Flex.Item>
276 </Grid.Item>
278 {completed ? (
279 <Grid.Item full className="mb4" />
280 ) : (
281 <Grid.Item
282 full
283 as={AddressInput}
284 className="mv4"
285 name="address"
286 label={`New ${properProxyType} Address`}
287 disabled={inputsLocked || values.unset}
288 />
289 )}
291 <Grid.Item full as={FormError} />
293 {isL2Tx ? (
294 <Grid.Item
295 as={Button}
296 full
297 className="set-proxy"
298 center
299 solid
300 disabled={values.unset}
301 onClick={setProxy}>
302 {getButtonText(data.proxyType)}
303 </Grid.Item>
304 ) : (
305 <Grid.Item
306 full
307 as={InlineEthereumTransaction}
308 {...bind}
309 onReturn={() => pop()}
310 />
311 )}
312 </>
313 )}
314 </BridgeForm>
315 </Grid>
316 </BodyPane>
317 </Window>
318 );