From 6349d51275ba92e69981fa9b3db97b6c3be0a8a6 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 7 Sep 2023 01:41:43 -0700
Subject: [PATCH 01/48] half-decent redirect

---
 apps/web/src/pages/index.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index 132c1df8..b524a099 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -1,5 +1,7 @@
 import { Stack } from '@zoralabs/zord'
+import { useRouter } from 'next/router'
 import React from 'react'
+import { useAccount } from 'wagmi'
 
 import Everything from 'src/components/Home/Everything'
 import FAQ from 'src/components/Home/FAQ'
@@ -17,10 +19,21 @@ import { NextPageWithLayout } from './_app'
 export type DaoProps = AuctionFragment['dao']
 
 const HomePage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const _account = useAccount({
+    onConnect({ address, isReconnected }) {
+      const wasRedirected = sessionStorage.getItem('wasRedirected')
+      if (address && isReconnected && !wasRedirected) {
+        sessionStorage.setItem('wasRedirected', 'true')
+        router.push('/about')
+      }
+    },
+  })
   return (
     <>
       <Meta title={'Nouns your ideas'} type={'website'} slug={'/'} />
       <Stack align={'center'}>
+        {/* <Redirect /> */}
         <Marquee />
         <GetStarted />
         <VisitAlternate />

From 7e5d1109e61ba6f85948dfc4da8ebcda518093f8 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 7 Sep 2023 02:46:47 -0700
Subject: [PATCH 02/48] slightly better redirect

---
 apps/web/src/layouts/DefaultLayout/Nav.tsx    |  3 ++
 .../web/src/layouts/DefaultLayout/NavMenu.tsx |  7 +++++
 apps/web/src/pages/index.tsx                  | 31 +++++++++++++------
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/layouts/DefaultLayout/Nav.tsx b/apps/web/src/layouts/DefaultLayout/Nav.tsx
index e0778271..4c16430d 100644
--- a/apps/web/src/layouts/DefaultLayout/Nav.tsx
+++ b/apps/web/src/layouts/DefaultLayout/Nav.tsx
@@ -53,6 +53,9 @@ export const Nav = () => {
             <Link href={'/about'}>
               <Label className={navMenuItem}>About</Label>
             </Link>
+            <Link href={'/dashboard'}>
+              <Label className={navMenuItem}>Dashboard</Label>
+            </Link>
             <Link href={'/explore'}>
               <Label className={navMenuItem}>Explore</Label>
             </Link>
diff --git a/apps/web/src/layouts/DefaultLayout/NavMenu.tsx b/apps/web/src/layouts/DefaultLayout/NavMenu.tsx
index 799642d8..0c2b8841 100644
--- a/apps/web/src/layouts/DefaultLayout/NavMenu.tsx
+++ b/apps/web/src/layouts/DefaultLayout/NavMenu.tsx
@@ -376,6 +376,13 @@ export const NavMenu = () => {
                   </Text>
                 </Flex>
               </Link>
+              <Link href={'/dashboard'}>
+                <Flex display="flex" align="center" justify={'center'} py={'x2'}>
+                  <Text cursor={'pointer'} fontWeight={'display'}>
+                    Dashboard
+                  </Text>
+                </Flex>
+              </Link>
               <Link href={'/explore'}>
                 <Flex display="flex" align="center" justify={'center'} py={'x2'}>
                   <Text cursor={'pointer'} fontWeight={'display'}>
diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index b524a099..7cbafdf7 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -1,6 +1,6 @@
 import { Stack } from '@zoralabs/zord'
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useAccount } from 'wagmi'
 
 import Everything from 'src/components/Home/Everything'
@@ -20,15 +20,26 @@ export type DaoProps = AuctionFragment['dao']
 
 const HomePage: NextPageWithLayout = () => {
   const router = useRouter()
-  const _account = useAccount({
-    onConnect({ address, isReconnected }) {
-      const wasRedirected = sessionStorage.getItem('wasRedirected')
-      if (address && isReconnected && !wasRedirected) {
-        sessionStorage.setItem('wasRedirected', 'true')
-        router.push('/about')
-      }
-    },
-  })
+  const { address } = useAccount()
+  //   {
+  //   onConnect({ address }) {
+  //     const wasRedirected = sessionStorage.getItem('wasRedirected')
+
+  //     if (address && !wasRedirected) {
+  //       sessionStorage.setItem('wasRedirected', 'true')
+  //       router.push('/about')
+  //     }
+  //   },
+  // }
+
+  // useEffect helps load redirect a little faster on page load
+  useEffect(() => {
+    const wasRedirected = sessionStorage.getItem('wasRedirected')
+    if (address && !wasRedirected) {
+      sessionStorage.setItem('wasRedirected', 'true')
+      router.push('/about')
+    }
+  }, [address])
   return (
     <>
       <Meta title={'Nouns your ideas'} type={'website'} slug={'/'} />

From a581590afe5ee124e77cc2cd7ba858e60757a3d2 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 7 Sep 2023 15:53:24 -0700
Subject: [PATCH 03/48] fetcher, api route, and query

---
 .../data/subgraph/requests/dashboardQuery.ts  | 61 +++++++++++++++++++
 apps/web/src/pages/api/dashboard/[user].ts    | 30 +++++++++
 apps/web/src/pages/dashboard.tsx              | 23 +++++++
 3 files changed, 114 insertions(+)
 create mode 100644 apps/web/src/data/subgraph/requests/dashboardQuery.ts
 create mode 100644 apps/web/src/pages/api/dashboard/[user].ts
 create mode 100644 apps/web/src/pages/dashboard.tsx

diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
new file mode 100644
index 00000000..f5b033dc
--- /dev/null
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -0,0 +1,61 @@
+import * as Sentry from '@sentry/nextjs'
+
+import { PUBLIC_DEFAULT_CHAINS } from 'src/constants/defaultChains'
+import { SDK } from 'src/data/subgraph/client'
+import { CHAIN_ID } from 'src/typings'
+
+export type MyDaosResponse = Array<{
+  name: string
+  collectionAddress: string
+  auctionAddress: string
+  chainId: CHAIN_ID
+}>
+
+const DAOS_TO_EXCLUDE = [
+  '0x9c8ff314c9bc7f6e59a9d9225fb22946427edc03',
+  '0x4b10701bfd7bfedc47d50562b76b436fbb5bdb3b',
+]
+
+export const dashboardRequest = async (memberAddress: string) => {
+  //   let daos: MyDaosResponse = []
+
+  if (!memberAddress) throw new Error('No user address provided')
+
+  try {
+    const data = await Promise.all(
+      PUBLIC_DEFAULT_CHAINS.map((chain) =>
+        SDK.connect(chain.id)
+          .daoTokenOwners({
+            where: {
+              owner: memberAddress,
+            },
+            first: 30,
+          })
+          .then((x) => ({ ...x, chainId: chain.id }))
+      )
+    )
+
+    return data
+      .map((queries) =>
+        queries.daotokenOwners
+          .map((x) => {
+            return x.dao
+          })
+          .filter((dao) => !DAOS_TO_EXCLUDE.includes(dao.tokenAddress))
+          .map((dao) => ({
+            name: dao.name || '',
+            collectionAddress: dao.tokenAddress,
+            auctionAddress: dao?.auctionAddress || '',
+            chainId: queries.chainId,
+          }))
+      )
+      .flat()
+      .sort((a, b) => a.name.localeCompare(b.name))
+  } catch (e: any) {
+    console.error(e)
+    Sentry.captureException(e)
+    await Sentry.flush(2000)
+  }
+
+  //   return daos
+}
diff --git a/apps/web/src/pages/api/dashboard/[user].ts b/apps/web/src/pages/api/dashboard/[user].ts
new file mode 100644
index 00000000..7e402ad8
--- /dev/null
+++ b/apps/web/src/pages/api/dashboard/[user].ts
@@ -0,0 +1,30 @@
+import { getAddress } from 'ethers/lib/utils.js'
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import { dashboardRequest } from 'src/data/subgraph/requests/dashboardQuery'
+import { NotFoundError } from 'src/services/errors'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const { user } = req.query
+
+  let address: string
+
+  try {
+    address = getAddress(user as string)
+  } catch (e) {
+    return res.status(400).json({ error: 'bad address input' })
+  }
+  try {
+    const daos = await dashboardRequest(address)
+
+    res.status(200).json(daos)
+  } catch (e) {
+    if (e instanceof NotFoundError) {
+      return res.status(404).json({ error: 'daos not found' })
+    }
+
+    return res.status(500).json({ error: 'backend failed' })
+  }
+}
+
+export default handler
diff --git a/apps/web/src/pages/dashboard.tsx b/apps/web/src/pages/dashboard.tsx
new file mode 100644
index 00000000..89f63726
--- /dev/null
+++ b/apps/web/src/pages/dashboard.tsx
@@ -0,0 +1,23 @@
+import axios from 'axios'
+import React from 'react'
+import useSWR from 'swr'
+import { useAccount } from 'wagmi'
+
+const fetchDashboardData = async (address: string) => {
+  const userDaos = await axios.get(`/api/dashboard/${address}`).then((x) => x.data)
+  console.log('userDaos', userDaos)
+  return userDaos
+}
+
+const Dashboard = () => {
+  const { address } = useAccount()
+
+  const { data, error, isValidating } = useSWR(
+    [`dashboard:${address}`],
+    address ? () => fetchDashboardData(address) : null
+  )
+
+  return <div>Dashboard</div>
+}
+
+export default Dashboard

From 1a9f6fcc3807a9a27d7f67529c5b78231b74ef1d Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 7 Sep 2023 16:32:41 -0700
Subject: [PATCH 04/48] write query that bundles proposals, current auction
 data with user dao data

---
 .../subgraph/queries/dashboardQuery.graphql   | 26 +++++
 .../data/subgraph/requests/dashboardQuery.ts  |  7 +-
 apps/web/src/data/subgraph/sdk.generated.ts   | 96 ++++++++++++++++++-
 3 files changed, 125 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/src/data/subgraph/queries/dashboardQuery.graphql

diff --git a/apps/web/src/data/subgraph/queries/dashboardQuery.graphql b/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
new file mode 100644
index 00000000..ef85d80b
--- /dev/null
+++ b/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
@@ -0,0 +1,26 @@
+query dashboard($where: DAOTokenOwner_filter, $first: Int, $skip: Int) {
+  daotokenOwners(where: $where, first: $first, skip: $skip) {
+    dao {
+      ...DAO
+      proposals(
+        where: { executed_not: true, canceled_not: true, vetoed_not: true }
+        first: 10
+        skip: 0
+        orderBy: proposalNumber
+        orderDirection: desc
+      ) {
+        ...Proposal
+      }
+      currentAuction {
+        endTime
+        highestBid {
+          amount
+        }
+        token {
+          name
+          image
+        }
+      }
+    }
+  }
+}
diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
index f5b033dc..d3f0900c 100644
--- a/apps/web/src/data/subgraph/requests/dashboardQuery.ts
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -20,14 +20,14 @@ export const dashboardRequest = async (memberAddress: string) => {
   //   let daos: MyDaosResponse = []
 
   if (!memberAddress) throw new Error('No user address provided')
-
+  console.log('memberAddress', memberAddress)
   try {
     const data = await Promise.all(
       PUBLIC_DEFAULT_CHAINS.map((chain) =>
         SDK.connect(chain.id)
-          .daoTokenOwners({
+          .dashboard({
             where: {
-              owner: memberAddress,
+              owner: memberAddress.toLowerCase(),
             },
             first: 30,
           })
@@ -43,6 +43,7 @@ export const dashboardRequest = async (memberAddress: string) => {
           })
           .filter((dao) => !DAOS_TO_EXCLUDE.includes(dao.tokenAddress))
           .map((dao) => ({
+            ...dao,
             name: dao.name || '',
             collectionAddress: dao.tokenAddress,
             auctionAddress: dao?.auctionAddress || '',
diff --git a/apps/web/src/data/subgraph/sdk.generated.ts b/apps/web/src/data/subgraph/sdk.generated.ts
index a7e6d8b4..a18fe1bc 100644
--- a/apps/web/src/data/subgraph/sdk.generated.ts
+++ b/apps/web/src/data/subgraph/sdk.generated.ts
@@ -2041,6 +2041,56 @@ export type DaoTokenOwnersQuery = {
   }>
 }
 
+export type DashboardQueryVariables = Exact<{
+  where?: InputMaybe<DaoTokenOwner_Filter>
+  first?: InputMaybe<Scalars['Int']>
+  skip?: InputMaybe<Scalars['Int']>
+}>
+
+export type DashboardQuery = {
+  __typename?: 'Query'
+  daotokenOwners: Array<{
+    __typename?: 'DAOTokenOwner'
+    dao: {
+      __typename?: 'DAO'
+      name: string
+      tokenAddress: any
+      auctionAddress: any
+      proposals: Array<{
+        __typename?: 'Proposal'
+        abstainVotes: number
+        againstVotes: number
+        calldatas?: string | null
+        description?: string | null
+        descriptionHash: any
+        executableFrom?: any | null
+        expiresAt?: any | null
+        forVotes: number
+        proposalId: any
+        proposalNumber: number
+        proposalThreshold: any
+        proposer: any
+        quorumVotes: any
+        targets: Array<any>
+        timeCreated: any
+        title?: string | null
+        values: Array<any>
+        voteEnd: any
+        voteStart: any
+        snapshotBlockNumber: any
+        transactionHash: any
+        dao: { __typename?: 'DAO'; governorAddress: any; tokenAddress: any }
+      }>
+      currentAuction?: {
+        __typename?: 'Auction'
+        endTime: any
+        highestBid?: { __typename?: 'AuctionBid'; amount: any } | null
+        token: { __typename?: 'Token'; name: string; image: string }
+      } | null
+    }
+  }>
+}
+
 export type ExploreDaosPageQueryVariables = Exact<{
   orderBy?: InputMaybe<Auction_OrderBy>
   orderDirection?: InputMaybe<OrderDirection>
@@ -2363,7 +2413,7 @@ export const TokenFragmentDoc = gql`
 `
 export const ActiveAuctionsDocument = gql`
   query activeAuctions($first: Int!, $where: Auction_filter!) {
-    auctions(orderBy: endTime, orderDirection: asc, first: $first, where: $where) {
+    auctions(orderBy: endTime, orderDirection: desc, first: $first, where: $where) {
       ...Auction
     }
   }
@@ -2470,6 +2520,36 @@ export const DaoTokenOwnersDocument = gql`
   }
   ${DaoFragmentDoc}
 `
+export const DashboardDocument = gql`
+  query dashboard($where: DAOTokenOwner_filter, $first: Int, $skip: Int) {
+    daotokenOwners(where: $where, first: $first, skip: $skip) {
+      dao {
+        ...DAO
+        proposals(
+          where: { executed_not: true, canceled_not: true, vetoed_not: true }
+          first: 10
+          skip: 0
+          orderBy: proposalNumber
+          orderDirection: desc
+        ) {
+          ...Proposal
+        }
+        currentAuction {
+          endTime
+          highestBid {
+            amount
+          }
+          token {
+            name
+            image
+          }
+        }
+      }
+    }
+  }
+  ${DaoFragmentDoc}
+  ${ProposalFragmentDoc}
+`
 export const ExploreDaosPageDocument = gql`
   query exploreDaosPage(
     $orderBy: Auction_orderBy
@@ -2727,6 +2807,20 @@ export function getSdk(
         'query'
       )
     },
+    dashboard(
+      variables?: DashboardQueryVariables,
+      requestHeaders?: Dom.RequestInit['headers']
+    ): Promise<DashboardQuery> {
+      return withWrapper(
+        (wrappedRequestHeaders) =>
+          client.request<DashboardQuery>(DashboardDocument, variables, {
+            ...requestHeaders,
+            ...wrappedRequestHeaders,
+          }),
+        'dashboard',
+        'query'
+      )
+    },
     exploreDaosPage(
       variables?: ExploreDaosPageQueryVariables,
       requestHeaders?: Dom.RequestInit['headers']

From 9a99a8a2f2166f3ad408e7de80058fe9f848f429 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 7 Sep 2023 17:58:32 -0700
Subject: [PATCH 05/48] finish rough query, fetch proposal states on client

---
 .../subgraph/fragments/CurrentAuction.graphql | 11 ++++
 .../subgraph/queries/dashboardQuery.graphql   |  9 +--
 .../data/subgraph/requests/dashboardQuery.ts  | 25 +++++---
 apps/web/src/data/subgraph/sdk.generated.ts   | 32 +++++++---
 apps/web/src/pages/dashboard.tsx              | 63 +++++++++++++++++--
 5 files changed, 110 insertions(+), 30 deletions(-)
 create mode 100644 apps/web/src/data/subgraph/fragments/CurrentAuction.graphql

diff --git a/apps/web/src/data/subgraph/fragments/CurrentAuction.graphql b/apps/web/src/data/subgraph/fragments/CurrentAuction.graphql
new file mode 100644
index 00000000..72aebfa4
--- /dev/null
+++ b/apps/web/src/data/subgraph/fragments/CurrentAuction.graphql
@@ -0,0 +1,11 @@
+fragment CurrentAuction on Auction {
+  endTime
+  highestBid {
+    amount
+  }
+  token {
+    name
+    image
+    tokenId
+  }
+}
diff --git a/apps/web/src/data/subgraph/queries/dashboardQuery.graphql b/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
index ef85d80b..4879c78f 100644
--- a/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
+++ b/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
@@ -12,14 +12,7 @@ query dashboard($where: DAOTokenOwner_filter, $first: Int, $skip: Int) {
         ...Proposal
       }
       currentAuction {
-        endTime
-        highestBid {
-          amount
-        }
-        token {
-          name
-          image
-        }
+        ...CurrentAuction
       }
     }
   }
diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
index d3f0900c..3eb367b7 100644
--- a/apps/web/src/data/subgraph/requests/dashboardQuery.ts
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -4,23 +4,29 @@ import { PUBLIC_DEFAULT_CHAINS } from 'src/constants/defaultChains'
 import { SDK } from 'src/data/subgraph/client'
 import { CHAIN_ID } from 'src/typings'
 
-export type MyDaosResponse = Array<{
-  name: string
-  collectionAddress: string
-  auctionAddress: string
-  chainId: CHAIN_ID
-}>
+import {
+  CurrentAuctionFragment,
+  DaoFragment,
+  ProposalFragment,
+} from '../sdk.generated'
 
 const DAOS_TO_EXCLUDE = [
   '0x9c8ff314c9bc7f6e59a9d9225fb22946427edc03',
   '0x4b10701bfd7bfedc47d50562b76b436fbb5bdb3b',
 ]
 
+type DashboardDaos = DaoFragment &
+  {
+    chainId: CHAIN_ID
+    proposals: ProposalFragment[]
+    currentAuction: CurrentAuctionFragment
+  }[]
+
 export const dashboardRequest = async (memberAddress: string) => {
   //   let daos: MyDaosResponse = []
 
   if (!memberAddress) throw new Error('No user address provided')
-  console.log('memberAddress', memberAddress)
+
   try {
     const data = await Promise.all(
       PUBLIC_DEFAULT_CHAINS.map((chain) =>
@@ -43,10 +49,11 @@ export const dashboardRequest = async (memberAddress: string) => {
           })
           .filter((dao) => !DAOS_TO_EXCLUDE.includes(dao.tokenAddress))
           .map((dao) => ({
-            ...dao,
             name: dao.name || '',
-            collectionAddress: dao.tokenAddress,
+            tokenAddress: dao.tokenAddress,
             auctionAddress: dao?.auctionAddress || '',
+            proposals: dao.proposals,
+            currentAuction: dao.currentAuction,
             chainId: queries.chainId,
           }))
       )
diff --git a/apps/web/src/data/subgraph/sdk.generated.ts b/apps/web/src/data/subgraph/sdk.generated.ts
index a18fe1bc..95e6d666 100644
--- a/apps/web/src/data/subgraph/sdk.generated.ts
+++ b/apps/web/src/data/subgraph/sdk.generated.ts
@@ -1855,6 +1855,13 @@ export type AuctionBidFragment = {
   bidder: any
 }
 
+export type CurrentAuctionFragment = {
+  __typename?: 'Auction'
+  endTime: any
+  highestBid?: { __typename?: 'AuctionBid'; amount: any } | null
+  token: { __typename?: 'Token'; name: string; image: string; tokenId: any }
+}
+
 export type DaoFragment = {
   __typename?: 'DAO'
   name: string
@@ -2085,7 +2092,7 @@ export type DashboardQuery = {
         __typename?: 'Auction'
         endTime: any
         highestBid?: { __typename?: 'AuctionBid'; amount: any } | null
-        token: { __typename?: 'Token'; name: string; image: string }
+        token: { __typename?: 'Token'; name: string; image: string; tokenId: any }
       } | null
     }
   }>
@@ -2336,6 +2343,19 @@ export const AuctionBidFragmentDoc = gql`
     bidder
   }
 `
+export const CurrentAuctionFragmentDoc = gql`
+  fragment CurrentAuction on Auction {
+    endTime
+    highestBid {
+      amount
+    }
+    token {
+      name
+      image
+      tokenId
+    }
+  }
+`
 export const DaoFragmentDoc = gql`
   fragment DAO on DAO {
     name
@@ -2535,20 +2555,14 @@ export const DashboardDocument = gql`
           ...Proposal
         }
         currentAuction {
-          endTime
-          highestBid {
-            amount
-          }
-          token {
-            name
-            image
-          }
+          ...CurrentAuction
         }
       }
     }
   }
   ${DaoFragmentDoc}
   ${ProposalFragmentDoc}
+  ${CurrentAuctionFragmentDoc}
 `
 export const ExploreDaosPageDocument = gql`
   query exploreDaosPage(
diff --git a/apps/web/src/pages/dashboard.tsx b/apps/web/src/pages/dashboard.tsx
index 89f63726..688d029b 100644
--- a/apps/web/src/pages/dashboard.tsx
+++ b/apps/web/src/pages/dashboard.tsx
@@ -3,10 +3,55 @@ import React from 'react'
 import useSWR from 'swr'
 import { useAccount } from 'wagmi'
 
+import {
+  ProposalState,
+  getProposalState,
+} from 'src/data/contract/requests/getProposalState'
+import {
+  CurrentAuctionFragment,
+  DaoFragment,
+  ProposalFragment,
+} from 'src/data/subgraph/sdk.generated'
+import { CHAIN_ID } from 'src/typings'
+
+const ACTIVE_PROPOSAL_STATES = [
+  ProposalState.Active,
+  ProposalState.Pending,
+  ProposalState.Queued,
+]
+
+type DashboardDao = DaoFragment & {
+  chainId: CHAIN_ID
+  proposals: ProposalFragment[]
+  currentAuction: CurrentAuctionFragment
+}
+
+const fetchDaoProposalState = async (dao: DashboardDao) => {
+  const proposals = await Promise.all(
+    dao.proposals.map(async (proposal) => {
+      const proposalState = await getProposalState(
+        dao.chainId,
+        proposal.dao.governorAddress,
+        proposal.proposalId
+      )
+      return { ...proposal, proposalState }
+    })
+  )
+  return {
+    ...dao,
+    proposals: proposals.filter((proposal) =>
+      ACTIVE_PROPOSAL_STATES.includes(proposal.proposalState)
+    ),
+  }
+}
+
 const fetchDashboardData = async (address: string) => {
-  const userDaos = await axios.get(`/api/dashboard/${address}`).then((x) => x.data)
-  console.log('userDaos', userDaos)
-  return userDaos
+  const userDaos = await axios
+    .get<DashboardDao[]>(`/api/dashboard/${address}`)
+    .then((x) => x.data)
+
+  const resolved = await Promise.all(userDaos.map(fetchDaoProposalState))
+  return resolved
 }
 
 const Dashboard = () => {
@@ -17,7 +62,17 @@ const Dashboard = () => {
     address ? () => fetchDashboardData(address) : null
   )
 
-  return <div>Dashboard</div>
+  if (error) {
+    return <div>error</div>
+  }
+  if (isValidating) {
+    return <div>loading</div>
+  }
+  if (!data) {
+    return <div>no data</div>
+  }
+
+  return <div>{data?.map((dao) => dao.name)}</div>
 }
 
 export default Dashboard

From 5df224a29e517b6ca864839e941fb4723e9c2ee1 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 7 Sep 2023 21:16:00 -0700
Subject: [PATCH 06/48] display some data

---
 .../data/subgraph/requests/dashboardQuery.ts  | 14 ----------
 apps/web/src/pages/dashboard.tsx              | 27 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
index 3eb367b7..9efcb9e2 100644
--- a/apps/web/src/data/subgraph/requests/dashboardQuery.ts
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -2,26 +2,12 @@ import * as Sentry from '@sentry/nextjs'
 
 import { PUBLIC_DEFAULT_CHAINS } from 'src/constants/defaultChains'
 import { SDK } from 'src/data/subgraph/client'
-import { CHAIN_ID } from 'src/typings'
-
-import {
-  CurrentAuctionFragment,
-  DaoFragment,
-  ProposalFragment,
-} from '../sdk.generated'
 
 const DAOS_TO_EXCLUDE = [
   '0x9c8ff314c9bc7f6e59a9d9225fb22946427edc03',
   '0x4b10701bfd7bfedc47d50562b76b436fbb5bdb3b',
 ]
 
-type DashboardDaos = DaoFragment &
-  {
-    chainId: CHAIN_ID
-    proposals: ProposalFragment[]
-    currentAuction: CurrentAuctionFragment
-  }[]
-
 export const dashboardRequest = async (memberAddress: string) => {
   //   let daos: MyDaosResponse = []
 
diff --git a/apps/web/src/pages/dashboard.tsx b/apps/web/src/pages/dashboard.tsx
index 688d029b..1e9176b6 100644
--- a/apps/web/src/pages/dashboard.tsx
+++ b/apps/web/src/pages/dashboard.tsx
@@ -72,7 +72,32 @@ const Dashboard = () => {
     return <div>no data</div>
   }
 
-  return <div>{data?.map((dao) => dao.name)}</div>
+  return (
+    <div>
+      <h1 style={{ marginBottom: '20px' }}>Dashboard</h1>
+      <div style={{ marginBottom: '16px' }}>
+        <h2 style={{ marginBottom: '12px' }}>DAOs</h2>
+        <div>
+          {data?.map((dao) => (
+            <div> {dao.name}</div>
+          ))}
+        </div>
+      </div>
+      <div style={{ marginBottom: '16px' }}>
+        <h2 style={{ marginBottom: '12px' }}>Proposals</h2>
+        <div>
+          {data?.map((dao) => (
+            <>
+              <h4 style={{ marginBottom: '8px' }}> {dao.name}</h4>
+              {dao.proposals.map((proposal) => (
+                <div>{proposal.title}</div>
+              ))}
+            </>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default Dashboard

From 760f6a79eb46801a52706fbcf89530838148e3e4 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 7 Sep 2023 21:44:08 -0700
Subject: [PATCH 07/48] render instead of redirect

---
 .../data/subgraph/requests/dashboardQuery.ts  |  2 -
 .../dashboard/Dashboard.tsx}                  | 10 +++--
 apps/web/src/modules/dashboard/index.ts       |  1 +
 apps/web/src/pages/index.tsx                  | 37 ++++++++-----------
 4 files changed, 23 insertions(+), 27 deletions(-)
 rename apps/web/src/{pages/dashboard.tsx => modules/dashboard/Dashboard.tsx} (88%)
 create mode 100644 apps/web/src/modules/dashboard/index.ts

diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
index 9efcb9e2..8e1e23a6 100644
--- a/apps/web/src/data/subgraph/requests/dashboardQuery.ts
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -9,8 +9,6 @@ const DAOS_TO_EXCLUDE = [
 ]
 
 export const dashboardRequest = async (memberAddress: string) => {
-  //   let daos: MyDaosResponse = []
-
   if (!memberAddress) throw new Error('No user address provided')
 
   try {
diff --git a/apps/web/src/pages/dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
similarity index 88%
rename from apps/web/src/pages/dashboard.tsx
rename to apps/web/src/modules/dashboard/Dashboard.tsx
index 1e9176b6..fd44109e 100644
--- a/apps/web/src/pages/dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,8 +1,10 @@
+import { Flex } from '@zoralabs/zord'
 import axios from 'axios'
 import React from 'react'
 import useSWR from 'swr'
 import { useAccount } from 'wagmi'
 
+import { Meta } from 'src/components/Meta'
 import {
   ProposalState,
   getProposalState,
@@ -59,7 +61,8 @@ const Dashboard = () => {
 
   const { data, error, isValidating } = useSWR(
     [`dashboard:${address}`],
-    address ? () => fetchDashboardData(address) : null
+    address ? () => fetchDashboardData(address) : null,
+    { revalidateOnFocus: false }
   )
 
   if (error) {
@@ -73,7 +76,8 @@ const Dashboard = () => {
   }
 
   return (
-    <div>
+    <Flex direction={'column'} mt={'x5'} minH={'100vh'}>
+      <Meta title={'Dashboard'} type={'website'} slug={'/'} />
       <h1 style={{ marginBottom: '20px' }}>Dashboard</h1>
       <div style={{ marginBottom: '16px' }}>
         <h2 style={{ marginBottom: '12px' }}>DAOs</h2>
@@ -96,7 +100,7 @@ const Dashboard = () => {
           ))}
         </div>
       </div>
-    </div>
+    </Flex>
   )
 }
 
diff --git a/apps/web/src/modules/dashboard/index.ts b/apps/web/src/modules/dashboard/index.ts
new file mode 100644
index 00000000..f3598477
--- /dev/null
+++ b/apps/web/src/modules/dashboard/index.ts
@@ -0,0 +1 @@
+export * from './Dashboard'
diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index 7cbafdf7..4aea64d7 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -1,6 +1,5 @@
 import { Stack } from '@zoralabs/zord'
-import { useRouter } from 'next/router'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useAccount } from 'wagmi'
 
 import Everything from 'src/components/Home/Everything'
@@ -13,33 +12,27 @@ import { Meta } from 'src/components/Meta'
 import { AuctionFragment } from 'src/data/subgraph/sdk.generated'
 import { getHomeLayout } from 'src/layouts/HomeLayout'
 import { DaoFeed } from 'src/modules/dao'
+import Dashboard from 'src/modules/dashboard/Dashboard'
 
 import { NextPageWithLayout } from './_app'
 
 export type DaoProps = AuctionFragment['dao']
 
 const HomePage: NextPageWithLayout = () => {
-  const router = useRouter()
+  // const router = useRouter()
   const { address } = useAccount()
-  //   {
-  //   onConnect({ address }) {
-  //     const wasRedirected = sessionStorage.getItem('wasRedirected')
-
-  //     if (address && !wasRedirected) {
-  //       sessionStorage.setItem('wasRedirected', 'true')
-  //       router.push('/about')
-  //     }
-  //   },
-  // }
-
-  // useEffect helps load redirect a little faster on page load
-  useEffect(() => {
-    const wasRedirected = sessionStorage.getItem('wasRedirected')
-    if (address && !wasRedirected) {
-      sessionStorage.setItem('wasRedirected', 'true')
-      router.push('/about')
-    }
-  }, [address])
+
+  // useEffect(() => {
+  //   const wasRedirected = sessionStorage.getItem('wasRedirected')
+  //   if (address && !wasRedirected) {
+  //     sessionStorage.setItem('wasRedirected', 'true')
+  //     router.push('/about')
+  //   }
+  // }, [address])
+
+  if (address) {
+    return <Dashboard />
+  }
   return (
     <>
       <Meta title={'Nouns your ideas'} type={'website'} slug={'/'} />

From 57980e189bfca9a6d6b94c2ba18c03b2c74eb30e Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Fri, 8 Sep 2023 12:11:04 -0700
Subject: [PATCH 08/48] page layout, dao/proposal lists

---
 .../subgraph/queries/dashboardQuery.graphql   |   1 +
 .../data/subgraph/requests/dashboardQuery.ts  |   1 +
 apps/web/src/data/subgraph/sdk.generated.ts   |   2 +
 apps/web/src/modules/dashboard/Dashboard.tsx  | 167 +++++++++++++++---
 4 files changed, 149 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/data/subgraph/queries/dashboardQuery.graphql b/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
index 4879c78f..3cc5ab66 100644
--- a/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
+++ b/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
@@ -2,6 +2,7 @@ query dashboard($where: DAOTokenOwner_filter, $first: Int, $skip: Int) {
   daotokenOwners(where: $where, first: $first, skip: $skip) {
     dao {
       ...DAO
+      contractImage
       proposals(
         where: { executed_not: true, canceled_not: true, vetoed_not: true }
         first: 10
diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
index 8e1e23a6..24ecd654 100644
--- a/apps/web/src/data/subgraph/requests/dashboardQuery.ts
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -39,6 +39,7 @@ export const dashboardRequest = async (memberAddress: string) => {
             proposals: dao.proposals,
             currentAuction: dao.currentAuction,
             chainId: queries.chainId,
+            daoImage: dao.contractImage,
           }))
       )
       .flat()
diff --git a/apps/web/src/data/subgraph/sdk.generated.ts b/apps/web/src/data/subgraph/sdk.generated.ts
index 95e6d666..4ea5ff14 100644
--- a/apps/web/src/data/subgraph/sdk.generated.ts
+++ b/apps/web/src/data/subgraph/sdk.generated.ts
@@ -2060,6 +2060,7 @@ export type DashboardQuery = {
     __typename?: 'DAOTokenOwner'
     dao: {
       __typename?: 'DAO'
+      contractImage: string
       name: string
       tokenAddress: any
       auctionAddress: any
@@ -2545,6 +2546,7 @@ export const DashboardDocument = gql`
     daotokenOwners(where: $where, first: $first, skip: $skip) {
       dao {
         ...DAO
+        contractImage
         proposals(
           where: { executed_not: true, canceled_not: true, vetoed_not: true }
           first: 10
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index fd44109e..937ca72f 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,9 +1,12 @@
-import { Flex } from '@zoralabs/zord'
+import { Box, Button, Flex, Text } from '@zoralabs/zord'
 import axios from 'axios'
+import { getFetchableUrl } from 'ipfs-service'
+import Image from 'next/image'
 import React from 'react'
 import useSWR from 'swr'
 import { useAccount } from 'wagmi'
 
+import { Avatar } from 'src/components/Avatar'
 import { Meta } from 'src/components/Meta'
 import {
   ProposalState,
@@ -24,6 +27,7 @@ const ACTIVE_PROPOSAL_STATES = [
 
 type DashboardDao = DaoFragment & {
   chainId: CHAIN_ID
+  daoImage: string
   proposals: ProposalFragment[]
   currentAuction: CurrentAuctionFragment
 }
@@ -76,32 +80,151 @@ const Dashboard = () => {
   }
 
   return (
-    <Flex direction={'column'} mt={'x5'} minH={'100vh'}>
+    <Flex
+      minH={'100vh'}
+      pt={{ '@initial': 'x20', '@768': 'x32' }}
+      w={'100%'}
+      justify="center"
+    >
       <Meta title={'Dashboard'} type={'website'} slug={'/'} />
-      <h1 style={{ marginBottom: '20px' }}>Dashboard</h1>
-      <div style={{ marginBottom: '16px' }}>
-        <h2 style={{ marginBottom: '12px' }}>DAOs</h2>
-        <div>
+      <Box w="100%" style={{ maxWidth: 912 }}>
+        <Text fontSize={35} fontWeight={'display'} mb={'x10'}>
+          Dashboard
+        </Text>
+        <Box mb={'x8'}>
+          <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
+            DAOs
+          </Text>
           {data?.map((dao) => (
-            <div> {dao.name}</div>
+            <DaoAuctionCard {...dao} />
           ))}
-        </div>
-      </div>
-      <div style={{ marginBottom: '16px' }}>
-        <h2 style={{ marginBottom: '12px' }}>Proposals</h2>
-        <div>
-          {data?.map((dao) => (
-            <>
-              <h4 style={{ marginBottom: '8px' }}> {dao.name}</h4>
-              {dao.proposals.map((proposal) => (
-                <div>{proposal.title}</div>
-              ))}
-            </>
-          ))}
-        </div>
-      </div>
+        </Box>
+        <Box>
+          <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
+            Proposals
+          </Text>
+          {data
+            .filter((dao) => dao.proposals.length)
+            .map((dao) => (
+              <DaoProposals {...dao} />
+            ))}
+
+          {/* <div>
+            {data?.map((dao) => (
+              <>
+                <h4 style={{ marginBottom: '8px' }}> {dao.name}</h4>
+                {dao.proposals.map((proposal) => (
+                  <div>{proposal.title}</div>
+                ))}
+              </>
+            ))}
+          </div> */}
+        </Box>
+      </Box>
     </Flex>
   )
 }
 
 export default Dashboard
+
+const DaoAuctionCard = ({ daoImage, tokenAddress }: DashboardDao) => {
+  const daoImageSrc = React.useMemo(() => {
+    return daoImage ? getFetchableUrl(daoImage) : null
+  }, [daoImage])
+  return (
+    <Flex
+      mb={'x4'}
+      w={'100%'}
+      borderColor={'border'}
+      borderStyle={'solid'}
+      borderRadius={'curved'}
+      borderWidth={'normal'}
+      cursor={'pointer'}
+      py={{ '@initial': 'x2', '@768': 'x3' }}
+      px={{ '@initial': 'x2', '@768': 'x6' }}
+    >
+      {daoImageSrc ? (
+        <Box mr="x4">
+          <Image
+            src={daoImageSrc}
+            layout="fixed"
+            objectFit="contain"
+            style={{ borderRadius: '12px' }}
+            alt=""
+            height={64}
+            width={64}
+          />
+        </Box>
+      ) : (
+        <Box mr="x4" borderRadius="phat">
+          <Avatar address={tokenAddress ?? undefined} size="52" />
+        </Box>
+      )}
+    </Flex>
+  )
+}
+
+const DaoProposals = ({ daoImage, tokenAddress, name, proposals }: DashboardDao) => {
+  const daoImageSrc = React.useMemo(() => {
+    return daoImage ? getFetchableUrl(daoImage) : null
+  }, [daoImage])
+  return (
+    <Box>
+      <Flex justify={'space-between'} mb={'x6'}>
+        <Flex align={'center'}>
+          {daoImageSrc ? (
+            <Box mr="x4">
+              <Image
+                src={daoImageSrc}
+                layout="fixed"
+                objectFit="contain"
+                style={{ borderRadius: '12px' }}
+                alt=""
+                height={48}
+                width={48}
+              />
+            </Box>
+          ) : (
+            <Box mr="x4" borderRadius="phat">
+              <Avatar address={tokenAddress ?? undefined} size="52" />
+            </Box>
+          )}
+          <Text fontSize={20} fontWeight="label">
+            {name}
+          </Text>
+        </Flex>
+        <Button variant="outline" borderRadius="curved">
+          Submit Proposal
+        </Button>
+      </Flex>
+      {proposals.map((proposal) => (
+        <DaoProposalCard {...proposal} />
+      ))}
+    </Box>
+  )
+}
+
+const DaoProposalCard = ({ title, proposalNumber }: ProposalFragment) => {
+  return (
+    <Flex
+      mb={'x4'}
+      w={'100%'}
+      borderColor={'border'}
+      borderStyle={'solid'}
+      borderRadius={'curved'}
+      borderWidth={'normal'}
+      cursor={'pointer'}
+      py={{ '@initial': 'x2', '@768': 'x6' }}
+      px={{ '@initial': 'x2', '@768': 'x3' }}
+    >
+      <Flex>
+        <Text fontSize={18} fontWeight="label" color={'text4'} mr={'x4'}>
+          {proposalNumber}
+        </Text>
+        <Text fontSize={18} fontWeight="label">
+          {title}
+        </Text>
+      </Flex>
+    </Flex>
+  )
+}

From d13e4cb8d4c09afacdfa7f5f3142face472f1e3c Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Fri, 8 Sep 2023 15:27:07 -0700
Subject: [PATCH 09/48] current bid and countdown displays

---
 apps/web/src/modules/dashboard/Dashboard.tsx | 131 ++++++++++++++++---
 1 file changed, 110 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 937ca72f..22c69e12 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,13 +1,17 @@
 import { Box, Button, Flex, Text } from '@zoralabs/zord'
 import axios from 'axios'
+import dayjs from 'dayjs'
 import { getFetchableUrl } from 'ipfs-service'
 import Image from 'next/image'
-import React from 'react'
+import React, { useState } from 'react'
 import useSWR from 'swr'
+import { formatEther } from 'viem'
 import { useAccount } from 'wagmi'
 
 import { Avatar } from 'src/components/Avatar'
+import { ContractButton } from 'src/components/ContractButton'
 import { Meta } from 'src/components/Meta'
+import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
 import {
   ProposalState,
   getProposalState,
@@ -17,8 +21,11 @@ import {
   DaoFragment,
   ProposalFragment,
 } from 'src/data/subgraph/sdk.generated'
+import { useCountdown, useIsMounted } from 'src/hooks'
 import { CHAIN_ID } from 'src/typings'
 
+import { bidInput } from '../auction/components/Auction.css'
+
 const ACTIVE_PROPOSAL_STATES = [
   ProposalState.Active,
   ProposalState.Pending,
@@ -127,10 +134,40 @@ const Dashboard = () => {
 
 export default Dashboard
 
-const DaoAuctionCard = ({ daoImage, tokenAddress }: DashboardDao) => {
-  const daoImageSrc = React.useMemo(() => {
-    return daoImage ? getFetchableUrl(daoImage) : null
-  }, [daoImage])
+const DashCountdown = ({
+  endTime,
+  onEnd,
+  isOver,
+}: {
+  endTime: string | null
+  onEnd: () => void
+  isOver: boolean
+}) => {
+  const { countdownString } = useCountdown(Number(endTime), onEnd)
+  const isMounted = useIsMounted()
+  const countdownText = !endTime || isOver ? 'N/A' : countdownString
+  if (!isMounted) return null
+  return (
+    <Text fontSize={18} fontWeight="label">
+      {countdownText}
+    </Text>
+  )
+}
+
+const DaoAuctionCard = ({ currentAuction, chainId }: DashboardDao) => {
+  const { name: chainName, icon: chainIcon } =
+    PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
+  const bidText = currentAuction.highestBid?.amount
+    ? formatEther(BigInt(currentAuction.highestBid.amount))
+    : 'N/A'
+  const { endTime } = currentAuction
+  const [isEnded, setIsEnded] = useState(false)
+
+  const isOver = !!endTime ? dayjs.unix(Date.now() / 1000) >= dayjs.unix(endTime) : true
+  const onEnd = () => {
+    setIsEnded(true)
+  }
+
   return (
     <Flex
       mb={'x4'}
@@ -142,24 +179,75 @@ const DaoAuctionCard = ({ daoImage, tokenAddress }: DashboardDao) => {
       cursor={'pointer'}
       py={{ '@initial': 'x2', '@768': 'x3' }}
       px={{ '@initial': 'x2', '@768': 'x6' }}
+      align={'center'}
     >
-      {daoImageSrc ? (
-        <Box mr="x4">
-          <Image
-            src={daoImageSrc}
-            layout="fixed"
-            objectFit="contain"
-            style={{ borderRadius: '12px' }}
-            alt=""
-            height={64}
-            width={64}
-          />
-        </Box>
-      ) : (
-        <Box mr="x4" borderRadius="phat">
-          <Avatar address={tokenAddress ?? undefined} size="52" />
+      <Box mr="x6">
+        <Image
+          src={currentAuction.token.image}
+          layout="fixed"
+          objectFit="contain"
+          style={{ borderRadius: '12px' }}
+          alt=""
+          height={64}
+          width={64}
+        />
+      </Box>
+      <Flex
+        direction={'column'}
+        style={{
+          width: '30%',
+        }}
+      >
+        <Flex mb="x1" align="center">
+          {chainIcon && (
+            <Image
+              src={chainIcon}
+              layout="fixed"
+              objectFit="contain"
+              style={{ borderRadius: '12px', maxHeight: '22px' }}
+              alt=""
+              height={22}
+              width={22}
+            />
+          )}
+          <Text fontSize={16} color="text3" ml={'x1'}>
+            {chainName}
+          </Text>
+        </Flex>
+        <Text fontSize={20} fontWeight="label">
+          {currentAuction.token.name}
+        </Text>
+      </Flex>
+      <Flex
+        direction={'column'}
+        style={{
+          width: '15%',
+        }}
+      >
+        <Text fontSize={16} color="text3" mb={'x1'}>
+          Current Bid
+        </Text>
+        <Text fontSize={18} fontWeight="label">
+          {bidText}
+        </Text>
+      </Flex>
+      <Flex
+        direction={'column'}
+        style={{
+          width: '15%',
+        }}
+      >
+        <Text fontSize={16} color="text3" mb={'x1'}>
+          Ends In
+        </Text>
+        <DashCountdown endTime={endTime} onEnd={onEnd} isOver={isOver} />
+      </Flex>
+      <form>
+        <Box position="relative" mr={{ '@initial': 'x0', '@768': 'x2' }}>
+          <input className={bidInput} />
         </Box>
-      )}
+      </form>
+      <ContractButton handleClick={() => {}}>Bid</ContractButton>
     </Flex>
   )
 }
@@ -193,6 +281,7 @@ const DaoProposals = ({ daoImage, tokenAddress, name, proposals }: DashboardDao)
             {name}
           </Text>
         </Flex>
+
         <Button variant="outline" borderRadius="curved">
           Submit Proposal
         </Button>

From f4abe2f563f6bba16439da53612d3ad07abaaac5 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Fri, 8 Sep 2023 17:04:36 -0700
Subject: [PATCH 10/48] set up auction card listeners

---
 apps/web/src/constants/swrKeys.ts             |  1 +
 apps/web/src/modules/dashboard/Dashboard.tsx  | 56 +++++++++++++------
 .../src/modules/dashboard/dashboard.css.ts    | 27 +++++++++
 3 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 apps/web/src/modules/dashboard/dashboard.css.ts

diff --git a/apps/web/src/constants/swrKeys.ts b/apps/web/src/constants/swrKeys.ts
index 16a25b66..23b1337d 100644
--- a/apps/web/src/constants/swrKeys.ts
+++ b/apps/web/src/constants/swrKeys.ts
@@ -19,6 +19,7 @@ const SWR_KEYS = {
   DAO_FEED: 'dao-feed',
   MEMBERS: 'members',
   TOKEN_IMAGE: 'token-image',
+  DASHBOARD: 'dashboard',
   DYNAMIC: {
     MY_DAOS(str: string) {
       return `my-daos-${str}`
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 22c69e12..1c06f207 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -4,14 +4,16 @@ import dayjs from 'dayjs'
 import { getFetchableUrl } from 'ipfs-service'
 import Image from 'next/image'
 import React, { useState } from 'react'
-import useSWR from 'swr'
+import useSWR, { mutate } from 'swr'
 import { formatEther } from 'viem'
-import { useAccount } from 'wagmi'
+import { useAccount, useContractEvent } from 'wagmi'
 
 import { Avatar } from 'src/components/Avatar'
 import { ContractButton } from 'src/components/ContractButton'
 import { Meta } from 'src/components/Meta'
 import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
+import SWR_KEYS from 'src/constants/swrKeys'
+import { auctionAbi } from 'src/data/contract/abis'
 import {
   ProposalState,
   getProposalState,
@@ -24,7 +26,7 @@ import {
 import { useCountdown, useIsMounted } from 'src/hooks'
 import { CHAIN_ID } from 'src/typings'
 
-import { bidInput } from '../auction/components/Auction.css'
+import { bidInput } from './dashboard.css'
 
 const ACTIVE_PROPOSAL_STATES = [
   ProposalState.Active,
@@ -71,7 +73,7 @@ const Dashboard = () => {
   const { address } = useAccount()
 
   const { data, error, isValidating } = useSWR(
-    [`dashboard:${address}`],
+    [`${SWR_KEYS.DASHBOARD}:${address}`],
     address ? () => fetchDashboardData(address) : null,
     { revalidateOnFocus: false }
   )
@@ -82,6 +84,9 @@ const Dashboard = () => {
   if (isValidating) {
     return <div>loading</div>
   }
+  if (!address) {
+    return <div>no address</div>
+  }
   if (!data) {
     return <div>no data</div>
   }
@@ -103,7 +108,7 @@ const Dashboard = () => {
             DAOs
           </Text>
           {data?.map((dao) => (
-            <DaoAuctionCard {...dao} />
+            <DaoAuctionCard {...dao} userAddress={address} />
           ))}
         </Box>
         <Box>
@@ -115,17 +120,6 @@ const Dashboard = () => {
             .map((dao) => (
               <DaoProposals {...dao} />
             ))}
-
-          {/* <div>
-            {data?.map((dao) => (
-              <>
-                <h4 style={{ marginBottom: '8px' }}> {dao.name}</h4>
-                {dao.proposals.map((proposal) => (
-                  <div>{proposal.title}</div>
-                ))}
-              </>
-            ))}
-          </div> */}
         </Box>
       </Box>
     </Flex>
@@ -154,7 +148,12 @@ const DashCountdown = ({
   )
 }
 
-const DaoAuctionCard = ({ currentAuction, chainId }: DashboardDao) => {
+const DaoAuctionCard = ({
+  currentAuction,
+  chainId,
+  auctionAddress,
+  userAddress,
+}: DashboardDao & { userAddress: string }) => {
   const { name: chainName, icon: chainIcon } =
     PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
   const bidText = currentAuction.highestBid?.amount
@@ -168,6 +167,29 @@ const DaoAuctionCard = ({ currentAuction, chainId }: DashboardDao) => {
     setIsEnded(true)
   }
 
+  useContractEvent({
+    address: auctionAddress,
+    abi: auctionAbi,
+    eventName: 'AuctionCreated',
+    chainId,
+    listener: async () => {
+      await mutate([`${SWR_KEYS.DASHBOARD}:${userAddress}`, userAddress], () =>
+        fetchDashboardData(userAddress)
+      )
+    },
+  })
+  useContractEvent({
+    address: auctionAddress,
+    abi: auctionAbi,
+    eventName: 'AuctionBid',
+    chainId,
+    listener: async () => {
+      await mutate([`${SWR_KEYS.DASHBOARD}:${userAddress}`, userAddress], () =>
+        fetchDashboardData(userAddress)
+      )
+    },
+  })
+
   return (
     <Flex
       mb={'x4'}
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
new file mode 100644
index 00000000..7544783e
--- /dev/null
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css'
+import { atoms, theme } from '@zoralabs/zord'
+
+export const bidInput = style([
+  {
+    width: '100%',
+    maxWidth: '150px',
+    border: 'none',
+    borderRadius: '12px',
+    height: '48px',
+    paddingLeft: '16px',
+    paddingRight: '16px',
+    outline: 'none',
+    boxSizing: 'border-box',
+    transition: '.3s',
+    selectors: {
+      '&::placeholder': {
+        color: theme.colors.tertiary,
+      },
+    },
+  },
+  atoms({
+    backgroundColor: 'background2',
+    fontSize: 16,
+    lineHeight: 24,
+  }),
+])

From d4262ab0feb99c099c006d6f48f4069dccc94b01 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Fri, 8 Sep 2023 17:47:08 -0700
Subject: [PATCH 11/48] update query

---
 .../src/data/subgraph/queries/dashboardQuery.graphql   |  4 ++++
 apps/web/src/data/subgraph/requests/dashboardQuery.ts  |  1 +
 apps/web/src/data/subgraph/sdk.generated.ts            |  9 +++++++++
 apps/web/src/modules/dashboard/Dashboard.tsx           | 10 ++++++++--
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/data/subgraph/queries/dashboardQuery.graphql b/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
index 3cc5ab66..c7e98434 100644
--- a/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
+++ b/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
@@ -3,6 +3,10 @@ query dashboard($where: DAOTokenOwner_filter, $first: Int, $skip: Int) {
     dao {
       ...DAO
       contractImage
+      auctionConfig {
+        minimumBidIncrement
+        reservePrice
+      }
       proposals(
         where: { executed_not: true, canceled_not: true, vetoed_not: true }
         first: 10
diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
index 24ecd654..9d973dc4 100644
--- a/apps/web/src/data/subgraph/requests/dashboardQuery.ts
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -33,6 +33,7 @@ export const dashboardRequest = async (memberAddress: string) => {
           })
           .filter((dao) => !DAOS_TO_EXCLUDE.includes(dao.tokenAddress))
           .map((dao) => ({
+            ...dao,
             name: dao.name || '',
             tokenAddress: dao.tokenAddress,
             auctionAddress: dao?.auctionAddress || '',
diff --git a/apps/web/src/data/subgraph/sdk.generated.ts b/apps/web/src/data/subgraph/sdk.generated.ts
index 4ea5ff14..80ee85bc 100644
--- a/apps/web/src/data/subgraph/sdk.generated.ts
+++ b/apps/web/src/data/subgraph/sdk.generated.ts
@@ -2064,6 +2064,11 @@ export type DashboardQuery = {
       name: string
       tokenAddress: any
       auctionAddress: any
+      auctionConfig: {
+        __typename?: 'AuctionConfig'
+        minimumBidIncrement: any
+        reservePrice: any
+      }
       proposals: Array<{
         __typename?: 'Proposal'
         abstainVotes: number
@@ -2547,6 +2552,10 @@ export const DashboardDocument = gql`
       dao {
         ...DAO
         contractImage
+        auctionConfig {
+          minimumBidIncrement
+          reservePrice
+        }
         proposals(
           where: { executed_not: true, canceled_not: true, vetoed_not: true }
           first: 10
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 1c06f207..389f7a35 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -37,6 +37,10 @@ const ACTIVE_PROPOSAL_STATES = [
 type DashboardDao = DaoFragment & {
   chainId: CHAIN_ID
   daoImage: string
+  auctionConfig: {
+    minimumBidIncrement: string
+    reservePrice: string
+  }
   proposals: ProposalFragment[]
   currentAuction: CurrentAuctionFragment
 }
@@ -77,7 +81,7 @@ const Dashboard = () => {
     address ? () => fetchDashboardData(address) : null,
     { revalidateOnFocus: false }
   )
-
+  console.log('data', data)
   if (error) {
     return <div>error</div>
   }
@@ -269,7 +273,9 @@ const DaoAuctionCard = ({
           <input className={bidInput} />
         </Box>
       </form>
-      <ContractButton handleClick={() => {}}>Bid</ContractButton>
+      <ContractButton handleClick={() => {}} borderRadius={'curved'}>
+        Bid
+      </ContractButton>
     </Flex>
   )
 }

From 4e68d6afd2388d78d4a7dca33408f1ae7cc2f766 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Fri, 8 Sep 2023 18:26:00 -0700
Subject: [PATCH 12/48] min bid button

---
 apps/web/src/modules/dashboard/Dashboard.tsx  | 62 ++++++++++++++++---
 .../src/modules/dashboard/dashboard.css.ts    |  2 +-
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 389f7a35..5b72125a 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image'
 import React, { useState } from 'react'
 import useSWR, { mutate } from 'swr'
 import { formatEther } from 'viem'
-import { useAccount, useContractEvent } from 'wagmi'
+import { useAccount, useBalance, useContractEvent } from 'wagmi'
 
 import { Avatar } from 'src/components/Avatar'
 import { ContractButton } from 'src/components/ContractButton'
@@ -24,8 +24,10 @@ import {
   ProposalFragment,
 } from 'src/data/subgraph/sdk.generated'
 import { useCountdown, useIsMounted } from 'src/hooks'
-import { CHAIN_ID } from 'src/typings'
+import { AddressType, CHAIN_ID } from 'src/typings'
+import { formatCryptoVal } from 'src/utils/numbers'
 
+import { useMinBidIncrement } from '../auction'
 import { bidInput } from './dashboard.css'
 
 const ACTIVE_PROPOSAL_STATES = [
@@ -81,7 +83,7 @@ const Dashboard = () => {
     address ? () => fetchDashboardData(address) : null,
     { revalidateOnFocus: false }
   )
-  console.log('data', data)
+
   if (error) {
     return <div>error</div>
   }
@@ -157,15 +159,28 @@ const DaoAuctionCard = ({
   chainId,
   auctionAddress,
   userAddress,
-}: DashboardDao & { userAddress: string }) => {
+  auctionConfig,
+}: DashboardDao & { userAddress: AddressType }) => {
   const { name: chainName, icon: chainIcon } =
     PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
+
+  const { endTime, highestBid } = currentAuction
+  const { minimumBidIncrement, reservePrice } = auctionConfig
+  const [bidAmount, setBidAmount] = useState('')
+  const [isEnded, setIsEnded] = useState(false)
+
+  const { data: balance } = useBalance({ address: userAddress, chainId })
+
   const bidText = currentAuction.highestBid?.amount
     ? formatEther(BigInt(currentAuction.highestBid.amount))
     : 'N/A'
-  const { endTime } = currentAuction
-  const [isEnded, setIsEnded] = useState(false)
 
+  const { minBidAmount } = useMinBidIncrement({
+    highestBid: highestBid?.amount ? BigInt(highestBid?.amount) : undefined,
+    reservePrice: BigInt(reservePrice),
+    minBidIncrement: BigInt(minimumBidIncrement),
+  })
+  const formattedMinBid = formatCryptoVal(minBidAmount)
   const isOver = !!endTime ? dayjs.unix(Date.now() / 1000) >= dayjs.unix(endTime) : true
   const onEnd = () => {
     setIsEnded(true)
@@ -270,7 +285,40 @@ const DaoAuctionCard = ({
       </Flex>
       <form>
         <Box position="relative" mr={{ '@initial': 'x0', '@768': 'x2' }}>
-          <input className={bidInput} />
+          <input
+            className={bidInput}
+            placeholder={`${formattedMinBid} ETH`}
+            type={'number'}
+            min={formattedMinBid}
+            max={balance?.formatted}
+            value={bidAmount}
+            onChange={(e) => setBidAmount(e.target.value)}
+          />
+          <Flex
+            position="absolute"
+            style={{ top: 0, right: 0, bottom: 0 }}
+            align={'center'}
+            justify={'center'}
+          >
+            <Button
+              height={'100%'}
+              mr={'x4'}
+              px={'x0'}
+              fontWeight={'label'}
+              size="sm"
+              variant="ghost"
+              style={{
+                minWidth: 'fit-content',
+                fontWeight: 500,
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={() => setBidAmount(formattedMinBid)}
+              disabled={bidAmount >= formattedMinBid}
+            >
+              Min
+            </Button>
+          </Flex>
         </Box>
       </form>
       <ContractButton handleClick={() => {}} borderRadius={'curved'}>
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index 7544783e..a954934d 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -21,7 +21,7 @@ export const bidInput = style([
   },
   atoms({
     backgroundColor: 'background2',
-    fontSize: 16,
+    fontSize: 14,
     lineHeight: 24,
   }),
 ])

From cc8f9ec0bd4628b97f0ff480d7e213a220c86c2e Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 12:57:31 -0700
Subject: [PATCH 13/48] settle auction

---
 .../subgraph/fragments/CurrentAuction.graphql |   1 +
 apps/web/src/data/subgraph/sdk.generated.ts   |   5 +-
 .../components/CurrentAuction/Settle.tsx      |  16 +-
 apps/web/src/modules/dashboard/Dashboard.tsx  | 172 +++++++++++-------
 4 files changed, 125 insertions(+), 69 deletions(-)

diff --git a/apps/web/src/data/subgraph/fragments/CurrentAuction.graphql b/apps/web/src/data/subgraph/fragments/CurrentAuction.graphql
index 72aebfa4..8ad972bf 100644
--- a/apps/web/src/data/subgraph/fragments/CurrentAuction.graphql
+++ b/apps/web/src/data/subgraph/fragments/CurrentAuction.graphql
@@ -2,6 +2,7 @@ fragment CurrentAuction on Auction {
   endTime
   highestBid {
     amount
+    bidder
   }
   token {
     name
diff --git a/apps/web/src/data/subgraph/sdk.generated.ts b/apps/web/src/data/subgraph/sdk.generated.ts
index 80ee85bc..388320ff 100644
--- a/apps/web/src/data/subgraph/sdk.generated.ts
+++ b/apps/web/src/data/subgraph/sdk.generated.ts
@@ -1858,7 +1858,7 @@ export type AuctionBidFragment = {
 export type CurrentAuctionFragment = {
   __typename?: 'Auction'
   endTime: any
-  highestBid?: { __typename?: 'AuctionBid'; amount: any } | null
+  highestBid?: { __typename?: 'AuctionBid'; amount: any; bidder: any } | null
   token: { __typename?: 'Token'; name: string; image: string; tokenId: any }
 }
 
@@ -2097,7 +2097,7 @@ export type DashboardQuery = {
       currentAuction?: {
         __typename?: 'Auction'
         endTime: any
-        highestBid?: { __typename?: 'AuctionBid'; amount: any } | null
+        highestBid?: { __typename?: 'AuctionBid'; amount: any; bidder: any } | null
         token: { __typename?: 'Token'; name: string; image: string; tokenId: any }
       } | null
     }
@@ -2354,6 +2354,7 @@ export const CurrentAuctionFragmentDoc = gql`
     endTime
     highestBid {
       amount
+      bidder
     }
     token {
       name
diff --git a/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx b/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
index 66ae3dce..093aeb5a 100644
--- a/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
+++ b/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
@@ -12,6 +12,7 @@ import { ContractButton } from 'src/components/ContractButton'
 import { auctionAbi } from 'src/data/contract/abis'
 import { useDaoStore } from 'src/modules/dao'
 import { useChainStore } from 'src/stores/useChainStore'
+import { AddressType } from 'src/typings'
 
 import { auctionActionButtonVariants } from '../Auction.css'
 
@@ -19,26 +20,29 @@ interface SettleProps {
   isEnding: boolean
   collectionAddress?: string
   owner?: string | undefined
+  externalAuctionAddress?: string
 }
 
-export const Settle = ({ isEnding, owner }: SettleProps) => {
+export const Settle = ({ isEnding, owner, externalAuctionAddress }: SettleProps) => {
   const chain = useChainStore((x) => x.chain)
-  const addresses = useDaoStore((state) => state.addresses)
+  const addresses = useDaoStore?.((state) => state.addresses) || {}
 
   const { address } = useAccount()
   const isWinner = owner != undefined && address == owner
 
+  const auctionAddress = (externalAuctionAddress as AddressType) || addresses?.auction
+
   const { data: paused } = useContractRead({
-    enabled: !!addresses?.auction,
-    address: addresses?.auction,
+    enabled: !!auctionAddress,
+    address: auctionAddress,
     chainId: chain.id,
     abi: auctionAbi,
     functionName: 'paused',
   })
 
   const { config, error } = usePrepareContractWrite({
-    enabled: !!addresses?.auction,
-    address: addresses?.auction,
+    enabled: !!auctionAddress,
+    address: auctionAddress,
     abi: auctionAbi,
     functionName: paused ? 'settleAuction' : 'settleCurrentAndCreateNewAuction',
   })
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 5b72125a..70d9ea90 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -6,7 +6,11 @@ import Image from 'next/image'
 import React, { useState } from 'react'
 import useSWR, { mutate } from 'swr'
 import { formatEther } from 'viem'
-import { useAccount, useBalance, useContractEvent } from 'wagmi'
+import {
+  useAccount,
+  useBalance,
+  useContractEvent,
+} from 'wagmi'
 
 import { Avatar } from 'src/components/Avatar'
 import { ContractButton } from 'src/components/ContractButton'
@@ -23,11 +27,12 @@ import {
   DaoFragment,
   ProposalFragment,
 } from 'src/data/subgraph/sdk.generated'
-import { useCountdown, useIsMounted } from 'src/hooks'
+import { useCountdown, useIsMounted, useTimeout } from 'src/hooks'
 import { AddressType, CHAIN_ID } from 'src/typings'
 import { formatCryptoVal } from 'src/utils/numbers'
 
 import { useMinBidIncrement } from '../auction'
+import { Settle } from '../auction/components/CurrentAuction/Settle'
 import { bidInput } from './dashboard.css'
 
 const ACTIVE_PROPOSAL_STATES = [
@@ -154,33 +159,19 @@ const DashCountdown = ({
   )
 }
 
-const DaoAuctionCard = ({
-  currentAuction,
-  chainId,
-  auctionAddress,
-  userAddress,
-  auctionConfig,
-}: DashboardDao & { userAddress: AddressType }) => {
+const DaoAuctionCard = (props: DashboardDao & { userAddress: AddressType }) => {
+  const { currentAuction, chainId, auctionAddress, userAddress, auctionConfig } = props
   const { name: chainName, icon: chainIcon } =
     PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
 
-  const { endTime, highestBid } = currentAuction
-  const { minimumBidIncrement, reservePrice } = auctionConfig
-  const [bidAmount, setBidAmount] = useState('')
-  const [isEnded, setIsEnded] = useState(false)
+  const { endTime } = currentAuction
 
-  const { data: balance } = useBalance({ address: userAddress, chainId })
+  const [isEnded, setIsEnded] = useState(false)
 
   const bidText = currentAuction.highestBid?.amount
     ? formatEther(BigInt(currentAuction.highestBid.amount))
     : 'N/A'
 
-  const { minBidAmount } = useMinBidIncrement({
-    highestBid: highestBid?.amount ? BigInt(highestBid?.amount) : undefined,
-    reservePrice: BigInt(reservePrice),
-    minBidIncrement: BigInt(minimumBidIncrement),
-  })
-  const formattedMinBid = formatCryptoVal(minBidAmount)
   const isOver = !!endTime ? dayjs.unix(Date.now() / 1000) >= dayjs.unix(endTime) : true
   const onEnd = () => {
     setIsEnded(true)
@@ -283,47 +274,7 @@ const DaoAuctionCard = ({
         </Text>
         <DashCountdown endTime={endTime} onEnd={onEnd} isOver={isOver} />
       </Flex>
-      <form>
-        <Box position="relative" mr={{ '@initial': 'x0', '@768': 'x2' }}>
-          <input
-            className={bidInput}
-            placeholder={`${formattedMinBid} ETH`}
-            type={'number'}
-            min={formattedMinBid}
-            max={balance?.formatted}
-            value={bidAmount}
-            onChange={(e) => setBidAmount(e.target.value)}
-          />
-          <Flex
-            position="absolute"
-            style={{ top: 0, right: 0, bottom: 0 }}
-            align={'center'}
-            justify={'center'}
-          >
-            <Button
-              height={'100%'}
-              mr={'x4'}
-              px={'x0'}
-              fontWeight={'label'}
-              size="sm"
-              variant="ghost"
-              style={{
-                minWidth: 'fit-content',
-                fontWeight: 500,
-                paddingLeft: 0,
-                paddingRight: 0,
-              }}
-              onClick={() => setBidAmount(formattedMinBid)}
-              disabled={bidAmount >= formattedMinBid}
-            >
-              Min
-            </Button>
-          </Flex>
-        </Box>
-      </form>
-      <ContractButton handleClick={() => {}} borderRadius={'curved'}>
-        Bid
-      </ContractButton>
+      <BidActionButton {...props} isOver={isOver} isEnded={isEnded} />
     </Flex>
   )
 }
@@ -393,3 +344,102 @@ const DaoProposalCard = ({ title, proposalNumber }: ProposalFragment) => {
     </Flex>
   )
 }
+
+const BidActionButton = ({
+  userAddress,
+  chainId,
+  auctionConfig,
+  currentAuction,
+  isEnded,
+  auctionAddress,
+  isOver,
+}: DashboardDao & { userAddress: AddressType; isOver: boolean; isEnded: boolean }) => {
+  const { data: balance } = useBalance({ address: userAddress, chainId })
+  const { minimumBidIncrement, reservePrice } = auctionConfig
+  const { highestBid } = currentAuction
+  const { minBidAmount } = useMinBidIncrement({
+    highestBid: highestBid?.amount ? BigInt(highestBid?.amount) : undefined,
+    reservePrice: BigInt(reservePrice),
+    minBidIncrement: BigInt(minimumBidIncrement),
+  })
+  // const { data: paused } = useContractRead({
+  //   enabled: !!auctionAddress,
+  //   address: auctionAddress,
+  //   chainId,
+  //   abi: auctionAbi,
+  //   functionName: 'paused',
+  // })
+  // const { config, error } = usePrepareContractWrite({
+  //   enabled: !!auctionAddress,
+  //   address: auctionAddress,
+  //   abi: auctionAbi,
+  //   functionName: paused ? 'settleAuction' : 'settleCurrentAndCreateNewAuction',
+  // })
+  // const {writeAsync, status} = useContractWrite(config)
+  const [bidAmount, setBidAmount] = useState('')
+  const [isEnding, setIsEnding] = useState(false)
+  const formattedMinBid = formatCryptoVal(minBidAmount)
+
+  const isEndingTimeout = isEnded ? 4000 : null
+  useTimeout(() => {
+    setIsEnding(false)
+  }, isEndingTimeout)
+
+  if (isEnded || isOver) {
+    return (
+      <Box ml={'auto'}>
+        <Settle
+          isEnding={isEnding}
+          owner={highestBid?.bidder}
+          externalAuctionAddress={auctionAddress}
+        />
+      </Box>
+    )
+  }
+
+  return (
+    <>
+      <form style={{ marginLeft: 'auto' }}>
+        <Box position="relative" mr={{ '@initial': 'x0', '@768': 'x2' }}>
+          <input
+            className={bidInput}
+            placeholder={`${formattedMinBid} ETH`}
+            type={'number'}
+            min={formattedMinBid}
+            max={balance?.formatted}
+            value={bidAmount}
+            onChange={(e) => setBidAmount(e.target.value)}
+          />
+          <Flex
+            position="absolute"
+            style={{ top: 0, right: 0, bottom: 0 }}
+            align={'center'}
+            justify={'center'}
+          >
+            <Button
+              height={'100%'}
+              mr={'x4'}
+              px={'x0'}
+              fontWeight={'label'}
+              size="sm"
+              variant="ghost"
+              style={{
+                minWidth: 'fit-content',
+                fontWeight: 500,
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={() => setBidAmount(formattedMinBid)}
+              disabled={bidAmount >= formattedMinBid}
+            >
+              Min
+            </Button>
+          </Flex>
+        </Box>
+      </form>
+      <ContractButton handleClick={() => {}} borderRadius={'curved'}>
+        Bid
+      </ContractButton>
+    </>
+  )
+}

From f49689e260ba3ac7561a0c6213c77899bec48290 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 14:16:59 -0700
Subject: [PATCH 14/48] handle auction refresh after bid/settle

---
 .../components/CurrentAuction/Settle.tsx      |  4 +-
 apps/web/src/modules/dashboard/Dashboard.tsx  | 72 +++++++++++++++----
 .../api/dao/[network]/[token]/[tokenId].ts    |  3 +-
 3 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx b/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
index 093aeb5a..2217ca01 100644
--- a/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
+++ b/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
@@ -20,7 +20,7 @@ interface SettleProps {
   isEnding: boolean
   collectionAddress?: string
   owner?: string | undefined
-  externalAuctionAddress?: string
+  externalAuctionAddress?: AddressType
 }
 
 export const Settle = ({ isEnding, owner, externalAuctionAddress }: SettleProps) => {
@@ -30,7 +30,7 @@ export const Settle = ({ isEnding, owner, externalAuctionAddress }: SettleProps)
   const { address } = useAccount()
   const isWinner = owner != undefined && address == owner
 
-  const auctionAddress = (externalAuctionAddress as AddressType) || addresses?.auction
+  const auctionAddress = externalAuctionAddress || addresses?.auction
 
   const { data: paused } = useContractRead({
     enabled: !!auctionAddress,
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 70d9ea90..8d04afcc 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -11,6 +11,7 @@ import {
   useBalance,
   useContractEvent,
 } from 'wagmi'
+import { readContract } from 'wagmi/actions'
 
 import { Avatar } from 'src/components/Avatar'
 import { ContractButton } from 'src/components/ContractButton'
@@ -29,6 +30,7 @@ import {
 } from 'src/data/subgraph/sdk.generated'
 import { useCountdown, useIsMounted, useTimeout } from 'src/hooks'
 import { AddressType, CHAIN_ID } from 'src/typings'
+import { unpackOptionalArray } from 'src/utils/helpers'
 import { formatCryptoVal } from 'src/utils/numbers'
 
 import { useMinBidIncrement } from '../auction'
@@ -77,6 +79,7 @@ const fetchDashboardData = async (address: string) => {
     .then((x) => x.data)
 
   const resolved = await Promise.all(userDaos.map(fetchDaoProposalState))
+  console.log('resolved', resolved)
   return resolved
 }
 
@@ -88,7 +91,7 @@ const Dashboard = () => {
     address ? () => fetchDashboardData(address) : null,
     { revalidateOnFocus: false }
   )
-
+  console.log('data', data)
   if (error) {
     return <div>error</div>
   }
@@ -160,10 +163,45 @@ const DashCountdown = ({
 }
 
 const DaoAuctionCard = (props: DashboardDao & { userAddress: AddressType }) => {
-  const { currentAuction, chainId, auctionAddress, userAddress, auctionConfig } = props
+  const {
+    currentAuction,
+    chainId,
+    auctionAddress,
+    userAddress,
+    auctionConfig,
+    tokenAddress,
+  } = props
   const { name: chainName, icon: chainIcon } =
     PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
 
+  const { data: auction } = useSWR(
+    [SWR_KEYS.AUCTION, chainId, auctionAddress],
+    (_, chainId, auctionAddress) =>
+      readContract({
+        abi: auctionAbi,
+        address: auctionAddress as AddressType,
+        functionName: 'auction',
+        chainId,
+      }),
+    { revalidateOnFocus: true }
+  )
+
+  const [liveTokenId, liveHighestBid, liveHighestBidder, _, liveEndTime, liveSettled] =
+    unpackOptionalArray(auction, 6)
+
+  // const { data: token } = useSWR(
+  //   [
+  //     `${SWR_KEYS.TOKEN}:${tokenAddress}:${liveTokenId}`,
+  //     chainId,
+  //     tokenAddress,
+  //     liveTokenId,
+  //   ],
+  //   (_, id) =>
+  //     axios
+  //       .get<TokenWithWinner>(`/api/dao/${chainId}/${tokenAddress}/${liveTokenId}`)
+  //       .then((x) => x.data)
+  // )
+
   const { endTime } = currentAuction
 
   const [isEnded, setIsEnded] = useState(false)
@@ -177,15 +215,22 @@ const DaoAuctionCard = (props: DashboardDao & { userAddress: AddressType }) => {
     setIsEnded(true)
   }
 
+  const isTokenActiveAuction =
+    !liveSettled &&
+    !!liveTokenId &&
+    liveTokenId.toString() == currentAuction.token.tokenId
+
   useContractEvent({
     address: auctionAddress,
     abi: auctionAbi,
     eventName: 'AuctionCreated',
     chainId,
     listener: async () => {
-      await mutate([`${SWR_KEYS.DASHBOARD}:${userAddress}`, userAddress], () =>
-        fetchDashboardData(userAddress)
-      )
+      setTimeout(() => {
+        mutate([`${SWR_KEYS.DASHBOARD}:${userAddress}`], () =>
+          fetchDashboardData(userAddress)
+        )
+      }, 3000)
     },
   })
   useContractEvent({
@@ -194,9 +239,11 @@ const DaoAuctionCard = (props: DashboardDao & { userAddress: AddressType }) => {
     eventName: 'AuctionBid',
     chainId,
     listener: async () => {
-      await mutate([`${SWR_KEYS.DASHBOARD}:${userAddress}`, userAddress], () =>
-        fetchDashboardData(userAddress)
-      )
+      setTimeout(() => {
+        mutate([`${SWR_KEYS.DASHBOARD}:${userAddress}`], () =>
+          fetchDashboardData(userAddress)
+        )
+      }, 3000)
     },
   })
 
@@ -362,13 +409,7 @@ const BidActionButton = ({
     reservePrice: BigInt(reservePrice),
     minBidIncrement: BigInt(minimumBidIncrement),
   })
-  // const { data: paused } = useContractRead({
-  //   enabled: !!auctionAddress,
-  //   address: auctionAddress,
-  //   chainId,
-  //   abi: auctionAbi,
-  //   functionName: 'paused',
-  // })
+
   // const { config, error } = usePrepareContractWrite({
   //   enabled: !!auctionAddress,
   //   address: auctionAddress,
@@ -382,6 +423,7 @@ const BidActionButton = ({
 
   const isEndingTimeout = isEnded ? 4000 : null
   useTimeout(() => {
+    console.log('timeout fired')
     setIsEnding(false)
   }, isEndingTimeout)
 
diff --git a/apps/web/src/pages/api/dao/[network]/[token]/[tokenId].ts b/apps/web/src/pages/api/dao/[network]/[token]/[tokenId].ts
index 67199db8..9e0327ad 100644
--- a/apps/web/src/pages/api/dao/[network]/[token]/[tokenId].ts
+++ b/apps/web/src/pages/api/dao/[network]/[token]/[tokenId].ts
@@ -7,8 +7,9 @@ import { AddressType } from 'src/typings'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { network, token, tokenId } = req.query
+  console.log('network', network)
   const chain = PUBLIC_DEFAULT_CHAINS.find((x) => x.slug == network)
-
+  console.log('chain', chain)
   if (!chain) {
     return res.status(404).end()
   }

From e64db01038c4e7d331058b3950ba56a46ddc07ff Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 14:41:55 -0700
Subject: [PATCH 15/48] fix janky mutate refresh, fix poor state update

---
 apps/web/src/modules/dashboard/Dashboard.tsx | 93 +++++++++++---------
 1 file changed, 50 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 8d04afcc..27edf769 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -6,12 +6,7 @@ import Image from 'next/image'
 import React, { useState } from 'react'
 import useSWR, { mutate } from 'swr'
 import { formatEther } from 'viem'
-import {
-  useAccount,
-  useBalance,
-  useContractEvent,
-} from 'wagmi'
-import { readContract } from 'wagmi/actions'
+import { useAccount, useBalance, useContractEvent } from 'wagmi'
 
 import { Avatar } from 'src/components/Avatar'
 import { ContractButton } from 'src/components/ContractButton'
@@ -28,9 +23,8 @@ import {
   DaoFragment,
   ProposalFragment,
 } from 'src/data/subgraph/sdk.generated'
-import { useCountdown, useIsMounted, useTimeout } from 'src/hooks'
+import { useCountdown, useIsMounted } from 'src/hooks'
 import { AddressType, CHAIN_ID } from 'src/typings'
-import { unpackOptionalArray } from 'src/utils/helpers'
 import { formatCryptoVal } from 'src/utils/numbers'
 
 import { useMinBidIncrement } from '../auction'
@@ -91,11 +85,13 @@ const Dashboard = () => {
     address ? () => fetchDashboardData(address) : null,
     { revalidateOnFocus: false }
   )
-  console.log('data', data)
+
+  const [mutating, setMutating] = useState(false)
+
   if (error) {
     return <div>error</div>
   }
-  if (isValidating) {
+  if (isValidating && !mutating) {
     return <div>loading</div>
   }
   if (!address) {
@@ -105,6 +101,12 @@ const Dashboard = () => {
     return <div>no data</div>
   }
 
+  const handleMutate = async () => {
+    setMutating(true)
+    await mutate([`${SWR_KEYS.DASHBOARD}:${address}`], () => fetchDashboardData(address))
+    setMutating(false)
+  }
+
   return (
     <Flex
       minH={'100vh'}
@@ -122,7 +124,12 @@ const Dashboard = () => {
             DAOs
           </Text>
           {data?.map((dao) => (
-            <DaoAuctionCard {...dao} userAddress={address} />
+            <DaoAuctionCard
+              key={`${dao.tokenAddress}:${dao.currentAuction.token.tokenId}`}
+              {...dao}
+              userAddress={address}
+              handleMutate={handleMutate}
+            />
           ))}
         </Box>
         <Box>
@@ -132,7 +139,7 @@ const Dashboard = () => {
           {data
             .filter((dao) => dao.proposals.length)
             .map((dao) => (
-              <DaoProposals {...dao} />
+              <DaoProposals key={dao.tokenAddress} {...dao} />
             ))}
         </Box>
       </Box>
@@ -162,32 +169,35 @@ const DashCountdown = ({
   )
 }
 
-const DaoAuctionCard = (props: DashboardDao & { userAddress: AddressType }) => {
+const DaoAuctionCard = (
+  props: DashboardDao & { userAddress: AddressType; handleMutate: () => void }
+) => {
   const {
     currentAuction,
     chainId,
     auctionAddress,
     userAddress,
     auctionConfig,
+    handleMutate,
     tokenAddress,
   } = props
   const { name: chainName, icon: chainIcon } =
     PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
 
-  const { data: auction } = useSWR(
-    [SWR_KEYS.AUCTION, chainId, auctionAddress],
-    (_, chainId, auctionAddress) =>
-      readContract({
-        abi: auctionAbi,
-        address: auctionAddress as AddressType,
-        functionName: 'auction',
-        chainId,
-      }),
-    { revalidateOnFocus: true }
-  )
+  // const { data: auction } = useSWR(
+  //   [SWR_KEYS.AUCTION, chainId, auctionAddress],
+  //   (_, chainId, auctionAddress) =>
+  //     readContract({
+  //       abi: auctionAbi,
+  //       address: auctionAddress as AddressType,
+  //       functionName: 'auction',
+  //       chainId,
+  //     }),
+  //   { revalidateOnFocus: true }
+  // )
 
-  const [liveTokenId, liveHighestBid, liveHighestBidder, _, liveEndTime, liveSettled] =
-    unpackOptionalArray(auction, 6)
+  // const [liveTokenId, liveHighestBid, liveHighestBidder, _, liveEndTime, liveSettled] =
+  //   unpackOptionalArray(auction, 6)
 
   // const { data: token } = useSWR(
   //   [
@@ -215,10 +225,10 @@ const DaoAuctionCard = (props: DashboardDao & { userAddress: AddressType }) => {
     setIsEnded(true)
   }
 
-  const isTokenActiveAuction =
-    !liveSettled &&
-    !!liveTokenId &&
-    liveTokenId.toString() == currentAuction.token.tokenId
+  // const isTokenActiveAuction =
+  //   !liveSettled &&
+  //   !!liveTokenId &&
+  //   liveTokenId.toString() == currentAuction.token.tokenId
 
   useContractEvent({
     address: auctionAddress,
@@ -226,10 +236,9 @@ const DaoAuctionCard = (props: DashboardDao & { userAddress: AddressType }) => {
     eventName: 'AuctionCreated',
     chainId,
     listener: async () => {
+      console.log('AuctionCreated')
       setTimeout(() => {
-        mutate([`${SWR_KEYS.DASHBOARD}:${userAddress}`], () =>
-          fetchDashboardData(userAddress)
-        )
+        handleMutate()
       }, 3000)
     },
   })
@@ -240,9 +249,7 @@ const DaoAuctionCard = (props: DashboardDao & { userAddress: AddressType }) => {
     chainId,
     listener: async () => {
       setTimeout(() => {
-        mutate([`${SWR_KEYS.DASHBOARD}:${userAddress}`], () =>
-          fetchDashboardData(userAddress)
-        )
+        handleMutate()
       }, 3000)
     },
   })
@@ -361,7 +368,7 @@ const DaoProposals = ({ daoImage, tokenAddress, name, proposals }: DashboardDao)
         </Button>
       </Flex>
       {proposals.map((proposal) => (
-        <DaoProposalCard {...proposal} />
+        <DaoProposalCard key={proposal.proposalNumber} {...proposal} />
       ))}
     </Box>
   )
@@ -418,20 +425,20 @@ const BidActionButton = ({
   // })
   // const {writeAsync, status} = useContractWrite(config)
   const [bidAmount, setBidAmount] = useState('')
-  const [isEnding, setIsEnding] = useState(false)
+  // const [isEnding, setIsEnding] = useState(false)
   const formattedMinBid = formatCryptoVal(minBidAmount)
 
   const isEndingTimeout = isEnded ? 4000 : null
-  useTimeout(() => {
-    console.log('timeout fired')
-    setIsEnding(false)
-  }, isEndingTimeout)
+  // useTimeout(() => {
+  //   console.log('timeout fired')
+  //   setIsEnding(false)
+  // }, isEndingTimeout)
 
   if (isEnded || isOver) {
     return (
       <Box ml={'auto'}>
         <Settle
-          isEnding={isEnding}
+          isEnding={false}
           owner={highestBid?.bidder}
           externalAuctionAddress={auctionAddress}
         />

From 71b2d492f7bdf37c39ecc6a2bbd1eba9d05fab07 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 15:28:20 -0700
Subject: [PATCH 16/48] add bid TX write, add char limit to placeholder

---
 .../components/CurrentAuction/Settle.tsx      |  4 +
 apps/web/src/modules/dashboard/Dashboard.tsx  | 81 +++++++++++++------
 2 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx b/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
index 2217ca01..0ec26842 100644
--- a/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
+++ b/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
@@ -21,6 +21,10 @@ interface SettleProps {
   collectionAddress?: string
   owner?: string | undefined
   externalAuctionAddress?: AddressType
+  customStyles?: {
+    settle: string
+    settling: string
+  }
 }
 
 export const Settle = ({ isEnding, owner, externalAuctionAddress }: SettleProps) => {
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 27edf769..7f61b9f9 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -5,8 +5,9 @@ import { getFetchableUrl } from 'ipfs-service'
 import Image from 'next/image'
 import React, { useState } from 'react'
 import useSWR, { mutate } from 'swr'
-import { formatEther } from 'viem'
-import { useAccount, useBalance, useContractEvent } from 'wagmi'
+import { Address, formatEther, parseEther } from 'viem'
+import { useAccount, useBalance, useContractEvent, useNetwork } from 'wagmi'
+import { prepareWriteContract, waitForTransaction, writeContract } from 'wagmi/actions'
 
 import { Avatar } from 'src/components/Avatar'
 import { ContractButton } from 'src/components/ContractButton'
@@ -25,12 +26,18 @@ import {
 } from 'src/data/subgraph/sdk.generated'
 import { useCountdown, useIsMounted } from 'src/hooks'
 import { AddressType, CHAIN_ID } from 'src/typings'
-import { formatCryptoVal } from 'src/utils/numbers'
 
 import { useMinBidIncrement } from '../auction'
 import { Settle } from '../auction/components/CurrentAuction/Settle'
 import { bidInput } from './dashboard.css'
 
+function maxChar(str: string, maxLength: number) {
+  if (str.length <= maxLength) {
+    return str
+  }
+  return str.slice(0, maxLength) + '...'
+}
+
 const ACTIVE_PROPOSAL_STATES = [
   ProposalState.Active,
   ProposalState.Pending,
@@ -73,7 +80,6 @@ const fetchDashboardData = async (address: string) => {
     .then((x) => x.data)
 
   const resolved = await Promise.all(userDaos.map(fetchDaoProposalState))
-  console.log('resolved', resolved)
   return resolved
 }
 
@@ -411,28 +417,44 @@ const BidActionButton = ({
   const { data: balance } = useBalance({ address: userAddress, chainId })
   const { minimumBidIncrement, reservePrice } = auctionConfig
   const { highestBid } = currentAuction
+  const { chain: wagmiChain } = useNetwork()
   const { minBidAmount } = useMinBidIncrement({
     highestBid: highestBid?.amount ? BigInt(highestBid?.amount) : undefined,
     reservePrice: BigInt(reservePrice),
     minBidIncrement: BigInt(minimumBidIncrement),
   })
 
-  // const { config, error } = usePrepareContractWrite({
-  //   enabled: !!auctionAddress,
-  //   address: auctionAddress,
-  //   abi: auctionAbi,
-  //   functionName: paused ? 'settleAuction' : 'settleCurrentAndCreateNewAuction',
-  // })
-  // const {writeAsync, status} = useContractWrite(config)
   const [bidAmount, setBidAmount] = useState('')
-  // const [isEnding, setIsEnding] = useState(false)
-  const formattedMinBid = formatCryptoVal(minBidAmount)
-
-  const isEndingTimeout = isEnded ? 4000 : null
-  // useTimeout(() => {
-  //   console.log('timeout fired')
-  //   setIsEnding(false)
-  // }, isEndingTimeout)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const isMinBid = Number(bidAmount) >= minBidAmount
+
+  const isValidBid = bidAmount && isMinBid
+
+  const isValidChain = wagmiChain?.id === chainId
+
+  const handleCreateBid = async () => {
+    if (!isMinBid || !bidAmount || isLoading) return
+
+    try {
+      setIsLoading(true)
+
+      const config = await prepareWriteContract({
+        abi: auctionAbi,
+        address: auctionAddress as Address,
+        functionName: 'createBid',
+        args: [BigInt(currentAuction.token.tokenId)],
+        value: parseEther(bidAmount.toString()),
+      })
+      const tx = await writeContract(config)
+      if (tx?.hash) await waitForTransaction({ hash: tx.hash })
+      setBidAmount('')
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
 
   if (isEnded || isOver) {
     return (
@@ -446,15 +468,21 @@ const BidActionButton = ({
     )
   }
 
+  // const handleCreateBid = async () => {
+
+  //   if(!isMinBid)
+
+  // }
+
   return (
     <>
       <form style={{ marginLeft: 'auto' }}>
         <Box position="relative" mr={{ '@initial': 'x0', '@768': 'x2' }}>
           <input
             className={bidInput}
-            placeholder={`${formattedMinBid} ETH`}
+            placeholder={maxChar(`${minBidAmount} ETH`, 12)}
             type={'number'}
-            min={formattedMinBid}
+            min={minBidAmount}
             max={balance?.formatted}
             value={bidAmount}
             onChange={(e) => setBidAmount(e.target.value)}
@@ -478,15 +506,20 @@ const BidActionButton = ({
                 paddingLeft: 0,
                 paddingRight: 0,
               }}
-              onClick={() => setBidAmount(formattedMinBid)}
-              disabled={bidAmount >= formattedMinBid}
+              onClick={() => setBidAmount(minBidAmount.toString())}
+              disabled={Number(bidAmount) >= minBidAmount}
             >
               Min
             </Button>
           </Flex>
         </Box>
       </form>
-      <ContractButton handleClick={() => {}} borderRadius={'curved'}>
+      <ContractButton
+        borderRadius={'curved'}
+        disabled={!isValidBid || !isValidChain}
+        loading={isLoading}
+        handleClick={() => handleCreateBid()}
+      >
         Bid
       </ContractButton>
     </>

From 31e1a1beb0a4e9b7b7418c804b604bf5e878ced6 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 15:36:03 -0700
Subject: [PATCH 17/48] fix dashboard link

---
 apps/web/src/layouts/DefaultLayout/Nav.tsx    |  2 +-
 .../web/src/layouts/DefaultLayout/NavMenu.tsx |  2 +-
 apps/web/src/modules/dashboard/Dashboard.tsx  | 49 +------------------
 3 files changed, 3 insertions(+), 50 deletions(-)

diff --git a/apps/web/src/layouts/DefaultLayout/Nav.tsx b/apps/web/src/layouts/DefaultLayout/Nav.tsx
index 4c16430d..79953255 100644
--- a/apps/web/src/layouts/DefaultLayout/Nav.tsx
+++ b/apps/web/src/layouts/DefaultLayout/Nav.tsx
@@ -53,7 +53,7 @@ export const Nav = () => {
             <Link href={'/about'}>
               <Label className={navMenuItem}>About</Label>
             </Link>
-            <Link href={'/dashboard'}>
+            <Link href={'/'}>
               <Label className={navMenuItem}>Dashboard</Label>
             </Link>
             <Link href={'/explore'}>
diff --git a/apps/web/src/layouts/DefaultLayout/NavMenu.tsx b/apps/web/src/layouts/DefaultLayout/NavMenu.tsx
index 0c2b8841..ac373a39 100644
--- a/apps/web/src/layouts/DefaultLayout/NavMenu.tsx
+++ b/apps/web/src/layouts/DefaultLayout/NavMenu.tsx
@@ -376,7 +376,7 @@ export const NavMenu = () => {
                   </Text>
                 </Flex>
               </Link>
-              <Link href={'/dashboard'}>
+              <Link href={'/'}>
                 <Flex display="flex" align="center" justify={'center'} py={'x2'}>
                   <Text cursor={'pointer'} fontWeight={'display'}>
                     Dashboard
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 7f61b9f9..16a7d15d 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -178,46 +178,10 @@ const DashCountdown = ({
 const DaoAuctionCard = (
   props: DashboardDao & { userAddress: AddressType; handleMutate: () => void }
 ) => {
-  const {
-    currentAuction,
-    chainId,
-    auctionAddress,
-    userAddress,
-    auctionConfig,
-    handleMutate,
-    tokenAddress,
-  } = props
+  const { currentAuction, chainId, auctionAddress, handleMutate } = props
   const { name: chainName, icon: chainIcon } =
     PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
 
-  // const { data: auction } = useSWR(
-  //   [SWR_KEYS.AUCTION, chainId, auctionAddress],
-  //   (_, chainId, auctionAddress) =>
-  //     readContract({
-  //       abi: auctionAbi,
-  //       address: auctionAddress as AddressType,
-  //       functionName: 'auction',
-  //       chainId,
-  //     }),
-  //   { revalidateOnFocus: true }
-  // )
-
-  // const [liveTokenId, liveHighestBid, liveHighestBidder, _, liveEndTime, liveSettled] =
-  //   unpackOptionalArray(auction, 6)
-
-  // const { data: token } = useSWR(
-  //   [
-  //     `${SWR_KEYS.TOKEN}:${tokenAddress}:${liveTokenId}`,
-  //     chainId,
-  //     tokenAddress,
-  //     liveTokenId,
-  //   ],
-  //   (_, id) =>
-  //     axios
-  //       .get<TokenWithWinner>(`/api/dao/${chainId}/${tokenAddress}/${liveTokenId}`)
-  //       .then((x) => x.data)
-  // )
-
   const { endTime } = currentAuction
 
   const [isEnded, setIsEnded] = useState(false)
@@ -231,11 +195,6 @@ const DaoAuctionCard = (
     setIsEnded(true)
   }
 
-  // const isTokenActiveAuction =
-  //   !liveSettled &&
-  //   !!liveTokenId &&
-  //   liveTokenId.toString() == currentAuction.token.tokenId
-
   useContractEvent({
     address: auctionAddress,
     abi: auctionAbi,
@@ -468,12 +427,6 @@ const BidActionButton = ({
     )
   }
 
-  // const handleCreateBid = async () => {
-
-  //   if(!isMinBid)
-
-  // }
-
   return (
     <>
       <form style={{ marginLeft: 'auto' }}>

From 955b05ab2fd9067bfe8cffe9d92b7380f8d658f6 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 16:18:04 -0700
Subject: [PATCH 18/48] big refactor

---
 .../src/modules/dashboard/BidActionButton.tsx | 134 ++++++
 .../src/modules/dashboard/DaoAuctionCard.tsx  | 166 +++++++
 .../src/modules/dashboard/DaoProposalCard.tsx |  28 ++
 .../src/modules/dashboard/DaoProposals.tsx    |  55 +++
 apps/web/src/modules/dashboard/Dashboard.tsx  | 404 +-----------------
 .../src/modules/dashboard/DashboardLayout.tsx |  40 ++
 apps/web/src/utils/helpers.ts                 |   7 +
 7 files changed, 450 insertions(+), 384 deletions(-)
 create mode 100644 apps/web/src/modules/dashboard/BidActionButton.tsx
 create mode 100644 apps/web/src/modules/dashboard/DaoAuctionCard.tsx
 create mode 100644 apps/web/src/modules/dashboard/DaoProposalCard.tsx
 create mode 100644 apps/web/src/modules/dashboard/DaoProposals.tsx
 create mode 100644 apps/web/src/modules/dashboard/DashboardLayout.tsx

diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
new file mode 100644
index 00000000..51389e83
--- /dev/null
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -0,0 +1,134 @@
+import { Box, Button, Flex } from '@zoralabs/zord'
+import React, { useState } from 'react'
+import { Address, parseEther } from 'viem'
+import { useBalance, useNetwork } from 'wagmi'
+import { prepareWriteContract, waitForTransaction, writeContract } from 'wagmi/actions'
+
+import { ContractButton } from 'src/components/ContractButton'
+import { auctionAbi } from 'src/data/contract/abis'
+
+
+
+
+import { AddressType } from 'src/typings'
+import { maxChar } from 'src/utils/helpers'
+
+import { useMinBidIncrement } from '../auction'
+import { Settle } from '../auction/components/CurrentAuction/Settle'
+import { DashboardDao } from './Dashboard'
+import { bidInput } from './dashboard.css'
+
+export const BidActionButton = ({
+  userAddress,
+  chainId,
+  auctionConfig,
+  currentAuction,
+  isEnded,
+  auctionAddress,
+  isOver,
+}: DashboardDao & { userAddress: AddressType; isOver: boolean; isEnded: boolean }) => {
+  const { data: balance } = useBalance({ address: userAddress, chainId })
+  const { minimumBidIncrement, reservePrice } = auctionConfig
+  const { highestBid } = currentAuction
+  const { chain: wagmiChain } = useNetwork()
+  const { minBidAmount } = useMinBidIncrement({
+    highestBid: highestBid?.amount ? BigInt(highestBid?.amount) : undefined,
+    reservePrice: BigInt(reservePrice),
+    minBidIncrement: BigInt(minimumBidIncrement),
+  })
+
+  const [bidAmount, setBidAmount] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+
+  const isMinBid = Number(bidAmount) >= minBidAmount
+
+  const isValidBid = bidAmount && isMinBid
+
+  const isValidChain = wagmiChain?.id === chainId
+
+  const handleCreateBid = async () => {
+    if (!isMinBid || !bidAmount || isLoading) return
+
+    try {
+      setIsLoading(true)
+
+      const config = await prepareWriteContract({
+        abi: auctionAbi,
+        address: auctionAddress as Address,
+        functionName: 'createBid',
+        args: [BigInt(currentAuction.token.tokenId)],
+        value: parseEther(bidAmount.toString()),
+      })
+      const tx = await writeContract(config)
+      if (tx?.hash) await waitForTransaction({ hash: tx.hash })
+      setBidAmount('')
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (isEnded || isOver) {
+    return (
+      <Box ml={'auto'}>
+        <Settle
+          isEnding={false}
+          owner={highestBid?.bidder}
+          externalAuctionAddress={auctionAddress}
+        />
+      </Box>
+    )
+  }
+
+  return (
+    <>
+      <form style={{ marginLeft: 'auto' }}>
+        <Box position="relative" mr={{ '@initial': 'x0', '@768': 'x2' }}>
+          <input
+            className={bidInput}
+            placeholder={maxChar(`${minBidAmount} ETH`, 12)}
+            type={'number'}
+            min={minBidAmount}
+            max={balance?.formatted}
+            value={bidAmount}
+            onChange={(e) => setBidAmount(e.target.value)}
+          />
+          <Flex
+            position="absolute"
+            style={{ top: 0, right: 0, bottom: 0 }}
+            align={'center'}
+            justify={'center'}
+          >
+            <Button
+              height={'100%'}
+              mr={'x4'}
+              px={'x0'}
+              fontWeight={'label'}
+              size="sm"
+              variant="ghost"
+              style={{
+                minWidth: 'fit-content',
+                fontWeight: 500,
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={() => setBidAmount(minBidAmount.toString())}
+              disabled={Number(bidAmount) >= minBidAmount}
+            >
+              Min
+            </Button>
+          </Flex>
+        </Box>
+      </form>
+      <ContractButton
+        borderRadius={'curved'}
+        disabled={!isValidBid || !isValidChain}
+        loading={isLoading}
+        handleClick={() => handleCreateBid()}
+      >
+        Bid
+      </ContractButton>
+    </>
+  )
+}
diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
new file mode 100644
index 00000000..64cacea3
--- /dev/null
+++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
@@ -0,0 +1,166 @@
+import { Box, Flex, Text } from '@zoralabs/zord'
+import dayjs from 'dayjs'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React, { useState } from 'react'
+import { formatEther } from 'viem'
+import { useContractEvent } from 'wagmi'
+
+import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
+import { auctionAbi } from 'src/data/contract/abis'
+import { useCountdown, useIsMounted } from 'src/hooks'
+import { AddressType } from 'src/typings'
+
+import { BidActionButton } from './BidActionButton'
+import { DashboardDao } from './Dashboard'
+
+export const DaoAuctionCard = (
+  props: DashboardDao & { userAddress: AddressType; handleMutate: () => void }
+) => {
+  const { currentAuction, chainId, auctionAddress, handleMutate, tokenAddress } = props
+  const { name: chainName, icon: chainIcon } =
+    PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
+  const router = useRouter()
+  const { endTime } = currentAuction
+
+  const [isEnded, setIsEnded] = useState(false)
+
+  const bidText = currentAuction.highestBid?.amount
+    ? formatEther(BigInt(currentAuction.highestBid.amount))
+    : 'N/A'
+
+  const isOver = !!endTime ? dayjs.unix(Date.now() / 1000) >= dayjs.unix(endTime) : true
+  const onEnd = () => {
+    setIsEnded(true)
+  }
+
+  useContractEvent({
+    address: auctionAddress,
+    abi: auctionAbi,
+    eventName: 'AuctionCreated',
+    chainId,
+    listener: async () => {
+      console.log('AuctionCreated')
+      setTimeout(() => {
+        handleMutate()
+      }, 3000)
+    },
+  })
+  useContractEvent({
+    address: auctionAddress,
+    abi: auctionAbi,
+    eventName: 'AuctionBid',
+    chainId,
+    listener: async () => {
+      setTimeout(() => {
+        handleMutate()
+      }, 3000)
+    },
+  })
+
+  return (
+    <Link
+      href={`/dao/${
+        PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
+      }/${tokenAddress}`}
+      passHref
+    >
+      <Flex
+        mb={'x4'}
+        w={'100%'}
+        borderColor={'border'}
+        borderStyle={'solid'}
+        borderRadius={'curved'}
+        borderWidth={'normal'}
+        cursor={'pointer'}
+        py={{ '@initial': 'x2', '@768': 'x3' }}
+        px={{ '@initial': 'x2', '@768': 'x6' }}
+        align={'center'}
+      >
+        <Box mr="x6">
+          <Image
+            src={currentAuction.token.image}
+            layout="fixed"
+            objectFit="contain"
+            style={{ borderRadius: '12px' }}
+            alt=""
+            height={64}
+            width={64}
+          />
+        </Box>
+        <Flex
+          direction={'column'}
+          style={{
+            width: '30%',
+          }}
+        >
+          <Flex mb="x1" align="center">
+            {chainIcon && (
+              <Image
+                src={chainIcon}
+                layout="fixed"
+                objectFit="contain"
+                style={{ borderRadius: '12px', maxHeight: '22px' }}
+                alt=""
+                height={22}
+                width={22}
+              />
+            )}
+            <Text fontSize={16} color="text3" ml={'x1'}>
+              {chainName}
+            </Text>
+          </Flex>
+          <Text fontSize={20} fontWeight="label">
+            {currentAuction.token.name}
+          </Text>
+        </Flex>
+        <Flex
+          direction={'column'}
+          style={{
+            width: '15%',
+          }}
+        >
+          <Text fontSize={16} color="text3" mb={'x1'}>
+            Current Bid
+          </Text>
+          <Text fontSize={18} fontWeight="label">
+            {bidText}
+          </Text>
+        </Flex>
+        <Flex
+          direction={'column'}
+          style={{
+            width: '15%',
+          }}
+        >
+          <Text fontSize={16} color="text3" mb={'x1'}>
+            Ends In
+          </Text>
+          <DashCountdown endTime={endTime} onEnd={onEnd} isOver={isOver} />
+        </Flex>
+        <BidActionButton {...props} isOver={isOver} isEnded={isEnded} />
+      </Flex>
+    </Link>
+  )
+}
+
+const DashCountdown = ({
+  endTime,
+  onEnd,
+  isOver,
+}: {
+  endTime: string | null
+  onEnd: () => void
+  isOver: boolean
+}) => {
+  const { countdownString } = useCountdown(Number(endTime), onEnd)
+  const isMounted = useIsMounted()
+  const countdownText = !endTime || isOver ? 'N/A' : countdownString
+  if (!isMounted) return null
+  return (
+    <Text fontSize={18} fontWeight="label">
+      {countdownText}
+    </Text>
+  )
+}
diff --git a/apps/web/src/modules/dashboard/DaoProposalCard.tsx b/apps/web/src/modules/dashboard/DaoProposalCard.tsx
new file mode 100644
index 00000000..6b7b1ef0
--- /dev/null
+++ b/apps/web/src/modules/dashboard/DaoProposalCard.tsx
@@ -0,0 +1,28 @@
+import { Flex, Text } from '@zoralabs/zord'
+
+import { ProposalFragment } from 'src/data/subgraph/sdk.generated'
+
+export const DaoProposalCard = ({ title, proposalNumber }: ProposalFragment) => {
+  return (
+    <Flex
+      mb={'x4'}
+      w={'100%'}
+      borderColor={'border'}
+      borderStyle={'solid'}
+      borderRadius={'curved'}
+      borderWidth={'normal'}
+      cursor={'pointer'}
+      py={{ '@initial': 'x2', '@768': 'x6' }}
+      px={{ '@initial': 'x2', '@768': 'x3' }}
+    >
+      <Flex>
+        <Text fontSize={18} fontWeight="label" color={'text4'} mr={'x4'}>
+          {proposalNumber}
+        </Text>
+        <Text fontSize={18} fontWeight="label">
+          {title}
+        </Text>
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/apps/web/src/modules/dashboard/DaoProposals.tsx b/apps/web/src/modules/dashboard/DaoProposals.tsx
new file mode 100644
index 00000000..3a9dba0b
--- /dev/null
+++ b/apps/web/src/modules/dashboard/DaoProposals.tsx
@@ -0,0 +1,55 @@
+import { Box, Button, Flex, Text } from '@zoralabs/zord'
+import { getFetchableUrl } from 'ipfs-service'
+import Image from 'next/image'
+import React from 'react'
+
+import { Avatar } from 'src/components/Avatar'
+
+import { DaoProposalCard } from './DaoProposalCard'
+import { DashboardDao } from './Dashboard'
+
+export const DaoProposals = ({
+  daoImage,
+  tokenAddress,
+  name,
+  proposals,
+}: DashboardDao) => {
+  const daoImageSrc = React.useMemo(() => {
+    return daoImage ? getFetchableUrl(daoImage) : null
+  }, [daoImage])
+  return (
+    <Box>
+      <Flex justify={'space-between'} mb={'x6'}>
+        <Flex align={'center'}>
+          {daoImageSrc ? (
+            <Box mr="x4">
+              <Image
+                src={daoImageSrc}
+                layout="fixed"
+                objectFit="contain"
+                style={{ borderRadius: '12px' }}
+                alt=""
+                height={48}
+                width={48}
+              />
+            </Box>
+          ) : (
+            <Box mr="x4" borderRadius="phat">
+              <Avatar address={tokenAddress ?? undefined} size="52" />
+            </Box>
+          )}
+          <Text fontSize={20} fontWeight="label">
+            {name}
+          </Text>
+        </Flex>
+
+        <Button variant="outline" borderRadius="curved">
+          Submit Proposal
+        </Button>
+      </Flex>
+      {proposals.map((proposal) => (
+        <DaoProposalCard key={proposal.proposalNumber} {...proposal} />
+      ))}
+    </Box>
+  )
+}
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 16a7d15d..362ba45d 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,20 +1,9 @@
-import { Box, Button, Flex, Text } from '@zoralabs/zord'
 import axios from 'axios'
-import dayjs from 'dayjs'
-import { getFetchableUrl } from 'ipfs-service'
-import Image from 'next/image'
 import React, { useState } from 'react'
 import useSWR, { mutate } from 'swr'
-import { Address, formatEther, parseEther } from 'viem'
-import { useAccount, useBalance, useContractEvent, useNetwork } from 'wagmi'
-import { prepareWriteContract, waitForTransaction, writeContract } from 'wagmi/actions'
+import { useAccount } from 'wagmi'
 
-import { Avatar } from 'src/components/Avatar'
-import { ContractButton } from 'src/components/ContractButton'
-import { Meta } from 'src/components/Meta'
-import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
 import SWR_KEYS from 'src/constants/swrKeys'
-import { auctionAbi } from 'src/data/contract/abis'
 import {
   ProposalState,
   getProposalState,
@@ -24,19 +13,11 @@ import {
   DaoFragment,
   ProposalFragment,
 } from 'src/data/subgraph/sdk.generated'
-import { useCountdown, useIsMounted } from 'src/hooks'
-import { AddressType, CHAIN_ID } from 'src/typings'
+import { CHAIN_ID } from 'src/typings'
 
-import { useMinBidIncrement } from '../auction'
-import { Settle } from '../auction/components/CurrentAuction/Settle'
-import { bidInput } from './dashboard.css'
-
-function maxChar(str: string, maxLength: number) {
-  if (str.length <= maxLength) {
-    return str
-  }
-  return str.slice(0, maxLength) + '...'
-}
+import { DaoAuctionCard } from './DaoAuctionCard'
+import { DaoProposals } from './DaoProposals'
+import { DashboardLayout } from './DashboardLayout'
 
 const ACTIVE_PROPOSAL_STATES = [
   ProposalState.Active,
@@ -44,7 +25,7 @@ const ACTIVE_PROPOSAL_STATES = [
   ProposalState.Queued,
 ]
 
-type DashboardDao = DaoFragment & {
+export type DashboardDao = DaoFragment & {
   chainId: CHAIN_ID
   daoImage: string
   auctionConfig: {
@@ -114,367 +95,22 @@ const Dashboard = () => {
   }
 
   return (
-    <Flex
-      minH={'100vh'}
-      pt={{ '@initial': 'x20', '@768': 'x32' }}
-      w={'100%'}
-      justify="center"
-    >
-      <Meta title={'Dashboard'} type={'website'} slug={'/'} />
-      <Box w="100%" style={{ maxWidth: 912 }}>
-        <Text fontSize={35} fontWeight={'display'} mb={'x10'}>
-          Dashboard
-        </Text>
-        <Box mb={'x8'}>
-          <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
-            DAOs
-          </Text>
-          {data?.map((dao) => (
-            <DaoAuctionCard
-              key={`${dao.tokenAddress}:${dao.currentAuction.token.tokenId}`}
-              {...dao}
-              userAddress={address}
-              handleMutate={handleMutate}
-            />
-          ))}
-        </Box>
-        <Box>
-          <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
-            Proposals
-          </Text>
-          {data
-            .filter((dao) => dao.proposals.length)
-            .map((dao) => (
-              <DaoProposals key={dao.tokenAddress} {...dao} />
-            ))}
-        </Box>
-      </Box>
-    </Flex>
-  )
-}
-
-export default Dashboard
-
-const DashCountdown = ({
-  endTime,
-  onEnd,
-  isOver,
-}: {
-  endTime: string | null
-  onEnd: () => void
-  isOver: boolean
-}) => {
-  const { countdownString } = useCountdown(Number(endTime), onEnd)
-  const isMounted = useIsMounted()
-  const countdownText = !endTime || isOver ? 'N/A' : countdownString
-  if (!isMounted) return null
-  return (
-    <Text fontSize={18} fontWeight="label">
-      {countdownText}
-    </Text>
-  )
-}
-
-const DaoAuctionCard = (
-  props: DashboardDao & { userAddress: AddressType; handleMutate: () => void }
-) => {
-  const { currentAuction, chainId, auctionAddress, handleMutate } = props
-  const { name: chainName, icon: chainIcon } =
-    PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
-
-  const { endTime } = currentAuction
-
-  const [isEnded, setIsEnded] = useState(false)
-
-  const bidText = currentAuction.highestBid?.amount
-    ? formatEther(BigInt(currentAuction.highestBid.amount))
-    : 'N/A'
-
-  const isOver = !!endTime ? dayjs.unix(Date.now() / 1000) >= dayjs.unix(endTime) : true
-  const onEnd = () => {
-    setIsEnded(true)
-  }
-
-  useContractEvent({
-    address: auctionAddress,
-    abi: auctionAbi,
-    eventName: 'AuctionCreated',
-    chainId,
-    listener: async () => {
-      console.log('AuctionCreated')
-      setTimeout(() => {
-        handleMutate()
-      }, 3000)
-    },
-  })
-  useContractEvent({
-    address: auctionAddress,
-    abi: auctionAbi,
-    eventName: 'AuctionBid',
-    chainId,
-    listener: async () => {
-      setTimeout(() => {
-        handleMutate()
-      }, 3000)
-    },
-  })
-
-  return (
-    <Flex
-      mb={'x4'}
-      w={'100%'}
-      borderColor={'border'}
-      borderStyle={'solid'}
-      borderRadius={'curved'}
-      borderWidth={'normal'}
-      cursor={'pointer'}
-      py={{ '@initial': 'x2', '@768': 'x3' }}
-      px={{ '@initial': 'x2', '@768': 'x6' }}
-      align={'center'}
-    >
-      <Box mr="x6">
-        <Image
-          src={currentAuction.token.image}
-          layout="fixed"
-          objectFit="contain"
-          style={{ borderRadius: '12px' }}
-          alt=""
-          height={64}
-          width={64}
+    <DashboardLayout
+      auctionCards={data?.map((dao) => (
+        <DaoAuctionCard
+          key={`${dao.tokenAddress}:${dao.currentAuction.token.tokenId}`}
+          {...dao}
+          userAddress={address}
+          handleMutate={handleMutate}
         />
-      </Box>
-      <Flex
-        direction={'column'}
-        style={{
-          width: '30%',
-        }}
-      >
-        <Flex mb="x1" align="center">
-          {chainIcon && (
-            <Image
-              src={chainIcon}
-              layout="fixed"
-              objectFit="contain"
-              style={{ borderRadius: '12px', maxHeight: '22px' }}
-              alt=""
-              height={22}
-              width={22}
-            />
-          )}
-          <Text fontSize={16} color="text3" ml={'x1'}>
-            {chainName}
-          </Text>
-        </Flex>
-        <Text fontSize={20} fontWeight="label">
-          {currentAuction.token.name}
-        </Text>
-      </Flex>
-      <Flex
-        direction={'column'}
-        style={{
-          width: '15%',
-        }}
-      >
-        <Text fontSize={16} color="text3" mb={'x1'}>
-          Current Bid
-        </Text>
-        <Text fontSize={18} fontWeight="label">
-          {bidText}
-        </Text>
-      </Flex>
-      <Flex
-        direction={'column'}
-        style={{
-          width: '15%',
-        }}
-      >
-        <Text fontSize={16} color="text3" mb={'x1'}>
-          Ends In
-        </Text>
-        <DashCountdown endTime={endTime} onEnd={onEnd} isOver={isOver} />
-      </Flex>
-      <BidActionButton {...props} isOver={isOver} isEnded={isEnded} />
-    </Flex>
-  )
-}
-
-const DaoProposals = ({ daoImage, tokenAddress, name, proposals }: DashboardDao) => {
-  const daoImageSrc = React.useMemo(() => {
-    return daoImage ? getFetchableUrl(daoImage) : null
-  }, [daoImage])
-  return (
-    <Box>
-      <Flex justify={'space-between'} mb={'x6'}>
-        <Flex align={'center'}>
-          {daoImageSrc ? (
-            <Box mr="x4">
-              <Image
-                src={daoImageSrc}
-                layout="fixed"
-                objectFit="contain"
-                style={{ borderRadius: '12px' }}
-                alt=""
-                height={48}
-                width={48}
-              />
-            </Box>
-          ) : (
-            <Box mr="x4" borderRadius="phat">
-              <Avatar address={tokenAddress ?? undefined} size="52" />
-            </Box>
-          )}
-          <Text fontSize={20} fontWeight="label">
-            {name}
-          </Text>
-        </Flex>
-
-        <Button variant="outline" borderRadius="curved">
-          Submit Proposal
-        </Button>
-      </Flex>
-      {proposals.map((proposal) => (
-        <DaoProposalCard key={proposal.proposalNumber} {...proposal} />
       ))}
-    </Box>
-  )
-}
-
-const DaoProposalCard = ({ title, proposalNumber }: ProposalFragment) => {
-  return (
-    <Flex
-      mb={'x4'}
-      w={'100%'}
-      borderColor={'border'}
-      borderStyle={'solid'}
-      borderRadius={'curved'}
-      borderWidth={'normal'}
-      cursor={'pointer'}
-      py={{ '@initial': 'x2', '@768': 'x6' }}
-      px={{ '@initial': 'x2', '@768': 'x3' }}
-    >
-      <Flex>
-        <Text fontSize={18} fontWeight="label" color={'text4'} mr={'x4'}>
-          {proposalNumber}
-        </Text>
-        <Text fontSize={18} fontWeight="label">
-          {title}
-        </Text>
-      </Flex>
-    </Flex>
+      daoProposals={data
+        .filter((dao) => dao.proposals.length)
+        .map((dao) => (
+          <DaoProposals key={dao.tokenAddress} {...dao} />
+        ))}
+    />
   )
 }
 
-const BidActionButton = ({
-  userAddress,
-  chainId,
-  auctionConfig,
-  currentAuction,
-  isEnded,
-  auctionAddress,
-  isOver,
-}: DashboardDao & { userAddress: AddressType; isOver: boolean; isEnded: boolean }) => {
-  const { data: balance } = useBalance({ address: userAddress, chainId })
-  const { minimumBidIncrement, reservePrice } = auctionConfig
-  const { highestBid } = currentAuction
-  const { chain: wagmiChain } = useNetwork()
-  const { minBidAmount } = useMinBidIncrement({
-    highestBid: highestBid?.amount ? BigInt(highestBid?.amount) : undefined,
-    reservePrice: BigInt(reservePrice),
-    minBidIncrement: BigInt(minimumBidIncrement),
-  })
-
-  const [bidAmount, setBidAmount] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-
-  const isMinBid = Number(bidAmount) >= minBidAmount
-
-  const isValidBid = bidAmount && isMinBid
-
-  const isValidChain = wagmiChain?.id === chainId
-
-  const handleCreateBid = async () => {
-    if (!isMinBid || !bidAmount || isLoading) return
-
-    try {
-      setIsLoading(true)
-
-      const config = await prepareWriteContract({
-        abi: auctionAbi,
-        address: auctionAddress as Address,
-        functionName: 'createBid',
-        args: [BigInt(currentAuction.token.tokenId)],
-        value: parseEther(bidAmount.toString()),
-      })
-      const tx = await writeContract(config)
-      if (tx?.hash) await waitForTransaction({ hash: tx.hash })
-      setBidAmount('')
-    } catch (error) {
-      console.error(error)
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  if (isEnded || isOver) {
-    return (
-      <Box ml={'auto'}>
-        <Settle
-          isEnding={false}
-          owner={highestBid?.bidder}
-          externalAuctionAddress={auctionAddress}
-        />
-      </Box>
-    )
-  }
-
-  return (
-    <>
-      <form style={{ marginLeft: 'auto' }}>
-        <Box position="relative" mr={{ '@initial': 'x0', '@768': 'x2' }}>
-          <input
-            className={bidInput}
-            placeholder={maxChar(`${minBidAmount} ETH`, 12)}
-            type={'number'}
-            min={minBidAmount}
-            max={balance?.formatted}
-            value={bidAmount}
-            onChange={(e) => setBidAmount(e.target.value)}
-          />
-          <Flex
-            position="absolute"
-            style={{ top: 0, right: 0, bottom: 0 }}
-            align={'center'}
-            justify={'center'}
-          >
-            <Button
-              height={'100%'}
-              mr={'x4'}
-              px={'x0'}
-              fontWeight={'label'}
-              size="sm"
-              variant="ghost"
-              style={{
-                minWidth: 'fit-content',
-                fontWeight: 500,
-                paddingLeft: 0,
-                paddingRight: 0,
-              }}
-              onClick={() => setBidAmount(minBidAmount.toString())}
-              disabled={Number(bidAmount) >= minBidAmount}
-            >
-              Min
-            </Button>
-          </Flex>
-        </Box>
-      </form>
-      <ContractButton
-        borderRadius={'curved'}
-        disabled={!isValidBid || !isValidChain}
-        loading={isLoading}
-        handleClick={() => handleCreateBid()}
-      >
-        Bid
-      </ContractButton>
-    </>
-  )
-}
+export default Dashboard
diff --git a/apps/web/src/modules/dashboard/DashboardLayout.tsx b/apps/web/src/modules/dashboard/DashboardLayout.tsx
new file mode 100644
index 00000000..2eda5c3e
--- /dev/null
+++ b/apps/web/src/modules/dashboard/DashboardLayout.tsx
@@ -0,0 +1,40 @@
+import { Box, Flex, Text } from '@zoralabs/zord'
+import React, { ReactNode } from 'react'
+
+import { Meta } from 'src/components/Meta'
+
+export const DashboardLayout = ({
+  auctionCards,
+  daoProposals,
+}: {
+  auctionCards: ReactNode
+  daoProposals: ReactNode
+}) => {
+  return (
+    <Flex
+      minH={'100vh'}
+      pt={{ '@initial': 'x20', '@768': 'x32' }}
+      w={'100%'}
+      justify="center"
+    >
+      <Meta title={'Dashboard'} type={'website'} slug={'/'} />
+      <Box w="100%" style={{ maxWidth: 912 }}>
+        <Text fontSize={35} fontWeight={'display'} mb={'x10'}>
+          Dashboard
+        </Text>
+        <Box mb={'x8'}>
+          <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
+            DAOs
+          </Text>
+          {auctionCards}
+        </Box>
+        <Box>
+          <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
+            Proposals
+          </Text>
+          {daoProposals}
+        </Box>
+      </Box>
+    </Flex>
+  )
+}
diff --git a/apps/web/src/utils/helpers.ts b/apps/web/src/utils/helpers.ts
index 6dae7743..77a467f8 100644
--- a/apps/web/src/utils/helpers.ts
+++ b/apps/web/src/utils/helpers.ts
@@ -261,3 +261,10 @@ export function unpackOptionalArray<T = []>(
   }
   return array
 }
+
+export function maxChar(str: string, maxLength: number) {
+  if (str.length <= maxLength) {
+    return str
+  }
+  return str.slice(0, maxLength) + '...'
+}

From 84d845cf003a72699c5ba5902cb4fe6b257d1fef Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 16:25:34 -0700
Subject: [PATCH 19/48] handle no active proposals

---
 .../src/modules/dashboard/BidActionButton.tsx |  4 ---
 apps/web/src/modules/dashboard/Dashboard.tsx  | 35 ++++++++++++++++---
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
index 51389e83..0771384d 100644
--- a/apps/web/src/modules/dashboard/BidActionButton.tsx
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -6,10 +6,6 @@ import { prepareWriteContract, waitForTransaction, writeContract } from 'wagmi/a
 
 import { ContractButton } from 'src/components/ContractButton'
 import { auctionAbi } from 'src/data/contract/abis'
-
-
-
-
 import { AddressType } from 'src/typings'
 import { maxChar } from 'src/utils/helpers'
 
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 362ba45d..deb894c9 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,3 +1,4 @@
+import { Flex, Text } from '@zoralabs/zord'
 import axios from 'axios'
 import React, { useState } from 'react'
 import useSWR, { mutate } from 'swr'
@@ -94,6 +95,8 @@ const Dashboard = () => {
     setMutating(false)
   }
 
+  const hasLiveProposals = data.some((dao) => dao.proposals.length)
+
   return (
     <DashboardLayout
       auctionCards={data?.map((dao) => (
@@ -104,11 +107,33 @@ const Dashboard = () => {
           handleMutate={handleMutate}
         />
       ))}
-      daoProposals={data
-        .filter((dao) => dao.proposals.length)
-        .map((dao) => (
-          <DaoProposals key={dao.tokenAddress} {...dao} />
-        ))}
+      daoProposals={
+        hasLiveProposals ? (
+          data
+            .filter((dao) => dao.proposals.length)
+            .map((dao) => <DaoProposals key={dao.tokenAddress} {...dao} />)
+        ) : (
+          <Flex
+            borderRadius={'phat'}
+            borderStyle={'solid'}
+            height={'x32'}
+            width={'100%'}
+            borderWidth={'normal'}
+            borderColor={'border'}
+            direction={'column'}
+            justify={'center'}
+            align={'center'}
+          >
+            <Text fontSize={20} fontWeight={'display'} mb="x4" color={'text3'}>
+              No Active Proposals
+            </Text>
+            <Text color={'text3'}>
+              Currently, none of your DAOs have proposals that are in active, queue, or
+              pending states. Check back later!
+            </Text>
+          </Flex>
+        )
+      }
     />
   )
 }

From 7886557c0096f9b77d603acde6eccb14764b73f0 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 16:39:20 -0700
Subject: [PATCH 20/48] handle no proposals, refactor layout

---
 apps/web/src/modules/dashboard/Dashboard.tsx  |  6 ++--
 .../src/modules/dashboard/DashboardLayout.tsx |  2 +-
 apps/web/src/modules/dashboard/Display.tsx    | 31 +++++++++++++++++++
 3 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/src/modules/dashboard/Display.tsx

diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index deb894c9..069dcdaa 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -77,15 +77,15 @@ const Dashboard = () => {
   const [mutating, setMutating] = useState(false)
 
   if (error) {
-    return <div>error</div>
+    return <div>Error</div>
   }
   if (isValidating && !mutating) {
     return <div>loading</div>
   }
   if (!address) {
-    return <div>no address</div>
+    return <div>No address</div>
   }
-  if (!data) {
+  if (!data?.length) {
     return <div>no data</div>
   }
 
diff --git a/apps/web/src/modules/dashboard/DashboardLayout.tsx b/apps/web/src/modules/dashboard/DashboardLayout.tsx
index 2eda5c3e..11c393a5 100644
--- a/apps/web/src/modules/dashboard/DashboardLayout.tsx
+++ b/apps/web/src/modules/dashboard/DashboardLayout.tsx
@@ -8,7 +8,7 @@ export const DashboardLayout = ({
   daoProposals,
 }: {
   auctionCards: ReactNode
-  daoProposals: ReactNode
+  daoProposals?: ReactNode
 }) => {
   return (
     <Flex
diff --git a/apps/web/src/modules/dashboard/Display.tsx b/apps/web/src/modules/dashboard/Display.tsx
new file mode 100644
index 00000000..8e7182ee
--- /dev/null
+++ b/apps/web/src/modules/dashboard/Display.tsx
@@ -0,0 +1,31 @@
+import { BoxProps, Flex, Text } from '@zoralabs/zord'
+import React from 'react'
+
+export const DisplayPanel = ({
+  title,
+  description,
+  height = 'x64',
+}: {
+  title: string
+  description: string
+  height?: BoxProps['height']
+}) => {
+  return (
+    <Flex
+      borderRadius={'phat'}
+      borderStyle={'solid'}
+      height={height}
+      width={'100%'}
+      borderWidth={'normal'}
+      borderColor={'border'}
+      direction={'column'}
+      justify={'center'}
+      align={'center'}
+    >
+      <Text fontSize={28} fontWeight={'display'} mb="x4" color={'text3'}>
+        {title}
+      </Text>
+      <Text color={'text3'}>{description}</Text>
+    </Flex>
+  )
+}

From aa4b69821ad35f5b2d89259b21f6114345a5cf77 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 16:58:38 -0700
Subject: [PATCH 21/48] proposal links

---
 .../src/modules/dashboard/DaoAuctionCard.tsx  |  9 +---
 .../src/modules/dashboard/DaoProposalCard.tsx | 52 ++++++++++++-------
 .../src/modules/dashboard/DaoProposals.tsx    | 25 +++++++--
 3 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
index 64cacea3..04b1f771 100644
--- a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
@@ -58,14 +58,9 @@ export const DaoAuctionCard = (
       }, 3000)
     },
   })
-
+  const currentChainSlug = PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
   return (
-    <Link
-      href={`/dao/${
-        PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
-      }/${tokenAddress}`}
-      passHref
-    >
+    <Link href={`/dao/${currentChainSlug}/${tokenAddress}`} passHref>
       <Flex
         mb={'x4'}
         w={'100%'}
diff --git a/apps/web/src/modules/dashboard/DaoProposalCard.tsx b/apps/web/src/modules/dashboard/DaoProposalCard.tsx
index 6b7b1ef0..e2a9a375 100644
--- a/apps/web/src/modules/dashboard/DaoProposalCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoProposalCard.tsx
@@ -1,28 +1,42 @@
 import { Flex, Text } from '@zoralabs/zord'
+import Link from 'next/link'
 
+import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
 import { ProposalFragment } from 'src/data/subgraph/sdk.generated'
+import { AddressType, CHAIN_ID } from 'src/typings'
 
-export const DaoProposalCard = ({ title, proposalNumber }: ProposalFragment) => {
+export const DaoProposalCard = ({
+  title,
+  proposalNumber,
+  tokenAddress,
+  chainId,
+}: ProposalFragment & { chainId: CHAIN_ID; tokenAddress: AddressType }) => {
+  const currentChainSlug = PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
   return (
-    <Flex
-      mb={'x4'}
-      w={'100%'}
-      borderColor={'border'}
-      borderStyle={'solid'}
-      borderRadius={'curved'}
-      borderWidth={'normal'}
-      cursor={'pointer'}
-      py={{ '@initial': 'x2', '@768': 'x6' }}
-      px={{ '@initial': 'x2', '@768': 'x3' }}
+    <Link
+      href={`/dao/${currentChainSlug}/${tokenAddress}/vote/${proposalNumber}`}
+      passHref
     >
-      <Flex>
-        <Text fontSize={18} fontWeight="label" color={'text4'} mr={'x4'}>
-          {proposalNumber}
-        </Text>
-        <Text fontSize={18} fontWeight="label">
-          {title}
-        </Text>
+      <Flex
+        mb={'x4'}
+        w={'100%'}
+        borderColor={'border'}
+        borderStyle={'solid'}
+        borderRadius={'curved'}
+        borderWidth={'normal'}
+        cursor={'pointer'}
+        py={{ '@initial': 'x2', '@768': 'x6' }}
+        px={{ '@initial': 'x2', '@768': 'x3' }}
+      >
+        <Flex>
+          <Text fontSize={18} fontWeight="label" color={'text4'} mr={'x4'}>
+            {proposalNumber}
+          </Text>
+          <Text fontSize={18} fontWeight="label">
+            {title}
+          </Text>
+        </Flex>
       </Flex>
-    </Flex>
+    </Link>
   )
 }
diff --git a/apps/web/src/modules/dashboard/DaoProposals.tsx b/apps/web/src/modules/dashboard/DaoProposals.tsx
index 3a9dba0b..7e0b38fd 100644
--- a/apps/web/src/modules/dashboard/DaoProposals.tsx
+++ b/apps/web/src/modules/dashboard/DaoProposals.tsx
@@ -1,9 +1,11 @@
 import { Box, Button, Flex, Text } from '@zoralabs/zord'
 import { getFetchableUrl } from 'ipfs-service'
 import Image from 'next/image'
+import { useRouter } from 'next/router'
 import React from 'react'
 
 import { Avatar } from 'src/components/Avatar'
+import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
 
 import { DaoProposalCard } from './DaoProposalCard'
 import { DashboardDao } from './Dashboard'
@@ -13,12 +15,18 @@ export const DaoProposals = ({
   tokenAddress,
   name,
   proposals,
+  chainId,
 }: DashboardDao) => {
   const daoImageSrc = React.useMemo(() => {
     return daoImage ? getFetchableUrl(daoImage) : null
   }, [daoImage])
+
+  const router = useRouter()
+
+  const currentChainSlug = PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
+
   return (
-    <Box>
+    <Box mb={'x10'}>
       <Flex justify={'space-between'} mb={'x6'}>
         <Flex align={'center'}>
           {daoImageSrc ? (
@@ -43,12 +51,23 @@ export const DaoProposals = ({
           </Text>
         </Flex>
 
-        <Button variant="outline" borderRadius="curved">
+        <Button
+          variant="outline"
+          borderRadius="curved"
+          onClick={() =>
+            router.push(`/dao/${currentChainSlug}/${tokenAddress}/proposal/create`)
+          }
+        >
           Submit Proposal
         </Button>
       </Flex>
       {proposals.map((proposal) => (
-        <DaoProposalCard key={proposal.proposalNumber} {...proposal} />
+        <DaoProposalCard
+          key={proposal.proposalNumber}
+          {...proposal}
+          chainId={chainId}
+          tokenAddress={tokenAddress}
+        />
       ))}
     </Box>
   )

From 6ec74bf753d0fe0bee71223d3bae4ddd027f8c1a Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 17:14:19 -0700
Subject: [PATCH 22/48] proposal status

---
 .../subgraph/queries/dashboardQuery.graphql   |  3 +++
 apps/web/src/data/subgraph/sdk.generated.ts   |  9 ++++---
 .../src/modules/dashboard/DaoProposalCard.tsx | 25 ++++++++++++++++---
 .../src/modules/dashboard/DaoProposals.tsx    |  1 +
 apps/web/src/modules/dashboard/Dashboard.tsx  |  4 +--
 5 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/data/subgraph/queries/dashboardQuery.graphql b/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
index c7e98434..86f124a8 100644
--- a/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
+++ b/apps/web/src/data/subgraph/queries/dashboardQuery.graphql
@@ -15,6 +15,9 @@ query dashboard($where: DAOTokenOwner_filter, $first: Int, $skip: Int) {
         orderDirection: desc
       ) {
         ...Proposal
+        voteEnd
+        voteStart
+        expiresAt
       }
       currentAuction {
         ...CurrentAuction
diff --git a/apps/web/src/data/subgraph/sdk.generated.ts b/apps/web/src/data/subgraph/sdk.generated.ts
index 388320ff..ac83a9fc 100644
--- a/apps/web/src/data/subgraph/sdk.generated.ts
+++ b/apps/web/src/data/subgraph/sdk.generated.ts
@@ -2071,13 +2071,15 @@ export type DashboardQuery = {
       }
       proposals: Array<{
         __typename?: 'Proposal'
+        voteEnd: any
+        voteStart: any
+        expiresAt?: any | null
         abstainVotes: number
         againstVotes: number
         calldatas?: string | null
         description?: string | null
         descriptionHash: any
         executableFrom?: any | null
-        expiresAt?: any | null
         forVotes: number
         proposalId: any
         proposalNumber: number
@@ -2088,8 +2090,6 @@ export type DashboardQuery = {
         timeCreated: any
         title?: string | null
         values: Array<any>
-        voteEnd: any
-        voteStart: any
         snapshotBlockNumber: any
         transactionHash: any
         dao: { __typename?: 'DAO'; governorAddress: any; tokenAddress: any }
@@ -2565,6 +2565,9 @@ export const DashboardDocument = gql`
           orderDirection: desc
         ) {
           ...Proposal
+          voteEnd
+          voteStart
+          expiresAt
         }
         currentAuction {
           ...CurrentAuction
diff --git a/apps/web/src/modules/dashboard/DaoProposalCard.tsx b/apps/web/src/modules/dashboard/DaoProposalCard.tsx
index e2a9a375..7882d0fc 100644
--- a/apps/web/src/modules/dashboard/DaoProposalCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoProposalCard.tsx
@@ -2,15 +2,26 @@ import { Flex, Text } from '@zoralabs/zord'
 import Link from 'next/link'
 
 import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
+import { ProposalState } from 'src/data/contract/requests/getProposalState'
 import { ProposalFragment } from 'src/data/subgraph/sdk.generated'
 import { AddressType, CHAIN_ID } from 'src/typings'
 
+import { ProposalStatus } from '../proposal/components/ProposalStatus'
+
 export const DaoProposalCard = ({
   title,
   proposalNumber,
   tokenAddress,
   chainId,
-}: ProposalFragment & { chainId: CHAIN_ID; tokenAddress: AddressType }) => {
+  proposalState,
+  voteEnd,
+  voteStart,
+  expiresAt,
+}: ProposalFragment & {
+  chainId: CHAIN_ID
+  tokenAddress: AddressType
+  proposalState: ProposalState
+}) => {
   const currentChainSlug = PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
   return (
     <Link
@@ -28,13 +39,21 @@ export const DaoProposalCard = ({
         py={{ '@initial': 'x2', '@768': 'x6' }}
         px={{ '@initial': 'x2', '@768': 'x3' }}
       >
-        <Flex>
+        <Flex align={'center'} w="100%">
           <Text fontSize={18} fontWeight="label" color={'text4'} mr={'x4'}>
             {proposalNumber}
           </Text>
-          <Text fontSize={18} fontWeight="label">
+          <Text fontSize={18} fontWeight="label" mr={'auto'}>
             {title}
           </Text>
+          <ProposalStatus
+            state={proposalState}
+            voteEnd={voteEnd}
+            voteStart={voteStart}
+            expiresAt={expiresAt}
+            flipped
+            showTime
+          />
         </Flex>
       </Flex>
     </Link>
diff --git a/apps/web/src/modules/dashboard/DaoProposals.tsx b/apps/web/src/modules/dashboard/DaoProposals.tsx
index 7e0b38fd..cfcd31b5 100644
--- a/apps/web/src/modules/dashboard/DaoProposals.tsx
+++ b/apps/web/src/modules/dashboard/DaoProposals.tsx
@@ -67,6 +67,7 @@ export const DaoProposals = ({
           {...proposal}
           chainId={chainId}
           tokenAddress={tokenAddress}
+          proposalState={proposal.proposalState}
         />
       ))}
     </Box>
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 069dcdaa..e6e63b7c 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -33,7 +33,7 @@ export type DashboardDao = DaoFragment & {
     minimumBidIncrement: string
     reservePrice: string
   }
-  proposals: ProposalFragment[]
+  proposals: (ProposalFragment & { proposalState: ProposalState })[]
   currentAuction: CurrentAuctionFragment
 }
 
@@ -45,7 +45,7 @@ const fetchDaoProposalState = async (dao: DashboardDao) => {
         proposal.dao.governorAddress,
         proposal.proposalId
       )
-      return { ...proposal, proposalState }
+      return { ...proposal, proposalState: proposalState }
     })
   )
   return {

From e0156c2f1711362d679477f487e4bc193d016699 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Mon, 11 Sep 2023 17:38:06 -0700
Subject: [PATCH 23/48] handle loading, create skeletons

---
 apps/web/src/modules/dashboard/Dashboard.tsx  | 19 ++++++++-
 apps/web/src/modules/dashboard/Skeletons.tsx  | 41 +++++++++++++++++++
 .../src/modules/dashboard/dashboard.css.ts    | 27 ++++++++++++
 3 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/modules/dashboard/Skeletons.tsx

diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index e6e63b7c..737d7d8b 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@zoralabs/zord'
+import { Box, Flex, Text } from '@zoralabs/zord'
 import axios from 'axios'
 import React, { useState } from 'react'
 import useSWR, { mutate } from 'swr'
@@ -19,6 +19,7 @@ import { CHAIN_ID } from 'src/typings'
 import { DaoAuctionCard } from './DaoAuctionCard'
 import { DaoProposals } from './DaoProposals'
 import { DashboardLayout } from './DashboardLayout'
+import { AuctionCardSkeleton, DAOCardSkeleton, ProposalCardSkeleton } from './Skeletons'
 
 const ACTIVE_PROPOSAL_STATES = [
   ProposalState.Active,
@@ -80,7 +81,21 @@ const Dashboard = () => {
     return <div>Error</div>
   }
   if (isValidating && !mutating) {
-    return <div>loading</div>
+    return (
+      <DashboardLayout
+        auctionCards={Array.from({ length: 3 }).map((_, i) => (
+          <AuctionCardSkeleton key={`auctionCardSkeleton:${i}`} />
+        ))}
+        daoProposals={
+          <Box>
+            <DAOCardSkeleton />
+            {Array.from({ length: 2 }).map((_, i) => (
+              <ProposalCardSkeleton key={`daoCardSkeleton:${i}`} />
+            ))}
+          </Box>
+        }
+      />
+    )
   }
   if (!address) {
     return <div>No address</div>
diff --git a/apps/web/src/modules/dashboard/Skeletons.tsx b/apps/web/src/modules/dashboard/Skeletons.tsx
new file mode 100644
index 00000000..649337ab
--- /dev/null
+++ b/apps/web/src/modules/dashboard/Skeletons.tsx
@@ -0,0 +1,41 @@
+import { Box } from '@zoralabs/zord'
+import React from 'react'
+
+import {
+  auctionCardSkeleton,
+  daoCardSkeleton,
+  proposalCardSkeleton,
+} from './dashboard.css'
+
+export const AuctionCardSkeleton = () => {
+  return (
+    <Box
+      className={auctionCardSkeleton}
+      borderRadius="curved"
+      backgroundColor="background2"
+      mb="x3"
+    />
+  )
+}
+
+export const DAOCardSkeleton = () => {
+  return (
+    <Box
+      className={daoCardSkeleton}
+      borderRadius="curved"
+      backgroundColor="background2"
+      mb="x3"
+    />
+  )
+}
+
+export const ProposalCardSkeleton = () => {
+  return (
+    <Box
+      className={proposalCardSkeleton}
+      borderRadius="curved"
+      backgroundColor="background2"
+      mb="x3"
+    />
+  )
+}
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index a954934d..e41f8f58 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -1,6 +1,8 @@
 import { style } from '@vanilla-extract/css'
 import { atoms, theme } from '@zoralabs/zord'
 
+import { skeletonAnimation } from 'src/styles/animations.css'
+
 export const bidInput = style([
   {
     width: '100%',
@@ -25,3 +27,28 @@ export const bidInput = style([
     lineHeight: 24,
   }),
 ])
+
+export const feed = style([
+  atoms({
+    m: 'auto',
+  }),
+  {
+    maxWidth: 912,
+  },
+])
+
+export const auctionCardSkeleton = style({
+  animation: skeletonAnimation,
+  height: '96px',
+})
+
+export const daoCardSkeleton = style({
+  animation: skeletonAnimation,
+  height: '52px',
+  width: '175px',
+})
+
+export const proposalCardSkeleton = style({
+  animation: skeletonAnimation,
+  height: '88px',
+})

From 952c875ee8fb15ae47bce9c25900f5cfc706c4d3 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Sun, 17 Sep 2023 16:18:21 -0700
Subject: [PATCH 24/48] fix propogate event bug

---
 apps/web/src/components/ContractButton.tsx    |   6 +-
 .../src/modules/dashboard/BidActionButton.tsx |  11 +-
 .../src/modules/dashboard/DaoAuctionCard.tsx  | 148 +++++++++---------
 3 files changed, 87 insertions(+), 78 deletions(-)

diff --git a/apps/web/src/components/ContractButton.tsx b/apps/web/src/components/ContractButton.tsx
index 1e7cf8d7..ac6fbb4b 100644
--- a/apps/web/src/components/ContractButton.tsx
+++ b/apps/web/src/components/ContractButton.tsx
@@ -6,7 +6,7 @@ import { useBridgeModal } from 'src/hooks/useBridgeModal'
 import { useChainStore } from 'src/stores/useChainStore'
 
 interface ContractButtonProps extends ButtonProps {
-  handleClick: () => void
+  handleClick: (e?: any) => void
 }
 
 export const ContractButton = ({
@@ -28,11 +28,11 @@ export const ContractButton = ({
 
   const handleSwitchNetwork = () => switchNetwork?.(appChain.id)
 
-  const handleClickWithValidation = () => {
+  const handleClickWithValidation = (e?: any) => {
     if (!userAddress) return openConnectModal?.()
     if (canUserBridge && userBalance?.decimals === 0) return openBridgeModal()
     if (userChain?.id !== appChain.id) return handleSwitchNetwork()
-    handleClick()
+    handleClick(e)
   }
 
   return (
diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
index 0771384d..76165ee4 100644
--- a/apps/web/src/modules/dashboard/BidActionButton.tsx
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -89,6 +89,7 @@ export const BidActionButton = ({
             max={balance?.formatted}
             value={bidAmount}
             onChange={(e) => setBidAmount(e.target.value)}
+            onClick={(e) => e.stopPropagation()}
           />
           <Flex
             position="absolute"
@@ -109,7 +110,10 @@ export const BidActionButton = ({
                 paddingLeft: 0,
                 paddingRight: 0,
               }}
-              onClick={() => setBidAmount(minBidAmount.toString())}
+              onClick={(e: any) => {
+                e.stopPropagation()
+                setBidAmount(minBidAmount.toString())
+              }}
               disabled={Number(bidAmount) >= minBidAmount}
             >
               Min
@@ -121,7 +125,10 @@ export const BidActionButton = ({
         borderRadius={'curved'}
         disabled={!isValidBid || !isValidChain}
         loading={isLoading}
-        handleClick={() => handleCreateBid()}
+        handleClick={(e: any) => {
+          e.stopPropagation()
+          handleCreateBid()
+        }}
       >
         Bid
       </ContractButton>
diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
index 04b1f771..1fe14f58 100644
--- a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
@@ -1,7 +1,6 @@
 import { Box, Flex, Text } from '@zoralabs/zord'
 import dayjs from 'dayjs'
 import Image from 'next/image'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { formatEther } from 'viem'
@@ -59,84 +58,87 @@ export const DaoAuctionCard = (
     },
   })
   const currentChainSlug = PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
+
+  const handleSelectAuction = () => {
+    router.push(`/dao/${currentChainSlug}/${tokenAddress}`)
+  }
   return (
-    <Link href={`/dao/${currentChainSlug}/${tokenAddress}`} passHref>
+    <Flex
+      onClick={handleSelectAuction}
+      mb={'x4'}
+      w={'100%'}
+      borderColor={'border'}
+      borderStyle={'solid'}
+      borderRadius={'curved'}
+      borderWidth={'normal'}
+      cursor={'pointer'}
+      py={{ '@initial': 'x2', '@768': 'x3' }}
+      px={{ '@initial': 'x2', '@768': 'x6' }}
+      align={'center'}
+    >
+      <Box mr="x6">
+        <Image
+          src={currentAuction.token.image}
+          layout="fixed"
+          objectFit="contain"
+          style={{ borderRadius: '12px' }}
+          alt=""
+          height={64}
+          width={64}
+        />
+      </Box>
       <Flex
-        mb={'x4'}
-        w={'100%'}
-        borderColor={'border'}
-        borderStyle={'solid'}
-        borderRadius={'curved'}
-        borderWidth={'normal'}
-        cursor={'pointer'}
-        py={{ '@initial': 'x2', '@768': 'x3' }}
-        px={{ '@initial': 'x2', '@768': 'x6' }}
-        align={'center'}
+        direction={'column'}
+        style={{
+          width: '30%',
+        }}
       >
-        <Box mr="x6">
-          <Image
-            src={currentAuction.token.image}
-            layout="fixed"
-            objectFit="contain"
-            style={{ borderRadius: '12px' }}
-            alt=""
-            height={64}
-            width={64}
-          />
-        </Box>
-        <Flex
-          direction={'column'}
-          style={{
-            width: '30%',
-          }}
-        >
-          <Flex mb="x1" align="center">
-            {chainIcon && (
-              <Image
-                src={chainIcon}
-                layout="fixed"
-                objectFit="contain"
-                style={{ borderRadius: '12px', maxHeight: '22px' }}
-                alt=""
-                height={22}
-                width={22}
-              />
-            )}
-            <Text fontSize={16} color="text3" ml={'x1'}>
-              {chainName}
-            </Text>
-          </Flex>
-          <Text fontSize={20} fontWeight="label">
-            {currentAuction.token.name}
-          </Text>
-        </Flex>
-        <Flex
-          direction={'column'}
-          style={{
-            width: '15%',
-          }}
-        >
-          <Text fontSize={16} color="text3" mb={'x1'}>
-            Current Bid
-          </Text>
-          <Text fontSize={18} fontWeight="label">
-            {bidText}
-          </Text>
-        </Flex>
-        <Flex
-          direction={'column'}
-          style={{
-            width: '15%',
-          }}
-        >
-          <Text fontSize={16} color="text3" mb={'x1'}>
-            Ends In
+        <Flex mb="x1" align="center">
+          {chainIcon && (
+            <Image
+              src={chainIcon}
+              layout="fixed"
+              objectFit="contain"
+              style={{ borderRadius: '12px', maxHeight: '22px' }}
+              alt=""
+              height={22}
+              width={22}
+            />
+          )}
+          <Text fontSize={16} color="text3" ml={'x1'}>
+            {chainName}
           </Text>
-          <DashCountdown endTime={endTime} onEnd={onEnd} isOver={isOver} />
         </Flex>
-        <BidActionButton {...props} isOver={isOver} isEnded={isEnded} />
+        <Text fontSize={20} fontWeight="label">
+          {currentAuction.token.name}
+        </Text>
+      </Flex>
+      <Flex
+        direction={'column'}
+        style={{
+          width: '15%',
+        }}
+      >
+        <Text fontSize={16} color="text3" mb={'x1'}>
+          Current Bid
+        </Text>
+        <Text fontSize={18} fontWeight="label">
+          {bidText}
+        </Text>
+      </Flex>
+      <Flex
+        direction={'column'}
+        style={{
+          width: '15%',
+        }}
+      >
+        <Text fontSize={16} color="text3" mb={'x1'}>
+          Ends In
+        </Text>
+        <DashCountdown endTime={endTime} onEnd={onEnd} isOver={isOver} />
       </Flex>
-    </Link>
+      <BidActionButton {...props} isOver={isOver} isEnded={isEnded} />
+    </Flex>
   )
 }
 

From 800b792f7b6f7e132e183c66c2e3463a53f28783 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Sun, 17 Sep 2023 17:10:01 -0700
Subject: [PATCH 25/48] fix propagation drag effect bug

---
 apps/web/src/modules/dashboard/BidActionButton.tsx | 3 +++
 apps/web/src/modules/dashboard/DaoAuctionCard.tsx  | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
index 76165ee4..39791439 100644
--- a/apps/web/src/modules/dashboard/BidActionButton.tsx
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -35,6 +35,7 @@ export const BidActionButton = ({
 
   const [bidAmount, setBidAmount] = useState('')
   const [isLoading, setIsLoading] = useState(false)
+  const [showTooltip, setShowTooltip] = useState(false)
 
   const isMinBid = Number(bidAmount) >= minBidAmount
 
@@ -55,6 +56,7 @@ export const BidActionButton = ({
         args: [BigInt(currentAuction.token.tokenId)],
         value: parseEther(bidAmount.toString()),
       })
+      console.log('config', config)
       const tx = await writeContract(config)
       if (tx?.hash) await waitForTransaction({ hash: tx.hash })
       setBidAmount('')
@@ -129,6 +131,7 @@ export const BidActionButton = ({
           e.stopPropagation()
           handleCreateBid()
         }}
+        position={'relative'}
       >
         Bid
       </ContractButton>
diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
index 1fe14f58..4b90d807 100644
--- a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
@@ -64,19 +64,17 @@ export const DaoAuctionCard = (
   }
   return (
     <Flex
-      onClick={handleSelectAuction}
       mb={'x4'}
       w={'100%'}
       borderColor={'border'}
       borderStyle={'solid'}
       borderRadius={'curved'}
       borderWidth={'normal'}
-      cursor={'pointer'}
       py={{ '@initial': 'x2', '@768': 'x3' }}
       px={{ '@initial': 'x2', '@768': 'x6' }}
       align={'center'}
     >
-      <Box mr="x6">
+      <Box pr="x6" onClick={handleSelectAuction} cursor="pointer">
         <Image
           src={currentAuction.token.image}
           layout="fixed"
@@ -92,6 +90,8 @@ export const DaoAuctionCard = (
         style={{
           width: '30%',
         }}
+        onClick={handleSelectAuction}
+        cursor="pointer"
       >
         <Flex mb="x1" align="center">
           {chainIcon && (

From c9963eea371b99d783cde74308e5ed75410476a8 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Sun, 17 Sep 2023 17:40:26 -0700
Subject: [PATCH 26/48] settle button styles

---
 .../modules/auction/components/Auction.css.ts |  5 ++++
 .../components/CurrentAuction/Settle.tsx      | 29 ++++++++++++++-----
 .../src/modules/dashboard/BidActionButton.tsx | 24 ++++++++++-----
 .../src/modules/dashboard/dashboard.css.ts    |  1 -
 4 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/modules/auction/components/Auction.css.ts b/apps/web/src/modules/auction/components/Auction.css.ts
index 04fc48b2..bf037c5c 100644
--- a/apps/web/src/modules/auction/components/Auction.css.ts
+++ b/apps/web/src/modules/auction/components/Auction.css.ts
@@ -157,6 +157,10 @@ export const auctionActionButton = style({
   height: 56,
 })
 
+export const auctionActionDash = style({
+  borderRadius: '12px',
+})
+
 export const auctionActionButtonVariants = styleVariants({
   bid: [auctionActionButton],
   bidding: [
@@ -168,6 +172,7 @@ export const auctionActionButtonVariants = styleVariants({
     auctionActionButton,
     { width: '100%', background: '#F1F1F1', color: '#808080' },
   ],
+  dashSettle: [auctionActionDash, { width: '100%' }],
 })
 
 export const bidForm = style({
diff --git a/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx b/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
index 0ec26842..cf688f13 100644
--- a/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
+++ b/apps/web/src/modules/auction/components/CurrentAuction/Settle.tsx
@@ -21,13 +21,15 @@ interface SettleProps {
   collectionAddress?: string
   owner?: string | undefined
   externalAuctionAddress?: AddressType
-  customStyles?: {
-    settle: string
-    settling: string
-  }
+  compact?: boolean
 }
 
-export const Settle = ({ isEnding, owner, externalAuctionAddress }: SettleProps) => {
+export const Settle = ({
+  isEnding,
+  owner,
+  externalAuctionAddress,
+  compact = false,
+}: SettleProps) => {
   const chain = useChainStore((x) => x.chain)
   const addresses = useDaoStore?.((state) => state.addresses) || {}
 
@@ -81,7 +83,15 @@ export const Settle = ({ isEnding, owner, externalAuctionAddress }: SettleProps)
   if (settling) {
     return (
       <Flex direction="column" align="center" width={'100%'}>
-        <Button disabled className={auctionActionButtonVariants['settling']}>
+        <Button
+          disabled
+          className={
+            compact
+              ? auctionActionButtonVariants['dashSettle']
+              : auctionActionButtonVariants['settling']
+          }
+          variant={compact ? 'outline' : 'primary'}
+        >
           Settling
         </Button>
       </Flex>
@@ -92,7 +102,12 @@ export const Settle = ({ isEnding, owner, externalAuctionAddress }: SettleProps)
     <Flex direction="column" align="center" width={'100%'}>
       <ContractButton
         handleClick={handleSettle}
-        className={auctionActionButtonVariants['settle']}
+        className={
+          compact
+            ? auctionActionButtonVariants['dashSettle']
+            : auctionActionButtonVariants['settle']
+        }
+        variant={compact ? 'outline' : 'primary'}
       >
         {isWinner ? 'Claim NFT' : 'Start next auction'}
       </ContractButton>
diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
index 39791439..fd3bd888 100644
--- a/apps/web/src/modules/dashboard/BidActionButton.tsx
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -69,19 +69,31 @@ export const BidActionButton = ({
 
   if (isEnded || isOver) {
     return (
-      <Box ml={'auto'}>
+      <Box
+        ml={'auto'}
+        style={{
+          maxWidth: '230px',
+          width: '100%',
+        }}
+      >
         <Settle
           isEnding={false}
           owner={highestBid?.bidder}
           externalAuctionAddress={auctionAddress}
+          compact={true}
         />
       </Box>
     )
   }
 
   return (
-    <>
-      <form style={{ marginLeft: 'auto' }}>
+    <Flex
+      ml="auto"
+      style={{
+        width: '230px',
+      }}
+    >
+      <form>
         <Box position="relative" mr={{ '@initial': 'x0', '@768': 'x2' }}>
           <input
             className={bidInput}
@@ -113,7 +125,6 @@ export const BidActionButton = ({
                 paddingRight: 0,
               }}
               onClick={(e: any) => {
-                e.stopPropagation()
                 setBidAmount(minBidAmount.toString())
               }}
               disabled={Number(bidAmount) >= minBidAmount}
@@ -127,14 +138,13 @@ export const BidActionButton = ({
         borderRadius={'curved'}
         disabled={!isValidBid || !isValidChain}
         loading={isLoading}
-        handleClick={(e: any) => {
-          e.stopPropagation()
+        handleClick={() => {
           handleCreateBid()
         }}
         position={'relative'}
       >
         Bid
       </ContractButton>
-    </>
+    </Flex>
   )
 }
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index e41f8f58..9c14f0dc 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -6,7 +6,6 @@ import { skeletonAnimation } from 'src/styles/animations.css'
 export const bidInput = style([
   {
     width: '100%',
-    maxWidth: '150px',
     border: 'none',
     borderRadius: '12px',
     height: '48px',

From 4e65b51cf71f24888a3d3233612bb6b95f5a5794 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Sun, 17 Sep 2023 17:45:33 -0700
Subject: [PATCH 27/48] expand section paddings

---
 apps/web/src/modules/dashboard/DashboardLayout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/modules/dashboard/DashboardLayout.tsx b/apps/web/src/modules/dashboard/DashboardLayout.tsx
index 11c393a5..cbd697a5 100644
--- a/apps/web/src/modules/dashboard/DashboardLayout.tsx
+++ b/apps/web/src/modules/dashboard/DashboardLayout.tsx
@@ -19,10 +19,10 @@ export const DashboardLayout = ({
     >
       <Meta title={'Dashboard'} type={'website'} slug={'/'} />
       <Box w="100%" style={{ maxWidth: 912 }}>
-        <Text fontSize={35} fontWeight={'display'} mb={'x10'}>
+        <Text fontSize={35} fontWeight={'display'} mb={'x12'}>
           Dashboard
         </Text>
-        <Box mb={'x8'}>
+        <Box mb={'x12'}>
           <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
             DAOs
           </Text>

From 890e83603231fe820ae869379fd56759046b79d8 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Wed, 20 Sep 2023 23:46:27 -0700
Subject: [PATCH 28/48] mobile for daoAuctionCards

---
 .../src/modules/dashboard/BidActionButton.tsx |  77 ++++-------
 .../src/modules/dashboard/DaoAuctionCard.tsx  | 129 ++++++++----------
 .../src/modules/dashboard/dashboard.css.ts    | 120 ++++++++++++++++
 3 files changed, 203 insertions(+), 123 deletions(-)

diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
index fd3bd888..91e0f9b2 100644
--- a/apps/web/src/modules/dashboard/BidActionButton.tsx
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex } from '@zoralabs/zord'
+import { Box, Button } from '@zoralabs/zord'
 import React, { useState } from 'react'
 import { Address, parseEther } from 'viem'
 import { useBalance, useNetwork } from 'wagmi'
@@ -12,7 +12,7 @@ import { maxChar } from 'src/utils/helpers'
 import { useMinBidIncrement } from '../auction'
 import { Settle } from '../auction/components/CurrentAuction/Settle'
 import { DashboardDao } from './Dashboard'
-import { bidInput } from './dashboard.css'
+import { bidButton, bidForm, bidInput, inputBox, minButton } from './dashboard.css'
 
 export const BidActionButton = ({
   userAddress,
@@ -69,32 +69,19 @@ export const BidActionButton = ({
 
   if (isEnded || isOver) {
     return (
-      <Box
-        ml={'auto'}
-        style={{
-          maxWidth: '230px',
-          width: '100%',
-        }}
-      >
-        <Settle
-          isEnding={false}
-          owner={highestBid?.bidder}
-          externalAuctionAddress={auctionAddress}
-          compact={true}
-        />
-      </Box>
+      <Settle
+        isEnding={false}
+        owner={highestBid?.bidder}
+        externalAuctionAddress={auctionAddress}
+        compact={true}
+      />
     )
   }
 
   return (
-    <Flex
-      ml="auto"
-      style={{
-        width: '230px',
-      }}
-    >
-      <form>
-        <Box position="relative" mr={{ '@initial': 'x0', '@768': 'x2' }}>
+    <>
+      <form className={bidForm}>
+        <Box position="relative" mr={'x2'} className={inputBox}>
           <input
             className={bidInput}
             placeholder={maxChar(`${minBidAmount} ETH`, 12)}
@@ -105,33 +92,22 @@ export const BidActionButton = ({
             onChange={(e) => setBidAmount(e.target.value)}
             onClick={(e) => e.stopPropagation()}
           />
-          <Flex
+          <Button
             position="absolute"
-            style={{ top: 0, right: 0, bottom: 0 }}
-            align={'center'}
-            justify={'center'}
+            height={'100%'}
+            mr={'x4'}
+            px={'x0'}
+            fontWeight={'label'}
+            size="sm"
+            variant="ghost"
+            className={minButton}
+            onClick={() => {
+              setBidAmount(minBidAmount.toString())
+            }}
+            disabled={Number(bidAmount) >= minBidAmount}
           >
-            <Button
-              height={'100%'}
-              mr={'x4'}
-              px={'x0'}
-              fontWeight={'label'}
-              size="sm"
-              variant="ghost"
-              style={{
-                minWidth: 'fit-content',
-                fontWeight: 500,
-                paddingLeft: 0,
-                paddingRight: 0,
-              }}
-              onClick={(e: any) => {
-                setBidAmount(minBidAmount.toString())
-              }}
-              disabled={Number(bidAmount) >= minBidAmount}
-            >
-              Min
-            </Button>
-          </Flex>
+            Min
+          </Button>
         </Box>
       </form>
       <ContractButton
@@ -142,9 +118,10 @@ export const BidActionButton = ({
           handleCreateBid()
         }}
         position={'relative'}
+        className={bidButton}
       >
         Bid
       </ContractButton>
-    </Flex>
+    </>
   )
 }
diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
index 4b90d807..53ef7050 100644
--- a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
@@ -13,6 +13,16 @@ import { AddressType } from 'src/typings'
 
 import { BidActionButton } from './BidActionButton'
 import { DashboardDao } from './Dashboard'
+import {
+  auctionCardBrand,
+  bidBox,
+  daoAvatar,
+  daoAvatarBox,
+  daoTokenName,
+  outerAuctionCard,
+  stats,
+  statsBox,
+} from './dashboard.css'
 
 export const DaoAuctionCard = (
   props: DashboardDao & { userAddress: AddressType; handleMutate: () => void }
@@ -40,7 +50,6 @@ export const DaoAuctionCard = (
     eventName: 'AuctionCreated',
     chainId,
     listener: async () => {
-      console.log('AuctionCreated')
       setTimeout(() => {
         handleMutate()
       }, 3000)
@@ -63,81 +72,55 @@ export const DaoAuctionCard = (
     router.push(`/dao/${currentChainSlug}/${tokenAddress}`)
   }
   return (
-    <Flex
-      mb={'x4'}
-      w={'100%'}
-      borderColor={'border'}
-      borderStyle={'solid'}
-      borderRadius={'curved'}
-      borderWidth={'normal'}
-      py={{ '@initial': 'x2', '@768': 'x3' }}
-      px={{ '@initial': 'x2', '@768': 'x6' }}
-      align={'center'}
-    >
-      <Box pr="x6" onClick={handleSelectAuction} cursor="pointer">
-        <Image
-          src={currentAuction.token.image}
-          layout="fixed"
-          objectFit="contain"
-          style={{ borderRadius: '12px' }}
-          alt=""
-          height={64}
-          width={64}
-        />
-      </Box>
-      <Flex
-        direction={'column'}
-        style={{
-          width: '30%',
-        }}
-        onClick={handleSelectAuction}
-        cursor="pointer"
-      >
-        <Flex mb="x1" align="center">
-          {chainIcon && (
-            <Image
-              src={chainIcon}
-              layout="fixed"
-              objectFit="contain"
-              style={{ borderRadius: '12px', maxHeight: '22px' }}
-              alt=""
-              height={22}
-              width={22}
-            />
-          )}
-          <Text fontSize={16} color="text3" ml={'x1'}>
-            {chainName}
-          </Text>
-        </Flex>
-        <Text fontSize={20} fontWeight="label">
-          {currentAuction.token.name}
-        </Text>
+    <Flex className={outerAuctionCard}>
+      <Flex className={auctionCardBrand} onClick={handleSelectAuction}>
+        <Box className={daoAvatarBox}>
+          <Image
+            className={daoAvatar}
+            src={currentAuction.token.image}
+            layout="fixed"
+            alt=""
+          />
+        </Box>
+        <Box>
+          <Flex mb="x1" align="center">
+            {chainIcon && (
+              <Image
+                src={chainIcon}
+                layout="fixed"
+                objectFit="contain"
+                style={{ borderRadius: '12px', maxHeight: '22px' }}
+                alt=""
+                height={22}
+                width={22}
+              />
+            )}
+            <Text fontSize={16} color="text3" ml={'x1'}>
+              {chainName}
+            </Text>
+          </Flex>
+          <Text className={daoTokenName}>{currentAuction.token.name}</Text>
+        </Box>
       </Flex>
-      <Flex
-        direction={'column'}
-        style={{
-          width: '15%',
-        }}
-      >
-        <Text fontSize={16} color="text3" mb={'x1'}>
-          Current Bid
-        </Text>
-        <Text fontSize={18} fontWeight="label">
-          {bidText}
-        </Text>
+      <Flex className={statsBox}>
+        <Box className={stats}>
+          <Text fontSize={16} color="text3" mb={'x1'}>
+            Current Bid
+          </Text>
+          <Text fontSize={18} fontWeight="label">
+            {bidText}
+          </Text>
+        </Box>
+        <Box className={stats}>
+          <Text fontSize={16} color="text3" mb={'x1'}>
+            Ends In
+          </Text>
+          <DashCountdown endTime={endTime} onEnd={onEnd} isOver={isOver} />
+        </Box>
       </Flex>
-      <Flex
-        direction={'column'}
-        style={{
-          width: '15%',
-        }}
-      >
-        <Text fontSize={16} color="text3" mb={'x1'}>
-          Ends In
-        </Text>
-        <DashCountdown endTime={endTime} onEnd={onEnd} isOver={isOver} />
+      <Flex className={bidBox}>
+        <BidActionButton {...props} isOver={isOver} isEnded={isEnded} />
       </Flex>
-      <BidActionButton {...props} isOver={isOver} isEnded={isEnded} />
     </Flex>
   )
 }
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index 9c14f0dc..78515b94 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -3,6 +3,117 @@ import { atoms, theme } from '@zoralabs/zord'
 
 import { skeletonAnimation } from 'src/styles/animations.css'
 
+export const outerAuctionCard = style([
+  {
+    marginBottom: '24px',
+    width: '100%',
+    alignItems: 'center',
+    padding: '12px 24px',
+    '@media': {
+      'screen and (max-width: 768px)': {
+        flexDirection: 'column',
+        padding: '16px 8px',
+        alignItems: 'flex-start',
+        gap: '16px',
+      },
+    },
+  },
+  atoms({
+    borderColor: 'border',
+    borderStyle: 'solid',
+    borderRadius: 'curved',
+    borderWidth: 'normal',
+  }),
+])
+
+export const daoTokenName = style([
+  {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    width: '200px',
+    '@media': {
+      'screen and (max-width: 912px)': {
+        width: '150px',
+      },
+      'screen and (max-width:768px)': {
+        width: '220px',
+      },
+    },
+  },
+  atoms({
+    fontWeight: 'label',
+    fontSize: 20,
+  }),
+])
+
+export const daoAvatar = style({
+  objectFit: 'contain',
+  borderRadius: '16px',
+  height: 64,
+  width: 64,
+})
+export const daoAvatarBox = style({
+  marginRight: '24px',
+  width: '64px',
+})
+
+export const auctionCardBrand = style({
+  alignItems: 'center',
+  width: '40%',
+  cursor: 'pointer',
+  '@media': {
+    'screen and (max-width: 912px)': {
+      width: '35%',
+    },
+    'screen and (max-width: 768px)': {
+      width: '100%',
+    },
+  },
+})
+
+export const stats = style({
+  width: '50%',
+})
+export const statsBox = style({
+  width: '30%',
+  '@media': {
+    'screen and (max-width: 768px)': {
+      width: '80%',
+    },
+  },
+})
+
+export const bidBox = style({
+  marginLeft: 'auto',
+  width: '220px',
+  '@media': {
+    'screen and (max-width: 768px)': {
+      width: '100%',
+      marginLeft: 0,
+    },
+  },
+})
+
+export const bidForm = style({
+  width: '70%',
+  '@media': {
+    'screen and (max-width: 768px)': {
+      width: '80%',
+    },
+  },
+})
+export const inputBox = style({
+  // width: '80%',
+})
+export const bidButton = style({
+  width: '30%',
+  '@media': {
+    'screen and (max-width: 768px)': {
+      width: '20%',
+    },
+  },
+})
 export const bidInput = style([
   {
     width: '100%',
@@ -51,3 +162,12 @@ export const proposalCardSkeleton = style({
   animation: skeletonAnimation,
   height: '88px',
 })
+export const minButton = style({
+  minWidth: 'fit-content',
+  fontWeight: 500,
+  paddingLeft: 0,
+  paddingRight: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+})

From 0e383b48620e7b3e3949f434911aabfa8b830e89 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Wed, 20 Sep 2023 23:53:25 -0700
Subject: [PATCH 29/48] bid auctionbox corrections

---
 .../src/modules/dashboard/BidActionButton.tsx |  4 ++--
 .../src/modules/dashboard/dashboard.css.ts    | 23 ++++++-------------
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
index 91e0f9b2..8bccb77a 100644
--- a/apps/web/src/modules/dashboard/BidActionButton.tsx
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -12,7 +12,7 @@ import { maxChar } from 'src/utils/helpers'
 import { useMinBidIncrement } from '../auction'
 import { Settle } from '../auction/components/CurrentAuction/Settle'
 import { DashboardDao } from './Dashboard'
-import { bidButton, bidForm, bidInput, inputBox, minButton } from './dashboard.css'
+import { bidButton, bidForm, bidInput, minButton } from './dashboard.css'
 
 export const BidActionButton = ({
   userAddress,
@@ -81,7 +81,7 @@ export const BidActionButton = ({
   return (
     <>
       <form className={bidForm}>
-        <Box position="relative" mr={'x2'} className={inputBox}>
+        <Box position="relative" mr={'x2'}>
           <input
             className={bidInput}
             placeholder={maxChar(`${minBidAmount} ETH`, 12)}
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index 78515b94..dd91d90a 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -81,12 +81,15 @@ export const statsBox = style({
     'screen and (max-width: 768px)': {
       width: '80%',
     },
+    'screen and (max-width: 484px)': {
+      width: '100%',
+    },
   },
 })
 
 export const bidBox = style({
   marginLeft: 'auto',
-  width: '220px',
+  width: '250px',
   '@media': {
     'screen and (max-width: 768px)': {
       width: '100%',
@@ -96,23 +99,11 @@ export const bidBox = style({
 })
 
 export const bidForm = style({
-  width: '70%',
-  '@media': {
-    'screen and (max-width: 768px)': {
-      width: '80%',
-    },
-  },
-})
-export const inputBox = style({
-  // width: '80%',
+  width: '75%',
 })
+
 export const bidButton = style({
-  width: '30%',
-  '@media': {
-    'screen and (max-width: 768px)': {
-      width: '20%',
-    },
-  },
+  width: '25%',
 })
 export const bidInput = style([
   {

From d92ac8cb9a739d28c3f80133c5548917f7428fda Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 21 Sep 2023 00:13:14 -0700
Subject: [PATCH 30/48] mobile DAO proposal headers

---
 .../src/modules/dashboard/DaoProposals.tsx    | 26 +++++++++++--------
 .../src/modules/dashboard/dashboard.css.ts    | 11 ++++++++
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/modules/dashboard/DaoProposals.tsx b/apps/web/src/modules/dashboard/DaoProposals.tsx
index cfcd31b5..9b9eaee4 100644
--- a/apps/web/src/modules/dashboard/DaoProposals.tsx
+++ b/apps/web/src/modules/dashboard/DaoProposals.tsx
@@ -9,6 +9,7 @@ import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
 
 import { DaoProposalCard } from './DaoProposalCard'
 import { DashboardDao } from './Dashboard'
+import { daoName } from './dashboard.css'
 
 export const DaoProposals = ({
   daoImage,
@@ -27,7 +28,7 @@ export const DaoProposals = ({
 
   return (
     <Box mb={'x10'}>
-      <Flex justify={'space-between'} mb={'x6'}>
+      <Flex justify={'space-between'} mb={'x6'} align="center">
         <Flex align={'center'}>
           {daoImageSrc ? (
             <Box mr="x4">
@@ -46,7 +47,7 @@ export const DaoProposals = ({
               <Avatar address={tokenAddress ?? undefined} size="52" />
             </Box>
           )}
-          <Text fontSize={20} fontWeight="label">
+          <Text fontSize={20} fontWeight="label" className={daoName}>
             {name}
           </Text>
         </Flex>
@@ -54,6 +55,7 @@ export const DaoProposals = ({
         <Button
           variant="outline"
           borderRadius="curved"
+          size={'sm'}
           onClick={() =>
             router.push(`/dao/${currentChainSlug}/${tokenAddress}/proposal/create`)
           }
@@ -61,15 +63,17 @@ export const DaoProposals = ({
           Submit Proposal
         </Button>
       </Flex>
-      {proposals.map((proposal) => (
-        <DaoProposalCard
-          key={proposal.proposalNumber}
-          {...proposal}
-          chainId={chainId}
-          tokenAddress={tokenAddress}
-          proposalState={proposal.proposalState}
-        />
-      ))}
+      <Box>
+        {proposals.map((proposal) => (
+          <DaoProposalCard
+            key={proposal.proposalNumber}
+            {...proposal}
+            chainId={chainId}
+            tokenAddress={tokenAddress}
+            proposalState={proposal.proposalState}
+          />
+        ))}
+      </Box>
     </Box>
   )
 }
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index dd91d90a..0708dfc8 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -162,3 +162,14 @@ export const minButton = style({
   right: 0,
   bottom: 0,
 })
+export const daoName = style({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  width: 300,
+  '@media': {
+    'screen and (max-width: 484px)': {
+      width: '200px',
+    },
+  },
+})

From de516b6dd34b46951d60ac0b9459a293bffd18a5 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 21 Sep 2023 13:59:50 -0700
Subject: [PATCH 31/48] dash proposal card mobile

---
 .../src/modules/dashboard/DaoProposalCard.tsx | 42 +++++++++++++----
 .../src/modules/dashboard/DaoProposals.tsx    | 47 ++++++++++---------
 .../src/modules/dashboard/dashboard.css.ts    |  4 +-
 3 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/modules/dashboard/DaoProposalCard.tsx b/apps/web/src/modules/dashboard/DaoProposalCard.tsx
index 7882d0fc..6b1e0387 100644
--- a/apps/web/src/modules/dashboard/DaoProposalCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoProposalCard.tsx
@@ -30,22 +30,41 @@ export const DaoProposalCard = ({
     >
       <Flex
         mb={'x4'}
+        direction={{ '@initial': 'column-reverse', '@768': 'row' }}
         w={'100%'}
+        align={{ '@initial': 'flex-start', '@768': 'center' }}
         borderColor={'border'}
         borderStyle={'solid'}
         borderRadius={'curved'}
         borderWidth={'normal'}
         cursor={'pointer'}
-        py={{ '@initial': 'x2', '@768': 'x6' }}
-        px={{ '@initial': 'x2', '@768': 'x3' }}
+        py={{ '@initial': 'x3', '@768': 'x6' }}
+        px={{ '@initial': 'x6', '@768': 'x3' }}
       >
-        <Flex align={'center'} w="100%">
-          <Text fontSize={18} fontWeight="label" color={'text4'} mr={'x4'}>
-            {proposalNumber}
-          </Text>
-          <Text fontSize={18} fontWeight="label" mr={'auto'}>
-            {title}
-          </Text>
+        <Text
+          fontSize={18}
+          fontWeight="label"
+          color={'text4'}
+          mr={'x4'}
+          display={{ '@initial': 'none', '@768': 'flex' }}
+        >
+          {proposalNumber}
+        </Text>
+
+        <Text
+          fontSize={18}
+          fontWeight="label"
+          mr={'auto'}
+          mb={{ '@initial': 'x2', '@768': 'x0' }}
+        >
+          {title}
+        </Text>
+        <Flex
+          justify={'space-between'}
+          width={{ '@initial': '100%', '@768': 'unset' }}
+          align={'center'}
+          mb={{ '@initial': 'x3', '@768': 'x0' }}
+        >
           <ProposalStatus
             state={proposalState}
             voteEnd={voteEnd}
@@ -54,6 +73,11 @@ export const DaoProposalCard = ({
             flipped
             showTime
           />
+          <Flex display={{ '@initial': 'flex', '@768': 'none' }}>
+            <Text fontSize={18} fontWeight="label" color={'text4'}>
+              {proposalNumber}
+            </Text>
+          </Flex>
         </Flex>
       </Flex>
     </Link>
diff --git a/apps/web/src/modules/dashboard/DaoProposals.tsx b/apps/web/src/modules/dashboard/DaoProposals.tsx
index 9b9eaee4..03b63ed6 100644
--- a/apps/web/src/modules/dashboard/DaoProposals.tsx
+++ b/apps/web/src/modules/dashboard/DaoProposals.tsx
@@ -1,6 +1,7 @@
 import { Box, Button, Flex, Text } from '@zoralabs/zord'
 import { getFetchableUrl } from 'ipfs-service'
 import Image from 'next/image'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React from 'react'
 
@@ -29,28 +30,30 @@ export const DaoProposals = ({
   return (
     <Box mb={'x10'}>
       <Flex justify={'space-between'} mb={'x6'} align="center">
-        <Flex align={'center'}>
-          {daoImageSrc ? (
-            <Box mr="x4">
-              <Image
-                src={daoImageSrc}
-                layout="fixed"
-                objectFit="contain"
-                style={{ borderRadius: '12px' }}
-                alt=""
-                height={48}
-                width={48}
-              />
-            </Box>
-          ) : (
-            <Box mr="x4" borderRadius="phat">
-              <Avatar address={tokenAddress ?? undefined} size="52" />
-            </Box>
-          )}
-          <Text fontSize={20} fontWeight="label" className={daoName}>
-            {name}
-          </Text>
-        </Flex>
+        <Link href={`/dao/${currentChainSlug}/${tokenAddress}`} passHref>
+          <Flex align={'center'}>
+            {daoImageSrc ? (
+              <Box mr="x4">
+                <Image
+                  src={daoImageSrc}
+                  layout="fixed"
+                  objectFit="contain"
+                  style={{ borderRadius: '12px' }}
+                  alt=""
+                  height={48}
+                  width={48}
+                />
+              </Box>
+            ) : (
+              <Box mr="x4" borderRadius="phat">
+                <Avatar address={tokenAddress ?? undefined} size="52" />
+              </Box>
+            )}
+            <Text fontSize={20} fontWeight="label" className={daoName} mr={'x2'}>
+              {name}
+            </Text>
+          </Flex>
+        </Link>
 
         <Button
           variant="outline"
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index 0708dfc8..0d23a4ed 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -166,10 +166,10 @@ export const daoName = style({
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  width: 300,
+  maxWidth: '250px',
   '@media': {
     'screen and (max-width: 484px)': {
-      width: '200px',
+      maxWidth: '200px',
     },
   },
 })

From 320dfe54314a7717cca59ef5dcf098deb455bd48 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 21 Sep 2023 17:28:42 -0700
Subject: [PATCH 32/48] mobile layout

---
 apps/web/src/modules/dashboard/DashboardLayout.tsx        | 2 +-
 apps/web/src/modules/dashboard/dashboard.css.ts           | 5 +++++
 apps/web/src/modules/proposal/components/ProposalCard.tsx | 1 -
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/modules/dashboard/DashboardLayout.tsx b/apps/web/src/modules/dashboard/DashboardLayout.tsx
index cbd697a5..64ed83f2 100644
--- a/apps/web/src/modules/dashboard/DashboardLayout.tsx
+++ b/apps/web/src/modules/dashboard/DashboardLayout.tsx
@@ -13,7 +13,7 @@ export const DashboardLayout = ({
   return (
     <Flex
       minH={'100vh'}
-      pt={{ '@initial': 'x20', '@768': 'x32' }}
+      pt={{ '@initial': 'x8', '@480': 'x32' }}
       w={'100%'}
       justify="center"
     >
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index 0d23a4ed..660a4505 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -56,6 +56,11 @@ export const daoAvatar = style({
 export const daoAvatarBox = style({
   marginRight: '24px',
   width: '64px',
+  '@media': {
+    'screen and (max-width: 768px)': {
+      marginRight: '16px',
+    },
+  },
 })
 
 export const auctionCardBrand = style({
diff --git a/apps/web/src/modules/proposal/components/ProposalCard.tsx b/apps/web/src/modules/proposal/components/ProposalCard.tsx
index 00fdf59f..ef07be1d 100644
--- a/apps/web/src/modules/proposal/components/ProposalCard.tsx
+++ b/apps/web/src/modules/proposal/components/ProposalCard.tsx
@@ -23,7 +23,6 @@ type ProposalCardProps = {
 }
 
 export const ProposalCard: React.FC<ProposalCardProps> = ({
-  proposalId,
   title,
   proposalNumber,
   state,

From e3af3dd2d6dd1c2e9e01d466da42bc77469c4e43 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 21 Sep 2023 23:38:29 -0700
Subject: [PATCH 33/48] no user DAOs state/fix footer

---
 .../src/components/Home/RecentlyCreated.tsx   | 16 ++++--
 .../dao/components/DaoFeed/DaoFeed.tsx        |  8 ++-
 .../src/modules/dashboard/BidActionButton.tsx |  5 +-
 apps/web/src/modules/dashboard/Dashboard.tsx  | 10 +++-
 .../src/modules/dashboard/DashboardLayout.tsx | 32 +++++++-----
 apps/web/src/pages/index.tsx                  | 50 +++++++++----------
 6 files changed, 74 insertions(+), 47 deletions(-)

diff --git a/apps/web/src/components/Home/RecentlyCreated.tsx b/apps/web/src/components/Home/RecentlyCreated.tsx
index 81323c69..13ce2db6 100644
--- a/apps/web/src/components/Home/RecentlyCreated.tsx
+++ b/apps/web/src/components/Home/RecentlyCreated.tsx
@@ -7,19 +7,27 @@ import { homeSectionHeader, homeSectionWrapper } from 'src/styles/home.css'
 
 const RecentlyCreated: React.FC<{
   children: ReactNode
-}> = ({ children }) => {
+  isDashboard?: boolean
+}> = ({ children, isDashboard }) => {
   const chain = useChainStore((x) => x.chain)
   return (
     <Stack
       w={'100%'}
       mx={'auto'}
+      mb={isDashboard ? 'x16' : 'auto'}
       justify={'flex-start'}
       mt={{ '@initial': 'x16', '@768': 'x32' }}
       className={homeSectionWrapper}
     >
-      <Text fontWeight={'label'} className={homeSectionHeader}>
-        Recent DAOs on <span style={{ textDecoration: 'underline' }}>{chain.name}</span>
-      </Text>
+      {isDashboard ? (
+        <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
+          Explore
+        </Text>
+      ) : (
+        <Text fontWeight={'label'} className={homeSectionHeader}>
+          Recent DAOs on <span style={{ textDecoration: 'underline' }}>{chain.name}</span>
+        </Text>
+      )}
       {children}
       <Flex align={'center'} justify={'center'} mt={'x6'}>
         <Link href={'/explore'} passHref legacyBehavior>
diff --git a/apps/web/src/modules/dao/components/DaoFeed/DaoFeed.tsx b/apps/web/src/modules/dao/components/DaoFeed/DaoFeed.tsx
index f8d53685..8802ad44 100644
--- a/apps/web/src/modules/dao/components/DaoFeed/DaoFeed.tsx
+++ b/apps/web/src/modules/dao/components/DaoFeed/DaoFeed.tsx
@@ -41,7 +41,11 @@ const DaoFeedContent = ({
   )
 }
 
-export const DaoFeed = () => {
+type DaoFeedProps = {
+  isDashboard?: boolean
+}
+
+export const DaoFeed = ({ isDashboard }: DaoFeedProps) => {
   const chain = useChainStore((x) => x.chain)
   const { data: featuredDaos, error } = useSWR(
     [SWR_KEYS.FEATURED, chain.id],
@@ -59,7 +63,7 @@ export const DaoFeed = () => {
   if (!isLoading && !hasError && !hasThreeDaos) return null
 
   return (
-    <RecentlyCreated>
+    <RecentlyCreated isDashboard={isDashboard}>
       <DaoFeedContent
         loading={isLoading}
         error={hasError}
diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
index 8bccb77a..af76a376 100644
--- a/apps/web/src/modules/dashboard/BidActionButton.tsx
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -35,7 +35,6 @@ export const BidActionButton = ({
 
   const [bidAmount, setBidAmount] = useState('')
   const [isLoading, setIsLoading] = useState(false)
-  const [showTooltip, setShowTooltip] = useState(false)
 
   const isMinBid = Number(bidAmount) >= minBidAmount
 
@@ -78,6 +77,8 @@ export const BidActionButton = ({
     )
   }
 
+  console.log('isMinBid', isMinBid)
+  console.log('isValidBid', isValidBid)
   return (
     <>
       <form className={bidForm}>
@@ -87,7 +88,7 @@ export const BidActionButton = ({
             placeholder={maxChar(`${minBidAmount} ETH`, 12)}
             type={'number'}
             min={minBidAmount}
-            max={balance?.formatted}
+            // max={balance?.formatted}
             value={bidAmount}
             onChange={(e) => setBidAmount(e.target.value)}
             onClick={(e) => e.stopPropagation()}
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 737d7d8b..53219a34 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -16,9 +16,10 @@ import {
 } from 'src/data/subgraph/sdk.generated'
 import { CHAIN_ID } from 'src/typings'
 
+import { DaoFeed } from '../dao'
 import { DaoAuctionCard } from './DaoAuctionCard'
 import { DaoProposals } from './DaoProposals'
-import { DashboardLayout } from './DashboardLayout'
+import { DashPage, DashboardLayout } from './DashboardLayout'
 import { AuctionCardSkeleton, DAOCardSkeleton, ProposalCardSkeleton } from './Skeletons'
 
 const ACTIVE_PROPOSAL_STATES = [
@@ -101,7 +102,12 @@ const Dashboard = () => {
     return <div>No address</div>
   }
   if (!data?.length) {
-    return <div>no data</div>
+    return (
+      <DashPage>
+        <Text fontSize={18}>It looks like you haven’t joined any DAOs yet.</Text>
+        <DaoFeed isDashboard />
+      </DashPage>
+    )
   }
 
   const handleMutate = async () => {
diff --git a/apps/web/src/modules/dashboard/DashboardLayout.tsx b/apps/web/src/modules/dashboard/DashboardLayout.tsx
index 64ed83f2..a4cc4960 100644
--- a/apps/web/src/modules/dashboard/DashboardLayout.tsx
+++ b/apps/web/src/modules/dashboard/DashboardLayout.tsx
@@ -10,6 +10,25 @@ export const DashboardLayout = ({
   auctionCards: ReactNode
   daoProposals?: ReactNode
 }) => {
+  return (
+    <DashPage>
+      <Box mb={'x12'}>
+        <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
+          DAOs
+        </Text>
+        {auctionCards}
+      </Box>
+      <Box>
+        <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
+          Proposals
+        </Text>
+        {daoProposals}
+      </Box>
+    </DashPage>
+  )
+}
+
+export const DashPage = ({ children }: { children: ReactNode }) => {
   return (
     <Flex
       minH={'100vh'}
@@ -22,18 +41,7 @@ export const DashboardLayout = ({
         <Text fontSize={35} fontWeight={'display'} mb={'x12'}>
           Dashboard
         </Text>
-        <Box mb={'x12'}>
-          <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
-            DAOs
-          </Text>
-          {auctionCards}
-        </Box>
-        <Box>
-          <Text fontSize={28} fontWeight={'display'} mb={'x6'}>
-            Proposals
-          </Text>
-          {daoProposals}
-        </Box>
+        {children}
       </Box>
     </Flex>
   )
diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index 4aea64d7..ec46bccf 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -10,7 +10,9 @@ import Twitter from 'src/components/Home/Twitter'
 import VisitAlternate from 'src/components/Home/VisitAlternate'
 import { Meta } from 'src/components/Meta'
 import { AuctionFragment } from 'src/data/subgraph/sdk.generated'
-import { getHomeLayout } from 'src/layouts/HomeLayout'
+import { DefaultLayout } from 'src/layouts/DefaultLayout'
+import { HomeLayout } from 'src/layouts/HomeLayout'
+import { LayoutWrapper } from 'src/layouts/LayoutWrapper'
 import { DaoFeed } from 'src/modules/dao'
 import Dashboard from 'src/modules/dashboard/Dashboard'
 
@@ -19,37 +21,35 @@ import { NextPageWithLayout } from './_app'
 export type DaoProps = AuctionFragment['dao']
 
 const HomePage: NextPageWithLayout = () => {
-  // const router = useRouter()
   const { address } = useAccount()
 
-  // useEffect(() => {
-  //   const wasRedirected = sessionStorage.getItem('wasRedirected')
-  //   if (address && !wasRedirected) {
-  //     sessionStorage.setItem('wasRedirected', 'true')
-  //     router.push('/about')
-  //   }
-  // }, [address])
-
   if (address) {
-    return <Dashboard />
+    return (
+      <LayoutWrapper>
+        <DefaultLayout>
+          <Dashboard />
+        </DefaultLayout>
+      </LayoutWrapper>
+    )
   }
   return (
-    <>
-      <Meta title={'Nouns your ideas'} type={'website'} slug={'/'} />
-      <Stack align={'center'}>
-        {/* <Redirect /> */}
-        <Marquee />
-        <GetStarted />
-        <VisitAlternate />
-        <DaoFeed />
-        <Everything />
-        <FAQ />
-        <Twitter />
-      </Stack>
-    </>
+    <LayoutWrapper>
+      <HomeLayout>
+        <Meta title={'Nouns your ideas'} type={'website'} slug={'/'} />
+        <Stack align={'center'}>
+          <Marquee />
+          <GetStarted />
+          <VisitAlternate />
+          <DaoFeed />
+          <Everything />
+          <FAQ />
+          <Twitter />
+        </Stack>
+      </HomeLayout>
+    </LayoutWrapper>
   )
 }
 
-HomePage.getLayout = getHomeLayout
+// HomePage.getLayout = getHomeLayout
 
 export default HomePage

From e454b995402f2496be5bb2c5c51c6599f577b0c9 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Fri, 22 Sep 2023 15:40:31 -0700
Subject: [PATCH 34/48] filter out paused auctions

---
 .../src/components/Home/RecentlyCreated.tsx    |  6 +++++-
 .../data/subgraph/requests/dashboardQuery.ts   |  2 --
 .../src/modules/dashboard/BidActionButton.tsx  |  8 ++------
 .../src/modules/dashboard/DaoAuctionCard.tsx   |  2 +-
 apps/web/src/modules/dashboard/Dashboard.tsx   | 18 ++++++++++--------
 .../src/modules/dashboard/DashboardLayout.tsx  |  2 +-
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/components/Home/RecentlyCreated.tsx b/apps/web/src/components/Home/RecentlyCreated.tsx
index 13ce2db6..fd4a4885 100644
--- a/apps/web/src/components/Home/RecentlyCreated.tsx
+++ b/apps/web/src/components/Home/RecentlyCreated.tsx
@@ -16,7 +16,11 @@ const RecentlyCreated: React.FC<{
       mx={'auto'}
       mb={isDashboard ? 'x16' : 'auto'}
       justify={'flex-start'}
-      mt={{ '@initial': 'x16', '@768': 'x32' }}
+      mt={
+        isDashboard
+          ? { '@initial': 'x12', '@768': 'x24' }
+          : { '@initial': 'x16', '@768': 'x32' }
+      }
       className={homeSectionWrapper}
     >
       {isDashboard ? (
diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
index 9d973dc4..6b917eb4 100644
--- a/apps/web/src/data/subgraph/requests/dashboardQuery.ts
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -50,6 +50,4 @@ export const dashboardRequest = async (memberAddress: string) => {
     Sentry.captureException(e)
     await Sentry.flush(2000)
   }
-
-  //   return daos
 }
diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
index af76a376..5124091c 100644
--- a/apps/web/src/modules/dashboard/BidActionButton.tsx
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -1,7 +1,7 @@
 import { Box, Button } from '@zoralabs/zord'
 import React, { useState } from 'react'
 import { Address, parseEther } from 'viem'
-import { useBalance, useNetwork } from 'wagmi'
+import { useNetwork } from 'wagmi'
 import { prepareWriteContract, waitForTransaction, writeContract } from 'wagmi/actions'
 
 import { ContractButton } from 'src/components/ContractButton'
@@ -23,7 +23,6 @@ export const BidActionButton = ({
   auctionAddress,
   isOver,
 }: DashboardDao & { userAddress: AddressType; isOver: boolean; isEnded: boolean }) => {
-  const { data: balance } = useBalance({ address: userAddress, chainId })
   const { minimumBidIncrement, reservePrice } = auctionConfig
   const { highestBid } = currentAuction
   const { chain: wagmiChain } = useNetwork()
@@ -52,7 +51,7 @@ export const BidActionButton = ({
         abi: auctionAbi,
         address: auctionAddress as Address,
         functionName: 'createBid',
-        args: [BigInt(currentAuction.token.tokenId)],
+        args: [BigInt(currentAuction?.token?.tokenId)],
         value: parseEther(bidAmount.toString()),
       })
       console.log('config', config)
@@ -77,8 +76,6 @@ export const BidActionButton = ({
     )
   }
 
-  console.log('isMinBid', isMinBid)
-  console.log('isValidBid', isValidBid)
   return (
     <>
       <form className={bidForm}>
@@ -88,7 +85,6 @@ export const BidActionButton = ({
             placeholder={maxChar(`${minBidAmount} ETH`, 12)}
             type={'number'}
             min={minBidAmount}
-            // max={balance?.formatted}
             value={bidAmount}
             onChange={(e) => setBidAmount(e.target.value)}
             onClick={(e) => e.stopPropagation()}
diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
index 53ef7050..660b6568 100644
--- a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
@@ -77,7 +77,7 @@ export const DaoAuctionCard = (
         <Box className={daoAvatarBox}>
           <Image
             className={daoAvatar}
-            src={currentAuction.token.image}
+            src={currentAuction?.token?.image}
             layout="fixed"
             alt=""
           />
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 53219a34..4c1b5c0a 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -120,14 +120,16 @@ const Dashboard = () => {
 
   return (
     <DashboardLayout
-      auctionCards={data?.map((dao) => (
-        <DaoAuctionCard
-          key={`${dao.tokenAddress}:${dao.currentAuction.token.tokenId}`}
-          {...dao}
-          userAddress={address}
-          handleMutate={handleMutate}
-        />
-      ))}
+      auctionCards={data
+        ?.filter((dao) => dao.currentAuction)
+        .map((dao) => (
+          <DaoAuctionCard
+            key={`auctionCard:${dao.tokenAddress}`}
+            {...dao}
+            userAddress={address}
+            handleMutate={handleMutate}
+          />
+        ))}
       daoProposals={
         hasLiveProposals ? (
           data
diff --git a/apps/web/src/modules/dashboard/DashboardLayout.tsx b/apps/web/src/modules/dashboard/DashboardLayout.tsx
index a4cc4960..8d4e2dcd 100644
--- a/apps/web/src/modules/dashboard/DashboardLayout.tsx
+++ b/apps/web/src/modules/dashboard/DashboardLayout.tsx
@@ -32,7 +32,7 @@ export const DashPage = ({ children }: { children: ReactNode }) => {
   return (
     <Flex
       minH={'100vh'}
-      pt={{ '@initial': 'x8', '@480': 'x32' }}
+      pt={{ '@initial': 'x6', '@480': 'x20' }}
       w={'100%'}
       justify="center"
     >

From a462cb2ad75dfefb480f3eacfed597b2ae432780 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Fri, 22 Sep 2023 17:18:46 -0700
Subject: [PATCH 35/48] create fallback daoAuction card for paused auctions
 instead of filtering

---
 apps/web/src/components/Icon/index.ts         |   1 +
 .../src/modules/dashboard/AuctionPaused.tsx   | 124 ++++++++++++++++++
 .../src/modules/dashboard/BidActionButton.tsx |   5 +-
 .../src/modules/dashboard/DaoAuctionCard.tsx  |  27 +++-
 apps/web/src/modules/dashboard/Dashboard.tsx  |  20 ++-
 .../src/modules/dashboard/dashboard.css.ts    |   1 +
 6 files changed, 157 insertions(+), 21 deletions(-)
 create mode 100644 apps/web/src/modules/dashboard/AuctionPaused.tsx

diff --git a/apps/web/src/components/Icon/index.ts b/apps/web/src/components/Icon/index.ts
index 7aebbe9d..7154ebc0 100644
--- a/apps/web/src/components/Icon/index.ts
+++ b/apps/web/src/components/Icon/index.ts
@@ -1 +1,2 @@
 export * from './Icon'
+export * from './icons'
diff --git a/apps/web/src/modules/dashboard/AuctionPaused.tsx b/apps/web/src/modules/dashboard/AuctionPaused.tsx
new file mode 100644
index 00000000..fbd7a810
--- /dev/null
+++ b/apps/web/src/modules/dashboard/AuctionPaused.tsx
@@ -0,0 +1,124 @@
+import { Box, Flex, Text, atoms } from '@zoralabs/zord'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React from 'react'
+
+import { Icon, icons } from 'src/components/Icon'
+
+import { DashboardDao } from './Dashboard'
+import {
+  auctionCardBrand,
+  bidBox,
+  daoAvatarBox,
+  daoTokenName,
+  outerAuctionCard,
+  stats,
+  statsBox,
+} from './dashboard.css'
+
+type PausedType = DashboardDao & {
+  chainName?: string
+  chainIcon?: string
+  currentChainSlug?: string
+  tokenAddress: string
+}
+
+export const AuctionPaused = ({
+  currentChainSlug,
+  tokenAddress,
+  chainName,
+  name,
+  chainIcon,
+}: PausedType) => {
+  const router = useRouter()
+  const Paused = icons.pause
+
+  const handleSelectAuction = () => {
+    router.push(`/dao/${currentChainSlug}/${tokenAddress}`)
+  }
+  return (
+    <Flex className={outerAuctionCard}>
+      <Flex className={auctionCardBrand} onClick={handleSelectAuction}>
+        <Flex
+          width="x16"
+          height="x16"
+          position="relative"
+          overflow="hidden"
+          align="center"
+          justify="center"
+          borderRadius="curved"
+          backgroundColor="background2"
+          className={daoAvatarBox}
+        >
+          <Paused
+            height={'24px'}
+            width={'24px'}
+            style={{ transform: `scale(2)`, position: 'absolute' }}
+            fill="grey"
+          />
+        </Flex>
+        <Box>
+          <Flex mb="x1" align="center">
+            {chainIcon && (
+              <Image
+                src={chainIcon}
+                layout="fixed"
+                objectFit="contain"
+                style={{ borderRadius: '12px', maxHeight: '22px' }}
+                alt=""
+                height={22}
+                width={22}
+              />
+            )}
+            <Text fontSize={16} color="text3" ml={'x1'}>
+              {chainName}
+            </Text>
+          </Flex>
+          <Text className={daoTokenName}>{name}</Text>
+        </Box>
+      </Flex>
+      <Flex className={statsBox}>
+        <Box className={stats}>
+          <Text fontSize={16} color="text3" mb={'x1'}>
+            Current Bid
+          </Text>
+          <Text fontSize={18} fontWeight="label">
+            N/A
+          </Text>
+        </Box>
+        <Box className={stats}>
+          <Text fontSize={16} color="text3" mb={'x1'}>
+            Ends In
+          </Text>
+          <Text fontSize={18} fontWeight="label">
+            N/A
+          </Text>
+        </Box>
+      </Flex>
+      <Flex
+        className={bidBox}
+        align={{ '@initial': 'flex-start', '@768': 'center' }}
+        direction={'column'}
+      >
+        <Flex align={'center'} mt={{ '@initial': 'x3', '@768': 'x0' }}>
+          <Icon id={'warning'} fill={'text3'} />
+          <Text color="text3" fontSize={18} ml="x1">
+            Auctions are paused.
+          </Text>
+        </Flex>
+        <Link href={`/dao/${currentChainSlug}/${tokenAddress}?tab=activity`}>
+          <Box
+            display={'inline-flex'}
+            color="text3"
+            mt={{ '@initial': 'x3', '@768': 'x1' }}
+            fontSize={18}
+            className={atoms({ textDecoration: 'underline' })}
+          >
+            See activity
+          </Box>
+        </Link>
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
index 5124091c..35d82838 100644
--- a/apps/web/src/modules/dashboard/BidActionButton.tsx
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -15,7 +15,6 @@ import { DashboardDao } from './Dashboard'
 import { bidButton, bidForm, bidInput, minButton } from './dashboard.css'
 
 export const BidActionButton = ({
-  userAddress,
   chainId,
   auctionConfig,
   currentAuction,
@@ -24,7 +23,7 @@ export const BidActionButton = ({
   isOver,
 }: DashboardDao & { userAddress: AddressType; isOver: boolean; isEnded: boolean }) => {
   const { minimumBidIncrement, reservePrice } = auctionConfig
-  const { highestBid } = currentAuction
+  const { highestBid } = currentAuction || {}
   const { chain: wagmiChain } = useNetwork()
   const { minBidAmount } = useMinBidIncrement({
     highestBid: highestBid?.amount ? BigInt(highestBid?.amount) : undefined,
@@ -54,7 +53,7 @@ export const BidActionButton = ({
         args: [BigInt(currentAuction?.token?.tokenId)],
         value: parseEther(bidAmount.toString()),
       })
-      console.log('config', config)
+
       const tx = await writeContract(config)
       if (tx?.hash) await waitForTransaction({ hash: tx.hash })
       setBidAmount('')
diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
index 660b6568..0f73efa7 100644
--- a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
@@ -11,6 +11,7 @@ import { auctionAbi } from 'src/data/contract/abis'
 import { useCountdown, useIsMounted } from 'src/hooks'
 import { AddressType } from 'src/typings'
 
+import { AuctionPaused } from './AuctionPaused'
 import { BidActionButton } from './BidActionButton'
 import { DashboardDao } from './Dashboard'
 import {
@@ -31,14 +32,10 @@ export const DaoAuctionCard = (
   const { name: chainName, icon: chainIcon } =
     PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
   const router = useRouter()
-  const { endTime } = currentAuction
+  const { endTime } = currentAuction ?? {}
 
   const [isEnded, setIsEnded] = useState(false)
 
-  const bidText = currentAuction.highestBid?.amount
-    ? formatEther(BigInt(currentAuction.highestBid.amount))
-    : 'N/A'
-
   const isOver = !!endTime ? dayjs.unix(Date.now() / 1000) >= dayjs.unix(endTime) : true
   const onEnd = () => {
     setIsEnded(true)
@@ -66,11 +63,27 @@ export const DaoAuctionCard = (
       }, 3000)
     },
   })
-  const currentChainSlug = PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
-
   const handleSelectAuction = () => {
     router.push(`/dao/${currentChainSlug}/${tokenAddress}`)
   }
+  const currentChainSlug = PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
+
+  if (!currentAuction) {
+    return (
+      <AuctionPaused
+        {...props}
+        currentChainSlug={currentChainSlug}
+        tokenAddress={tokenAddress}
+        chainName={chainName}
+        chainIcon={chainIcon}
+      />
+    )
+  }
+
+  const bidText = currentAuction.highestBid?.amount
+    ? formatEther(BigInt(currentAuction.highestBid.amount))
+    : 'N/A'
+
   return (
     <Flex className={outerAuctionCard}>
       <Flex className={auctionCardBrand} onClick={handleSelectAuction}>
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 4c1b5c0a..d15af92f 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -36,7 +36,7 @@ export type DashboardDao = DaoFragment & {
     reservePrice: string
   }
   proposals: (ProposalFragment & { proposalState: ProposalState })[]
-  currentAuction: CurrentAuctionFragment
+  currentAuction?: CurrentAuctionFragment | null
 }
 
 const fetchDaoProposalState = async (dao: DashboardDao) => {
@@ -120,16 +120,14 @@ const Dashboard = () => {
 
   return (
     <DashboardLayout
-      auctionCards={data
-        ?.filter((dao) => dao.currentAuction)
-        .map((dao) => (
-          <DaoAuctionCard
-            key={`auctionCard:${dao.tokenAddress}`}
-            {...dao}
-            userAddress={address}
-            handleMutate={handleMutate}
-          />
-        ))}
+      auctionCards={data.map((dao) => (
+        <DaoAuctionCard
+          key={`auctionCard:${dao.tokenAddress}`}
+          {...dao}
+          userAddress={address}
+          handleMutate={handleMutate}
+        />
+      ))}
       daoProposals={
         hasLiveProposals ? (
           data
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index 660a4505..44c3d321 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -56,6 +56,7 @@ export const daoAvatar = style({
 export const daoAvatarBox = style({
   marginRight: '24px',
   width: '64px',
+  height: '64px',
   '@media': {
     'screen and (max-width: 768px)': {
       marginRight: '16px',

From 1aa219106bfd76d7d831a5396947f453f55034e2 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Fri, 22 Sep 2023 17:24:30 -0700
Subject: [PATCH 36/48] daos to exclude added to constants

---
 apps/web/src/constants/addresses.ts                   | 5 +++++
 apps/web/src/data/subgraph/requests/daoQuery.ts       | 6 +-----
 apps/web/src/data/subgraph/requests/dashboardQuery.ts | 6 +-----
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/constants/addresses.ts b/apps/web/src/constants/addresses.ts
index 48448728..872f136d 100644
--- a/apps/web/src/constants/addresses.ts
+++ b/apps/web/src/constants/addresses.ts
@@ -52,3 +52,8 @@ export const PUBLIC_ZORA_NFT_CREATOR = {
 }
 
 export const NULL_ADDRESS = '0x0000000000000000000000000000000000000000' as AddressType
+
+export const DAOS_TO_EXCLUDE = [
+  '0x9c8ff314c9bc7f6e59a9d9225fb22946427edc03',
+  '0x4b10701bfd7bfedc47d50562b76b436fbb5bdb3b',
+]
diff --git a/apps/web/src/data/subgraph/requests/daoQuery.ts b/apps/web/src/data/subgraph/requests/daoQuery.ts
index 77398e8f..9c84fc9b 100644
--- a/apps/web/src/data/subgraph/requests/daoQuery.ts
+++ b/apps/web/src/data/subgraph/requests/daoQuery.ts
@@ -1,5 +1,6 @@
 import * as Sentry from '@sentry/nextjs'
 
+import { DAOS_TO_EXCLUDE } from 'src/constants/addresses'
 import { PUBLIC_DEFAULT_CHAINS } from 'src/constants/defaultChains'
 import { SDK } from 'src/data/subgraph/client'
 import { CHAIN_ID } from 'src/typings'
@@ -11,11 +12,6 @@ export type MyDaosResponse = Array<{
   chainId: CHAIN_ID
 }>
 
-const DAOS_TO_EXCLUDE = [
-  '0x9c8ff314c9bc7f6e59a9d9225fb22946427edc03',
-  '0x4b10701bfd7bfedc47d50562b76b436fbb5bdb3b',
-]
-
 export const myDaosRequest = async (
   memberAddress: string
 ): Promise<MyDaosResponse | undefined> => {
diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
index 6b917eb4..ac1db525 100644
--- a/apps/web/src/data/subgraph/requests/dashboardQuery.ts
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -1,13 +1,9 @@
 import * as Sentry from '@sentry/nextjs'
 
+import { DAOS_TO_EXCLUDE } from 'src/constants/addresses'
 import { PUBLIC_DEFAULT_CHAINS } from 'src/constants/defaultChains'
 import { SDK } from 'src/data/subgraph/client'
 
-const DAOS_TO_EXCLUDE = [
-  '0x9c8ff314c9bc7f6e59a9d9225fb22946427edc03',
-  '0x4b10701bfd7bfedc47d50562b76b436fbb5bdb3b',
-]
-
 export const dashboardRequest = async (memberAddress: string) => {
   if (!memberAddress) throw new Error('No user address provided')
 

From bce8be18705779ebc0f42b2f0ffb12f1e19c5a05 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Sun, 24 Sep 2023 11:27:35 -0700
Subject: [PATCH 37/48] dashboard route

---
 apps/web/src/layouts/DefaultLayout/Nav.tsx     |  2 +-
 apps/web/src/layouts/DefaultLayout/NavMenu.tsx |  2 +-
 apps/web/src/pages/dashboard.tsx               | 17 +++++++++++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/pages/dashboard.tsx

diff --git a/apps/web/src/layouts/DefaultLayout/Nav.tsx b/apps/web/src/layouts/DefaultLayout/Nav.tsx
index 79953255..4c16430d 100644
--- a/apps/web/src/layouts/DefaultLayout/Nav.tsx
+++ b/apps/web/src/layouts/DefaultLayout/Nav.tsx
@@ -53,7 +53,7 @@ export const Nav = () => {
             <Link href={'/about'}>
               <Label className={navMenuItem}>About</Label>
             </Link>
-            <Link href={'/'}>
+            <Link href={'/dashboard'}>
               <Label className={navMenuItem}>Dashboard</Label>
             </Link>
             <Link href={'/explore'}>
diff --git a/apps/web/src/layouts/DefaultLayout/NavMenu.tsx b/apps/web/src/layouts/DefaultLayout/NavMenu.tsx
index ac373a39..0c2b8841 100644
--- a/apps/web/src/layouts/DefaultLayout/NavMenu.tsx
+++ b/apps/web/src/layouts/DefaultLayout/NavMenu.tsx
@@ -376,7 +376,7 @@ export const NavMenu = () => {
                   </Text>
                 </Flex>
               </Link>
-              <Link href={'/'}>
+              <Link href={'/dashboard'}>
                 <Flex display="flex" align="center" justify={'center'} py={'x2'}>
                   <Text cursor={'pointer'} fontWeight={'display'}>
                     Dashboard
diff --git a/apps/web/src/pages/dashboard.tsx b/apps/web/src/pages/dashboard.tsx
new file mode 100644
index 00000000..1a3ee281
--- /dev/null
+++ b/apps/web/src/pages/dashboard.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { DefaultLayout } from 'src/layouts/DefaultLayout'
+import { LayoutWrapper } from 'src/layouts/LayoutWrapper'
+import Dashboard from 'src/modules/dashboard/Dashboard'
+
+const DashboardPage = () => {
+  return (
+    <LayoutWrapper>
+      <DefaultLayout>
+        <Dashboard />
+      </DefaultLayout>
+    </LayoutWrapper>
+  )
+}
+
+export default DashboardPage

From 1a79fd4e5df4021aceb7327ef07b4380a13666df Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Sun, 24 Sep 2023 11:45:03 -0700
Subject: [PATCH 38/48] not connected state

---
 apps/web/src/modules/dashboard/Dashboard.tsx | 24 ++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index d15af92f..4be2bee2 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,4 +1,5 @@
-import { Box, Flex, Text } from '@zoralabs/zord'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { Box, Button, Flex, Text } from '@zoralabs/zord'
 import axios from 'axios'
 import React, { useState } from 'react'
 import useSWR, { mutate } from 'swr'
@@ -99,7 +100,7 @@ const Dashboard = () => {
     )
   }
   if (!address) {
-    return <div>No address</div>
+    return <DashConnect />
   }
   if (!data?.length) {
     return (
@@ -160,3 +161,22 @@ const Dashboard = () => {
 }
 
 export default Dashboard
+
+const DashConnect = () => {
+  const { openConnectModal } = useConnectModal()
+  return (
+    <DashPage>
+      <Flex
+        direction={{ '@initial': 'column', '@768': 'row' }}
+        align={{ '@initial': 'flex-start', '@768': 'center' }}
+        justify={{ '@initial': 'flex-start', '@768': 'space-between' }}
+      >
+        <Text fontSize={18}>You must connect your wallet to see your DAOs</Text>
+        <Button onClick={openConnectModal} mt={{ '@initial': 'x6', '@768': 'x0' }}>
+          Connect Wallet
+        </Button>
+      </Flex>
+      <DaoFeed isDashboard />
+    </DashPage>
+  )
+}

From ee56301af732425426e754e2938890bea09ca8b4 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Sun, 24 Sep 2023 11:57:00 -0700
Subject: [PATCH 39/48] error display

---
 .../Feed => components}/DisplayPanel.tsx      |  0
 .../src/modules/dao/components/Feed/Feed.tsx  |  2 +-
 .../web/src/modules/dashboard/DashConnect.tsx | 24 ++++++++++++
 apps/web/src/modules/dashboard/Dashboard.tsx  | 38 ++++++++-----------
 apps/web/src/modules/dashboard/Display.tsx    | 31 ---------------
 5 files changed, 41 insertions(+), 54 deletions(-)
 rename apps/web/src/{modules/dao/components/Feed => components}/DisplayPanel.tsx (100%)
 create mode 100644 apps/web/src/modules/dashboard/DashConnect.tsx
 delete mode 100644 apps/web/src/modules/dashboard/Display.tsx

diff --git a/apps/web/src/modules/dao/components/Feed/DisplayPanel.tsx b/apps/web/src/components/DisplayPanel.tsx
similarity index 100%
rename from apps/web/src/modules/dao/components/Feed/DisplayPanel.tsx
rename to apps/web/src/components/DisplayPanel.tsx
diff --git a/apps/web/src/modules/dao/components/Feed/Feed.tsx b/apps/web/src/modules/dao/components/Feed/Feed.tsx
index dbeae5a8..1806e15d 100644
--- a/apps/web/src/modules/dao/components/Feed/Feed.tsx
+++ b/apps/web/src/modules/dao/components/Feed/Feed.tsx
@@ -7,9 +7,9 @@ import useSWRInfinite from 'swr/infinite'
 import { useLayoutStore } from 'src/stores'
 import { useChainStore } from 'src/stores/useChainStore'
 
+import { DisplayPanel } from '../../../../components/DisplayPanel'
 import { CardSkeleton } from './CardSkeleton'
 import { CastCard } from './CastCard'
-import { DisplayPanel } from './DisplayPanel'
 import { loadMoreButton } from './Feed.css'
 import { FeedTab } from './FeedTab'
 
diff --git a/apps/web/src/modules/dashboard/DashConnect.tsx b/apps/web/src/modules/dashboard/DashConnect.tsx
new file mode 100644
index 00000000..c8401eae
--- /dev/null
+++ b/apps/web/src/modules/dashboard/DashConnect.tsx
@@ -0,0 +1,24 @@
+import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { Button, Flex, Text } from '@zoralabs/zord'
+
+import { DaoFeed } from '../dao'
+import { DashPage } from './DashboardLayout'
+
+export const DashConnect = () => {
+  const { openConnectModal } = useConnectModal()
+  return (
+    <DashPage>
+      <Flex
+        direction={{ '@initial': 'column', '@768': 'row' }}
+        align={{ '@initial': 'flex-start', '@768': 'center' }}
+        justify={{ '@initial': 'flex-start', '@768': 'space-between' }}
+      >
+        <Text fontSize={18}>You must connect your wallet to see your DAOs</Text>
+        <Button onClick={openConnectModal} mt={{ '@initial': 'x6', '@768': 'x0' }}>
+          Connect Wallet
+        </Button>
+      </Flex>
+      <DaoFeed isDashboard />
+    </DashPage>
+  )
+}
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 4be2bee2..8aed552a 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,10 +1,10 @@
-import { useConnectModal } from '@rainbow-me/rainbowkit'
-import { Box, Button, Flex, Text } from '@zoralabs/zord'
+import { Box, Flex, Text } from '@zoralabs/zord'
 import axios from 'axios'
 import React, { useState } from 'react'
 import useSWR, { mutate } from 'swr'
 import { useAccount } from 'wagmi'
 
+import { DisplayPanel } from 'src/components/DisplayPanel'
 import SWR_KEYS from 'src/constants/swrKeys'
 import {
   ProposalState,
@@ -20,6 +20,7 @@ import { CHAIN_ID } from 'src/typings'
 import { DaoFeed } from '../dao'
 import { DaoAuctionCard } from './DaoAuctionCard'
 import { DaoProposals } from './DaoProposals'
+import { DashConnect } from './DashConnect'
 import { DashPage, DashboardLayout } from './DashboardLayout'
 import { AuctionCardSkeleton, DAOCardSkeleton, ProposalCardSkeleton } from './Skeletons'
 
@@ -80,7 +81,19 @@ const Dashboard = () => {
   const [mutating, setMutating] = useState(false)
 
   if (error) {
-    return <div>Error</div>
+    return (
+      <DashPage>
+        <Text fontSize={18} mb={'x6'}>
+          Something went wrong.
+        </Text>
+        <DisplayPanel
+          title="Error"
+          description={
+            error?.message || 'Error fetching display data. Error message not found.'
+          }
+        />
+      </DashPage>
+    )
   }
   if (isValidating && !mutating) {
     return (
@@ -161,22 +174,3 @@ const Dashboard = () => {
 }
 
 export default Dashboard
-
-const DashConnect = () => {
-  const { openConnectModal } = useConnectModal()
-  return (
-    <DashPage>
-      <Flex
-        direction={{ '@initial': 'column', '@768': 'row' }}
-        align={{ '@initial': 'flex-start', '@768': 'center' }}
-        justify={{ '@initial': 'flex-start', '@768': 'space-between' }}
-      >
-        <Text fontSize={18}>You must connect your wallet to see your DAOs</Text>
-        <Button onClick={openConnectModal} mt={{ '@initial': 'x6', '@768': 'x0' }}>
-          Connect Wallet
-        </Button>
-      </Flex>
-      <DaoFeed isDashboard />
-    </DashPage>
-  )
-}
diff --git a/apps/web/src/modules/dashboard/Display.tsx b/apps/web/src/modules/dashboard/Display.tsx
deleted file mode 100644
index 8e7182ee..00000000
--- a/apps/web/src/modules/dashboard/Display.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { BoxProps, Flex, Text } from '@zoralabs/zord'
-import React from 'react'
-
-export const DisplayPanel = ({
-  title,
-  description,
-  height = 'x64',
-}: {
-  title: string
-  description: string
-  height?: BoxProps['height']
-}) => {
-  return (
-    <Flex
-      borderRadius={'phat'}
-      borderStyle={'solid'}
-      height={height}
-      width={'100%'}
-      borderWidth={'normal'}
-      borderColor={'border'}
-      direction={'column'}
-      justify={'center'}
-      align={'center'}
-    >
-      <Text fontSize={28} fontWeight={'display'} mb="x4" color={'text3'}>
-        {title}
-      </Text>
-      <Text color={'text3'}>{description}</Text>
-    </Flex>
-  )
-}

From 8f09b4c17f6d428730822abfd44d7692d084a0ee Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 28 Sep 2023 13:36:29 -0700
Subject: [PATCH 40/48] remove DAOs to exclude, clean queries

---
 apps/web/src/constants/addresses.ts           |  5 ----
 .../src/data/subgraph/requests/daoQuery.ts    | 18 +++++--------
 .../data/subgraph/requests/dashboardQuery.ts  | 26 +++++++------------
 3 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/constants/addresses.ts b/apps/web/src/constants/addresses.ts
index 872f136d..48448728 100644
--- a/apps/web/src/constants/addresses.ts
+++ b/apps/web/src/constants/addresses.ts
@@ -52,8 +52,3 @@ export const PUBLIC_ZORA_NFT_CREATOR = {
 }
 
 export const NULL_ADDRESS = '0x0000000000000000000000000000000000000000' as AddressType
-
-export const DAOS_TO_EXCLUDE = [
-  '0x9c8ff314c9bc7f6e59a9d9225fb22946427edc03',
-  '0x4b10701bfd7bfedc47d50562b76b436fbb5bdb3b',
-]
diff --git a/apps/web/src/data/subgraph/requests/daoQuery.ts b/apps/web/src/data/subgraph/requests/daoQuery.ts
index 9c84fc9b..1f16f1e1 100644
--- a/apps/web/src/data/subgraph/requests/daoQuery.ts
+++ b/apps/web/src/data/subgraph/requests/daoQuery.ts
@@ -1,6 +1,5 @@
 import * as Sentry from '@sentry/nextjs'
 
-import { DAOS_TO_EXCLUDE } from 'src/constants/addresses'
 import { PUBLIC_DEFAULT_CHAINS } from 'src/constants/defaultChains'
 import { SDK } from 'src/data/subgraph/client'
 import { CHAIN_ID } from 'src/typings'
@@ -35,17 +34,12 @@ export const myDaosRequest = async (
 
     return data
       .map((queries) =>
-        queries.daotokenOwners
-          .map((x) => {
-            return x.dao
-          })
-          .filter((dao) => !DAOS_TO_EXCLUDE.includes(dao.tokenAddress))
-          .map((dao) => ({
-            name: dao.name || '',
-            collectionAddress: dao.tokenAddress,
-            auctionAddress: dao?.auctionAddress || '',
-            chainId: queries.chainId,
-          }))
+        queries.daotokenOwners.map(({ dao }) => ({
+          name: dao.name || '',
+          collectionAddress: dao.tokenAddress,
+          auctionAddress: dao?.auctionAddress || '',
+          chainId: queries.chainId,
+        }))
       )
       .flat()
       .sort((a, b) => a.name.localeCompare(b.name))
diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
index ac1db525..90a19677 100644
--- a/apps/web/src/data/subgraph/requests/dashboardQuery.ts
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -1,6 +1,5 @@
 import * as Sentry from '@sentry/nextjs'
 
-import { DAOS_TO_EXCLUDE } from 'src/constants/addresses'
 import { PUBLIC_DEFAULT_CHAINS } from 'src/constants/defaultChains'
 import { SDK } from 'src/data/subgraph/client'
 
@@ -23,21 +22,16 @@ export const dashboardRequest = async (memberAddress: string) => {
 
     return data
       .map((queries) =>
-        queries.daotokenOwners
-          .map((x) => {
-            return x.dao
-          })
-          .filter((dao) => !DAOS_TO_EXCLUDE.includes(dao.tokenAddress))
-          .map((dao) => ({
-            ...dao,
-            name: dao.name || '',
-            tokenAddress: dao.tokenAddress,
-            auctionAddress: dao?.auctionAddress || '',
-            proposals: dao.proposals,
-            currentAuction: dao.currentAuction,
-            chainId: queries.chainId,
-            daoImage: dao.contractImage,
-          }))
+        queries.daotokenOwners.map(({ dao }) => ({
+          ...dao,
+          name: dao.name || '',
+          tokenAddress: dao.tokenAddress,
+          auctionAddress: dao?.auctionAddress || '',
+          proposals: dao.proposals,
+          currentAuction: dao.currentAuction,
+          chainId: queries.chainId,
+          daoImage: dao.contractImage,
+        }))
       )
       .flat()
       .sort((a, b) => a.name.localeCompare(b.name))

From 1521c9840613c62552c6e8f3e9c16b76d6548d9a Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 28 Sep 2023 13:58:18 -0700
Subject: [PATCH 41/48] remove dashboard API route, switch to client side fetch

---
 apps/web/src/modules/dashboard/Dashboard.tsx  | 16 +++++-----
 .../api/dao/[network]/[token]/[tokenId].ts    |  4 +--
 apps/web/src/pages/api/dashboard/[user].ts    | 30 -------------------
 3 files changed, 11 insertions(+), 39 deletions(-)
 delete mode 100644 apps/web/src/pages/api/dashboard/[user].ts

diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 8aed552a..93c3f88e 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,5 +1,4 @@
 import { Box, Flex, Text } from '@zoralabs/zord'
-import axios from 'axios'
 import React, { useState } from 'react'
 import useSWR, { mutate } from 'swr'
 import { useAccount } from 'wagmi'
@@ -10,6 +9,7 @@ import {
   ProposalState,
   getProposalState,
 } from 'src/data/contract/requests/getProposalState'
+import { dashboardRequest } from 'src/data/subgraph/requests/dashboardQuery'
 import {
   CurrentAuctionFragment,
   DaoFragment,
@@ -61,12 +61,14 @@ const fetchDaoProposalState = async (dao: DashboardDao) => {
 }
 
 const fetchDashboardData = async (address: string) => {
-  const userDaos = await axios
-    .get<DashboardDao[]>(`/api/dashboard/${address}`)
-    .then((x) => x.data)
-
-  const resolved = await Promise.all(userDaos.map(fetchDaoProposalState))
-  return resolved
+  try {
+    const userDaos = (await dashboardRequest(address)) as unknown as DashboardDao[]
+    if (!userDaos) throw new Error('Dashboard DAO query returned undefined')
+    const resolved = await Promise.all(userDaos.map(fetchDaoProposalState))
+    return resolved
+  } catch (error) {
+    throw new Error('Error fetching dashboard data')
+  }
 }
 
 const Dashboard = () => {
diff --git a/apps/web/src/pages/api/dao/[network]/[token]/[tokenId].ts b/apps/web/src/pages/api/dao/[network]/[token]/[tokenId].ts
index 9e0327ad..9986dc94 100644
--- a/apps/web/src/pages/api/dao/[network]/[token]/[tokenId].ts
+++ b/apps/web/src/pages/api/dao/[network]/[token]/[tokenId].ts
@@ -7,9 +7,9 @@ import { AddressType } from 'src/typings'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { network, token, tokenId } = req.query
-  console.log('network', network)
+
   const chain = PUBLIC_DEFAULT_CHAINS.find((x) => x.slug == network)
-  console.log('chain', chain)
+
   if (!chain) {
     return res.status(404).end()
   }
diff --git a/apps/web/src/pages/api/dashboard/[user].ts b/apps/web/src/pages/api/dashboard/[user].ts
deleted file mode 100644
index 7e402ad8..00000000
--- a/apps/web/src/pages/api/dashboard/[user].ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { getAddress } from 'ethers/lib/utils.js'
-import { NextApiRequest, NextApiResponse } from 'next'
-
-import { dashboardRequest } from 'src/data/subgraph/requests/dashboardQuery'
-import { NotFoundError } from 'src/services/errors'
-
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  const { user } = req.query
-
-  let address: string
-
-  try {
-    address = getAddress(user as string)
-  } catch (e) {
-    return res.status(400).json({ error: 'bad address input' })
-  }
-  try {
-    const daos = await dashboardRequest(address)
-
-    res.status(200).json(daos)
-  } catch (e) {
-    if (e instanceof NotFoundError) {
-      return res.status(404).json({ error: 'daos not found' })
-    }
-
-    return res.status(500).json({ error: 'backend failed' })
-  }
-}
-
-export default handler

From 3c69f685567b57c93b0d50534126fccc3e12c16a Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 5 Oct 2023 13:41:21 -0700
Subject: [PATCH 42/48] minor fixes, remove any from Contract Button

---
 apps/web/src/components/ContractButton.tsx             | 6 ++++--
 apps/web/src/data/subgraph/requests/dashboardQuery.ts  | 3 +--
 apps/web/src/modules/auction/components/Auction.css.ts | 6 +-----
 apps/web/src/modules/dashboard/dashboard.css.ts        | 2 +-
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/ContractButton.tsx b/apps/web/src/components/ContractButton.tsx
index ac6fbb4b..3baee555 100644
--- a/apps/web/src/components/ContractButton.tsx
+++ b/apps/web/src/components/ContractButton.tsx
@@ -6,7 +6,7 @@ import { useBridgeModal } from 'src/hooks/useBridgeModal'
 import { useChainStore } from 'src/stores/useChainStore'
 
 interface ContractButtonProps extends ButtonProps {
-  handleClick: (e?: any) => void
+  handleClick: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
 }
 
 export const ContractButton = ({
@@ -28,7 +28,9 @@ export const ContractButton = ({
 
   const handleSwitchNetwork = () => switchNetwork?.(appChain.id)
 
-  const handleClickWithValidation = (e?: any) => {
+  const handleClickWithValidation = (
+    e?: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
     if (!userAddress) return openConnectModal?.()
     if (canUserBridge && userBalance?.decimals === 0) return openBridgeModal()
     if (userChain?.id !== appChain.id) return handleSwitchNetwork()
diff --git a/apps/web/src/data/subgraph/requests/dashboardQuery.ts b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
index 90a19677..edc36688 100644
--- a/apps/web/src/data/subgraph/requests/dashboardQuery.ts
+++ b/apps/web/src/data/subgraph/requests/dashboardQuery.ts
@@ -4,9 +4,8 @@ import { PUBLIC_DEFAULT_CHAINS } from 'src/constants/defaultChains'
 import { SDK } from 'src/data/subgraph/client'
 
 export const dashboardRequest = async (memberAddress: string) => {
-  if (!memberAddress) throw new Error('No user address provided')
-
   try {
+    if (!memberAddress) throw new Error('No user address provided')
     const data = await Promise.all(
       PUBLIC_DEFAULT_CHAINS.map((chain) =>
         SDK.connect(chain.id)
diff --git a/apps/web/src/modules/auction/components/Auction.css.ts b/apps/web/src/modules/auction/components/Auction.css.ts
index bf037c5c..cbdb9885 100644
--- a/apps/web/src/modules/auction/components/Auction.css.ts
+++ b/apps/web/src/modules/auction/components/Auction.css.ts
@@ -157,10 +157,6 @@ export const auctionActionButton = style({
   height: 56,
 })
 
-export const auctionActionDash = style({
-  borderRadius: '12px',
-})
-
 export const auctionActionButtonVariants = styleVariants({
   bid: [auctionActionButton],
   bidding: [
@@ -172,7 +168,7 @@ export const auctionActionButtonVariants = styleVariants({
     auctionActionButton,
     { width: '100%', background: '#F1F1F1', color: '#808080' },
   ],
-  dashSettle: [auctionActionDash, { width: '100%' }],
+  dashSettle: { borderRadius: '12px', width: '100%' },
 })
 
 export const bidForm = style({
diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index 44c3d321..5a4914e3 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -118,7 +118,7 @@ export const bidInput = style([
     borderRadius: '12px',
     height: '48px',
     paddingLeft: '16px',
-    paddingRight: '16px',
+    paddingRight: '44px',
     outline: 'none',
     boxSizing: 'border-box',
     transition: '.3s',

From a0d98a3527d67a1c4bf20d21111e16123e45156c Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 5 Oct 2023 14:09:59 -0700
Subject: [PATCH 43/48] rename prop types to declare Props in name

---
 apps/web/src/modules/dao/components/Feed/Feed.tsx  |  2 +-
 apps/web/src/modules/dashboard/AuctionPaused.tsx   |  4 ++--
 apps/web/src/modules/dashboard/BidActionButton.tsx | 11 +++++++++--
 apps/web/src/modules/dashboard/DaoAuctionCard.tsx  | 11 +++++++----
 apps/web/src/modules/dashboard/DaoProposals.tsx    |  4 ++--
 apps/web/src/modules/dashboard/Dashboard.tsx       |  6 +++---
 6 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/modules/dao/components/Feed/Feed.tsx b/apps/web/src/modules/dao/components/Feed/Feed.tsx
index 1806e15d..ecf9585e 100644
--- a/apps/web/src/modules/dao/components/Feed/Feed.tsx
+++ b/apps/web/src/modules/dao/components/Feed/Feed.tsx
@@ -4,10 +4,10 @@ import axios from 'axios'
 import React, { useMemo } from 'react'
 import useSWRInfinite from 'swr/infinite'
 
+import { DisplayPanel } from 'src/components/DisplayPanel'
 import { useLayoutStore } from 'src/stores'
 import { useChainStore } from 'src/stores/useChainStore'
 
-import { DisplayPanel } from '../../../../components/DisplayPanel'
 import { CardSkeleton } from './CardSkeleton'
 import { CastCard } from './CastCard'
 import { loadMoreButton } from './Feed.css'
diff --git a/apps/web/src/modules/dashboard/AuctionPaused.tsx b/apps/web/src/modules/dashboard/AuctionPaused.tsx
index fbd7a810..6750412d 100644
--- a/apps/web/src/modules/dashboard/AuctionPaused.tsx
+++ b/apps/web/src/modules/dashboard/AuctionPaused.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 
 import { Icon, icons } from 'src/components/Icon'
 
-import { DashboardDao } from './Dashboard'
+import { DashboardDaoProps } from './Dashboard'
 import {
   auctionCardBrand,
   bidBox,
@@ -17,7 +17,7 @@ import {
   statsBox,
 } from './dashboard.css'
 
-type PausedType = DashboardDao & {
+type PausedType = DashboardDaoProps & {
   chainName?: string
   chainIcon?: string
   currentChainSlug?: string
diff --git a/apps/web/src/modules/dashboard/BidActionButton.tsx b/apps/web/src/modules/dashboard/BidActionButton.tsx
index 35d82838..7f4e65e6 100644
--- a/apps/web/src/modules/dashboard/BidActionButton.tsx
+++ b/apps/web/src/modules/dashboard/BidActionButton.tsx
@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/nextjs'
 import { Box, Button } from '@zoralabs/zord'
 import React, { useState } from 'react'
 import { Address, parseEther } from 'viem'
@@ -11,7 +12,7 @@ import { maxChar } from 'src/utils/helpers'
 
 import { useMinBidIncrement } from '../auction'
 import { Settle } from '../auction/components/CurrentAuction/Settle'
-import { DashboardDao } from './Dashboard'
+import { DashboardDaoProps } from './Dashboard'
 import { bidButton, bidForm, bidInput, minButton } from './dashboard.css'
 
 export const BidActionButton = ({
@@ -21,7 +22,11 @@ export const BidActionButton = ({
   isEnded,
   auctionAddress,
   isOver,
-}: DashboardDao & { userAddress: AddressType; isOver: boolean; isEnded: boolean }) => {
+}: DashboardDaoProps & {
+  userAddress: AddressType
+  isOver: boolean
+  isEnded: boolean
+}) => {
   const { minimumBidIncrement, reservePrice } = auctionConfig
   const { highestBid } = currentAuction || {}
   const { chain: wagmiChain } = useNetwork()
@@ -59,6 +64,8 @@ export const BidActionButton = ({
       setBidAmount('')
     } catch (error) {
       console.error(error)
+      Sentry.captureException(error)
+      await Sentry.flush(2000)
     } finally {
       setIsLoading(false)
     }
diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
index 0f73efa7..c1333b67 100644
--- a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
@@ -13,7 +13,7 @@ import { AddressType } from 'src/typings'
 
 import { AuctionPaused } from './AuctionPaused'
 import { BidActionButton } from './BidActionButton'
-import { DashboardDao } from './Dashboard'
+import { DashboardDaoProps } from './Dashboard'
 import {
   auctionCardBrand,
   bidBox,
@@ -25,9 +25,12 @@ import {
   statsBox,
 } from './dashboard.css'
 
-export const DaoAuctionCard = (
-  props: DashboardDao & { userAddress: AddressType; handleMutate: () => void }
-) => {
+type DaoAuctionCardProps = DashboardDaoProps & {
+  userAddress: AddressType
+  handleMutate: () => void
+}
+
+export const DaoAuctionCard = (props: DaoAuctionCardProps) => {
   const { currentAuction, chainId, auctionAddress, handleMutate, tokenAddress } = props
   const { name: chainName, icon: chainIcon } =
     PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId) ?? {}
diff --git a/apps/web/src/modules/dashboard/DaoProposals.tsx b/apps/web/src/modules/dashboard/DaoProposals.tsx
index 03b63ed6..30dfa478 100644
--- a/apps/web/src/modules/dashboard/DaoProposals.tsx
+++ b/apps/web/src/modules/dashboard/DaoProposals.tsx
@@ -9,7 +9,7 @@ import { Avatar } from 'src/components/Avatar'
 import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
 
 import { DaoProposalCard } from './DaoProposalCard'
-import { DashboardDao } from './Dashboard'
+import { DashboardDaoProps } from './Dashboard'
 import { daoName } from './dashboard.css'
 
 export const DaoProposals = ({
@@ -18,7 +18,7 @@ export const DaoProposals = ({
   name,
   proposals,
   chainId,
-}: DashboardDao) => {
+}: DashboardDaoProps) => {
   const daoImageSrc = React.useMemo(() => {
     return daoImage ? getFetchableUrl(daoImage) : null
   }, [daoImage])
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 93c3f88e..68d698a6 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -30,7 +30,7 @@ const ACTIVE_PROPOSAL_STATES = [
   ProposalState.Queued,
 ]
 
-export type DashboardDao = DaoFragment & {
+export type DashboardDaoProps = DaoFragment & {
   chainId: CHAIN_ID
   daoImage: string
   auctionConfig: {
@@ -41,7 +41,7 @@ export type DashboardDao = DaoFragment & {
   currentAuction?: CurrentAuctionFragment | null
 }
 
-const fetchDaoProposalState = async (dao: DashboardDao) => {
+const fetchDaoProposalState = async (dao: DashboardDaoProps) => {
   const proposals = await Promise.all(
     dao.proposals.map(async (proposal) => {
       const proposalState = await getProposalState(
@@ -62,7 +62,7 @@ const fetchDaoProposalState = async (dao: DashboardDao) => {
 
 const fetchDashboardData = async (address: string) => {
   try {
-    const userDaos = (await dashboardRequest(address)) as unknown as DashboardDao[]
+    const userDaos = (await dashboardRequest(address)) as unknown as DashboardDaoProps[]
     if (!userDaos) throw new Error('Dashboard DAO query returned undefined')
     const resolved = await Promise.all(userDaos.map(fetchDaoProposalState))
     return resolved

From e7e4ba2e61845052f9a2131a1b5081d4d6f58fbb Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 5 Oct 2023 14:45:18 -0700
Subject: [PATCH 44/48] update a slew of styles to atoms

---
 .../src/modules/dashboard/dashboard.css.ts    | 87 ++++++++++---------
 1 file changed, 48 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/modules/dashboard/dashboard.css.ts b/apps/web/src/modules/dashboard/dashboard.css.ts
index 5a4914e3..df92851b 100644
--- a/apps/web/src/modules/dashboard/dashboard.css.ts
+++ b/apps/web/src/modules/dashboard/dashboard.css.ts
@@ -5,31 +5,29 @@ import { skeletonAnimation } from 'src/styles/animations.css'
 
 export const outerAuctionCard = style([
   {
-    marginBottom: '24px',
-    width: '100%',
-    alignItems: 'center',
-    padding: '12px 24px',
     '@media': {
       'screen and (max-width: 768px)': {
-        flexDirection: 'column',
-        padding: '16px 8px',
-        alignItems: 'flex-start',
         gap: '16px',
       },
     },
   },
   atoms({
+    width: '100%',
+    alignItems: { '@initial': 'flex-start', '@768': 'center' },
+    flexDirection: { '@initial': 'column', '@768': 'row' },
+    marginBottom: 'x6',
     borderColor: 'border',
     borderStyle: 'solid',
     borderRadius: 'curved',
     borderWidth: 'normal',
+    py: { '@initial': 'x4', '@768': 'x3' },
+    px: { '@initial': 'x2', '@768': 'x6' },
   }),
 ])
 
 export const daoTokenName = style([
   {
     whiteSpace: 'nowrap',
-    overflow: 'hidden',
     textOverflow: 'ellipsis',
     width: '200px',
     '@media': {
@@ -42,17 +40,20 @@ export const daoTokenName = style([
     },
   },
   atoms({
+    overflow: 'hidden',
     fontWeight: 'label',
     fontSize: 20,
   }),
 ])
 
-export const daoAvatar = style({
-  objectFit: 'contain',
-  borderRadius: '16px',
-  height: 64,
-  width: 64,
-})
+export const daoAvatar = style([
+  atoms({
+    objectFit: 'contain',
+    borderRadius: 'curved',
+    height: 'x16',
+    width: 'x16',
+  }),
+])
 export const daoAvatarBox = style({
   marginRight: '24px',
   width: '64px',
@@ -64,19 +65,23 @@ export const daoAvatarBox = style({
   },
 })
 
-export const auctionCardBrand = style({
-  alignItems: 'center',
-  width: '40%',
-  cursor: 'pointer',
-  '@media': {
-    'screen and (max-width: 912px)': {
-      width: '35%',
-    },
-    'screen and (max-width: 768px)': {
-      width: '100%',
+export const auctionCardBrand = style([
+  {
+    width: '40%',
+    '@media': {
+      'screen and (max-width: 912px)': {
+        width: '35%',
+      },
+      'screen and (max-width: 768px)': {
+        width: '100%',
+      },
     },
   },
-})
+  atoms({
+    cursor: 'pointer',
+    alignItems: 'center',
+  }),
+])
 
 export const stats = style({
   width: '50%',
@@ -93,16 +98,20 @@ export const statsBox = style({
   },
 })
 
-export const bidBox = style({
-  marginLeft: 'auto',
-  width: '250px',
-  '@media': {
-    'screen and (max-width: 768px)': {
-      width: '100%',
-      marginLeft: 0,
+export const bidBox = style([
+  {
+    width: '250px',
+    '@media': {
+      'screen and (max-width: 768px)': {
+        width: '100%',
+        marginLeft: 0,
+      },
     },
   },
-})
+  atoms({
+    marginLeft: 'auto',
+  }),
+])
 
 export const bidForm = style({
   width: '75%',
@@ -113,12 +122,6 @@ export const bidButton = style({
 })
 export const bidInput = style([
   {
-    width: '100%',
-    border: 'none',
-    borderRadius: '12px',
-    height: '48px',
-    paddingLeft: '16px',
-    paddingRight: '44px',
     outline: 'none',
     boxSizing: 'border-box',
     transition: '.3s',
@@ -129,6 +132,12 @@ export const bidInput = style([
     },
   },
   atoms({
+    borderWidth: 'none',
+    borderRadius: 'curved',
+    height: 'x12',
+    width: '100%',
+    paddingLeft: 'x4',
+    paddingRight: 'x11',
     backgroundColor: 'background2',
     fontSize: 14,
     lineHeight: 24,

From d87f97a59ce105b489679e93f5d420a70b775e6e Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 5 Oct 2023 15:12:09 -0700
Subject: [PATCH 45/48] meomize proposal list and remove duplicate data

---
 .../src/modules/dashboard/DaoProposalCard.tsx | 16 +++--
 .../src/modules/dashboard/DaoProposals.tsx    |  1 +
 apps/web/src/modules/dashboard/Dashboard.tsx  | 64 ++++++++++---------
 3 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/modules/dashboard/DaoProposalCard.tsx b/apps/web/src/modules/dashboard/DaoProposalCard.tsx
index 6b1e0387..a73abe0b 100644
--- a/apps/web/src/modules/dashboard/DaoProposalCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoProposalCard.tsx
@@ -1,13 +1,19 @@
 import { Flex, Text } from '@zoralabs/zord'
 import Link from 'next/link'
 
-import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
 import { ProposalState } from 'src/data/contract/requests/getProposalState'
 import { ProposalFragment } from 'src/data/subgraph/sdk.generated'
 import { AddressType, CHAIN_ID } from 'src/typings'
 
 import { ProposalStatus } from '../proposal/components/ProposalStatus'
 
+type DaoProposalCardProps = ProposalFragment & {
+  chainId: CHAIN_ID
+  tokenAddress: AddressType
+  proposalState: ProposalState
+  currentChainSlug?: string
+}
+
 export const DaoProposalCard = ({
   title,
   proposalNumber,
@@ -17,12 +23,8 @@ export const DaoProposalCard = ({
   voteEnd,
   voteStart,
   expiresAt,
-}: ProposalFragment & {
-  chainId: CHAIN_ID
-  tokenAddress: AddressType
-  proposalState: ProposalState
-}) => {
-  const currentChainSlug = PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
+  currentChainSlug,
+}: DaoProposalCardProps) => {
   return (
     <Link
       href={`/dao/${currentChainSlug}/${tokenAddress}/vote/${proposalNumber}`}
diff --git a/apps/web/src/modules/dashboard/DaoProposals.tsx b/apps/web/src/modules/dashboard/DaoProposals.tsx
index 30dfa478..b65fe993 100644
--- a/apps/web/src/modules/dashboard/DaoProposals.tsx
+++ b/apps/web/src/modules/dashboard/DaoProposals.tsx
@@ -72,6 +72,7 @@ export const DaoProposals = ({
             key={proposal.proposalNumber}
             {...proposal}
             chainId={chainId}
+            currentChainSlug={currentChainSlug}
             tokenAddress={tokenAddress}
             proposalState={proposal.proposalState}
           />
diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 68d698a6..928023da 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@zoralabs/zord'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import useSWR, { mutate } from 'swr'
 import { useAccount } from 'wagmi'
 
@@ -82,6 +82,38 @@ const Dashboard = () => {
 
   const [mutating, setMutating] = useState(false)
 
+  const proposalList = useMemo(() => {
+    if (!data) return null
+    const hasLiveProposals = data.some((dao) => dao.proposals.length)
+
+    if (!hasLiveProposals)
+      return (
+        <Flex
+          borderRadius={'phat'}
+          borderStyle={'solid'}
+          height={'x32'}
+          width={'100%'}
+          borderWidth={'normal'}
+          borderColor={'border'}
+          direction={'column'}
+          justify={'center'}
+          align={'center'}
+        >
+          <Text fontSize={20} fontWeight={'display'} mb="x4" color={'text3'}>
+            No Active Proposals
+          </Text>
+          <Text color={'text3'}>
+            Currently, none of your DAOs have proposals that are in active, queue, or
+            pending states. Check back later!
+          </Text>
+        </Flex>
+      )
+
+    return data
+      .filter((dao) => dao.proposals.length)
+      .map((dao) => <DaoProposals key={dao.tokenAddress} {...dao} />)
+  }, [data])
+
   if (error) {
     return (
       <DashPage>
@@ -132,8 +164,6 @@ const Dashboard = () => {
     setMutating(false)
   }
 
-  const hasLiveProposals = data.some((dao) => dao.proposals.length)
-
   return (
     <DashboardLayout
       auctionCards={data.map((dao) => (
@@ -144,33 +174,7 @@ const Dashboard = () => {
           handleMutate={handleMutate}
         />
       ))}
-      daoProposals={
-        hasLiveProposals ? (
-          data
-            .filter((dao) => dao.proposals.length)
-            .map((dao) => <DaoProposals key={dao.tokenAddress} {...dao} />)
-        ) : (
-          <Flex
-            borderRadius={'phat'}
-            borderStyle={'solid'}
-            height={'x32'}
-            width={'100%'}
-            borderWidth={'normal'}
-            borderColor={'border'}
-            direction={'column'}
-            justify={'center'}
-            align={'center'}
-          >
-            <Text fontSize={20} fontWeight={'display'} mb="x4" color={'text3'}>
-              No Active Proposals
-            </Text>
-            <Text color={'text3'}>
-              Currently, none of your DAOs have proposals that are in active, queue, or
-              pending states. Check back later!
-            </Text>
-          </Flex>
-        )
-      }
+      daoProposals={proposalList}
     />
   )
 }

From 1554434825ac3f5588c9e839e66841cc9317a6b0 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 5 Oct 2023 15:37:16 -0700
Subject: [PATCH 46/48] Add Eth symbol to prices

---
 apps/web/src/modules/auction/components/Auction.css.ts | 9 +++++++++
 apps/web/src/modules/dashboard/DaoAuctionCard.tsx      | 5 +++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/modules/auction/components/Auction.css.ts b/apps/web/src/modules/auction/components/Auction.css.ts
index cbdb9885..95ff9ee6 100644
--- a/apps/web/src/modules/auction/components/Auction.css.ts
+++ b/apps/web/src/modules/auction/components/Auction.css.ts
@@ -279,3 +279,12 @@ export const tokenImage = style({
   },
 })
 export const switcherBox = style({ width: '100%', maxWidth: '912px' })
+export const overflowEllipsis = style([
+  {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  atoms({
+    overflow: 'hidden',
+  }),
+])
diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
index c1333b67..7307f840 100644
--- a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
@@ -11,6 +11,7 @@ import { auctionAbi } from 'src/data/contract/abis'
 import { useCountdown, useIsMounted } from 'src/hooks'
 import { AddressType } from 'src/typings'
 
+import { overflowEllipsis } from '../auction/components/Auction.css'
 import { AuctionPaused } from './AuctionPaused'
 import { BidActionButton } from './BidActionButton'
 import { DashboardDaoProps } from './Dashboard'
@@ -84,7 +85,7 @@ export const DaoAuctionCard = (props: DaoAuctionCardProps) => {
   }
 
   const bidText = currentAuction.highestBid?.amount
-    ? formatEther(BigInt(currentAuction.highestBid.amount))
+    ? `${formatEther(BigInt(currentAuction.highestBid.amount))} ETH`
     : 'N/A'
 
   return (
@@ -123,7 +124,7 @@ export const DaoAuctionCard = (props: DaoAuctionCardProps) => {
           <Text fontSize={16} color="text3" mb={'x1'}>
             Current Bid
           </Text>
-          <Text fontSize={18} fontWeight="label">
+          <Text fontSize={18} fontWeight="label" className={overflowEllipsis}>
             {bidText}
           </Text>
         </Box>

From 77bb412c6cdca660b36d813c322400cfcd221a89 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 5 Oct 2023 16:16:02 -0700
Subject: [PATCH 47/48] fix auction card states bug

---
 apps/web/src/modules/dashboard/Dashboard.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 928023da..3967712b 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,6 +1,7 @@
 import { Box, Flex, Text } from '@zoralabs/zord'
+import { deepStrictEqual } from 'assert'
 import React, { useMemo, useState } from 'react'
-import useSWR, { mutate } from 'swr'
+import useSWR from 'swr'
 import { useAccount } from 'wagmi'
 
 import { DisplayPanel } from 'src/components/DisplayPanel'
@@ -74,7 +75,7 @@ const fetchDashboardData = async (address: string) => {
 const Dashboard = () => {
   const { address } = useAccount()
 
-  const { data, error, isValidating } = useSWR(
+  const { data, error, isValidating, mutate } = useSWR(
     [`${SWR_KEYS.DASHBOARD}:${address}`],
     address ? () => fetchDashboardData(address) : null,
     { revalidateOnFocus: false }
@@ -160,7 +161,14 @@ const Dashboard = () => {
 
   const handleMutate = async () => {
     setMutating(true)
-    await mutate([`${SWR_KEYS.DASHBOARD}:${address}`], () => fetchDashboardData(address))
+    const beforeMutate = [...data]
+    console.log('beforeMutate', beforeMutate)
+    await mutate(() => fetchDashboardData(address))
+    const afterMutate = [...data]
+    console.log('afterMutate', afterMutate)
+
+    const isEqual = deepStrictEqual(beforeMutate, afterMutate)
+    console.log('isEqual', isEqual)
     setMutating(false)
   }
 
@@ -168,7 +176,11 @@ const Dashboard = () => {
     <DashboardLayout
       auctionCards={data.map((dao) => (
         <DaoAuctionCard
-          key={`auctionCard:${dao.tokenAddress}`}
+          // React diffing wasn't catching new auctions starting, so this
+          // long key is to help rerender when new auction starts
+          key={`auctionCard:${dao.tokenAddress}:${dao}:${
+            dao?.currentAuction?.endTime || 0
+          }`}
           {...dao}
           userAddress={address}
           handleMutate={handleMutate}

From 97799f27b1b6d0493a749ec588fda83ca0bf3147 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 5 Oct 2023 16:17:44 -0700
Subject: [PATCH 48/48] remove mess of comments and tests after bug

---
 apps/web/src/modules/dashboard/Dashboard.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/apps/web/src/modules/dashboard/Dashboard.tsx b/apps/web/src/modules/dashboard/Dashboard.tsx
index 3967712b..7c7f583b 100644
--- a/apps/web/src/modules/dashboard/Dashboard.tsx
+++ b/apps/web/src/modules/dashboard/Dashboard.tsx
@@ -1,5 +1,4 @@
 import { Box, Flex, Text } from '@zoralabs/zord'
-import { deepStrictEqual } from 'assert'
 import React, { useMemo, useState } from 'react'
 import useSWR from 'swr'
 import { useAccount } from 'wagmi'
@@ -161,14 +160,7 @@ const Dashboard = () => {
 
   const handleMutate = async () => {
     setMutating(true)
-    const beforeMutate = [...data]
-    console.log('beforeMutate', beforeMutate)
     await mutate(() => fetchDashboardData(address))
-    const afterMutate = [...data]
-    console.log('afterMutate', afterMutate)
-
-    const isEqual = deepStrictEqual(beforeMutate, afterMutate)
-    console.log('isEqual', isEqual)
     setMutating(false)
   }