diff --git a/static/app-strings.json b/static/app-strings.json
index 40eea5808..2728cb16d 100644
--- a/static/app-strings.json
+++ b/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",
diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
index 21bb157a9..a14e9c49d 100644
--- a/ui/component/common/icon-custom.jsx
+++ b/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" />
diff --git a/ui/component/postViewer/index.js b/ui/component/postViewer/index.js
index c2bd8d4d4..fd706066f 100644
--- a/ui/component/postViewer/index.js
+++ b/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);
diff --git a/ui/component/postViewer/view.jsx b/ui/component/postViewer/view.jsx
index 06175c592..9f211048e 100644
--- a/ui/component/postViewer/view.jsx
+++ b/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} />
diff --git a/ui/constants/icons.js b/ui/constants/icons.js
index 326d33f5d..f1ad4e32b 100644
--- a/ui/constants/icons.js
+++ b/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';
diff --git a/ui/scss/component/_post.scss b/ui/scss/component/_post.scss
index ec23edcb9..04fba2597 100644
--- a/ui/scss/component/_post.scss
+++ b/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);