Fix issues consuming free assets (#834)

* get order history based on ddo chainId

* disabled consume when not connected to wallet, refetch orders on connect

* disable create price button if not assetNetwork

* get previous orders on order action

src/components/atoms/Alert.tsx

@@ -23,6 +23,7 @@ export default function Alert({
   action?: {
     name: string
     style?: 'text' | 'primary' | 'ghost'
+    disabled?: boolean
     handleAction: (e: FormEvent<HTMLButtonElement>) => void
   }
   onDismiss?: () => void
@@ -48,6 +49,7 @@ export default function Alert({
           size="small"
           style={action.style || 'primary'}
           onClick={action.handleAction}
+          disabled={action.disabled}
         >
           {action.name}
         </Button>

src/components/organisms/AssetActions/Consume.tsx

@@ -5,7 +5,8 @@ import File from '../../atoms/File'
 import Price from '../../atoms/Price'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import { useAsset } from '../../../providers/Asset'
-import { gql, useQuery } from 'urql'
+import { gql } from 'urql'
+import { fetchData, getQueryContext } from '../../../utils/subgraph'
 import { OrdersData } from '../../../@types/apollo/OrdersData'
 import BigNumber from 'bignumber.js'
 import { useOcean } from '../../../providers/Ocean'
@@ -63,15 +64,19 @@ export default function Consume({
   const [maxDt, setMaxDT] = useState<number>(1)
   const [isConsumablePrice, setIsConsumablePrice] = useState(true)
   const [assetTimeout, setAssetTimeout] = useState('')
-  const [result] = useQuery<OrdersData>({
-    query: previousOrderQuery,
-    variables: {
+  const [data, setData] = useState<OrdersData>()
+
+  useEffect(() => {
+    if (!ddo || !accountId) return
+    const context = getQueryContext(ddo.chainId)
+    const variables = {
       id: ddo.dataToken?.toLowerCase(),
       account: accountId?.toLowerCase()
     }
-    // pollInterval: 5000
-  })
-  const { data } = result
+    fetchData(previousOrderQuery, variables, context).then((result: any) => {
+      setData(result.data)
+    })
+  }, [ddo, accountId, hasPreviousOrder])
 
   async function checkMaxAvaialableTokens(price: BestPrice) {
     if (!ocean || !price) return
@@ -83,7 +88,8 @@ export default function Consume({
   }
 
   useEffect(() => {
-    if (!data || !assetTimeout || data.tokenOrders.length === 0) return
+    if (!data || !assetTimeout || data.tokenOrders.length === 0 || !accountId)
+      return
 
     const lastOrder = data.tokenOrders[0]
     if (assetTimeout === '0') {
@@ -99,7 +105,7 @@ export default function Consume({
         setHasPreviousOrder(false)
       }
     }
-  }, [data, assetTimeout])
+  }, [data, assetTimeout, accountId])
 
   useEffect(() => {
     const { timeout } = ddo.findServiceByType('access').attributes.main
@@ -120,6 +126,7 @@ export default function Consume({
   }, [dtBalance])
 
   useEffect(() => {
+    if (!accountId) return
     setIsDisabled(
       !isConsumable ||
         ((!ocean ||
@@ -141,6 +148,7 @@ export default function Consume({
     pricingIsLoading,
     isConsumablePrice,
     hasDatatoken,
+    accountId,
     isConsumable
   ])
 

src/components/organisms/AssetContent/Pricing/index.tsx

@@ -10,6 +10,7 @@ import Feedback from './Feedback'
 import { graphql, useStaticQuery } from 'gatsby'
 import { usePricing } from '../../../../hooks/usePricing'
 import styles from './index.module.css'
+import { useAsset } from '../../../../providers/Asset'
 
 const query = graphql`
   query PricingQuery {
@@ -67,6 +68,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
 
   const { createPricing, pricingIsLoading, pricingError, pricingStepText } =
     usePricing()
+  const { isAssetNetwork } = useAsset()
 
   const hasFeedback = pricingIsLoading || typeof success !== 'undefined'
 
@@ -133,6 +135,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
             text={content.empty.info}
             action={{
               name: content.empty.action.name,
+              disabled: !isAssetNetwork,
               handleAction: handleShowPricingForm
             }}
           />