git.iko.soy/bridge
on bb22285 help sign in
bridge/src/views/AcceptTransfer.js
175 lines 5.2 kB history raw
1import React, { useCallback, useEffect, useMemo, useState } from 'react';
2import cn from 'classnames';
3import { Nothing } from 'folktale/maybe';
4import { Grid, Text, CheckboxInput, Button } from 'indigo-react';
5import * as azimuth from 'azimuth-js';
7import { useNetwork } from 'store/network';
8import { usePointCursor } from 'store/pointCursor';
9import { usePointCache } from 'store/pointCache';
10import { useWallet } from 'store/wallet';
12import * as need from 'lib/need';
13import useCurrentPointName from 'lib/useCurrentPointName';
14import useEthereumTransaction from 'lib/useEthereumTransaction';
15import { GAS_LIMITS } from 'lib/constants';
16import { useLocalRouter } from 'lib/LocalRouter';
18import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
19import View from 'components/View';
20import Window from 'components/L2/Window/Window';
21import HeaderPane from 'components/L2/Window/HeaderPane';
22import BodyPane from 'components/L2/Window/BodyPane';
23import L2BackHeader from 'components/L2/Headers/L2BackHeader';
25import BridgeForm from 'form/BridgeForm';
26import { composeValidator, buildCheckboxValidator } from 'form/validators';
27import { Row } from '@tlon/indigo-react';
28import { useRollerStore } from 'store/rollerStore';
29import useRoller from 'lib/useRoller';
31function useAcceptTransfer() {
32 const { contracts } = useNetwork();
33 const { pointCursor } = usePointCursor();
34 const { syncExtras, syncControlledPoints } = usePointCache();
35 const { wallet } = useWallet();
37 const _contracts = need.contracts(contracts);
38 const _point = need.point(pointCursor);
39 const _address = need.addressFromWallet(wallet);
41 const transaction = useEthereumTransaction(
42 useCallback(
43 reset =>
44 azimuth.ecliptic.transferPoint(_contracts, _point, _address, reset),
45 [_contracts, _point, _address]
46 ),
47 useCallback(
48 () => Promise.all([syncExtras(_point), syncControlledPoints()]),
49 [_point, syncControlledPoints, syncExtras]
50 ),
51 GAS_LIMITS.TRANSFER
52 );
54 return {
55 ...transaction,
56 };
59export default function AcceptTransfer() {
60 const { pop } = useLocalRouter();
61 const { setPointCursor } = usePointCursor();
62 const { point } = useRollerStore();
63 const { transferPoint, checkForUpdates } = useRoller();
65 const { wallet } = useWallet();
66 const _address = need.addressFromWallet(wallet);
68 const name = useCurrentPointName();
70 const [reset, setReset] = useState(true);
72 const { completed, bind, inputsLocked, construct } = useAcceptTransfer();
74 useEffect(() => {
75 if (completed) {
76 checkForUpdates(
77 point.value,
78 `${point.patp} has been transferred to you!`
79 );
80 }
81 }, [completed]); // eslint-disable-line react-hooks/exhaustive-deps
83 const initialValues = useMemo(() => ({ noReset: false }), []);
85 const validate = useMemo(
86 () => composeValidator({ noReset: buildCheckboxValidator() }),
87 []
88 );
90 const onValues = useCallback(
91 ({ valid, values, form }) => {
92 construct(!values.noReset);
93 setReset(!values.noReset);
94 },
95 [construct]
96 );
97 const goBack = useCallback(() => {
98 pop();
99 setPointCursor(Nothing());
100 }, [pop, setPointCursor]);
102 const acceptTransfer = useCallback(async () => {
103 await transferPoint(_address, reset);
104 await checkForUpdates(
105 point.value,
106 `${point.patp} has been transferred to you!`
107 );
108 goBack();
109 }, [goBack, transferPoint, checkForUpdates, point, _address, reset]);
111 return (
112 <View
113 pop={pop}
114 inset
115 className="cancel-transfer"
116 hideBack
117 header={<L2BackHeader hideBalance back={goBack} />}>
118 <Window>
119 <HeaderPane>
120 <Row className="header-row">
121 <h5>Accept Transfer</h5>
122 </Row>
123 </HeaderPane>
124 <BodyPane>
125 <Grid>
126 <Grid.Item
127 full
128 as={Text}
129 className={cn('f5 wrap', {
130 green3: completed,
131 })}>
132 {completed
133 ? `${name} has been accepted.`
134 : `Accept the incoming transfer of ${name}.`}
135 </Grid.Item>
137 <BridgeForm
138 validate={validate}
139 initialValues={initialValues}
140 onValues={onValues}>
141 {() => (
142 <Grid.Item
143 full
144 as={CheckboxInput}
145 name="noReset"
146 label="Retain proxies and key configuration, in case of transferring to self"
147 disabled={inputsLocked}
148 />
149 )}
150 </BridgeForm>
152 {point.isL2 ? (
153 <Grid.Item
154 as={Button}
155 full
156 className="set-proxy mt4"
157 center
158 solid
159 onClick={acceptTransfer}>
160 {'Accept Transfer'}
161 </Grid.Item>
162 ) : (
163 <Grid.Item
164 full
165 as={InlineEthereumTransaction}
166 {...bind}
167 onReturn={() => goBack()}
168 />
169 )}
170 </Grid>
171 </BodyPane>
172 </Window>
173 </View>
174 );