git.iko.soy/bridge
on afdb680 help sign in
bridge/src/views/AcceptTransfer.js
162 lines 4.8 kB history raw
1import React, { useCallback, 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 } = 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 const initialValues = useMemo(() => ({ noReset: false }), []);
76 const validate = useMemo(
77 () => composeValidator({ noReset: buildCheckboxValidator() }),
78 []
79 );
81 const onValues = useCallback(
82 ({ valid, values, form }) => {
83 construct(!values.noReset);
84 setReset(!values.noReset);
85 },
86 [construct]
87 );
88 const goBack = useCallback(() => {
89 setPointCursor(Nothing());
90 pop();
91 }, [pop, setPointCursor]);
93 const acceptTransfer = useCallback(async () => {
94 await transferPoint(_address, reset);
95 pop();
96 }, [transferPoint, pop, _address, reset]);
98 return (
99 <View
100 pop={pop}
101 inset
102 className="cancel-transfer"
103 hideBack
104 header={<L2BackHeader hideBalance back={goBack} />}>
105 <Window>
106 <HeaderPane>
107 <Row className="header-row">
108 <h5>Accept Transfer</h5>
109 </Row>
110 </HeaderPane>
111 <BodyPane>
112 <Grid>
113 <Grid.Item
114 full
115 as={Text}
116 className={cn('f5 wrap', {
117 green3: completed,
118 })}>
119 {completed
120 ? `${name} has been accepted.`
121 : `Accept the incoming transfer of ${name}.`}
122 </Grid.Item>
124 <BridgeForm
125 validate={validate}
126 initialValues={initialValues}
127 onValues={onValues}>
128 {() => (
129 <Grid.Item
130 full
131 as={CheckboxInput}
132 name="noReset"
133 label="Retain proxies and key configuration, in case of transferring to self"
134 disabled={inputsLocked}
135 />
136 )}
137 </BridgeForm>
139 {point.isL2 ? (
140 <Grid.Item
141 as={Button}
142 full
143 className="set-proxy mt4"
144 center
145 solid
146 onClick={acceptTransfer}>
147 {'Accept Transfer'}
148 </Grid.Item>
149 ) : (
150 <Grid.Item
151 full
152 as={InlineEthereumTransaction}
153 {...bind}
154 onReturn={() => pop()}
155 />
156 )}
157 </Grid>
158 </BodyPane>
159 </Window>
160 </View>
161 );