feat(nfts): clarify nft create offer fee a bit

blockchain · Nov 24, 2021 · f9ddd10 · f9ddd10
1 parent 51daae9
commit f9ddd10
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Tooltips/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Tooltips/index.js
@@ -306,6 +306,12 @@ class Tooltips extends React.PureComponent {
             defaultMessage='Your crypto is safe, but pricing data is currently unavailable.'
           />
         </Tooltip>
+        <Tooltip id='tooltip.opensea_offer_approval_fees' maxWidth='160px'>
+          <FormattedMessage
+            id='copy.opensea_offer_approval_fees'
+            defaultMessage='A one time fee required to make offers in the selected ERC20.'
+          />
+        </Tooltip>
       </TooltipWrapper>
     )
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/nfts/slice.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/nfts/slice.ts
@@ -211,6 +211,8 @@ const nftsSlice = createSlice({
       state.orderFlow.asset = Remote.NotAsked
       state.orderFlow.fees = Remote.NotAsked
       state.orderFlow.order = Remote.NotAsked
+      state.cancelListing = Remote.NotAsked
+      state.sellOrder = Remote.NotAsked
     },
     nftOrderFlowOpen: (
       state,

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Nfts/NftOrder/MakeOffer/fees.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Nfts/NftOrder/MakeOffer/fees.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import BigNumber from 'bignumber.js'
 
 import { GasCalculationOperations } from '@core/network/api/nfts/types'
-import { SpinningLoader } from 'blockchain-info-components'
+import { SpinningLoader, TooltipHost, TooltipIcon } from 'blockchain-info-components'
 import CoinDisplay from 'components/Display/CoinDisplay'
 import FiatDisplay from 'components/Display/FiatDisplay'
 import { Title, Value } from 'components/Flyout/model'
@@ -21,7 +21,7 @@ const Fees: React.FC<Props> = (props) => {
   useEffect(() => {
     if (activeOrder) {
       nftActions.fetchFees({
-        offer: '0',
+        offer: '10000',
         operation: GasCalculationOperations.Buy,
         order: activeOrder,
         paymentTokenAddress: WETH
@@ -45,8 +45,13 @@ const Fees: React.FC<Props> = (props) => {
           return (
             <>
               <CTARow>
-                <Title>
+                <Title style={{ display: 'flex' }}>
                   <FormattedMessage id='copy.fees' defaultMessage='Fees' />
+                  {val.approvalFees > 0 ? (
+                    <TooltipHost id='tooltip.opensea_offer_approval_fees'>
+                      <TooltipIcon name='question-in-circle-filled' />
+                    </TooltipHost>
+                  ) : null}
                 </Title>
                 <Value>
                   <div style={{ display: 'flex' }}>