feat: stop handling appeals internally

the frontend will direct the user to the
arbitrable interface to handle appealing,
crowdfunding, etc.

Author: greenlucid

src/hooks/appeal-time.js

@@ -1,22 +1,16 @@
 import { useMemo } from 'react'
 import { DISPUTE_STATUS } from '../utils/item-status'
-import { bigNumberify } from 'ethers/utils'
 
 const useAppealTime = item =>
   useMemo(() => {
     if (!item || item.disputeStatus !== DISPUTE_STATUS.APPEALABLE) return {}
-    const { appealStart, appealEnd } = item
-    const appealDuration = appealEnd.sub(appealStart)
-    const appealEndLoser = appealStart.add(appealDuration.div(bigNumberify(2)))
+    const { appealEnd } = item
 
     const appealRemainingTime =
       appealEnd.toNumber() * 1000 - Math.floor(Date.now())
-    const appealRemainingTimeLoser =
-      appealEndLoser.toNumber() * 1000 - Math.floor(Date.now())
 
     return {
-      appealRemainingTime,
-      appealRemainingTimeLoser
+      appealRemainingTime
     }
   }, [item])
 

src/pages/item-details/crowdfunding-card.js

@@ -1,19 +1,17 @@
 import React, { useContext } from 'react'
-import { Card, Typography, Progress } from 'antd'
+import { Card, Typography } from 'antd'
 import styled from 'styled-components/macro'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   DISPUTE_STATUS,
-  PARTY,
   itemToStatusCode,
   STATUS_CODE
 } from 'utils/item-status'
 import { TCRViewContext } from 'contexts/tcr-view-context'
-import useRequiredFees from 'hooks/required-fees'
-import { formatEther } from 'ethers/utils'
 import itemPropType from 'prop-types/item'
 import BNPropType from 'prop-types/bn'
-import useNativeCurrency from 'hooks/native-currency'
+import { WalletContext } from 'contexts/wallet-context'
+import getNetworkEnv from 'utils/network-env'
 
 const StyledCard = styled(Card)`
   background: linear-gradient(111.6deg, #4d00b4 46.25%, #6500b4 96.25%);
@@ -57,34 +55,14 @@ const StyledIcon = styled(FontAwesomeIcon)`
   margin: 12px;
 `
 
-const CrowdfundingCard = ({ item, timestamp }) => {
-  const {
-    challengePeriodDuration,
-    sharedStakeMultiplier,
-    winnerStakeMultiplier,
-    loserStakeMultiplier,
-    MULTIPLIER_DIVISOR
-  } = useContext(TCRViewContext)
-  const nativeCurrency = useNativeCurrency()
-
-  const requesterFees = useRequiredFees({
-    side: PARTY.REQUESTER,
-    sharedStakeMultiplier,
-    winnerStakeMultiplier,
-    loserStakeMultiplier,
-    currentRuling: item && item.currentRuling,
-    item,
-    MULTIPLIER_DIVISOR
-  })
-  const challengerFees = useRequiredFees({
-    side: PARTY.CHALLENGER,
-    sharedStakeMultiplier,
-    winnerStakeMultiplier,
-    loserStakeMultiplier,
-    currentRuling: item && item.currentRuling,
-    item,
-    MULTIPLIER_DIVISOR
-  })
+const CrowdfundingCard = ({ item, timestamp, request }) => {
+  const { networkId } = useContext(WalletContext)
+  const { arbitrator: klerosAddress, uiURL } =
+    getNetworkEnv('REACT_APP_KLEROS_ADDRESSES', networkId) || {}
+
+  const { disputeID, arbitrator } = request || {}
+
+  const { challengePeriodDuration } = useContext(TCRViewContext)
 
   if (
     !item ||
@@ -93,93 +71,37 @@ const CrowdfundingCard = ({ item, timestamp }) => {
   )
     return null
 
-  const { hasPaid, amountPaid, currentRuling } = item
-
-  if (
-    !requesterFees ||
-    !challengerFees ||
-    !challengerFees.requiredForSide ||
-    !challengerFees.potentialReward ||
-    !requesterFees.requiredForSide ||
-    !requesterFees.potentialReward
-  )
-    return null
-
   const statusCode = itemToStatusCode(item, timestamp, challengePeriodDuration)
 
   if (statusCode === STATUS_CODE.WAITING_ENFORCEMENT) return null
 
-  const requesterPercentage =
-    amountPaid[PARTY.REQUESTER]
-      .mul(MULTIPLIER_DIVISOR)
-      .div(requesterFees.requiredForSide)
-      .toNumber() / 100
-  const challengerPercentage =
-    amountPaid[PARTY.CHALLENGER]
-      .mul(MULTIPLIER_DIVISOR)
-      .div(challengerFees.requiredForSide)
-      .toNumber() / 100
-
   return (
     <StyledCard>
       <StyledContent>
         <StyledSection>
           <StyledTitle strong level={4}>
-            Appeal Crowdfunding
+            Appeal Phase
           </StyledTitle>
           <StyledIcon icon="coins" size="2x" />
           <StyledParagraph>
             Contribute appeal fees and earn rewards if the side you back wins
-            the round
-          </StyledParagraph>
-        </StyledSection>
-        <StyledSection>
-          <StyledTitle strong level={4}>
-            Submitter
-          </StyledTitle>
-          <Progress
-            percent={hasPaid[PARTY.REQUESTER] ? 100 : requesterPercentage}
-            status={hasPaid[PARTY.REQUESTER] ? 'success' : 'active'}
-            showInfo={false}
-          />
-          <br />
-          <StyledParagraph>
-            {hasPaid[PARTY.REQUESTER]
-              ? `Submitter funded. The challenger must now fully fund his side of the appeal before the deadline in order not to lose the dispute.`
-              : `Contribute arbitration fees to the submitter's appeal for a chance to win at most ${formatEther(
-                  requesterFees.potentialReward
-                )} ${nativeCurrency}.`}
-          </StyledParagraph>
-        </StyledSection>
-        <StyledSection>
-          <StyledTitle strong level={4}>
-            Challenger
-          </StyledTitle>
-          <Progress
-            percent={hasPaid[PARTY.CHALLENGER] ? 100 : challengerPercentage}
-            status={hasPaid[PARTY.CHALLENGER] ? 'success' : 'active'}
-            showInfo={false}
-          />
-          <br />
-          <StyledParagraph>
-            {hasPaid[PARTY.CHALLENGER]
-              ? 'Challenger fully funded. The submitter must now fully fund his side of the appeal before the deadline in order not to lose the dispute.'
-              : `Contribute arbitration fees to the challenger's appeal for a chance to win at most ${formatEther(
-                  challengerFees.potentialReward
-                )} ${nativeCurrency}.`}
-          </StyledParagraph>
-        </StyledSection>
-        <StyledSection>
-          <StyledIcon icon="info-circle" size="2x" />
-          <StyledParagraph>
-            {currentRuling === PARTY.NONE
-              ? 'The arbitrator did not give a decisive ruling. If a party fully funds his side of an appeal, the other must also fund in order to not lose the dispute.'
-              : `If the ${
-                  currentRuling === PARTY.REQUESTER ? 'challenger' : 'submitter'
-                } fully funds his side of the appeal, the ${
-                  currentRuling === PARTY.REQUESTER ? 'submitter' : 'challenger'
-                } must also fund his side of the appeal in order not to lose the case.`}
+            the round.
           </StyledParagraph>
+          {klerosAddress.toLowerCase() === arbitrator.toLowerCase() ? (
+            <StyledParagraph>
+              Please{' '}
+              <a href={uiURL.replace(':disputeID', disputeID.toString())}>
+                go to the Kleros Court
+              </a>{' '}
+              to manage this step.
+            </StyledParagraph>
+          ) : (
+            <StyledParagraph>
+              The arbitrator that rules the inclusion of this item is not
+              compatible with Kleros Court. If you wanted to appeal, please
+              request assistance in Telegram.
+            </StyledParagraph>
+          )}
         </StyledSection>
       </StyledContent>
     </StyledCard>

src/pages/item-details/index.js

@@ -333,7 +333,12 @@ const ItemDetails = ({ itemID, search }) => {
           itemMetaEvidence={itemMetaEvidence}
         />
         {/* Crowdfunding card is only rendered if the item has an appealable dispute. */}
-        <CrowdfundingCard item={decodedItem || item} timestamp={timestamp} />
+        {/* V2 arbitrator handles appeals internally, so appeal logic is removed. */}
+        <CrowdfundingCard
+          item={decodedItem || item}
+          timestamp={timestamp}
+          request={requests[requests.length - 1]}
+        />
 
         {/* Spread the `requests` parameter to convert elements from array to an object */}
         <RequestTimelines

src/pages/item-details/item-status-card.js

@@ -97,9 +97,8 @@ const ItemStatusCard = ({
   } = useContext(TCRViewContext)
 
   // Get remaining appeal time, if any and build countdown.
-  const { appealRemainingTime, appealRemainingTimeLoser } = useAppealTime(item)
+  const { appealRemainingTime } = useAppealTime(item)
   const appealCountdown = useHumanizedCountdown(appealRemainingTime)
-  const appealLoserCountdown = useHumanizedCountdown(appealRemainingTimeLoser)
   const { arbitrator: klerosAddress, uiURL } =
     getNetworkEnv('REACT_APP_KLEROS_ADDRESSES', networkId) || {}
 
@@ -274,21 +273,6 @@ const ItemStatusCard = ({
                 {appealCountdown}
               </Descriptions.Item>
             )}
-          {/* Decisive ruling winner countdown. */}
-          {currentRuling !== PARTY.NONE &&
-            (statusCode === STATUS_CODE.CROWDFUNDING ||
-              statusCode === STATUS_CODE.CROWDFUNDING_WINNER) && (
-              <Descriptions.Item label="Winner Appeal Time">
-                {appealCountdown}
-              </Descriptions.Item>
-            )}
-          {/* Decisive ruling loser countdown. */}
-          {currentRuling !== PARTY.NONE &&
-            statusCode === STATUS_CODE.CROWDFUNDING && (
-              <Descriptions.Item label="Loser Appeal Time">
-                {appealLoserCountdown}
-              </Descriptions.Item>
-            )}
         </StyledDescriptions>
       </Card>
       {/* Only render modal if the item status requires it. */}