git.iko.soy/bridge
on 4b0ca21 help sign in
bridge/src/views/UrbitID/SetProxy.js
227 lines 6.2 kB history raw
1import React, { useCallback, useMemo } from 'react';
2import cn from 'classnames';
3import { Grid, Text, Flex } from 'indigo-react';
4import * as azimuth from 'azimuth-js';
6import { useNetwork } from 'store/network';
7import { usePointCache } from 'store/pointCache';
8import { usePointCursor } from 'store/pointCursor';
10import {
11 PROXY_TYPE,
12 proxyTypeToHuman,
13 proxyTypeToHumanDescription,
14} from 'lib/proxy';
15import * as need from 'lib/need';
16import { useLocalRouter } from 'lib/LocalRouter';
17import { eqAddr, isZeroAddress } from 'lib/utils/address';
18import { capitalize } from 'lib/capitalize';
19import useEthereumTransaction from 'lib/useEthereumTransaction';
21import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
22import { ETH_ZERO_ADDR, GAS_LIMITS } from 'lib/constants';
23import { AddressInput } from 'form/Inputs';
24import {
25 composeValidator,
26 buildCheckboxValidator,
27 buildAddressValidator,
28} from 'form/validators';
29import BridgeForm from 'form/BridgeForm';
30import FormError from 'form/FormError';
32const proxyFromDetails = (details, contracts, proxyType) => {
33 switch (proxyType) {
34 case PROXY_TYPE.MANAGEMENT:
35 return details.managementProxy;
36 case PROXY_TYPE.SPAWN:
37 return details.spawnProxy;
38 case PROXY_TYPE.TRANSFER:
39 return details.transferProxy;
40 case PROXY_TYPE.VOTING:
41 if (eqAddr(details.votingProxy, contracts.delegatedSending.address)) {
42 return `${details.votingProxy} (invites contract)`;
43 } else {
44 return details.votingProxy;
45 }
46 default:
47 throw new Error(`Unknown proxyType: ${proxyType}`);
48 }
49};
51function useSetProxy(proxyType) {
52 const { contracts } = useNetwork();
53 const { pointCursor } = usePointCursor();
54 const { syncDetails } = usePointCache();
56 const _contracts = need.contracts(contracts);
57 const _point = need.point(pointCursor);
59 const { construct, ...rest } = useEthereumTransaction(
60 useCallback(
61 address => {
62 const txArgs = [_contracts, _point, address];
64 switch (proxyType) {
65 case PROXY_TYPE.MANAGEMENT:
66 return azimuth.ecliptic.setManagementProxy(...txArgs);
67 case PROXY_TYPE.SPAWN:
68 return azimuth.ecliptic.setSpawnProxy(...txArgs);
69 case PROXY_TYPE.TRANSFER:
70 return azimuth.ecliptic.setTransferProxy(...txArgs);
71 case PROXY_TYPE.VOTING:
72 return azimuth.ecliptic.setVotingProxy(...txArgs);
73 default:
74 throw new Error(`Unknown proxyType ${proxyType}`);
75 }
76 },
77 [_contracts, _point, proxyType]
78 ),
79 useCallback(() => syncDetails(_point), [_point, syncDetails]),
80 GAS_LIMITS.SET_PROXY
81 );
83 // force-unset
84 const unset = useCallback(() => {
85 construct(ETH_ZERO_ADDR);
86 }, [construct]);
88 return {
89 construct,
90 unset,
91 ...rest,
92 };
95export default function SetProxy() {
96 const { data, pop } = useLocalRouter();
97 const { getDetails } = usePointCache();
98 const { pointCursor } = usePointCursor();
99 const { contracts } = useNetwork();
101 const _point = need.point(pointCursor);
102 const _details = need.details(getDetails(_point));
103 const _contracts = need.contracts(contracts);
105 const properProxyType = capitalize(proxyTypeToHuman(data.proxyType));
107 const {
108 construct,
109 unconstruct,
110 unset,
111 inputsLocked,
112 completed,
113 bind,
114 } = useSetProxy(data.proxyType);
116 const validateForm = useCallback((values, errors) => {
117 if (!values.unset && errors.address) {
118 return errors;
119 }
120 }, []);
122 const validate = useMemo(
123 () =>
124 composeValidator(
125 {
126 unset: buildCheckboxValidator(),
127 address: buildAddressValidator(),
128 },
129 validateForm
130 ),
131 [validateForm]
132 );
134 const onValues = useCallback(
135 ({ valid, values, form }) => {
136 if (valid) {
137 if (values.unset) {
138 unset();
139 form.change('address', '');
140 } else {
141 construct(values.address);
142 }
143 } else {
144 unconstruct();
145 }
146 },
147 [construct, unconstruct, unset]
148 );
150 const initialValues = useMemo(() => ({ unset: false }), []);
152 const proxyAddress = proxyFromDetails(_details, _contracts, data.proxyType);
153 const isProxySet = !isZeroAddress(proxyAddress);
155 const header = useMemo(() => {
156 const pfix = completed ? 'New' : 'Edit';
157 return `${pfix} ${properProxyType} Key`;
158 }, [completed, properProxyType]);
160 return (
161 <Grid>
162 <Grid.Item full className="f5 mb2">
163 {header}
164 </Grid.Item>
166 {!completed && (
167 <>
168 <Grid.Item full as={Text} className="mb4 f5 gray4">
169 {proxyTypeToHumanDescription(data.proxyType)}
170 </Grid.Item>
171 <Grid.Item
172 full
173 as={Text}
174 className={cn('f6', {
175 green3: completed,
176 })}>
177 Current
178 </Grid.Item>
179 </>
180 )}
182 <BridgeForm
183 validate={validate}
184 onValues={onValues}
185 initialValues={initialValues}>
186 {({ handleSubmit, values }) => (
187 <>
188 <Grid.Item full as={Flex} row justify="between" align="center">
189 <Flex.Item
190 flex
191 as={Text}
192 className={cn('mono mv3 gray4', {
193 black: !completed && isProxySet,
194 gray4: !completed && !isProxySet,
195 green3: completed,
196 })}>
197 {isProxySet ? proxyAddress : 'Unset'}
198 </Flex.Item>
199 </Grid.Item>
201 {completed ? (
202 <Grid.Item full className="mb4" />
203 ) : (
204 <Grid.Item
205 full
206 as={AddressInput}
207 className="mv4"
208 name="address"
209 label={`New ${properProxyType} Address`}
210 disabled={inputsLocked || values.unset}
211 />
212 )}
214 <Grid.Item full as={FormError} />
216 <Grid.Item
217 full
218 as={InlineEthereumTransaction}
219 {...bind}
220 onReturn={() => pop()}
221 />
222 </>
223 )}
224 </BridgeForm>
225 </Grid>
226 );