From 61ae481a035612ba1699f3e7d70c0069b1823ccc Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Wed, 10 Aug 2022 18:42:44 -0500
Subject: [PATCH 01/10] Document cancel bet

---
 docs/docs/api.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/docs/api.md b/docs/docs/api.md
index 48564cb3..e4936418 100644
--- a/docs/docs/api.md
+++ b/docs/docs/api.md
@@ -528,6 +528,10 @@ $ curl https://manifold.markets/api/v0/bet -X POST -H 'Content-Type: application
                  "contractId":"{...}"}'
 ```
 
+### `POST /v0/bet/cancel/[id]`
+
+Cancel the limit order of a bet with the specified id. If the bet was unfilled, it will be cancelled so that no other bets will match with it. This is action irreversable.
+
 ### `POST /v0/market`
 
 Creates a new market on behalf of the authorized user.

From 6e93f11a5949147876a13ff6f95dd7471f5ef9bc Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Thu, 11 Aug 2022 00:00:40 -0500
Subject: [PATCH 02/10] Fix bolded group chat not getting unbolded

---
 web/components/groups/group-chat.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/components/groups/group-chat.tsx b/web/components/groups/group-chat.tsx
index 62d327f2..0f9e8955 100644
--- a/web/components/groups/group-chat.tsx
+++ b/web/components/groups/group-chat.tsx
@@ -21,6 +21,7 @@ import { Content, useTextEditor } from 'web/components/editor'
 import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications'
 import { ChevronDownIcon, UsersIcon } from '@heroicons/react/outline'
 import { setNotificationsAsSeen } from 'web/pages/notifications'
+import { usePrivateUser } from 'web/hooks/use-user'
 
 export function GroupChat(props: {
   messages: Comment[]
@@ -29,6 +30,9 @@ export function GroupChat(props: {
   tips: CommentTipMap
 }) {
   const { messages, user, group, tips } = props
+
+  const privateUser = usePrivateUser(user?.id)
+
   const { editor, upload } = useTextEditor({
     simple: true,
     placeholder: 'Send a message',
@@ -175,6 +179,15 @@ export function GroupChat(props: {
           </div>
         </div>
       )}
+
+      {privateUser && (
+        <GroupChatNotificationsIcon
+          group={group}
+          privateUser={privateUser}
+          shouldSetAsSeen={true}
+          hidden={true}
+        />
+      )}
     </Col>
   )
 }
@@ -248,6 +261,7 @@ export function GroupChatInBubble(props: {
             group={group}
             privateUser={privateUser}
             shouldSetAsSeen={shouldShowChat}
+            hidden={false}
           />
         )}
       </button>
@@ -259,8 +273,9 @@ function GroupChatNotificationsIcon(props: {
   group: Group
   privateUser: PrivateUser
   shouldSetAsSeen: boolean
+  hidden: boolean
 }) {
-  const { privateUser, group, shouldSetAsSeen } = props
+  const { privateUser, group, shouldSetAsSeen, hidden } = props
   const preferredNotificationsForThisGroup = useUnseenPreferredNotifications(
     privateUser,
     {
@@ -282,7 +297,9 @@ function GroupChatNotificationsIcon(props: {
   return (
     <div
       className={
-        preferredNotificationsForThisGroup.length > 0 && !shouldSetAsSeen
+        !hidden &&
+        preferredNotificationsForThisGroup.length > 0 &&
+        !shouldSetAsSeen
           ? 'absolute right-4 top-4 h-3 w-3 rounded-full border-2 border-white bg-red-500'
           : 'hidden'
       }

From 3f6ca6c8ed8fb649b55975c647b5b2d724f3650a Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Thu, 11 Aug 2022 00:38:15 -0500
Subject: [PATCH 03/10] Make Manifold account able to resolve markets

---
 common/envs/constants.ts        | 4 ++++
 functions/src/resolve-market.ts | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/common/envs/constants.ts b/common/envs/constants.ts
index 7092d711..48f9bf63 100644
--- a/common/envs/constants.ts
+++ b/common/envs/constants.ts
@@ -25,6 +25,10 @@ export function isAdmin(email: string) {
   return ENV_CONFIG.adminEmails.includes(email)
 }
 
+export function isManifoldId(userId: string) {
+  return userId === 'IPTOzEqrpkWmEzh6hwvAyY9PqFb2'
+}
+
 export const DOMAIN = ENV_CONFIG.domain
 export const FIREBASE_CONFIG = ENV_CONFIG.firebaseConfig
 export const PROJECT_ID = ENV_CONFIG.firebaseConfig.projectId
diff --git a/functions/src/resolve-market.ts b/functions/src/resolve-market.ts
index cc07d4be..7277f40b 100644
--- a/functions/src/resolve-market.ts
+++ b/functions/src/resolve-market.ts
@@ -18,7 +18,7 @@ import {
   groupPayoutsByUser,
   Payout,
 } from '../../common/payouts'
-import { isAdmin } from '../../common/envs/constants'
+import { isManifoldId } from '../../common/envs/constants'
 import { removeUndefinedProps } from '../../common/util/object'
 import { LiquidityProvision } from '../../common/liquidity-provision'
 import { APIError, newEndpoint, validate } from './api'
@@ -82,7 +82,7 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
     req.body
   )
 
-  if (creatorId !== auth.uid && !isAdmin(auth.uid))
+  if (creatorId !== auth.uid && !isManifoldId(auth.uid))
     throw new APIError(403, 'User is not creator of contract')
 
   if (contract.resolution) throw new APIError(400, 'Contract already resolved')

From 99326eb65a1ef74288f1160857c1d4ef2294864d Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Thu, 11 Aug 2022 12:30:34 -0700
Subject: [PATCH 04/10] fix spacing of long group names on markets

---
 web/components/contract/contract-details.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 90b5f3d1..6fdd82bd 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -149,7 +149,7 @@ export function ContractDetails(props: {
   const groupInfo = (
     <Row>
       <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
-      <span className={'line-clamp-1'}>
+      <span className="truncate">
         {groupToDisplay ? groupToDisplay.name : 'No group'}
       </span>
     </Row>

From daa86fa330ccbf88fe3d664ff6ed00f41d80379b Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Thu, 11 Aug 2022 12:53:42 -0700
Subject: [PATCH 05/10] Change tabs to keep all individual tab components in
 the DOM (#743)

---
 web/components/layout/tabs.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/components/layout/tabs.tsx b/web/components/layout/tabs.tsx
index a87c6607..3d72b13c 100644
--- a/web/components/layout/tabs.tsx
+++ b/web/components/layout/tabs.tsx
@@ -28,7 +28,6 @@ export function ControlledTabs(props: TabProps & { activeIndex: number }) {
     className,
     currentPageForAnalytics,
   } = props
-  const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case
   return (
     <>
       <nav
@@ -64,7 +63,11 @@ export function ControlledTabs(props: TabProps & { activeIndex: number }) {
           </a>
         ))}
       </nav>
-      {activeTab?.content}
+      {tabs.map((tab, i) => (
+        <div key={i} className={i === activeIndex ? 'block' : 'hidden'}>
+          {tab.content}
+        </div>
+      ))}
     </>
   )
 }

From ad75ecdc8780c580681f10f992e1fe5d75aacc45 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Thu, 11 Aug 2022 12:53:54 -0700
Subject: [PATCH 06/10] Move liquidity provision fetch down into ContractTabs
 (#741)

---
 web/components/contract/contract-tabs.tsx | 8 +++++---
 web/pages/[username]/[contractSlug].tsx   | 5 +----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index 5aee7899..eb455df0 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -8,18 +8,17 @@ import { Spacer } from '../layout/spacer'
 import { Tabs } from '../layout/tabs'
 import { Col } from '../layout/col'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
-import { LiquidityProvision } from 'common/liquidity-provision'
 import { useComments } from 'web/hooks/use-comments'
+import { useLiquidity } from 'web/hooks/use-liquidity'
 
 export function ContractTabs(props: {
   contract: Contract
   user: User | null | undefined
   bets: Bet[]
-  liquidityProvisions: LiquidityProvision[]
   comments: Comment[]
   tips: CommentTipMap
 }) {
-  const { contract, user, bets, tips, liquidityProvisions } = props
+  const { contract, user, bets, tips } = props
   const { outcomeType } = contract
 
   const userBets = user && bets.filter((bet) => bet.userId === user.id)
@@ -27,6 +26,9 @@ export function ContractTabs(props: {
     (bet) => !bet.isAnte && !bet.isRedemption && bet.amount !== 0
   )
 
+  const liquidityProvisions =
+    useLiquidity(contract.id)?.filter((l) => !l.isAnte && l.amount > 0) ?? []
+
   // Load comments here, so the badge count will be correct
   const updatedComments = useComments(contract.id)
   const comments = updatedComments ?? props.comments
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index c35f5d98..e122db04 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -36,7 +36,6 @@ import { CPMMBinaryContract } from 'common/contract'
 import { AlertBox } from 'web/components/alert-box'
 import { useTracking } from 'web/hooks/use-tracking'
 import { CommentTipMap, useTipTxns } from 'web/hooks/use-tip-txns'
-import { useLiquidity } from 'web/hooks/use-liquidity'
 import { useSaveReferral } from 'web/hooks/use-save-referral'
 import { getOpenGraphProps } from 'web/components/contract/contract-card-preview'
 import { User } from 'common/user'
@@ -161,8 +160,7 @@ export function ContractPageContent(
   })
 
   const bets = useBets(contract.id) ?? props.bets
-  const liquidityProvisions =
-    useLiquidity(contract.id)?.filter((l) => !l.isAnte && l.amount > 0) ?? []
+
   // Sort for now to see if bug is fixed.
   comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
 
@@ -267,7 +265,6 @@ export function ContractPageContent(
         <ContractTabs
           contract={contract}
           user={user}
-          liquidityProvisions={liquidityProvisions}
           bets={bets}
           tips={tips}
           comments={comments}

From b9f347b7f43a4f7bfc8975c1eb2a1d99fac53afb Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Thu, 11 Aug 2022 12:54:09 -0700
Subject: [PATCH 07/10] Use `UserFollowButton` instead of `FollowButton` in
 `UserPage` (#742)

---
 web/components/user-page.tsx | 29 +++--------------------------
 1 file changed, 3 insertions(+), 26 deletions(-)

diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index 5415ed39..1adf9f2d 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -6,12 +6,7 @@ import { LinkIcon } from '@heroicons/react/solid'
 import { PencilIcon } from '@heroicons/react/outline'
 import Confetti from 'react-confetti'
 
-import {
-  follow,
-  getPortfolioHistory,
-  unfollow,
-  User,
-} from 'web/lib/firebase/users'
+import { getPortfolioHistory, User } from 'web/lib/firebase/users'
 import { CreatorContractsList } from './contract/contracts-grid'
 import { SEO } from './SEO'
 import { Page } from './page'
@@ -31,8 +26,7 @@ import { getContractFromId, listContracts } from 'web/lib/firebase/contracts'
 import { LoadingIndicator } from './loading-indicator'
 import { BetsList } from './bets-list'
 import { FollowersButton, FollowingButton } from './following-button'
-import { useFollows } from 'web/hooks/use-follows'
-import { FollowButton } from './follow-button'
+import { UserFollowButton } from './follow-button'
 import { PortfolioMetrics } from 'common/user'
 import { GroupsButton } from 'web/components/groups/groups-button'
 import { PortfolioValueSection } from './portfolio/portfolio-value-section'
@@ -120,19 +114,8 @@ export function UserPage(props: { user: User; currentUser?: User }) {
     }
   }, [userBets, usersComments])
 
-  const yourFollows = useFollows(currentUser?.id)
-  const isFollowing = yourFollows?.includes(user.id)
   const profit = user.profitCached.allTime
 
-  const onFollow = () => {
-    if (!currentUser) return
-    follow(currentUser.id, user.id)
-  }
-  const onUnfollow = () => {
-    if (!currentUser) return
-    unfollow(currentUser.id, user.id)
-  }
-
   return (
     <Page key={user.id}>
       <SEO
@@ -167,13 +150,7 @@ export function UserPage(props: { user: User; currentUser?: User }) {
 
         {/* Top right buttons (e.g. edit, follow) */}
         <div className="absolute right-0 top-0 mt-4 mr-4">
-          {!isCurrentUser && (
-            <FollowButton
-              isFollowing={isFollowing}
-              onFollow={onFollow}
-              onUnfollow={onUnfollow}
-            />
-          )}
+          {!isCurrentUser && <UserFollowButton userId={user.id} />}
           {isCurrentUser && (
             <SiteLink className="btn" href="/profile">
               <PencilIcon className="h-5 w-5" />{' '}

From 4e8b94a28c2d54157da26ffe658ba003395cfa2c Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Thu, 11 Aug 2022 12:55:25 -0700
Subject: [PATCH 08/10] Componentize confetti to isolate re-renders due to
 window size (#740)

* Componentize confetti to isolate re-renders due to window size

* Clean up debug logging
---
 web/components/fullscreen-confetti.tsx  |  7 +++++++
 web/components/user-page.tsx            | 11 ++---------
 web/pages/[username]/[contractSlug].tsx | 12 ++----------
 3 files changed, 11 insertions(+), 19 deletions(-)
 create mode 100644 web/components/fullscreen-confetti.tsx

diff --git a/web/components/fullscreen-confetti.tsx b/web/components/fullscreen-confetti.tsx
new file mode 100644
index 00000000..390b3a9b
--- /dev/null
+++ b/web/components/fullscreen-confetti.tsx
@@ -0,0 +1,7 @@
+import Confetti, { Props as ConfettiProps } from 'react-confetti'
+import { useWindowSize } from 'web/hooks/use-window-size'
+
+export function FullscreenConfetti(props: ConfettiProps) {
+  const { width, height } = useWindowSize()
+  return <Confetti {...props} width={width} height={height} />
+}
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index 1adf9f2d..322ddb96 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { LinkIcon } from '@heroicons/react/solid'
 import { PencilIcon } from '@heroicons/react/outline'
-import Confetti from 'react-confetti'
 
 import { getPortfolioHistory, User } from 'web/lib/firebase/users'
 import { CreatorContractsList } from './contract/contracts-grid'
@@ -19,11 +18,11 @@ import { Row } from './layout/row'
 import { genHash } from 'common/util/random'
 import { QueryUncontrolledTabs } from './layout/tabs'
 import { UserCommentsList } from './comments-list'
-import { useWindowSize } from 'web/hooks/use-window-size'
 import { Comment, getUsersComments } from 'web/lib/firebase/comments'
 import { Contract } from 'common/contract'
 import { getContractFromId, listContracts } from 'web/lib/firebase/contracts'
 import { LoadingIndicator } from './loading-indicator'
+import { FullscreenConfetti } from 'web/components/fullscreen-confetti'
 import { BetsList } from './bets-list'
 import { FollowersButton, FollowingButton } from './following-button'
 import { UserFollowButton } from './follow-button'
@@ -82,7 +81,6 @@ export function UserPage(props: { user: User; currentUser?: User }) {
     Dictionary<Contract> | undefined
   >()
   const [showConfetti, setShowConfetti] = useState(false)
-  const { width, height } = useWindowSize()
 
   useEffect(() => {
     const claimedMana = router.query['claimed-mana'] === 'yes'
@@ -124,12 +122,7 @@ export function UserPage(props: { user: User; currentUser?: User }) {
         url={`/${user.username}`}
       />
       {showConfetti && (
-        <Confetti
-          width={width ? width : 500}
-          height={height ? height : 500}
-          recycle={false}
-          numberOfPieces={300}
-        />
+        <FullscreenConfetti recycle={false} numberOfPieces={300} />
       )}
       {/* Banner image up top, with an circle avatar overlaid */}
       <div
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index e122db04..94773b6d 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -25,8 +25,7 @@ import { Leaderboard } from 'web/components/leaderboard'
 import { resolvedPayout } from 'common/calculate'
 import { formatMoney } from 'common/util/format'
 import { ContractTabs } from 'web/components/contract/contract-tabs'
-import { useWindowSize } from 'web/hooks/use-window-size'
-import Confetti from 'react-confetti'
+import { FullscreenConfetti } from 'web/components/fullscreen-confetti'
 import { NumericBetPanel } from 'web/components/numeric-bet-panel'
 import { NumericResolutionPanel } from 'web/components/numeric-resolution-panel'
 import { useIsIframe } from 'web/hooks/use-is-iframe'
@@ -166,8 +165,6 @@ export function ContractPageContent(
 
   const tips = useTipTxns({ contractId: contract.id })
 
-  const { width, height } = useWindowSize()
-
   const [showConfetti, setShowConfetti] = useState(false)
 
   useEffect(() => {
@@ -194,12 +191,7 @@ export function ContractPageContent(
   return (
     <Page rightSidebar={rightSidebar}>
       {showConfetti && (
-        <Confetti
-          width={width ? width : 500}
-          height={height ? height : 500}
-          recycle={false}
-          numberOfPieces={300}
-        />
+        <FullscreenConfetti recycle={false} numberOfPieces={300} />
       )}
 
       {ogCardProps && (

From dc95587cca13ae53013d58ed4fd0f7ff88d3f71f Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Thu, 11 Aug 2022 14:32:02 -0700
Subject: [PATCH 09/10] Add editor toolbar to choose and embed markets (#702)

* Embed markets using the "add markets" template

* Override dev domain

* Improve market modal style

- contract searchbar now sticky
- entire card clickable to select (if quickbet is hidden)
- adjust selected card styles

* remove extra export

* Hide pills

* Fix browser redirect warning

* Insert all markets instead of just one

* fix type error

* fixup "Insert all markets instead of just one"

Co-authored-by: Sinclair Chen <abc.sinclair@gmail.com>
---
 common/envs/dev.ts                            |   1 +
 web/components/contract-search.tsx            | 180 +++++++++---------
 web/components/contract/contract-card.tsx     |   3 +-
 .../contract/contract-description.tsx         |   7 +-
 web/components/contract/contract-details.tsx  |   5 +-
 web/components/editor.tsx                     |  36 +++-
 web/components/editor/market-modal.tsx        |  86 +++++++++
 web/components/editor/utils.ts                |  17 +-
 web/components/share-embed-button.tsx         |   8 +-
 web/hooks/use-sort-and-query-params.tsx       |  25 ++-
 web/pages/contract-search-firestore.tsx       |   6 +-
 11 files changed, 249 insertions(+), 125 deletions(-)
 create mode 100644 web/components/editor/market-modal.tsx

diff --git a/common/envs/dev.ts b/common/envs/dev.ts
index 3c062472..719de36e 100644
--- a/common/envs/dev.ts
+++ b/common/envs/dev.ts
@@ -2,6 +2,7 @@ import { EnvConfig, PROD_CONFIG } from './prod'
 
 export const DEV_CONFIG: EnvConfig = {
   ...PROD_CONFIG,
+  domain: 'dev.manifold.markets',
   firebaseConfig: {
     apiKey: 'AIzaSyBoq3rzUa8Ekyo3ZaTnlycQYPRCA26VpOw',
     authDomain: 'dev-mantic-markets.firebaseapp.com',
diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx
index 30be1f6e..40a62923 100644
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@@ -3,14 +3,17 @@ import algoliasearch from 'algoliasearch/lite'
 
 import { Contract } from 'common/contract'
 import { User } from 'common/user'
-import { Sort, useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
+import {
+  QuerySortOptions,
+  Sort,
+  useQueryAndSortParams,
+} from '../hooks/use-sort-and-query-params'
 import {
   ContractHighlightOptions,
   ContractsGrid,
 } from './contract/contracts-grid'
 import { Row } from './layout/row'
 import { useEffect, useMemo, useState } from 'react'
-import { Spacer } from './layout/spacer'
 import { ENV, IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
 import { useFollows } from 'web/hooks/use-follows'
 import { track, trackCallback } from 'web/lib/service/analytics'
@@ -21,6 +24,7 @@ import { PillButton } from './buttons/pill-button'
 import { range, sortBy } from 'lodash'
 import { DEFAULT_CATEGORY_GROUPS } from 'common/categories'
 import { Col } from './layout/col'
+import clsx from 'clsx'
 
 const searchClient = algoliasearch(
   'GJQPAYENIF',
@@ -45,12 +49,8 @@ export const DEFAULT_SORT = 'score'
 type filter = 'personal' | 'open' | 'closed' | 'resolved' | 'all'
 
 export function ContractSearch(props: {
-  user: User | null | undefined
-  querySortOptions?: {
-    defaultSort: Sort
-    defaultFilter?: filter
-    shouldLoadFromStorage?: boolean
-  }
+  user?: User | null
+  querySortOptions?: { defaultFilter?: filter } & QuerySortOptions
   additionalFilter?: {
     creatorId?: string
     tag?: string
@@ -66,6 +66,7 @@ export function ContractSearch(props: {
     hideGroupLink?: boolean
     hideQuickBet?: boolean
   }
+  headerClassName?: string
 }) {
   const {
     user,
@@ -77,6 +78,7 @@ export function ContractSearch(props: {
     showPlaceHolder,
     cardHideOptions,
     highlightOptions,
+    headerClassName,
   } = props
 
   const memberGroups = (useMemberGroups(user?.id) ?? []).filter(
@@ -99,11 +101,8 @@ export function ContractSearch(props: {
 
   const follows = useFollows(user?.id)
 
-  const { shouldLoadFromStorage, defaultSort } = querySortOptions ?? {}
-  const { query, setQuery, sort, setSort } = useQueryAndSortParams({
-    defaultSort,
-    shouldLoadFromStorage,
-  })
+  const { query, setQuery, sort, setSort } =
+    useQueryAndSortParams(querySortOptions)
 
   const [filter, setFilter] = useState<filter>(
     querySortOptions?.defaultFilter ?? 'open'
@@ -257,87 +256,90 @@ export function ContractSearch(props: {
   }
 
   return (
-    <Col>
-      <Row className="gap-1 sm:gap-2">
-        <input
-          type="text"
-          value={query}
-          onChange={(e) => updateQuery(e.target.value)}
-          onBlur={trackCallback('search', { query })}
-          placeholder={showPlaceHolder ? `Search ${filter} markets` : ''}
-          className="input input-bordered w-full"
-        />
-        {!query && (
-          <select
-            className="select select-bordered"
-            value={filter}
-            onChange={(e) => selectFilter(e.target.value as filter)}
-          >
-            <option value="open">Open</option>
-            <option value="closed">Closed</option>
-            <option value="resolved">Resolved</option>
-            <option value="all">All</option>
-          </select>
+    <Col className="h-full">
+      <Col
+        className={clsx(
+          'bg-base-200 sticky top-0 z-20 gap-3 pb-3',
+          headerClassName
         )}
-        {!hideOrderSelector && !query && (
-          <select
-            className="select select-bordered"
-            value={sort}
-            onChange={(e) => selectSort(e.target.value as Sort)}
-          >
-            {sortOptions.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-        )}
-      </Row>
-
-      <Spacer h={3} />
-
-      {pillsEnabled && (
-        <Row className="scrollbar-hide items-start gap-2 overflow-x-auto">
-          <PillButton
-            key={'all'}
-            selected={pillFilter === undefined}
-            onSelect={selectPill(undefined)}
-          >
-            All
-          </PillButton>
-          <PillButton
-            key={'personal'}
-            selected={pillFilter === 'personal'}
-            onSelect={selectPill('personal')}
-          >
-            {user ? 'For you' : 'Featured'}
-          </PillButton>
-
-          {user && (
-            <PillButton
-              key={'your-bets'}
-              selected={pillFilter === 'your-bets'}
-              onSelect={selectPill('your-bets')}
+      >
+        <Row className="gap-1 sm:gap-2">
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => updateQuery(e.target.value)}
+            onBlur={trackCallback('search', { query })}
+            placeholder={showPlaceHolder ? `Search ${filter} markets` : ''}
+            className="input input-bordered w-full"
+          />
+          {!query && (
+            <select
+              className="select select-bordered"
+              value={filter}
+              onChange={(e) => selectFilter(e.target.value as filter)}
             >
-              Your bets
-            </PillButton>
+              <option value="open">Open</option>
+              <option value="closed">Closed</option>
+              <option value="resolved">Resolved</option>
+              <option value="all">All</option>
+            </select>
+          )}
+          {!hideOrderSelector && !query && (
+            <select
+              className="select select-bordered"
+              value={sort}
+              onChange={(e) => selectSort(e.target.value as Sort)}
+            >
+              {sortOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
           )}
-
-          {pillGroups.map(({ name, slug }) => {
-            return (
-              <PillButton
-                key={slug}
-                selected={pillFilter === slug}
-                onSelect={selectPill(slug)}
-              >
-                {name}
-              </PillButton>
-            )
-          })}
         </Row>
-      )}
 
-      <Spacer h={3} />
+        {pillsEnabled && (
+          <Row className="scrollbar-hide items-start gap-2 overflow-x-auto">
+            <PillButton
+              key={'all'}
+              selected={pillFilter === undefined}
+              onSelect={selectPill(undefined)}
+            >
+              All
+            </PillButton>
+            <PillButton
+              key={'personal'}
+              selected={pillFilter === 'personal'}
+              onSelect={selectPill('personal')}
+            >
+              {user ? 'For you' : 'Featured'}
+            </PillButton>
+
+            {user && (
+              <PillButton
+                key={'your-bets'}
+                selected={pillFilter === 'your-bets'}
+                onSelect={selectPill('your-bets')}
+              >
+                Your bets
+              </PillButton>
+            )}
+
+            {pillGroups.map(({ name, slug }) => {
+              return (
+                <PillButton
+                  key={slug}
+                  selected={pillFilter === slug}
+                  onSelect={selectPill(slug)}
+                >
+                  {name}
+                </PillButton>
+              )
+            })}
+          </Row>
+        )}
+      </Col>
 
       {filter === 'personal' &&
       (follows ?? []).length === 0 &&
diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index 4ef90884..248c3863 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -76,7 +76,8 @@ export function ContractCard(props: {
           <Col className="relative flex-1 gap-3 pr-1">
             <div
               className={clsx(
-                'peer absolute -left-6 -top-4 -bottom-4 right-0 z-10'
+                'peer absolute -left-6 -top-4 -bottom-4 z-10',
+                hideQuickBet ? '-right-20' : 'right-0'
               )}
             >
               {onClick ? (
diff --git a/web/components/contract/contract-description.tsx b/web/components/contract/contract-description.tsx
index 4c9b77a2..9bf2114b 100644
--- a/web/components/contract/contract-description.tsx
+++ b/web/components/contract/contract-description.tsx
@@ -13,7 +13,7 @@ import { TextEditor, useTextEditor } from 'web/components/editor'
 import { Button } from '../button'
 import { Spacer } from '../layout/spacer'
 import { Editor, Content as ContentType } from '@tiptap/react'
-import { appendToEditor } from '../editor/utils'
+import { insertContent } from '../editor/utils'
 
 export function ContractDescription(props: {
   contract: Contract
@@ -95,7 +95,8 @@ function RichEditContract(props: { contract: Contract; isAdmin?: boolean }) {
           size="xs"
           onClick={() => {
             setEditing(true)
-            appendToEditor(editor, `<p>${editTimestamp()}</p>`)
+            editor?.commands.focus('end')
+            insertContent(editor, `<p>${editTimestamp()}</p>`)
           }}
         >
           Edit description
@@ -127,7 +128,7 @@ function EditQuestion(props: {
 
   function joinContent(oldContent: ContentType, newContent: string) {
     const editor = new Editor({ content: oldContent, extensions: exhibitExts })
-    appendToEditor(editor, newContent)
+    insertContent(editor, newContent)
     return editor.getJSON()
   }
 
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 6fdd82bd..081b035d 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -33,7 +33,7 @@ import { Col } from 'web/components/layout/col'
 import { ContractGroupsList } from 'web/components/groups/contract-groups-list'
 import { SiteLink } from 'web/components/site-link'
 import { groupPath } from 'web/lib/firebase/groups'
-import { appendToEditor } from '../editor/utils'
+import { insertContent } from '../editor/utils'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 
@@ -283,7 +283,8 @@ function EditableCloseDate(props: {
       const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a')
 
       const editor = new Editor({ content, extensions: exhibitExts })
-      appendToEditor(
+      editor.commands.focus('end')
+      insertContent(
         editor,
         `<br><p>Close date updated to ${formattedCloseDate}</p>`
       )
diff --git a/web/components/editor.tsx b/web/components/editor.tsx
index d52913b3..d8a8d37f 100644
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@@ -21,12 +21,18 @@ import { useUsers } from 'web/hooks/use-users'
 import { mentionSuggestion } from './editor/mention-suggestion'
 import { DisplayMention } from './editor/mention'
 import Iframe from 'common/util/tiptap-iframe'
-import { CodeIcon, PhotographIcon } from '@heroicons/react/solid'
+import {
+  CodeIcon,
+  PhotographIcon,
+  PresentationChartLineIcon,
+} from '@heroicons/react/solid'
 import { Modal } from './layout/modal'
 import { Col } from './layout/col'
 import { Button } from './button'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
+import { MarketModal } from './editor/market-modal'
+import { insertContent } from './editor/utils'
 
 const DisplayImage = Image.configure({
   HTMLAttributes: {
@@ -105,7 +111,7 @@ export function useTextEditor(props: {
         // If the pasted content is iframe code, directly inject it
         const text = event.clipboardData?.getData('text/plain').trim() ?? ''
         if (isValidIframe(text)) {
-          editor.chain().insertContent(text).run()
+          insertContent(editor, text)
           return true // Prevent the code from getting pasted as text
         }
 
@@ -139,6 +145,7 @@ export function TextEditor(props: {
 }) {
   const { editor, upload, children } = props
   const [iframeOpen, setIframeOpen] = useState(false)
+  const [marketOpen, setMarketOpen] = useState(false)
 
   return (
     <>
@@ -148,16 +155,15 @@ export function TextEditor(props: {
           <EditorContent editor={editor} />
           {/* Toolbar, with buttons for images and embeds */}
           <div className="flex h-9 items-center gap-5 pl-4 pr-1">
-            <div className="flex items-center">
+            <div className="tooltip flex items-center" data-tip="Add image">
               <FileUploadButton
                 onFiles={upload.mutate}
                 className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
               >
                 <PhotographIcon className="h-5 w-5" aria-hidden="true" />
-                <span className="sr-only">Upload an image</span>
               </FileUploadButton>
             </div>
-            <div className="flex items-center">
+            <div className="tooltip flex items-center" data-tip="Add embed">
               <button
                 type="button"
                 onClick={() => setIframeOpen(true)}
@@ -169,7 +175,23 @@ export function TextEditor(props: {
                   setOpen={setIframeOpen}
                 />
                 <CodeIcon className="h-5 w-5" aria-hidden="true" />
-                <span className="sr-only">Embed an iframe</span>
+              </button>
+            </div>
+            <div className="tooltip flex items-center" data-tip="Add market">
+              <button
+                type="button"
+                onClick={() => setMarketOpen(true)}
+                className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
+              >
+                <MarketModal
+                  editor={editor}
+                  open={marketOpen}
+                  setOpen={setMarketOpen}
+                />
+                <PresentationChartLineIcon
+                  className="h-5 w-5"
+                  aria-hidden="true"
+                />
               </button>
             </div>
             {/* Spacer that also focuses editor on click */}
@@ -229,7 +251,7 @@ function IframeModal(props: {
             disabled={!valid}
             onClick={() => {
               if (editor && valid) {
-                editor.chain().insertContent(embedCode).run()
+                insertContent(editor, embedCode)
                 setInput('')
                 setOpen(false)
               }
diff --git a/web/components/editor/market-modal.tsx b/web/components/editor/market-modal.tsx
new file mode 100644
index 00000000..1c88afbc
--- /dev/null
+++ b/web/components/editor/market-modal.tsx
@@ -0,0 +1,86 @@
+import { Editor } from '@tiptap/react'
+import { Contract } from 'common/contract'
+import { useState } from 'react'
+import { Button } from '../button'
+import { ContractSearch } from '../contract-search'
+import { Col } from '../layout/col'
+import { Modal } from '../layout/modal'
+import { Row } from '../layout/row'
+import { LoadingIndicator } from '../loading-indicator'
+import { embedCode } from '../share-embed-button'
+import { insertContent } from './utils'
+
+export function MarketModal(props: {
+  editor: Editor | null
+  open: boolean
+  setOpen: (open: boolean) => void
+}) {
+  const { editor, open, setOpen } = props
+
+  const [contracts, setContracts] = useState<Contract[]>([])
+  const [loading, setLoading] = useState(false)
+
+  async function addContract(contract: Contract) {
+    if (contracts.map((c) => c.id).includes(contract.id)) {
+      setContracts(contracts.filter((c) => c.id !== contract.id))
+    } else setContracts([...contracts, contract])
+  }
+
+  async function doneAddingContracts() {
+    setLoading(true)
+    insertContent(editor, ...contracts.map(embedCode))
+    setLoading(false)
+    setOpen(false)
+    setContracts([])
+  }
+
+  return (
+    <Modal open={open} setOpen={setOpen} className={'sm:p-0'} size={'lg'}>
+      <Col className="h-[85vh] w-full gap-4 rounded-md bg-white">
+        <Row className="p-8 pb-0">
+          <div className={'text-xl text-indigo-700'}>Embed a market</div>
+
+          {!loading && (
+            <Row className="grow justify-end gap-4">
+              {contracts.length > 0 && (
+                <Button onClick={doneAddingContracts} color={'indigo'}>
+                  Embed {contracts.length} question
+                  {contracts.length > 1 && 's'}
+                </Button>
+              )}
+              <Button onClick={() => setContracts([])} color="gray">
+                Cancel
+              </Button>
+            </Row>
+          )}
+        </Row>
+
+        {loading && (
+          <div className="w-full justify-center">
+            <LoadingIndicator />
+          </div>
+        )}
+
+        <div className="overflow-y-scroll sm:px-8">
+          <ContractSearch
+            hideOrderSelector
+            onContractClick={addContract}
+            overrideGridClassName={
+              'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1'
+            }
+            showPlaceHolder
+            cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
+            querySortOptions={{ disableQueryString: true }}
+            highlightOptions={{
+              contractIds: contracts.map((c) => c.id),
+              highlightClassName:
+                '!bg-indigo-100 outline outline-2 outline-indigo-300',
+            }}
+            additionalFilter={{}} /* hide pills */
+            headerClassName="bg-white"
+          />
+        </div>
+      </Col>
+    </Modal>
+  )
+}
diff --git a/web/components/editor/utils.ts b/web/components/editor/utils.ts
index 74af38c5..50b94ce2 100644
--- a/web/components/editor/utils.ts
+++ b/web/components/editor/utils.ts
@@ -1,10 +1,13 @@
 import { Editor, Content } from '@tiptap/react'
 
-export function appendToEditor(editor: Editor | null, content: Content) {
-  editor
-    ?.chain()
-    .focus('end')
-    .createParagraphNear()
-    .insertContent(content)
-    .run()
+export function insertContent(editor: Editor | null, ...contents: Content[]) {
+  if (!editor) {
+    return
+  }
+
+  let e = editor.chain()
+  for (const content of contents) {
+    e = e.createParagraphNear().insertContent(content)
+  }
+  e.run()
 }
diff --git a/web/components/share-embed-button.tsx b/web/components/share-embed-button.tsx
index 1b24c689..8678299b 100644
--- a/web/components/share-embed-button.tsx
+++ b/web/components/share-embed-button.tsx
@@ -9,13 +9,11 @@ import { copyToClipboard } from 'web/lib/util/copy'
 import { ToastClipboard } from 'web/components/toast-clipboard'
 import { track } from 'web/lib/service/analytics'
 
-function copyEmbedCode(contract: Contract) {
+export function embedCode(contract: Contract) {
   const title = contract.question
   const src = `https://${DOMAIN}/embed${contractPath(contract)}`
 
-  const embedCode = `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
-
-  copyToClipboard(embedCode)
+  return `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
 }
 
 export function ShareEmbedButton(props: {
@@ -29,7 +27,7 @@ export function ShareEmbedButton(props: {
       as="div"
       className="relative z-10 flex-shrink-0"
       onMouseUp={() => {
-        copyEmbedCode(contract)
+        copyToClipboard(embedCode(contract))
         track('copy embed code')
       }}
     >
diff --git a/web/hooks/use-sort-and-query-params.tsx b/web/hooks/use-sort-and-query-params.tsx
index c4bce0c0..e917e4af 100644
--- a/web/hooks/use-sort-and-query-params.tsx
+++ b/web/hooks/use-sort-and-query-params.tsx
@@ -25,12 +25,18 @@ export function getSavedSort() {
   }
 }
 
-export function useQueryAndSortParams(options?: {
+export interface QuerySortOptions {
   defaultSort?: Sort
   shouldLoadFromStorage?: boolean
-}) {
-  const { defaultSort = DEFAULT_SORT, shouldLoadFromStorage = true } =
-    options ?? {}
+  /** Use normal react state instead of url query string */
+  disableQueryString?: boolean
+}
+
+export function useQueryAndSortParams({
+  defaultSort = DEFAULT_SORT,
+  shouldLoadFromStorage = true,
+  disableQueryString,
+}: QuerySortOptions = {}) {
   const router = useRouter()
 
   const { s: sort, q: query } = router.query as {
@@ -68,7 +74,9 @@ export function useQueryAndSortParams(options?: {
 
   const setQuery = (query: string | undefined) => {
     setQueryState(query)
-    pushQuery(query)
+    if (!disableQueryString) {
+      pushQuery(query)
+    }
   }
 
   useEffect(() => {
@@ -86,10 +94,13 @@ export function useQueryAndSortParams(options?: {
     }
   })
 
+  // use normal state if querydisableQueryString
+  const [sortState, setSortState] = useState(defaultSort)
+
   return {
-    sort: sort ?? defaultSort,
+    sort: disableQueryString ? sortState : sort ?? defaultSort,
     query: queryState ?? '',
-    setSort,
+    setSort: disableQueryString ? setSortState : setSort,
     setQuery,
   }
 }
diff --git a/web/pages/contract-search-firestore.tsx b/web/pages/contract-search-firestore.tsx
index fb05cf3a..f56c82d1 100644
--- a/web/pages/contract-search-firestore.tsx
+++ b/web/pages/contract-search-firestore.tsx
@@ -4,6 +4,7 @@ import { sortBy } from 'lodash'
 import { ContractsGrid } from 'web/components/contract/contracts-grid'
 import { useContracts } from 'web/hooks/use-contracts'
 import {
+  QuerySortOptions,
   Sort,
   useQueryAndSortParams,
 } from 'web/hooks/use-sort-and-query-params'
@@ -11,10 +12,7 @@ import {
 const MAX_CONTRACTS_RENDERED = 100
 
 export default function ContractSearchFirestore(props: {
-  querySortOptions?: {
-    defaultSort: Sort
-    shouldLoadFromStorage?: boolean
-  }
+  querySortOptions?: QuerySortOptions
   additionalFilter?: {
     creatorId?: string
     tag?: string

From daba28423ab0220116bd83b5a988c452f5a5b055 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Thu, 11 Aug 2022 14:41:21 -0700
Subject: [PATCH 10/10] Improve create page UI (#746)

* Adjust create page styles

* Keep answers when switching market type
---
 .../answers/multiple-choice-answers.tsx           | 15 ++++++---------
 web/components/choices-toggle-group.tsx           |  5 ++++-
 web/pages/create.tsx                              |  9 +++++----
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/web/components/answers/multiple-choice-answers.tsx b/web/components/answers/multiple-choice-answers.tsx
index 450c221a..69f54648 100644
--- a/web/components/answers/multiple-choice-answers.tsx
+++ b/web/components/answers/multiple-choice-answers.tsx
@@ -1,26 +1,23 @@
 import { MAX_ANSWER_LENGTH } from 'common/answer'
-import { useState } from 'react'
 import Textarea from 'react-expanding-textarea'
 import { XIcon } from '@heroicons/react/solid'
-
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
 
 export function MultipleChoiceAnswers(props: {
+  answers: string[]
   setAnswers: (answers: string[]) => void
 }) {
-  const [answers, setInternalAnswers] = useState(['', '', ''])
+  const { answers, setAnswers } = props
 
   const setAnswer = (i: number, answer: string) => {
     const newAnswers = setElement(answers, i, answer)
-    setInternalAnswers(newAnswers)
-    props.setAnswers(newAnswers)
+    setAnswers(newAnswers)
   }
 
   const removeAnswer = (i: number) => {
     const newAnswers = answers.slice(0, i).concat(answers.slice(i + 1))
-    setInternalAnswers(newAnswers)
-    props.setAnswers(newAnswers)
+    setAnswers(newAnswers)
   }
 
   const addAnswer = () => setAnswer(answers.length, '')
@@ -40,10 +37,10 @@ export function MultipleChoiceAnswers(props: {
           />
           {answers.length > 2 && (
             <button
-              className="btn btn-xs btn-outline ml-2"
+              className="-mr-2 rounded p-2"
               onClick={() => removeAnswer(i)}
             >
-              <XIcon className="h-4 w-4 flex-shrink-0" />
+              <XIcon className="h-5 w-5 flex-shrink-0" />
             </button>
           )}
         </Row>
diff --git a/web/components/choices-toggle-group.tsx b/web/components/choices-toggle-group.tsx
index 61c4e4fd..1e918eda 100644
--- a/web/components/choices-toggle-group.tsx
+++ b/web/components/choices-toggle-group.tsx
@@ -22,7 +22,10 @@ export function ChoicesToggleGroup(props: {
   } = props
   return (
     <RadioGroup
-      className={clsx(className, 'flex flex-row flex-wrap items-center gap-3')}
+      className={clsx(
+        className,
+        'flex flex-row flex-wrap items-center gap-2 sm:gap-3'
+      )}
       value={currentChoice.toString()}
       onChange={setChoice}
     >
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index 19ab2fe0..3225fb4d 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -120,7 +120,8 @@ export function NewContract(props: {
   const [isLogScale, setIsLogScale] = useState<boolean>(!!params?.isLogScale)
   const [initialValueString, setInitialValueString] = useState(initValue)
 
-  const [answers, setAnswers] = useState<string[]>([]) // for multiple choice
+  // for multiple choice, init to 3 empty answers
+  const [answers, setAnswers] = useState(['', '', ''])
 
   useEffect(() => {
     if (groupId)
@@ -285,7 +286,7 @@ export function NewContract(props: {
       <Spacer h={6} />
 
       {outcomeType === 'MULTIPLE_CHOICE' && (
-        <MultipleChoiceAnswers setAnswers={setAnswers} />
+        <MultipleChoiceAnswers answers={answers} setAnswers={setAnswers} />
       )}
 
       {outcomeType === 'PSEUDO_NUMERIC' && (
@@ -299,7 +300,7 @@ export function NewContract(props: {
             <Row className="gap-2">
               <input
                 type="number"
-                className="input input-bordered"
+                className="input input-bordered w-32"
                 placeholder="MIN"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => setMinString(e.target.value)}
@@ -310,7 +311,7 @@ export function NewContract(props: {
               />
               <input
                 type="number"
-                className="input input-bordered"
+                className="input input-bordered w-32"
                 placeholder="MAX"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => setMaxString(e.target.value)}