@@ -1,20 +1,25 @@
1−import React, { useCallback, useEffect, useMemo, useState } from 'react';
1+import React, {
2+ useCallback,
3+ useEffect,
4+ useRef,
5+ useMemo,
6+ useState,
7+} from 'react';
28import cn from 'classnames';
39import * as ob from 'urbit-ob';
410import * as azimuth from 'azimuth-js';
511import {
612 Grid,
713 Flex,
8− Input,
914 IconButton,
1015 HelpText,
1116 Text,
1217 ErrorText,
1318 AccessoryIcon,
14− useForm,
1519} from 'indigo-react';
1620import { uniq } from 'lodash';
1721import { fromWei, toWei } from 'web3-utils';
22+import { FieldArray } from 'react-final-form-arrays';
1823
1924import { usePointCursor } from 'store/pointCursor';
2025import { useNetwork } from 'store/network';
@@ -29,10 +34,8 @@ import {
2934 hexify,
3035} from 'lib/txn';
3136import * as tank from 'lib/tank';
32−import { useSuggestedGasPrice } from 'lib/useSuggestedGasPrice';
33−import useArray from 'lib/useArray';
34−import { buildEmailInputConfig } from 'lib/useInputs';
3537import { MIN_PLANET, GAS_LIMITS } from 'lib/constants';
38+import { useSuggestedGasPrice } from 'lib/useSuggestedGasPrice';
3639import * as need from 'lib/need';
3740import * as wg from 'lib/walletgen';
3841import useSetState from 'lib/useSetState';
@@ -41,6 +44,21 @@ import useMailer from 'lib/useMailer';
4144
4245import LoadableButton from 'components/LoadableButton';
4346import Highlighted from 'components/Highlighted';
47+import BridgeForm from 'form/BridgeForm';
48+import { Field } from 'react-final-form';
49+import { EmailInput } from 'form/Inputs';
50+import {
51+ buildEmailValidator,
52+ composeValidator,
53+ hasErrors,
54+ buildArrayValidator,
55+} from 'form/validators';
56+import { FORM_ERROR } from 'final-form';
57+import SubmitButton from 'form/SubmitButton';
58+import FormError from 'form/FormError';
59+import { WARNING, onlyHasWarning } from 'form/helpers';
60+
61+const INITIAL_VALUES = { emails: [''] };
4462
4563const GAS_LIMIT = GAS_LIMITS.GIFT_PLANET;
4664const HAS_RECEIVED_TEXT = 'This email has already received an invite.';
@@ -55,6 +73,8 @@ const STATUS = {
5573 FAILURE: 'FAILURE',
5674};
5775
76+const nameForEmailField = i => `emails[${i}]`;
77+
5878const buttonText = (status, count) => {
5979 switch (status) {
6080 case STATUS.INPUT:
@@ -73,47 +93,29 @@ const buttonText = (status, count) => {
7393 }
7494};
7595
76−// world's simplest uid
77−let id = 0;
78−const buildInputConfig = (extra = {}) =>
79− buildEmailInputConfig({
80− name: `email-${id++}`,
81− placeholder: 'Email Address',
82− ...extra,
83− });
84−
8596const buildAccessoryFor = (dones, errors) => name => {
8697 if (dones[name]) return <AccessoryIcon.Success />;
8798 if (errors[name]) return <AccessoryIcon.Failure />;
8899 return <AccessoryIcon.Pending />;
89100};
90101
91−// TODO: test with tank, successful txs
92102export default function InviteEmail() {
93− // TODO: resumption after error?
94103 const { contracts, web3, networkType } = useNetwork();
95104 const { wallet, walletType, walletHdPath } = useWallet();
96105 const { syncInvites, getInvites } = usePointCache();
97106 const { pointCursor } = usePointCursor();
98107 const point = need.point(pointCursor);
99− const { getHasReceived, syncHasReceivedForEmail, sendMail } = useMailer();
108+ const { getHasReceived, sendMail } = useMailer();
100109 const { gasPrice } = useSuggestedGasPrice(networkType);
101110
111+ const cachedEmails = useRef({});
112+
102113 const { availableInvites } = getInvites(point);
103114 const maxInvitesToSend = availableInvites.matchWith({
104115 Nothing: () => 0,
105116 Just: p => p.value,
106117 });
107118
108− // manage the array of input configs
109− const [
110− inputConfigs,
111− { append: appendInput, removeAt: removeInputAt },
112− ] = useArray(
113− [buildInputConfig({ label: 'Email Address', autoFocus: true })],
114− buildInputConfig
115− );
116−
117119 // manage per-input state
118120 const [hovered, setHovered] = useSetState();
119121 const [invites, addInvite, clearInvites] = useSetState();
@@ -133,30 +135,38 @@ export default function InviteEmail() {
133135 const isFailed = status === STATUS.FAILURE;
134136 const isDone = status === STATUS.SUCCESS;
135137
136− // add disabled, error info to input configs
137− const dynamicConfigs = useMemo(
138− () =>
139− inputConfigs.map(config => {
140− config.disabled = !canInput;
141− const hasReceivedError = getHasReceived(config.name).matchWith({
142− Nothing: () => null, // loading
143− Just: p => p.value && HAS_RECEIVED_TEXT,
144− });
145− config.error = hasReceivedError || errors[config.name];
146− return config;
147− }),
148− [inputConfigs, errors, canInput, getHasReceived]
138+ const validateHasReceived = useCallback(
139+ async email => {
140+ const hasReceived = await getHasReceived(email);
141+ if (hasReceived) {
142+ return HAS_RECEIVED_TEXT;
143+ }
144+ },
145+ [getHasReceived]
149146 );
150147
151− // construct the state of the set of inputs we're rendering below
152− const { inputs, pass } = useForm(dynamicConfigs);
153− // did all of the inputs pass inspection (and there are no general errors)?
154− const allPass = pass && !generalError;
155− // the form is submittable iff passing and input is allowed
156− const canGenerate = allPass && canInput;
157− // additional inputs can be added iff input is allowed and we have enough
158− // invites to send
159− const canAddInvite = canInput && inputConfigs.length < maxInvitesToSend;
148+ const validateForm = useCallback((values, errors) => {
149+ if (hasErrors(errors)) {
150+ return errors;
151+ }
152+
153+ // check for email uniqenesss
154+ const emails = values.emails.filter(d => !!d);
155+ if (uniq(emails).length !== emails.length) {
156+ return { [FORM_ERROR]: 'Duplicate email.' };
157+ }
158+ }, []);
159+
160+ const validate = useMemo(
161+ () =>
162+ composeValidator(
163+ {
164+ emails: buildArrayValidator(buildEmailValidator(validateHasReceived)),
165+ },
166+ validateForm
167+ ),
168+ [validateForm, validateHasReceived]
169+ );
160170
161171 // progress is [0, .length] of invites or receipts, as we're generating them
162172 const progress = isGenerating
@@ -174,128 +184,113 @@ export default function InviteEmail() {
174184 return () => null;
175185 })();
176186
177− const generateInvites = useCallback(async () => {
178− const _contracts = contracts.getOrElse(null);
179− const _web3 = web3.getOrElse(null);
180− const _wallet = wallet.getOrElse(null);
181− if (!_contracts || !_web3 || !_wallet) {
182− // not using need because we want a custom error
183− throw new Error('Internal Error: Missing Contracts/Web3/Wallet');
184− }
185−
186− //TODO want to do this on-input, but that gets weird. see #188
187− let knowAll = true;
188− let alreadyReceived = [];
189− await Promise.all(
190− inputs.map(async input => {
191− const email = input.data;
192− getHasReceived(email).matchWith({
193− Nothing: () => {
194− knowAll = false;
195− },
196− Just: p => {
197− if (p.value) alreadyReceived.push(email);
198− },
199− });
200− })
201− );
202− if (!knowAll) {
203− throw new Error('No word yet from email service...');
204− }
205− if (alreadyReceived.length > 0) {
206− throw new Error(
207− 'The following recipients already own a point: ' +
208− alreadyReceived.join(', ')
209− );
210− }
211−
212− const nonce = await _web3.eth.getTransactionCount(_wallet.address);
213− const chainId = await _web3.eth.net.getId();
214− const planets = await azimuth.delegatedSending.getPlanetsToSend(
215− _contracts,
216− point,
217− inputs.length
218− );
219−
220− // account for the race condition where invites got used up while we were
221− // composing our target list
222− if (planets.length < inputs.length) {
223− // resync invites to the cache, since they're out of date
224− syncInvites(point);
187+ const generateInvites = useCallback(
188+ async values => {
189+ const _contracts = contracts.getOrElse(null);
190+ const _web3 = web3.getOrElse(null);
191+ const _wallet = wallet.getOrElse(null);
192+ if (!_contracts || !_web3 || !_wallet) {
193+ // not using need because we want a custom error
194+ throw new Error('Internal Error: Missing Contracts/Web3/Wallet');
195+ }
225196
226− throw new Error(
227− `Can currently only send ${planets.length} invites. ` +
228− `Please remove invites until you are within the limit.`
197+ const nonce = await _web3.eth.getTransactionCount(_wallet.address);
198+ const chainId = await _web3.eth.net.getId();
199+ const planets = await azimuth.delegatedSending.getPlanetsToSend(
200+ _contracts,
201+ point,
202+ values.emails.length
229203 );
230− }
231204
232− clearInvites();
233− // NB(shrugs) - must be processed in serial because main thread, etc
234− let errorCount = 0;
235− for (let i = 0; i < inputs.length; i++) {
236− const input = inputs[i];
237− try {
238− const { data: email, name } = inputs[i];
239−
240− const { ticket, owner } = await wg.generateTemporaryTicketAndWallet(
241− MIN_PLANET
242− // we're always giving planets, so generate a ticket of the correct size
243− );
205+ // account for the race condition where invites got used up while we were
206+ // composing our target list
207+ if (planets.length < values.emails.length) {
208+ // resync invites to the cache, since they're out of date
209+ syncInvites(point);
210+
211+ return {
212+ [FORM_ERROR]:
213+ `Can currently only send ${planets.length} invites. ` +
214+ `Please remove invites until you are within the limit.`,
215+ };
216+ }
244217
245− const inviteTx = azimuth.delegatedSending.sendPoint(
246− _contracts,
247− point,
248− planets[i],
249− owner.keys.address
250− );
251− const signedTx = await signTransaction({
252− wallet: _wallet,
253− walletType,
254− walletHdPath,
255− networkType,
256− // TODO: ^ make a useTransactionSigner to encapsulate this logic
257− txn: inviteTx,
258− gasPrice: gasPrice.toString(),
259− gasLimit: GAS_LIMIT.toString(),
260− nonce: nonce + i,
261− chainId,
262− });
263− const rawTx = hexify(signedTx.serialize());
264−
265− addInvite({ [name]: { email, ticket, signedTx, rawTx } });
266− } catch (error) {
267− console.error(error);
268− errorCount++;
269− addError({ [input.name]: `Wallet Error: ${input.email}` });
218+ clearInvites();
219+ // NB(shrugs) - must be processed in serial because main thread, etc
220+ let errorCount = 0;
221+ for (let i = 0; i < values.emails.length; i++) {
222+ const name = nameForEmailField(i);
223+ try {
224+ const email = values.emails[i];
225+ const planet = planets[i];
226+
227+ const { ticket, owner } = await wg.generateTemporaryTicketAndWallet(
228+ MIN_PLANET
229+ // we're always giving planets, so generate a ticket of the correct size
230+ );
231+
232+ const inviteTx = azimuth.delegatedSending.sendPoint(
233+ _contracts,
234+ point,
235+ planet,
236+ owner.keys.address
237+ );
238+
239+ const signedTx = await signTransaction({
240+ wallet: _wallet,
241+ walletType,
242+ walletHdPath,
243+ networkType,
244+ chainId,
245+ nonce: nonce + i,
246+ // TODO: ^ make a useTransactionSigner to encapsulate this logic
247+ txn: inviteTx,
248+ gasPrice: gasPrice.toString(),
249+ gasLimit: GAS_LIMIT.toString(),
250+ });
251+
252+ const rawTx = hexify(signedTx.serialize());
253+
254+ addInvite({ [name]: { email, ticket, signedTx, rawTx } });
255+ } catch (error) {
256+ console.error(error);
257+ errorCount++;
258+ addError({ [name]: 'Error generating invite.' });
259+ }
270260 }
271− }
272261
273− if (errorCount > 0) {
274− throw new Error(
275− `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(
276− errorCount,
277− 'error'
278− )} while generating wallets.`
279− );
280− }
281− }, [
282− contracts,
283− web3,
284− gasPrice,
285− wallet,
286− inputs,
287− point,
288− clearInvites,
289− getHasReceived,
290− addError,
291− syncInvites,
292− walletType,
293− walletHdPath,
294− networkType,
295− addInvite,
296− ]);
262+ if (errorCount > 0) {
263+ return {
264+ [WARNING]: `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(
265+ errorCount,
266+ 'error'
267+ )} while generating wallets. You can still send the invites that generated correctly.`,
268+ };
269+ }
270+ },
271+ [
272+ contracts,
273+ web3,
274+ wallet,
275+ point,
276+ clearInvites,
277+ syncInvites,
278+ walletType,
279+ walletHdPath,
280+ networkType,
281+ gasPrice,
282+ addInvite,
283+ addError,
284+ ]
285+ );
297286
298287 const sendInvites = useCallback(async () => {
288+ // compute all of the names of the fields
289+ const allFieldNames = Object.keys(cachedEmails.current);
290+ // only emails we're sending are the valid ones with invites
291+ const names = allFieldNames.filter(name => !!invites[name]);
292+ const emails = allFieldNames.map(name => cachedEmails.current[name]);
293+
299294 const _web3 = web3.getOrElse(null);
300295 const _wallet = wallet.getOrElse(null);
301296 if (!_web3 || !_wallet) {
@@ -307,8 +302,8 @@ export default function InviteEmail() {
307302 _web3,
308303 point,
309304 _wallet.address,
310− toWei((gasPrice * GAS_LIMIT * inputs.length).toString(), 'gwei'),
311− inputs.map(input => invites[input.name].rawTx),
305+ toWei((gasPrice * GAS_LIMIT * emails.length).toString(), 'gwei'),
306+ names.map(name => invites[name].rawTx),
312307 (address, minBalance, balance) =>
313308 setNeedFunds({ address, minBalance, balance }),
314309 () => setNeedFunds(undefined)
@@ -319,8 +314,8 @@ export default function InviteEmail() {
319314
320315 let unsentInvites = [];
321316 let orphanedInvites = [];
322− const txAndMailings = inputs.map(async input => {
323− const invite = invites[input.name];
317+ const txAndMailings = names.map(async name => {
318+ const invite = invites[name];
324319 try {
325320 const txHash = await sendSignedTransaction(
326321 _web3,
@@ -328,9 +323,7 @@ export default function InviteEmail() {
328323 tankWasUsed
329324 );
330325
331− // TODO: waitForTransactionConfirm never rejects
332− const didConfirm = await waitForTransactionConfirm(_web3, txHash);
333− if (!didConfirm) throw new Error();
326+ await waitForTransactionConfirm(_web3, txHash);
334327 } catch (error) {
335328 console.error(error);
336329 unsentInvites.push(invite);
@@ -338,19 +331,18 @@ export default function InviteEmail() {
338331 }
339332
340333 try {
341− const success = await sendMail(
334+ await sendMail(
342335 invite.email,
343336 invite.ticket,
344337 ob.patp(point),
345338 invite.rawTx
346339 );
347− if (!success) throw new Error('Failed to send mail');
348340 } catch (error) {
349341 console.error(error);
350342 orphanedInvites.push(invite);
351343 }
352344
353− addReceipt({ [input.name]: true });
345+ addReceipt({ [name]: true });
354346 });
355347
356348 await Promise.all(txAndMailings);
@@ -376,46 +368,48 @@ export default function InviteEmail() {
376368 }
377369 }, [
378370 web3,
371+ wallet,
372+ point,
379373 gasPrice,
380− inputs,
381− addReceipt,
382− clearReceipts,
383374 invites,
384− point,
385− wallet,
375+ clearReceipts,
376+ addReceipt,
386377 sendMail,
387378 ]);
388379
389− const onClick = useCallback(async () => {
380+ const onSubmit = useCallback(
381+ async values => {
382+ cachedEmails.current = values.emails.reduce((memo, email, i) => {
383+ memo[nameForEmailField(i)] = email;
384+ return memo;
385+ }, {});
386+ setStatus(STATUS.GENERATING);
387+ const errors = await generateInvites(values);
388+ if (hasErrors(errors)) {
389+ if (onlyHasWarning(errors)) {
390+ setStatus(STATUS.CAN_SEND);
391+ }
392+
393+ return errors;
394+ }
395+
396+ setStatus(STATUS.CAN_SEND);
397+ },
398+ [generateInvites]
399+ );
400+
401+ const doSend = useCallback(async () => {
390402 setGeneralError(null);
391403 try {
392− if (canGenerate) {
393− setStatus(STATUS.GENERATING);
394− await generateInvites();
395− setStatus(STATUS.CAN_SEND);
396− } else if (canSend) {
397− setStatus(STATUS.SENDING);
398− await sendInvites();
399− setStatus(STATUS.SUCCESS);
400− }
404+ setStatus(STATUS.SENDING);
405+ await sendInvites();
406+ setStatus(STATUS.SUCCESS);
401407 } catch (error) {
402408 console.error(error);
403− setGeneralError(error);
409+ setGeneralError(error.message);
404410 setStatus(STATUS.FAILURE);
405411 }
406− }, [canGenerate, canSend, generateInvites, sendInvites]);
407−
408− // when inputs update, check to see if any of them are duplicates
409− useEffect(() => {
410− // compute the list of valid emails
411− const emails = inputs.map(i => i.data).filter(d => !!d);
412− if (uniq(emails).length !== emails.length) {
413− setGeneralError(new Error(`Duplicate email.`));
414− } else {
415− setGeneralError(null);
416− setStatus(STATUS.INPUT);
417− }
418− }, [inputs]);
412+ }, [sendInvites]);
419413
420414 // when we transition to done, sync invites because we just sent some
421415 // and therefore know that state has changed
@@ -425,109 +419,142 @@ export default function InviteEmail() {
425419 }
426420 }, [isDone, syncInvites, point]);
427421
428− useEffect(() => {
429− for (const input of inputs) {
430− if (input.pass) {
431− syncHasReceivedForEmail(input.data);
432− }
433− }
434− }, [inputs, syncHasReceivedForEmail]);
435−
436422 return (
437423 <Grid gap={3}>
438− <Grid.Item full as={Flex} justify="end">
439− {/* use hidden class instead of removing component from dom */}
440− {/* in order to avoid janky reflow */}
441− <IconButton
442− onClick={() => appendInput()}
443− disabled={!canAddInvite}
444− className={cn({ hidden: isDone })}
445− solid>
446− +
447− </IconButton>
448− </Grid.Item>
449−
450− {isDone && (
451− <>
452− <Grid.Item as={Text} className="f5" full>
453− <Highlighted>{pluralize(inputs.length, 'invite')}</Highlighted>{' '}
454− {pluralize(inputs.length, 'has', 'have')} been successfully sent
455− </Grid.Item>
456− {inputs.map(input => (
457− <Grid.Item as={HelpText} key={input.name} full>
458− {invites[input.name].email}
459− </Grid.Item>
460− ))}
461− </>
462− )}
463−
464− {!isDone && (
465− <>
466− {/* email inputs */}
467− {inputs.map((input, i) => {
468− const isFirst = i === 0;
469− return (
470− <Grid.Item
471− key={input.name}
472− as={Grid}
473− gap={3}
474− onMouseOver={() => setHovered({ [input.name]: true })}
475− onMouseLeave={() => setHovered({ [input.name]: false })}
476− full>
477− <Grid.Item
478− as={Input}
479− cols={[1, 11]}
480− {...input}
481− accessory={accessoryFor(input.name)}
482− />
483− {!isFirst &&
484− (input.focused || hovered[input.name]) &&
485− canInput && (
486− <Grid.Item
487− cols={[11, 13]}
488− justifySelf="end"
489− alignSelf="center">
490− <IconButton
491− onClick={() => removeInputAt(i)}
492− solid
493− secondary>
494− -
495− </IconButton>
496− </Grid.Item>
424+ <BridgeForm
425+ validate={validate}
426+ onSubmit={onSubmit}
427+ initialValues={INITIAL_VALUES}>
428+ {({ handleSubmit }) => (
429+ <FieldArray name="emails">
430+ {({ fields }) => {
431+ const sentInviteNames = Object.keys(receipts);
432+ return (
433+ <>
434+ <Grid.Item full as={Flex} justify="end">
435+ {/* use hidden class instead of removing component from dom */}
436+ {/* in order to avoid janky reflow */}
437+ <IconButton
438+ onClick={() => fields.push('')}
439+ disabled={!canInput || fields.length >= maxInvitesToSend}
440+ className={cn({ hidden: isDone })}
441+ solid>
442+ +
443+ </IconButton>
444+ </Grid.Item>
445+
446+ {isDone ? (
447+ <>
448+ <Grid.Item as={Text} className="f5" full>
449+ <Highlighted>
450+ {pluralize(sentInviteNames.length, 'invite')}
451+ </Highlighted>{' '}
452+ {pluralize(sentInviteNames.length, 'has', 'have')} been
453+ successfully sent
454+ </Grid.Item>
455+
456+ {sentInviteNames.map(name => (
457+ <Grid.Item as={HelpText} key={name} full>
458+ <Field name={name}>
459+ {({ input: { value } }) => value}
460+ </Field>
461+ </Grid.Item>
462+ ))}
463+ </>
464+ ) : (
465+ <>
466+ {fields.map((name, i) => {
467+ const isFirst = i === 0;
468+ return (
469+ <Grid.Item
470+ key={name}
471+ full
472+ as={Grid}
473+ gap={3}
474+ onMouseOver={() => setHovered({ [name]: true })}
475+ onMouseLeave={() => setHovered({ [name]: false })}>
476+ <Grid.Item
477+ cols={[1, 11]}
478+ as={EmailInput}
479+ name={name}
480+ label={isFirst ? 'Email Address' : undefined}
481+ accessory={accessoryFor(name)}
482+ />
483+ <Field name={name}>
484+ {({ meta: { active } }) => {
485+ return (
486+ <>
487+ {!isFirst &&
488+ (active || hovered[name]) &&
489+ canInput && (
490+ <Grid.Item
491+ cols={[11, 13]}
492+ justifySelf="end"
493+ alignSelf="center">
494+ <IconButton
495+ onClick={() => fields.remove(i)}
496+ solid
497+ secondary>
498+ -
499+ </IconButton>
500+ </Grid.Item>
501+ )}
502+ </>
503+ );
504+ }}
505+ </Field>
506+ </Grid.Item>
507+ );
508+ })}
509+
510+ {canInput ? (
511+ <Grid.Item
512+ full
513+ as={SubmitButton}
514+ handleSubmit={handleSubmit}
515+ accessory={`${visualProgress}/${fields.length}`}>
516+ {buttonText(status, fields.length)}
517+ </Grid.Item>
518+ ) : (
519+ <Grid.Item
520+ full
521+ as={LoadableButton}
522+ className="mt4"
523+ disabled={!canSend}
524+ accessory={`${visualProgress}/${fields.length}`}
525+ onClick={doSend}
526+ success={canSend}
527+ solid>
528+ {buttonText(status, fields.length)}
529+ </Grid.Item>
530+ )}
531+
532+ {needFunds && (
533+ <Grid.Item full>
534+ <Highlighted warning>
535+ Your ownership address {needFunds.address} needs at
536+ least {fromWei(needFunds.minBalance)} ETH and
537+ currently has {fromWei(needFunds.balance)} ETH.
538+ Waiting until the account has enough funds.
539+ </Highlighted>
540+ </Grid.Item>
541+ )}
542+
543+ <Grid.Item full as={FormError} />
544+
545+ {generalError && (
546+ <Grid.Item full as={ErrorText}>
547+ {generalError}
548+ </Grid.Item>
549+ )}
550+ </>
497551 )}
498− </Grid.Item>
499− );
500− })}
501−
502− <Grid.Item
503− full
504− as={LoadableButton}
505− disabled={!canGenerate && !canSend}
506− accessory={`${visualProgress}/${inputs.length}`}
507− onClick={onClick}
508− success={canSend}
509− solid>
510− {buttonText(status, inputs.length)}
511− </Grid.Item>
512−
513− {needFunds && (
514− <Grid.Item full>
515− <Highlighted warning>
516− Your ownership address {needFunds.address} needs at least{' '}
517− {fromWei(needFunds.minBalance)} ETH and currently has{' '}
518− {fromWei(needFunds.balance)} ETH. Waiting until the account has
519− enough funds.
520− </Highlighted>
521− </Grid.Item>
522− )}
523−
524− {generalError && (
525− <Grid.Item full>
526− <ErrorText>{generalError.message.toString()}</ErrorText>
527− </Grid.Item>
528− )}
529− </>
530− )}
552+ </>
553+ );
554+ }}
555+ </FieldArray>
556+ )}
557+ </BridgeForm>
531558 </Grid>
532559 );
533560}