made changes to shareButton

This commit is contained in:
ingawei 2022-07-20 17:02:36 -07:00
parent 3d505a6dd9
commit fe8f835ab2
4 changed files with 16 additions and 28 deletions

View File

@ -11,6 +11,7 @@ import { UserLink } from '../user-page'
import { import {
Contract, Contract,
contractMetrics, contractMetrics,
contractPath,
contractPool, contractPool,
updateContract, updateContract,
} from 'web/lib/firebase/contracts' } from 'web/lib/firebase/contracts'
@ -33,6 +34,7 @@ import { ShareIconButton } from 'web/components/share-icon-button'
import { useUser } from 'web/hooks/use-user' import { useUser } from 'web/hooks/use-user'
import { Editor } from '@tiptap/react' import { Editor } from '@tiptap/react'
import { exhibitExts } from 'common/util/parse' import { exhibitExts } from 'common/util/parse'
import { ENV_CONFIG } from 'common/envs/constants'
export type ShowTime = 'resolve-date' | 'close-date' export type ShowTime = 'resolve-date' | 'close-date'
@ -222,9 +224,12 @@ export function ContractDetails(props: {
<div className="whitespace-nowrap">{volumeLabel}</div> <div className="whitespace-nowrap">{volumeLabel}</div>
</Row> </Row>
<ShareIconButton <ShareIconButton
contract={contract} copyPayload={`https://${ENV_CONFIG.domain}${contractPath(contract)}${
user?.username && contract.creatorUsername !== user?.username
? '?referrer=' + user?.username
: ''
}`}
toastClassName={'sm:-left-40 -left-24 min-w-[250%]'} toastClassName={'sm:-left-40 -left-24 min-w-[250%]'}
username={user?.username}
/> />
{!disabled && <ContractInfoDialog contract={contract} bets={bets} />} {!disabled && <ContractInfoDialog contract={contract} bets={bets} />}

View File

@ -9,6 +9,7 @@ import { ShareIconButton } from './share-icon-button'
import { DotsHorizontalIcon } from '@heroicons/react/solid' import { DotsHorizontalIcon } from '@heroicons/react/solid'
import { contractDetailsButtonClassName } from './contract/contract-info-dialog' import { contractDetailsButtonClassName } from './contract/contract-info-dialog'
import { useUserById } from 'web/hooks/use-user' import { useUserById } from 'web/hooks/use-user'
import getManalinkUrl from 'web/get-manalink-url'
export type ManalinkInfo = { export type ManalinkInfo = {
expiresTime: number | null expiresTime: number | null
maxUses: number | null maxUses: number | null
@ -129,12 +130,12 @@ export function ManalinkCardFromView(props: {
{formatMoney(amount)} {formatMoney(amount)}
</div> </div>
<ShareIconButton <ShareIconButton
manalink={link}
toastClassName={'-left-48 min-w-[250%]'} toastClassName={'-left-48 min-w-[250%]'}
buttonClassName={'transition-colors'} buttonClassName={'transition-colors'}
onCopyButtonClassName={ onCopyButtonClassName={
'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600' 'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600'
} }
copyPayload={getManalinkUrl(link.slug)}
/> />
<button <button
onClick={() => setDetails(!details)} onClick={() => setDetails(!details)}

View File

@ -2,9 +2,7 @@ import React, { useState } from 'react'
import { ShareIcon } from '@heroicons/react/outline' import { ShareIcon } from '@heroicons/react/outline'
import clsx from 'clsx' import clsx from 'clsx'
import { Contract } from 'common/contract'
import { copyToClipboard } from 'web/lib/util/copy' import { copyToClipboard } from 'web/lib/util/copy'
import { contractPath } from 'web/lib/firebase/contracts'
import { ENV_CONFIG } from 'common/envs/constants' import { ENV_CONFIG } from 'common/envs/constants'
import { ToastClipboard } from 'web/components/toast-clipboard' import { ToastClipboard } from 'web/components/toast-clipboard'
import { track } from 'web/lib/service/analytics' import { track } from 'web/lib/service/analytics'
@ -14,16 +12,6 @@ import { groupPath } from 'web/lib/firebase/groups'
import { Manalink } from 'common/manalink' import { Manalink } from 'common/manalink'
import getManalinkUrl from 'web/get-manalink-url' import getManalinkUrl from 'web/get-manalink-url'
function copyContractWithReferral(contract: Contract, username?: string) {
const postFix =
username && contract.creatorUsername !== username
? '?referrer=' + username
: ''
copyToClipboard(
`https://${ENV_CONFIG.domain}${contractPath(contract)}${postFix}`
)
}
// Note: if a user arrives at a /group endpoint with a ?referral= query, they'll be added to the group automatically // Note: if a user arrives at a /group endpoint with a ?referral= query, they'll be added to the group automatically
function copyGroupWithReferral(group: Group, username?: string) { function copyGroupWithReferral(group: Group, username?: string) {
const postFix = username ? '?referrer=' + username : '' const postFix = username ? '?referrer=' + username : ''
@ -37,26 +25,20 @@ function copyManalink(manalink: Manalink) {
} }
export function ShareIconButton(props: { export function ShareIconButton(props: {
contract?: Contract
group?: Group
manalink?: Manalink
buttonClassName?: string buttonClassName?: string
onCopyButtonClassName?: string onCopyButtonClassName?: string
toastClassName?: string toastClassName?: string
username?: string
children?: React.ReactNode children?: React.ReactNode
iconClassName?: string iconClassName?: string
copyPayload: string
}) { }) {
const { const {
contract,
manalink,
buttonClassName, buttonClassName,
onCopyButtonClassName, onCopyButtonClassName,
toastClassName, toastClassName,
username,
group,
children, children,
iconClassName, iconClassName,
copyPayload,
} = props } = props
const [showToast, setShowToast] = useState(false) const [showToast, setShowToast] = useState(false)
@ -69,9 +51,7 @@ export function ShareIconButton(props: {
showToast ? onCopyButtonClassName : '' showToast ? onCopyButtonClassName : ''
)} )}
onClick={() => { onClick={() => {
if (contract) copyContractWithReferral(contract, username) copyToClipboard(copyPayload)
if (group) copyGroupWithReferral(group, username)
if (manalink) copyManalink(manalink)
track('copy share link') track('copy share link')
setShowToast(true) setShowToast(true)
setTimeout(() => setShowToast(false), 2000) setTimeout(() => setShowToast(false), 2000)

View File

@ -54,6 +54,7 @@ import { useTipTxns } from 'web/hooks/use-tip-txns'
import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button' import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
import { searchInAny } from 'common/util/parse' import { searchInAny } from 'common/util/parse'
import { useWindowSize } from 'web/hooks/use-window-size' import { useWindowSize } from 'web/hooks/use-window-size'
import { ENV_CONFIG } from 'common/envs/constants'
export const getStaticProps = fromPropz(getStaticPropz) export const getStaticProps = fromPropz(getStaticPropz)
export async function getStaticPropz(props: { params: { slugs: string[] } }) { export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@ -401,8 +402,9 @@ function GroupOverview(props: {
<Row className={'flex-wrap items-center gap-1'}> <Row className={'flex-wrap items-center gap-1'}>
<span className={'text-gray-500'}>Share</span> <span className={'text-gray-500'}>Share</span>
<ShareIconButton <ShareIconButton
group={group} copyPayload={`https://${ENV_CONFIG.domain}${groupPath(
username={user.username} group.slug
)}${user?.username ? '?referrer=' + user?.username : ''}`}
buttonClassName={'hover:bg-gray-300 mt-1 !text-gray-700'} buttonClassName={'hover:bg-gray-300 mt-1 !text-gray-700'}
> >
<span className={'mx-2'}> <span className={'mx-2'}>