git.iko.soy/bridge
on 2d3487f help sign in
bridge/src/views/UrbitID/SetProxy.js
290 lines 8.0 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/roller';
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';
36const getL2ProxyName = proxy =>
37 proxy === PROXY_TYPE.MANAGEMENT
38 ? 'manage'
39 : proxy === PROXY_TYPE.SPAWN
40 ? 'spawn'
41 : proxy === PROXY_TYPE.TRANSFER
42 ? 'transfer'
43 : '';
45const proxyFromDetails = (details, contracts, proxyType) => {
46 switch (proxyType) {
47 case PROXY_TYPE.MANAGEMENT:
48 return details.managementProxy;
49 case PROXY_TYPE.SPAWN:
50 return details.spawnProxy;
51 case PROXY_TYPE.TRANSFER:
52 return details.transferProxy;
53 case PROXY_TYPE.VOTING:
54 if (eqAddr(details.votingProxy, contracts.delegatedSending.address)) {
55 return `${details.votingProxy} (invites contract)`;
56 } else {
57 return details.votingProxy;
58 }
59 default:
60 throw new Error(`Unknown proxyType: ${proxyType}`);
61 }
62};
64function useSetProxy(proxyType) {
65 const { contracts } = useNetwork();
66 const { pointCursor } = usePointCursor();
67 const { syncDetails } = usePointCache();
69 const _contracts = need.contracts(contracts);
70 const _point = need.point(pointCursor);
72 const { construct, ...rest } = useEthereumTransaction(
73 useCallback(
74 address => {
75 const txArgs = [_contracts, _point, address];
77 switch (proxyType) {
78 case PROXY_TYPE.MANAGEMENT:
79 return azimuth.ecliptic.setManagementProxy(...txArgs);
80 case PROXY_TYPE.SPAWN:
81 return azimuth.ecliptic.setSpawnProxy(...txArgs);
82 case PROXY_TYPE.TRANSFER:
83 return azimuth.ecliptic.setTransferProxy(...txArgs);
84 case PROXY_TYPE.VOTING:
85 return azimuth.ecliptic.setVotingProxy(...txArgs);
86 default:
87 throw new Error(`Unknown proxyType ${proxyType}`);
88 }
89 },
90 [_contracts, _point, proxyType]
91 ),
92 useCallback(() => syncDetails(_point), [_point, syncDetails]),
93 GAS_LIMITS.SET_PROXY
94 );
96 // force-unset
97 const unset = useCallback(() => {
98 construct(ETH_ZERO_ADDR);
99 }, [construct]);
101 return {
102 construct,
103 unset,
104 ...rest,
105 };
108export default function SetProxy() {
109 const { data, pop } = useLocalRouter();
110 const { getDetails } = usePointCache();
111 const { pointCursor } = usePointCursor();
112 const { contracts } = useNetwork();
113 const { currentL2, currentL2Spawn } = useRollerStore();
114 const { setProxyAddress, getPendingTransactions } = useRoller();
115 const [newAddress, setNewAddress] = useState('');
117 const _point = need.point(pointCursor);
118 const _details = need.details(getDetails(_point));
119 const _contracts = need.contracts(contracts);
121 const properProxyType = capitalize(proxyTypeToHuman(data.proxyType));
123 const txType =
124 data.proxyType === 'MANAGEMENT' && (currentL2Spawn || !currentL2)
125 ? 'ETH_TX'
126 : data.proxyType === 'MANAGEMENT' && currentL2 && !currentL2Spawn
127 ? 'L2'
128 : data.proxyType === 'SPAWN' && currentL2
129 ? 'L2'
130 : 'ETH_TX';
132 const {
133 construct,
134 unconstruct,
135 unset,
136 inputsLocked,
137 completed,
138 bind,
139 } = useSetProxy(data.proxyType);
141 const setProxy = useCallback(async () => {
142 // setLoading(true);
143 console.log(newAddress);
144 if (newAddress === '') return;
145 try {
146 await setProxyAddress(getL2ProxyName(data.proxyType), newAddress);
147 getPendingTransactions(_point);
148 pop();
149 } catch (error) {
150 // setError(error);
151 } finally {
152 // setLoading(false);
153 }
154 }, [
155 newAddress,
156 getPendingTransactions,
157 _point,
158 pop,
159 data.proxyType,
160 setProxyAddress,
161 ]);
163 const validateForm = useCallback((values, errors) => {
164 console.log('hola');
165 if (!values.unset && errors.address) {
166 return errors;
167 }
168 }, []);
170 const validate = useMemo(
171 () =>
172 composeValidator(
173 {
174 unset: buildCheckboxValidator(),
175 address: buildAddressValidator(),
176 },
177 validateForm
178 ),
179 [validateForm]
180 );
182 const onValues = useCallback(
183 ({ valid, values, form }) => {
184 if (valid) {
185 if (values.unset) {
186 unset();
187 form.change('address', '');
188 setNewAddress('');
189 } else {
190 construct(values.address);
191 setNewAddress(values.address);
192 }
193 } else {
194 unconstruct();
195 }
196 },
197 [construct, unconstruct, unset, setNewAddress]
198 );
200 const initialValues = useMemo(() => ({ unset: false }), []);
202 const proxyAddress = proxyFromDetails(_details, _contracts, data.proxyType);
203 const isProxySet = !isZeroAddress(proxyAddress);
205 const header = useMemo(() => {
206 const pfix = completed ? 'New' : 'Edit';
207 return `${pfix} ${properProxyType} Key`;
208 }, [completed, properProxyType]);
210 return (
211 <Grid>
212 <Grid.Item full className="f5 mb2">
213 {header}
214 </Grid.Item>
216 {!completed && (
217 <>
218 <Grid.Item full as={Text} className="mb4 f5 gray4">
219 {proxyTypeToHumanDescription(data.proxyType)}
220 </Grid.Item>
221 <Grid.Item
222 full
223 as={Text}
224 className={cn('f6', {
225 green3: completed,
226 })}>
227 Current
228 </Grid.Item>
229 </>
230 )}
232 <BridgeForm
233 validate={validate}
234 onValues={onValues}
235 initialValues={initialValues}>
236 {({ handleSubmit, values }) => (
237 <>
238 <Grid.Item full as={Flex} row justify="between" align="center">
239 <Flex.Item
240 flex
241 as={Text}
242 className={cn('mono mv3 gray4', {
243 black: !completed && isProxySet,
244 gray4: !completed && !isProxySet,
245 green3: completed,
246 })}>
247 {isProxySet ? proxyAddress : 'Unset'}
248 </Flex.Item>
249 </Grid.Item>
251 {completed ? (
252 <Grid.Item full className="mb4" />
253 ) : (
254 <Grid.Item
255 full
256 as={AddressInput}
257 className="mv4"
258 name="address"
259 label={`New ${properProxyType} Address`}
260 disabled={inputsLocked || values.unset}
261 />
262 )}
264 <Grid.Item full as={FormError} />
266 {txType === 'L2' ? (
267 <Grid.Item
268 as={Button}
269 full
270 className="set-proxy"
271 center
272 solid
273 disabled={values.unset}
274 onClick={setProxy}>
275 {'Sign Transaction'}
276 </Grid.Item>
277 ) : (
278 <Grid.Item
279 full
280 as={InlineEthereumTransaction}
281 {...bind}
282 onReturn={() => pop()}
283 />
284 )}
285 </>
286 )}
287 </BridgeForm>
288 </Grid>
289 );