git.iko.soy/bridge
on ca31bdf help sign in
bridge/src/views/UrbitID/SetProxy.js
298 lines 8.6 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';
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};
68function useSetProxy(proxyType) {
69 const { contracts } = useNetwork();
70 const { pointCursor } = usePointCursor();
71 const { syncDetails } = usePointCache();
73 const _contracts = need.contracts(contracts);
74 const _point = need.point(pointCursor);
76 const { construct, ...rest } = useEthereumTransaction(
77 useCallback(
78 address => {
79 const txArgs = [_contracts, _point, address];
81 switch (proxyType) {
82 case PROXY_TYPE.MANAGEMENT:
83 return azimuth.ecliptic.setManagementProxy(...txArgs);
84 case PROXY_TYPE.SPAWN:
85 return azimuth.ecliptic.setSpawnProxy(...txArgs);
86 case PROXY_TYPE.TRANSFER:
87 return azimuth.ecliptic.setTransferProxy(...txArgs);
88 case PROXY_TYPE.VOTING:
89 return azimuth.ecliptic.setVotingProxy(...txArgs);
90 default:
91 throw new Error(`Unknown proxyType ${proxyType}`);
92 }
93 },
94 [_contracts, _point, proxyType]
95 ),
96 useCallback(() => syncDetails(_point), [_point, syncDetails]),
97 GAS_LIMITS.SET_PROXY
98 );
100 // force-unset
101 const unset = useCallback(() => {
102 construct(ETH_ZERO_ADDR);
103 }, [construct]);
105 return {
106 construct,
107 unset,
108 ...rest,
109 };
112export default function SetProxy() {
113 const { data, pop } = useLocalRouter();
114 const { getDetails } = usePointCache();
115 const { pointCursor } = usePointCursor();
116 const { contracts } = useNetwork();
117 const { currentL2, currentL2Spawn } = useRollerStore();
118 const { setProxyAddress, getPendingTransactions } = useRoller();
119 const [newAddress, setNewAddress] = useState('');
121 const _point = need.point(pointCursor);
122 const _details = need.details(getDetails(_point));
123 const _contracts = need.contracts(contracts);
125 const properProxyType = capitalize(proxyTypeToHuman(data.proxyType));
127 const txType =
128 data.proxyType === 'MANAGEMENT' && (currentL2Spawn || !currentL2)
129 ? 'ETH_TX'
130 : data.proxyType === 'MANAGEMENT' && currentL2 && !currentL2Spawn
131 ? 'L2'
132 : data.proxyType === 'SPAWN' && currentL2
133 ? 'L2'
134 : 'ETH_TX';
136 const {
137 construct,
138 unconstruct,
139 unset,
140 inputsLocked,
141 completed,
142 bind,
143 } = useSetProxy(data.proxyType);
145 const setProxy = useCallback(async () => {
146 // setLoading(true);
147 console.log(newAddress);
148 if (newAddress === '') return;
149 try {
150 await setProxyAddress(getL2ProxyName(data.proxyType), newAddress);
151 getPendingTransactions(_point);
152 pop();
153 } catch (error) {
154 // setError(error);
155 } finally {
156 // setLoading(false);
157 }
158 }, [
159 newAddress,
160 getPendingTransactions,
161 _point,
162 pop,
163 data.proxyType,
164 setProxyAddress,
165 ]);
167 const validateForm = useCallback((values, errors) => {
168 if (!values.unset && errors.address) {
169 return errors;
170 }
171 }, []);
173 const validate = useMemo(
174 () =>
175 composeValidator(
176 {
177 unset: buildCheckboxValidator(),
178 address: buildAddressValidator(),
179 },
180 validateForm
181 ),
182 [validateForm]
183 );
185 const onValues = useCallback(
186 ({ valid, values, form }) => {
187 if (valid) {
188 if (values.unset) {
189 unset();
190 form.change('address', '');
191 setNewAddress('');
192 } else {
193 construct(values.address);
194 setNewAddress(values.address);
195 }
196 } else {
197 unconstruct();
198 }
199 },
200 [construct, unconstruct, unset, setNewAddress]
201 );
203 const initialValues = useMemo(() => ({ unset: false }), []);
205 const proxyAddress = proxyFromDetails(_details, _contracts, data.proxyType);
206 const isProxySet = !isZeroAddress(proxyAddress);
208 const header = useMemo(() => {
209 const pfix = completed ? 'New' : 'Edit';
210 return `${pfix} ${properProxyType} Key`;
211 }, [completed, properProxyType]);
213 return (
214 <Window>
215 <HeaderPane>
216 <Row className="header-row">
217 <h5>{header}</h5>
218 </Row>
219 </HeaderPane>
220 <BodyPane>
221 <Grid style={{ width: '100%' }}>
222 {!completed && (
223 <>
224 <Grid.Item full as={Text} className="mb4 f5 gray4">
225 {proxyTypeToHumanDescription(data.proxyType)}
226 </Grid.Item>
227 <Grid.Item
228 full
229 as={Text}
230 className={cn('f6', {
231 green3: completed,
232 })}>
233 Current
234 </Grid.Item>
235 </>
236 )}
238 <BridgeForm
239 validate={validate}
240 onValues={onValues}
241 initialValues={initialValues}>
242 {({ handleSubmit, values }) => (
243 <>
244 <Grid.Item full as={Flex} row justify="between" align="center">
245 <Flex.Item
246 flex
247 as={Text}
248 className={cn('mono mv3 gray4', {
249 black: !completed && isProxySet,
250 gray4: !completed && !isProxySet,
251 green3: completed,
252 })}>
253 {isProxySet ? proxyAddress : 'Unset'}
254 </Flex.Item>
255 </Grid.Item>
257 {completed ? (
258 <Grid.Item full className="mb4" />
259 ) : (
260 <Grid.Item
261 full
262 as={AddressInput}
263 className="mv4"
264 name="address"
265 label={`New ${properProxyType} Address`}
266 disabled={inputsLocked || values.unset}
267 />
268 )}
270 <Grid.Item full as={FormError} />
272 {txType === 'L2' ? (
273 <Grid.Item
274 as={Button}
275 full
276 className="set-proxy"
277 center
278 solid
279 disabled={values.unset}
280 onClick={setProxy}>
281 {'Sign Transaction'}
282 </Grid.Item>
283 ) : (
284 <Grid.Item
285 full
286 as={InlineEthereumTransaction}
287 {...bind}
288 onReturn={() => pop()}
289 />
290 )}
291 </>
292 )}
293 </BridgeForm>
294 </Grid>
295 </BodyPane>
296 </Window>
297 );