Refactor: use named constants for Deal state

src/model/Deal.js

@@ -1,3 +1,14 @@
+export const DealState = {
+  Created: 0,
+  Accepted: 1,
+  Funded: 2,
+  Paid: 3,
+  Disputed: 4,
+  Cancelled: 5,
+  Resolved: 6,
+  Released: 7,
+}
+
 export default class Deal {
   constructor(contract) {
     this.contract = contract
@@ -32,7 +43,7 @@ export default class Deal {
         this.taker = taker
         this.tokenAmount = Number(tokenAmount)
         this.fiatAmount = Number(fiatAmount) / 10 ** 6 // FIXME test with large input
-        this.state = Number(state) // FIXME constants
+        this.state = Number(state)
         this.paymentInstructions = paymentInstructions
         this.allowCancelUnacceptedAfter = new Date(Number(allowCancelUnacceptedAfter) * 1000)
         this.allowCancelUnpaidAfter = new Date(Number(allowCancelUnpaidAfter) * 1000)

src/pages/Me/UserDeals.test.tsx

@@ -17,6 +17,16 @@ vi.mock('@/hooks/useContract', () => ({
 // Mock models
 vi.mock('@/model/Deal.js', () => {
   return {
+    DealState: {
+      Created: 0,
+      Accepted: 1,
+      Funded: 2,
+      Paid: 3,
+      Disputed: 4,
+      Cancelled: 5,
+      Resolved: 6,
+      Released: 7,
+    },
     default: class Deal {
       // mocked constructor
       constructor(c) {

src/pages/Me/UserDeals.tsx

@@ -1,14 +1,23 @@
 import { Link } from 'react-router-dom'
 import { Empty, List, Skeleton, Tag } from 'antd'
 import React, { useEffect, useState } from 'react'
-import Deal from '@/model/Deal.js'
+import Deal, { DealState } from '@/model/Deal.js'
 import { useAccount } from 'wagmi'
 import { useContract } from '@/hooks/useContract'
 import Offer from '@/model/Offer.js'
 
-function StateTag(args) {
-  const index = ['Initiated', 'Accepted', 'Funded', 'Paid', 'Disputed', 'Canceled', 'Resolved', 'Completed']
-  return <Tag color={args.state === 7 ? 'green' : 'blue'}>{index[args.state]}</Tag>
+function StateTag({ state }: { state: number }) {
+  const stateNames = {
+    [DealState.Created]: 'Initiated',
+    [DealState.Accepted]: 'Accepted',
+    [DealState.Funded]: 'Funded',
+    [DealState.Paid]: 'Paid',
+    [DealState.Disputed]: 'Disputed',
+    [DealState.Cancelled]: 'Canceled',
+    [DealState.Resolved]: 'Resolved',
+    [DealState.Released]: 'Completed',
+  }
+  return <Tag color={state === DealState.Released ? 'green' : 'blue'}>{stateNames[state]}</Tag>
 }
 
 function DealItem({ deal }) {