Feature/#1371

app/src/components/market/sections/market_verify/market_verify.tsx

@@ -1,17 +1,15 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { ItemTypes, gtcrEncode } from '@kleros/gtcr-encoder'
-import { abi as _GeneralizedTCR } from '@kleros/tcr/build/contracts/GeneralizedTCR.json'
-import { ethers } from 'ethers'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { RouteComponentProps, useHistory, withRouter } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { ConnectedWeb3Context } from '../../../../hooks'
+import { ConnectedWeb3Context, useCpk } from '../../../../hooks'
 import { useKlerosCuration } from '../../../../hooks/useKlerosCuration'
 import { MarketMakerData, Status } from '../../../../util/types'
 import { Button, ButtonContainer } from '../../../button'
 import { ButtonType } from '../../../button/button_styling_types'
-import { InlineLoading } from '../../../loading'
+import { FullLoading, InlineLoading } from '../../../loading'
 import { CurationRow, GenericError } from '../../common/common_styled'
 
 import { DxDaoCuration } from './option/dxdao_curation'
@@ -40,8 +38,11 @@ interface Props extends RouteComponentProps<any> {
 const MarketVerifyWrapper: React.FC<Props> = (props: Props) => {
   const { context, marketMakerData } = props || {}
   const [selection, setSelection] = useState<number | undefined>()
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
   const { data, error, status } = useKlerosCuration(marketMakerData, context)
+
   const history = useHistory()
+  const cpk = useCpk()
 
   const selectSource = useCallback(
     (value: number) => {
@@ -53,40 +54,49 @@ const MarketVerifyWrapper: React.FC<Props> = (props: Props) => {
   )
 
   const loading = status === Status.Loading && !data
-  const { ovmAddress } = data || {}
+  const { marketVerificationData, ovmAddress } = data || {}
+  const verificationState = marketVerificationData ? marketVerificationData.verificationState : false
   const { message: errorMessage } = error || {}
   const { address, curatedByDxDao, question } = marketMakerData || {}
   const { title } = question || {}
-
-  const ovmInstance = useMemo(() => {
-    if (!context || !context.account || !ovmAddress) return
-    const signer = context.library.getSigner()
-    return new ethers.Contract(ovmAddress, _GeneralizedTCR, signer)
-  }, [context, ovmAddress])
-
-  const onSubmitMarket = useCallback(() => {
-    if (!ovmInstance || !data) return
-
-    const columns = [
-      {
-        label: 'Question',
-        type: ItemTypes.TEXT,
-      },
-      {
-        label: 'Market URL',
-        type: ItemTypes.LINK,
-      },
-    ]
-    const values = {
-      Question: title,
-      'Market URL': `https://omen.eth.link/#/${address}`,
+  useEffect(() => {
+    if (isModalOpen && verificationState) setIsModalOpen(false)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [marketVerificationData])
+  const onSubmitMarket = useCallback(async () => {
+    try {
+      setIsModalOpen(true)
+
+      const columns = [
+        {
+          label: 'Question',
+          type: ItemTypes.TEXT,
+        },
+        {
+          label: 'Market URL',
+          type: ItemTypes.LINK,
+        },
+      ]
+      const values = {
+        Question: title,
+        'Market URL': `https://omen.eth.link/#/${address}`,
+      }
+
+      const encodedParams = gtcrEncode({ columns, values })
+      if (!cpk || !marketMakerData || !data || !ovmAddress) {
+        setIsModalOpen(false)
+        return
+      }
+
+      await cpk.requestVerification({
+        params: encodedParams,
+        submissionDeposit: data.submissionDeposit,
+        ovmAddress,
+      })
+    } catch {
+      setIsModalOpen(false)
     }
-
-    const encodedParams = gtcrEncode({ columns, values })
-    ovmInstance.addItem(encodedParams, {
-      value: ethers.utils.bigNumberify(data.submissionDeposit),
-    })
-  }, [address, data, ovmInstance, title])
+  }, [address, data, ovmAddress, title, marketMakerData, cpk])
 
   if (!loading && errorMessage) return <GenericError>{errorMessage || 'Failed to fetch curation data'}</GenericError>
 
@@ -108,12 +118,13 @@ const MarketVerifyWrapper: React.FC<Props> = (props: Props) => {
         </Button>
         <Button
           buttonType={ButtonType.primaryAlternative}
-          disabled={loading || typeof selection !== 'number' || !ovmInstance}
+          disabled={loading || typeof selection !== 'number' || !ovmAddress || verificationState != 1}
           onClick={onSubmitMarket}
         >
           Request Verification
         </Button>
       </BottomButtonWrapper>
+      {isModalOpen && <FullLoading message={`Requesting ${selection === 0 ? `Kleros` : `DxDao`} verification`} />}
     </MarketVerification>
   )
 }

app/src/services/cpk.ts

@@ -15,6 +15,7 @@ import { ERC20Service } from './erc20'
 import { MarketMakerService } from './market_maker'
 import { MarketMakerFactoryService } from './market_maker_factory'
 import { OracleService } from './oracle'
+import { OvmService } from './ovm'
 import { RealitioService } from './realitio'
 
 const logger = getLogger('Services::CPKService')
@@ -67,6 +68,12 @@ interface CPKRedeemParams {
   conditionalTokens: ConditionalTokenService
 }
 
+interface CPKRequestVerificationParams {
+  params: string
+  ovmAddress: string
+  submissionDeposit: string
+}
+
 class CPKService {
   cpk: any
   provider: Web3Provider
@@ -411,6 +418,21 @@ class CPKService {
       throw err
     }
   }
+  requestVerification = async ({ ovmAddress, params, submissionDeposit }: CPKRequestVerificationParams) => {
+    try {
+      const signer = this.provider.getSigner()
+      const ovm = new OvmService()
+      const contractInstance = await ovm.createOvmContractInstance(signer, ovmAddress)
+
+      const { hash } = await ovm.generateTransaction(params, contractInstance, submissionDeposit)
+
+      await this.provider.waitForTransaction(hash)
+      return true
+    } catch (err) {
+      logger.error('Error while requesting market verification via Kleros!', err.message)
+      throw err
+    }
+  }
 
   redeemPositions = async ({
     collateralToken,
@@ -421,7 +443,7 @@ class CPKService {
     numOutcomes,
     oracle,
     question,
-  }: CPKRedeemParams): Promise<TransactionReceipt> => {
+  }: CPKRedeemParams) => {
     try {
       const signer = this.provider.getSigner()
       const account = await signer.getAddress()
@@ -455,6 +477,7 @@ class CPKService {
     } catch (err) {
       logger.error(`Error trying to resolve condition or redeem for question id '${question.id}'`, err.message)
       throw err
+      return false
     }
   }
 }

app/src/services/index.ts

@@ -7,3 +7,4 @@ export { OracleService } from './oracle'
 export { CPKService } from './cpk'
 export { KlerosService } from './kleros'
 export { DxTCRService } from './dx_tcr'
+export { OvmService } from './ovm'

app/src/services/ovm.ts

@@ -0,0 +1,28 @@
+import { abi } from '@kleros/tcr/build/contracts/GeneralizedTCR.json'
+import { ethers } from 'ethers'
+
+class OvmService {
+  abi: any
+
+  constructor() {
+    this.abi = abi
+  }
+
+  createOvmContractInstance = async (signer: ethers.providers.JsonRpcSigner, ovmAddress: string) => {
+    return new ethers.Contract(ovmAddress, this.abi, signer)
+  }
+  generateTransaction = async (params: string, contract: any, deposit: string) => {
+    try {
+      if (!params || !contract || !deposit) return false
+      const transaction = await contract.addItem(params, {
+        value: ethers.utils.bigNumberify(deposit),
+      })
+      return transaction ? transaction : 'invalid'
+    } catch (e) {
+      throw new Error('Failed at generating transaction!')
+      return false
+    }
+  }
+}
+
+export { OvmService }