remove loading feedback during price fetching (#1361)

src/components/@shared/ButtonBuy/index.tsx

@@ -22,7 +22,7 @@ interface ButtonBuyProps {
   selectedComputeAssetLowPoolLiquidity?: boolean
   selectedComputeAssetType?: string
   isBalanceSufficient: boolean
-  isLoading: boolean
+  isLoading?: boolean
   onClick?: (e: FormEvent<HTMLButtonElement>) => void
   stepText?: string
   type?: 'submit'

src/components/Asset/AssetActions/Download.tsx

@@ -38,6 +38,7 @@ export default function Download({
   const { accountId, web3 } = useWeb3()
   const { getOpcFeeForToken } = useMarketMetadata()
   const { isInPurgatory, isAssetNetwork } = useAsset()
+  const { poolData } = usePool()
   const isMounted = useIsMounted()
 
   const [isDisabled, setIsDisabled] = useState(true)
@@ -46,25 +47,25 @@ export default function Download({
   const [isLoading, setIsLoading] = useState(false)
   const [isOwned, setIsOwned] = useState(false)
   const [validOrderTx, setValidOrderTx] = useState('')
-
-  const { poolData } = usePool()
   const [orderPriceAndFees, setOrderPriceAndFees] =
     useState<OrderPriceAndFees>()
+
   useEffect(() => {
     if (!asset?.accessDetails) return
 
     setIsOwned(asset?.accessDetails?.isOwned)
     setValidOrderTx(asset?.accessDetails?.validOrderTx)
+
     // get full price and fees
     async function init() {
       if (
         asset?.accessDetails?.addressOrId === ZERO_ADDRESS ||
         asset?.accessDetails?.type === 'free' ||
-        (!poolData && asset?.accessDetails?.type === 'dynamic')
+        (!poolData && asset?.accessDetails?.type === 'dynamic') ||
+        // Stop refetching price and fees when asset is being accessed
+        isLoading
       )
         return
-      setIsLoading(true)
-      setStatusText('Calculating price including fees.')
 
       const params: CalcInGivenOutParams = {
         tokenInLiquidity: poolData?.baseTokenLiquidity,
@@ -82,12 +83,11 @@ export default function Download({
       )
 
       setOrderPriceAndFees(orderPriceAndFees)
-
-      setIsLoading(false)
+      setIsDisabled(false)
     }
 
     init()
-  }, [asset, accountId, poolData, getOpcFeeForToken])
+  }, [asset, accountId, poolData, getOpcFeeForToken, isLoading])
 
   useEffect(() => {
     setHasDatatoken(Number(dtBalance) >= 1)
@@ -112,6 +112,7 @@ export default function Download({
 
   async function handleOrderOrDownload() {
     setIsLoading(true)
+
     try {
       if (isOwned) {
         setStatusText(
@@ -171,7 +172,6 @@ export default function Download({
       assetTimeout={secondsToString(asset.services[0].timeout)}
       assetType={asset?.metadata?.type}
       stepText={statusText}
-      // isLoading={pricingIsLoading || isLoading}
       isLoading={isLoading}
       priceType={asset.accessDetails?.type}
       isConsumable={asset.accessDetails?.isPurchasable}

src/components/Asset/AssetActions/index.tsx

@@ -26,6 +26,8 @@ export default function AssetActions({
 }): ReactElement {
   const { accountId, balance, web3 } = useWeb3()
   const { isAssetNetwork } = useAsset()
+  const newCancelToken = useCancelToken()
+  const isMounted = useIsMounted()
 
   // TODO: using this for the publish preview works fine, but produces a console warning
   // on asset details page as there is no formik context there:
@@ -41,27 +43,7 @@ export default function AssetActions({
     asset?.services.filter((service) => service.type === 'compute')[0]
   )
 
-  const [isConsumable, setIsConsumable] = useState<boolean>(true)
-  const [consumableFeedback, setConsumableFeedback] = useState<string>('')
-  const newCancelToken = useCancelToken()
-  const isMounted = useIsMounted()
-
-  // useEffect(() => {
-  //   if (!ddo || !accountId || !ocean || !isAssetNetwork) return
-
-  //   async function checkIsConsumable() {
-  //     const consumable = await ocean.assets.isConsumable(
-  //       ddo,
-  //       accountId.toLowerCase()
-  //     )
-  //     if (consumable) {
-  //       setIsConsumable(consumable.result)
-  //       setConsumableFeedback(consumable.message)
-  //     }
-  //   }
-  //   checkIsConsumable()
-  // }, [accountId, isAssetNetwork, ddo, ocean])
-
+  // Get and set file info
   useEffect(() => {
     const oceanConfig = getOceanConfig(asset?.chainId)
     if (!oceanConfig) return
@@ -136,8 +118,6 @@ export default function AssetActions({
       dtBalance={dtBalance}
       file={fileMetadata}
       fileIsLoading={fileIsLoading}
-      isConsumable={isConsumable}
-      consumableFeedback={consumableFeedback}
     />
   ) : (
     <Consume
@@ -146,7 +126,6 @@ export default function AssetActions({
       isBalanceSufficient={isBalanceSufficient}
       file={fileMetadata}
       fileIsLoading={fileIsLoading}
-      consumableFeedback={consumableFeedback}
     />
   )