Stickers/emojis fall out / improvements (#220)

* Fix error logs * Improve LBC sticker flow/clarity * Show inline error if custom sticker amount below min * Sort emojis alphabetically * Improve loading of Images * Improve quality and display of emojis and fix CSS * Display both USD and LBC prices * Default to LBC tip if creator can't receive USD * Don't clear text-field after sticker is sent * Refactor notification component * Handle notifications * Don't show profile pic on sticker livestream comments * Change Sticker icon * Fix wording and number rounding * Fix blurring emojis * Disable non functional emote buttons
2021-11-05 16:31:51 -03:00 · 2021-11-05 16:31:51 -03:00 · 1dd3149795
commit 1dd3149795
parent 403321f064
20 changed files with 383 additions and 381 deletions
--- a/static/app-strings.json
+++ b/static/app-strings.json
@ -2235,133 +2235,8 @@
  "Network Data Hosting allows the p2p network to store blobs unrelated to your browsing.": "Network Data Hosting allows the p2p network to store blobs unrelated to your browsing.",
  "Content: Limit (GB)": "Content: Limit (GB)",
  "Network: Allow (GB)": "Network: Allow (GB)",
-  "Failed to view lbry://@Destiny#6/destiny-crashes-conservative-panel-w#a, please try again. If this problem persists, visit https://lbry.com/faq/support for support.": "Failed to view lbry://@Destiny#6/destiny-crashes-conservative-panel-w#a, please try again. If this problem persists, visit https://lbry.com/faq/support for support.",
  "A channel is required to repost on LBRY": "A channel is required to repost on LBRY",
-  "Failed to view lbry://@gatogalactico#9/gato-galactico-e-as-estrelas-ninja-dos#1, please try again. If this problem persists, visit https://lbry.com/faq/support for support.": "Failed to view lbry://@gatogalactico#9/gato-galactico-e-as-estrelas-ninja-dos#1, please try again. If this problem persists, visit https://lbry.com/faq/support for support.",
  "Admin": "Admin",
-  ":ALIEN:": ":ALIEN:",
-  ":ANGRY_2:": ":ANGRY_2:",
-  ":ANGRY_3:": ":ANGRY_3:",
-  ":ANGRY_4:": ":ANGRY_4:",
-  ":ANGRY_1:": ":ANGRY_1:",
-  ":BLIND:": ":BLIND:",
-  ":BLOCK:": ":BLOCK:",
-  ":BOMB:": ":BOMB:",
-  ":BRAIN_CHIP:": ":BRAIN_CHIP:",
-  ":CONFIRM:": ":CONFIRM:",
-  ":CONFUSED_1:": ":CONFUSED_1:",
-  ":CONFUSED_2:": ":CONFUSED_2:",
-  ":COOKING_SOMETHING_NICE:": ":COOKING_SOMETHING_NICE:",
-  ":CRY_2:": ":CRY_2:",
-  ":CRY_3:": ":CRY_3:",
-  ":CRY_4:": ":CRY_4:",
-  ":CRY_5:": ":CRY_5:",
-  ":CRY_1:": ":CRY_1:",
-  ":SPACE_DOGE:": ":SPACE_DOGE:",
-  ":DONUT:": ":DONUT:",
-  ":EGGPLANT_WITH_CONDOM:": ":EGGPLANT_WITH_CONDOM:",
-  ":EGGPLANT:": ":EGGPLANT:",
-  ":FIRE_UP:": ":FIRE_UP:",
-  ":FLAT_EARTH:": ":FLAT_EARTH:",
-  ":FLYING_SAUCER:": ":FLYING_SAUCER:",
-  ":HEART_CHOPPER:": ":HEART_CHOPPER:",
-  ":HYPER_TROLL:": ":HYPER_TROLL:",
-  ":ICE_CREAM:": ":ICE_CREAM:",
-  ":IDK:": ":IDK:",
-  ":ILLUMINATI_1:": ":ILLUMINATI_1:",
-  ":ILLUMINATI_2:": ":ILLUMINATI_2:",
-  ":KISS_2:": ":KISS_2:",
-  ":KISS_1:": ":KISS_1:",
-  ":LASER_GUN:": ":LASER_GUN:",
-  ":LAUGHING_2:": ":LAUGHING_2:",
-  ":LAUGHING_1:": ":LAUGHING_1:",
-  ":LOLLIPOP:": ":LOLLIPOP:",
-  ":LOVE_2:": ":LOVE_2:",
-  ":LOVE_1:": ":LOVE_1:",
-  ":MONSTER:": ":MONSTER:",
-  ":MUSHROOM:": ":MUSHROOM:",
-  ":NAIL_IT:": ":NAIL_IT:",
-  ":NO:": ":NO:",
-  ":OUCH:": ":OUCH:",
-  ":PREACE:": ":PREACE:",
-  ":PIZZA:": ":PIZZA:",
-  ":RABBIT_HOLE:": ":RABBIT_HOLE:",
-  ":RAINBOW_PUKE_1:": ":RAINBOW_PUKE_1:",
-  ":RAINBOW_PUKE_2:": ":RAINBOW_PUKE_2:",
-  ":SPACE_RESITAS:": ":SPACE_RESITAS:",
-  ":ROCK:": ":ROCK:",
-  ":SAD:": ":SAD:",
-  ":SALTY:": ":SALTY:",
-  ":SCARY:": ":SCARY:",
-  ":SLEEP:": ":SLEEP:",
-  ":SLIME_DOWN:": ":SLIME_DOWN:",
-  ":SMELLY_SOCKS:": ":SMELLY_SOCKS:",
-  ":SMILE_2:": ":SMILE_2:",
-  ":SMILE_1:": ":SMILE_1:",
-  ":SPACE_CHAD:": ":SPACE_CHAD:",
-  ":SPACE_JULIAN:": ":SPACE_JULIAN:",
-  ":SPACE_TOM:": ":SPACE_TOM:",
-  ":SPACE_WOJAK_1:": ":SPACE_WOJAK_1:",
-  ":SPOCK:": ":SPOCK:",
-  ":STAR:": ":STAR:",
-  ":SUNNY_DAY:": ":SUNNY_DAY:",
-  ":SUPRISED:": ":SUPRISED:",
-  ":SWEET:": ":SWEET:",
-  ":THINKING_1:": ":THINKING_1:",
-  ":THINKING_2:": ":THINKING_2:",
-  ":THUMB_DOWN:": ":THUMB_DOWN:",
-  ":THUMB_UP_1:": ":THUMB_UP_1:",
-  ":THUMB_UP_2:": ":THUMB_UP_2:",
-  ":TINFOIL_HAT:": ":TINFOIL_HAT:",
-  ":TROLL_KING:": ":TROLL_KING:",
-  ":UFO:": ":UFO:",
-  ":WAITING:": ":WAITING:",
-  ":WHAT:": ":WHAT:",
-  ":WOODOO_DOLL:": ":WOODOO_DOLL:",
-  "Global Emotes": "Global Emotes",
-  ":CAT:": ":CAT:",
-  ":FAIL:": ":FAIL:",
-  ":HYPE:": ":HYPE:",
-  ":PANTS_1:": ":PANTS_1:",
-  ":PANTS_2:": ":PANTS_2:",
-  ":PISS:": ":PISS:",
-  ":PREGNANT_MAN_ASIA:": ":PREGNANT_MAN_ASIA:",
-  ":PREGNANT_MAN_BLACK_HAIR:": ":PREGNANT_MAN_BLACK_HAIR:",
-  ":PREGNANT_MAN_BLACK_SKIN:": ":PREGNANT_MAN_BLACK_SKIN:",
-  ":PREGNANT_MAN_BLONDE:": ":PREGNANT_MAN_BLONDE:",
-  ":PREGNANT_MAN_RED_HAIR:": ":PREGNANT_MAN_RED_HAIR:",
-  ":PREGNANT_WOMAN_BLACK_HAIR_GREEN_SHIRT:": ":PREGNANT_WOMAN_BLACK_HAIR_GREEN_SHIRT:",
-  ":PREGNANT_WOMAN_BLACK_HAIR:": ":PREGNANT_WOMAN_BLACK_HAIR:",
-  ":PREGNANT_WOMAN_BLACK_SKIN:": ":PREGNANT_WOMAN_BLACK_SKIN:",
-  ":PREGNANT_WOMAN_BLONDE:": ":PREGNANT_WOMAN_BLONDE:",
-  ":PREGNANT_WOMAN_BROWN_HAIR:": ":PREGNANT_WOMAN_BROWN_HAIR:",
-  ":PREGNANT_WOMAN_RED_HAIR:": ":PREGNANT_WOMAN_RED_HAIR:",
-  ":ROCKET_SPACEMAN:": ":ROCKET_SPACEMAN:",
-  ":SICK_FLAME:": ":SICK_FLAME:",
-  ":SICK_SKULL:": ":SICK_SKULL:",
-  ":SLIME:": ":SLIME:",
-  ":SPHAGETTI_BATH:": ":SPHAGETTI_BATH:",
-  ":THUG_LIFE:": ":THUG_LIFE:",
-  ":WHUUT:": ":WHUUT:",
-  ":TIP_HAND_FLIP:": ":TIP_HAND_FLIP:",
-  ":TIP_HAND_FLIP_COIN:": ":TIP_HAND_FLIP_COIN:",
-  ":TIP_HAND_FLIP_LBC:": ":TIP_HAND_FLIP_LBC:",
-  ":COMET_TIP:": ":COMET_TIP:",
-  ":LBC_COMET_TIP:": ":LBC_COMET_TIP:",
-  ":SMALL_TIP:": ":SMALL_TIP:",
-  ":SILVER_ODYSEE_COIN:": ":SILVER_ODYSEE_COIN:",
-  ":SMALL_LBC_TIP:": ":SMALL_LBC_TIP:",
-  ":BITE_TIP:": ":BITE_TIP:",
-  ":BITE_TIP_CLOSEUP:": ":BITE_TIP_CLOSEUP:",
-  ":BITE_LBC_CLOSEUP:": ":BITE_LBC_CLOSEUP:",
-  ":MEDIUM_TIP:": ":MEDIUM_TIP:",
-  ":MEDIUM_LBC_TIP:": ":MEDIUM_LBC_TIP:",
-  ":LARGE_TIP:": ":LARGE_TIP:",
-  ":LARGE_LBC_TIP:": ":LARGE_LBC_TIP:",
-  ":BIG_TIP:": ":BIG_TIP:",
-  ":BIG_LBC_TIP:": ":BIG_LBC_TIP:",
-  ":FORTUNE_CHEST:": ":FORTUNE_CHEST:",
-  ":FORTUNE_CHEST_LBC:": ":FORTUNE_CHEST_LBC:",
  "Stickers": "Stickers",
  "Different Sticker": "Different Sticker",
  "LBC": "LBC",
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@ -329,7 +329,7 @@ function Comment(props: Props) {
                    </div>
                  ) : stickerFromMessage ? (
                    <div className="sticker__comment">
-                      <OptimizedImage src={stickerFromMessage.url} waitLoad />
+                      <OptimizedImage src={stickerFromMessage.url} waitLoad loading="lazy" />
                    </div>
                  ) : editedMessage.length >= LENGTH_TO_COLLAPSE ? (
                    <Expandable>
--- a/ui/component/commentCreate/emote-selector.jsx
+++ b/ui/component/commentCreate/emote-selector.jsx
@ -1,6 +1,6 @@
 // @flow
 import 'scss/component/_emote-selector.scss';
-import { EMOTES_24px as EMOTES } from 'constants/emotes';
+import { EMOTES_48px as EMOTES } from 'constants/emotes';
 import * as ICONS from 'constants/icons';
 import Button from 'component/button';
 import EMOJIS from 'emoji-dictionary';
@ -32,8 +32,6 @@ export default function EmoteSelector(props: Props) {

      <div className="emoteSelector__list">
        <div className="emoteSelector__listRow">
-          <div className="emoteSelector__listRowTitle">{__('Global Emotes')}</div>
-
          <div className="emoteSelector__listRowItems">
            {OLD_QUICK_EMOJIS.map((emoji) => (
              <Button
@ -50,7 +48,7 @@ export default function EmoteSelector(props: Props) {

              return (
                <Button
-                  key={String(emote)}
+                  key={emoteName}
                  title={emoteName}
                  button="alt"
                  className="button--file-action"
--- a/ui/component/commentCreate/sticker-selector.jsx
+++ b/ui/component/commentCreate/sticker-selector.jsx
@ -47,7 +47,7 @@ export default function StickerSelector(props: Props) {
            className="button--file-action"
            onClick={() => onSelect(sticker)}
          >
-            <OptimizedImage src={sticker.url} waitLoad />
+            <OptimizedImage src={sticker.url} waitLoad loading="lazy" />
            {sticker.price && sticker.price > 0 && (
              <CreditAmount superChatLight amount={sticker.price} size={2} isFiat />
            )}
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@ -26,6 +26,7 @@ import type { ElementRef } from 'react';
 import UriIndicator from 'component/uriIndicator';
 import usePersistedState from 'effects/use-persisted-state';
 import WalletTipAmountSelector from 'component/walletTipAmountSelector';
+import { Lbryio } from 'lbryinc';

 import { getStripeEnvironment } from 'util/stripe';
 const stripeEnvironment = getStripeEnvironment();
@ -111,12 +112,14 @@ export function CommentCreate(props: Props) {
  const [commentValue, setCommentValue] = React.useState('');
  const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
  const [stickerSelector, setStickerSelector] = React.useState();
-  const [activeTab, setActiveTab] = React.useState('');
+  const [activeTab, setActiveTab] = React.useState();
  const [tipError, setTipError] = React.useState();
  const [deletedComment, setDeletedComment] = React.useState(false);
  const [pauseQuickSend, setPauseQuickSend] = React.useState(false);
  const [showEmotes, setShowEmotes] = React.useState(false);
  const [disableReviewButton, setDisableReviewButton] = React.useState();
+  const [exchangeRate, setExchangeRate] = React.useState();
+  const [canReceiveFiatTip, setCanReceiveFiatTip] = React.useState(undefined);

  const selectedMentionIndex =
    commentValue.indexOf('@', selectionIndex) === selectionIndex
@ -145,6 +148,7 @@ export function CommentCreate(props: Props) {
  const minTip = (channelSettings && channelSettings.min_tip_amount_comment) || 0;
  const minAmount = minTip || minSuper || 0;
  const minAmountMet = minAmount === 0 || tipAmount >= minAmount;
+  const stickerPrice = selectedSticker && selectedSticker.price;

  const minAmountRef = React.useRef(minAmount);
  minAmountRef.current = minAmount;
@ -320,7 +324,7 @@ export function CommentCreate(props: Props) {
        if (setQuickReply) setQuickReply(res);

        if (res && res.signature) {
-          setCommentValue('');
+          if (!stickerValue) setCommentValue('');
          setReviewingSupportComment(false);
          setIsSupportComment(false);
          setCommentFailure(false);
@ -374,12 +378,45 @@ export function CommentCreate(props: Props) {
    return () => clearTimeout(timer);
  }, [pauseQuickSend]);

+  // Stickers: Get LBC-USD exchange rate if hasn't yet and selected a paid sticker
+  React.useEffect(() => {
+    if (stickerPrice && !exchangeRate) Lbryio.getExchangeRates().then(({ LBC_USD }) => setExchangeRate(LBC_USD));
+  }, [exchangeRate, stickerPrice]);
+
+  // Stickers: Check if creator has a tip account saved (on selector so that if a paid sticker is selected,
+  // it defaults to LBC tip instead of USD)
+  React.useEffect(() => {
+    if (!stripeEnvironment || !stickerSelector || canReceiveFiatTip !== undefined) return;
+
+    const channelClaimId = claim.signing_channel ? claim.signing_channel.claim_id : claim.claim_id;
+    const tipChannelName = claim.signing_channel ? claim.signing_channel.name : claim.name;
+
+    Lbryio.call(
+      'account',
+      'check',
+      {
+        channel_claim_id: channelClaimId,
+        channel_name: tipChannelName,
+        environment: stripeEnvironment,
+      },
+      'post'
+    )
+      .then((accountCheckResponse) => {
+        if (accountCheckResponse === true && canReceiveFiatTip !== true) {
+          setCanReceiveFiatTip(true);
+        } else {
+          setCanReceiveFiatTip(false);
+        }
+      })
+      .catch(() => {});
+  }, [canReceiveFiatTip, claim.claim_id, claim.name, claim.signing_channel, stickerSelector]);
+
  // **************************************************************************
  // Render
  // **************************************************************************

-  const getActionButton = (title: string, icon: string, handleClick: () => void) => (
-    <Button title={title} button="alt" icon={icon} onClick={handleClick} />
+  const getActionButton = (title: string, label?: string, icon: string, handleClick: () => void) => (
+    <Button title={title} label={label} button="alt" icon={icon} onClick={handleClick} />
  );

  if (channelSettings && !channelSettings.comments_enabled) {
@ -405,6 +442,7 @@ export function CommentCreate(props: Props) {

  return (
    <Form
+      onSubmit={() => {}}
      className={classnames('commentCreate', {
        'commentCreate--reply': isReply,
        'commentCreate--nestedReply': isNested,
@ -421,9 +459,15 @@ export function CommentCreate(props: Props) {
            <UriIndicator uri={activeChannelClaim.canonical_url} link />
          </div>
          <div className="commentCreate__stickerPreviewImage">
-            <OptimizedImage src={selectedSticker && selectedSticker.url} waitLoad />
+            <OptimizedImage src={selectedSticker && selectedSticker.url} waitLoad loading="lazy" />
          </div>
-          {selectedSticker.price && <FilePrice customPrice={selectedSticker.price} isFiat />}
+          {/* figure out lbc sticker prices */}
+          {selectedSticker.price && exchangeRate && (
+            <FilePrice
+              customPrices={{ priceFiat: selectedSticker.price, priceLBC: selectedSticker.price / exchangeRate }}
+              isFiat
+            />
+          )}
        </div>
      ) : isReviewingSupportComment && activeChannelClaim ? (
        <div className="commentCreate__supportCommentPreview">
@ -483,14 +527,16 @@ export function CommentCreate(props: Props) {
          />
        </>
      )}
-      {(isSupportComment || (isReviewingStickerComment && selectedSticker && selectedSticker.price)) && (
+
+      {(isSupportComment || (isReviewingStickerComment && stickerPrice)) && (
        <WalletTipAmountSelector
          activeTab={activeTab}
          amount={tipAmount}
          claim={claim}
          convertedAmount={convertedAmount}
-          customTipAmount={selectedSticker && selectedSticker.price}
-          fiatConversion={selectedSticker && !!selectedSticker.price} // remove
+          customTipAmount={stickerPrice}
+          exchangeRate={exchangeRate}
+          fiatConversion={selectedSticker && !!selectedSticker.price} // REMOVE / figure out
          onChange={(amount) => setTipAmount(amount)}
          setConvertedAmount={setConvertedAmount}
          setDisableSubmitButton={setDisableReviewButton}
@ -520,14 +566,7 @@ export function CommentCreate(props: Props) {
          <Button
            button="primary"
            label={__('Send')}
-            disabled={
-              (isSupportComment && (tipError || disableReviewButton)) ||
-              (selectedSticker &&
-                selectedSticker.price &&
-                (activeTab === TAB_FIAT
-                  ? tipAmount < selectedSticker.price
-                  : convertedAmount && convertedAmount < selectedSticker.price))
-            }
+            disabled={isSupportComment && (tipError || disableReviewButton)}
            onClick={() => {
              if (isSupportComment) {
                handleSupportComment();
@ -575,33 +614,38 @@ export function CommentCreate(props: Props) {
        {/** Stickers/Support Buttons **/}
        {!supportDisabled && !stickerSelector && (
          <>
-            {isReviewingStickerComment ? (
-              <Button
-                button="alt"
-                label={__('Different Sticker')}
-                onClick={() => {
-                  setReviewingStickerComment(false);
-                  setIsSupportComment(false);
-                  setStickerSelector(true);
-                }}
-              />
-            ) : (
-              getActionButton(__('Stickers'), ICONS.TAG, () => {
+            {getActionButton(
+              __('Stickers'),
+              isReviewingStickerComment ? __('Different Sticker') : undefined,
+              ICONS.STICKER,
+              () => {
+                if (isReviewingStickerComment) setReviewingStickerComment(false);
                setIsSupportComment(false);
                setStickerSelector(true);
-              })
+              }
+            )}
+
+            {!claimIsMine && (
+              <>
+                {(!isSupportComment || activeTab !== TAB_LBC) &&
+                  getActionButton(__('LBC'), isSupportComment ? __('Switch to LBC') : undefined, ICONS.LBC, () => {
+                    setIsSupportComment(true);
+                    setActiveTab(TAB_LBC);
+                  })}
+
+                {stripeEnvironment &&
+                  (!isSupportComment || activeTab !== TAB_FIAT) &&
+                  getActionButton(
+                    __('Cash'),
+                    isSupportComment ? __('Switch to Cash') : undefined,
+                    ICONS.FINANCE,
+                    () => {
+                      setIsSupportComment(true);
+                      setActiveTab(TAB_FIAT);
+                    }
+                  )}
+              </>
            )}
-            {!claimIsMine &&
-              getActionButton(__('LBC'), ICONS.LBC, () => {
-                setIsSupportComment(true);
-                setActiveTab(TAB_LBC);
-              })}
-            {!claimIsMine &&
-              stripeEnvironment &&
-              getActionButton(__('Cash'), ICONS.FINANCE, () => {
-                setIsSupportComment(true);
-                setActiveTab(TAB_FIAT);
-              })}
          </>
        )}

@ -619,7 +663,7 @@ export function CommentCreate(props: Props) {
              if (isSupportComment || isReviewingSupportComment) {
                if (!isReviewingSupportComment) setIsSupportComment(false);
                setReviewingSupportComment(false);
-                if (selectedSticker && selectedSticker.price) {
+                if (stickerPrice) {
                  setReviewingStickerComment(false);
                  setStickerSelector(false);
                  setSelectedSticker(null);
--- a/ui/component/common/credit-amount.jsx
+++ b/ui/component/common/credit-amount.jsx
@ -1,102 +1,112 @@
 // @flow
-import React from 'react';
+import { formatCredits, formatFullPrice } from 'util/format-credits';
 import classnames from 'classnames';
 import LbcSymbol from 'component/common/lbc-symbol';
-import { formatCredits, formatFullPrice } from 'util/format-credits';
+import React from 'react';

 type Props = {
-  amount: number,
+  amount?: number,
+  className?: string,
+  customAmounts?: { amountFiat: number, amountLBC: number },
+  fee?: boolean,
+  isEstimate?: boolean,
+  isFiat?: boolean,
+  noFormat?: boolean,
  precision: number,
  showFree: boolean,
  showFullPrice: boolean,
-  showPlus: boolean,
-  isEstimate?: boolean,
  showLBC?: boolean,
-  fee?: boolean,
-  className?: string,
-  noFormat?: boolean,
+  showPlus: boolean,
  size?: number,
  superChat?: boolean,
  superChatLight?: boolean,
-  isFiat?: boolean,
 };

 class CreditAmount extends React.PureComponent<Props> {
  static defaultProps = {
+    noFormat: false,
    precision: 2,
    showFree: false,
    showFullPrice: false,
-    showPlus: false,
    showLBC: true,
-    noFormat: false,
+    showPlus: false,
  };

  render() {
    const {
      amount,
-      precision,
-      showFullPrice,
-      showFree,
-      showPlus,
-      isEstimate,
-      fee,
-      showLBC,
      className,
+      customAmounts,
+      fee,
+      isEstimate,
+      isFiat,
      noFormat,
+      precision,
+      showFree,
+      showFullPrice,
+      showLBC,
+      showPlus,
      size,
      superChat,
      superChatLight,
-      isFiat,
    } = this.props;
    const minimumRenderableAmount = 10 ** (-1 * precision);

    // return null, otherwise it will try and convert undefined to a string
-    if (amount === undefined) {
-      return null;
-    }
-    const fullPrice = formatFullPrice(amount, 2);
-    const isFree = parseFloat(amount) === 0;
+    if (amount === undefined && customAmounts === undefined) return null;

-    let formattedAmount;
-    if (showFullPrice) {
-      formattedAmount = fullPrice;
-    } else {
-      formattedAmount =
-        amount > 0 && amount < minimumRenderableAmount
-          ? `<${minimumRenderableAmount}`
-          : formatCredits(amount, precision, true);
-    }
+    function getAmountText(amount: number, isFiat?: boolean) {
+      const fullPrice = formatFullPrice(amount, 2);
+      const isFree = parseFloat(amount) === 0;
+      let formattedAmount;

-    let amountText;
-    if (showFree && isFree) {
-      amountText = __('Free');
-    } else {
-      amountText = noFormat ? amount : formattedAmount;
-
-      if (showPlus && amount > 0) {
-        amountText = `+${amountText}`;
+      if (showFullPrice) {
+        formattedAmount = fullPrice;
+      } else {
+        formattedAmount =
+          amount > 0 && amount < minimumRenderableAmount
+            ? `<${minimumRenderableAmount}`
+            : formatCredits(amount, precision, true);
      }

-      if (showLBC && !isFiat) {
-        amountText = <LbcSymbol postfix={amountText} size={size} />;
-      } else if (showLBC && isFiat) {
-        amountText = <p style={{ display: 'inline' }}> ${(Math.round(Number(amountText) * 100) / 100).toFixed(2)}</p>;
-      }
+      if (showFree && isFree) {
+        return __('Free');
+      } else {
+        let amountText = noFormat ? amount : formattedAmount;

-      if (fee) {
-        amountText = __('%amount% fee', { amount: amountText });
+        if (showPlus && amount > 0) {
+          amountText = `+${amountText}`;
+        }
+
+        if (showLBC && !isFiat) {
+          amountText = <LbcSymbol postfix={amountText} size={size} />;
+        } else if (showLBC && isFiat) {
+          amountText = <p style={{ display: 'inline' }}> ${(Math.round(Number(amountText) * 100) / 100).toFixed(2)}</p>;
+        }
+
+        if (fee) {
+          amountText = __('%amount% fee', { amount: amountText });
+        }
+
+        return amountText;
      }
    }

    return (
      <span
-        title={fullPrice}
+        title={amount ? formatFullPrice(amount, 2) : ''}
        className={classnames(className, {
          'super-chat': superChat,
          'super-chat--light': superChatLight,
        })}
      >
-        <span className="credit-amount">{amountText}</span>
+        {customAmounts
+          ? Object.values(customAmounts).map((amount, index) => (
+              <span key={String(amount)} className="credit-amount">
+                {getAmountText(Number(amount), !index)}
+              </span>
+            ))
+          : amount && <span className="credit-amount">{getAmountText(amount, isFiat)}</span>}

        {isEstimate ? (
          <span className="credit-amount__estimate" title={__('This is an estimate and does not include data fees')}>
--- a/ui/component/common/form-components/form-field.jsx
+++ b/ui/component/common/form-components/form-field.jsx
@ -239,7 +239,7 @@ export class FormField extends React.PureComponent<Props> {
                {...inputProps}
              />
              <div className="form-field__textarea-info">
-                {!noEmojis && (
+                {!noEmojis && openEmoteMenu && (
                  <Button
                    type="alt"
                    className="button--file-action"
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@ -2022,4 +2022,14 @@ export const icons = {
      <line x1="15" y1="9" x2="15.01" y2="9" />
    </g>
  ),
+  [ICONS.STICKER]: buildIcon(
+    <g>
+      <path d="M7.13,9a.38.38,0,1,1-.38.38A.38.38,0,0,1,7.13,9" />
+      <path d="M5.51,15.42A7.34,7.34,0,0,0,12,19.34a7.83,7.83,0,0,0,.92-.06" />
+      <path d="M23.24,11.52A11.25,11.25,0,1,0,12,23.25h.5" />
+      <path d="M14.45,9.66a2.31,2.31,0,0,1,3.91,0" />
+      <line x1="23.24" y1="11.52" x2="12.5" y2="23.24" />
+      <path d="M12.5,23.24v-1A10.74,10.74,0,0,1,23.24,11.52" />
+    </g>
+  ),
 };
--- a/ui/component/common/markdown-preview.jsx
+++ b/ui/component/common/markdown-preview.jsx
@ -22,6 +22,10 @@ import OptimizedImage from 'component/optimizedImage';

 const RE_EMOTE = /:\+1:|:-1:|:[\w-]+:/;

+function isEmote(title, src) {
+  return title && RE_EMOTE.test(title) && src.includes('static.odycdn.com/emoticons');
+}
+
 type SimpleTextProps = {
  children?: React.Node,
 };
@ -104,8 +108,8 @@ const SimpleImageLink = (props: ImageLinkProps) => {
    return null;
  }

-  if (title && RE_EMOTE.test(title) && src.includes('static.odycdn.com/emoticons')) {
-    return <OptimizedImage title={title} src={src} />;
+  if (isEmote(title, src)) {
+    return <OptimizedImage src={src} title={title} className="emote" waitLoad loading="lazy" />;
  }

  return (
@ -195,9 +199,12 @@ const MarkdownPreview = (props: MarkdownProps) => {
          ),
      // Workaraund of remarkOptions.Fragment
      div: React.Fragment,
-      img: isStakeEnoughForPreview(stakedLevel)
-        ? ZoomableImage
-        : (imgProps) => <SimpleImageLink src={imgProps.src} alt={imgProps.alt} title={imgProps.title} />,
+      img: (imgProps) =>
+        isStakeEnoughForPreview(stakedLevel) && !isEmote(imgProps.title, imgProps.src) ? (
+          ZoomableImage
+        ) : (
+          <SimpleImageLink src={imgProps.src} alt={imgProps.alt} title={imgProps.title} />
+        ),
    },
  };

--- a/ui/component/filePrice/view.jsx
+++ b/ui/component/filePrice/view.jsx
@ -16,7 +16,7 @@ type Props = {
  type?: string,
  uri: string,
  // below props are just passed to <CreditAmount />
-  customPrice: number,
+  customPrices?: { priceFiat: number, priceLBC: number },
  hideFree?: boolean, // hide the file price if it's free
  isFiat?: boolean,
  showLBC?: boolean,
@ -50,10 +50,10 @@ class FilePrice extends React.PureComponent<Props> {
      claimWasPurchased,
      type,
      claimIsMine,
-      customPrice,
+      customPrices,
    } = this.props;

-    if (!customPrice && (claimIsMine || !costInfo || !costInfo.cost || (!costInfo.cost && hideFree))) return null;
+    if (!customPrices && (claimIsMine || !costInfo || !costInfo.cost || (!costInfo.cost && hideFree))) return null;

    const className = classnames(claimWasPurchased ? 'filePrice__key' : 'filePrice', {
      'filePrice--filepage': type === 'filepage',
@ -66,7 +66,10 @@ class FilePrice extends React.PureComponent<Props> {
      </span>
    ) : (
      <CreditAmount
-        amount={costInfo ? costInfo.cost : customPrice}
+        amount={costInfo ? costInfo.cost : undefined}
+        customAmounts={
+          customPrices ? { amountFiat: customPrices.priceFiat, amountLBC: customPrices.priceLBC } : undefined
+        }
        className={className}
        isEstimate={!!costInfo && !costInfo.includesData}
        isFiat={isFiat} // this goes
--- a/ui/component/notification/index.js
+++ b/ui/component/notification/index.js
@ -2,7 +2,9 @@ import { connect } from 'react-redux';
 import { doReadNotifications, doDeleteNotification } from 'redux/actions/notifications';
 import Notification from './view';

-export default connect(null, {
-  doReadNotifications,
-  doDeleteNotification,
-})(Notification);
+const perform = (dispatch, ownProps) => ({
+  readNotification: () => dispatch(doReadNotifications([ownProps.notification.id])),
+  deleteNotification: () => dispatch(doDeleteNotification(ownProps.notification.id)),
+});
+
+export default connect(null, perform)(Notification);
--- a/ui/component/notification/view.jsx
+++ b/ui/component/notification/view.jsx
@ -1,64 +1,63 @@
 // @flow
-import * as ICONS from 'constants/icons';
+import { formatLbryUrlForWeb } from 'util/url';
+import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
+import { NavLink } from 'react-router-dom';
+import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view';
+import { parseSticker } from 'util/comments';
+import { parseURI } from 'util/lbryURI';
 import { RULE } from 'constants/notifications';
-import React from 'react';
-import classnames from 'classnames';
-import Icon from 'component/common/icon';
-import DateTime from 'component/dateTime';
+import { useHistory } from 'react-router';
+import * as ICONS from 'constants/icons';
 import Button from 'component/button';
 import ChannelThumbnail from 'component/channelThumbnail';
-import { formatLbryUrlForWeb } from 'util/url';
-import { useHistory } from 'react-router';
-import { parseURI } from 'util/lbryURI';
-import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view';
-import FileThumbnail from 'component/fileThumbnail';
-import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
-import NotificationContentChannelMenu from 'component/notificationContentChannelMenu';
-import LbcMessage from 'component/common/lbc-message';
-import UriIndicator from 'component/uriIndicator';
-import { NavLink } from 'react-router-dom';
-import CommentReactions from 'component/commentReactions';
+import classnames from 'classnames';
 import CommentCreate from 'component/commentCreate';
+import CommentReactions from 'component/commentReactions';
 import CommentsReplies from 'component/commentsReplies';
+import DateTime from 'component/dateTime';
+import FileThumbnail from 'component/fileThumbnail';
+import Icon from 'component/common/icon';
+import LbcMessage from 'component/common/lbc-message';
+import NotificationContentChannelMenu from 'component/notificationContentChannelMenu';
+import OptimizedImage from 'component/optimizedImage';
+import React from 'react';
+import UriIndicator from 'component/uriIndicator';

 type Props = {
-  notification: WebNotification,
  menuButton: boolean,
-  children: any,
-  doReadNotifications: ([number]) => void,
-  doDeleteNotification: (number) => void,
+  notification: WebNotification,
+  deleteNotification: () => void,
+  readNotification: () => void,
 };

 export default function Notification(props: Props) {
-  const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props;
+  const { menuButton = false, notification, readNotification, deleteNotification } = props;
+
+  const { notification_rule, notification_parameters, is_read } = notification;
+
  const { push } = useHistory();
-  const { notification_rule, notification_parameters, is_read, id } = notification;
  const [isReplying, setReplying] = React.useState(false);
  const [quickReply, setQuickReply] = React.useState();

+  // ?
  const isIgnoredNotification = notification_rule === RULE.NEW_LIVESTREAM;
  if (isIgnoredNotification) {
    return null;
  }
+
  const isCommentNotification =
    notification_rule === RULE.COMMENT ||
    notification_rule === RULE.COMMENT_REPLY ||
    notification_rule === RULE.CREATOR_COMMENT;
  const commentText = isCommentNotification && notification_parameters.dynamic.comment;
+  const stickerFromComment = isCommentNotification && commentText && parseSticker(commentText);
+  const notificationTarget = getNotificationTarget();

-  let notificationTarget;
-  switch (notification_rule) {
-    default:
-      notificationTarget = notification_parameters.device.target;
-  }
-
-  const creatorIcon = (channelUrl) => {
-    return (
-      <UriIndicator uri={channelUrl} link>
-        <ChannelThumbnail small uri={channelUrl} />
-      </UriIndicator>
-    );
-  };
+  const creatorIcon = (channelUrl) => (
+    <UriIndicator uri={channelUrl} link>
+      <ChannelThumbnail small uri={channelUrl} />
+    </UriIndicator>
+  );
  let channelUrl;
  let icon;
  switch (notification_rule) {
@ -94,8 +93,7 @@ export default function Notification(props: Props) {
  let channelName;
  if (channelUrl) {
    try {
-      const { claimName } = parseURI(channelUrl);
-      channelName = claimName;
+      ({ claimName: channelName } = parseURI(channelUrl));
    } catch (e) {}
  }

@ -123,25 +121,28 @@ export default function Notification(props: Props) {

  try {
    const { isChannel } = parseURI(notificationTarget);
-    if (isChannel) {
-      urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE);
-    }
+    if (isChannel) urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE);
  } catch (e) {}

  notificationLink += `?${urlParams.toString()}`;
-  const navLinkProps = {
-    to: notificationLink,
-    onClick: (e) => e.stopPropagation(),
-  };
+  const navLinkProps = { to: notificationLink, onClick: (e) => e.stopPropagation() };
+
+  function getNotificationTarget() {
+    // switch (notification_rule) {
+    //   case RULE.DAILY_WATCH_AVAILABLE:
+    //   case RULE.DAILY_WATCH_REMIND:
+    //     return `/$/${PAGES.CHANNELS_FOLLOWING}`;
+    //   case RULE.MISSED_OUT:
+    //   case RULE.REWARDS_APPROVAL_PROMPT:
+    //     return `/$/${PAGES.REWARDS_VERIFY}?redirect=/$/${PAGES.REWARDS}`;
+    //   default:
+    return notification_parameters.device.target;
+    //  }
+  }

  function handleNotificationClick() {
-    if (!is_read) {
-      doReadNotifications([id]);
-    }
-
-    if (menuButton && notificationLink) {
-      push(notificationLink);
-    }
+    if (!is_read) readNotification();
+    if (menuButton && notificationLink) push(notificationLink);
  }

  const Wrapper = menuButton
@ -166,45 +167,40 @@ export default function Notification(props: Props) {
      );

  return (
-    <div
-      className={classnames('notification__wrapper', {
-        'notification__wrapper--unread': !is_read,
-      })}
-    >
+    <div className={classnames('notification__wrapper', { 'notification__wrapper--unread': !is_read })}>
      <Wrapper>
        <div className="notification__icon">{icon}</div>

-        <div className="notification__content-wrapper">
+        <div className="notificationContent__wrapper">
          <div className="notification__content">
-            <div className="notification__text-wrapper">
-              {!isCommentNotification && <div className="notification__title">{title}</div>}
+            <div className="notificationText__wrapper">
+              <div className="notification__title">{title}</div>

-              {isCommentNotification && commentText ? (
-                <>
-                  <div className="notification__title">{title}</div>
-                  <div title={commentText} className="notification__text">
-                    {commentText}
-                  </div>
-                </>
+              {!commentText ? (
+                <div
+                  title={notification_parameters.device.text.replace(/\sLBC/g, ' Credits')}
+                  className="notification__text"
+                >
+                  <LbcMessage>{notification_parameters.device.text}</LbcMessage>
+                </div>
+              ) : stickerFromComment ? (
+                <div className="sticker__comment">
+                  <OptimizedImage src={stickerFromComment.url} waitLoad loading="lazy" />
+                </div>
              ) : (
-                <>
-                  <div
-                    title={notification_parameters.device.text.replace(/\sLBC/g, ' Credits')}
-                    className="notification__text"
-                  >
-                    <LbcMessage>{notification_parameters.device.text}</LbcMessage>
-                  </div>
-                </>
+                <div title={commentText} className="notification__text">
+                  {commentText}
+                </div>
              )}
            </div>

            {notification_rule === RULE.NEW_CONTENT && (
-              <FileThumbnail uri={notification_parameters.device.target} className="notification__content-thumbnail" />
+              <FileThumbnail uri={notification_parameters.device.target} className="notificationContent__thumbnail" />
            )}
            {notification_rule === RULE.NEW_LIVESTREAM && (
              <FileThumbnail
                thumbnail={notification_parameters.device.image_url}
-                className="notification__content-thumbnail"
+                className="notificationContent__thumbnail"
              />
            )}
          </div>
@ -212,10 +208,10 @@ export default function Notification(props: Props) {
          <div className="notification__extra">
            {!is_read && (
              <Button
-                className="notification__mark-seen"
+                className="notification__markSeen"
                onClick={(e) => {
                  e.stopPropagation();
-                  doReadNotifications([id]);
+                  readNotification();
                }}
              />
            )}
@ -228,7 +224,7 @@ export default function Notification(props: Props) {
        <div className="notification__menu">
          <Menu>
            <MenuButton
-              className={'menu__button notification__menu-button'}
+              className="menu__button notification__menuButton"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
@ -237,7 +233,7 @@ export default function Notification(props: Props) {
              <Icon size={18} icon={ICONS.MORE_VERTICAL} />
            </MenuButton>
            <MenuList className="menu__list">
-              <MenuItem className="menu__link" onSelect={() => doDeleteNotification(id)}>
+              <MenuItem className="menu__link" onSelect={() => deleteNotification()}>
                <Icon aria-hidden icon={ICONS.DELETE} />
                {__('Delete')}
              </MenuItem>
--- a/ui/component/walletTipAmountSelector/view.jsx
+++ b/ui/component/walletTipAmountSelector/view.jsx
@ -26,6 +26,7 @@ type Props = {
  claim: StreamClaim,
  convertedAmount?: number,
  customTipAmount?: number,
+  exchangeRate?: any,
  fiatConversion?: boolean,
  tipError: boolean,
  tipError: string,
@ -44,6 +45,7 @@ function WalletTipAmountSelector(props: Props) {
    claim,
    convertedAmount,
    customTipAmount,
+    exchangeRate,
    fiatConversion,
    tipError,
    onChange,
@ -56,10 +58,16 @@ function WalletTipAmountSelector(props: Props) {
  const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', true);
  const [hasCardSaved, setHasSavedCard] = usePersistedState('comment-support:hasCardSaved', false);
  const [canReceiveFiatTip, setCanReceiveFiatTip] = React.useState(); // dont persist because it needs to be calc'd per creator
-  const [exchangeRate, setExchangeRate] = React.useState();
+
+  const convertToTwoDecimalsOrMore = (number: number, decimals: number = 2) =>
+    Number((Math.round(number * 10 ** decimals) / 10 ** decimals).toFixed(decimals));

  const tipAmountsToDisplay =
-    customTipAmount && fiatConversion && activeTab === TAB_FIAT ? [customTipAmount] : DEFAULT_TIP_AMOUNTS;
+    customTipAmount && fiatConversion && activeTab === TAB_FIAT
+      ? [customTipAmount]
+      : customTipAmount && exchangeRate
+      ? [convertToTwoDecimalsOrMore(customTipAmount / exchangeRate)]
+      : DEFAULT_TIP_AMOUNTS;

  // if it's fiat but there's no card saved OR the creator can't receive fiat tips
  const shouldDisableFiatSelectors = activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip);
@ -81,7 +89,7 @@ function WalletTipAmountSelector(props: Props) {
      ((amount > balance || balance === 0) && activeTab !== TAB_FIAT) ||
      shouldDisableFiatSelectors ||
      (customTipAmount && fiatConversion && activeTab !== TAB_FIAT && exchangeRate
-        ? amount * exchangeRate < customTipAmount
+        ? convertToTwoDecimalsOrMore(amount * exchangeRate) < customTipAmount
        : customTipAmount && amount < customTipAmount)
    );
  }
@ -95,19 +103,13 @@ function WalletTipAmountSelector(props: Props) {
    }
  }

-  function convertToTwoDecimals(number: number) {
-    return (Math.round(number * 100) / 100).toFixed(2);
-  }
-
  React.useEffect(() => {
-    if (!exchangeRate) {
-      Lbryio.getExchangeRates().then(({ LBC_USD }) => setExchangeRate(LBC_USD));
-    } else if ((!convertedAmount || convertedAmount !== amount * exchangeRate) && setConvertedAmount) {
+    if (setConvertedAmount && exchangeRate && (!convertedAmount || convertedAmount !== amount * exchangeRate)) {
      setConvertedAmount(amount * exchangeRate);
    }
  }, [amount, convertedAmount, exchangeRate, setConvertedAmount]);

-  // check if creator has a payment method saved
+  // check if user has a payment method saved
  // REMOVE
  React.useEffect(() => {
    if (!stripeEnvironment) return;
@ -130,7 +132,7 @@ function WalletTipAmountSelector(props: Props) {
    });
  }, [setHasSavedCard]);

-  // REMOVE
+  // check if creator has a tip account saved REMOVE
  React.useEffect(() => {
    if (!stripeEnvironment) return;

@ -173,6 +175,25 @@ function WalletTipAmountSelector(props: Props) {
          setTipError(__('Not enough Credits'));
        } else if (amount < MINIMUM_PUBLISH_BID) {
          setTipError(__('Amount must be higher'));
+        } else if (
+          convertedAmount &&
+          exchangeRate &&
+          customTipAmount &&
+          amount < convertToTwoDecimalsOrMore(customTipAmount / exchangeRate)
+        ) {
+          regexp = RegExp(/^(\d*([.]\d{0,2})?)$/);
+          const validCustomTipInput = regexp.test(String(amount));
+
+          if (validCustomTipInput) {
+            setTipError(
+              __('Amount of $%input_amount% LBC in USB is lower than price of $%price_amount%', {
+                input_amount: convertToTwoDecimalsOrMore(convertedAmount, 4),
+                price_amount: convertToTwoDecimalsOrMore(customTipAmount),
+              })
+            );
+          } else {
+            setTipError(__('Amount must have no more than 2 decimal places'));
+          }
        } else {
          setTipError(false);
        }
@ -187,35 +208,43 @@ function WalletTipAmountSelector(props: Props) {
          setTipError(__('Amount must be at least one dollar'));
        } else if (amount > 1000) {
          setTipError(__('Amount cannot be over 1000 dollars'));
+        } else if (customTipAmount && amount < customTipAmount) {
+          setTipError(
+            __('Amount is lower than price of $%price_amount%', {
+              price_amount: convertToTwoDecimalsOrMore(customTipAmount),
+            })
+          );
        } else {
          setTipError(false);
        }
      }
    }
-  }, [activeTab, amount, balance, setTipError]);
+  }, [activeTab, amount, balance, convertedAmount, customTipAmount, exchangeRate, setTipError]);

  const getHelpMessage = (helpMessage: any) => <div className="help">{helpMessage}</div>;

  return (
    <>
      <div className="section">
-        {tipAmountsToDisplay.map((defaultAmount) => (
-          <Button
-            key={defaultAmount}
-            disabled={shouldDisableAmountSelector(defaultAmount)}
-            button="alt"
-            className={classnames('button-toggle button-toggle--expandformobile', {
-              'button-toggle--active': defaultAmount === amount && !useCustomTip,
-              'button-toggle--disabled': amount > balance,
-            })}
-            label={defaultAmount}
-            icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
-            onClick={() => {
-              handleCustomPriceChange(defaultAmount);
-              setUseCustomTip(false);
-            }}
-          />
-        ))}
+        {tipAmountsToDisplay &&
+          tipAmountsToDisplay.map((defaultAmount) => (
+            <Button
+              key={defaultAmount}
+              disabled={shouldDisableAmountSelector(defaultAmount)}
+              button="alt"
+              className={classnames('button-toggle button-toggle--expandformobile', {
+                'button-toggle--active':
+                  convertToTwoDecimalsOrMore(defaultAmount) === convertToTwoDecimalsOrMore(amount) && !useCustomTip,
+                'button-toggle--disabled': amount > balance,
+              })}
+              label={defaultAmount}
+              icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
+              onClick={() => {
+                handleCustomPriceChange(defaultAmount);
+                setUseCustomTip(false);
+              }}
+            />
+          ))}

        <Button
          button="alt"
@ -242,13 +271,13 @@ function WalletTipAmountSelector(props: Props) {
        fiatConversion &&
        activeTab !== TAB_FIAT &&
        getHelpMessage(
-          __(
-            `This support is priced in $USD. ${
-              convertedAmount
-                ? __(`The current exchange rate for the submitted amount is: $${convertToTwoDecimals(convertedAmount)}`)
-                : ''
-            }`
-          )
+          __('This support is priced in $USD.') +
+            (convertedAmount
+              ? ' ' +
+                __('The current exchange rate for the submitted LBC amount is ~ $%exchange_amount%.', {
+                  exchange_amount: convertToTwoDecimalsOrMore(convertedAmount),
+                })
+              : '')
        )}

      {/* custom number input form */}
@ -276,7 +305,7 @@ function WalletTipAmountSelector(props: Props) {
          ? getHelpMessage(
              <>
                <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />
-                {__(' To Tip Creators')}
+                {' ' + __('To Tip Creators')}
              </>
            )
          : !canReceiveFiatTip
--- a/ui/constants/emotes.js
+++ b/ui/constants/emotes.js
@ -9,24 +9,23 @@ const buildEmote = (name: string, path: string) => ({

 const getEmotes = (px: string, multiplier: string) => [
  buildEmote('ALIEN', `${px}/Alien${multiplier}.png`),
+  buildEmote('ANGRY_1', `${px}/angry${multiplier}.png`),
  buildEmote('ANGRY_2', `${px}/angry%202${multiplier}.png`),
  buildEmote('ANGRY_3', `${px}/angry%203${multiplier}.png`),
  buildEmote('ANGRY_4', `${px}/angry%204${multiplier}.png`),
-  buildEmote('ANGRY_1', `${px}/angry${multiplier}.png`),
  buildEmote('BLIND', `${px}/blind${multiplier}.png`),
  buildEmote('BLOCK', `${px}/block${multiplier}.png`),
  buildEmote('BOMB', `${px}/bomb${multiplier}.png`),
  buildEmote('BRAIN_CHIP', `${px}/Brain%20chip${multiplier}.png`),
  buildEmote('CONFIRM', `${px}/CONFIRM${multiplier}.png`),
-  buildEmote('CONFUSED_1', `${px}/confused-1${multiplier}.png`),
+  buildEmote('CONFUSED_1', `${px}/confused${multiplier}-1.png`),
  buildEmote('CONFUSED_2', `${px}/confused${multiplier}.png`),
  buildEmote('COOKING_SOMETHING_NICE', `${px}/cooking%20something%20nice${multiplier}.png`),
+  buildEmote('CRY_1', `${px}/cry${multiplier}.png`),
  buildEmote('CRY_2', `${px}/cry%202${multiplier}.png`),
  buildEmote('CRY_3', `${px}/cry%203${multiplier}.png`),
  buildEmote('CRY_4', `${px}/cry%204${multiplier}.png`),
  buildEmote('CRY_5', `${px}/cry%205${multiplier}.png`),
-  buildEmote('CRY_1', `${px}/cry${multiplier}.png`),
-  buildEmote('SPACE_DOGE', `${px}/doge${multiplier}.png`),
  buildEmote('DONUT', `${px}/donut${multiplier}.png`),
  buildEmote('EGGPLANT_WITH_CONDOM', `${px}/eggplant%20with%20condom${multiplier}.png`),
  buildEmote('EGGPLANT', `${px}/eggplant${multiplier}.png`),
@ -37,27 +36,26 @@ const getEmotes = (px: string, multiplier: string) => [
  buildEmote('HYPER_TROLL', `${px}/HyperTroll${multiplier}.png`),
  buildEmote('ICE_CREAM', `${px}/ice%20cream${multiplier}.png`),
  buildEmote('IDK', `${px}/IDK${multiplier}.png`),
-  buildEmote('ILLUMINATI_1', `${px}/Illuminati-1${multiplier}.png`),
+  buildEmote('ILLUMINATI_1', `${px}/Illuminati${multiplier}-1.png`),
  buildEmote('ILLUMINATI_2', `${px}/Illuminati${multiplier}.png`),
-  buildEmote('KISS_2', `${px}/kiss%202${multiplier}.png`),
  buildEmote('KISS_1', `${px}/kiss${multiplier}.png`),
+  buildEmote('KISS_2', `${px}/kiss%202${multiplier}.png`),
  buildEmote('LASER_GUN', `${px}/laser%20gun${multiplier}.png`),
-  buildEmote('LAUGHING_2', `${px}/Laughing 2${multiplier}.png`),
  buildEmote('LAUGHING_1', `${px}/Laughing${multiplier}.png`),
+  buildEmote('LAUGHING_2', `${px}/Laughing 2${multiplier}.png`),
  buildEmote('LOLLIPOP', `${px}/Lollipop${multiplier}.png`),
-  buildEmote('LOVE_2', `${px}/Love%202${multiplier}.png`),
  buildEmote('LOVE_1', `${px}/Love${multiplier}.png`),
+  buildEmote('LOVE_2', `${px}/Love%202${multiplier}.png`),
  buildEmote('MONSTER', `${px}/Monster${multiplier}.png`),
  buildEmote('MUSHROOM', `${px}/mushroom${multiplier}.png`),
  buildEmote('NAIL_IT', `${px}/Nail%20It${multiplier}.png`),
  buildEmote('NO', `${px}/NO${multiplier}.png`),
  buildEmote('OUCH', `${px}/ouch${multiplier}.png`),
-  buildEmote('PREACE', `${px}/peace${multiplier}.png`),
  buildEmote('PIZZA', `${px}/pizza${multiplier}.png`),
+  buildEmote('PREACE', `${px}/peace${multiplier}.png`),
  buildEmote('RABBIT_HOLE', `${px}/rabbit%20hole${multiplier}.png`),
-  buildEmote('RAINBOW_PUKE_1', `${px}/rainbow%20puke-1${multiplier}.png`),
+  buildEmote('RAINBOW_PUKE_1', `${px}/rainbow%20puke${multiplier}-1.png`),
  buildEmote('RAINBOW_PUKE_2', `${px}/rainbow%20puke${multiplier}.png`),
-  buildEmote('SPACE_RESITAS', `${px}/resitas${multiplier}.png`),
  buildEmote('ROCK', `${px}/ROCK${multiplier}.png`),
  buildEmote('SAD', `${px}/sad${multiplier}.png`),
  buildEmote('SALTY', `${px}/salty${multiplier}.png`),
@ -65,22 +63,24 @@ const getEmotes = (px: string, multiplier: string) => [
  buildEmote('SLEEP', `${px}/Sleep${multiplier}.png`),
  buildEmote('SLIME_DOWN', `${px}/slime%20down${multiplier}.png`),
  buildEmote('SMELLY_SOCKS', `${px}/smelly%20socks${multiplier}.png`),
-  buildEmote('SMILE_2', `${px}/smile%202${multiplier}.png`),
  buildEmote('SMILE_1', `${px}/smile${multiplier}.png`),
+  buildEmote('SMILE_2', `${px}/smile%202${multiplier}.png`),
  buildEmote('SPACE_CHAD', `${px}/space%20chad${multiplier}.png`),
+  buildEmote('SPACE_DOGE', `${px}/doge${multiplier}.png`),
+  buildEmote('SPACE_GREEN_WOJAK', `${px}/space%20wojak${multiplier}-1.png`),
  buildEmote('SPACE_JULIAN', `${px}/Space%20Julian${multiplier}.png`),
+  buildEmote('SPACE_RED_WOJAK', `${px}/space%20wojak${multiplier}.png`),
+  buildEmote('SPACE_RESITAS', `${px}/resitas${multiplier}.png`),
  buildEmote('SPACE_TOM', `${px}/space%20Tom${multiplier}.png`),
-  buildEmote('SPACE_WOJAK_1', `${px}/space%20wojak-1${multiplier}.png`),
-  buildEmote('ANGRY_3', `${px}/space%20wojak${multiplier}.png`),
  buildEmote('SPOCK', `${px}/SPOCK${multiplier}.png`),
  buildEmote('STAR', `${px}/Star${multiplier}.png`),
  buildEmote('SUNNY_DAY', `${px}/sunny%20day${multiplier}.png`),
  buildEmote('SUPRISED', `${px}/surprised${multiplier}.png`),
  buildEmote('SWEET', `${px}/sweet${multiplier}.png`),
-  buildEmote('THINKING_1', `${px}/thinking-1${multiplier}.png`),
+  buildEmote('THINKING_1', `${px}/thinking${multiplier}-1.png`),
  buildEmote('THINKING_2', `${px}/thinking${multiplier}.png`),
  buildEmote('THUMB_DOWN', `${px}/thumb%20down${multiplier}.png`),
-  buildEmote('THUMB_UP_1', `${px}/thumb%20up-1${multiplier}.png`),
+  buildEmote('THUMB_UP_1', `${px}/thumb%20up${multiplier}-1.png`),
  buildEmote('THUMB_UP_2', `${px}/thumb%20up${multiplier}.png`),
  buildEmote('TINFOIL_HAT', `${px}/tin%20hat${multiplier}.png`),
  buildEmote('TROLL_KING', `${px}/Troll%20king${multiplier}.png`),
@ -91,6 +91,6 @@ const getEmotes = (px: string, multiplier: string) => [
 ];

 export const EMOTES_24px = getEmotes('24%20px', '');
-export const EMOTES_36px = getEmotes('36px', '@1.5x');
-export const EMOTES_48px = getEmotes('48%20px', '@2x');
-export const EMOTES_72px = getEmotes('72%20px', '@3x');
+export const EMOTES_36px = getEmotes('36px', '%401.5x');
+export const EMOTES_48px = getEmotes('48%20px', '%402x');
+export const EMOTES_72px = getEmotes('72%20px', '%403x');
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@ -179,3 +179,4 @@ export const ARTISTS = 'Artists';
 export const MYSTERIES = 'Mysteries';
 export const TECHNOLOGY = 'Technology';
 export const EMOJI = 'Emoji';
+export const STICKER = 'Sticker';
--- a/ui/scss/component/_comment-create.scss
+++ b/ui/scss/component/_comment-create.scss
@ -106,5 +106,16 @@ $thumbnailWidthSmall: 1rem;
  .filePrice {
    height: 1.5rem;
    width: 10rem;
+
+    .credit-amount:not(:last-child) {
+      &::after {
+        margin-left: var(--spacing-xxs);
+        content: '/';
+      }
+    }
+
+    .credit-amount:not(:first-child) {
+      margin-left: var(--spacing-xxs);
+    }
  }
 }
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@ -486,3 +486,8 @@ $thumbnailWidthSmall: 1rem;
    max-height: 100%;
  }
 }
+
+.emote {
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+}
--- a/ui/scss/component/_markdown-preview.scss
+++ b/ui/scss/component/_markdown-preview.scss
@ -117,7 +117,7 @@
  }

  // Image
-  img:not(.channel-thumbnail__custom) {
+  img:not(.channel-thumbnail__custom):not(.emote) {
    margin-bottom: var(--spacing-m);
    padding-top: var(--spacing-m);
    max-height: var(--inline-player-max-height);
--- a/ui/scss/component/_notification.scss
+++ b/ui/scss/component/_notification.scss
@ -13,6 +13,12 @@ $contentMaxWidth: 60rem;
    &:first-of-type {
      border-top: none;
    }
+
+    @media (min-width: $breakpoint-small) {
+      &:hover {
+        background-color: var(--color-card-background-highlighted);
+      }
+    }
  }

  .commentCreate,
@ -25,7 +31,7 @@ $contentMaxWidth: 60rem;
 .notification__icon {
  display: flex;
  align-items: flex-start;
-  margin: auto;
+  margin-top: var(--spacing-xxs);

  .icon__wrapper {
    width: 1rem;
@ -94,7 +100,7 @@ $contentMaxWidth: 60rem;
  }
 }

-.notification__content-wrapper {
+.notificationContent__wrapper {
  flex: 1;
  display: flex;
  justify-content: space-between;
@ -121,7 +127,7 @@ $contentMaxWidth: 60rem;
  }
 }

-.notification__content-thumbnail {
+.notificationContent__thumbnail {
  @include thumbnail;
  position: relative;
  margin-left: auto;
@ -139,8 +145,13 @@ $contentMaxWidth: 60rem;
  }
 }

-.notification__text-wrapper {
+.notificationText__wrapper {
  max-width: calc(#{$contentMaxWidth} - (#{$thumbnailWidth} * 16 / 9) - var(--spacing-m));
+
+  .sticker__comment {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
 }

 .notification__title {
@ -247,7 +258,7 @@ $contentMaxWidth: 60rem;
  }
 }

-.notification__mark-seen {
+.notification__markSeen {
  height: 12px;
  width: 12px;
  border-radius: 50%;
--- a/ui/util/remark-emote.js
+++ b/ui/util/remark-emote.js
@ -1,4 +1,4 @@
-import { EMOTES_24px as EMOTES } from 'constants/emotes';
+import { EMOTES_48px as EMOTES } from 'constants/emotes';
 import visit from 'unist-util-visit';

 const EMOTE_NODE_TYPE = 'emote';