diff --git a/app/soapbox/features/soapbox_config/components/crypto-address-input.tsx b/app/soapbox/features/soapbox_config/components/crypto-address-input.tsx new file mode 100644 index 000000000..75ffec27c --- /dev/null +++ b/app/soapbox/features/soapbox_config/components/crypto-address-input.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { useIntl, defineMessages } from 'react-intl'; + +import { HStack, Input } from 'soapbox/components/ui'; +import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield'; + +import type { CryptoAddress } from 'soapbox/types/soapbox'; + +const messages = defineMessages({ + ticker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' }, + address: { id: 'soapbox_config.crypto_address.meta_fields.address_placeholder', defaultMessage: 'Address' }, + note: { id: 'soapbox_config.crypto_address.meta_fields.note_placeholder', defaultMessage: 'Note (optional)' }, +}); + +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 ( + + + + + + ); +}; + +export default CryptoAddressInput; diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx index d6e2b4615..c3ca22147 100644 --- a/app/soapbox/features/soapbox_config/index.tsx +++ b/app/soapbox/features/soapbox_config/index.tsx @@ -24,6 +24,7 @@ import { normalizeSoapboxConfig } from 'soapbox/normalizers'; import Accordion from '../ui/components/accordion'; import ColorWithPicker from './components/color-with-picker'; +import CryptoAddressInput from './components/crypto-address-input'; import IconPicker from './components/icon-picker'; import SitePreview from './components/site-preview'; @@ -39,9 +40,6 @@ const messages = defineMessages({ promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' }, homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' }, homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' }, - cryptoAdressItemTicker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' }, - cryptoAdressItemAddress: { id: 'soapbox_config.crypto_address.meta_fields.address_placeholder', defaultMessage: 'Address' }, - cryptoAdressItemNote: { id: 'soapbox_config.crypto_address.meta_fields.note_placeholder', defaultMessage: 'Note (optional)' }, cryptoDonatePanelLimitLabel: { id: 'soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder', defaultMessage: 'Number of items to display in the crypto homepage widget' }, customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' }, rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' }, @@ -69,42 +67,6 @@ 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();