2021-03-03 19:50:17 +01:00 · 2021-03-03 18:38:46 +01:00 · 2021-03-03 18:39:58 +01:00 · 2021-03-03 18:50:00 +01:00
63 changed files with 1015 additions and 502 deletions
--- a/flow-typed/Comment.js
+++ b/flow-typed/Comment.js
@ -27,6 +27,10 @@ declare type CommentsState = {
  myReactsByCommentId: any,
  othersReactsByCommentId: any,
  pendingCommentReactions: Array<string>,
+  moderationBlockList: ?Array<string>,
+  fetchingModerationBlockList: boolean,
+  blockingByUri: {},
+  unBlockingByUri: {},
 };

 declare type CommentReactParams = {
--- a/package.json
+++ b/package.json
@ -53,7 +53,7 @@
    "electron-updater": "^4.2.4",
    "express": "^4.17.1",
    "if-env": "^1.0.4",
-	"remove-markdown": "^0.3.0",
+    "remove-markdown": "^0.3.0",
    "tempy": "^0.6.0",
    "videojs-logo": "^2.1.4"
  },
@ -184,7 +184,7 @@
    "redux-thunk": "^2.2.0",
    "remark": "^9.0.0",
    "remark-attr": "^0.8.3",
-	"remark-breaks": "^1.0.5",
+    "remark-breaks": "^1.0.5",
    "remark-emoji": "^2.0.1",
    "remark-frontmatter": "^2.0.0",
    "remark-react": "^8.0.0",
--- a/ui/comments.js
+++ b/ui/comments.js
@ -6,6 +6,8 @@ const Comments = {
  enabled: Boolean(COMMENT_SERVER_API),

  moderation_block: (params: ModerationBlockParams) => fetchCommentsApi('moderation.Block', params),
+  moderation_unblock: (params: ModerationBlockParams) => fetchCommentsApi('moderation.UnBlock', params),
+  moderation_block_list: (params: ModerationBlockParams) => fetchCommentsApi('moderation.BlockedList', params),
  comment_list: (params: CommentListParams) => fetchCommentsApi('comment.List', params),
  comment_abandon: (params: CommentAbandonParams) => fetchCommentsApi('comment.Abandon', params),
 };
@ -30,8 +32,8 @@ function fetchCommentsApi(method: string, params: {}) {
  };

  return fetch(url, options)
-    .then(res => res.json())
-    .then(res => res.result);
+    .then((res) => res.json())
+    .then((res) => res.result);
 }

 export default Comments;
--- a/ui/component/abandonedChannelPreview/index.js
+++ b/ui/component/abandonedChannelPreview/index.js
@ -1,14 +1,6 @@
 import { connect } from 'react-redux';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
-import { doChannelUnsubscribe } from 'redux/actions/subscriptions';
-import { doOpenModal } from 'redux/actions/app';
 import AbandonedChannelPreview from './view';

-const select = (state, props) => ({
-  blockedChannelUris: selectBlockedChannels(state),
-});
+const select = (state, props) => ({});

-export default connect(select, {
-  doChannelUnsubscribe,
-  doOpenModal,
-})(AbandonedChannelPreview);
+export default connect(select)(AbandonedChannelPreview);
--- a/ui/component/abandonedChannelPreview/view.jsx
+++ b/ui/component/abandonedChannelPreview/view.jsx
@ -2,28 +2,18 @@
 import React from 'react';
 import classnames from 'classnames';
 import ChannelThumbnail from 'component/channelThumbnail';
-import Button from 'component/button';
 import { parseURI } from 'lbry-redux';
-import * as ICONS from '../../constants/icons';
-import * as MODALS from 'constants/modal_types';
-
-type SubscriptionArgs = {
-  channelName: string,
-  uri: string,
-};
+import ChannelBlockButton from 'component/channelBlockButton';
+import ChannelMuteButton from 'component/channelMuteButton';

 type Props = {
  uri: string,
-  doChannelUnsubscribe: SubscriptionArgs => void,
  type: string,
-  blockedChannelUris: Array<string>,
-  doOpenModal: (string, {}) => void,
 };

 function AbandonedChannelPreview(props: Props) {
-  const { uri, doChannelUnsubscribe, type, blockedChannelUris, doOpenModal } = props;
+  const { uri, type } = props;
  const { channelName } = parseURI(uri);
-  const isBlockedChannel = blockedChannelUris.includes(uri);

  return (
    <li className={classnames('claim-preview__wrapper', 'claim-preview__wrapper--notice')}>
@ -37,31 +27,10 @@ function AbandonedChannelPreview(props: Props) {
            <div className="media__subtitle">{__(`This channel may have been unpublished.`)}</div>
          </div>
          <div className="claim-preview__actions">
-            {isBlockedChannel && (
-              <Button
-                iconColor="red"
-                icon={ICONS.UNBLOCK}
-                button={'alt'}
-                label={__('Unblock')}
-                onClick={() => doOpenModal(MODALS.REMOVE_BLOCKED, { blockedUri: uri })}
-              />
-            )}
-            {/* SubscribeButton uses resolved permanentUri; modifying it didn't seem worth it. */}
-            {!isBlockedChannel && (
-              <Button
-                iconColor="red"
-                icon={ICONS.UNSUBSCRIBE}
-                button={'alt'}
-                label={__('Unfollow')}
-                onClick={e => {
-                  e.stopPropagation();
-                  doChannelUnsubscribe({
-                    channelName: `@${channelName}`,
-                    uri,
-                  });
-                }}
-              />
-            )}
+            <div className="section__actions">
+              <ChannelBlockButton uri={uri} />
+              <ChannelMuteButton uri={uri} />
+            </div>
          </div>
        </div>
      </div>
--- a/ui/component/app/index.js
+++ b/ui/component/app/index.js
@ -27,9 +27,10 @@ import {
  doSetActiveChannel,
  doSetIncognito,
 } from 'redux/actions/app';
+import { doFetchModBlockedList } from 'redux/actions/comments';
 import App from './view';

-const select = state => ({
+const select = (state) => ({
  user: selectUser(state),
  accessToken: selectAccessToken(state),
  theme: selectThemePath(state),
@ -48,18 +49,19 @@ const select = state => ({
  myChannelUrls: selectMyChannelUrls(state),
 });

-const perform = dispatch => ({
+const perform = (dispatch) => ({
  fetchAccessToken: () => dispatch(doFetchAccessToken()),
  fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
-  setLanguage: language => dispatch(doSetLanguage(language)),
+  setLanguage: (language) => dispatch(doSetLanguage(language)),
  signIn: () => dispatch(doSignIn()),
  requestDownloadUpgrade: () => dispatch(doDownloadUpgradeRequested()),
  updatePreferences: () => dispatch(doGetAndPopulatePreferences()),
  getWalletSyncPref: () => dispatch(doGetWalletSyncPreference()),
-  syncLoop: noInterval => dispatch(doSyncLoop(noInterval)),
+  syncLoop: (noInterval) => dispatch(doSyncLoop(noInterval)),
  setReferrer: (referrer, doClaim) => dispatch(doUserSetReferrer(referrer, doClaim)),
  setActiveChannelIfNotSet: () => dispatch(doSetActiveChannel()),
  setIncognito: () => dispatch(doSetIncognito()),
+  fetchModBlockedList: () => dispatch(doFetchModBlockedList()),
 });

 export default hot(connect(select, perform)(App));
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@ -56,14 +56,14 @@ type Props = {
    goForward: () => void,
    index: number,
    length: number,
-    push: string => void,
+    push: (string) => void,
  },
  fetchAccessToken: () => void,
  fetchChannelListMine: () => void,
  signIn: () => void,
  requestDownloadUpgrade: () => void,
  onSignedIn: () => void,
-  setLanguage: string => void,
+  setLanguage: (string) => void,
  isUpgradeAvailable: boolean,
  autoUpdateDownloaded: boolean,
  updatePreferences: () => Promise<any>,
@ -83,7 +83,8 @@ type Props = {
  activeChannelClaim: ?ChannelClaim,
  myChannelUrls: ?Array<string>,
  setActiveChannelIfNotSet: () => void,
-  setIncognito: boolean => void,
+  setIncognito: (boolean) => void,
+  fetchModBlockedList: () => void,
 };

 function App(props: Props) {
@ -114,6 +115,7 @@ function App(props: Props) {
    activeChannelClaim,
    setActiveChannelIfNotSet,
    setIncognito,
+    fetchModBlockedList,
  } = props;

  const appRef = useRef();
@ -134,7 +136,7 @@ function App(props: Props) {
  const showUpgradeButton =
    (autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable)) && !upgradeNagClosed;
  // referral claiming
-  const referredRewardAvailable = rewards && rewards.some(reward => reward.reward_type === REWARDS.TYPE_REFEREE);
+  const referredRewardAvailable = rewards && rewards.some((reward) => reward.reward_type === REWARDS.TYPE_REFEREE);
  const urlParams = new URLSearchParams(search);
  const rawReferrerParam = urlParams.get('r');
  const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#');
@ -166,7 +168,7 @@ function App(props: Props) {

  useEffect(() => {
    if (!uploadCount) return;
-    const handleBeforeUnload = event => {
+    const handleBeforeUnload = (event) => {
      event.preventDefault();
      event.returnValue = 'magic'; // without setting this to something it doesn't work
    };
@ -176,7 +178,7 @@ function App(props: Props) {

  // allows user to navigate history using the forward and backward buttons on a mouse
  useEffect(() => {
-    const handleForwardAndBackButtons = e => {
+    const handleForwardAndBackButtons = (e) => {
      switch (e.button) {
        case MOUSE_BACK_BTN:
          history.index > 0 && history.goBack();
@ -192,7 +194,7 @@ function App(props: Props) {

  // allows user to pause miniplayer using the spacebar without the page scrolling down
  useEffect(() => {
-    const handleKeyPress = e => {
+    const handleKeyPress = (e) => {
      if (e.key === ' ' && e.target === document.body) {
        e.preventDefault();
      }
@ -244,6 +246,10 @@ function App(props: Props) {
    } else if (hasNoChannels) {
      setIncognito(true);
    }
+
+    if (hasMyChannels) {
+      fetchModBlockedList();
+    }
  }, [hasMyChannels, hasNoChannels, hasActiveChannelClaim, setActiveChannelIfNotSet, setIncognito]);

  useEffect(() => {
@ -358,7 +364,7 @@ function App(props: Props) {
        [`${MAIN_WRAPPER_CLASS}--scrollbar`]: useCustomScrollbar,
      })}
      ref={appRef}
-      onContextMenu={IS_WEB ? undefined : e => openContextMenu(e)}
+      onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)}
    >
      {IS_WEB && lbryTvApiStatus === STATUS_DOWN ? (
        <Yrbl
--- a/ui/component/blockButton/index.js
+++ b/ui/component/blockButton/index.js
@ -1,18 +0,0 @@
-import { connect } from 'react-redux';
-import { makeSelectClaimIsMine, makeSelectShortUrlForUri, makeSelectPermanentUrlForUri } from 'lbry-redux';
-import { selectChannelIsBlocked } from 'redux/selectors/blocked';
-import { doToast } from 'redux/actions/notifications';
-import { doToggleBlockChannel } from 'redux/actions/blocked';
-import BlockButton from './view';
-
-const select = (state, props) => ({
-  channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
-  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  shortUrl: makeSelectShortUrlForUri(props.uri)(state),
-  permanentUrl: makeSelectPermanentUrlForUri(props.uri)(state),
-});
-
-export default connect(select, {
-  toggleBlockChannel: doToggleBlockChannel,
-  doToast,
-})(BlockButton);
--- a/ui/component/blockButton/view.jsx
+++ b/ui/component/blockButton/view.jsx
@ -1,49 +0,0 @@
-// @flow
-import * as ICONS from 'constants/icons';
-import * as PAGES from 'constants/pages';
-import React, { useRef } from 'react';
-import Button from 'component/button';
-import useHover from 'effects/use-hover';
-
-type Props = {
-  permanentUrl: ?string,
-  shortUrl: string,
-  isSubscribed: boolean,
-  toggleBlockChannel: (uri: string) => void,
-  channelIsBlocked: boolean,
-  claimIsMine: boolean,
-  doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
-};
-
-export default function BlockButton(props: Props) {
-  const { permanentUrl, shortUrl, toggleBlockChannel, channelIsBlocked, claimIsMine, doToast } = props;
-
-  const blockRef = useRef();
-  const isHovering = useHover(blockRef);
-  const blockLabel = channelIsBlocked ? __('Blocked') : __('Block');
-  const blockTitlePrefix = channelIsBlocked ? __('Unblock this channel') : __('Block this channel');
-  const blockedOverride = channelIsBlocked && isHovering && __('Unblock');
-
-  return permanentUrl && (!claimIsMine || channelIsBlocked) ? (
-    <Button
-      ref={blockRef}
-      icon={ICONS.BLOCK}
-      button={'alt'}
-      label={blockedOverride || blockLabel}
-      title={blockTitlePrefix}
-      requiresAuth={IS_WEB}
-      onClick={e => {
-        e.stopPropagation();
-        if (!channelIsBlocked) {
-          doToast({
-            message: __('Blocked %channelUrl%', { channelUrl: shortUrl }),
-            linkText: __('Manage'),
-            linkTarget: `/${PAGES.BLOCKED}`,
-          });
-        }
-
-        toggleBlockChannel(permanentUrl);
-      }}
-    />
-  ) : null;
-}
--- a/ui/component/channelBlockButton/index.js
+++ b/ui/component/channelBlockButton/index.js
@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { doCommentModUnBlock, doCommentModBlock } from 'redux/actions/comments';
+import { makeSelectChannelIsBlocked, makeSelectUriIsBlockingOrUnBlocking } from 'redux/selectors/comments';
+import ChannelBlockButton from './view';
+
+const select = (state, props) => ({
+  isBlocked: makeSelectChannelIsBlocked(props.uri)(state),
+  isBlockingOrUnBlocking: makeSelectUriIsBlockingOrUnBlocking(props.uri)(state),
+});
+
+export default connect(select, {
+  doCommentModUnBlock,
+  doCommentModBlock,
+})(ChannelBlockButton);
--- a/ui/component/channelBlockButton/view.jsx
+++ b/ui/component/channelBlockButton/view.jsx
@ -0,0 +1,41 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+
+type Props = {
+  uri: string,
+  isBlocked: boolean,
+  isBlockingOrUnBlocking: boolean,
+  doCommentModUnBlock: (string) => void,
+  doCommentModBlock: (string) => void,
+};
+
+function ChannelBlockButton(props: Props) {
+  const { uri, doCommentModUnBlock, doCommentModBlock, isBlocked, isBlockingOrUnBlocking } = props;
+
+  function handleClick() {
+    if (isBlocked) {
+      doCommentModUnBlock(uri);
+    } else {
+      doCommentModBlock(uri);
+    }
+  }
+
+  return (
+    <Button
+      button={isBlocked ? 'alt' : 'secondary'}
+      label={
+        isBlocked
+          ? isBlockingOrUnBlocking
+            ? __('Unblocking...')
+            : __('Unblock')
+          : isBlockingOrUnBlocking
+          ? __('Blocking...')
+          : __('Block')
+      }
+      onClick={handleClick}
+    />
+  );
+}
+
+export default ChannelBlockButton;
--- a/ui/component/channelContent/index.js
+++ b/ui/component/channelContent/index.js
@ -8,7 +8,7 @@ import {
  makeSelectClaimForUri,
  SETTINGS,
 } from 'lbry-redux';
-import { selectChannelIsBlocked } from 'redux/selectors/blocked';
+import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { withRouter } from 'react-router';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
@ -24,7 +24,7 @@ const select = (state, props) => {
    fetching: makeSelectFetchingChannelClaims(props.uri)(state),
    totalPages: makeSelectTotalPagesInChannelSearch(props.uri, PAGE_SIZE)(state),
    channelIsMine: makeSelectClaimIsMine(props.uri)(state),
-    channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
+    channelIsBlocked: makeSelectChannelIsMuted(props.uri)(state),
    claim: props.uri && makeSelectClaimForUri(props.uri)(state),
    isAuthenticated: selectUserVerifiedEmail(state),
    showMature: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
--- a/ui/component/channelMuteButton/index.js
+++ b/ui/component/channelMuteButton/index.js
@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { doToggleMuteChannel } from 'redux/actions/blocked';
+import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
+import ChannelMuteButton from './view';
+
+const select = (state, props) => ({
+  isMuted: makeSelectChannelIsMuted(props.uri)(state),
+});
+
+export default connect(select, {
+  doToggleMuteChannel,
+})(ChannelMuteButton);
--- a/ui/component/channelMuteButton/view.jsx
+++ b/ui/component/channelMuteButton/view.jsx
@ -0,0 +1,24 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+
+type Props = {
+  uri: string,
+  isMuted: boolean,
+  channelClaim: ?ChannelClaim,
+  doToggleMuteChannel: (string) => void,
+};
+
+function ChannelBlockButton(props: Props) {
+  const { uri, doToggleMuteChannel, isMuted } = props;
+
+  return (
+    <Button
+      button={isMuted ? 'alt' : 'secondary'}
+      label={isMuted ? __('Unmute') : __('Mute')}
+      onClick={() => doToggleMuteChannel(uri)}
+    />
+  );
+}
+
+export default ChannelBlockButton;
--- a/ui/component/channelStakedIndicator/view.jsx
+++ b/ui/component/channelStakedIndicator/view.jsx
@ -11,6 +11,7 @@ import CreditAmount from 'component/common/credit-amount';
 type Props = {
  channelClaim: ChannelClaim,
  large?: boolean,
+  inline?: boolean,
 };

 function getChannelLevel(amount: number): number {
@ -47,7 +48,7 @@ function getChannelIcon(level: number): string {
 }

 function ChannelStakedIndicator(props: Props) {
-  const { channelClaim, large = false } = props;
+  const { channelClaim, large = false, inline = false } = props;

  if (!channelClaim || !channelClaim.meta) {
    return null;
@ -79,6 +80,7 @@ function ChannelStakedIndicator(props: Props) {
        <div
          className={classnames('channel-staked__wrapper', {
            'channel-staked__wrapper--large': large,
+            'channel-staked__wrapper--inline': inline,
          })}
        >
          <LevelIcon icon={icon} large={large} isControlling={isControlling} />
--- a/ui/component/claimList/view.jsx
+++ b/ui/component/claimList/view.jsx
@ -32,12 +32,12 @@ type Props = {
  showUnresolvedClaims?: boolean,
  renderProperties: ?(Claim) => Node,
  includeSupportAction?: boolean,
-  hideBlock: boolean,
  injectedItem: ?Node,
  timedOutMessage?: Node,
  tileLayout?: boolean,
  renderActions?: (Claim) => ?Node,
  searchInLanguage: boolean,
+  hideMenu?: boolean,
 };

 export default function ClaimList(props: Props) {
@ -57,12 +57,12 @@ export default function ClaimList(props: Props) {
    showUnresolvedClaims,
    renderProperties,
    includeSupportAction,
-    hideBlock,
    injectedItem,
    timedOutMessage,
    tileLayout = false,
    renderActions,
    searchInLanguage,
+    hideMenu,
  } = props;

  const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@ -149,12 +149,12 @@ export default function ClaimList(props: Props) {
              <ClaimPreview
                uri={uri}
                type={type}
+                hideMenu={hideMenu}
                includeSupportAction={includeSupportAction}
                showUnresolvedClaim={showUnresolvedClaims}
                properties={renderProperties || (type !== 'small' ? undefined : false)}
                renderActions={renderActions}
                showUserBlocked={showHiddenByUser}
-                hideBlock={hideBlock}
                customShouldHide={(claim: StreamClaim) => {
                  // Hack to hide spee.ch thumbnail publishes
                  // If it meets these requirements, it was probably uploaded here:
--- a/ui/component/claimListDiscover/index.js
+++ b/ui/component/claimListDiscover/index.js
@ -7,12 +7,12 @@ import {
  SETTINGS,
 } from 'lbry-redux';
 import { selectFollowedTags } from 'redux/selectors/tags';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { makeSelectClientSetting, selectLanguage } from 'redux/selectors/settings';
 import ClaimListDiscover from './view';

-const select = state => ({
+const select = (state) => ({
  followedTags: selectFollowedTags(state),
  claimSearchByQuery: selectClaimSearchByQuery(state),
  claimSearchByQueryLastPageReached: selectClaimSearchByQueryLastPageReached(state),
@ -20,7 +20,7 @@ const select = state => ({
  showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
  hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
  languageSetting: selectLanguage(state),
-  hiddenUris: selectBlockedChannels(state),
+  hiddenUris: selectMutedChannels(state),
  searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
 });

--- a/ui/component/claimListDiscover/view.jsx
+++ b/ui/component/claimListDiscover/view.jsx
@ -20,11 +20,11 @@ type Props = {
  doClaimSearch: ({}) => void,
  loading: boolean,
  personalView: boolean,
-  doToggleTagFollowDesktop: string => void,
+  doToggleTagFollowDesktop: (string) => void,
  meta?: Node,
  showNsfw: boolean,
  hideReposts: boolean,
-  history: { action: string, push: string => void, replace: string => void },
+  history: { action: string, push: (string) => void, replace: (string) => void },
  location: { search: string, pathname: string },
  claimSearchByQuery: {
    [string]: Array<string>,
@ -43,13 +43,12 @@ type Props = {
  header?: Node,
  headerLabel?: string | Node,
  name?: string,
-  hideBlock?: boolean,
  hideAdvancedFilter?: boolean,
  claimType?: Array<string>,
  defaultClaimType?: Array<string>,
  streamType?: string | Array<string>,
  defaultStreamType?: string | Array<string>,
-  renderProperties?: Claim => Node,
+  renderProperties?: (Claim) => Node,
  includeSupportAction?: boolean,
  repostedClaimId?: string,
  pageSize?: number,
@ -89,7 +88,6 @@ function ClaimListDiscover(props: Props) {
    name,
    claimType,
    pageSize,
-    hideBlock,
    defaultClaimType,
    streamType,
    defaultStreamType,
@ -120,7 +118,7 @@ function ClaimListDiscover(props: Props) {
  const isLargeScreen = useIsLargeScreen();
  const [orderParamEntry, setOrderParamEntry] = usePersistedState(`entry-${location.pathname}`, CS.ORDER_BY_TRENDING);
  const [orderParamUser, setOrderParamUser] = usePersistedState(`orderUser-${location.pathname}`, CS.ORDER_BY_TRENDING);
-  const followed = (followedTags && followedTags.map(t => t.name)) || [];
+  const followed = (followedTags && followedTags.map((t) => t.name)) || [];
  const urlParams = new URLSearchParams(search);
  const tagsParam = // can be 'x,y,z' or 'x' or ['x','y'] or CS.CONSTANT
    (tags && getParamFromTags(tags)) ||
@ -206,7 +204,7 @@ function ClaimListDiscover(props: Props) {
    no_totals: true,
    not_channel_ids:
      // If channelIdsParam were passed in, we don't need not_channel_ids
-      !channelIdsParam && hiddenUris && hiddenUris.length ? hiddenUris.map(hiddenUri => hiddenUri.split('#')[1]) : [],
+      !channelIdsParam && hiddenUris && hiddenUris.length ? hiddenUris.map((hiddenUri) => hiddenUri.split('#')[1]) : [],
    not_tags: !showNsfw ? MATURE_TAGS : [],
    order_by:
      orderParam === CS.ORDER_BY_TRENDING
@ -247,12 +245,7 @@ function ClaimListDiscover(props: Props) {

  if (claimType !== CS.CLAIM_CHANNEL) {
    if (orderParam === CS.ORDER_BY_TOP && freshnessParam !== CS.FRESH_ALL) {
-      options.release_time = `>${Math.floor(
-        moment()
-          .subtract(1, freshnessParam)
-          .startOf('hour')
-          .unix()
-      )}`;
+      options.release_time = `>${Math.floor(moment().subtract(1, freshnessParam).startOf('hour').unix())}`;
    } else if (orderParam === CS.ORDER_BY_NEW || orderParam === CS.ORDER_BY_TRENDING) {
      // Warning - hack below
      // If users are following more than 10 channels or tags, limit results to stuff less than a year old
@ -263,29 +256,15 @@ function ClaimListDiscover(props: Props) {
        (options.channel_ids && options.channel_ids.length > 20) ||
        (options.any_tags && options.any_tags.length > 20)
      ) {
-        options.release_time = `>${Math.floor(
-          moment()
-            .subtract(3, CS.FRESH_MONTH)
-            .startOf('week')
-            .unix()
-        )}`;
+        options.release_time = `>${Math.floor(moment().subtract(3, CS.FRESH_MONTH).startOf('week').unix())}`;
      } else if (
        (options.channel_ids && options.channel_ids.length > 10) ||
        (options.any_tags && options.any_tags.length > 10)
      ) {
-        options.release_time = `>${Math.floor(
-          moment()
-            .subtract(1, CS.FRESH_YEAR)
-            .startOf('week')
-            .unix()
-        )}`;
+        options.release_time = `>${Math.floor(moment().subtract(1, CS.FRESH_YEAR).startOf('week').unix())}`;
      } else {
        // Hack for at least the New page until https://github.com/lbryio/lbry-sdk/issues/2591 is fixed
-        options.release_time = `<${Math.floor(
-          moment()
-            .startOf('minute')
-            .unix()
-        )}`;
+        options.release_time = `<${Math.floor(moment().startOf('minute').unix())}`;
      }
    }
  }
@ -333,14 +312,14 @@ function ClaimListDiscover(props: Props) {
  if (hideReposts && !options.reposted_claim_id && !forceShowReposts) {
    if (Array.isArray(options.claim_type)) {
      if (options.claim_type.length > 1) {
-        options.claim_type = options.claim_type.filter(claimType => claimType !== 'repost');
+        options.claim_type = options.claim_type.filter((claimType) => claimType !== 'repost');
      }
    } else {
      options.claim_type = ['stream', 'channel'];
    }
  }

-  const hasMatureTags = tagsParam && tagsParam.split(',').some(t => MATURE_TAGS.includes(t));
+  const hasMatureTags = tagsParam && tagsParam.split(',').some((t) => MATURE_TAGS.includes(t));
  const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
  const claimSearchResult = claimSearchByQuery[claimSearchCacheQuery];
  const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[claimSearchCacheQuery];
@ -499,7 +478,6 @@ function ClaimListDiscover(props: Props) {
            timedOutMessage={timedOutMessage}
            renderProperties={renderProperties}
            includeSupportAction={includeSupportAction}
-            hideBlock={hideBlock}
            injectedItem={injectedItem}
          />
          {loading && (
@ -527,7 +505,6 @@ function ClaimListDiscover(props: Props) {
            timedOutMessage={timedOutMessage}
            renderProperties={renderProperties}
            includeSupportAction={includeSupportAction}
-            hideBlock={hideBlock}
            injectedItem={injectedItem}
          />
          {loading && new Array(dynamicPageSize).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
--- a/ui/component/claimMenuList/claim-preview-loading.jsx
+++ b/ui/component/claimMenuList/claim-preview-loading.jsx
@ -0,0 +1,30 @@
+// @flow
+import classnames from 'classnames';
+import React from 'react';
+
+type Props = {
+  isChannel: boolean,
+  type: string,
+};
+
+function ClaimPreviewLoading(props: Props) {
+  const { isChannel, type } = props;
+  return (
+    <li
+      className={classnames('claim-preview__wrapper', {
+        'claim-preview__wrapper--channel': isChannel && type !== 'inline',
+        'claim-preview__wrapper--inline': type === 'inline',
+      })}
+    >
+      <div className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })}>
+        <div className="placeholder media__thumb" />
+        <div className="placeholder__wrapper">
+          <div className="placeholder claim-preview__title" />
+          <div className="placeholder media__subtitle" />
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export default ClaimPreviewLoading;
--- a/ui/component/claimMenuList/claim-preview-no-content.jsx
+++ b/ui/component/claimMenuList/claim-preview-no-content.jsx
@ -0,0 +1,32 @@
+// @flow
+import classnames from 'classnames';
+import React from 'react';
+import Empty from 'component/common/empty';
+
+type Props = {
+  isChannel: boolean,
+  type: string,
+};
+
+function ClaimPreviewNoContent(props: Props) {
+  const { isChannel, type } = props;
+  return (
+    <li
+      className={classnames('claim-preview__wrapper', {
+        'claim-preview__wrapper--channel': isChannel && type !== 'inline',
+        'claim-preview__wrapper--inline': type === 'inline',
+      })}
+    >
+      <div
+        className={classnames('claim-preview claim-preview--inactive', {
+          'claim-preview--large': type === 'large',
+          'claim-preview__empty': true,
+        })}
+      >
+        <Empty text={__('Nothing found here. Like big tech ethics.')} />
+      </div>
+    </li>
+  );
+}
+
+export default ClaimPreviewNoContent;
--- a/ui/component/claimMenuList/claim-preview-no-mature.jsx
+++ b/ui/component/claimMenuList/claim-preview-no-mature.jsx
@ -0,0 +1,33 @@
+// @flow
+import classnames from 'classnames';
+import React from 'react';
+import Empty from 'component/common/empty';
+
+type Props = {
+  isChannel: boolean,
+  type: string,
+  message: string,
+};
+
+function ClaimPreviewHidden(props: Props) {
+  const { isChannel, type, message } = props;
+  return (
+    <li
+      className={classnames('claim-preview__wrapper', {
+        'claim-preview__wrapper--channel': isChannel && type !== 'inline',
+        'claim-preview__wrapper--inline': type === 'inline',
+      })}
+    >
+      <div
+        className={classnames('claim-preview  claim-preview--inactive claim-preview--empty', {
+          'claim-preview--large': type === 'large',
+        })}
+      >
+        <div className="media__thumb" />
+        <Empty text={message} />
+      </div>
+    </li>
+  );
+}
+
+export default ClaimPreviewHidden;
--- a/ui/component/claimMenuList/index.js
+++ b/ui/component/claimMenuList/index.js
@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri, makeSelectClaimIsMine } from 'lbry-redux';
+import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
+import { doToggleMuteChannel } from 'redux/actions/blocked';
+import { doCommentModBlock, doCommentModUnBlock } from 'redux/actions/comments';
+import { makeSelectChannelIsBlocked } from 'redux/selectors/comments';
+import ClaimPreview from './view';
+
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  channelIsMuted: makeSelectChannelIsMuted(props.uri)(state),
+  channelIsBlocked: makeSelectChannelIsBlocked(props.uri)(state),
+});
+
+export default connect(select, {
+  doToggleMuteChannel,
+  doCommentModBlock,
+  doCommentModUnBlock,
+})(ClaimPreview);
--- a/ui/component/claimMenuList/view.jsx
+++ b/ui/component/claimMenuList/view.jsx
@ -0,0 +1,86 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import React from 'react';
+import classnames from 'classnames';
+import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
+import Icon from 'component/common/icon';
+
+type Props = {
+  claim: ?Claim,
+  inline?: boolean,
+  claimIsMine: boolean,
+  channelIsMuted: boolean,
+  channelIsBlocked: boolean,
+  doToggleMuteChannel: (string) => void,
+  doCommentModBlock: (string) => void,
+  doCommentModUnBlock: (string) => void,
+};
+
+function ClaimMenuList(props: Props) {
+  const {
+    claim,
+    inline = false,
+    claimIsMine,
+    doToggleMuteChannel,
+    channelIsMuted,
+    channelIsBlocked,
+    doCommentModBlock,
+    doCommentModUnBlock,
+  } = props;
+  const channelUri =
+    claim &&
+    (claim.value_type === 'channel'
+      ? claim.permanent_url
+      : claim.signing_channel && claim.signing_channel.permanent_url);
+
+  if (!channelUri) {
+    return null;
+  }
+
+  function handleToggleMute() {
+    doToggleMuteChannel(channelUri);
+  }
+
+  function handleToggleBlock() {
+    if (channelIsBlocked) {
+      doCommentModUnBlock(channelUri);
+    } else {
+      doCommentModBlock(channelUri);
+    }
+  }
+
+  return (
+    <Menu>
+      <MenuButton
+        className={classnames('menu__button', { 'claim__menu-button': !inline, 'claim__menu-button--inline': inline })}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        <Icon size={20} icon={ICONS.MORE_VERTICAL} />
+      </MenuButton>
+      <MenuList className="menu__list">
+        {!claimIsMine && (
+          <>
+            <MenuItem className="comment__menu-option" onSelect={handleToggleBlock}>
+              <div className="menu__link">
+                <Icon aria-hidden icon={ICONS.BLOCK} />
+                {channelIsBlocked ? __('Unblock Channel') : __('Block Channel')}
+              </div>
+            </MenuItem>
+
+            <MenuItem className="comment__menu-option" onSelect={handleToggleMute}>
+              <div className="menu__link">
+                <Icon aria-hidden icon={ICONS.MUTE} />
+                {channelIsMuted ? __('Unmute Channel') : __('Mute Channel')}
+              </div>
+            </MenuItem>
+          </>
+        )}
+      </MenuList>
+    </Menu>
+  );
+}
+
+export default ClaimMenuList;
--- a/ui/component/claimPreview/index.js
+++ b/ui/component/claimPreview/index.js
@ -11,7 +11,7 @@ import {
  makeSelectClaimWasPurchased,
  makeSelectStreamingUrlForUri,
 } from 'lbry-redux';
-import { selectBlockedChannels, selectChannelIsBlocked } from 'redux/selectors/blocked';
+import { selectMutedChannels, makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
@ -30,17 +30,17 @@ const select = (state, props) => ({
  nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state),
  blackListedOutpoints: selectBlackListedOutpoints(state),
  filteredOutpoints: selectFilteredOutpoints(state),
-  blockedChannelUris: selectBlockedChannels(state),
+  blockedChannelUris: selectMutedChannels(state),
  hasVisitedUri: props.uri && makeSelectHasVisitedUri(props.uri)(state),
-  channelIsBlocked: props.uri && selectChannelIsBlocked(props.uri)(state),
+  channelIsBlocked: props.uri && makeSelectChannelIsMuted(props.uri)(state),
  isSubscribed: props.uri && makeSelectIsSubscribed(props.uri, true)(state),
  streamingUrl: props.uri && makeSelectStreamingUrlForUri(props.uri)(state),
  wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
 });

-const perform = dispatch => ({
-  resolveUri: uri => dispatch(doResolveUri(uri)),
-  getFile: uri => dispatch(doFileGet(uri, false)),
+const perform = (dispatch) => ({
+  resolveUri: (uri) => dispatch(doResolveUri(uri)),
+  getFile: (uri) => dispatch(doFileGet(uri, false)),
 });

 export default connect(select, perform)(ClaimPreview);
--- a/ui/component/claimPreview/view.jsx
+++ b/ui/component/claimPreview/view.jsx
@ -3,7 +3,6 @@ import type { Node } from 'react';
 import React, { useEffect, forwardRef } from 'react';
 import { NavLink, withRouter } from 'react-router-dom';
 import classnames from 'classnames';
-import { SIMPLE_SITE } from 'config';
 import { parseURI } from 'lbry-redux';
 // @if TARGET='app'
 import { openClaimPreviewMenu } from 'util/context-menu';
@ -16,7 +15,6 @@ import FileProperties from 'component/fileProperties';
 import ClaimTags from 'component/claimTags';
 import SubscribeButton from 'component/subscribeButton';
 import ChannelThumbnail from 'component/channelThumbnail';
-import BlockButton from 'component/blockButton';
 import ClaimSupportButton from 'component/claimSupportButton';
 import useGetThumbnail from 'effects/use-get-thumbnail';
 import ClaimPreviewTitle from 'component/claimPreviewTitle';
@ -25,6 +23,8 @@ import ClaimRepostAuthor from 'component/claimRepostAuthor';
 import FileDownloadLink from 'component/fileDownloadLink';
 import AbandonedChannelPreview from 'component/abandonedChannelPreview';
 import PublishPending from 'component/publishPending';
+import ClaimMenuList from 'component/claimMenuList';
+import ChannelStakedIndicator from 'component/channelStakedIndicator';
 import ClaimPreviewLoading from './claim-preview-loading';
 import ClaimPreviewHidden from './claim-preview-no-mature';
 import ClaimPreviewNoContent from './claim-preview-no-content';
@ -55,12 +55,10 @@ type Props = {
  }>,
  blockedChannelUris: Array<string>,
  channelIsBlocked: boolean,
-  isSubscribed: boolean,
  actions: boolean | Node | string | number,
  properties: boolean | Node | string | number | ((Claim) => Node),
  empty?: Node,
  onClick?: (any) => any,
-  hideBlock?: boolean,
  streamingUrl: ?string,
  getFile: (string) => void,
  customShouldHide?: (Claim) => boolean,
@ -72,6 +70,7 @@ type Props = {
  wrapperElement?: string,
  hideRepostLabel?: boolean,
  repostUrl?: string,
+  hideMenu?: boolean,
 };

 const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@ -87,7 +86,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
    // is the claim consider nsfw?
    nsfw,
    claimIsMine,
-    isSubscribed,
    streamingUrl,
    // user properties
    channelIsBlocked,
@ -113,13 +111,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
    hideActions = false,
    properties,
    onClick,
-    hideBlock,
    actions,
    blockedChannelUris,
    blackListedOutpoints,
    filteredOutpoints,
    includeSupportAction,
    renderActions,
+    hideMenu = false,
    // repostUrl,
  } = props;
  const WrapperElement = wrapperElement || 'li';
@ -275,7 +273,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
      >
        {isChannelUri && claim ? (
          <UriIndicator uri={contentUri} link>
-            <ChannelThumbnail uri={contentUri} obscure={channelIsBlocked} />
+            <ChannelThumbnail uri={contentUri} />
          </UriIndicator>
        ) : (
          <>
@ -313,9 +311,9 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                </NavLink>
              )}

-              {type !== 'small' && !isChannelUri && signingChannel && SIMPLE_SITE && (
+              {/* {type !== 'small' && !isChannelUri && signingChannel && SIMPLE_SITE && (
                <ChannelThumbnail uri={signingChannel.permanent_url} />
-              )}
+              )} */}
            </div>
            <ClaimPreviewSubtitle uri={uri} type={type} />
            {(pending || !!reflectingProgress) && <PublishPending uri={uri} />}
@ -329,12 +327,17 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                    actions
                  ) : (
                    <div className="claim-preview__primary-actions">
+                      {!isChannelUri && signingChannel && (
+                        <div className="claim-preview__channel-staked">
+                          <ChannelThumbnail uri={signingChannel.permanent_url} hideStakedIndicator />
+                          <ChannelStakedIndicator uri={signingChannel.permanent_url} inline />
+                        </div>
+                      )}
+
                      {isChannelUri && !channelIsBlocked && !claimIsMine && (
                        <SubscribeButton uri={contentUri.startsWith('lbry://') ? contentUri : `lbry://${contentUri}`} />
                      )}
-                      {!hideBlock && isChannelUri && !isSubscribed && (!claimIsMine || channelIsBlocked) && (
-                        <BlockButton uri={contentUri.startsWith('lbry://') ? contentUri : `lbry://${contentUri}`} />
-                      )}
+
                      {includeSupportAction && <ClaimSupportButton uri={uri} />}
                    </div>
                  )}
@ -355,6 +358,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
          )}
        </div>
      </div>
+      {!hideMenu && <ClaimMenuList uri={uri} />}
    </WrapperElement>
  );
 });
--- a/ui/component/claimPreviewTile/index.js
+++ b/ui/component/claimPreviewTile/index.js
@ -9,7 +9,7 @@ import {
  makeSelectChannelForClaimUri,
  makeSelectClaimIsNsfw,
 } from 'lbry-redux';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import ClaimPreviewTile from './view';
@ -22,14 +22,14 @@ const select = (state, props) => ({
  title: props.uri && makeSelectTitleForUri(props.uri)(state),
  blackListedOutpoints: selectBlackListedOutpoints(state),
  filteredOutpoints: selectFilteredOutpoints(state),
-  blockedChannelUris: selectBlockedChannels(state),
+  blockedChannelUris: selectMutedChannels(state),
  showMature: selectShowMatureContent(state),
  isMature: makeSelectClaimIsNsfw(props.uri)(state),
 });

-const perform = dispatch => ({
-  resolveUri: uri => dispatch(doResolveUri(uri)),
-  getFile: uri => dispatch(doFileGet(uri, false)),
+const perform = (dispatch) => ({
+  resolveUri: (uri) => dispatch(doResolveUri(uri)),
+  getFile: (uri) => dispatch(doFileGet(uri, false)),
 });

 export default connect(select, perform)(ClaimPreviewTile);
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/ui/component/claimPreviewTile/view.jsx
@ -14,6 +14,8 @@ import { parseURI } from 'lbry-redux';
 import FileProperties from 'component/fileProperties';
 import FileDownloadLink from 'component/fileDownloadLink';
 import ClaimRepostAuthor from 'component/claimRepostAuthor';
+import ClaimMenuList from 'component/claimMenuList';
+
 // @if TARGET='app'
 import { openClaimPreviewMenu } from 'util/context-menu';
 // @endif
@ -194,6 +196,7 @@ function ClaimPreviewTile(props: Props) {
              <UriIndicator uri={uri} link />
            </div>
          )}
+          <ClaimMenuList uri={uri} />
        </h2>
      </NavLink>
      <div>
--- a/ui/component/claimTilesDiscover/index.js
+++ b/ui/component/claimTilesDiscover/index.js
@ -1,16 +1,16 @@
 import { connect } from 'react-redux';
 import { doClaimSearch, selectClaimSearchByQuery, selectFetchingClaimSearchByQuery, SETTINGS } from 'lbry-redux';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import ClaimListDiscover from './view';

-const select = state => ({
+const select = (state) => ({
  claimSearchByQuery: selectClaimSearchByQuery(state),
  fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
  showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
  hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
-  hiddenUris: selectBlockedChannels(state),
+  hiddenUris: selectMutedChannels(state),
 });

 const perform = {
--- a/ui/component/comment/index.js
+++ b/ui/component/comment/index.js
@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { makeSelectThumbnailForUri, selectMyChannelClaims } from 'lbry-redux';
 import { doCommentUpdate } from 'redux/actions/comments';
-import { selectChannelIsBlocked } from 'redux/selectors/blocked';
+import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { doToast } from 'redux/actions/notifications';
 import { doSetPlayingUri } from 'redux/actions/content';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
@ -11,7 +11,7 @@ import Comment from './view';

 const select = (state, props) => ({
  thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
-  channelIsBlocked: props.authorUri && selectChannelIsBlocked(props.authorUri)(state),
+  channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
  othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state),
  activeChannelClaim: selectActiveChannelClaim(state),
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@ -200,7 +200,7 @@ function Comment(props: Props) {
            </div>
            <div className="comment__menu">
              <Menu>
-                <MenuButton>
+                <MenuButton className="menu__button">
                  <Icon
                    size={18}
                    className={mouseIsHovering ? 'comment__menu-icon--hovering' : 'comment__menu-icon'}
--- a/ui/component/commentMenuList/index.js
+++ b/ui/component/commentMenuList/index.js
@ -1,12 +1,7 @@
 import { connect } from 'react-redux';
 import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux';
-import {
-  doCommentAbandon,
-  doCommentPin,
-  doCommentList,
-  //   doCommentModBlock,
-} from 'redux/actions/comments';
-import { doToggleBlockChannel } from 'redux/actions/blocked';
+import { doCommentAbandon, doCommentPin, doCommentList, doCommentModBlock } from 'redux/actions/comments';
+import { doToggleMuteChannel } from 'redux/actions/blocked';
 // import { doSetActiveChannel } from 'redux/actions/app';
 import { doSetPlayingUri } from 'redux/actions/content';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
@ -19,14 +14,14 @@ const select = (state, props) => ({
  activeChannelClaim: selectActiveChannelClaim(state),
 });

-const perform = dispatch => ({
+const perform = (dispatch) => ({
  closeInlinePlayer: () => dispatch(doSetPlayingUri({ uri: null })),
  deleteComment: (commentId, creatorChannelUrl) => dispatch(doCommentAbandon(commentId, creatorChannelUrl)),
-  blockChannel: channelUri => dispatch(doToggleBlockChannel(channelUri)),
+  blockChannel: (channelUri) => dispatch(doToggleMuteChannel(channelUri)),
  pinComment: (commentId, remove) => dispatch(doCommentPin(commentId, remove)),
-  fetchComments: uri => dispatch(doCommentList(uri)),
+  fetchComments: (uri) => dispatch(doCommentList(uri)),
  //   setActiveChannel: channelId => dispatch(doSetActiveChannel(channelId)),
-  //   commentModBlock: commentAuthor => dispatch(doCommentModBlock(commentAuthor)),
+  commentModBlock: (commentAuthor) => dispatch(doCommentModBlock(commentAuthor)),
 });

 export default connect(select, perform)(CommentMenuList);
--- a/ui/component/commentMenuList/view.jsx
+++ b/ui/component/commentMenuList/view.jsx
@ -23,7 +23,7 @@ type Props = {
  activeChannelClaim: ?ChannelClaim,
  claimIsMine: boolean,
  isTopLevel: boolean,
-  //   commentModBlock: string => void,
+  commentModBlock: (string) => void,
 };

 function CommentMenuList(props: Props) {
@ -43,17 +43,10 @@ function CommentMenuList(props: Props) {
    isPinned,
    handleEditComment,
    fetchComments,
-    // commentModBlock,
-    // setActiveChannel,
+    commentModBlock,
  } = props;
  const activeChannelIsCreator = activeChannelClaim && activeChannelClaim.permanent_url === contentChannelPermanentUrl;

-  //   let authorChannel;
-  //   try {
-  //     const { claimName } = parseURI(authorUri);
-  //     authorChannel = claimName;
-  //   } catch (e) {}
-
  function handlePinComment(commentId, remove) {
    pinComment(commentId, remove).then(() => fetchComments(uri));
  }
@ -65,32 +58,16 @@ function CommentMenuList(props: Props) {

  function handleCommentBlock() {
    if (claimIsMine) {
-      // Block them from commenting on future content
-      //   commentModBlock(authorUri);
+      commentModBlock(authorUri);
    }
+  }

+  function handleCommentMute() {
    blockChannel(authorUri);
  }

-  //   function handleChooseChannel() {
-  //     const { channelClaimId } = parseURI(authorUri);
-  //     setActiveChannel(channelClaimId);
-  //   }
-
  return (
-    <MenuList className="menu__list--comments">
-      {/* {commentIsMine && activeChannelClaim && activeChannelClaim.permanent_url !== authorUri && (
-        <MenuItem className="comment__menu-option" onSelect={handleChooseChannel}>
-          <div className="menu__link">
-            <Icon aria-hidden icon={ICONS.CHANNEL} />
-            {__('Use this channel')}
-          </div>
-          <span className="comment__menu-help">
-            {__('Switch to %channel_name% to interact with this comment', { channel_name: authorChannel })}.
-          </span>
-        </MenuItem>
-      )} */}
-
+    <MenuList className="menu__list">
      {activeChannelIsCreator && <div className="comment__menu-title">{__('Creator tools')}</div>}

      {activeChannelIsCreator && isTopLevel && (
@ -123,16 +100,25 @@ function CommentMenuList(props: Props) {
        </MenuItem>
      )}

-      {/* Disabled until we deal with current app blocklist parity */}
      {!commentIsMine && (
        <MenuItem className="comment__menu-option" onSelect={handleCommentBlock}>
          <div className="menu__link">
            <Icon aria-hidden icon={ICONS.BLOCK} />
            {__('Block')}
          </div>
-          {/* {activeChannelIsCreator && (
-            <span className="comment__menu-help">Hide this channel's comments and block them from commenting.</span>
-          )} */}
+          {activeChannelIsCreator && (
+            <span className="comment__menu-help">Prevent this channel from interacting with you.</span>
+          )}
+        </MenuItem>
+      )}
+
+      {!commentIsMine && (
+        <MenuItem className="comment__menu-option" onSelect={handleCommentMute}>
+          <div className="menu__link">
+            <Icon aria-hidden icon={ICONS.MUTE} />
+            {__('Mute')}
+          </div>
+          {activeChannelIsCreator && <span className="comment__menu-help">Hide this channel for you only.</span>}
        </MenuItem>
      )}

--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@ -238,6 +238,13 @@ export const icons = {
      <circle cx="12" cy="12" r="10" />
    </g>
  ),
+  [ICONS.MUTE]: buildIcon(
+    <g>
+      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+      <line x1="23" y1="9" x2="17" y2="15" />
+      <line x1="17" y1="9" x2="23" y2="15" />
+    </g>
+  ),
  [ICONS.LIGHT]: buildIcon(
    <g>
      <circle cx="12" cy="12" r="5" />
--- a/ui/component/fileAuthor/view.jsx
+++ b/ui/component/fileAuthor/view.jsx
@ -10,7 +10,7 @@ function FileAuthor(props: Props) {
  const { channelUri } = props;

  return channelUri ? (
-    <ClaimPreview uri={channelUri} type="inline" properties={false} hideBlock />
+    <ClaimPreview uri={channelUri} type="inline" properties={false} />
  ) : (
    <div className="claim-preview--inline claim-preview__title">{__('Anonymous')}</div>
  );
--- a/ui/component/notification/view.jsx
+++ b/ui/component/notification/view.jsx
@ -22,7 +22,7 @@ type Props = {
  menuButton: boolean,
  children: any,
  doReadNotifications: ([number]) => void,
-  doDeleteNotification: number => void,
+  doDeleteNotification: (number) => void,
 };

 export default function Notification(props: Props) {
@ -166,10 +166,10 @@ export default function Notification(props: Props) {

        <div className="notification__menu">
          <Menu>
-            <MenuButton onClick={e => e.stopPropagation()}>
+            <MenuButton onClick={(e) => e.stopPropagation()}>
              <Icon size={18} icon={ICONS.MORE_VERTICAL} />
            </MenuButton>
-            <MenuList className="menu__list--comments">
+            <MenuList className="menu__list">
              <MenuItem className="menu__link" onSelect={() => doDeleteNotification(id)}>
                <Icon aria-hidden icon={ICONS.DELETE} />
                {__('Delete')}
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@ -272,7 +272,7 @@ function AppRouter(props: Props) {
      <PrivateRoute {...props} path={`/$/${PAGES.REWARDS_VERIFY}`} component={RewardsVerifyPage} />
      <PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
      <PrivateRoute {...props} path={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} component={TagsFollowingManagePage} />
-      <PrivateRoute {...props} path={`/$/${PAGES.BLOCKED}`} component={ListBlockedPage} />
+      <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} />
      <PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
      <PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
      <PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
--- a/ui/constants/action_types.js
+++ b/ui/constants/action_types.js
@ -268,6 +268,15 @@ export const COMMENT_REACT_FAILED = 'COMMENT_REACT_FAILED';
 export const COMMENT_PIN_STARTED = 'COMMENT_PIN_STARTED';
 export const COMMENT_PIN_COMPLETED = 'COMMENT_PIN_COMPLETED';
 export const COMMENT_PIN_FAILED = 'COMMENT_PIN_FAILED';
+export const COMMENT_MODERATION_BLOCK_LIST_STARTED = 'COMMENT_MODERATION_BLOCK_LIST_STARTED';
+export const COMMENT_MODERATION_BLOCK_LIST_COMPLETED = 'COMMENT_MODERATION_BLOCK_LIST_COMPLETED';
+export const COMMENT_MODERATION_BLOCK_LIST_FAILED = 'COMMENT_MODERATION_BLOCK_LIST_FAILED';
+export const COMMENT_MODERATION_BLOCK_STARTED = 'COMMENT_MODERATION_BLOCK_STARTED';
+export const COMMENT_MODERATION_BLOCK_COMPLETE = 'COMMENT_MODERATION_BLOCK_COMPLETE';
+export const COMMENT_MODERATION_BLOCK_FAILED = 'COMMENT_MODERATION_BLOCK_FAILED';
+export const COMMENT_MODERATION_UN_BLOCK_STARTED = 'COMMENT_MODERATION_UN_BLOCK_STARTED';
+export const COMMENT_MODERATION_UN_BLOCK_COMPLETE = 'COMMENT_MODERATION_UN_BLOCK_COMPLETE';
+export const COMMENT_MODERATION_UN_BLOCK_FAILED = 'COMMENT_MODERATION_UN_BLOCK_FAILED';

 // Blocked channels
 export const TOGGLE_BLOCK_CHANNEL = 'TOGGLE_BLOCK_CHANNEL';
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@ -82,6 +82,7 @@ export const LIBRARY = 'Folder';
 export const TAG = 'Tag';
 export const SUPPORT = 'TrendingUp';
 export const BLOCK = 'Slash';
+export const MUTE = 'VolumeX';
 export const UNBLOCK = 'Circle';
 export const VIEW = 'View';
 export const EYE = 'Eye';
--- a/ui/constants/modal_types.js
+++ b/ui/constants/modal_types.js
@ -41,7 +41,6 @@ export const LIQUIDATE_SUPPORTS = 'liquidate_supports';
 export const MASS_TIP_UNLOCK = 'mass_tip_unlock';
 export const CONFIRM_AGE = 'confirm_age';
 export const SYNC_ENABLE = 'SYNC_ENABLE';
-export const REMOVE_BLOCKED = 'remove_blocked';
 export const IMAGE_UPLOAD = 'image_upload';
 export const MOBILE_SEARCH = 'mobile_search';
 export const VIEW_IMAGE = 'view_image';
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@ -24,6 +24,7 @@ exports.SEND = 'send';
 exports.SETTINGS = 'settings';
 exports.SETTINGS_NOTIFICATIONS = 'settings/notifications';
 exports.SETTINGS_ADVANCED = 'settings/advanced';
+exports.SETTINGS_BLOCKED_MUTED = 'settings/block_and_mute';
 exports.SHOW = 'show';
 exports.ACCOUNT = 'account';
 exports.SEARCH = 'search';
@ -36,7 +37,6 @@ exports.CHANNELS_FOLLOWING = 'following';
 exports.DEPRECATED__CHANNELS_FOLLOWING_MANAGE = 'following/channels/manage';
 exports.CHANNELS_FOLLOWING_DISCOVER = 'following/discover';
 exports.WALLET = 'wallet';
-exports.BLOCKED = 'blocked';
 exports.CHANNELS = 'channels';
 exports.EMBED = 'embed';
 exports.TOP = 'top';
--- a/ui/modal/modalRemoveBlocked/index.js
+++ b/ui/modal/modalRemoveBlocked/index.js
@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
-import { doToggleBlockChannel } from 'redux/actions/blocked';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
-import ModalRemoveBlocked from './view';
-
-const select = (state, props) => ({
-  blockedChannels: selectBlockedChannels(state),
-});
-
-const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
-  toggleBlockChannel: uri => dispatch(doToggleBlockChannel(uri)),
-});
-
-export default connect(select, perform)(ModalRemoveBlocked);
--- a/ui/modal/modalRemoveBlocked/view.jsx
+++ b/ui/modal/modalRemoveBlocked/view.jsx
@ -1,46 +0,0 @@
-// @flow
-import React from 'react';
-import { Modal } from 'modal/modal';
-import I18nMessage from 'component/i18nMessage';
-
-type Props = {
-  blockedUri: string,
-  closeModal: () => void,
-  blockedChannels: Array<string>,
-  toggleBlockChannel: (uri: string) => void,
-};
-
-function ModalRemoveBlocked(props: Props) {
-  const { blockedUri, closeModal, blockedChannels, toggleBlockChannel } = props;
-
-  function handleConfirm() {
-    if (blockedUri && blockedChannels.includes(blockedUri)) {
-      // DANGER: Always ensure the uri is actually in the list since we are using a
-      // toggle function. If 'null' is accidentally toggled INTO the list, the app
-      // won't start. Ideally, we should add a "removeBlockedChannel()", but with
-      // the gating above, it should be safe/good enough.
-      toggleBlockChannel(blockedUri);
-    }
-
-    closeModal();
-  }
-
-  return (
-    <Modal
-      isOpen
-      type="confirm"
-      title={__('Remove from blocked list')}
-      confirmButtonLabel={__('Remove')}
-      onConfirmed={handleConfirm}
-      onAborted={() => closeModal()}
-    >
-      <em>{blockedUri}</em>
-      <p />
-      <p>
-        <I18nMessage>Are you sure you want to remove this from the list?</I18nMessage>
-      </p>
-    </Modal>
-  );
-}
-
-export default ModalRemoveBlocked;
--- a/ui/modal/modalRouter/view.jsx
+++ b/ui/modal/modalRouter/view.jsx
@ -16,7 +16,6 @@ import ModalRevokeClaim from 'modal/modalRevokeClaim';
 import ModalPhoneCollection from 'modal/modalPhoneCollection';
 import ModalFirstSubscription from 'modal/modalFirstSubscription';
 import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
-import ModalRemoveBlocked from 'modal/modalRemoveBlocked';
 import ModalSocialShare from 'modal/modalSocialShare';
 import ModalSendTip from 'modal/modalSendTip';
 import ModalPublish from 'modal/modalPublish';
@ -142,8 +141,6 @@ function ModalRouter(props: Props) {
      return <ModalFileSelection {...modalProps} />;
    case MODALS.LIQUIDATE_SUPPORTS:
      return <ModalSupportsLiquidate {...modalProps} />;
-    case MODALS.REMOVE_BLOCKED:
-      return <ModalRemoveBlocked {...modalProps} />;
    case MODALS.IMAGE_UPLOAD:
      return <ModalImageUpload {...modalProps} />;
    case MODALS.SYNC_ENABLE:
--- a/ui/page/channel/index.js
+++ b/ui/page/channel/index.js
@ -8,7 +8,7 @@ import {
  makeSelectClaimForUri,
  makeSelectClaimIsPending,
 } from 'lbry-redux';
-import { selectChannelIsBlocked } from 'redux/selectors/blocked';
+import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
 import { selectYoutubeChannels } from 'redux/selectors/user';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
@ -23,16 +23,16 @@ const select = (state, props) => ({
  page: selectCurrentChannelPage(state),
  claim: makeSelectClaimForUri(props.uri)(state),
  isSubscribed: makeSelectIsSubscribed(props.uri, true)(state),
-  channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
+  channelIsBlocked: makeSelectChannelIsMuted(props.uri)(state),
  blackListedOutpoints: selectBlackListedOutpoints(state),
  subCount: makeSelectSubCountForUri(props.uri)(state),
  pending: makeSelectClaimIsPending(props.uri)(state),
  youtubeChannels: selectYoutubeChannels(state),
 });

-const perform = dispatch => ({
+const perform = (dispatch) => ({
  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  fetchSubCount: claimId => dispatch(doFetchSubCount(claimId)),
+  fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),
 });

 export default connect(select, perform)(ChannelPage);
--- a/ui/page/channel/view.jsx
+++ b/ui/page/channel/view.jsx
@ -6,7 +6,6 @@ import { parseURI } from 'lbry-redux';
 import { YOUTUBE_STATUSES } from 'lbryinc';
 import Page from 'component/page';
 import SubscribeButton from 'component/subscribeButton';
-import BlockButton from 'component/blockButton';
 import ShareButton from 'component/shareButton';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
 import { useHistory } from 'react-router';
@ -21,6 +20,7 @@ import classnames from 'classnames';
 import HelpLink from 'component/common/help-link';
 import ClaimSupportButton from 'component/claimSupportButton';
 import ChannelStakedIndicator from 'component/channelStakedIndicator';
+import ClaimMenuList from 'component/claimMenuList';

 export const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
@ -157,7 +157,7 @@ function ChannelPage(props: Props) {
          {!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} />}
          {!channelIsBlocked && <ClaimSupportButton uri={uri} />}
          {!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
-          {!isSubscribed && <BlockButton uri={permanentUrl} />}
+          <ClaimMenuList uri={claim.permanent_url} inline />
        </div>
        {cover && (
          <img
--- a/ui/page/channelsFollowingDiscover/index.js
+++ b/ui/page/channelsFollowingDiscover/index.js
@ -1,14 +1,14 @@
 import { connect } from 'react-redux';
 import { selectFollowedTags } from 'redux/selectors/tags';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import { selectHomepageData } from 'redux/selectors/settings';
 import ChannelsFollowingManagePage from './view';

-const select = state => ({
+const select = (state) => ({
  followedTags: selectFollowedTags(state),
  subscribedChannels: selectSubscriptions(state),
-  blockedChannels: selectBlockedChannels(state),
+  blockedChannels: selectMutedChannels(state),
  homepageData: selectHomepageData(state),
 });

--- a/ui/page/listBlocked/index.js
+++ b/ui/page/listBlocked/index.js
@ -1,9 +1,12 @@
 import { connect } from 'react-redux';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
+import { selectModerationBlockList, selectFetchingModerationBlockList } from 'redux/selectors/comments';
 import ListBlocked from './view';

-const select = state => ({
-  uris: selectBlockedChannels(state),
+const select = (state) => ({
+  mutedUris: selectMutedChannels(state),
+  blockedUris: selectModerationBlockList(state),
+  fetchingModerationBlockList: selectFetchingModerationBlockList(state),
 });

-export default connect(select, null)(ListBlocked);
+export default connect(select)(ListBlocked);
--- a/ui/page/listBlocked/view.jsx
+++ b/ui/page/listBlocked/view.jsx
@ -1,34 +1,125 @@
 // @flow
+import * as ICONS from 'constants/icons';
 import React from 'react';
+import classnames from 'classnames';
 import ClaimList from 'component/claimList';
 import Page from 'component/page';
-import Card from 'component/common/card';
+import Spinner from 'component/spinner';
+import Button from 'component/button';
+import usePrevious from 'effects/use-previous';
+import usePersistedState from 'effects/use-persisted-state';
+import ChannelBlockButton from 'component/channelBlockButton';
+import ChannelMuteButton from 'component/channelMuteButton';

 type Props = {
-  uris: Array<string>,
+  mutedUris: ?Array<string>,
+  blockedUris: ?Array<string>,
+  fetchingModerationBlockList: boolean,
 };

+const VIEW_BLOCKED = 'blocked';
+const VIEW_MUTED = 'muted';
+
 function ListBlocked(props: Props) {
-  const { uris } = props;
+  const { mutedUris, blockedUris, fetchingModerationBlockList } = props;
+
+  const [viewMode, setViewMode] = usePersistedState('blocked-muted:display', VIEW_BLOCKED);
+  const [loading, setLoading] = React.useState(!blockedUris || !blockedUris.length);
+
+  // Keep a local list to allow for undoing actions in this component
+  const [localBlockedList, setLocalBlockedList] = React.useState(undefined);
+  const [localMutedList, setLocalMutedList] = React.useState(undefined);
+
+  const previousFetchingModBlockList = usePrevious(fetchingModerationBlockList);
+  const hasLocalMuteList = localMutedList && localMutedList.length > 0;
+  const hasLocalBlockList = localBlockedList && localBlockedList.length > 0;
+  const stringifiedMutedChannels = JSON.stringify(mutedUris);
+  const justMuted = localMutedList && mutedUris && localMutedList.length < mutedUris.length;
+  const justBlocked = localBlockedList && blockedUris && localBlockedList.length < blockedUris.length;
+  const stringifiedBlockedChannels = JSON.stringify(blockedUris);
+
+  React.useEffect(() => {
+    if (previousFetchingModBlockList && !fetchingModerationBlockList) {
+      setLoading(false);
+    }
+  }, [setLoading, previousFetchingModBlockList, fetchingModerationBlockList]);
+
+  React.useEffect(() => {
+    const jsonMutedChannels = stringifiedMutedChannels && JSON.parse(stringifiedMutedChannels);
+    if (!hasLocalMuteList && jsonMutedChannels && jsonMutedChannels.length > 0) {
+      setLocalMutedList(jsonMutedChannels);
+    }
+  }, [stringifiedMutedChannels, hasLocalMuteList]);
+
+  React.useEffect(() => {
+    const jsonBlockedChannels = stringifiedBlockedChannels && JSON.parse(stringifiedBlockedChannels);
+    if (!hasLocalBlockList && jsonBlockedChannels && jsonBlockedChannels.length > 0) {
+      setLocalBlockedList(jsonBlockedChannels);
+    }
+  }, [stringifiedBlockedChannels, hasLocalBlockList]);
+
+  React.useEffect(() => {
+    if (justMuted && stringifiedMutedChannels) {
+      setLocalMutedList(JSON.parse(stringifiedMutedChannels));
+    }
+  }, [stringifiedMutedChannels, justMuted, setLocalMutedList]);
+
+  React.useEffect(() => {
+    if (justBlocked && stringifiedBlockedChannels) {
+      setLocalBlockedList(JSON.parse(stringifiedBlockedChannels));
+    }
+  }, [stringifiedBlockedChannels, justBlocked, setLocalBlockedList]);

  return (
    <Page>
-      {uris && uris.length ? (
-        <Card
-          isBodyList
-          title={__('Your blocked channels')}
-          body={<ClaimList uris={uris} showUnresolvedClaims showHiddenByUser />}
-        />
-      ) : (
+      {loading && (
        <div className="main--empty">
-          <section className="card card--section">
-            <h2 className="card__title card__title--deprecated">{__('You aren’t blocking any channels')}</h2>
-            <p className="section__subtitle">
-              {__('When you block a channel, all content from that channel will be hidden.')}
-            </p>
-          </section>
+          <Spinner />
        </div>
      )}
+
+      {!loading && (
+        <>
+          <div className="section__header--actions">
+            <div className="section__actions--inline">
+              <Button
+                icon={ICONS.BLOCK}
+                button="alt"
+                label={__('Blocked')}
+                className={classnames(`button-toggle`, {
+                  'button-toggle--active': viewMode === VIEW_BLOCKED,
+                })}
+                onClick={() => setViewMode(VIEW_BLOCKED)}
+              />
+              <Button
+                icon={ICONS.MUTE}
+                button="alt"
+                label={__('Muted')}
+                className={classnames(`button-toggle`, {
+                  'button-toggle--active': viewMode === VIEW_MUTED,
+                })}
+                onClick={() => setViewMode(VIEW_MUTED)}
+              />
+            </div>
+          </div>
+          {
+            <ClaimList
+              uris={viewMode === VIEW_MUTED ? localMutedList : localBlockedList}
+              showUnresolvedClaims
+              showHiddenByUser
+              hideMenu
+              renderActions={(claim) => {
+                return (
+                  <div className="section__actions">
+                    <ChannelBlockButton uri={claim.permanent_url} />
+                    <ChannelMuteButton uri={claim.permanent_url} />
+                  </div>
+                );
+              }}
+            />
+          }
+        </>
+      )}
    </Page>
  );
 }
--- a/ui/page/settings/index.js
+++ b/ui/page/settings/index.js
@ -12,11 +12,10 @@ import {
 import { doSetPlayingUri } from 'redux/actions/content';
 import { makeSelectClientSetting, selectDaemonSettings, selectLanguage } from 'redux/selectors/settings';
 import { doWalletStatus, selectWalletIsEncrypted, SETTINGS } from 'lbry-redux';
-import { selectBlockedChannelsCount } from 'redux/selectors/blocked';
 import SettingsPage from './view';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';

-const select = state => ({
+const select = (state) => ({
  daemonSettings: selectDaemonSettings(state),
  allowAnalytics: selectAllowAnalytics(state),
  isAuthenticated: selectUserVerifiedEmail(state),
@ -27,7 +26,6 @@ const select = state => ({
  autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
  walletEncrypted: selectWalletIsEncrypted(state),
  autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state),
-  userBlockedChannelsCount: selectBlockedChannelsCount(state),
  hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
  floatingPlayer: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
  hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
@ -35,14 +33,14 @@ const select = state => ({
  language: selectLanguage(state),
 });

-const perform = dispatch => ({
+const perform = (dispatch) => ({
  setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
-  clearDaemonSetting: key => dispatch(doClearDaemonSetting(key)),
-  toggle3PAnalytics: allow => dispatch(doToggle3PAnalytics(allow)),
+  clearDaemonSetting: (key) => dispatch(doClearDaemonSetting(key)),
+  toggle3PAnalytics: (allow) => dispatch(doToggle3PAnalytics(allow)),
  clearCache: () => dispatch(doClearCache()),
  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
  updateWalletStatus: () => dispatch(doWalletStatus()),
-  confirmForgetPassword: modalProps => dispatch(doNotifyForgetPassword(modalProps)),
+  confirmForgetPassword: (modalProps) => dispatch(doNotifyForgetPassword(modalProps)),
  clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
  setDarkTime: (time, options) => dispatch(doSetDarkTime(time, options)),
  openModal: (id, params) => dispatch(doOpenModal(id, params)),
--- a/ui/page/settings/view.jsx
+++ b/ui/page/settings/view.jsx
@ -44,9 +44,9 @@ type DaemonSettings = {

 type Props = {
  setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
-  clearDaemonSetting: string => void,
+  clearDaemonSetting: (string) => void,
  setClientSetting: (string, SetDaemonSettingArg) => void,
-  toggle3PAnalytics: boolean => void,
+  toggle3PAnalytics: (boolean) => void,
  clearCache: () => Promise<any>,
  daemonSettings: DaemonSettings,
  allowAnalytics: boolean,
@ -60,14 +60,13 @@ type Props = {
  autoplay: boolean,
  updateWalletStatus: () => void,
  walletEncrypted: boolean,
-  userBlockedChannelsCount?: number,
  confirmForgetPassword: ({}) => void,
  floatingPlayer: boolean,
  hideReposts: ?boolean,
  clearPlayingUri: () => void,
  darkModeTimes: DarkModeTimes,
  setDarkTime: (string, {}) => void,
-  openModal: string => void,
+  openModal: (string) => void,
  language?: string,
  enterSettings: () => void,
  exitSettings: () => void,
@ -98,7 +97,7 @@ class SettingsPage extends React.PureComponent<Props, State> {

    if (isAuthenticated || !IS_WEB) {
      this.props.updateWalletStatus();
-      getPasswordFromCookie().then(p => {
+      getPasswordFromCookie().then((p) => {
        if (typeof p === 'string') {
          this.setState({ storedPassword: true });
        }
@ -172,7 +171,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
      setDaemonSetting,
      setClientSetting,
      toggle3PAnalytics,
-      userBlockedChannelsCount,
      floatingPlayer,
      hideReposts,
      clearPlayingUri,
@ -262,7 +260,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                      value={currentTheme}
                      disabled={automaticDarkModeEnabled}
                    >
-                      {themes.map(theme => (
+                      {themes.map((theme) => (
                        <option key={theme} value={theme}>
                          {theme === 'light' ? __('Light') : __('Dark')}
                        </option>
@ -282,11 +280,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
                        <FormField
                          type="select"
                          name="automatic_dark_mode_range"
-                          onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
+                          onChange={(value) => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
                          value={darkModeTimes.from.hour}
                          label={__('From --[initial time]--')}
                        >
-                          {startHours.map(time => (
+                          {startHours.map((time) => (
                            <option key={time} value={time}>
                              {this.to12Hour(time)}
                            </option>
@ -296,10 +294,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
                          type="select"
                          name="automatic_dark_mode_range"
                          label={__('To --[final time]--')}
-                          onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
+                          onChange={(value) => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
                          value={darkModeTimes.to.hour}
                        >
-                          {endHours.map(time => (
+                          {endHours.map((time) => (
                            <option key={time} value={time}>
                              {this.to12Hour(time)}
                            </option>
@ -342,7 +340,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                  <FormField
                    type="checkbox"
                    name="hide_reposts"
-                    onChange={e => {
+                    onChange={(e) => {
                      if (isAuthenticated) {
                        let param = e.target.checked ? { add: 'noreposts' } : { remove: 'noreposts' };
                        Lbryio.call('user_tag', 'edit', param);
@ -411,7 +409,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                  <FormField
                    type="checkbox"
                    name="share_third_party"
-                    onChange={e => toggle3PAnalytics(e.target.checked)}
+                    onChange={(e) => toggle3PAnalytics(e.target.checked)}
                    checked={allowAnalytics}
                    label={__('Allow the app to access third party analytics platforms')}
                    helper={__('We use detailed analytics to improve all aspects of the LBRY experience.')}
@ -438,21 +436,14 @@ class SettingsPage extends React.PureComponent<Props, State> {
                />

                <Card
-                  title={__('Blocked channels')}
-                  subtitle={
-                    userBlockedChannelsCount === 0
-                      ? __("You don't have blocked channels.")
-                      : userBlockedChannelsCount === 1
-                      ? __('You have one blocked channel.')
-                      : __('You have %channels% blocked channels.', { channels: userBlockedChannelsCount })
-                  }
+                  title={__('Blocked and muted channels')}
                  actions={
                    <div className="section__actions">
                      <Button
                        button="secondary"
                        label={__('Manage')}
                        icon={ICONS.SETTINGS}
-                        navigate={`/$/${PAGES.BLOCKED}`}
+                        navigate={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`}
                      />
                    </div>
                  }
--- a/ui/redux/actions/blocked.js
+++ b/ui/redux/actions/blocked.js
@ -3,7 +3,7 @@ import * as ACTIONS from 'constants/action_types';
 import { selectPrefsReady } from 'redux/selectors/sync';
 import { doAlertWaitingForSync } from 'redux/actions/app';

-export const doToggleBlockChannel = (uri: string) => (dispatch: Dispatch, getState: GetState) => {
+export const doToggleMuteChannel = (uri: string) => (dispatch: Dispatch, getState: GetState) => {
  const state = getState();
  const ready = selectPrefsReady(state);

--- a/ui/redux/actions/comments.js
+++ b/ui/redux/actions/comments.js
@ -1,7 +1,7 @@
 // @flow
 import * as ACTIONS from 'constants/action_types';
 import * as REACTION_TYPES from 'constants/reactions';
-import { Lbry, selectClaimsByUri } from 'lbry-redux';
+import { Lbry, buildURI, selectClaimsByUri, selectMyChannelClaims } from 'lbry-redux';
 import { doToast, doSeeNotifications } from 'redux/actions/notifications';
 import {
  makeSelectCommentIdsForUri,
@ -50,7 +50,7 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
        });
        return result;
      })
-      .catch(error => {
+      .catch((error) => {
        dispatch({
          type: ACTIONS.COMMENT_LIST_FAILED,
          data: error,
@ -89,7 +89,7 @@ export function doCommentReactList(uri: string | null, commentId?: string) {
          },
        });
      })
-      .catch(error => {
+      .catch((error) => {
        dispatch({
          type: ACTIONS.COMMENT_REACTION_LIST_FAILED,
          data: error,
@ -171,14 +171,14 @@ export function doCommentReact(commentId: string, type: string) {
          data: commentId + type,
        });
      })
-      .catch(error => {
+      .catch((error) => {
        dispatch({
          type: ACTIONS.COMMENT_REACT_FAILED,
          data: commentId + type,
        });

        const myRevertedReactsObj = myReacts
-          .filter(el => el !== type)
+          .filter((el) => el !== type)
          .reduce((acc, el) => {
            acc[el] = 1;
            return acc;
@ -233,7 +233,7 @@ export function doCommentCreate(comment: string = '', claim_id: string = '', par
        });
        return result;
      })
-      .catch(error => {
+      .catch((error) => {
        dispatch({
          type: ACTIONS.COMMENT_CREATE_FAILED,
          data: error,
@ -274,7 +274,7 @@ export function doCommentPin(commentId: string, remove: boolean) {
          data: result,
        });
      })
-      .catch(error => {
+      .catch((error) => {
        dispatch({
          type: ACTIONS.COMMENT_PIN_FAILED,
          data: error,
@ -339,7 +339,7 @@ export function doCommentAbandon(commentId: string, creatorChannelUri?: string)
          );
        }
      })
-      .catch(error => {
+      .catch((error) => {
        dispatch({
          type: ACTIONS.COMMENT_ABANDON_FAILED,
          data: error,
@ -389,7 +389,7 @@ export function doCommentUpdate(comment_id: string, comment: string) {
            );
          }
        })
-        .catch(error => {
+        .catch((error) => {
          dispatch({
            type: ACTIONS.COMMENT_UPDATE_FAILED,
            data: error,
@ -406,38 +406,157 @@ export function doCommentUpdate(comment_id: string, comment: string) {
 }

 // Hides a users comments from all creator's claims and prevent them from commenting in the future
-export function doCommentModBlock(commentAuthor: string) {
+export function doCommentModToggleBlock(channelUri: string, unblock: boolean = false) {
  return async (dispatch: Dispatch, getState: GetState) => {
    const state = getState();
-    const claim = selectClaimsByUri(state)[commentAuthor];
+    const myChannels = selectMyChannelClaims(state);
+    const claim = selectClaimsByUri(state)[channelUri];

    if (!claim) {
      console.error("Can't find claim to block"); // eslint-disable-line
      return;
    }

-    const creatorIdToBan = claim ? claim.claim_id : null;
-    const creatorNameToBan = claim ? claim.name : null;
-    const activeChannelClaim = selectActiveChannelClaim(state);
+    dispatch({
+      type: unblock ? ACTIONS.COMMENT_MODERATION_UN_BLOCK_STARTED : ACTIONS.COMMENT_MODERATION_BLOCK_STARTED,
+      data: {
+        uri: channelUri,
+      },
+    });

-    let channelSignature = {};
-    if (activeChannelClaim) {
-      try {
-        channelSignature = await Lbry.channel_sign({
-          channel_id: activeChannelClaim.claim_id,
-          hexdata: toHex(activeChannelClaim.name),
-        });
-      } catch (e) {}
+    const creatorIdForAction = claim ? claim.claim_id : null;
+    const creatorNameForAction = claim ? claim.name : null;
+
+    let channelSignatures = [];
+    if (myChannels) {
+      for (const channelClaim of myChannels) {
+        try {
+          const channelSignature = await Lbry.channel_sign({
+            channel_id: channelClaim.claim_id,
+            hexdata: toHex(channelClaim.name),
+          });
+
+          channelSignatures.push({ ...channelSignature, claim_id: channelClaim.claim_id, name: channelClaim.name });
+        } catch (e) {}
+      }
    }

-    return Comments.moderation_block({
-      mod_channel_id: activeChannelClaim.claim_id,
-      mod_channel_name: activeChannelClaim.name,
-      signature: channelSignature.signature,
-      signing_ts: channelSignature.signing_ts,
-      banned_channel_id: creatorIdToBan,
-      banned_channel_name: creatorNameToBan,
-      delete_all: true,
-    });
+    const sharedModBlockParams = unblock
+      ? {
+          un_blocked_channel_id: creatorIdForAction,
+          un_blocked_channel_name: creatorNameForAction,
+        }
+      : {
+          blocked_channel_id: creatorIdForAction,
+          blocked_channel_name: creatorNameForAction,
+        };
+
+    const commentAction = unblock ? Comments.moderation_unblock : Comments.moderation_block;
+
+    return Promise.all(
+      channelSignatures.map((signatureData) =>
+        commentAction({
+          mod_channel_id: signatureData.claim_id,
+          mod_channel_name: signatureData.name,
+          signature: signatureData.signature,
+          signing_ts: signatureData.signing_ts,
+          ...sharedModBlockParams,
+        })
+      )
+    )
+      .then(() => {
+        dispatch({
+          type: unblock ? ACTIONS.COMMENT_MODERATION_UN_BLOCK_COMPLETE : ACTIONS.COMMENT_MODERATION_BLOCK_COMPLETE,
+          data: { channelUri },
+        });
+
+        if (!unblock) {
+          dispatch(doToast({ message: __('Channel blocked. You will not see them again.') }));
+        }
+      })
+      .catch(() => {
+        dispatch({
+          type: unblock ? ACTIONS.COMMENT_MODERATION_UN_BLOCK_FAILED : ACTIONS.COMMENT_MODERATION_BLOCK_FAILED,
+        });
+      });
+  };
+}
+
+export function doCommentModBlock(commentAuthor: string) {
+  return (dispatch: Dispatch) => {
+    return dispatch(doCommentModToggleBlock(commentAuthor));
+  };
+}
+
+export function doCommentModUnBlock(commentAuthor: string) {
+  return (dispatch: Dispatch) => {
+    return dispatch(doCommentModToggleBlock(commentAuthor, true));
+  };
+}
+
+export function doFetchModBlockedList() {
+  return async (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const myChannels = selectMyChannelClaims(state);
+
+    dispatch({
+      type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_STARTED,
+    });
+
+    let channelSignatures = [];
+    if (myChannels) {
+      for (const channelClaim of myChannels) {
+        try {
+          const channelSignature = await Lbry.channel_sign({
+            channel_id: channelClaim.claim_id,
+            hexdata: toHex(channelClaim.name),
+          });
+
+          channelSignatures.push({ ...channelSignature, claim_id: channelClaim.claim_id, name: channelClaim.name });
+        } catch (e) {}
+      }
+    }
+
+    return Promise.all(
+      channelSignatures.map((signatureData) =>
+        Comments.moderation_block_list({
+          mod_channel_id: signatureData.claim_id,
+          mod_channel_name: signatureData.name,
+          signature: signatureData.signature,
+          signing_ts: signatureData.signing_ts,
+        })
+      )
+    )
+      .then((blockLists) => {
+        let globalBlockList = new Set();
+        blockLists.forEach((channelBlockListData) => {
+          const blockListForChannel = channelBlockListData && channelBlockListData.blocked_channels;
+          if (blockListForChannel) {
+            blockListForChannel.forEach((blockedChannel) => {
+              // REMOVE THIS
+              if (blockedChannel.blocked_channel_name) {
+                const channelUri = buildURI({
+                  channelName: blockedChannel.blocked_channel_name,
+                  claimId: blockedChannel.blocked_channel_id,
+                });
+
+                globalBlockList.add(channelUri);
+              }
+            });
+          }
+        });
+
+        dispatch({
+          type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_COMPLETED,
+          data: {
+            blockList: Array.from(globalBlockList).reverse(),
+          },
+        });
+      })
+      .catch((err) => {
+        dispatch({
+          type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_FAILED,
+        });
+      });
  };
 }
--- a/ui/redux/reducers/blocked.js
+++ b/ui/redux/reducers/blocked.js
@ -15,9 +15,9 @@ export default handleActions(
      let newBlockedChannels = blockedChannels.slice();

      if (newBlockedChannels.includes(uri)) {
-        newBlockedChannels = newBlockedChannels.filter(id => id !== uri);
+        newBlockedChannels = newBlockedChannels.filter((id) => id !== uri);
      } else {
-        newBlockedChannels.push(uri);
+        newBlockedChannels.unshift(uri);
      }

      return {
@ -29,7 +29,7 @@ export default handleActions(
      action: { data: { blocked: ?Array<string> } }
    ) => {
      const { blocked } = action.data;
-      const sanitizedBlocked = blocked && blocked.filter(e => typeof e === 'string');
+      const sanitizedBlocked = blocked && blocked.filter((e) => typeof e === 'string');
      return {
        ...state,
        blockedChannels: sanitizedBlocked && sanitizedBlocked.length ? sanitizedBlocked : state.blockedChannels,
--- a/ui/redux/reducers/comments.js
+++ b/ui/redux/reducers/comments.js
@ -16,6 +16,10 @@ const defaultState: CommentsState = {
  typesReacting: [],
  myReactsByCommentId: undefined,
  othersReactsByCommentId: undefined,
+  moderationBlockList: undefined,
+  fetchingModerationBlockList: false,
+  blockingByUri: {},
+  unBlockingByUri: {},
 };

 export default handleActions(
@ -144,7 +148,7 @@ export default handleActions(
      };
    },

-    [ACTIONS.COMMENT_LIST_STARTED]: state => ({ ...state, isLoading: true }),
+    [ACTIONS.COMMENT_LIST_STARTED]: (state) => ({ ...state, isLoading: true }),

    [ACTIONS.COMMENT_LIST_COMPLETED]: (state: CommentsState, action: any) => {
      const { comments, claimId, uri } = action.data;
@ -227,17 +231,15 @@ export default handleActions(
        isLoading: false,
      };
    },
-    // do nothing
+
    [ACTIONS.COMMENT_ABANDON_FAILED]: (state: CommentsState, action: any) => ({
      ...state,
      isCommenting: false,
    }),
-    // do nothing
    [ACTIONS.COMMENT_UPDATE_STARTED]: (state: CommentsState, action: any) => ({
      ...state,
      isCommenting: true,
    }),
-    // replace existing comment with comment returned here under its comment_id
    [ACTIONS.COMMENT_UPDATE_COMPLETED]: (state: CommentsState, action: any) => {
      const { comment } = action.data;
      const commentById = Object.assign({}, state.commentById);
@ -249,25 +251,100 @@ export default handleActions(
        isCommenting: false,
      };
    },
-    // nothing can be done here
+
    [ACTIONS.COMMENT_UPDATE_FAILED]: (state: CommentsState, action: any) => ({
      ...state,
      isCmmenting: false,
    }),
-    // nothing can really be done here
-    [ACTIONS.COMMENT_HIDE_STARTED]: (state: CommentsState, action: any) => ({
+    [ACTIONS.COMMENT_MODERATION_BLOCK_LIST_STARTED]: (state: CommentsState, action: any) => ({
      ...state,
-      isLoading: true,
+      fetchingModerationBlockList: true,
    }),
-    [ACTIONS.COMMENT_HIDE_COMPLETED]: (state: CommentsState, action: any) => ({
-      ...state, // todo: add HiddenComments state & create selectors
-      isLoading: false,
-    }),
-    // nothing can be done here
-    [ACTIONS.COMMENT_HIDE_FAILED]: (state: CommentsState, action: any) => ({
+    [ACTIONS.COMMENT_MODERATION_BLOCK_LIST_COMPLETED]: (state: CommentsState, action: any) => {
+      const { blockList } = action.data;
+
+      return {
+        ...state,
+        moderationBlockList: blockList,
+        fetchingModerationBlockList: false,
+      };
+    },
+    [ACTIONS.COMMENT_MODERATION_BLOCK_LIST_FAILED]: (state: CommentsState, action: any) => ({
      ...state,
-      isLoading: false,
+      fetchingModerationBlockList: false,
    }),
+
+    [ACTIONS.COMMENT_MODERATION_BLOCK_STARTED]: (state: CommentsState, action: any) => ({
+      ...state,
+      blockingByUri: {
+        ...state.blockingByUri,
+        [action.data.uri]: true,
+      },
+    }),
+
+    [ACTIONS.COMMENT_MODERATION_UN_BLOCK_STARTED]: (state: CommentsState, action: any) => ({
+      ...state,
+      unBlockingByUri: {
+        ...state.unBlockingByUri,
+        [action.data.uri]: true,
+      },
+    }),
+    [ACTIONS.COMMENT_MODERATION_BLOCK_FAILED]: (state: CommentsState, action: any) => ({
+      ...state,
+      blockingByUri: {
+        ...state.blockingByUri,
+        [action.data.uri]: false,
+      },
+    }),
+
+    [ACTIONS.COMMENT_MODERATION_UN_BLOCK_FAILED]: (state: CommentsState, action: any) => ({
+      ...state,
+      unBlockingByUri: {
+        ...state.unBlockingByUri,
+        [action.data.uri]: false,
+      },
+    }),
+
+    [ACTIONS.COMMENT_MODERATION_BLOCK_COMPLETE]: (state: CommentsState, action: any) => {
+      const { channelUri } = action.data;
+      const commentById = Object.assign({}, state.commentById);
+      const blockingByUri = Object.assign({}, state.blockingByUri);
+      const moderationBlockList = state.moderationBlockList || [];
+      const newModerationBlockList = moderationBlockList.slice();
+
+      for (const commentId in commentById) {
+        const comment = commentById[commentId];
+
+        if (channelUri === comment.channel_url) {
+          delete commentById[comment.comment_id];
+        }
+      }
+
+      delete blockingByUri[channelUri];
+
+      newModerationBlockList.push(channelUri);
+
+      return {
+        ...state,
+        commentById,
+        blockingByUri,
+        moderationBlockList: newModerationBlockList,
+      };
+    },
+    [ACTIONS.COMMENT_MODERATION_UN_BLOCK_COMPLETE]: (state: CommentsState, action: any) => {
+      const { channelUri } = action.data;
+      const unBlockingByUri = Object.assign(state.unBlockingByUri, {});
+      const moderationBlockList = state.moderationBlockList || [];
+      const newModerationBlockList = moderationBlockList.slice().filter((uri) => uri !== channelUri);
+
+      delete unBlockingByUri[channelUri];
+
+      return {
+        ...state,
+        unBlockingByUri,
+        moderationBlockList: newModerationBlockList,
+      };
+    },
  },
  defaultState
 );
--- a/ui/redux/selectors/blocked.js
+++ b/ui/redux/selectors/blocked.js
@ -3,23 +3,11 @@ import { createSelector } from 'reselect';

 const selectState = (state: { blocked: BlocklistState }) => state.blocked || {};

-export const selectBlockedChannels = createSelector(selectState, (state: BlocklistState) => {
-  return state.blockedChannels.filter(e => typeof e === 'string');
+export const selectMutedChannels = createSelector(selectState, (state: BlocklistState) => {
+  return state.blockedChannels.filter((e) => typeof e === 'string');
 });

-export const selectBlockedChannelsCount = createSelector(selectBlockedChannels, (state: Array<string>) => state.length);
-
-export const selectBlockedChannelsObj = createSelector(selectState, (state: BlocklistState) => {
-  return state.blockedChannels.reduce((acc: any, val: any) => {
-    const outpoint = `${val.txid}:${String(val.nout)}`;
-    return {
-      ...acc,
-      [outpoint]: 1,
-    };
-  }, {});
-});
-
-export const selectChannelIsBlocked = (uri: string) =>
-  createSelector(selectBlockedChannels, (state: Array<string>) => {
+export const makeSelectChannelIsMuted = (uri: string) =>
+  createSelector(selectMutedChannels, (state: Array<string>) => {
    return state.includes(uri);
  });
--- a/ui/redux/selectors/comments.js
+++ b/ui/redux/selectors/comments.js
@ -1,22 +1,28 @@
 // @flow
 import * as SETTINGS from 'constants/settings';
 import { createSelector } from 'reselect';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { selectBlacklistedOutpointMap, selectFilteredOutpointMap } from 'lbryinc';
 import { selectClaimsById, isClaimNsfw, selectMyActiveClaims } from 'lbry-redux';

-const selectState = state => state.comments || {};
+const selectState = (state) => state.comments || {};

-export const selectCommentsById = createSelector(selectState, state => state.commentById || {});
-
-export const selectIsFetchingComments = createSelector(selectState, state => state.isLoading);
-
-export const selectIsPostingComment = createSelector(selectState, state => state.isCommenting);
-
-export const selectIsFetchingReacts = createSelector(selectState, state => state.isFetchingReacts);
-
-export const selectOthersReactsById = createSelector(selectState, state => state.othersReactsByCommentId);
+export const selectCommentsById = createSelector(selectState, (state) => state.commentById || {});
+export const selectIsFetchingComments = createSelector(selectState, (state) => state.isLoading);
+export const selectIsPostingComment = createSelector(selectState, (state) => state.isCommenting);
+export const selectIsFetchingReacts = createSelector(selectState, (state) => state.isFetchingReacts);
+export const selectOthersReactsById = createSelector(selectState, (state) => state.othersReactsByCommentId);
+export const selectModerationBlockList = createSelector(
+  selectState,
+  (state) => state.moderationBlockList && state.moderationBlockList.reverse()
+);
+export const selectBlockingByUri = createSelector(selectState, (state) => state.blockingByUri);
+export const selectUnBlockingByUri = createSelector(selectState, (state) => state.unBlockingByUri);
+export const selectFetchingModerationBlockList = createSelector(
+  selectState,
+  (state) => state.fetchingModerationBlockList
+);

 export const selectCommentsByClaimId = createSelector(selectState, selectCommentsById, (state, byId) => {
  const byClaimId = state.byId || {};
@ -40,7 +46,7 @@ export const selectTopLevelCommentsByClaimId = createSelector(selectState, selec
  const comments = {};

  // replace every comment_id in the list with the actual comment object
-  Object.keys(byClaimId).forEach(claimId => {
+  Object.keys(byClaimId).forEach((claimId) => {
    const commentIds = byClaimId[claimId];

    comments[claimId] = Array(commentIds === null ? 0 : commentIds.length);
@ -53,14 +59,14 @@ export const selectTopLevelCommentsByClaimId = createSelector(selectState, selec
 });

 export const makeSelectCommentForCommentId = (commentId: string) =>
-  createSelector(selectCommentsById, comments => comments[commentId]);
+  createSelector(selectCommentsById, (comments) => comments[commentId]);

 export const selectRepliesByParentId = createSelector(selectState, selectCommentsById, (state, byId) => {
  const byParentId = state.repliesByParentId || {};
  const comments = {};

  // replace every comment_id in the list with the actual comment object
-  Object.keys(byParentId).forEach(id => {
+  Object.keys(byParentId).forEach((id) => {
    const commentIds = byParentId[id];

    comments[id] = Array(commentIds === null ? 0 : commentIds.length);
@ -77,10 +83,10 @@ export const selectRepliesByParentId = createSelector(selectState, selectComment
  selectState,
  state => state.byId || {}
 ); */
-export const selectCommentsByUri = createSelector(selectState, state => {
+export const selectCommentsByUri = createSelector(selectState, (state) => {
  const byUri = state.commentsByUri || {};
  const comments = {};
-  Object.keys(byUri).forEach(uri => {
+  Object.keys(byUri).forEach((uri) => {
    const claimId = byUri[uri];
    if (claimId === null) {
      comments[uri] = null;
@ -99,16 +105,16 @@ export const makeSelectCommentIdsForUri = (uri: string) =>
  });

 export const makeSelectMyReactionsForComment = (commentId: string) =>
-  createSelector(selectState, state => {
+  createSelector(selectState, (state) => {
    return state.myReactsByCommentId[commentId] || [];
  });

 export const makeSelectOthersReactionsForComment = (commentId: string) =>
-  createSelector(selectState, state => {
+  createSelector(selectState, (state) => {
    return state.othersReactsByCommentId[commentId];
  });

-export const selectPendingCommentReacts = createSelector(selectState, state => state.pendingCommentReactions);
+export const selectPendingCommentReacts = createSelector(selectState, (state) => state.pendingCommentReactions);

 export const makeSelectCommentsForUri = (uri: string) =>
  createSelector(
@ -116,7 +122,7 @@ export const makeSelectCommentsForUri = (uri: string) =>
    selectCommentsByUri,
    selectClaimsById,
    selectMyActiveClaims,
-    selectBlockedChannels,
+    selectMutedChannels,
    selectBlacklistedOutpointMap,
    selectFilteredOutpointMap,
    makeSelectClientSetting(SETTINGS.SHOW_MATURE),
@ -125,7 +131,12 @@ export const makeSelectCommentsForUri = (uri: string) =>
      const comments = byClaimId && byClaimId[claimId];

      return comments
-        ? comments.filter(comment => {
+        ? comments.filter((comment) => {
+            if (!comment) {
+              // It may have been recently deleted after being blocked
+              return false;
+            }
+
            const channelClaim = claimsById[comment.channel_id];

            // Return comment if `channelClaim` doesn't exist so the component knows to resolve the author
@ -162,7 +173,7 @@ export const makeSelectTopLevelCommentsForUri = (uri: string) =>
    selectCommentsByUri,
    selectClaimsById,
    selectMyActiveClaims,
-    selectBlockedChannels,
+    selectMutedChannels,
    selectBlacklistedOutpointMap,
    selectFilteredOutpointMap,
    makeSelectClientSetting(SETTINGS.SHOW_MATURE),
@ -171,7 +182,7 @@ export const makeSelectTopLevelCommentsForUri = (uri: string) =>
      const comments = byClaimId && byClaimId[claimId];

      return comments
-        ? comments.filter(comment => {
+        ? comments.filter((comment) => {
            if (!comment) {
              return false;
            }
@ -212,7 +223,7 @@ export const makeSelectRepliesForParentId = (id: string) =>
    selectCommentsById,
    selectClaimsById,
    selectMyActiveClaims,
-    selectBlockedChannels,
+    selectMutedChannels,
    selectBlacklistedOutpointMap,
    selectFilteredOutpointMap,
    makeSelectClientSetting(SETTINGS.SHOW_MATURE),
@ -223,13 +234,13 @@ export const makeSelectRepliesForParentId = (id: string) =>
      if (!replyIdsForParent.length) return null;

      const comments = [];
-      replyIdsForParent.forEach(cid => {
+      replyIdsForParent.forEach((cid) => {
        comments.push(commentsById[cid]);
      });
      // const comments = byParentId && byParentId[id];

      return comments
-        ? comments.filter(comment => {
+        ? comments.filter((comment) => {
            if (!comment) {
              return false;
            }
@ -265,6 +276,20 @@ export const makeSelectRepliesForParentId = (id: string) =>
  );

 export const makeSelectTotalCommentsCountForUri = (uri: string) =>
-  createSelector(makeSelectCommentsForUri(uri), comments => {
+  createSelector(makeSelectCommentsForUri(uri), (comments) => {
    return comments ? comments.length : 0;
  });
+
+export const makeSelectChannelIsBlocked = (uri: string) =>
+  createSelector(selectModerationBlockList, (blockedChannelUris) => {
+    if (!blockedChannelUris || !blockedChannelUris) {
+      return false;
+    }
+
+    return blockedChannelUris.includes(uri);
+  });
+
+export const makeSelectUriIsBlockingOrUnBlocking = (uri: string) =>
+  createSelector(selectBlockingByUri, selectUnBlockingByUri, (blockingByUri, unBlockingByUri) => {
+    return blockingByUri[uri] || unBlockingByUri[uri];
+  });
--- a/ui/redux/selectors/content.js
+++ b/ui/redux/selectors/content.js
@ -13,7 +13,7 @@ import {
  makeSelectFileNameForUri,
 } from 'lbry-redux';
 import { makeSelectRecommendedContentForUri } from 'redux/selectors/search';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectAllCostInfoByUri, makeSelectCostInfoForUri } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import * as RENDER_MODES from 'constants/file_render_modes';
@ -81,7 +81,7 @@ export const makeSelectNextUnplayedRecommended = (uri: string) =>
    selectHistory,
    selectClaimsByUri,
    selectAllCostInfoByUri,
-    selectBlockedChannels,
+    selectMutedChannels,
    (
      recommendedForUri: Array<string>,
      history: Array<{ uri: string }>,
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@ -390,6 +390,16 @@ $metadata-z-index: 1;
  padding: 0;
 }

+.channel-staked__wrapper--inline {
+  position: relative;
+  background-color: transparent;
+  display: inline-block;
+  bottom: auto;
+  left: auto;
+  top: var(--spacing-xs);
+  padding: 0;
+}
+
 .channel-staked__indicator {
  margin-left: 2px;
  z-index: 3;
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@ -64,6 +64,12 @@
 .claim-preview__wrapper {
  padding: var(--spacing-m);
  list-style: none;
+
+  &:hover {
+    .claim__menu-button {
+      display: block;
+    }
+  }
 }

 .claim-preview__wrapper--notice {
@ -247,17 +253,6 @@

 .claim-preview-info {
  align-items: flex-start;
-
-  .channel-thumbnail {
-    display: none;
-    @include handleChannelGif(1.4rem);
-    margin-right: 0;
-    margin-left: var(--spacing-s);
-
-    @media (min-width: $breakpoint-small) {
-      display: block;
-    }
-  }
 }

 .claim-preview-info,
@ -408,6 +403,10 @@

  &:hover {
    cursor: pointer;
+
+    .claim__menu-button {
+      display: block;
+    }
  }

  @media (min-width: $breakpoint-large) {
@ -456,12 +455,23 @@
 }

 .claim-tile__title {
-  margin: var(--spacing-s);
+  position: relative;
+
+  padding: var(--spacing-s);
+  padding-right: var(--spacing-m);
+  padding-bottom: 0;
+  margin-bottom: var(--spacing-s);
+
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--font-small);
  min-height: 2rem;

+  .claim__menu-button {
+    right: 0.2rem;
+    top: var(--spacing-s);
+  }
+
  @media (min-width: $breakpoint-small) {
    min-height: 2.5rem;
  }
@ -571,3 +581,36 @@
 .claim-preview__null-label {
  margin: auto;
 }
+
+.claim-preview__channel-staked {
+  display: flex;
+  align-items: center;
+
+  .channel-thumbnail {
+    @include handleChannelGif(1.4rem);
+    margin-right: 0;
+  }
+}
+
+.claim__menu-button {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+
+  .icon {
+    stroke: var(--color-text);
+  }
+
+  &:not([aria-expanded='true']) {
+    display: none;
+  }
+}
+
+.claim__menu-button--inline {
+  position: relative;
+  display: block;
+  right: auto;
+  top: auto;
+  @extend .button--alt;
+  padding: 0 var(--spacing-xxs);
+}
--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@ -43,6 +43,15 @@
  box-shadow: none;
 }

+.menu__button {
+  &:hover {
+    .icon {
+      border-radius: var(--border-radius);
+      background-color: var(--color-card-background-highlighted);
+    }
+  }
+}
+
 .menu__title {
  &[aria-expanded='true'] {
    background-color: var(--color-primary-alt);
@ -54,16 +63,7 @@
  animation: menu-animate-in var(--animation-duration) var(--animation-style);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
-}

-.menu__list--header {
-  @extend .menu__list;
-  padding: var(--spacing-xs);
-  margin-top: 19px;
-}
-
-.menu__list--comments {
-  @extend .menu__list;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-xs) 0;
@ -73,6 +73,15 @@
  }
 }

+.menu__list--header {
+  @extend .menu__list;
+  margin-top: 19px;
+}
+
+.menu__list--comments {
+  @extend .menu__list;
+}
+
 .menu__link {
  display: flex;
  align-items: center;
--- a/ui/scss/init/_color.scss
+++ b/ui/scss/init/_color.scss
@ -36,7 +36,7 @@
  --color-button-primary-bg-hover: var(--color-primary-alt-2);
  --color-button-primary-hover-text: var(--color-primary-alt);
  --color-button-secondary-bg: var(--color-secondary-alt);
-  --color-button-secondary-border: #c5d7ed;
+  --color-button-secondary-border: var(--color-secondary-alt);
  --color-button-secondary-text: var(--color-secondary);
  --color-button-secondary-bg-hover: #b9d0e9;
  --color-button-alt-bg: var(--color-gray-1);
--- a/ui/store.js
+++ b/ui/store.js
@ -24,9 +24,9 @@ function isNotFunction(object) {
 }

 function createBulkThunkMiddleware() {
-  return ({ dispatch, getState }) => next => action => {
+  return ({ dispatch, getState }) => (next) => (action) => {
    if (action.type === 'BATCH_ACTIONS') {
-      action.actions.filter(isFunction).map(actionFn => actionFn(dispatch, getState));
+      action.actions.filter(isFunction).map((actionFn) => actionFn(dispatch, getState));
    }
    return next(action);
  };
@ -68,7 +68,6 @@ const subscriptionsFilter = createFilter('subscriptions', ['subscriptions']);
 const blockedFilter = createFilter('blocked', ['blockedChannels']);
 const settingsFilter = createBlacklistFilter('settings', ['loadedLanguages', 'language']);
 const whiteListedReducers = [
-  'comments',
  'fileInfo',
  'publish',
  'wallet',
@ -143,7 +142,7 @@ const sharedStateFilters = {
  subscriptions: {
    source: 'subscriptions',
    property: 'subscriptions',
-    transform: function(value) {
+    transform: (value) => {
      return value.map(({ uri }) => uri);
    },
  },
@ -162,7 +161,7 @@ const sharedStateCb = ({ dispatch, getState }) => {
 };

 const populateAuthTokenHeader = () => {
-  return next => action => {
+  return (next) => (action) => {
    if (
      (action.type === ACTIONS.USER_FETCH_SUCCESS || action.type === ACTIONS.AUTHENTICATION_SUCCESS) &&
      action.data.user.has_verified_email === true
--- a/ui/util/hex.js
+++ b/ui/util/hex.js
@ -1,8 +1,50 @@
 // @flow
+
+const EMOJI_REGEX = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g;
+
 export function toHex(str: string): string {
-  var result = '';
-  for (var i = 0; i < str.length; i++) {
-    result += str.charCodeAt(i).toString(16);
+  const array = Array.from(str);
+
+  let result = '';
+
+  for (var i = 0; i < array.length; i++) {
+    const val = array[i];
+
+    const isEmoji = EMOJI_REGEX.test(val);
+
+    const utf = isEmoji
+      ? toUTF8Array(val)
+          .map((num) => num.toString(16))
+          .join('')
+      : val.charCodeAt(0).toString(16);
+
+    result += utf;
  }
+
  return result;
 }
+
+function toUTF8Array(str) {
+  var utf8 = [];
+  for (var i = 0; i < str.length; i++) {
+    var charcode = str.charCodeAt(i);
+    if (charcode < 0x80) utf8.push(charcode);
+    else if (charcode < 0x800) {
+      utf8.push(0xc0 | (charcode >> 6), 0x80 | (charcode & 0x3f));
+    } else if (charcode < 0xd800 || charcode >= 0xe000) {
+      utf8.push(0xe0 | (charcode >> 12), 0x80 | ((charcode >> 6) & 0x3f), 0x80 | (charcode & 0x3f));
+    }
+    // surrogate pair
+    else {
+      i++;
+      charcode = (((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff)) + 0x010000;
+      utf8.push(
+        0xf0 | (charcode >> 18),
+        0x80 | ((charcode >> 12) & 0x3f),
+        0x80 | ((charcode >> 6) & 0x3f),
+        0x80 | (charcode & 0x3f)
+      );
+    }
+  }
+  return utf8;
+}