diff --git a/app/soapbox/features/ui/components/instance_moderation_panel.js b/app/soapbox/features/ui/components/instance_moderation_panel.js
deleted file mode 100644
index 2f18ba887..000000000
--- a/app/soapbox/features/ui/components/instance_moderation_panel.js
+++ /dev/null
@@ -1,81 +0,0 @@
-'use strict';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { openModal } from 'soapbox/actions/modals';
-import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
-import InstanceRestrictions from 'soapbox/features/federation_restrictions/components/instance_restrictions';
-import { makeGetRemoteInstance } from 'soapbox/selectors';
-
-const getRemoteInstance = makeGetRemoteInstance();
-
-const messages = defineMessages({
-  editFederation: { id: 'remote_instance.edit_federation', defaultMessage: 'Edit federation' },
-});
-
-const mapStateToProps = (state, { host }) => {
-  const { me, instance } = state;
-  const account = state.accounts.get(me);
-
-  return {
-    instance,
-    remoteInstance: getRemoteInstance(state, host),
-    isAdmin: account.admin,
-  };
-};
-
-export default @connect(mapStateToProps, null, null, { forwardRef: true })
-@injectIntl
-class InstanceModerationPanel extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    host: PropTypes.string.isRequired,
-    instance: ImmutablePropTypes.map,
-    remoteInstance: ImmutablePropTypes.map,
-    isAdmin: PropTypes.bool,
-  };
-
-  handleEditFederation = e => {
-    const { dispatch, host } = this.props;
-    dispatch(openModal('EDIT_FEDERATION', { host }));
-  }
-
-  makeMenu = () => {
-    const { intl } = this.props;
-
-    return [{
-      text: intl.formatMessage(messages.editFederation),
-      action: this.handleEditFederation,
-      icon: require('@tabler/icons/icons/edit.svg'),
-    }];
-  }
-
-  render() {
-    const { remoteInstance, isAdmin } = this.props;
-    const menu = this.makeMenu();
-
-    return (
-      <div className='wtf-panel instance-federation-panel'>
-        <div className='wtf-panel-header'>
-          <i role='img' alt='gavel' className='fa fa-gavel wtf-panel-header__icon' />
-          <span className='wtf-panel-header__label'>
-            <span><FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' /></span>
-          </span>
-          {isAdmin && <div className='wtf-panel__menu'>
-            <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
-          </div>}
-        </div>
-        <div className='wtf-panel__content'>
-          <InstanceRestrictions remoteInstance={remoteInstance} />
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/ui/components/instance_moderation_panel.tsx b/app/soapbox/features/ui/components/instance_moderation_panel.tsx
new file mode 100644
index 000000000..1a494df7e
--- /dev/null
+++ b/app/soapbox/features/ui/components/instance_moderation_panel.tsx
@@ -0,0 +1,65 @@
+'use strict';
+
+import React from 'react';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import { openModal } from 'soapbox/actions/modals';
+import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
+import InstanceRestrictions from 'soapbox/features/federation_restrictions/components/instance_restrictions';
+import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { makeGetRemoteInstance } from 'soapbox/selectors';
+
+const getRemoteInstance = makeGetRemoteInstance();
+
+const messages = defineMessages({
+  editFederation: { id: 'remote_instance.edit_federation', defaultMessage: 'Edit federation' },
+});
+
+interface IInstanceModerationPanel {
+  /** Host (eg "gleasonator.com") of the remote instance to moderate. */
+  host: string,
+}
+
+/** Widget for moderators to manage a remote instance. */
+const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const account = useOwnAccount();
+  const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
+
+  const handleEditFederation = () => {
+    dispatch(openModal('EDIT_FEDERATION', { host }));
+  };
+
+  const makeMenu = () => {
+    return [{
+      text: intl.formatMessage(messages.editFederation),
+      action: handleEditFederation,
+      icon: require('@tabler/icons/icons/edit.svg'),
+    }];
+  };
+
+  const menu = makeMenu();
+
+  return (
+    <div className='wtf-panel instance-federation-panel'>
+      <div className='wtf-panel-header'>
+        <i role='img' className='fa fa-gavel wtf-panel-header__icon' />
+        <span className='wtf-panel-header__label'>
+          <span><FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' /></span>
+        </span>
+        {account?.admin && (
+          <div className='wtf-panel__menu'>
+            <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
+          </div>
+        )}
+      </div>
+      <div className='wtf-panel__content'>
+        <InstanceRestrictions remoteInstance={remoteInstance} />
+      </div>
+    </div>
+  );
+};
+
+export default InstanceModerationPanel;