Cleanup

2022-07-22 07:53:56 -06:00 · 2022-07-22 07:53:56 -06:00 · 595c3fddd2
commit 595c3fddd2
parent b3d265be48
6 changed files with 72 additions and 119 deletions
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@ -365,26 +365,24 @@ function BuyPanel(props: {
      <Spacer h={8} />

      {user && (
-        <Col>
-          <button
-            className={clsx(
-              'btn mb-2 flex-1',
-              betDisabled
-                ? 'btn-disabled'
-                : betChoice === 'YES'
-                ? 'btn-primary'
-                : 'border-none bg-red-400 hover:bg-red-500',
-              isSubmitting ? 'loading' : ''
-            )}
-            onClick={betDisabled ? undefined : submitBet}
-          >
-            {isSubmitting
-              ? 'Submitting...'
-              : isLimitOrder
-              ? 'Submit order'
-              : 'Submit bet'}
-          </button>
-        </Col>
+        <button
+          className={clsx(
+            'btn mb-2 flex-1',
+            betDisabled
+              ? 'btn-disabled'
+              : betChoice === 'YES'
+              ? 'btn-primary'
+              : 'border-none bg-red-400 hover:bg-red-500',
+            isSubmitting ? 'loading' : ''
+          )}
+          onClick={betDisabled ? undefined : submitBet}
+        >
+          {isSubmitting
+            ? 'Submitting...'
+            : isLimitOrder
+            ? 'Submit order'
+            : 'Submit bet'}
+        </button>
      )}

      {wasSubmitted && (
@ -401,32 +399,29 @@ function QuickOrLimitBet(props: {
  const { isLimitOrder, setIsLimitOrder } = props

  return (
-    <Col className="align-center mb-4 justify-between">
-      <Row>
-        <div className="text-4xl">Bet</div>
-        <Row className="mt-1 w-full items-center justify-end gap-0.5">
-          <PillButton
-            selected={!isLimitOrder}
-            onSelect={() => {
-              setIsLimitOrder(false)
-              track('select quick order')
-            }}
-          >
-            Quick
-          </PillButton>
-          <PillButton
-            selected={isLimitOrder}
-            onSelect={() => {
-              setIsLimitOrder(true)
-              track('select limit order')
-            }}
-          >
-            Limit
-          </PillButton>
-        </Row>
+    <Row className="align-center mb-4 justify-between">
+      <div className="text-4xl">Bet</div>
+      <Row className="mt-1 w-full items-center justify-end gap-0.5">
+        <PillButton
+          selected={!isLimitOrder}
+          onSelect={() => {
+            setIsLimitOrder(false)
+            track('select quick order')
+          }}
+        >
+          Quick
+        </PillButton>
+        <PillButton
+          selected={isLimitOrder}
+          onSelect={() => {
+            setIsLimitOrder(true)
+            track('select limit order')
+          }}
+        >
+          Limit
+        </PillButton>
      </Row>
-      <Row className={'mt-2 justify-end'}></Row>
-    </Col>
+    </Row>
  )
 }

--- a/web/components/bet-row.tsx
+++ b/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}
--- a/web/components/contract/contract-overview.tsx
+++ b/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}
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/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
-              className="hidden xl:flex"
-              contract={contract as CPMMBinaryContract}
-            />
-          </div>
+          <BetPanel
+            className="hidden xl:flex"
+            contract={contract as CPMMBinaryContract}
+          />
        ))}
      {allowResolve &&
        (isNumeric || isPseudoNumeric ? (
--- a/web/pages/challenges/index.tsx
+++ b/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
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/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 { tradingAllowed } from 'web/lib/firebase/contracts'
+import {
+  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: {
-  contract: Contract
-  bets: Bet[]
-  height?: number
-}) {
-  const { contract, bets, height } = props
+export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
+  const { contract, bets } = 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
-    ? windowHeight && topSectionHeight
+  const graphHeight =
+    windowHeight && topSectionHeight
      ? windowHeight - topSectionHeight - paddingBottom
      : 0
-    : height

  return (
    <Col className="w-full flex-1 bg-white">