diff --git a/app/soapbox/features/federation_restrictions/components/restricted_instance.js b/app/soapbox/features/federation_restrictions/components/restricted_instance.js
new file mode 100644
index 000000000..30775c10c
--- /dev/null
+++ b/app/soapbox/features/federation_restrictions/components/restricted_instance.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { makeGetRemoteInstance } from 'soapbox/selectors';
+import classNames from 'classnames';
+
+const getRemoteInstance = makeGetRemoteInstance();
+
+const mapStateToProps = (state, ownProps) => {
+ return {
+ remoteInstance: getRemoteInstance(state, ownProps.host),
+ };
+};
+
+export default @connect(mapStateToProps)
+class RestrictedInstance extends ImmutablePureComponent {
+
+ static propTypes = {
+ host: PropTypes.string.isRequired,
+ }
+
+ render() {
+ const { remoteInstance } = this.props;
+
+ return (
+
+ {remoteInstance.get('host')}
+
+ );
+ }
+
+}
diff --git a/app/soapbox/features/federation_restrictions/index.js b/app/soapbox/features/federation_restrictions/index.js
index 4056da630..13cbfdaaa 100644
--- a/app/soapbox/features/federation_restrictions/index.js
+++ b/app/soapbox/features/federation_restrictions/index.js
@@ -6,6 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import Column from '../ui/components/column';
import { createSelector } from 'reselect';
import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
+import RestrictedInstance from './components/restricted_instance';
const getHosts = createSelector([
state => state.getIn(['instance', 'pleroma', 'metadata', 'federation', 'mrf_simple'], ImmutableMap()),
@@ -39,9 +40,7 @@ class FederationRestrictions extends ImmutablePureComponent {
return (
-
- {hosts.map(host => - {host}
)}
-
+ {hosts.map(host =>
)}
);
diff --git a/app/soapbox/selectors/index.js b/app/soapbox/selectors/index.js
index b1bd570f7..5ba6f6088 100644
--- a/app/soapbox/selectors/index.js
+++ b/app/soapbox/selectors/index.js
@@ -230,10 +230,12 @@ const getSimplePolicy = (state, host) => (
export const makeGetRemoteInstance = () => {
return createSelector([
+ (state, host) => host,
getRemoteInstanceFavicon,
getSimplePolicy,
- ], (favicon, federation) => {
+ ], (host, favicon, federation) => {
return ImmutableMap({
+ host,
favicon,
federation,
});
diff --git a/app/styles/application.scss b/app/styles/application.scss
index f6611fdf0..7bdea4c13 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -83,6 +83,6 @@
@import 'components/crypto-donate';
@import 'components/datepicker';
@import 'components/remote-timeline';
-
+@import 'components/federation-restrictions';
// Holiday
@import 'holiday/halloween';
diff --git a/app/styles/components/federation-restrictions.scss b/app/styles/components/federation-restrictions.scss
new file mode 100644
index 000000000..5b869c6d5
--- /dev/null
+++ b/app/styles/components/federation-restrictions.scss
@@ -0,0 +1,11 @@
+.federation-restrictions {
+ padding: 15px;
+}
+
+.restricted-instance {
+ padding: 10px 0;
+
+ &--reject {
+ text-decoration: line-through;
+ }
+}