add unlock button nex to expandable credits button

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);

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 <span className="empty">{__('Empty claim or metadata info.')}</span>;
@@ -54,9 +59,21 @@ function FileDescription(props: Props) {
           <Button button="link" label={__('More')} onClick={() => setExpanded(!expanded)} />
         )}
 
-        <Button button="link" onClick={() => setShowCreditDetails(!showCreditDetails)}>
-          <LbcSymbol postfix={showCreditDetails ? __('Hide') : formattedAmount} />
-        </Button>
+        <div className="section__actions--no-margin">
+          {claimIsMine && hasSupport && (
+            <Button
+              button="link"
+              className="expandable__button"
+              icon={ICONS.UNLOCK}
+              onClick={() => {
+                doOpenModal(MODALS.LIQUIDATE_SUPPORTS, { uri });
+              }}
+            />
+          )}
+          <Button button="link" onClick={() => setShowCreditDetails(!showCreditDetails)}>
+            <LbcSymbol postfix={showCreditDetails ? __('Hide') : formattedAmount} />
+          </Button>
+        </div>
       </div>
 
       {showCreditDetails && (

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%;