diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx index 10ee37e5b..d6e2b4615 100644 --- a/app/soapbox/features/soapbox_config/index.tsx +++ b/app/soapbox/features/soapbox_config/index.tsx @@ -6,7 +6,8 @@ import { updateConfig } from 'soapbox/actions/admin'; import { uploadMedia } from 'soapbox/actions/media'; import snackbar from 'soapbox/actions/snackbar'; import Icon from 'soapbox/components/icon'; -import { Column } from 'soapbox/components/ui'; +import { Column, HStack, Input } from 'soapbox/components/ui'; +import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield'; import { SimpleForm, FieldsGroup, @@ -27,6 +28,7 @@ import IconPicker from './components/icon-picker'; import SitePreview from './components/site-preview'; import type { ColorChangeHandler, ColorResult } from 'react-color'; +import type { CryptoAddress } from 'soapbox/types/soapbox'; const messages = defineMessages({ heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' }, @@ -67,6 +69,42 @@ const templates: Record = { cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }), }; +const CryptoAddressInput: StreamfieldComponent = ({ value, onChange }) => { + const intl = useIntl(); + + const handleChange = (key: 'ticker' | 'address' | 'note'): React.ChangeEventHandler => { + return e => { + onChange(value.set(key, e.currentTarget.value)); + }; + }; + + return ( + + + + + + ); +}; + const SoapboxConfig: React.FC = () => { const intl = useIntl(); const dispatch = useAppDispatch(); @@ -187,10 +225,18 @@ const SoapboxConfig: React.FC = () => { ); }; - const handleCryptoAdressItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => { - return handleItemChange( - ['cryptoAddresses', index], key, field, templates.cryptoAddress, getValue, - ); + const handleCryptoAdressChange = (values: CryptoAddress[]) => { + setConfig(['cryptoAddresses'], ImmutableList(values)); + }; + + const addCryptoAddress = () => { + const cryptoAddresses = data.get('cryptoAddresses'); + setConfig(['cryptoAddresses'], cryptoAddresses.push(templates.cryptoAddress)); + }; + + const removeCryptoAddress = (i: number) => { + const cryptoAddresses = data.get('cryptoAddresses'); + setConfig(['cryptoAddresses'], cryptoAddresses.delete(i)); }; const handleEditJSON: React.ChangeEventHandler = e => { @@ -385,45 +431,17 @@ const SoapboxConfig: React.FC = () => { - -
- - - - - { - soapbox.cryptoAddresses.map((address, i) => ( -
- - - - -
- )) - } -
-
- - -
-
-
-
+ + } + hint={} + component={CryptoAddressInput} + values={soapbox.cryptoAddresses.toArray()} + onChange={handleCryptoAdressChange} + onAddItem={addCryptoAddress} + onRemoveItem={removeCryptoAddress} + /> +