LBC Purchase Modal: repeat fund check instead of failing silently

## Issue
The purchase button invokes the modal, and the modal just fails silently when there's insufficient funds.

## Change
I believe we used to show the button differently when the funds are insufficient (grayed out?).

Given the purchase button + claim overlay refactoring, it's probably easier now to just let the user click the button, and inform in the modal if there's insufficient funds. The file page already have the same "insufficient fund" warning.

ui/modal/modalAffirmPurchase/index.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
 import { doPlayUri, doSetPlayingUri } from 'redux/actions/content';
-import { selectPlayingUri } from 'redux/selectors/content';
+import { selectInsufficientCreditsForUri, selectPlayingUri } from 'redux/selectors/content';
 import { doHideModal, doAnaltyicsPurchaseEvent } from 'redux/actions/app';
 import { makeSelectMetadataForUri } from 'redux/selectors/claims';
 import ModalAffirmPurchase from './view';
 
 const select = (state, props) => ({
+  isInsufficientCredits: selectInsufficientCreditsForUri(state, props.uri),
   metadata: makeSelectMetadataForUri(props.uri)(state),
   playingUri: selectPlayingUri(state),
 });

ui/modal/modalAffirmPurchase/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import analytics from 'analytics';
+import ClaimInsufficientCredits from 'component/claimInsufficientCredits';
 import FilePrice from 'component/filePrice';
 import { Modal } from 'modal/modal';
 import Card from 'component/common/card';
@@ -13,6 +14,7 @@ import { isURIEqual } from 'util/lbryURI';
 const ANIMATION_LENGTH = 2500;
 
 type Props = {
+  isInsufficientCredits: boolean,
   closeModal: () => void,
   loadVideo: (string, (GetResponse) => void) => void,
   uri: string,
@@ -25,7 +27,17 @@ type Props = {
 };
 
 function ModalAffirmPurchase(props: Props) {
-  const { closeModal, loadVideo, metadata, uri, analyticsPurchaseEvent, playingUri, setPlayingUri, cancelCb } = props;
+  const {
+    isInsufficientCredits,
+    closeModal,
+    loadVideo,
+    metadata,
+    uri,
+    analyticsPurchaseEvent,
+    playingUri,
+    setPlayingUri,
+    cancelCb,
+  } = props;
   const [success, setSuccess] = React.useState(false);
   const [purchasing, setPurchasing] = React.useState(false);
   const modalTitle = __('Confirm Purchase');
@@ -81,6 +93,14 @@ function ModalAffirmPurchase(props: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- on mount
   }, []);
 
+  if (isInsufficientCredits) {
+    return (
+      <Modal type="card" isOpen onAborted={cancelPurchase}>
+        <Card title={__('Insufficient credits')} subtitle={<ClaimInsufficientCredits uri={uri} />} />
+      </Modal>
+    );
+  }
+
   return (
     <Modal type="card" isOpen contentLabel={modalTitle} onAborted={cancelPurchase}>
       <Card