on abbbcbc help sign in
bridge/src/views/Party/PartySetPoolSize.js
145 lines 3.9 kB history raw
1import React, { useCallback, useEffect } from 'react';
2import cn from 'classnames';
3import { Grid, Text, Input } from 'indigo-react';
4import * as azimuth from 'azimuth-js';
6import { useNetwork } from 'store/network';
7import { usePointCursor } from 'store/pointCursor';
8import { usePointCache } from 'store/pointCache';
10import * as need from 'lib/need';
11import { usePointInput, useNumberInput } from 'lib/useInputs';
12import useEthereumTransaction from 'lib/useEthereumTransaction';
13import { GAS_LIMITS } from 'lib/constants';
15import ViewHeader from 'components/ViewHeader';
16import MiniBackButton from 'components/MiniBackButton';
17import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
18import patp2dec from 'lib/patp2dec';
19import { useHistory } from 'store/history';
20import View from 'components/View';
21import useCurrentPermissions from 'lib/useCurrentPermissions';
22import WarningBox from 'components/WarningBox';
24function useSetPoolSize() {
25 const { contracts } = useNetwork();
26 const { pointCursor } = usePointCursor();
27 const { syncOwnedPoint } = usePointCache();
29 const _contracts = need.contracts(contracts);
30 const _point = need.point(pointCursor);
32 const {
33 construct: _construct,
34 confirmed,
35 inputsLocked,
36 bind,
37 } = useEthereumTransaction(GAS_LIMITS.DEFAULT);
38 // TODO: GAS_LIMITS.SET_POOL_SIZE
40 const construct = useCallback(
41 (poolOwner, poolSize) =>
42 _construct(
43 azimuth.delegatedSending.setPoolSize(
44 _contracts,
45 _point,
46 poolOwner,
47 poolSize
48 )
49 ),
50 [_construct, _contracts, _point]
51 );
53 // sync point details after success
54 useEffect(() => {
55 if (confirmed) {
56 syncOwnedPoint(_point);
57 }
58 }, [_point, confirmed, syncOwnedPoint]);
60 return {
61 construct,
62 confirmed,
63 inputsLocked,
64 bind,
65 };
68export default function PartySetPoolSize() {
69 const { pop } = useHistory();
70 const { contracts } = useNetwork();
72 const _contracts = need.contracts(contracts);
74 const { spawnIsDelegatedSending } = useCurrentPermissions();
76 const { construct, confirmed, inputsLocked, bind } = useSetPoolSize();
78 const [poolOwnerInput, { pass: validPoint, data: poolOwner }] = usePointInput(
79 {
80 name: 'point',
81 label: 'Point',
82 disabled: inputsLocked,
83 }
84 );
86 const [
87 poolSizeInput,
88 { pass: validPoolSize, data: poolSize },
89 ] = useNumberInput({
90 name: 'poolsize',
91 label: 'Pool Size',
92 initialValue: 5,
93 disabled: inputsLocked,
94 });
96 useEffect(() => {
97 if (validPoint && validPoolSize) {
98 construct(patp2dec(poolOwner), poolSize);
99 }
100 }, [poolOwner, construct, validPoint, validPoolSize, poolSize]);
102 return (
103 <View inset>
104 <Grid>
105 <Grid.Item full as={MiniBackButton} onClick={() => pop()} />
106 <Grid.Item full as={ViewHeader}>
107 Set Pool Size
108 </Grid.Item>
109 {!spawnIsDelegatedSending && (
110 <Grid.Item full as={WarningBox} className="mb4">
111 The spawn proxy must be set to{' '}
112 <code className="mono f6">
113 {_contracts.delegatedSending.address}
114 </code>{' '}
115 for invitations to be available.
116 </Grid.Item>
117 )}
118 <Grid.Item
119 full
120 as={Text}
121 className={cn('f5', {
122 green3: confirmed,
123 })}>
124 {confirmed
125 ? `${poolSize} invites have been allocated to ${poolOwner}`
126 : `Allocate invites to a child point.`}
127 </Grid.Item>
129 {!confirmed && (
130 <>
131 <Grid.Item full as={Input} {...poolOwnerInput} className="mt4" />
132 <Grid.Item full as={Input} {...poolSizeInput} className="mb4" />
133 </>
134 )}
136 <Grid.Item
137 full
138 as={InlineEthereumTransaction}
139 {...bind}
140 onReturn={() => pop()}
141 />
142 </Grid>
143 </View>
144 );