chore: Merging details part 3 (#4637)

* Merging details part 3
Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>

src/nft/hooks/useBag.ts

-import { BagItem } from 'nft/types'
+import { v4 as uuidv4 } from 'uuid'
 import create from 'zustand'
 import { devtools } from 'zustand/middleware'
 
-interface BagState {
+import { BagItem, BagItemStatus, BagStatus, UpdatedGenieAsset } from '../types'
+
+type BagState = {
   itemsInBag: BagItem[]
+  addAssetToBag: (asset: UpdatedGenieAsset) => void
+  removeAssetFromBag: (asset: UpdatedGenieAsset) => void
+  isLocked: boolean
+  setLocked: (isLocked: boolean) => void
   bagExpanded: boolean
   toggleBag: () => void
 }
 
 export const useBag = create<BagState>()(
   devtools(
-    (set) => ({
+    (set, get) => ({
       bagExpanded: false,
-      itemsInBag: [],
       toggleBag: () =>
         set(({ bagExpanded }) => ({
           bagExpanded: !bagExpanded,
         })),
+      isLocked: false,
+      setLocked: (_isLocked) =>
+        set(() => ({
+          isLocked: _isLocked,
+        })),
+      itemsInBag: [],
+      addAssetToBag: (asset) =>
+        set(({ itemsInBag }) => {
+          if (get().isLocked) return { itemsInBag }
+          const assetWithId = { asset: { id: uuidv4(), ...asset }, status: BagItemStatus.ADDED_TO_BAG }
+          if (itemsInBag.length === 0)
+            return {
+              itemsInBag: [assetWithId],
+              bagStatus: BagStatus.ADDING_TO_BAG,
+            }
+          else
+            return {
+              itemsInBag: [...itemsInBag, assetWithId],
+              bagStatus: BagStatus.ADDING_TO_BAG,
+            }
+        }),
+      removeAssetFromBag: (asset) => {
+        set(({ itemsInBag }) => {
+          if (get().isLocked) return { itemsInBag }
+          if (itemsInBag.length === 0) return { itemsInBag: [] }
+          const itemsCopy = [...itemsInBag]
+          const index = itemsCopy.findIndex((n) =>
+            asset.id ? n.asset.id === asset.id : n.asset.tokenId === asset.tokenId && n.asset.address === asset.address
+          )
+          if (index === -1) return { itemsInBag }
+          itemsCopy.splice(index, 1)
+          return { itemsInBag: itemsCopy }
+        })
+      },
     }),
     { name: 'useBag' }
   )

src/nft/hooks/useTimeout.ts

+import { useEffect, useState } from 'react'
+
+const MINUTE = 1000 * 60
+const HOUR = MINUTE * 60
+const DAY = 24 * HOUR
+
+const getReturnValues = (countDown: number): [number, number, number, number] => {
+  // calculate time left
+  const days = Math.floor(countDown / DAY)
+  const hours = Math.floor((countDown % DAY) / HOUR)
+  const minutes = Math.floor((countDown % HOUR) / MINUTE)
+  const seconds = Math.floor((countDown % MINUTE) / 1000)
+
+  return [days, hours, minutes, seconds]
+}
+
+export const useTimeout = (targetDate: Date) => {
+  const countDownDate = new Date(targetDate).getTime()
+
+  const [countDown, setCountDown] = useState<number>(countDownDate - new Date().getTime())
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCountDown(countDownDate - new Date().getTime())
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [countDownDate])
+
+  return getReturnValues(countDown)
+}

src/nft/pages/asset/Asset.css.ts

@@ -35,7 +35,7 @@ export const marketplace = sprinkles({ borderRadius: '4' })
 
 export const tab = style([
   subhead,
-  sprinkles({ color: 'darkGray', border: 'none', padding: '0', background: 'transparent' }),
+  sprinkles({ color: 'darkGray', border: 'none', padding: '0', background: 'transparent', cursor: 'pointer' }),
   {
     selectors: {
       '&[data-active="true"]': {