Cleanup

web/components/bet-panel.tsx

@@ -365,26 +365,24 @@ function BuyPanel(props: {
       <Spacer h={8} />
 
       {user && (
-        <Col>
+        <button
-          <button
+          className={clsx(
-            className={clsx(
+            'btn mb-2 flex-1',
-              'btn mb-2 flex-1',
+            betDisabled
-              betDisabled
+              ? 'btn-disabled'
-                ? 'btn-disabled'
+              : betChoice === 'YES'
-                : betChoice === 'YES'
+              ? 'btn-primary'
-                ? 'btn-primary'
+              : 'border-none bg-red-400 hover:bg-red-500',
-                : 'border-none bg-red-400 hover:bg-red-500',
+            isSubmitting ? 'loading' : ''
-              isSubmitting ? 'loading' : ''
+          )}
-            )}
+          onClick={betDisabled ? undefined : submitBet}
-            onClick={betDisabled ? undefined : submitBet}
+        >
-          >
+          {isSubmitting
-            {isSubmitting
+            ? 'Submitting...'
-              ? 'Submitting...'
+            : isLimitOrder
-              : isLimitOrder
+            ? 'Submit order'
-              ? 'Submit order'
+            : 'Submit bet'}
-              : 'Submit bet'}
+        </button>
-          </button>
-        </Col>
       )}
 
       {wasSubmitted && (
@@ -401,32 +399,29 @@ function QuickOrLimitBet(props: {
   const { isLimitOrder, setIsLimitOrder } = props
 
   return (
-    <Col className="align-center mb-4 justify-between">
+    <Row className="align-center mb-4 justify-between">
-      <Row>
+      <div className="text-4xl">Bet</div>
-        <div className="text-4xl">Bet</div>
+      <Row className="mt-1 w-full items-center justify-end gap-0.5">
-        <Row className="mt-1 w-full items-center justify-end gap-0.5">
+        <PillButton
-          <PillButton
+          selected={!isLimitOrder}
-            selected={!isLimitOrder}
+          onSelect={() => {
-            onSelect={() => {
+            setIsLimitOrder(false)
-              setIsLimitOrder(false)
+            track('select quick order')
-              track('select quick order')
+          }}
-            }}
+        >
-          >
+          Quick
-            Quick
+        </PillButton>
-          </PillButton>
+        <PillButton
-          <PillButton
+          selected={isLimitOrder}
-            selected={isLimitOrder}
+          onSelect={() => {
-            onSelect={() => {
+            setIsLimitOrder(true)
-              setIsLimitOrder(true)
+            track('select limit order')
-              track('select limit order')
+          }}
-            }}
+        >
-          >
+          Limit
-            Limit
+        </PillButton>
-          </PillButton>
-        </Row>
       </Row>
-      <Row className={'mt-2 justify-end'}></Row>
+    </Row>
-    </Col>
   )
 }
 

web/components/bet-row.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import clsx from 'clsx'
 
 import { SimpleBetPanel } from './bet-panel'
@@ -48,6 +48,7 @@ export default function BetRow(props: {
             : ''}
         </div>
       </Col>
+
       <Modal open={open} setOpen={setOpen}>
         <SimpleBetPanel
           className={betPanelClassName}

web/components/contract/contract-overview.tsx

@@ -8,8 +8,8 @@ import { Linkify } from '../linkify'
 import clsx from 'clsx'
 
 import {
-  FreeResponseResolutionOrChance,
   BinaryResolutionOrChance,
+  FreeResponseResolutionOrChance,
   NumericResolutionOrExpectation,
   PseudoNumericResolutionOrExpectation,
 } from './contract-card'
@@ -21,6 +21,8 @@ import { ContractDescription } from './contract-description'
 import { ContractDetails } from './contract-details'
 import { ShareMarket } from '../share-market'
 import { NumericGraph } from './numeric-graph'
+import { CreateChallengeButton } from 'web/components/challenges/create-challenge-button'
+import React from 'react'
 
 export const ContractOverview = (props: {
   contract: Contract
@@ -116,6 +118,14 @@ export const ContractOverview = (props: {
       {outcomeType === 'NUMERIC' && <NumericGraph contract={contract} />}
       {(contract.description || isCreator) && <Spacer h={6} />}
       {isCreator && <ShareMarket className="px-2" contract={contract} />}
+      {user && (
+        <Col>
+          <div>Challenge a friend</div>
+          <Row>
+            <CreateChallengeButton user={user} contract={contract} />
+          </Row>
+        </Col>
+      )}
       <ContractDescription
         className="px-2"
         contract={contract}

web/pages/[username]/[contractSlug].tsx

@@ -1,21 +1,21 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { ArrowLeftIcon } from '@heroicons/react/outline'
-import { keyBy, sortBy, groupBy, sumBy, mapValues } from 'lodash'
+import { groupBy, keyBy, mapValues, sortBy, sumBy } from 'lodash'
 
 import { useContractWithPreload } from 'web/hooks/use-contract'
 import { ContractOverview } from 'web/components/contract/contract-overview'
 import { BetPanel } from 'web/components/bet-panel'
 import { Col } from 'web/components/layout/col'
-import { useUser } from 'web/hooks/use-user'
+import { useUser, useUserById } from 'web/hooks/use-user'
 import { ResolutionPanel } from 'web/components/resolution-panel'
 import { Title } from 'web/components/title'
 import { Spacer } from 'web/components/layout/spacer'
 import { listUsers, User } from 'web/lib/firebase/users'
 import {
   Contract,
+  getBinaryProbPercent,
   getContractFromSlug,
   tradingAllowed,
-  getBinaryProbPercent,
 } from 'web/lib/firebase/contracts'
 import { SEO } from 'web/components/SEO'
 import { Page } from 'web/components/page'
@@ -27,7 +27,6 @@ import { fromPropz, usePropz } from 'web/hooks/use-propz'
 import { Leaderboard } from 'web/components/leaderboard'
 import { resolvedPayout } from 'common/calculate'
 import { formatMoney } from 'common/util/format'
-import { useUserById } from 'web/hooks/use-user'
 import { ContractTabs } from 'web/components/contract/contract-tabs'
 import { contractTextDetails } from 'web/components/contract/contract-details'
 import { useWindowSize } from 'web/hooks/use-window-size'
@@ -168,12 +167,10 @@ export function ContractPageContent(
         (isNumeric ? (
           <NumericBetPanel className="hidden xl:flex" contract={contract} />
         ) : (
-          <div>
+          <BetPanel
-            <BetPanel
+            className="hidden xl:flex"
-              className="hidden xl:flex"
+            contract={contract as CPMMBinaryContract}
-              contract={contract as CPMMBinaryContract}
+          />
-            />
-          </div>
         ))}
       {allowResolve &&
         (isNumeric || isPseudoNumeric ? (

web/pages/challenges/index.tsx

@@ -7,9 +7,8 @@ import { Row } from 'web/components/layout/row'
 import { Page } from 'web/components/page'
 import { SEO } from 'web/components/SEO'
 import { Title } from 'web/components/title'
-import { useUser } from 'web/hooks/use-user'
+import { useUser, useUserById } from 'web/hooks/use-user'
 import { fromNow } from 'web/lib/util/time'
-import { useUserById } from 'web/hooks/use-user'
 
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
@@ -18,13 +17,14 @@ import {
   useAcceptedChallenges,
   useUserChallenges,
 } from 'web/lib/firebase/challenges'
-import { Challenge, Acceptance } from 'common/challenge'
+import { Acceptance, Challenge } from 'common/challenge'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { ToastClipboard } from 'web/components/toast-clipboard'
 import { Tabs } from 'web/components/layout/tabs'
 import { SiteLink } from 'web/components/site-link'
 import { UserLink } from 'web/components/user-page'
 import { Avatar } from 'web/components/avatar'
+
 dayjs.extend(customParseFormat)
 
 export function getManalinkUrl(slug: string) {
@@ -72,54 +72,6 @@ export default function LinkPage() {
     </Page>
   )
 }
-//
-// export function ClaimsList(props: { txns: ManalinkTxn[] }) {
-//   const { txns } = props
-//   return (
-//     <>
-//       <h1 className="mb-4 text-xl font-semibold text-gray-900">
-//         Claimed links
-//       </h1>
-//       {txns.map((txn) => (
-//         <ClaimDescription txn={txn} key={txn.id} />
-//       ))}
-//     </>
-//   )
-// }
-
-// export function ClaimDescription(props: { txn: ManalinkTxn }) {
-//   const { txn } = props
-//   const from = useUserById(txn.fromId)
-//   const to = useUserById(txn.toId)
-//
-//   if (!from || !to) {
-//     return <>Loading...</>
-//   }
-//
-//   return (
-//     <div className="mb-2 flow-root pr-2 md:pr-0">
-//       <div className="relative flex items-center space-x-3">
-//         <Avatar username={to.name} avatarUrl={to.avatarUrl} size="sm" />
-//         <div className="min-w-0 flex-1">
-//           <p className="mt-0.5 text-sm text-gray-500">
-//             <UserLink
-//               className="text-gray-500"
-//               username={to.username}
-//               name={to.name}
-//             />{' '}
-//             claimed {formatMoney(txn.amount)} from{' '}
-//             <UserLink
-//               className="text-gray-500"
-//               username={from.username}
-//               name={from.name}
-//             />
-//             <RelativeTimestamp time={txn.createdTime} />
-//           </p>
-//         </div>
-//       </div>
-//     </div>
-//   )
-// }
 
 function ClaimTableRow(props: { claim: Acceptance }) {
   const { claim } = props

web/pages/embed/[username]/[contractSlug].tsx

@@ -21,8 +21,11 @@ import { useMeasureSize } from 'web/hooks/use-measure-size'
 import { fromPropz, usePropz } from 'web/hooks/use-propz'
 import { useWindowSize } from 'web/hooks/use-window-size'
 import { listAllBets } from 'web/lib/firebase/bets'
-import { contractPath, getContractFromSlug } from 'web/lib/firebase/contracts'
+import {
-import { tradingAllowed } from 'web/lib/firebase/contracts'
+  contractPath,
+  getContractFromSlug,
+  tradingAllowed,
+} from 'web/lib/firebase/contracts'
 import Custom404 from '../../404'
 
 export const getStaticProps = fromPropz(getStaticPropz)
@@ -76,12 +79,8 @@ export default function ContractEmbedPage(props: {
   return <ContractEmbed contract={contract} bets={bets} />
 }
 
-export function ContractEmbed(props: {
+export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
-  contract: Contract
+  const { contract, bets } = props
-  bets: Bet[]
-  height?: number
-}) {
-  const { contract, bets, height } = props
   const { question, outcomeType } = contract
 
   const isBinary = outcomeType === 'BINARY'
@@ -93,11 +92,10 @@ export function ContractEmbed(props: {
   const { setElem, height: topSectionHeight } = useMeasureSize()
   const paddingBottom = 8
 
-  const graphHeight = !height
+  const graphHeight =
-    ? windowHeight && topSectionHeight
+    windowHeight && topSectionHeight
       ? windowHeight - topSectionHeight - paddingBottom
       : 0
-    : height
 
   return (
     <Col className="w-full flex-1 bg-white">