git.iko.soy/bridge
on d2d22cf help sign in
bridge/src/views/UrbitID/SetProxy.js
289 lines 7.9 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 if (!values.unset && errors.address) {
165 return errors;
166 }
167 }, []);
169 const validate = useMemo(
170 () =>
171 composeValidator(
172 {
173 unset: buildCheckboxValidator(),
174 address: buildAddressValidator(),
175 },
176 validateForm
177 ),
178 [validateForm]
179 );
181 const onValues = useCallback(
182 ({ valid, values, form }) => {
183 if (valid) {
184 if (values.unset) {
185 unset();
186 form.change('address', '');
187 setNewAddress('');
188 } else {
189 construct(values.address);
190 setNewAddress(values.address);
191 }
192 } else {
193 unconstruct();
194 }
195 },
196 [construct, unconstruct, unset, setNewAddress]
197 );
199 const initialValues = useMemo(() => ({ unset: false }), []);
201 const proxyAddress = proxyFromDetails(_details, _contracts, data.proxyType);
202 const isProxySet = !isZeroAddress(proxyAddress);
204 const header = useMemo(() => {
205 const pfix = completed ? 'New' : 'Edit';
206 return `${pfix} ${properProxyType} Key`;
207 }, [completed, properProxyType]);
209 return (
210 <Grid>
211 <Grid.Item full className="f5 mb2">
212 {header}
213 </Grid.Item>
215 {!completed && (
216 <>
217 <Grid.Item full as={Text} className="mb4 f5 gray4">
218 {proxyTypeToHumanDescription(data.proxyType)}
219 </Grid.Item>
220 <Grid.Item
221 full
222 as={Text}
223 className={cn('f6', {
224 green3: completed,
225 })}>
226 Current
227 </Grid.Item>
228 </>
229 )}
231 <BridgeForm
232 validate={validate}
233 onValues={onValues}
234 initialValues={initialValues}>
235 {({ handleSubmit, values }) => (
236 <>
237 <Grid.Item full as={Flex} row justify="between" align="center">
238 <Flex.Item
239 flex
240 as={Text}
241 className={cn('mono mv3 gray4', {
242 black: !completed && isProxySet,
243 gray4: !completed && !isProxySet,
244 green3: completed,
245 })}>
246 {isProxySet ? proxyAddress : 'Unset'}
247 </Flex.Item>
248 </Grid.Item>
250 {completed ? (
251 <Grid.Item full className="mb4" />
252 ) : (
253 <Grid.Item
254 full
255 as={AddressInput}
256 className="mv4"
257 name="address"
258 label={`New ${properProxyType} Address`}
259 disabled={inputsLocked || values.unset}
260 />
261 )}
263 <Grid.Item full as={FormError} />
265 {txType === 'L2' ? (
266 <Grid.Item
267 as={Button}
268 full
269 className="set-proxy"
270 center
271 solid
272 disabled={values.unset}
273 onClick={setProxy}>
274 {'Sign Transaction'}
275 </Grid.Item>
276 ) : (
277 <Grid.Item
278 full
279 as={InlineEthereumTransaction}
280 {...bind}
281 onReturn={() => pop()}
282 />
283 )}
284 </>
285 )}
286 </BridgeForm>
287 </Grid>
288 );