Refactoring (#401)

* refactoring

(cherry picked from commit 4de86d5b08)

* removed unused imports and variables

* added type for binary resolution

* Prettier

* const for binary resolutions

* using the type "resolution"

* Prettier

* Update functions/src/create-contract.ts

* launch config for debugging with vs code
* "Launch Chrome" does not work since login via google is not possible in debugger-chrome
* Breakpoints are unbound when attached to chrome

.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceRoot}"
+        },
+        {
+            "type": "chrome",
+            "request": "attach",
+            "name": "Attach to Chrome",
+            "port": 9222,
+            "urlFilter": "http://localhost:3000/*",
+            "webRoot": "${workspaceFolder}"
+          }
+    ]
+}

common/contract.ts

@@ -71,7 +71,7 @@ export type Binary = {
   outcomeType: 'BINARY'
   initialProbability: number
   resolutionProbability?: number // Used for BINARY markets resolved to MKT
-  resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL'
+  resolution?: resolution
 }
 
 export type FreeResponse = {
@@ -91,6 +91,8 @@ export type Numeric = {
 }
 
 export type outcomeType = AnyOutcomeType['outcomeType']
+export type resolution = 'YES' | 'NO' | 'MKT' | 'CANCEL'
+export const RESOLUTIONS = ['YES', 'NO', 'MKT', 'CANCEL'] as const
 export const OUTCOME_TYPES = ['BINARY', 'FREE_RESPONSE', 'NUMERIC'] as const
 export const MAX_QUESTION_LENGTH = 480
 export const MAX_DESCRIPTION_LENGTH = 10000

functions/src/resolve-market.ts

@@ -2,7 +2,7 @@ import * as functions from 'firebase-functions'
 import * as admin from 'firebase-admin'
 import { difference, uniq, mapValues, groupBy, sumBy } from 'lodash'
 
-import { Contract } from '../../common/contract'
+import { Contract, resolution, RESOLUTIONS } from '../../common/contract'
 import { User } from '../../common/user'
 import { Bet } from '../../common/bet'
 import { getUser, isProd, payUser } from './utils'
@@ -21,7 +21,7 @@ export const resolveMarket = functions
   .https.onCall(
     async (
       data: {
-        outcome: string
+        outcome: resolution
         value?: number
         contractId: string
         probabilityInt?: number
@@ -42,7 +42,7 @@ export const resolveMarket = functions
       const { creatorId, outcomeType, closeTime } = contract
 
       if (outcomeType === 'BINARY') {
-        if (!['YES', 'NO', 'MKT', 'CANCEL'].includes(outcome))
+        if (!RESOLUTIONS.includes(outcome))
           return { status: 'error', message: 'Invalid outcome' }
       } else if (outcomeType === 'FREE_RESPONSE') {
         if (

web/components/contract/contract-details.tsx

@@ -1,13 +1,9 @@
-import clsx from 'clsx'
 import {
   ClockIcon,
   DatabaseIcon,
   PencilIcon,
-  CurrencyDollarIcon,
   TrendingUpIcon,
-  StarIcon,
 } from '@heroicons/react/outline'
-import { StarIcon as SolidStarIcon } from '@heroicons/react/solid'
 import { Row } from '../layout/row'
 import { formatMoney } from 'common/util/format'
 import { UserLink } from '../user-page'
@@ -17,7 +13,6 @@ import {
   contractPool,
   updateContract,
 } from 'web/lib/firebase/contracts'
-import { Col } from '../layout/col'
 import dayjs from 'dayjs'
 import { DateTimeTooltip } from '../datetime-tooltip'
 import { fromNow } from 'web/lib/util/time'
@@ -36,7 +31,6 @@ export function MiscDetails(props: {
 }) {
   const { contract, showHotVolume, showCloseTime } = props
   const { volume, volume24Hours, closeTime, tags } = contract
-  const { volumeLabel } = contractMetrics(contract)
   // Show at most one category that this contract is tagged by
   const categories = CATEGORY_LIST.filter((category) =>
     tags.map((t) => t.toLowerCase()).includes(category)

web/components/contract/contract-info-dialog.tsx

@@ -1,14 +1,13 @@
 import { DotsHorizontalIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
-import { uniqBy, sum } from 'lodash'
+import { uniqBy } from 'lodash'
 import { useState } from 'react'
 import { Bet } from 'common/bet'
 
 import { Contract } from 'common/contract'
 import { formatMoney } from 'common/util/format'
 import {
-  contractMetrics,
   contractPath,
   contractPool,
   getBinaryProbPercent,

web/components/contract/quick-bet.tsx

@@ -6,7 +6,7 @@ import {
 } from 'common/calculate'
 import { getExpectedValue } from 'common/calculate-dpm'
 import { User } from 'common/user'
-import { Contract, NumericContract } from 'common/contract'
+import { Contract, NumericContract, resolution } from 'common/contract'
 import {
   formatLargeNumber,
   formatMoney,
@@ -311,7 +311,7 @@ export function getColor(contract: Contract, previewProb?: number) {
   const { resolution } = contract
   if (resolution) {
     return (
-      OUTCOME_TO_COLOR[resolution as 'YES' | 'NO' | 'CANCEL' | 'MKT'] ??
+      OUTCOME_TO_COLOR[resolution as resolution] ??
       // If resolved to a FR answer, use 'primary'
       'primary'
     )

web/components/outcome-label.tsx

@@ -3,13 +3,18 @@ import { ReactNode } from 'react'
 import { Answer } from 'common/answer'
 import { getProbability } from 'common/calculate'
 import { getValueFromBucket } from 'common/calculate-dpm'
-import { BinaryContract, Contract, FreeResponseContract } from 'common/contract'
+import {
+  BinaryContract,
+  Contract,
+  FreeResponseContract,
+  resolution,
+} from 'common/contract'
 import { formatPercent } from 'common/util/format'
 import { ClientRender } from './client-render'
 
 export function OutcomeLabel(props: {
   contract: Contract
-  outcome: 'YES' | 'NO' | 'CANCEL' | 'MKT' | string
+  outcome: resolution | string
   truncate: 'short' | 'long' | 'none'
   value?: number
 }) {
@@ -35,9 +40,7 @@ export function OutcomeLabel(props: {
   )
 }
 
-export function BinaryOutcomeLabel(props: {
+export function BinaryOutcomeLabel(props: { outcome: resolution }) {
-  outcome: 'YES' | 'NO' | 'CANCEL' | 'MKT'
-}) {
   const { outcome } = props
 
   if (outcome === 'YES') return <YesLabel />
@@ -48,7 +51,7 @@ export function BinaryOutcomeLabel(props: {
 
 export function BinaryContractOutcomeLabel(props: {
   contract: BinaryContract
-  resolution: 'YES' | 'NO' | 'CANCEL' | 'MKT'
+  resolution: resolution
 }) {
   const { contract, resolution } = props
 

web/components/resolution-panel.tsx

@@ -10,7 +10,7 @@ import { resolveMarket } from 'web/lib/firebase/fn-call'
 import { ProbabilitySelector } from './probability-selector'
 import { DPM_CREATOR_FEE } from 'common/fees'
 import { getProbability } from 'common/calculate'
-import { BinaryContract } from 'common/contract'
+import { BinaryContract, resolution } from 'common/contract'
 import { formatMoney } from 'common/util/format'
 
 export function ResolutionPanel(props: {
@@ -30,9 +30,7 @@ export function ResolutionPanel(props: {
       ? `${DPM_CREATOR_FEE * 100}% of trader profits`
       : `${formatMoney(contract.collectedFees.creatorFee)} in fees`
 
-  const [outcome, setOutcome] = useState<
+  const [outcome, setOutcome] = useState<resolution | undefined>()
-    'YES' | 'NO' | 'MKT' | 'CANCEL' | undefined
-  >()
 
   const [prob, setProb] = useState(getProbability(contract) * 100)
 

web/components/yes-no-selector.tsx

@@ -3,6 +3,7 @@ import React, { ReactNode } from 'react'
 import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
+import { resolution } from 'common/contract'
 
 export function YesNoSelector(props: {
   selected?: 'YES' | 'NO'
@@ -65,8 +66,8 @@ export function YesNoSelector(props: {
 }
 
 export function YesNoCancelSelector(props: {
-  selected: 'YES' | 'NO' | 'MKT' | 'CANCEL' | undefined
+  selected: resolution | undefined
-  onSelect: (selected: 'YES' | 'NO' | 'MKT' | 'CANCEL') => void
+  onSelect: (selected: resolution) => void
   className?: string
   btnClassName?: string
 }) {

web/hooks/use-measure-size.ts

@@ -16,7 +16,7 @@ export function useListenElemSize<T extends HTMLElement>(
   debounceMs: number | undefined = undefined
 ) {
   const handleResize = useMemo(() => {
-    let updateSize = () => {
+    const updateSize = () => {
       if (elemRef.current) callback(getSize(elemRef.current))
     }
 
@@ -25,7 +25,7 @@ export function useListenElemSize<T extends HTMLElement>(
       : updateSize
   }, [callback, elemRef, debounceMs])
 
-  let elem = elemRef.current
+  const elem = elemRef.current
 
   useLayoutEffect(() => {
     if (!elemRef.current) return