static/app-strings.json

@@ -1867,6 +1867,7 @@
   "Help LBRY Save Crypto": "Help LBRY Save Crypto",
   "The US government is attempting to destroy the cryptocurrency industry. Can you help?": "The US government is attempting to destroy the cryptocurrency industry. Can you help?",
   "Learn more and sign petition": "Learn more and sign petition",
+  "View claim details": "View claim details",
   "Publishing...": "Publishing...",
   "Collection": "Collection",
   "Fetch transaction data for export": "Fetch transaction data for export",

ui/component/common/icon-custom.jsx

@@ -385,6 +385,13 @@ export const icons = {
       <line x1="12" y1="16" x2="12" y2="16" />
     </g>
   ),
+  [ICONS.INFO]: buildIcon(
+    <g>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="8" />
+      <line x1="12" y1="12" x2="12" y2="16" />
+    </g>
+  ),
   [ICONS.UNLOCK]: buildIcon(
     <g>
       <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />

ui/component/postViewer/index.js

@@ -1,9 +1,13 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectClaimForUri, makeSelectClaimIsMine } from 'lbry-redux';
 import PostViewer from './view';
+import { doOpenModal } from 'redux/actions/app';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
+  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
 });
 
-export default connect(select)(PostViewer);
+export default connect(select, {
+  doOpenModal,
+})(PostViewer);

ui/component/postViewer/view.jsx

@@ -1,27 +1,54 @@
 // @flow
 import * as React from 'react';
+import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
+import { formatCredits } from 'lbry-redux';
 import FileAuthor from 'component/fileAuthor';
+import FileDetails from 'component/fileDetails';
 import FileTitle from 'component/fileTitle';
 import FileActions from 'component/fileActions';
 import FileRenderInitiator from 'component/fileRenderInitiator';
 import FileRenderInline from 'component/fileRenderInline';
+import FileValues from 'component/fileValues';
 import FileViewCount from 'component/fileViewCount';
-import CreditAmount from 'component/common/credit-amount';
+import ClaimTags from 'component/claimTags';
 import DateTime from 'component/dateTime';
+import Button from 'component/button';
+import LbcSymbol from 'component/common/lbc-symbol';
+import classnames from 'classnames';
+
+const EXPAND = {
+  NONE: 'none',
+  CREDIT_DETAILS: 'credit_details',
+  FILE_DETAILS: 'file_details',
+};
 
 type Props = {
   uri: string,
   claim: ?StreamClaim,
+  claimIsMine: boolean,
+  doOpenModal: (id: string, {}) => void,
 };
 
 function PostViewer(props: Props) {
-  const { uri, claim } = props;
+  const { uri, claim, claimIsMine, doOpenModal } = props;
+  const [expand, setExpand] = React.useState(EXPAND.NONE);
 
   if (!claim) {
     return null;
   }
 
   const amount = parseFloat(claim.amount) + parseFloat(claim.meta.support_amount);
+  const formattedAmount = formatCredits(amount, 2, true);
+  const hasSupport = claim && claim.meta && claim.meta.support_amount && Number(claim.meta.support_amount) > 0;
+
+  function handleExpand(newExpand) {
+    if (expand === newExpand) {
+      setExpand(EXPAND.NONE);
+    } else {
+      setExpand(newExpand);
+    }
+  }
 
   return (
     <div className="post">
@@ -30,11 +57,51 @@ function PostViewer(props: Props) {
           <DateTime uri={uri} show={DateTime.SHOW_DATE} />
         </span>
       </FileTitle>
-      <div className="post__info">
-        <CreditAmount amount={amount} />
+
+      <div
+        className={classnames('post__info', {
+          'post__info--expanded': expand !== EXPAND.NONE,
+        })}
+      >
+        <div className="post__info--grouped">
+          <Button
+            button="link"
+            className="dim"
+            icon={ICONS.INFO}
+            aria-label={__('View claim details')}
+            onClick={() => handleExpand(EXPAND.FILE_DETAILS)}
+          />
+          <Button button="link" className="dim" onClick={() => handleExpand(EXPAND.CREDIT_DETAILS)}>
+            <LbcSymbol postfix={expand === EXPAND.CREDIT_DETAILS ? __('Hide') : formattedAmount} />
+          </Button>
+          {claimIsMine && hasSupport && (
+            <Button
+              button="link"
+              className="expandable__button"
+              icon={ICONS.UNLOCK}
+              aria-label={__('Unlock tips')}
+              onClick={() => {
+                doOpenModal(MODALS.LIQUIDATE_SUPPORTS, { uri });
+              }}
+            />
+          )}
+        </div>
         <FileViewCount uri={uri} />
       </div>
 
+      {expand === EXPAND.CREDIT_DETAILS && (
+        <div className="section post__info--credit-details">
+          <FileValues uri={uri} />
+        </div>
+      )}
+
+      {expand === EXPAND.FILE_DETAILS && (
+        <div className="section post__info--credit-details">
+          <ClaimTags uri={uri} type="large" />
+          <FileDetails uri={uri} />
+        </div>
+      )}
+
       <FileAuthor uri={uri} />
 
       <FileRenderInitiator uri={uri} />

ui/constants/icons.js

@@ -6,6 +6,7 @@
 export const REWARDS = 'Award';
 export const LOCAL = 'Folder';
 export const ALERT = 'AlertCircle';
+export const INFO = 'InfoCircle';
 export const COPY = 'Clipboard';
 export const ARROW_LEFT = 'ChevronLeft';
 export const ARROW_RIGHT = 'ChevronRight';

ui/scss/component/_post.scss

@@ -70,6 +70,32 @@
   }
 }
 
+.post__info--expanded {
+  margin-bottom: var(--spacing-s);
+}
+
+.post__info--grouped {
+  .button--link {
+    margin-right: var(--spacing-s);
+  }
+
+  .dim {
+    color: var(--color-text-subtitle);
+    stroke: var(--color-text-subtitle);
+  }
+}
+
+.post__info--credit-details {
+  @include font-sans;
+  margin-top: var(--spacing-l);
+  margin-bottom: var(--spacing-l);
+  width: 75%;
+
+  .tag {
+    margin-top: 0;
+  }
+}
+
 .post__date {
   display: block;
   margin-top: var(--spacing-s);