on abbbcbc help sign in
bridge/src/views/Admin/AdminSetProxy.js
199 lines 5.7 kB history raw
1import React, { useCallback, useEffect, useState } from 'react';
2import cn from 'classnames';
3import { Grid, Text, Input, Flex, LinkButton } 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 { ETH_ZERO_ADDR, eqAddr } from 'lib/wallet';
18import capitalize from 'lib/capitalize';
19import { useAddressInput } from 'lib/useInputs';
20import useEthereumTransaction from 'lib/useEthereumTransaction';
22import ViewHeader from 'components/ViewHeader';
23import MiniBackButton from 'components/MiniBackButton';
24import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
25import { GAS_LIMITS } from 'lib/constants';
27const proxyFromDetails = (details, contracts, proxyType) => {
28 switch (proxyType) {
29 case PROXY_TYPE.MANAGEMENT:
30 return details.managementProxy;
31 case PROXY_TYPE.SPAWN:
32 return details.spawnProxy;
33 case PROXY_TYPE.TRANSFER:
34 return details.transferProxy;
35 case PROXY_TYPE.VOTING:
36 if (eqAddr(details.votingProxy, contracts.delegatedSending.address)) {
37 return `${details.votingProxy} (invites contract)`;
38 } else {
39 return details.votingProxy;
40 }
41 default:
42 throw new Error(`Unknown proxyType: ${proxyType}`);
43 }
44};
46function useSetProxy(proxyType) {
47 const { contracts } = useNetwork();
48 const { pointCursor } = usePointCursor();
49 const { syncOwnedPoint } = usePointCache();
51 const _contracts = need.contracts(contracts);
52 const _point = need.point(pointCursor);
54 const [isUnsetting, setUnsetting] = useState(false);
56 const buildUnsignedTx = useCallback(
57 address => {
58 const txArgs = [_contracts, _point, address];
60 switch (proxyType) {
61 case PROXY_TYPE.MANAGEMENT:
62 return azimuth.ecliptic.setManagementProxy(...txArgs);
63 case PROXY_TYPE.SPAWN:
64 return azimuth.ecliptic.setSpawnProxy(...txArgs);
65 case PROXY_TYPE.TRANSFER:
66 return azimuth.ecliptic.setTransferProxy(...txArgs);
67 case PROXY_TYPE.VOTING:
68 return azimuth.ecliptic.setVotingProxy(...txArgs);
69 default:
70 throw new Error(`Unknown proxyType ${proxyType}`);
71 }
72 },
73 [_contracts, _point, proxyType]
74 );
76 const {
77 construct: _construct,
78 confirmed,
79 inputsLocked,
80 bind,
81 } = useEthereumTransaction(GAS_LIMITS.SET_PROXY);
83 // sync point details after success
84 useEffect(() => {
85 if (confirmed) {
86 syncOwnedPoint(_point);
87 }
88 }, [_point, confirmed, syncOwnedPoint]);
90 // construct the unsigned transaction when we have a valid address
91 const construct = useCallback(
92 address => _construct(buildUnsignedTx(address)),
93 [_construct, buildUnsignedTx]
94 );
96 // force-unset
97 const unset = useCallback(() => {
98 setUnsetting(true);
99 _construct(buildUnsignedTx(ETH_ZERO_ADDR));
100 }, [_construct, buildUnsignedTx]);
102 return {
103 construct,
104 confirmed,
105 unset,
106 isUnsetting,
107 inputsLocked: inputsLocked || isUnsetting,
108 bind,
109 };
112export default function AdminSetProxy() {
113 const { data, pop } = useLocalRouter();
114 const { getDetails } = usePointCache();
115 const { pointCursor } = usePointCursor();
116 const { contracts } = useNetwork();
118 const _point = need.point(pointCursor);
119 const _details = need.details(getDetails(_point));
120 const _contracts = need.contracts(contracts);
122 const properProxyType = capitalize(proxyTypeToHuman(data.proxyType));
124 const { construct, unset, inputsLocked, confirmed, bind } = useSetProxy(
125 data.proxyType
126 );
127 const [addressInput, { pass, data: address }] = useAddressInput({
128 name: 'address',
129 label: `New ${properProxyType} Address`,
130 disabled: inputsLocked,
131 });
133 useEffect(() => {
134 if (pass) {
135 construct(address);
136 }
137 }, [pass, address, construct]);
139 const proxyAddress = proxyFromDetails(_details, _contracts, data.proxyType);
140 const isProxySet = !eqAddr(ETH_ZERO_ADDR, proxyAddress);
142 const proxyAddressLabel = `${
143 confirmed ? 'New' : 'Current'
144 } ${properProxyType} Address`;
146 return (
147 <Grid>
148 <Grid.Item full as={MiniBackButton} onClick={() => pop()} />
150 <Grid.Item full as={ViewHeader}>
151 {properProxyType} Address
152 </Grid.Item>
154 <Grid.Item full as={Text} className="mb4 f5">
155 {proxyTypeToHumanDescription(data.proxyType)}
156 </Grid.Item>
158 <Grid.Item
159 full
160 as={Text}
161 className={cn('f6 mb1', {
162 green3: confirmed,
163 })}>
164 {proxyAddressLabel}
165 </Grid.Item>
167 <Grid.Item full as={Flex} row justify="between" align="center">
168 <Flex.Item
169 flex
170 as={Text}
171 className={cn('mono', {
172 black: !confirmed && isProxySet,
173 gray4: !confirmed && !isProxySet,
174 green3: confirmed,
175 })}>
176 {isProxySet ? proxyAddress : 'Unset'}
177 </Flex.Item>
178 {!confirmed && isProxySet && (
179 <Flex.Item as={LinkButton} onClick={unset} disabled={inputsLocked}>
180 Unset
181 </Flex.Item>
182 )}
183 </Grid.Item>
185 {confirmed ? (
186 <Grid.Item full className="mb4" />
187 ) : (
188 <Grid.Item full as={Input} {...addressInput} className="mv4" />
189 )}
191 <Grid.Item
192 full
193 as={InlineEthereumTransaction}
194 {...bind}
195 onReturn={() => pop()}
196 />
197 </Grid>
198 );