@@ -1,6 +1,7 @@
11import React, { useCallback, useEffect, useMemo } from 'react';
22import cn from 'classnames';
33import { Grid, Flex } from 'indigo-react';
4+import { Just } from 'folktale/maybe';
45
56import * as need from 'lib/need';
67import useEthereumTransaction from 'lib/useEthereumTransaction';
@@ -11,6 +12,7 @@ import { usePointCache } from 'store/pointCache';
1112import { useStarReleaseCache } from 'store/starRelease';
1213
1314import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
15+import { matchBlinky } from 'components/Blinky';
1416
1517import { NumberInput, AddressInput } from 'form/Inputs';
1618import BridgeForm from 'form/BridgeForm';
@@ -18,6 +20,24 @@ import FormError from 'form/FormError';
1820import { composeValidator, buildNumberValidator } from 'form/validators';
1921import { convertToNumber } from 'form/formatters';
2022
23+function MatchPluralizeStars({ quantity }) {
24+ const _quantity = quantity.getOrElse(0);
25+ console.log(quantity);
26+ return (
27+ <>
28+ {' '}
29+ <span
30+ className={cn({
31+ green2: _quantity > 0,
32+ red4: Just.hasInstance(quantity) && _quantity === 0,
33+ })}>
34+ {matchBlinky(quantity)}
35+ </span>
36+ {pluralize(_quantity, ' star ', ' stars ')}
37+ </>
38+ );
39+}
40+
2141function AddressIndicator({ isOwn, className }) {
2242 return isOwn ? (
2343 <div className={cn('green2', className)}>✓ Current Address</div>
@@ -31,7 +51,7 @@ function useWithdrawStars() {
3151
3252 const { syncStarReleaseDetails, withdraw } = useStarReleaseCache();
3353 return useEthereumTransaction(
34− useCallback((to, amount) => withdraw(amount, to)),
54+ useCallback((to, amount) => withdraw(amount, to), [withdraw]),
3555 useCallback(
3656 () => Promise.all([syncControlledPoints(), syncStarReleaseDetails()]),
3757 [syncStarReleaseDetails, syncControlledPoints]
@@ -39,10 +59,17 @@ function useWithdrawStars() {
3959 );
4060}
4161
42−export default function LockedView({ className }) {
62+export default function Locked({ className, goActive }) {
4363 const { wallet } = useWallet();
4464 const address = need.addressFromWallet(wallet);
45− const { bind, construct, unconstruct, inputsLocked } = useWithdrawStars();
65+ const {
66+ bind,
67+ construct,
68+ unconstruct,
69+ inputsLocked,
70+ completed,
71+ reset,
72+ } = useWithdrawStars();
4673
4774 const { syncStarReleaseDetails, starReleaseDetails } = useStarReleaseCache();
4875
@@ -61,79 +88,88 @@ export default function LockedView({ className }) {
6188 [construct, unconstruct]
6289 );
6390
64− const available = starReleaseDetails
65− .map(b => b.available - b.withdrawn)
66− .getOrElse(0);
67− const total = starReleaseDetails.map(b => b.total).getOrElse(0);
68− const withdrawn = starReleaseDetails.map(b => b.withdrawn).getOrElse(0);
91+ const canWithdraw = starReleaseDetails.map(b => b.available - b.withdrawn);
92+ const total = starReleaseDetails.map(b => b.total);
6993
7094 const validate = useMemo(
7195 () =>
72− composeValidator({
73− numStars: buildNumberValidator(0, available + 1),
74− }),
75− [available]
96+ composeValidator(
97+ {
98+ numStars: buildNumberValidator(0, canWithdraw + 1),
99+ },
100+ (values, errors) => (inputsLocked ? false : errors)
101+ ),
102+ [canWithdraw, inputsLocked]
76103 );
77104
78105 const initialValues = { address };
79106
80107 return (
81− <Grid gap={6} className={cn('mt4', className)} full>
108+ <Grid gap={completed ? 0 : 6} className={cn('mt4', className)} full>
82109 <BridgeForm
83110 initialValues={initialValues}
84111 onValues={onValues}
85112 validate={validate}>
86− {({ values, reset }) => (
113+ {({ values, form }) => (
87114 <>
88− <Grid.Item full className="f5">
89− You have{' '}
90− <span
91− className={cn({
92− green2: available > 0,
93− red4: available === 0,
94− })}>
95− {available}
96− </span>
97− {pluralize(available, ' star ', ' stars ')}
98− available to withdraw
99− <br />
100− You have <span className="green2">{total - withdrawn}</span>
101− {pluralize(available, ' star ', ' stars ')}
102− total
103− </Grid.Item>
104− <Grid.Item full className="f5" cols={[1, 10]} as={Flex} col>
105− <Flex.Item
106− name="address"
107− as={AddressInput}
108− label="Withdraw To"
109− disabled={inputsLocked}
110− />
111− <Flex.Item
112− as={AddressIndicator}
113− isOwn={address === values.address}
114− />
115− </Grid.Item>
115+ {!completed && (
116+ <>
117+ <Grid.Item full className="f5">
118+ You have <MatchPluralizeStars quantity={canWithdraw} />
119+ available to withdraw
120+ <br />
121+ You have
122+ <MatchPluralizeStars quantity={total} />
123+ total
124+ </Grid.Item>
125+ <Grid.Item
126+ cols={[1, 4]}
127+ label="Stars"
128+ as={NumberInput}
129+ placeholder="#"
130+ name="numStars"
131+ disabled={inputsLocked}
132+ accessory={
133+ <div className="flex-center h-full">
134+ / {matchBlinky(canWithdraw)}
135+ </div>
136+ }
137+ />
138+ <Grid.Item full className="f5" cols={[1, 13]} as={Flex} col>
139+ <Flex.Item
140+ name="address"
141+ as={AddressInput}
142+ label="Withdraw To"
143+ disabled={inputsLocked}
144+ />
145+ <Flex.Item
146+ as={AddressIndicator}
147+ isOwn={address === values.address}
148+ />
149+ </Grid.Item>
150+ </>
151+ )}
116152
117− <Grid.Item
118− cols={[1, 5]}
119− label="Stars"
120− style={{ minWidth: '0' }}
121− as={NumberInput}
122− placeholder="#"
123− name="numStars"
124− disabled={inputsLocked}
125− />
126− <Grid.Item as={Flex} col cols={[5, 8]}>
127− <Flex.Item className="f6 lh-tall"> </Flex.Item>
128− <Flex.Item className="f3">/ {available}</Flex.Item>
129− </Grid.Item>
130153 <Grid.Item full as={FormError} />
154+ {completed && (
155+ <>
156+ <Grid.Item full className="pv4">
157+ {values.numStars}{' '}
158+ {pluralize(values.numStars, 'star has', 'stars have')} been
159+ withdrawn
160+ </Grid.Item>
161+ <Grid.Divider />
162+ </>
163+ )}
131164 <Grid.Item
132165 full
133166 as={InlineEthereumTransaction}
134167 {...bind}
135− onReturn={() => reset()}
136168 label="Withdraw Stars"
169+ onReturn={() => {
170+ reset();
171+ form.reset();
172+ }}
137173 />
138174 </>
139175 )}