Move CryptoAddressInput into its own file

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<CryptoAddress> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleChange = (key: 'ticker' | 'address' | 'note'): React.ChangeEventHandler<HTMLInputElement> => {
+    return e => {
+      onChange(value.set(key, e.currentTarget.value));
+    };
+  };
+
+  return (
+    <HStack space={2} grow>
+      <Input
+        type='text'
+        outerClassName='w-1/6 flex-grow'
+        value={value.ticker}
+        onChange={handleChange('ticker')}
+        placeholder={intl.formatMessage(messages.ticker)}
+      />
+      <Input
+        type='text'
+        outerClassName='w-3/6 flex-grow'
+        value={value.address}
+        onChange={handleChange('address')}
+        placeholder={intl.formatMessage(messages.address)}
+      />
+      <Input
+        type='text'
+        outerClassName='w-2/6 flex-grow'
+        value={value.note}
+        onChange={handleChange('note')}
+        placeholder={intl.formatMessage(messages.note)}
+      />
+    </HStack>
+  );
+};
+
+export default CryptoAddressInput;

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<string, Template> = {
   cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }),
 };
 
-const CryptoAddressInput: StreamfieldComponent<CryptoAddress> = ({ value, onChange }) => {
-  const intl = useIntl();
-
-  const handleChange = (key: 'ticker' | 'address' | 'note'): React.ChangeEventHandler<HTMLInputElement> => {
-    return e => {
-      onChange(value.set(key, e.currentTarget.value));
-    };
-  };
-
-  return (
-    <HStack space={2} grow>
-      <Input
-        type='text'
-        outerClassName='w-1/6 flex-grow'
-        value={value.ticker}
-        onChange={handleChange('ticker')}
-        placeholder={intl.formatMessage(messages.cryptoAdressItemTicker)}
-      />
-      <Input
-        type='text'
-        outerClassName='w-3/6 flex-grow'
-        value={value.address}
-        onChange={handleChange('address')}
-        placeholder={intl.formatMessage(messages.cryptoAdressItemAddress)}
-      />
-      <Input
-        type='text'
-        outerClassName='w-2/6 flex-grow'
-        value={value.note}
-        onChange={handleChange('note')}
-        placeholder={intl.formatMessage(messages.cryptoAdressItemNote)}
-      />
-    </HStack>
-  );
-};
-
 const SoapboxConfig: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();