git.iko.soy/bridge
on b6873da help sign in
bridge/src/views/AcceptTransfer.js
172 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 setPointCursor(Nothing());
99 pop();
100 }, [pop, setPointCursor]);
102 const acceptTransfer = useCallback(async () => {
103 await transferPoint(_address, reset);
104 checkForUpdates(point.value, `${point.patp} has been transferred to you!`);
105 pop();
106 }, [transferPoint, checkForUpdates, point, pop, _address, reset]);
108 return (
109 <View
110 pop={pop}
111 inset
112 className="cancel-transfer"
113 hideBack
114 header={<L2BackHeader hideBalance back={goBack} />}>
115 <Window>
116 <HeaderPane>
117 <Row className="header-row">
118 <h5>Accept Transfer</h5>
119 </Row>
120 </HeaderPane>
121 <BodyPane>
122 <Grid>
123 <Grid.Item
124 full
125 as={Text}
126 className={cn('f5 wrap', {
127 green3: completed,
128 })}>
129 {completed
130 ? `${name} has been accepted.`
131 : `Accept the incoming transfer of ${name}.`}
132 </Grid.Item>
134 <BridgeForm
135 validate={validate}
136 initialValues={initialValues}
137 onValues={onValues}>
138 {() => (
139 <Grid.Item
140 full
141 as={CheckboxInput}
142 name="noReset"
143 label="Retain proxies and key configuration, in case of transferring to self"
144 disabled={inputsLocked}
145 />
146 )}
147 </BridgeForm>
149 {point.isL2 ? (
150 <Grid.Item
151 as={Button}
152 full
153 className="set-proxy mt4"
154 center
155 solid
156 onClick={acceptTransfer}>
157 {'Accept Transfer'}
158 </Grid.Item>
159 ) : (
160 <Grid.Item
161 full
162 as={InlineEthereumTransaction}
163 {...bind}
164 onReturn={() => pop()}
165 />
166 )}
167 </Grid>
168 </BodyPane>
169 </Window>
170 </View>
171 );