git.iko.soy/bridge
on 368f024 help sign in
bridge/src/views/UrbitID/SetProxy.js
309 lines 8.8 kB history raw
1import React, { useCallback, 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 { getDetails } = usePointCache();
128 const { pointCursor } = usePointCursor();
129 const { contracts } = useNetwork();
130 const {
131 point: { isL2, isL2Spawn },
132 } = useRollerStore();
133 const { setProxyAddress, getPendingTransactions } = useRoller();
134 const [newAddress, setNewAddress] = useState('');
136 const _point = need.point(pointCursor);
137 const _details = need.details(getDetails(_point));
138 const _contracts = need.contracts(contracts);
140 const properProxyType = capitalize(proxyTypeToHuman(data.proxyType));
142 const isL2Tx =
143 (data.proxyType === 'MANAGEMENT' && isL2) ||
144 (data.proxyType === 'SPAWN' && isL2Spawn) ||
145 (data.proxyType === 'TRANSFER' && isL2);
147 const {
148 construct,
149 unconstruct,
150 unset,
151 inputsLocked,
152 completed,
153 bind,
154 } = useSetProxy(data.proxyType);
156 const setProxy = useCallback(async () => {
157 // setLoading(true);
158 console.log(newAddress);
159 if (newAddress === '') return;
160 try {
161 await setProxyAddress(getL2ProxyName(data.proxyType), newAddress);
162 getPendingTransactions(_point);
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 ]);
178 const validateForm = useCallback((values, errors) => {
179 if (!values.unset && errors.address) {
180 return errors;
181 }
182 }, []);
184 const validate = useMemo(
185 () =>
186 composeValidator(
187 {
188 unset: buildCheckboxValidator(),
189 address: buildAddressValidator(),
190 },
191 validateForm
192 ),
193 [validateForm]
194 );
196 const onValues = useCallback(
197 ({ valid, values, form }) => {
198 if (valid) {
199 if (values.unset) {
200 unset();
201 form.change('address', '');
202 setNewAddress('');
203 } else {
204 construct(values.address);
205 setNewAddress(values.address);
206 }
207 } else {
208 unconstruct();
209 }
210 },
211 [construct, unconstruct, unset, setNewAddress]
212 );
214 const initialValues = useMemo(() => ({ unset: false }), []);
216 const proxyAddress = proxyFromDetails(_details, _contracts, data.proxyType);
217 const isProxySet = !isZeroAddress(proxyAddress);
219 const header = useMemo(() => {
220 const pfix = completed ? 'New' : 'Edit';
221 return `${pfix} ${properProxyType} Key`;
222 }, [completed, properProxyType]);
224 return (
225 <Window>
226 <HeaderPane>
227 <Row className="header-row">
228 <h5>{header}</h5>
229 </Row>
230 </HeaderPane>
231 <BodyPane>
232 <Grid style={{ width: '100%' }}>
233 {!completed && (
234 <>
235 <Grid.Item full as={Text} className="mb4 f5 gray4">
236 {proxyTypeToHumanDescription(data.proxyType)}
237 </Grid.Item>
238 <Grid.Item
239 full
240 as={Text}
241 className={cn('f6', {
242 green3: completed,
243 })}>
244 Current
245 </Grid.Item>
246 </>
247 )}
249 <BridgeForm
250 validate={validate}
251 onValues={onValues}
252 initialValues={initialValues}>
253 {({ handleSubmit, values }) => (
254 <>
255 <Grid.Item full as={Flex} row justify="between" align="center">
256 <Flex.Item
257 flex
258 as={Text}
259 className={cn('mono mv3 gray4', {
260 black: !completed && isProxySet,
261 gray4: !completed && !isProxySet,
262 green3: completed,
263 })}>
264 {isProxySet ? proxyAddress : 'Unset'}
265 </Flex.Item>
266 </Grid.Item>
268 {completed ? (
269 <Grid.Item full className="mb4" />
270 ) : (
271 <Grid.Item
272 full
273 as={AddressInput}
274 className="mv4"
275 name="address"
276 label={`New ${properProxyType} Address`}
277 disabled={inputsLocked || values.unset}
278 />
279 )}
281 <Grid.Item full as={FormError} />
283 {isL2Tx ? (
284 <Grid.Item
285 as={Button}
286 full
287 className="set-proxy"
288 center
289 solid
290 disabled={values.unset}
291 onClick={setProxy}>
292 {getButtonText(data.proxyType)}
293 </Grid.Item>
294 ) : (
295 <Grid.Item
296 full
297 as={InlineEthereumTransaction}
298 {...bind}
299 onReturn={() => pop()}
300 />
301 )}
302 </>
303 )}
304 </BridgeForm>
305 </Grid>
306 </BodyPane>
307 </Window>
308 );