git.iko.soy/bridge
on dffcebf help sign in
bridge/src/views/Party/PartySetPoolSize.js
155 lines 4.1 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 unconstruct,
35 confirmed,
36 inputsLocked,
37 bind,
38 } = useEthereumTransaction(GAS_LIMITS.DEFAULT);
39 // TODO: GAS_LIMITS.SET_POOL_SIZE
41 const construct = useCallback(
42 (poolOwner, poolSize) =>
43 _construct(
44 azimuth.delegatedSending.setPoolSize(
45 _contracts,
46 _point,
47 poolOwner,
48 poolSize
49 )
50 ),
51 [_construct, _contracts, _point]
52 );
54 // sync point details after success
55 useEffect(() => {
56 if (confirmed) {
57 syncOwnedPoint(_point);
58 }
59 }, [_point, confirmed, syncOwnedPoint]);
61 return {
62 construct,
63 unconstruct,
64 confirmed,
65 inputsLocked,
66 bind,
67 };
70export default function PartySetPoolSize() {
71 const { pop } = useHistory();
72 const { contracts } = useNetwork();
74 const _contracts = need.contracts(contracts);
76 const { spawnIsDelegatedSending } = useCurrentPermissions();
78 const {
79 construct,
80 unconstruct,
81 confirmed,
82 inputsLocked,
83 bind,
84 } = useSetPoolSize();
86 const [poolOwnerInput, { pass: validPoint, data: poolOwner }] = usePointInput(
87 {
88 name: 'point',
89 label: 'Point',
90 disabled: inputsLocked,
91 }
92 );
94 const [
95 poolSizeInput,
96 { pass: validPoolSize, data: poolSize },
97 ] = useNumberInput({
98 name: 'poolsize',
99 label: 'Pool Size',
100 initialValue: 5,
101 disabled: inputsLocked,
102 });
104 useEffect(() => {
105 if (validPoint && validPoolSize) {
106 construct(patp2dec(poolOwner), poolSize);
107 } else {
108 unconstruct();
109 }
110 }, [poolOwner, construct, validPoint, validPoolSize, poolSize, unconstruct]);
112 return (
113 <View inset>
114 <Grid>
115 <Grid.Item full as={MiniBackButton} onClick={() => pop()} />
116 <Grid.Item full as={ViewHeader}>
117 Set Pool Size
118 </Grid.Item>
119 {!spawnIsDelegatedSending && (
120 <Grid.Item full as={WarningBox} className="mb4">
121 The spawn proxy must be set to{' '}
122 <code className="mono f6">
123 {_contracts.delegatedSending.address}
124 </code>{' '}
125 for invitations to be available.
126 </Grid.Item>
127 )}
128 <Grid.Item
129 full
130 as={Text}
131 className={cn('f5', {
132 green3: confirmed,
133 })}>
134 {confirmed
135 ? `${poolSize} invites have been allocated to ${poolOwner}`
136 : `Allocate invites to a child point.`}
137 </Grid.Item>
139 {!confirmed && (
140 <>
141 <Grid.Item full as={Input} {...poolOwnerInput} className="mt4" />
142 <Grid.Item full as={Input} {...poolSizeInput} className="mb4" />
143 </>
144 )}
146 <Grid.Item
147 full
148 as={InlineEthereumTransaction}
149 {...bind}
150 onReturn={() => pop()}
151 />
152 </Grid>
153 </View>
154 );