Move contract details components to their own file.
This commit is contained in:
		
							parent
							
								
									3b413e52e5
								
							
						
					
					
						commit
						3c1e16b815
					
				|  | @ -1,27 +1,15 @@ | ||||||
| import clsx from 'clsx' | import clsx from 'clsx' | ||||||
| import Link from 'next/link' | import Link from 'next/link' | ||||||
| import _ from 'lodash' | import _ from 'lodash' | ||||||
| import { ClockIcon, DatabaseIcon, PencilIcon } from '@heroicons/react/outline' |  | ||||||
| import { TrendingUpIcon } from '@heroicons/react/solid' |  | ||||||
| import { Row } from '../layout/row' | import { Row } from '../layout/row' | ||||||
| import { formatMoney, formatPercent } from '../../../common/util/format' | import { formatPercent } from '../../../common/util/format' | ||||||
| import { UserLink } from '../user-page' |  | ||||||
| import { | import { | ||||||
|   Contract, |   Contract, | ||||||
|   contractMetrics, |  | ||||||
|   contractPath, |   contractPath, | ||||||
|   getBinaryProbPercent, |   getBinaryProbPercent, | ||||||
|   updateContract, |  | ||||||
| } from '../../lib/firebase/contracts' | } from '../../lib/firebase/contracts' | ||||||
| import { Col } from '../layout/col' | import { Col } from '../layout/col' | ||||||
| import dayjs from 'dayjs' |  | ||||||
| import { DateTimeTooltip } from '../datetime-tooltip' |  | ||||||
| import { fromNow } from '../../lib/util/time' |  | ||||||
| import { Avatar } from '../avatar' |  | ||||||
| import { Spacer } from '../layout/spacer' | import { Spacer } from '../layout/spacer' | ||||||
| import { useState } from 'react' |  | ||||||
| import { ContractInfoDialog } from './contract-info-dialog' |  | ||||||
| import { Bet } from '../../../common/bet' |  | ||||||
| import { | import { | ||||||
|   Binary, |   Binary, | ||||||
|   CPMM, |   CPMM, | ||||||
|  | @ -36,6 +24,7 @@ import { | ||||||
|   FreeResponseOutcomeLabel, |   FreeResponseOutcomeLabel, | ||||||
| } from '../outcome-label' | } from '../outcome-label' | ||||||
| import { getOutcomeProbability } from '../../../common/calculate' | import { getOutcomeProbability } from '../../../common/calculate' | ||||||
|  | import { AbbrContractDetails } from './contract-details' | ||||||
| 
 | 
 | ||||||
| export function ContractCard(props: { | export function ContractCard(props: { | ||||||
|   contract: Contract |   contract: Contract | ||||||
|  | @ -187,215 +176,3 @@ export function FreeResponseResolutionOrChance(props: { | ||||||
|     </Col> |     </Col> | ||||||
|   ) |   ) | ||||||
| } | } | ||||||
| 
 |  | ||||||
| function AbbrContractDetails(props: { |  | ||||||
|   contract: Contract |  | ||||||
|   showHotVolume?: boolean |  | ||||||
|   showCloseTime?: boolean |  | ||||||
| }) { |  | ||||||
|   const { contract, showHotVolume, showCloseTime } = props |  | ||||||
|   const { volume24Hours, creatorName, creatorUsername, closeTime } = contract |  | ||||||
|   const { volumeLabel } = contractMetrics(contract) |  | ||||||
| 
 |  | ||||||
|   return ( |  | ||||||
|     <Col className={clsx('gap-2 text-sm text-gray-500')}> |  | ||||||
|       <Row className="items-center justify-between"> |  | ||||||
|         <Row className="items-center gap-2"> |  | ||||||
|           <Avatar |  | ||||||
|             username={creatorUsername} |  | ||||||
|             avatarUrl={contract.creatorAvatarUrl} |  | ||||||
|             size={6} |  | ||||||
|           /> |  | ||||||
|           <UserLink |  | ||||||
|             className="whitespace-nowrap" |  | ||||||
|             name={creatorName} |  | ||||||
|             username={creatorUsername} |  | ||||||
|           /> |  | ||||||
|         </Row> |  | ||||||
| 
 |  | ||||||
|         {showHotVolume ? ( |  | ||||||
|           <Row className="gap-1"> |  | ||||||
|             <TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)} |  | ||||||
|           </Row> |  | ||||||
|         ) : showCloseTime ? ( |  | ||||||
|           <Row className="gap-1"> |  | ||||||
|             <ClockIcon className="h-5 w-5" /> |  | ||||||
|             {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '} |  | ||||||
|             {fromNow(closeTime || 0)} |  | ||||||
|           </Row> |  | ||||||
|         ) : ( |  | ||||||
|           <Row className="gap-1"> |  | ||||||
|             {/* <DatabaseIcon className="h-5 w-5" /> */} |  | ||||||
|             {volumeLabel} |  | ||||||
|           </Row> |  | ||||||
|         )} |  | ||||||
|       </Row> |  | ||||||
|     </Col> |  | ||||||
|   ) |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| export function ContractDetails(props: { |  | ||||||
|   contract: Contract |  | ||||||
|   bets: Bet[] |  | ||||||
|   isCreator?: boolean |  | ||||||
|   hideShareButtons?: boolean |  | ||||||
| }) { |  | ||||||
|   const { contract, bets, isCreator, hideShareButtons } = props |  | ||||||
|   const { closeTime, creatorName, creatorUsername } = contract |  | ||||||
|   const { volumeLabel, createdDate, resolvedDate } = contractMetrics(contract) |  | ||||||
| 
 |  | ||||||
|   return ( |  | ||||||
|     <Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap"> |  | ||||||
|       <Row className="flex-1 flex-wrap items-center gap-x-4 gap-y-3"> |  | ||||||
|         <Row className="items-center gap-2"> |  | ||||||
|           <Avatar |  | ||||||
|             username={creatorUsername} |  | ||||||
|             avatarUrl={contract.creatorAvatarUrl} |  | ||||||
|             size={6} |  | ||||||
|           /> |  | ||||||
|           <UserLink |  | ||||||
|             className="whitespace-nowrap" |  | ||||||
|             name={creatorName} |  | ||||||
|             username={creatorUsername} |  | ||||||
|           /> |  | ||||||
|         </Row> |  | ||||||
| 
 |  | ||||||
|         {(!!closeTime || !!resolvedDate) && ( |  | ||||||
|           <Row className="items-center gap-1"> |  | ||||||
|             <ClockIcon className="h-5 w-5" /> |  | ||||||
| 
 |  | ||||||
|             {/* <DateTimeTooltip text="Market created:" time={contract.createdTime}> |  | ||||||
|             {createdDate} |  | ||||||
|           </DateTimeTooltip> */} |  | ||||||
| 
 |  | ||||||
|             {resolvedDate && contract.resolutionTime ? ( |  | ||||||
|               <> |  | ||||||
|                 {/* {' - '} */} |  | ||||||
|                 <DateTimeTooltip |  | ||||||
|                   text="Market resolved:" |  | ||||||
|                   time={contract.resolutionTime} |  | ||||||
|                 > |  | ||||||
|                   {resolvedDate} |  | ||||||
|                 </DateTimeTooltip> |  | ||||||
|               </> |  | ||||||
|             ) : null} |  | ||||||
| 
 |  | ||||||
|             {!resolvedDate && closeTime && ( |  | ||||||
|               <> |  | ||||||
|                 {/* {' - '}{' '} */} |  | ||||||
|                 <EditableCloseDate |  | ||||||
|                   closeTime={closeTime} |  | ||||||
|                   contract={contract} |  | ||||||
|                   isCreator={isCreator ?? false} |  | ||||||
|                 /> |  | ||||||
|               </> |  | ||||||
|             )} |  | ||||||
|           </Row> |  | ||||||
|         )} |  | ||||||
| 
 |  | ||||||
|         <Row className="items-center gap-1"> |  | ||||||
|           <DatabaseIcon className="h-5 w-5" /> |  | ||||||
| 
 |  | ||||||
|           <div className="whitespace-nowrap">{volumeLabel}</div> |  | ||||||
|         </Row> |  | ||||||
| 
 |  | ||||||
|         {!hideShareButtons && ( |  | ||||||
|           <ContractInfoDialog contract={contract} bets={bets} /> |  | ||||||
|         )} |  | ||||||
|       </Row> |  | ||||||
|     </Col> |  | ||||||
|   ) |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| // String version of the above, to send to the OpenGraph image generator
 |  | ||||||
| export function contractTextDetails(contract: Contract) { |  | ||||||
|   const { closeTime, tags } = contract |  | ||||||
|   const { createdDate, resolvedDate, volumeLabel } = contractMetrics(contract) |  | ||||||
| 
 |  | ||||||
|   const hashtags = tags.map((tag) => `#${tag}`) |  | ||||||
| 
 |  | ||||||
|   return ( |  | ||||||
|     `${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` + |  | ||||||
|     (closeTime |  | ||||||
|       ? ` • ${closeTime > Date.now() ? 'Closes' : 'Closed'} ${dayjs( |  | ||||||
|           closeTime |  | ||||||
|         ).format('MMM D, h:mma')}` |  | ||||||
|       : '') + |  | ||||||
|     ` • ${volumeLabel}` + |  | ||||||
|     (hashtags.length > 0 ? ` • ${hashtags.join(' ')}` : '') |  | ||||||
|   ) |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| function EditableCloseDate(props: { |  | ||||||
|   closeTime: number |  | ||||||
|   contract: Contract |  | ||||||
|   isCreator: boolean |  | ||||||
| }) { |  | ||||||
|   const { closeTime, contract, isCreator } = props |  | ||||||
| 
 |  | ||||||
|   const [isEditingCloseTime, setIsEditingCloseTime] = useState(false) |  | ||||||
|   const [closeDate, setCloseDate] = useState( |  | ||||||
|     closeTime && dayjs(closeTime).format('YYYY-MM-DDT23:59') |  | ||||||
|   ) |  | ||||||
| 
 |  | ||||||
|   const isSameYear = dayjs(closeTime).isSame(dayjs(), 'year') |  | ||||||
|   const isSameDay = dayjs(closeTime).isSame(dayjs(), 'day') |  | ||||||
| 
 |  | ||||||
|   const onSave = () => { |  | ||||||
|     const newCloseTime = dayjs(closeDate).valueOf() |  | ||||||
|     if (newCloseTime === closeTime) setIsEditingCloseTime(false) |  | ||||||
|     else if (newCloseTime > Date.now()) { |  | ||||||
|       const { description } = contract |  | ||||||
|       const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a') |  | ||||||
|       const newDescription = `${description}\n\nClose date updated to ${formattedCloseDate}` |  | ||||||
| 
 |  | ||||||
|       updateContract(contract.id, { |  | ||||||
|         closeTime: newCloseTime, |  | ||||||
|         description: newDescription, |  | ||||||
|       }) |  | ||||||
| 
 |  | ||||||
|       setIsEditingCloseTime(false) |  | ||||||
|     } |  | ||||||
|   } |  | ||||||
| 
 |  | ||||||
|   return ( |  | ||||||
|     <> |  | ||||||
|       {isEditingCloseTime ? ( |  | ||||||
|         <div className="form-control mr-1 items-start"> |  | ||||||
|           <input |  | ||||||
|             type="datetime-local" |  | ||||||
|             className="input input-bordered" |  | ||||||
|             onClick={(e) => e.stopPropagation()} |  | ||||||
|             onChange={(e) => setCloseDate(e.target.value || '')} |  | ||||||
|             min={Date.now()} |  | ||||||
|             value={closeDate} |  | ||||||
|           /> |  | ||||||
|         </div> |  | ||||||
|       ) : ( |  | ||||||
|         <DateTimeTooltip |  | ||||||
|           text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'} |  | ||||||
|           time={closeTime} |  | ||||||
|         > |  | ||||||
|           {isSameYear |  | ||||||
|             ? dayjs(closeTime).format('MMM D') |  | ||||||
|             : dayjs(closeTime).format('MMM D, YYYY')} |  | ||||||
|           {isSameDay && <> ({fromNow(closeTime)})</>} |  | ||||||
|         </DateTimeTooltip> |  | ||||||
|       )} |  | ||||||
| 
 |  | ||||||
|       {isCreator && |  | ||||||
|         (isEditingCloseTime ? ( |  | ||||||
|           <button className="btn btn-xs" onClick={onSave}> |  | ||||||
|             Done |  | ||||||
|           </button> |  | ||||||
|         ) : ( |  | ||||||
|           <button |  | ||||||
|             className="btn btn-xs btn-ghost" |  | ||||||
|             onClick={() => setIsEditingCloseTime(true)} |  | ||||||
|           > |  | ||||||
|             <PencilIcon className="mr-2 inline h-4 w-4" /> Edit |  | ||||||
|           </button> |  | ||||||
|         ))} |  | ||||||
|     </> |  | ||||||
|   ) |  | ||||||
| } |  | ||||||
|  |  | ||||||
							
								
								
									
										232
									
								
								web/components/contract/contract-details.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										232
									
								
								web/components/contract/contract-details.tsx
									
									
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,232 @@ | ||||||
|  | import clsx from 'clsx' | ||||||
|  | import _ from 'lodash' | ||||||
|  | import { ClockIcon, DatabaseIcon, PencilIcon } from '@heroicons/react/outline' | ||||||
|  | import { TrendingUpIcon } from '@heroicons/react/solid' | ||||||
|  | import { Row } from '../layout/row' | ||||||
|  | import { formatMoney } from '../../../common/util/format' | ||||||
|  | import { UserLink } from '../user-page' | ||||||
|  | import { | ||||||
|  |   Contract, | ||||||
|  |   contractMetrics, | ||||||
|  |   updateContract, | ||||||
|  | } from '../../lib/firebase/contracts' | ||||||
|  | import { Col } from '../layout/col' | ||||||
|  | import dayjs from 'dayjs' | ||||||
|  | import { DateTimeTooltip } from '../datetime-tooltip' | ||||||
|  | import { fromNow } from '../../lib/util/time' | ||||||
|  | import { Avatar } from '../avatar' | ||||||
|  | import { useState } from 'react' | ||||||
|  | import { ContractInfoDialog } from './contract-info-dialog' | ||||||
|  | import { Bet } from '../../../common/bet' | ||||||
|  | 
 | ||||||
|  | export function AbbrContractDetails(props: { | ||||||
|  |   contract: Contract | ||||||
|  |   showHotVolume?: boolean | ||||||
|  |   showCloseTime?: boolean | ||||||
|  | }) { | ||||||
|  |   const { contract, showHotVolume, showCloseTime } = props | ||||||
|  |   const { volume24Hours, creatorName, creatorUsername, closeTime } = contract | ||||||
|  |   const { volumeLabel } = contractMetrics(contract) | ||||||
|  | 
 | ||||||
|  |   return ( | ||||||
|  |     <Col className={clsx('gap-2 text-sm text-gray-500')}> | ||||||
|  |       <Row className="items-center justify-between"> | ||||||
|  |         <Row className="items-center gap-2"> | ||||||
|  |           <Avatar | ||||||
|  |             username={creatorUsername} | ||||||
|  |             avatarUrl={contract.creatorAvatarUrl} | ||||||
|  |             size={6} | ||||||
|  |           /> | ||||||
|  |           <UserLink | ||||||
|  |             className="whitespace-nowrap" | ||||||
|  |             name={creatorName} | ||||||
|  |             username={creatorUsername} | ||||||
|  |           /> | ||||||
|  |         </Row> | ||||||
|  | 
 | ||||||
|  |         {showHotVolume ? ( | ||||||
|  |           <Row className="gap-1"> | ||||||
|  |             <TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)} | ||||||
|  |           </Row> | ||||||
|  |         ) : showCloseTime ? ( | ||||||
|  |           <Row className="gap-1"> | ||||||
|  |             <ClockIcon className="h-5 w-5" /> | ||||||
|  |             {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '} | ||||||
|  |             {fromNow(closeTime || 0)} | ||||||
|  |           </Row> | ||||||
|  |         ) : ( | ||||||
|  |           <Row className="gap-1"> | ||||||
|  |             {/* <DatabaseIcon className="h-5 w-5" /> */} | ||||||
|  |             {volumeLabel} | ||||||
|  |           </Row> | ||||||
|  |         )} | ||||||
|  |       </Row> | ||||||
|  |     </Col> | ||||||
|  |   ) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export function ContractDetails(props: { | ||||||
|  |   contract: Contract | ||||||
|  |   bets: Bet[] | ||||||
|  |   isCreator?: boolean | ||||||
|  |   hideShareButtons?: boolean | ||||||
|  | }) { | ||||||
|  |   const { contract, bets, isCreator, hideShareButtons } = props | ||||||
|  |   const { closeTime, creatorName, creatorUsername } = contract | ||||||
|  |   const { volumeLabel, createdDate, resolvedDate } = contractMetrics(contract) | ||||||
|  | 
 | ||||||
|  |   return ( | ||||||
|  |     <Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap"> | ||||||
|  |       <Row className="flex-1 flex-wrap items-center gap-x-4 gap-y-3"> | ||||||
|  |         <Row className="items-center gap-2"> | ||||||
|  |           <Avatar | ||||||
|  |             username={creatorUsername} | ||||||
|  |             avatarUrl={contract.creatorAvatarUrl} | ||||||
|  |             size={6} | ||||||
|  |           /> | ||||||
|  |           <UserLink | ||||||
|  |             className="whitespace-nowrap" | ||||||
|  |             name={creatorName} | ||||||
|  |             username={creatorUsername} | ||||||
|  |           /> | ||||||
|  |         </Row> | ||||||
|  | 
 | ||||||
|  |         {(!!closeTime || !!resolvedDate) && ( | ||||||
|  |           <Row className="items-center gap-1"> | ||||||
|  |             <ClockIcon className="h-5 w-5" /> | ||||||
|  | 
 | ||||||
|  |             {/* <DateTimeTooltip text="Market created:" time={contract.createdTime}> | ||||||
|  |             {createdDate} | ||||||
|  |           </DateTimeTooltip> */} | ||||||
|  | 
 | ||||||
|  |             {resolvedDate && contract.resolutionTime ? ( | ||||||
|  |               <> | ||||||
|  |                 {/* {' - '} */} | ||||||
|  |                 <DateTimeTooltip | ||||||
|  |                   text="Market resolved:" | ||||||
|  |                   time={contract.resolutionTime} | ||||||
|  |                 > | ||||||
|  |                   {resolvedDate} | ||||||
|  |                 </DateTimeTooltip> | ||||||
|  |               </> | ||||||
|  |             ) : null} | ||||||
|  | 
 | ||||||
|  |             {!resolvedDate && closeTime && ( | ||||||
|  |               <> | ||||||
|  |                 {/* {' - '}{' '} */} | ||||||
|  |                 <EditableCloseDate | ||||||
|  |                   closeTime={closeTime} | ||||||
|  |                   contract={contract} | ||||||
|  |                   isCreator={isCreator ?? false} | ||||||
|  |                 /> | ||||||
|  |               </> | ||||||
|  |             )} | ||||||
|  |           </Row> | ||||||
|  |         )} | ||||||
|  | 
 | ||||||
|  |         <Row className="items-center gap-1"> | ||||||
|  |           <DatabaseIcon className="h-5 w-5" /> | ||||||
|  | 
 | ||||||
|  |           <div className="whitespace-nowrap">{volumeLabel}</div> | ||||||
|  |         </Row> | ||||||
|  | 
 | ||||||
|  |         {!hideShareButtons && ( | ||||||
|  |           <ContractInfoDialog contract={contract} bets={bets} /> | ||||||
|  |         )} | ||||||
|  |       </Row> | ||||||
|  |     </Col> | ||||||
|  |   ) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | // String version of the above, to send to the OpenGraph image generator
 | ||||||
|  | export function contractTextDetails(contract: Contract) { | ||||||
|  |   const { closeTime, tags } = contract | ||||||
|  |   const { createdDate, resolvedDate, volumeLabel } = contractMetrics(contract) | ||||||
|  | 
 | ||||||
|  |   const hashtags = tags.map((tag) => `#${tag}`) | ||||||
|  | 
 | ||||||
|  |   return ( | ||||||
|  |     `${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` + | ||||||
|  |     (closeTime | ||||||
|  |       ? ` • ${closeTime > Date.now() ? 'Closes' : 'Closed'} ${dayjs( | ||||||
|  |           closeTime | ||||||
|  |         ).format('MMM D, h:mma')}` | ||||||
|  |       : '') + | ||||||
|  |     ` • ${volumeLabel}` + | ||||||
|  |     (hashtags.length > 0 ? ` • ${hashtags.join(' ')}` : '') | ||||||
|  |   ) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function EditableCloseDate(props: { | ||||||
|  |   closeTime: number | ||||||
|  |   contract: Contract | ||||||
|  |   isCreator: boolean | ||||||
|  | }) { | ||||||
|  |   const { closeTime, contract, isCreator } = props | ||||||
|  | 
 | ||||||
|  |   const [isEditingCloseTime, setIsEditingCloseTime] = useState(false) | ||||||
|  |   const [closeDate, setCloseDate] = useState( | ||||||
|  |     closeTime && dayjs(closeTime).format('YYYY-MM-DDT23:59') | ||||||
|  |   ) | ||||||
|  | 
 | ||||||
|  |   const isSameYear = dayjs(closeTime).isSame(dayjs(), 'year') | ||||||
|  |   const isSameDay = dayjs(closeTime).isSame(dayjs(), 'day') | ||||||
|  | 
 | ||||||
|  |   const onSave = () => { | ||||||
|  |     const newCloseTime = dayjs(closeDate).valueOf() | ||||||
|  |     if (newCloseTime === closeTime) setIsEditingCloseTime(false) | ||||||
|  |     else if (newCloseTime > Date.now()) { | ||||||
|  |       const { description } = contract | ||||||
|  |       const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a') | ||||||
|  |       const newDescription = `${description}\n\nClose date updated to ${formattedCloseDate}` | ||||||
|  | 
 | ||||||
|  |       updateContract(contract.id, { | ||||||
|  |         closeTime: newCloseTime, | ||||||
|  |         description: newDescription, | ||||||
|  |       }) | ||||||
|  | 
 | ||||||
|  |       setIsEditingCloseTime(false) | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   return ( | ||||||
|  |     <> | ||||||
|  |       {isEditingCloseTime ? ( | ||||||
|  |         <div className="form-control mr-1 items-start"> | ||||||
|  |           <input | ||||||
|  |             type="datetime-local" | ||||||
|  |             className="input input-bordered" | ||||||
|  |             onClick={(e) => e.stopPropagation()} | ||||||
|  |             onChange={(e) => setCloseDate(e.target.value || '')} | ||||||
|  |             min={Date.now()} | ||||||
|  |             value={closeDate} | ||||||
|  |           /> | ||||||
|  |         </div> | ||||||
|  |       ) : ( | ||||||
|  |         <DateTimeTooltip | ||||||
|  |           text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'} | ||||||
|  |           time={closeTime} | ||||||
|  |         > | ||||||
|  |           {isSameYear | ||||||
|  |             ? dayjs(closeTime).format('MMM D') | ||||||
|  |             : dayjs(closeTime).format('MMM D, YYYY')} | ||||||
|  |           {isSameDay && <> ({fromNow(closeTime)})</>} | ||||||
|  |         </DateTimeTooltip> | ||||||
|  |       )} | ||||||
|  | 
 | ||||||
|  |       {isCreator && | ||||||
|  |         (isEditingCloseTime ? ( | ||||||
|  |           <button className="btn btn-xs" onClick={onSave}> | ||||||
|  |             Done | ||||||
|  |           </button> | ||||||
|  |         ) : ( | ||||||
|  |           <button | ||||||
|  |             className="btn btn-xs btn-ghost" | ||||||
|  |             onClick={() => setIsEditingCloseTime(true)} | ||||||
|  |           > | ||||||
|  |             <PencilIcon className="mr-2 inline h-4 w-4" /> Edit | ||||||
|  |           </button> | ||||||
|  |         ))} | ||||||
|  |     </> | ||||||
|  |   ) | ||||||
|  | } | ||||||
|  | @ -8,7 +8,6 @@ import { Linkify } from '../linkify' | ||||||
| import clsx from 'clsx' | import clsx from 'clsx' | ||||||
| import { | import { | ||||||
|   FreeResponseResolutionOrChance, |   FreeResponseResolutionOrChance, | ||||||
|   ContractDetails, |  | ||||||
|   BinaryResolutionOrChance, |   BinaryResolutionOrChance, | ||||||
| } from './contract-card' | } from './contract-card' | ||||||
| import { Bet } from '../../../common/bet' | import { Bet } from '../../../common/bet' | ||||||
|  | @ -17,6 +16,7 @@ import BetRow from '../bet-row' | ||||||
| import { AnswersGraph } from '../answers/answers-graph' | import { AnswersGraph } from '../answers/answers-graph' | ||||||
| import { DPM, FreeResponse, FullContract } from '../../../common/contract' | import { DPM, FreeResponse, FullContract } from '../../../common/contract' | ||||||
| import { ContractDescription } from './contract-description' | import { ContractDescription } from './contract-description' | ||||||
|  | import { ContractDetails } from './contract-details' | ||||||
| 
 | 
 | ||||||
| export const ContractOverview = (props: { | export const ContractOverview = (props: { | ||||||
|   contract: Contract |   contract: Contract | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	Block a user