diff --git a/ui/component/fileDescription/index.js b/ui/component/fileDescription/index.js index ce3b53a00..c33a812dc 100644 --- a/ui/component/fileDescription/index.js +++ b/ui/component/fileDescription/index.js @@ -4,16 +4,21 @@ import { makeSelectMetadataForUri, makeSelectTagsForUri, makeSelectPendingAmountByUri, + makeSelectClaimIsMine, } from 'lbry-redux'; +import { doOpenModal } from 'redux/actions/app'; import { selectUser } from 'redux/selectors/user'; import FileDescription from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), + claimIsMine: makeSelectClaimIsMine(props.uri)(state), metadata: makeSelectMetadataForUri(props.uri)(state), user: selectUser(state), tags: makeSelectTagsForUri(props.uri)(state), pendingAmount: makeSelectPendingAmountByUri(props.uri)(state), }); -export default connect(select, null)(FileDescription); +export default connect(select, { + doOpenModal, +})(FileDescription); diff --git a/ui/component/fileDescription/view.jsx b/ui/component/fileDescription/view.jsx index f4d64a95b..b916e8850 100644 --- a/ui/component/fileDescription/view.jsx +++ b/ui/component/fileDescription/view.jsx @@ -1,4 +1,6 @@ // @flow +import * as ICONS from 'constants/icons'; +import * as MODALS from 'constants/modal_types'; import React from 'react'; import classnames from 'classnames'; import { formatCredits } from 'lbry-redux'; @@ -16,14 +18,17 @@ type Props = { user: ?any, tags: any, pendingAmount: number, + doOpenModal: (id: string, {}) => void, + claimIsMine: boolean, }; function FileDescription(props: Props) { - const { uri, claim, metadata, tags, pendingAmount } = props; + const { uri, claim, metadata, tags, pendingAmount, doOpenModal, claimIsMine } = props; const [expanded, setExpanded] = React.useState(false); const [showCreditDetails, setShowCreditDetails] = React.useState(false); const amount = parseFloat(claim.amount) + parseFloat(pendingAmount || 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; if (!claim || !metadata) { return {__('Empty claim or metadata info.')}; @@ -54,9 +59,21 @@ function FileDescription(props: Props) { +
+ {claimIsMine && hasSupport && ( + +
{showCreditDetails && ( diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 0bf81910a..f0a1877c5 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -249,6 +249,7 @@ input-submit { display: flex; justify-content: space-between; width: 100%; + margin-bottom: var(--spacing-m); > * { width: 33%;