@@ -0,0 +1,145 @@
1+import React, { useCallback, useEffect } from 'react';
2+import cn from 'classnames';
3+import { Grid, Text, Input } from 'indigo-react';
4+import * as azimuth from 'azimuth-js';
5+
6+import { useNetwork } from 'store/network';
7+import { usePointCursor } from 'store/pointCursor';
8+import { usePointCache } from 'store/pointCache';
9+
10+import * as need from 'lib/need';
11+import { usePointInput, useNumberInput } from 'lib/useInputs';
12+import useEthereumTransaction from 'lib/useEthereumTransaction';
13+import { GAS_LIMITS } from 'lib/constants';
14+
15+import ViewHeader from 'components/ViewHeader';
16+import MiniBackButton from 'components/MiniBackButton';
17+import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
18+import patp2dec from 'lib/patp2dec';
19+import { useHistory } from 'store/history';
20+import View from 'components/View';
21+import useCurrentPermissions from 'lib/useCurrentPermissions';
22+import WarningBox from 'components/WarningBox';
23+
24+function useSetPoolSize() {
25+ const { contracts } = useNetwork();
26+ const { pointCursor } = usePointCursor();
27+ const { syncOwnedPoint } = usePointCache();
28+
29+ const _contracts = need.contracts(contracts);
30+ const _point = need.point(pointCursor);
31+
32+ const {
33+ construct: _construct,
34+ confirmed,
35+ inputsLocked,
36+ bind,
37+ } = useEthereumTransaction(GAS_LIMITS.DEFAULT);
38+ // TODO: GAS_LIMITS.SET_POOL_SIZE
39+
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+ );
52+
53+ // sync point details after success
54+ useEffect(() => {
55+ if (confirmed) {
56+ syncOwnedPoint(_point);
57+ }
58+ }, [_point, confirmed, syncOwnedPoint]);
59+
60+ return {
61+ construct,
62+ confirmed,
63+ inputsLocked,
64+ bind,
65+ };
66+}
67+
68+export default function PartySetPoolSize() {
69+ const { pop } = useHistory();
70+ const { contracts } = useNetwork();
71+
72+ const _contracts = need.contracts(contracts);
73+
74+ const { spawnIsDelegatedSending } = useCurrentPermissions();
75+
76+ const { construct, confirmed, inputsLocked, bind } = useSetPoolSize();
77+
78+ const [poolOwnerInput, { pass: validPoint, data: poolOwner }] = usePointInput(
79+ {
80+ name: 'point',
81+ label: 'Point',
82+ disabled: inputsLocked,
83+ }
84+ );
85+
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+ });
95+
96+ useEffect(() => {
97+ if (validPoint && validPoolSize) {
98+ construct(patp2dec(poolOwner), poolSize);
99+ }
100+ }, [poolOwner, construct, validPoint, validPoolSize, poolSize]);
101+
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>
128+
129+ {!confirmed && (
130+ <>
131+ <Grid.Item full as={Input} {...poolOwnerInput} className="mt4" />
132+ <Grid.Item full as={Input} {...poolSizeInput} className="mb4" />
133+ </>
134+ )}
135+
136+ <Grid.Item
137+ full
138+ as={InlineEthereumTransaction}
139+ {...bind}
140+ onReturn={() => pop()}
141+ />
142+ </Grid>
143+ </View>
144+ );
145+}