@@ -1,11 +1,14 @@
1−import React, { useCallback, useMemo } from 'react';
1+import React, { useCallback, useMemo, useState } from 'react';
22import cn from 'classnames';
3−import { Grid, Text, Flex } from 'indigo-react';
3+import { Grid, Text, Flex, Button } from 'indigo-react';
44import * as azimuth from 'azimuth-js';
55
6+import './SetProxy.scss';
7+
68import { useNetwork } from 'store/network';
79import { usePointCache } from 'store/pointCache';
810import { usePointCursor } from 'store/pointCursor';
11+import { useRollerStore } from 'store/roller';
912
1013import {
1114 PROXY_TYPE,
@@ -17,6 +20,7 @@ import { useLocalRouter } from 'lib/LocalRouter';
1720import { eqAddr, isZeroAddress } from 'lib/utils/address';
1821import { capitalize } from 'lib/capitalize';
1922import useEthereumTransaction from 'lib/useEthereumTransaction';
23+import useRoller from 'lib/useRoller';
2024
2125import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
2226import { ETH_ZERO_ADDR, GAS_LIMITS } from 'lib/constants';
@@ -29,6 +33,15 @@ import {
2933import BridgeForm from 'form/BridgeForm';
3034import FormError from 'form/FormError';
3135
36+const getL2ProxyName = proxy =>
37+ proxy === PROXY_TYPE.MANAGEMENT
38+ ? 'manage'
39+ : proxy === PROXY_TYPE.SPAWN
40+ ? 'spawn'
41+ : proxy === PROXY_TYPE.TRANSFER
42+ ? 'transfer'
43+ : '';
44+
3245const proxyFromDetails = (details, contracts, proxyType) => {
3346 switch (proxyType) {
3447 case PROXY_TYPE.MANAGEMENT:
@@ -97,6 +110,9 @@ export default function SetProxy() {
97110 const { getDetails } = usePointCache();
98111 const { pointCursor } = usePointCursor();
99112 const { contracts } = useNetwork();
113+ const { currentL2 } = useRollerStore();
114+ const { setProxyAddress, getPendingTransactions } = useRoller();
115+ const [newAddress, setNewAddress] = useState('');
100116
101117 const _point = need.point(pointCursor);
102118 const _details = need.details(getDetails(_point));
@@ -113,7 +129,30 @@ export default function SetProxy() {
113129 bind,
114130 } = useSetProxy(data.proxyType);
115131
132+ const setProxy = useCallback(async () => {
133+ // setLoading(true);
134+ console.log(newAddress);
135+ if (newAddress === '') return;
136+ try {
137+ await setProxyAddress(getL2ProxyName(data.proxyType), newAddress);
138+ getPendingTransactions(_point);
139+ pop();
140+ } catch (error) {
141+ // setError(error);
142+ } finally {
143+ // setLoading(false);
144+ }
145+ }, [
146+ newAddress,
147+ getPendingTransactions,
148+ _point,
149+ pop,
150+ data.proxyType,
151+ setProxyAddress,
152+ ]);
153+
116154 const validateForm = useCallback((values, errors) => {
155+ console.log('hola');
117156 if (!values.unset && errors.address) {
118157 return errors;
119158 }
@@ -133,18 +172,21 @@ export default function SetProxy() {
133172
134173 const onValues = useCallback(
135174 ({ valid, values, form }) => {
175+ console.log('currentL2', currentL2);
136176 if (valid) {
137177 if (values.unset) {
138178 unset();
139179 form.change('address', '');
180+ setNewAddress('');
140181 } else {
141182 construct(values.address);
183+ setNewAddress(values.address);
142184 }
143185 } else {
144186 unconstruct();
145187 }
146188 },
147− [construct, unconstruct, unset]
189+ [construct, unconstruct, unset, setNewAddress, currentL2]
148190 );
149191
150192 const initialValues = useMemo(() => ({ unset: false }), []);
@@ -213,12 +255,25 @@ export default function SetProxy() {
213255
214256 <Grid.Item full as={FormError} />
215257
216− <Grid.Item
217− full
218− as={InlineEthereumTransaction}
219− {...bind}
220− onReturn={() => pop()}
221− />
258+ {currentL2 ? (
259+ <Grid.Item
260+ as={Button}
261+ full
262+ className="set-proxy"
263+ center
264+ solid
265+ disabled={values.unset}
266+ onClick={setProxy}>
267+ {'Sign Transaction'}
268+ </Grid.Item>
269+ ) : (
270+ <Grid.Item
271+ full
272+ as={InlineEthereumTransaction}
273+ {...bind}
274+ onReturn={() => pop()}
275+ />
276+ )}
222277 </>
223278 )}
224279 </BridgeForm>