git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/CancelTransfer.tsx
166 lines 4.8 kB history raw
1import React, { useCallback, useEffect } from 'react';
2import cn from 'classnames';
3import { Grid, Text, Button } from 'indigo-react';
4import * as azimuth from 'azimuth-js';
5import { Nothing } from 'folktale/maybe';
7import { useNetwork } from 'store/network';
8import { usePointCursor } from 'store/pointCursor';
9import { usePointCache } from 'store/pointCache';
10import { useRollerStore } from 'store/rollerStore';
12import * as need from 'lib/need';
13import { useLocalRouter } from 'lib/LocalRouter';
14import useCurrentPointName from 'lib/useCurrentPointName';
15import useEthereumTransaction from 'lib/useEthereumTransaction';
16import { ETH_ZERO_ADDR, GAS_LIMITS } from 'lib/constants';
17import useLifecycle from 'lib/useLifecycle';
18import useRoller from 'lib/useRoller';
19import { L1TxnType } from 'lib/types/PendingL1Transaction';
21import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
22import View from 'components/View';
23import Window from 'components/L2/Window/Window';
24import HeaderPane from 'components/L2/Window/HeaderPane';
25import BodyPane from 'components/L2/Window/BodyPane';
26import L2BackHeader from 'components/L2/Headers/L2BackHeader';
28function useCancelTransfer() {
29 const { contracts }: any = useNetwork();
30 const { pointCursor }: any = usePointCursor();
31 const { syncDetails }: any = usePointCache();
33 const _contracts = need.contracts(contracts);
34 const _point = need.point(pointCursor);
36 const { construct, ...rest } = useEthereumTransaction(
37 useCallback(
38 () =>
39 azimuth.ecliptic.setTransferProxy(_contracts, _point, ETH_ZERO_ADDR),
40 [_contracts, _point]
41 ),
42 useCallback(() => syncDetails(_point), [_point, syncDetails]),
43 GAS_LIMITS.SET_PROXY
44 );
46 useLifecycle(() => {
47 construct();
48 });
50 return {
51 ...rest,
52 };
55function AdminCancelTransfer() {
56 const { pop }: any = useLocalRouter();
57 const { getDetails }: any = usePointCache();
58 const { point } = useRollerStore();
59 const { setProxyAddress, checkForUpdates } = useRoller();
60 const { pointCursor, setPointCursor }: any = usePointCursor();
61 const _point = need.point(pointCursor);
63 const name = useCurrentPointName();
64 const _details = need.details(getDetails(_point));
66 const { completed, bind, txHashes } = useCancelTransfer();
68 useEffect(() => {
69 if (completed) {
70 checkForUpdates({
71 point: point,
72 message: `${point.patp} transfer cancelled`,
73 l1Txn: {
74 id: `cancel-${point.value}`,
75 point: point.value,
76 type: L1TxnType.cancelTransfer,
77 hash: txHashes[0],
78 time: new Date().getTime(),
79 },
80 });
81 }
82 }, [completed]); // eslint-disable-line react-hooks/exhaustive-deps
84 const goBack = useCallback(() => {
85 pop();
86 setPointCursor(Nothing());
87 }, [pop, setPointCursor]);
89 const cancelTransfer = useCallback(async () => {
90 await setProxyAddress('transfer', ETH_ZERO_ADDR);
91 await checkForUpdates({
92 point: point,
93 message: `${point.patp} transfer cancelled`,
94 });
95 goBack();
96 }, [setProxyAddress, goBack, checkForUpdates, point]);
98 const formattedName = <span className="mono">{name}</span>;
99 const formattedProxy = <span className="mono">{_details.transferProxy}</span>;
101 return (
102 <Window>
103 <HeaderPane>
104 <h5>Cancel Outgoing Transfer</h5>
105 </HeaderPane>
106 <BodyPane>
107 <Grid.Item
108 full
109 as={Text}
110 style={{ fontSize: 14 }}
111 className={cn('f5 wrap mb5', {
112 green3: completed,
113 })}>
114 {completed ? (
115 <>The outgoing transfer of {formattedName} has been cancelled.</>
116 ) : (
117 <>
118 Cancel the outgoing transfer of {formattedName} to{' '}
119 {formattedProxy}.
120 </>
121 )}
122 </Grid.Item>
124 {point.isL2 ? (
125 <Grid.Item
126 as={Button}
127 full
128 className="set-proxy mt4 w-full"
129 center
130 solid
131 onClick={cancelTransfer}>
132 {'Cancel'}
133 </Grid.Item>
134 ) : (
135 <Grid.Item
136 full
137 as={InlineEthereumTransaction}
138 {...bind}
139 onReturn={() => goBack()}
140 />
141 )}
142 </BodyPane>
143 </Window>
144 );
147export default function CancelTransfer() {
148 const { pop }: any = useLocalRouter();
149 const { setPointCursor }: any = usePointCursor();
150 const { point } = useRollerStore();
152 const goBack = useCallback(() => {
153 setPointCursor(Nothing());
154 pop();
155 }, [pop, setPointCursor]);
157 return (
158 <View
159 pop={pop}
160 className="cancel-transfer"
161 hideBack
162 header={<L2BackHeader hideBalance={point.isL2} back={goBack} />}>
163 <AdminCancelTransfer />
164 </View>
165 );