@@ -1,66 +1,23 @@
1−import React, { useCallback, useEffect, useMemo } from 'react';
21import cn from 'classnames';
3−import { Grid, Flex } from 'indigo-react';
4−import { Just } from 'folktale/maybe';
5−
6−import * as need from 'lib/need';
7−import useEthereumTransaction from 'lib/useEthereumTransaction';
8−import { pluralize } from 'lib/pluralize';
9−
10−import { useWallet } from 'store/wallet';
11−import { usePointCache } from 'store/pointCache';
12−import { useStarReleaseCache } from 'store/starRelease';
13−
2+import { Box, Text } from '@tlon/indigo-react';
3+import { AddressButton } from 'components/AddressButton';
144import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
15−import { matchBlinky } from 'components/Blinky';
16−
17−import { NumberInput, AddressInput } from 'form/Inputs';
185import BridgeForm from 'form/BridgeForm';
19−import FormError from 'form/FormError';
20−import { composeValidator, buildNumberValidator } from 'form/validators';
216import { convertToNumber } from 'form/formatters';
7+import FormError from 'form/FormError';
8+import { AddressInput, NumberInput } from 'form/Inputs';
9+import { buildNumberValidator, composeValidator } from 'form/validators';
10+import { Grid, Flex } from 'indigo-react';
11+import { pluralize } from 'lib/pluralize';
12+import { useCallback, useEffect, useMemo } from 'react';
13+import { useStarReleaseCache } from 'store/starRelease';
14+import { useWithdrawStars } from './useWithdrawStars';
2215
23−function MatchPluralizeStars({ quantity }) {
24− const _quantity = quantity.getOrElse(0);
25− return (
26− <>
27− {' '}
28− <span
29− className={cn({
30− green2: _quantity > 0,
31− red4: Just.hasInstance(quantity) && _quantity === 0,
32− })}>
33− {matchBlinky(quantity)}
34− </span>
35− {pluralize(_quantity, ' star ', ' stars ')}
36− </>
37− );
38−}
39−
40−function AddressIndicator({ isOwn, className }) {
41− return isOwn ? (
42− <div className={cn('green2', className)}>✓ Current Address</div>
43− ) : (
44− <div className={cn('red4', className)}>! Different address</div>
45− );
46−}
47−
48−function useWithdrawStars() {
49− const { syncControlledPoints } = usePointCache();
50−
51− const { syncStarReleaseDetails, withdraw } = useStarReleaseCache();
52− return useEthereumTransaction(
53− useCallback((to, amount) => withdraw(amount, to), [withdraw]),
54− useCallback(
55− () => Promise.all([syncControlledPoints(), syncStarReleaseDetails()]),
56− [syncStarReleaseDetails, syncControlledPoints]
57− )
58− );
16+interface WithdrawFormProps {
17+ afterSubmit: VoidFunction;
5918}
6019
61−export default function Locked({ className, goActive }) {
62− const { wallet } = useWallet();
63− const address = need.addressFromWallet(wallet);
20+export const WithdrawForm = ({ afterSubmit }: WithdrawFormProps) => {
6421 const {
6522 bind,
6623 construct,
@@ -101,38 +58,33 @@ export default function Locked({ className, goActive }) {
10158 [canWithdraw, inputsLocked]
10259 );
10360
104− const initialValues = { address };
61+ const initialValues = {};
10562
10663 return (
107− <Grid gap={completed ? 0 : 6} className={cn('mt4', className)} full>
64+ <>
10865 <BridgeForm
10966 initialValues={initialValues}
11067 onValues={onValues}
111− validate={validate}>
68+ validate={validate}
69+ afterSubmit={afterSubmit}>
11270 {({ values, form }) => (
11371 <>
11472 {!completed && (
11573 <>
116− <Grid.Item full className="f5">
117− You have <MatchPluralizeStars quantity={canWithdraw} />
118− available to withdraw
119− <br />
120− You have
121− <MatchPluralizeStars quantity={total} />
122− total
123− </Grid.Item>
74+ <Box className={cn("info-row", { available: canWithdraw.value > 0})}>
75+ <Text>{`${canWithdraw.value} of ${total.value} available`}</Text>
76+ </Box>
77+ <Box className="info-row">
78+ <Text>{`${total.value -
79+ canWithdraw.value} are in lockup`}</Text>
80+ </Box>
12481 <Grid.Item
12582 cols={[1, 4]}
12683 label="Stars"
12784 as={NumberInput}
128− placeholder="#"
85+ placeholder="0"
12986 name="numStars"
13087 disabled={inputsLocked}
131− accessory={
132− <div className="flex-center h-full">
133− / {matchBlinky(canWithdraw)}
134− </div>
135− }
13688 />
13789 <Grid.Item full className="f5" cols={[1, 13]} as={Flex} col>
13890 <Flex.Item
@@ -141,10 +93,11 @@ export default function Locked({ className, goActive }) {
14193 label="Withdraw To"
14294 disabled={inputsLocked}
14395 />
144− <Flex.Item
145− as={AddressIndicator}
146− isOwn={address === values.address}
147− />
96+ <Box>
97+ <AddressButton inputName="address">
98+ Use my address
99+ </AddressButton>
100+ </Box>
148101 </Grid.Item>
149102 </>
150103 )}
@@ -173,6 +126,6 @@ export default function Locked({ className, goActive }) {
173126 </>
174127 )}
175128 </BridgeForm>
176− </Grid>
129+ </>
177130 );
178−}
131+};