@jeremyckahn/farmhand 1.23.2 → 1.23.4

package/src/components/CowCard/CowCard.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { faMars, faVenus } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Button from '@mui/material/Button/index.js'
 import Card from '@mui/material/Card/index.js'
 import CardActions from '@mui/material/CardActions/index.js'
@@ -10,7 +8,6 @@ import TextField from '@mui/material/TextField/index.js'
 import Tooltip from '@mui/material/Tooltip/index.js'
 import Typography from '@mui/material/Typography/index.js'
 import classNames from 'classnames'
-import { array, bool, func, number, object, string } from 'prop-types'
 import { useIsMounted } from 'usehooks-ts'
 
 import { PURCHASEABLE_COW_PENS } from '../../constants.js'
@@ -29,13 +26,14 @@ import { isCowInBreedingPen } from '../../utils/isCowInBreedingPen.js'
 import { isInViewport } from '../../utils/isInViewport.js'
 import { A } from '../Elements/index.js'
 import FarmhandContext, { BoundHandlers } from '../Farmhand/Farmhand.context.js'
+import { FemaleIcon, MaleIcon } from '../PixelIcon/index.js'
 
 import Subheader from './Subheader/index.js'
 
 const genderIcons = {
-  [genders.FEMALE as string]: faVenus,
-  [genders.MALE as string]: faMars,
-} as Record<string, typeof faVenus>
+  [genders.FEMALE as string]: FemaleIcon,
+  [genders.MALE as string]: MaleIcon,
+} as Record<string, typeof FemaleIcon>
 
 export interface CowCardProps {
   allowCustomPeerCowNames: farmhand.state['allowCustomPeerCowNames']
@@ -157,6 +155,8 @@ export const CowCard = ({
     }
   }, [isSelected])
 
+  const GenderIcon = genderIcons[cow.gender]
+
   return (
     <>
       <A
@@ -233,11 +233,7 @@ export const CowCard = ({
                 ) : (
                   displayName
                 )}{' '}
-                <FontAwesomeIcon
-                  {...{
-                    icon: genderIcons[cow.gender],
-                  }}
-                />
+                <GenderIcon fontSize="inherit" />
               </>
             ),
             subheader: (
@@ -279,7 +275,6 @@ export const CowCard = ({
           {canCowBeTradedFor && (
             <Tooltip
               {...{
-                arrow: true,
                 placement: 'top',
                 title: 'The game will be saved when the trade is completed.',
               }}
@@ -312,7 +307,6 @@ export const CowCard = ({
                 (cowIdOfferedForTrade === cow.id ? (
                   <Tooltip
                     {...{
-                      arrow: true,
                       placement: 'top',
                       title: WITHDRAW_COW_FROM_TRADE('', cowDisplayName),
                     }}
@@ -333,7 +327,6 @@ export const CowCard = ({
                 ) : (
                   <Tooltip
                     {...{
-                      arrow: true,
                       placement: 'top',
                       title: (
                         <Typography>
@@ -374,31 +367,6 @@ export const CowCard = ({
   )
 }
 
-CowCard.propTypes = {
-  allowCustomPeerCowNames: bool.isRequired,
-  cow: object.isRequired,
-  cowBreedingPen: object.isRequired,
-  cowIdOfferedForTrade: string.isRequired,
-  cowInventory: array.isRequired,
-  debounced: object,
-  handleCowAutomaticHugChange: func,
-  handleCowBreedChange: func,
-  handleCowHugClick: func,
-  handleCowNameInputChange: func,
-  handleCowOfferClick: func,
-  handleCowPurchaseClick: func,
-  handleCowWithdrawClick: func,
-  handleCowSellClick: func,
-  handleCowTradeClick: func,
-  playerId: string.isRequired,
-  inventory: array.isRequired,
-  isCowOfferedForTradeByPeer: bool,
-  isOnline: bool.isRequired,
-  isSelected: bool,
-  money: number.isRequired,
-  purchasedCowPen: number.isRequired,
-}
-
 export default function Consumer(
   props: Pick<CowCardProps, 'cow' | 'isCowOfferedForTradeByPeer' | 'isSelected'>
 ) {

package/src/components/CowCard/Subheader/Subheader.tsx

@@ -1,12 +1,8 @@
-import { faHeart as faEmptyHeart } from '@fortawesome/free-regular-svg-icons'
-import { faHeart as faFullHeart } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Checkbox from '@mui/material/Checkbox/index.js'
 import FormControlLabel from '@mui/material/FormControlLabel/index.js'
 import Tooltip from '@mui/material/Tooltip/index.js'
 import Typography from '@mui/material/Typography/index.js'
 import classNames from 'classnames'
-import { array, bool, func, object, string } from 'prop-types'
 
 import { huggingMachine } from '../../../data/items.js'
 import { genders } from '../../../enums.js'
@@ -19,6 +15,7 @@ import { isCowInBreedingPen } from '../../../utils/isCowInBreedingPen.js'
 import { memoize } from '../../../utils/memoize.js'
 import { moneyString } from '../../../utils/moneyString.js'
 import { nullArray } from '../../../utils/nullArray.js'
+import { HeartIcon, HeartOutlineIcon } from '../../PixelIcon/index.js'
 import Bloodline from '../Bloodline/index.js'
 import { CowCardProps } from '../CowCard.js'
 
@@ -37,18 +34,17 @@ const getCowMapById = memoize((cowInventory: farmhand.state['cowInventory']) =>
   )
 )
 
-export interface SubheaderProps
-  extends Pick<
-    CowCardProps,
-    | 'cow'
-    | 'cowBreedingPen'
-    | 'cowIdOfferedForTrade'
-    | 'cowInventory'
-    | 'handleCowAutomaticHugChange'
-    | 'handleCowBreedChange'
-    | 'huggingMachinesRemain'
-    | 'playerId'
-  > {
+export interface SubheaderProps extends Pick<
+  CowCardProps,
+  | 'cow'
+  | 'cowBreedingPen'
+  | 'cowIdOfferedForTrade'
+  | 'cowInventory'
+  | 'handleCowAutomaticHugChange'
+  | 'handleCowBreedChange'
+  | 'huggingMachinesRemain'
+  | 'playerId'
+> {
   canCowBeTradedFor: boolean
   cowValue: number
   isCowPurchased: boolean
@@ -116,25 +112,20 @@ const Subheader = ({
           <ol className="hearts">
             {nullArray(10).map((_null: null, i: number) => (
               <li key={`${cow.id}_${i}`}>
-                <FontAwesomeIcon
-                  {...{
-                    icon: isHeartFull(i, numberOfFullHearts)
-                      ? faFullHeart
-                      : faEmptyHeart,
-                    color: isHeartFull(i, numberOfFullHearts)
-                      ? colors.heart
-                      : undefined,
-                    className: classNames('heart', {
-                      'is-full': isHeartFull(i, numberOfFullHearts),
-                    }),
-                  }}
-                />
+                {isHeartFull(i, numberOfFullHearts) ? (
+                  <HeartIcon
+                    className="heart is-full"
+                    fontSize="inherit"
+                    htmlColor={colors.heart}
+                  />
+                ) : (
+                  <HeartOutlineIcon className="heart" fontSize="inherit" />
+                )}
               </li>
             ))}
           </ol>
           <Tooltip
             {...{
-              arrow: true,
               placement: 'top',
               title: (
                 <Typography>
@@ -165,7 +156,6 @@ const Subheader = ({
           </Tooltip>
           <Tooltip
             {...{
-              arrow: true,
               placement: 'top',
               disableFocusListener: disableBreedingControlTooltip,
               disableHoverListener: disableBreedingControlTooltip,
@@ -210,16 +200,3 @@ const Subheader = ({
 }
 
 export default Subheader
-
-Subheader.propTypes = {
-  canCowBeTradedFor: bool.isRequired,
-  cow: object.isRequired,
-  cowBreedingPen: object.isRequired,
-  cowIdOfferedForTrade: string.isRequired,
-  cowInventory: array.isRequired,
-  handleCowAutomaticHugChange: func,
-  handleCowBreedChange: func,
-  huggingMachinesRemain: bool.isRequired,
-  playerId: string.isRequired,
-  isCowPurchased: bool,
-}

package/src/components/CowPen/Cow.tsx

@@ -1,5 +1,3 @@
-import { faHeart } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Tooltip from '@mui/material/Tooltip/index.js'
 import Typography from '@mui/material/Typography/index.js'
 import classNames from 'classnames'
@@ -12,6 +10,7 @@ import { LEFT, RIGHT } from '../../constants.js'
 import { pixel } from '../../img/index.js'
 import { getCowDisplayName } from '../../utils/getCowDisplayName.js'
 import { getCowImage } from '../../utils/getCowImage.js'
+import { HeartIcon } from '../PixelIcon/index.js'
 
 // Only moves the cow within the middle 80% of the pen
 const randomPosition = () => 10 + random() * 80
@@ -249,7 +248,6 @@ export const Cow = ({
       )}
       <Tooltip
         {...{
-          arrow: true,
           placement: 'top',
           title: <Typography>{cowDisplayName}</Typography>,
           open: isSelected,
@@ -265,12 +263,12 @@ export const Cow = ({
             }}
             alt={cowDisplayName}
           />
-          <FontAwesomeIcon
+          <HeartIcon
             {...{
-              className: classNames('animation', {
+              className: classNames('heart-icon', 'animation', {
                 'is-animating': showHugAnimation,
               }),
-              icon: faHeart,
+              fontSize: 'inherit',
             }}
           />
         </div>
@@ -278,11 +276,7 @@ export const Cow = ({
       <ol {...{ className: 'happiness-boosts-today' }}>
         {new Array(cow.happinessBoostsToday).fill(undefined).map((_, i) => (
           <li {...{ key: i }}>
-            <FontAwesomeIcon
-              {...{
-                icon: faHeart,
-              }}
-            />
+            <HeartIcon className="heart-icon" fontSize="inherit" />
           </li>
         ))}
       </ol>

package/src/components/CowPen/CowPen.test.tsx

@@ -94,7 +94,7 @@ describe('Cow', () => {
 
     render(<Cow {...defaultCowProps} cow={happyCow} />)
 
-    expect(document.querySelector('.fa-heart')).toBeInTheDocument()
+    expect(document.querySelector('.heart-icon')).toBeInTheDocument()
   })
 
   test('does not show happiness indicator when cow is not happy', () => {
@@ -214,7 +214,7 @@ describe('Cow', () => {
       />
     )
 
-    const heart = () => container.querySelector('.fa-heart.animation')
+    const heart = () => container.querySelector('.heart-icon.animation')
 
     rerender(
       <Cow
@@ -234,7 +234,7 @@ describe('Cow', () => {
       />
     )
 
-    const heart = () => container.querySelector('.fa-heart.animation')
+    const heart = () => container.querySelector('.heart-icon.animation')
 
     rerender(
       <Cow
@@ -258,7 +258,7 @@ describe('Cow', () => {
       />
     )
 
-    const heart = () => container.querySelector('.fa-heart.animation')
+    const heart = () => container.querySelector('.heart-icon.animation')
 
     // Midnight: the daily reset brings the boost count back down.
     rerender(

package/src/components/CowPen/CowPen.tsx

@@ -1,5 +1,4 @@
 import { Theme } from '@mui/material/styles/index.js'
-import { array, bool, func, string } from 'prop-types'
 import { useEffect } from 'react'
 
 import { fillSx } from '../../styles/sx.js'
@@ -10,11 +9,10 @@ import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import { Cow } from './Cow.js'
 import { Tumbleweeds } from './Tumbleweeds.js'
 
-export interface CowPenProps
-  extends Pick<
-    farmhand.state,
-    'allowCustomPeerCowNames' | 'cowInventory' | 'playerId' | 'selectedCowId'
-  > {
+export interface CowPenProps extends Pick<
+  farmhand.state,
+  'allowCustomPeerCowNames' | 'cowInventory' | 'playerId' | 'selectedCowId'
+> {
   handleCowPenUnmount: () => void
   handleCowClick: (cow: farmhand.cow) => void
 }
@@ -72,7 +70,7 @@ export const CowPen = ({
               easing: theme.transitions.easing.easeOut,
             }),
           },
-          '& .fa-heart': {
+          '& .heart-icon': {
             color: colors.heart,
             '&.animation': {
               opacity: 0,
@@ -170,15 +168,6 @@ export const CowPen = ({
   )
 }
 
-CowPen.propTypes = {
-  allowCustomPeerCowNames: bool.isRequired,
-  cowInventory: array.isRequired,
-  handleCowClick: func.isRequired,
-  handleCowPenUnmount: func.isRequired,
-  playerId: string.isRequired,
-  selectedCowId: string.isRequired,
-}
-
 export default function Consumer(props: Partial<CowPenProps>) {
   return (
     <FarmhandContext.Consumer>

package/src/components/CowPenContextMenu/CowPenContextMenu.tsx

@@ -1,14 +1,13 @@
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward.js'
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward.js'
 import Fab from '@mui/material/Fab/index.js'
 import MenuItem from '@mui/material/MenuItem/index.js'
 import Select from '@mui/material/Select/index.js'
 import Tab from '@mui/material/Tab/index.js'
 import Tabs from '@mui/material/Tabs/index.js'
 import sortBy from 'lodash.sortby'
-import { array, func, number, object, string } from 'prop-types'
 import { useEffect, useState } from 'react'
 
+import { ArrowDownwardIcon, ArrowUpwardIcon } from '../PixelIcon/index.js'
+
 import { PURCHASEABLE_COW_PENS } from '../../constants.js'
 import cowShopInventory from '../../data/shop-inventory-cow.js'
 import uiEventHandlers from '../../handlers/ui-events.js'
@@ -327,21 +326,6 @@ export const CowPenContextMenu = ({
   )
 }
 
-CowPenContextMenu.propTypes = {
-  cowForSale: object.isRequired,
-  cowInventory: array.isRequired,
-  handleCowAutomaticHugChange: func.isRequired,
-  handleCowBreedChange: func.isRequired,
-  handleCowHugClick: func.isRequired,
-  handleCowNameInputChange: func.isRequired,
-  handleCowOfferClick: func.isRequired,
-  handleCowSelect: func.isRequired,
-  handleCowSellClick: func.isRequired,
-  handleCowWithdrawClick: func.isRequired,
-  purchasedCowPen: number.isRequired,
-  selectedCowId: string.isRequired,
-}
-
 export default function Consumer() {
   return (
     <FarmhandContext.Consumer>

package/src/components/CowPenContextMenu/TabPanel/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { node, number } from 'prop-types'
 
 export const TabPanel = (
   props: React.PropsWithChildren<
@@ -21,12 +20,6 @@ export const TabPanel = (
   )
 }
 
-TabPanel.propTypes = {
-  children: node,
-  index: number.isRequired,
-  value: number.isRequired,
-}
-
 export const a11yProps = (index: number) => ({
   id: `cow-context-tab-${index}`,
   'aria-controls': `cow-context-tabpanel-${index}`,

package/src/components/Farmhand/Farmhand.context.tsx

@@ -12,6 +12,7 @@ import {
 import uiEventHandlers from '../../handlers/ui-events.js'
 import { generateCow } from '../../utils/generateCow.js'
 import { scarecrow } from '../../data/items.js'
+import { NOTIFICATION_DURATION_DEFAULT } from '../../constants.js'
 
 /**
  * A utility type that transforms a type containing functions with an explicit `this` parameter
@@ -159,6 +160,7 @@ export const createContextData = (): ContextData => {
       latestNotification: null,
       newDayNotifications: [],
       notificationLog: [],
+      notificationDuration: NOTIFICATION_DURATION_DEFAULT,
       peers: {}, // empty object for now
       peerRoom: null,
       pendingPeerMessages: [],
@@ -217,8 +219,7 @@ export const createContextData = (): ContextData => {
   }
 }
 
-const FarmhandContext: import('react').Context<ContextData> = createContext<
-  ContextData
->(createContextData())
+const FarmhandContext: import('react').Context<ContextData> =
+  createContext<ContextData>(createContextData())
 
 export default FarmhandContext

package/src/components/Farmhand/Farmhand.tsx

@@ -1,7 +1,3 @@
-import HotelIcon from '@mui/icons-material/Hotel.js'
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft.js'
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight.js'
-import MenuIcon from '@mui/icons-material/Menu.js'
 import CssBaseline from '@mui/material/CssBaseline/index.js'
 import Drawer from '@mui/material/Drawer/index.js'
 import Fab from '@mui/material/Fab/index.js'
@@ -11,10 +7,16 @@ import Tooltip from '@mui/material/Tooltip/index.js'
 import classNames from 'classnames'
 import localforage from 'localforage'
 import { SnackbarProvider } from 'notistack'
-import { object } from 'prop-types'
 import { GlobalHotKeys } from 'react-hotkeys'
 import { Redirect } from 'react-router-dom'
 
+import {
+  HotelIcon,
+  KeyboardArrowLeftIcon as KeyboardArrowLeft,
+  KeyboardArrowRightIcon as KeyboardArrowRight,
+  MenuIcon,
+} from '../PixelIcon/index.js'
+
 import { Z_INDEX } from '../../constants.js'
 import theme, { blueStripeBg } from '../../mui-theme.js'
 import { Div } from '../Elements/index.js'
@@ -103,9 +105,10 @@ const Farmhand = (props: FarmhandProps) => {
                     pointerEvents: 'none',
                   },
                 }),
-                [`@media (min-width: ${breakpoints.smallPhone}px) and (orientation: landscape)`]: {
-                  paddingTop: '3em',
-                },
+                [`@media (min-width: ${breakpoints.smallPhone}px) and (orientation: landscape)`]:
+                  {
+                    paddingTop: '3em',
+                  },
                 [`@media (min-width: ${breakpoints.sm}px)`]: {
                   paddingTop: '4em',
                 },
@@ -282,11 +285,4 @@ Farmhand.defaultProps = {
   match: { path: '', params: {} },
 }
 
-Farmhand.propTypes = {
-  features: object,
-  history: object,
-  location: object,
-  match: object.isRequired,
-}
-
 export default Farmhand

package/src/components/Farmhand/FarmhandReducers.tsx

@@ -193,8 +193,7 @@ export class FarmhandReducers extends Component<FarmhandProps, FarmhandState> {
 
     for (const reducerName of reducerNames) {
       const reducer = reducers[reducerName as keyof typeof reducers] as
-        | ((state: farmhand.state, ...args: any[]) => farmhand.state)
-        | undefined
+        ((state: farmhand.state, ...args: any[]) => farmhand.state) | undefined
 
       if (!reducer) {
         if (import.meta.env?.MODE === 'development') {

package/src/components/Farmhand/FarmhandService.test.ts

@@ -50,9 +50,8 @@ describe('FarmhandService', () => {
         { id: 'carrot-seed', quantity: 1 },
         { id: 'weed', quantity: 1 },
       ]
-      const plantableCropInventory = FarmhandService.getPlantableCropInventory(
-        inventory
-      )
+      const plantableCropInventory =
+        FarmhandService.getPlantableCropInventory(inventory)
 
       expect(plantableCropInventory).toEqual([{ ...carrotSeed, quantity: 1 }])
     })
@@ -64,9 +63,8 @@ describe('FarmhandService', () => {
         { id: 'apple-sapling', quantity: 1 },
         { id: 'weed', quantity: 1 },
       ]
-      const plantableTreeInventory = FarmhandService.getPlantableTreeInventory(
-        inventory
-      )
+      const plantableTreeInventory =
+        FarmhandService.getPlantableTreeInventory(inventory)
 
       expect(plantableTreeInventory).toEqual([{ ...appleSapling, quantity: 1 }])
     })
@@ -76,9 +74,8 @@ describe('FarmhandService', () => {
         { id: 'apple-sapling', quantity: 1 },
         { id: 'not-a-real-item-id', quantity: 1 },
       ]
-      const plantableTreeInventory = FarmhandService.getPlantableTreeInventory(
-        inventory
-      )
+      const plantableTreeInventory =
+        FarmhandService.getPlantableTreeInventory(inventory)
 
       expect(plantableTreeInventory).toEqual([{ ...appleSapling, quantity: 1 }])
     })

package/src/components/Farmhand/hooks/useFarmhandDayAdvancement.ts

@@ -50,12 +50,8 @@ export const useFarmhandDayAdvancement = (
     let serverValueAdjustments: Record<string, number> | undefined
 
     if (stateRef.current.isOnline) {
-      const {
-        inventory,
-        room,
-        todaysPurchases,
-        todaysStartingInventory,
-      } = stateRef.current
+      const { inventory, room, todaysPurchases, todaysStartingInventory } =
+        stateRef.current
 
       const positions = computeMarketPositions(
         todaysStartingInventory,

package/src/components/Farmhand/hooks/useFarmhandNetwork.test.ts

@@ -58,14 +58,14 @@ const setup = () => {
   const sendCowTradeRequest = vitest.fn()
   const showNotification = vitest.fn()
 
-  const fakeState = ({
+  const fakeState = {
     peers: {
       [peerId]: { playerId: ownerId } as farmhand.peerMetadata,
     },
     sendCowTradeRequest,
     cowInventory: [cowOfferedForTrade],
     cowIdOfferedForTrade: cowOfferedForTrade.id,
-  } as unknown) as farmhand.state
+  } as unknown as farmhand.state
 
   const instanceProxyRef: React.MutableRefObject<any> = {
     current: { state: { ...fakeState } },

package/src/components/Farmhand/hooks/useFarmhandNetwork.ts

@@ -83,12 +83,8 @@ export const useFarmhandNetwork = (
   const tradeForPeerCow = useCallback(
     (peerPlayerCow: farmhand.cow) => {
       const latestState = instanceProxyRef.current?.state ?? state
-      const {
-        cowIdOfferedForTrade,
-        cowInventory,
-        peers,
-        sendCowTradeRequest,
-      } = latestState
+      const { cowIdOfferedForTrade, cowInventory, peers, sendCowTradeRequest } =
+        latestState
 
       if (!sendCowTradeRequest) return
 
@@ -139,7 +135,7 @@ export const useFarmhandNetwork = (
 
       setState(previous => ({
         ...previous,
-        cowTradeTimeoutId: (cowTradeTimeoutId as unknown) as number,
+        cowTradeTimeoutId: cowTradeTimeoutId as unknown as number,
         isAwaitingCowTradeRequest: true,
       }))
     },
@@ -153,26 +149,20 @@ export const useFarmhandNetwork = (
       return previous
     })
 
-    const timeoutId = (window.setTimeout(() => {
+    const timeoutId = window.setTimeout(() => {
       setState((previous: farmhand.state) => ({
         ...previous,
         money: moneyTotal(previous.money, previous.activePlayers ?? 0),
       }))
       scheduleHeartbeat()
-    }, HEARTBEAT_INTERVAL_PERIOD) as unknown) as number
+    }, HEARTBEAT_INTERVAL_PERIOD) as unknown as number
 
     setState(previous => ({ ...previous, heartbeatTimeoutId: timeoutId }))
   }, [setState])
 
   const syncToRoom = useCallback(async () => {
-    const {
-      isOnline,
-      priceCrashes,
-      priceSurges,
-      room,
-      playerId,
-      peerRoom,
-    } = instanceProxyRef.current.state
+    const { isOnline, priceCrashes, priceSurges, room, playerId, peerRoom } =
+      instanceProxyRef.current.state
 
     if (!isOnline) return
 
@@ -308,27 +298,22 @@ export const useFarmhandNetwork = (
           boundReducersRef.current.removePeer(id)
         )
 
-        const [
-          sendPeerMetadata,
-          getPeerMetadataFunc,
-        ] = statePeerRoom.makeAction('peerMetadata')
+        const [sendPeerMetadata, getPeerMetadataFunc] =
+          statePeerRoom.makeAction('peerMetadata')
 
         getPeerMetadataFunc((...args: any[]) =>
           handlePeerMetadataRequest(instanceProxyRef.current, args[0], args[1])
         )
 
-        const [
-          sendCowTradeRequest,
-          getCowTradeRequest,
-        ] = statePeerRoom.makeAction('cowTrade')
+        const [sendCowTradeRequest, getCowTradeRequest] =
+          statePeerRoom.makeAction('cowTrade')
 
         getCowTradeRequest((...args: any[]) =>
           handleCowTradeRequest(instanceProxyRef.current, args[0], args[1])
         )
 
-        const [sendCowAccept, getCowAccept] = statePeerRoom.makeAction(
-          'cowAccept'
-        )
+        const [sendCowAccept, getCowAccept] =
+          statePeerRoom.makeAction('cowAccept')
 
         getCowAccept((...args: any[]) =>
           handleCowTradeRequestAccept(
@@ -338,9 +323,8 @@ export const useFarmhandNetwork = (
           )
         )
 
-        const [sendCowReject, getCowReject] = statePeerRoom.makeAction(
-          'cowReject'
-        )
+        const [sendCowReject, getCowReject] =
+          statePeerRoom.makeAction('cowReject')
 
         getCowReject((...args: any[]) =>
           handleCowTradeRequestReject(instanceProxyRef.current, args[0])