git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/AcceptTransfer.tsx
206 lines 5.9 kB history raw
1import React, {
2 useCallback,
3 useEffect,
4 useMemo,
5 useRef,
6 useState,
7} from 'react';
8import cn from 'classnames';
9import { Nothing } from 'folktale/maybe';
10import { Grid, Text, CheckboxInput, Button } from 'indigo-react';
11import * as azimuth from 'azimuth-js';
13import { useNetwork } from 'store/network';
14import { usePointCursor } from 'store/pointCursor';
15import { usePointCache } from 'store/pointCache';
16import { useWallet } from 'store/wallet';
18import * as need from 'lib/need';
19import useCurrentPointName from 'lib/useCurrentPointName';
20import useEthereumTransaction from 'lib/useEthereumTransaction';
21import { GAS_LIMITS } from 'lib/constants';
22import { useLocalRouter } from 'lib/LocalRouter';
23import { L1TxnType } from 'lib/types/PendingL1Transaction';
25import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
26import View from 'components/View';
27import Window from 'components/L2/Window/Window';
28import HeaderPane from 'components/L2/Window/HeaderPane';
29import BodyPane from 'components/L2/Window/BodyPane';
30import L2BackHeader from 'components/L2/Headers/L2BackHeader';
32import BridgeForm from 'form/BridgeForm';
33import { composeValidator, buildCheckboxValidator } from 'form/validators';
34import { Row } from '@tlon/indigo-react';
35import { useRollerStore } from 'store/rollerStore';
36import useRoller from 'lib/useRoller';
38function useAcceptTransfer() {
39 const { contracts }: any = useNetwork();
40 const { pointCursor }: any = usePointCursor();
41 const { syncExtras, syncControlledPoints }: any = usePointCache();
42 const { wallet }: any = useWallet();
44 const _contracts = need.contracts(contracts);
45 const _point = need.point(pointCursor);
46 const _address = need.addressFromWallet(wallet);
48 const transaction = useEthereumTransaction(
49 useCallback(
50 (reset: boolean) =>
51 azimuth.ecliptic.transferPoint(_contracts, _point, _address, reset),
52 [_contracts, _point, _address]
53 ),
54 useCallback(
55 () => Promise.all([syncExtras(_point), syncControlledPoints()]),
56 // eslint-disable-next-line react-hooks/exhaustive-deps
57 [_point]
58 ),
59 GAS_LIMITS.TRANSFER
60 );
62 return {
63 ...transaction,
64 };
67export default function AcceptTransfer() {
68 const { pop }: any = useLocalRouter();
69 const { setPointCursor }: any = usePointCursor();
70 const { point } = useRollerStore();
71 const { transferPoint, checkForUpdates } = useRoller();
73 const { wallet }: any = useWallet();
74 const _address = need.addressFromWallet(wallet);
76 const name = useCurrentPointName();
78 const transferring = useRef(false);
79 const [reset, setReset] = useState(true);
81 const {
82 completed,
83 bind,
84 inputsLocked,
85 construct,
86 txHashes,
87 } = useAcceptTransfer();
89 useEffect(() => {
90 // Update this one
91 if (completed) {
92 checkForUpdates({
93 point: point,
94 message: `${point.patp} has been transferred to you!`,
95 l1Txn: {
96 id: `accept-transfer-${point.value}`,
97 point: point.value,
98 type: L1TxnType.cancelTransfer,
99 hash: txHashes[0],
100 time: new Date().getTime(),
101 },
102 });
103 }
104 }, [completed]); // eslint-disable-line react-hooks/exhaustive-deps
106 const initialValues = useMemo(() => ({ noReset: false }), []);
108 const validate = useMemo(
109 () => composeValidator({ noReset: buildCheckboxValidator() }),
110 []
111 );
113 const onValues = useCallback(
114 ({ valid, values, form }) => {
115 construct(!values.noReset);
116 setReset(!values.noReset);
117 },
118 [construct]
119 );
120 const goBack = useCallback(() => {
121 pop();
122 setPointCursor(Nothing());
123 }, [pop, setPointCursor]);
125 const acceptTransfer = useCallback(async () => {
126 if (transferring.current) {
127 return;
128 }
130 transferring.current = true;
131 await transferPoint(_address, reset);
132 await checkForUpdates({
133 point: point,
134 message: `${point.patp} has been transferred to you!`,
135 });
137 goBack();
138 }, [goBack, transferPoint, checkForUpdates, point, _address, reset]);
140 return (
141 <View
142 pop={pop}
143 inset
144 className="cancel-transfer"
145 hideBack
146 header={<L2BackHeader hideBalance={point.isL2} back={goBack} />}>
147 <Window>
148 <HeaderPane>
149 <Row className="header-row">
150 <h5>Accept Transfer</h5>
151 </Row>
152 </HeaderPane>
153 <BodyPane>
154 <Grid>
155 <Grid.Item
156 full
157 as={Text}
158 className={cn('f5 wrap', {
159 green3: completed,
160 })}>
161 {completed
162 ? `${name} has been accepted.`
163 : `Accept the incoming transfer of ${name}.`}
164 </Grid.Item>
166 {!completed && (
167 <BridgeForm
168 validate={validate}
169 initialValues={initialValues}
170 onValues={onValues}>
171 {() => (
172 <Grid.Item
173 full
174 as={CheckboxInput}
175 name="noReset"
176 label="Retain proxies and key configuration, in case of transferring to self"
177 disabled={inputsLocked}
178 />
179 )}
180 </BridgeForm>
181 )}
183 {point.isL2 ? (
184 <Grid.Item
185 as={Button}
186 full
187 className="set-proxy mt4"
188 center
189 solid
190 onClick={acceptTransfer}>
191 {'Accept Transfer'}
192 </Grid.Item>
193 ) : (
194 <Grid.Item
195 full
196 as={InlineEthereumTransaction}
197 {...bind}
198 onReturn={() => goBack()}
199 />
200 )}
201 </Grid>
202 </BodyPane>
203 </Window>
204 </View>
205 );