Sports/Explore/Activity page

backend/shared/src/supabase/search-contracts.ts

@@ -316,6 +316,7 @@ function getSearchContractWhereSQL(args: {
   const filterSQL: FilterSQL = {
     open: 'resolution_time IS NULL AND (close_time > NOW() or close_time is null)',
     closed: 'close_time < NOW() AND resolution_time IS NULL',
+    'closing-day': `close_time > now() AND close_time < (now() + interval '1 day' + interval '7 hours') AND resolution_time IS NULL`,
     'closing-week': `close_time > now() AND close_time < (now() + interval '7 days' + interval '7 hours') AND resolution_time IS NULL`,
     'closing-month': `close_time > now() AND close_time < (now() + interval '30 days' + interval '7 hours') AND resolution_time IS NULL`,
     'closing-90-days': `close_time > now() AND close_time < (now() + interval '90 days' + interval '7 hours') AND resolution_time IS NULL`,

common/src/api/market-search-types.ts

@@ -11,6 +11,7 @@ export const searchProps = z
         z.literal('closing-90-days'),
         z.literal('closing-week'),
         z.literal('closing-month'),
+        z.literal('closing-day'),
         z.literal('closed'),
         z.literal('resolved'),
         z.literal('all'),

web/components/contract/feed-contract-card.tsx

@@ -12,7 +12,6 @@ import { User } from 'common/user'
 import { formatWithToken, shortFormatNumber } from 'common/util/format'
 import { removeUndefinedProps } from 'common/util/object'
 import { removeEmojis } from 'common/util/string'
-import { capitalize } from 'lodash'
 import { TbDropletHeart, TbMoneybag } from 'react-icons/tb'
 import { ClaimButton } from 'web/components/ad/claim-ad-button'
 import { BinaryMultiAnswersPanel } from 'web/components/answers/binary-multi-answers-panel'
@@ -37,7 +36,6 @@ import { track } from 'web/lib/service/analytics'
 import { getAdCanPayFunds } from 'web/lib/supabase/ads'
 import { getMarketMovementInfo } from 'web/lib/supabase/feed-timeline/feed-market-movement-display'
 import { SpiceCoin } from 'web/public/custom-components/spiceCoin'
-import { SweepiesCoin } from 'web/public/custom-components/sweepiesCoin'
 import { SimpleAnswerBars } from '../answers/answers-panel'
 import { BetButton } from '../bet/feed-bet-button'
 import { CommentsButton } from '../comments/comments-button'
@@ -53,6 +51,8 @@ import { UserHovercard } from '../user/user-hovercard'
 import { ClickFrame } from '../widgets/click-frame'
 import { ReactButton } from './react-button'
 import { TradesButton } from './trades-button'
+import { SweepiesCoin } from 'web/public/custom-components/sweepiesCoin'
+import { capitalize } from 'lodash'
 
 const DEBUG_FEED_CARDS =
   typeof window != 'undefined' &&
@@ -167,9 +167,7 @@ export function FeedContractCard(props: {
   return (
     <ClickFrame
       className={clsx(
-        isPrizeMarket || isCashContract
-          ? 'mt-2 ring-1 ring-amber-200 hover:ring-amber-400 dark:ring-amber-400 hover:dark:ring-amber-200'
-          : 'ring-primary-200 hover:ring-1',
+        'ring-primary-200 hover:ring-1',
 
         'relative cursor-pointer rounded-xl transition-all ',
         'flex w-full flex-col gap-0.5 px-4',
@@ -198,18 +196,6 @@ export function FeedContractCard(props: {
             <SpiceCoin className="-mt-0.5" /> Prize Market
           </span>
         </div>
-      ) : isCashContract ? (
-        <div
-          className={clsx(
-            'absolute right-4 top-0 z-40 -translate-y-1/2 transform bg-amber-200 text-amber-700',
-            'rounded-full px-2 py-0.5 text-xs font-semibold'
-          )}
-        >
-          <span>
-            <SweepiesCoin className="-mt-0.5" /> {capitalize(SWEEPIES_NAME)}{' '}
-            Market
-          </span>
-        </div>
       ) : (
         <></>
       )}
@@ -236,10 +222,22 @@ export function FeedContractCard(props: {
             </Row>
           </UserHovercard>
           <Row className="gap-2">
-            {promotedData && canAdPay && (
-              <div className="text-ink-400 w-12 text-sm">
-                Ad {adSecondsLeft ? adSecondsLeft + 's' : ''}
-              </div>
+            {isCashContract ? (
+              <span
+                className={clsx(
+                  ' bg-amber-200 text-amber-700',
+                  'rounded-full px-2 pt-1 text-xs font-semibold'
+                )}
+              >
+                <SweepiesCoin className="-mt-0.5" /> {capitalize(SWEEPIES_NAME)}{' '}
+              </span>
+            ) : (
+              promotedData &&
+              canAdPay && (
+                <div className="text-ink-400 w-12 text-sm">
+                  Ad {adSecondsLeft ? adSecondsLeft + 's' : ''}
+                </div>
+              )
             )}
             {marketTier ? (
               <TierTooltip tier={marketTier} contract={contract} />
@@ -532,9 +530,9 @@ export const LoadingCards = (props: { rows?: number }) => {
   const { rows = 3 } = props
   return (
     <Col className="w-full">
-      {[...Array(rows)].map((r) => (
+      {[...Array(rows)].map((r, i) => (
         <Col
-          key={'loading-' + r}
+          key={'loading-' + i}
           className="bg-canvas-0 border-canvas-0 mb-4 gap-2 rounded-xl border p-4 drop-shadow-md"
         >
           <Row className="mb-2 items-center gap-2">

web/components/layout/tabs.tsx

@@ -14,6 +14,7 @@ import { usePersistentLocalState } from 'web/hooks/use-persistent-local-state'
 
 export type Tab = {
   title: string
+  titleElement?: ReactNode
   content: ReactNode
   stackedTabIcon?: ReactNode
   inlineTabIcon?: ReactNode
@@ -80,7 +81,9 @@ export function MinimalistTabs(props: TabProps & { activeIndex: number }) {
             )}
           >
             <Tooltip text={tab.tooltip}>
-              <Row className={'items-center'}>{tab.title}</Row>
+              <Row className={'items-center'}>
+                {tab.titleElement ?? tab.title}
+              </Row>
             </Tooltip>
           </a>
         ))}
@@ -166,7 +169,7 @@ export function ControlledTabs(props: TabProps & { activeIndex: number }) {
                   <Row className="justify-center">{tab.stackedTabIcon}</Row>
                 )}
                 <Row className={'items-center'}>
-                  {tab.title}
+                  {tab.titleElement ?? tab.title}
                   {tab.inlineTabIcon}
                 </Row>
               </Tooltip>

web/components/nav/bottom-nav-bar.tsx

@@ -7,7 +7,6 @@ import {
   TransitionChild,
 } from '@headlessui/react'
 import {
-  GlobeAltIcon,
   NewspaperIcon,
   QuestionMarkCircleIcon,
   SearchIcon,
@@ -19,7 +18,6 @@ import { User } from 'common/user'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { Fragment, useState } from 'react'
-import { GiCapitol } from 'react-icons/gi'
 import { UnseenMessagesBubble } from 'web/components/messaging/messages-icon'
 import { NotificationsIcon } from 'web/components/notifications-icon'
 import { useIsIframe } from 'web/hooks/use-is-iframe'
@@ -32,6 +30,7 @@ import { Avatar } from '../widgets/avatar'
 import { CoinNumber } from '../widgets/coin-number'
 import Sidebar from './sidebar'
 import { NavItem } from './sidebar-item'
+import { PiSquaresFour } from 'react-icons/pi'
 
 export const BOTTOM_NAV_BAR_HEIGHT = 58
 
@@ -48,9 +47,9 @@ function getNavigation(user: User) {
       icon: SearchIcon,
     },
     {
-      name: 'Explore',
-      href: '/explore',
-      icon: GlobeAltIcon,
+      name: 'Markets',
+      href: '/markets',
+      icon: PiSquaresFour,
     },
     {
       name: 'Profile',
@@ -67,9 +66,9 @@ function getNavigation(user: User) {
 const signedOutNavigation = () => [
   { name: 'Browse', href: '/browse', icon: SearchIcon, alwaysShowName: true },
   {
-    name: 'Election',
-    href: '/election',
-    icon: GiCapitol,
+    name: 'Markets',
+    href: '/markets',
+    icon: PiSquaresFour,
     alwaysShowName: true,
     // prefetch: false, // should we not prefetch this?
   },

web/components/nav/sidebar.tsx

@@ -7,8 +7,9 @@ import {
   QuestionMarkCircleIcon,
   NewspaperIcon,
   LoginIcon,
-  GlobeAltIcon,
   SearchIcon,
+  GlobeAltIcon,
+  LightningBoltIcon,
 } from '@heroicons/react/outline'
 import TrophyIcon from 'web/lib/icons/trophy-icon.svg'
 import clsx from 'clsx'
@@ -36,7 +37,7 @@ import { ReportsIcon } from '../reports-icon'
 import { AddFundsButton } from '../profile/add-funds-button'
 import { Col } from '../layout/col'
 import { TbPigMoney } from 'react-icons/tb'
-import { LightningBoltIcon } from '@heroicons/react/outline'
+import { PiSquaresFourLight } from 'react-icons/pi'
 // import { PiRobotBold } from 'react-icons/pi'
 
 export default function Sidebar(props: {
@@ -139,6 +140,11 @@ const getDesktopNav = (
   if (loggedIn)
     return buildArray(
       { name: 'Browse', href: '/home', icon: SearchIcon },
+      {
+        name: 'Markets',
+        href: '/markets',
+        icon: PiSquaresFourLight,
+      },
       {
         name: 'Activity',
         href: '/activity',
@@ -209,6 +215,7 @@ const getMobileNav = (
   const { isAdminOrMod } = options
 
   return buildArray<NavItem>(
+    { name: 'Markets', href: '/markets', icon: PiSquaresFourLight },
     { name: 'Activity', href: '/activity', icon: LightningBoltIcon },
     { name: 'Leagues', href: '/leagues', icon: TrophyIcon },
     // {

web/next.config.js

@@ -124,12 +124,7 @@ module.exports = {
       },
       {
         source: '/this-month',
-        destination: '/markets?f=closing-this-month&s=most-popular',
-        permanent: true,
-      },
-      {
-        source: '/markets',
-        destination: '/browse',
+        destination: '/browse?f=closing-this-month&s=most-popular',
         permanent: true,
       },
       {