diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml index f80e8f26df..c1a23a42db 100644 --- a/packages/atlas/atlas.config.yml +++ b/packages/atlas/atlas.config.yml @@ -476,7 +476,12 @@ analytics: legal: crtTnc: | - This is a temporary placeholder for the Creator Tokens Terms and Conditions. The final version will be added here soon. + By buying this token: + - You have right to own it, hold it, sell it and transfer to any other wallet. + - You can sell your token to the AMM if the AMM becomes enabled at any moment. + + Holders rights: + Proin urna volutpat pharetra, tellus. Quam purus integer tempus habitant volutpat pellentesque. termsOfService: | # Terms of Service diff --git a/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawer.styles.ts b/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawer.styles.ts index 1e112d2d9b..ee49199705 100644 --- a/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawer.styles.ts +++ b/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawer.styles.ts @@ -4,8 +4,17 @@ import { sizes } from '@/styles' import { Divider } from '@/views/global/NftSaleBottomDrawer/NftForm/AcceptTerms/AcceptTerms.styles' export const ChartBox = styled.div` - height: 300px; + margin: 100px 0; + display: flex; + flex-direction: column; width: 100%; + padding: ${sizes(8)}; + + .chart-box { + margin: -20px 0 0 -20px; + width: calc(100% + 125px); + height: 300px; + } ` export const HDivider = styled(Divider)` diff --git a/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawer.tsx b/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawer.tsx index 665cdc0fb5..0385b33590 100644 --- a/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawer.tsx +++ b/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawer.tsx @@ -7,10 +7,6 @@ import { SvgActionLinkUrl, SvgActionMarket, SvgActionShoppingCart, SvgActionWarn import { ActionDialogButtonProps } from '@/components/ActionBar' import { CrtDrawer } from '@/components/CrtDrawer' import { TextButton } from '@/components/_buttons/Button' -import { CrtMarketForm } from '@/components/_crt/MarketDrawer/MarketDrawer.types' -import { MarketDrawerPreview } from '@/components/_crt/MarketDrawer/MarketDrawerPreview' -import { MarketStep } from '@/components/_crt/MarketDrawer/steps/MarketStep' -import { SaleSummaryStep } from '@/components/_crt/MarketDrawer/steps/SaleSummaryStep' import { SuccessActionModalTemplate } from '@/components/_crt/SuccessActionModalTemplate' import { atlasConfig } from '@/config' import { absoluteRoutes } from '@/config/routes' @@ -18,6 +14,11 @@ import { useClipboard } from '@/hooks/useClipboard' import { useUser } from '@/providers/user/user.hooks' import { transitions } from '@/styles' +import { CrtMarketForm } from './MarketDrawer.types' +import { MarketDrawerPreview } from './MarketDrawerPreview' +import { MarketStep } from './steps/MarketStep' +import { SaleSummaryStep } from './steps/SaleSummaryStep' + enum MARKET_STEPS { market, saleSummary, @@ -133,9 +134,8 @@ export const MarketDrawer = ({ show, onClose, tokenName }: CrtMarketSaleViewProp primaryButton={{ text: 'Continue', onClick: () => { - client.refetchQueries({ include: 'active' }).then(() => { - setShowSuccessModal(false) - }) + client.refetchQueries({ include: 'active' }) + setShowSuccessModal(false) }, }} /> diff --git a/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawerPreview.tsx b/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawerPreview.tsx index 4062899ca6..a917d9d94b 100644 --- a/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawerPreview.tsx +++ b/packages/atlas/src/components/_crt/MarketDrawer/MarketDrawerPreview.tsx @@ -2,11 +2,11 @@ import { Datum } from '@nivo/line' import BN from 'bn.js' import { SvgJoyTokenMonochrome16 } from '@/assets/icons' +import { FlexBox } from '@/components/FlexBox' import { NumberFormat, formatNumberShort } from '@/components/NumberFormat' import { Text } from '@/components/Text' import { LineChart, defaultChartTheme } from '@/components/_charts/LineChart' import { TooltipBox } from '@/components/_crt/CreateTokenDrawer/steps/styles' -import { ChartBox } from '@/components/_crt/MarketDrawer/MarketDrawer.styles' import { useDebounceValue } from '@/hooks/useDebounceValue' import { AMM_DESCO_CURVE_CONST, HAPI_TO_JOY_RATE } from '@/joystream-lib/config' import { hapiBnToTokenNumber, tokenNumberToHapiBn } from '@/joystream-lib/utils' @@ -14,6 +14,8 @@ import { useTokenPrice } from '@/providers/joystream' import { cVar } from '@/styles' import { calcBuyMarketPricePerToken } from '@/utils/crts' +import { ChartBox } from './MarketDrawer.styles' + type MarketDrawerPreviewProps = { tokenName: string startingPrice: number @@ -23,7 +25,7 @@ const issuedTokens = [1, 10, 10 ** 2, 10 ** 3, 10 ** 4, 10 ** 5] export const MarketDrawerPreview = ({ tokenName, startingPrice }: MarketDrawerPreviewProps) => { const { tokenPrice } = useTokenPrice() - const debouncedStartingPrice = useDebounceValue(startingPrice, 500) + const debouncedStartingPrice = useDebounceValue(Math.max(0, startingPrice), 500) const chartData: Datum[] = issuedTokens.map((num) => ({ x: formatNumberShort(num), y: hapiBnToTokenNumber( @@ -53,65 +55,75 @@ export const MarketDrawerPreview = ({ tokenName, startingPrice }: MarketDrawerPr return ( <> - { - return ( - - - - - - {point.data.xFormatted} {tokenName} supply - - - ) - }} - yScale={{ - type: 'log', - base: 2, - min: 'auto', - max: 'auto', - }} - axisLeft={{ - tickSize: 5, - tickPadding: 5, - tickValues: 5, - ticksPosition: 'before', - format: (tick) => formatNumberShort(tick), - // eslint-disable-next-line - // @ts-ignore - renderTick: ({ x, y, textX, textY, opacity, textBaseline, value, format }) => { - const iconX = textX - 18 - const iconY = textY - 8 + + + HOW TOKEN PRICE RISES WITH GROWING TOTAL SUPPLY + + + The more the supply the higher the price. + + +
+ { return ( - - - - {format && format(value)} - - + + + + + + {point.data.xFormatted} ${tokenName} supply + + ) - }, - }} - gridYValues={getTickValues()} - data={[ - { - id: 1, - color: cVar('colorCoreBlue500'), - data: chartData, - }, - ]} - enableCrosshair={false} - /> + }} + yScale={{ + type: 'log', + base: 2, + min: 'auto', + max: 'auto', + }} + axisLeft={{ + tickSize: 5, + tickPadding: 5, + tickValues: 5, + ticksPosition: 'before', + format: (tick) => formatNumberShort(tick), + // eslint-disable-next-line + // @ts-ignore + renderTick: ({ x, y, textX, textY, opacity, textBaseline, value, format }) => { + const iconX = textX - 18 + const iconY = textY - 8 + return ( + + + + {format && format(value)} + + + ) + }, + }} + gridYValues={getTickValues()} + data={[ + { + id: 1, + color: cVar('colorCoreBlue500'), + data: chartData, + }, + ]} + enableCrosshair={false} + /> +
) diff --git a/packages/atlas/src/components/_crt/MarketDrawer/steps/MarketStep.tsx b/packages/atlas/src/components/_crt/MarketDrawer/steps/MarketStep.tsx index 51f95b911b..945b32bf46 100644 --- a/packages/atlas/src/components/_crt/MarketDrawer/steps/MarketStep.tsx +++ b/packages/atlas/src/components/_crt/MarketDrawer/steps/MarketStep.tsx @@ -49,7 +49,7 @@ export const MarketStep: FC = ({ defaultValues: formDefaultValue, }) - const priceWatch = watch('price') + const priceWatch = Math.max(0, watch('price')) useEffect(() => { handlePriceChange(priceWatch) @@ -75,9 +75,8 @@ export const MarketStep: FC = ({ }) const isChecked = watch('isChecked') - const price = watch('price') - const tokenInUsd = (price || 0) * (tokenPrice || 0) + const tokenInUsd = (priceWatch || 0) * (tokenPrice || 0) const handleGoToNextStep = useCallback(() => { handleSubmit((data) => { diff --git a/packages/atlas/src/components/_crt/MarketDrawer/steps/SaleSummaryStep.tsx b/packages/atlas/src/components/_crt/MarketDrawer/steps/SaleSummaryStep.tsx index 222163b35f..842bee0f9c 100644 --- a/packages/atlas/src/components/_crt/MarketDrawer/steps/SaleSummaryStep.tsx +++ b/packages/atlas/src/components/_crt/MarketDrawer/steps/SaleSummaryStep.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect } from 'react' +import { FC, useCallback, useEffect } from 'react' import { SvgAlertsInformative24 } from '@/assets/icons' import { ActionDialogButtonProps } from '@/components/ActionBar' @@ -39,36 +39,24 @@ export const SaleSummaryStep: FC = ({ const { joystream, proxyCallback } = useJoystream() const { memberId, channelId } = useUser() - useEffect(() => { - setPrimaryButtonProps({ - text: 'Start sale', - onClick: () => { - if (!joystream || !memberId || !channelId || !tokenPrice) return - handleTransaction({ - txFactory: async (updateStatus) => - (await joystream.extrinsics).startAmm(memberId, channelId, tokenPrice, price, proxyCallback(updateStatus)), - onTxSync: async () => { - onSuccess() - }, - onError: () => { - displaySnackbar({ - title: 'Something went wrong', - }) - handleCloseModal() - }, - }) + const handleSubmitTransaction = useCallback(() => { + if (!joystream || !memberId || !channelId || !tokenPrice) return + handleTransaction({ + txFactory: async (updateStatus) => + (await joystream.extrinsics).startAmm(memberId, channelId, tokenPrice, price, proxyCallback(updateStatus)), + onTxSync: async () => { + onSuccess() }, - }) - setSecondaryButtonProps({ - text: 'Back', - onClick: () => { - handleBackClick() + onError: () => { + displaySnackbar({ + title: 'Something went wrong', + }) + handleCloseModal() }, }) }, [ channelId, displaySnackbar, - handleBackClick, handleCloseModal, handleTransaction, joystream, @@ -76,11 +64,23 @@ export const SaleSummaryStep: FC = ({ onSuccess, price, proxyCallback, - setPrimaryButtonProps, - setSecondaryButtonProps, tokenPrice, ]) + useEffect(() => { + setPrimaryButtonProps({ + text: 'Start sale', + onClick: () => handleSubmitTransaction(), + }) + + setSecondaryButtonProps({ + text: 'Back', + onClick: () => { + handleBackClick() + }, + }) + }, [handleBackClick, handleSubmitTransaction, setPrimaryButtonProps, setSecondaryButtonProps]) + return ( diff --git a/packages/atlas/src/components/_crt/StartSaleOrMarketButton/StartSaleOrMarketButton.tsx b/packages/atlas/src/components/_crt/StartSaleOrMarketButton/StartSaleOrMarketButton.tsx index 8ac222893e..742aea7c62 100644 --- a/packages/atlas/src/components/_crt/StartSaleOrMarketButton/StartSaleOrMarketButton.tsx +++ b/packages/atlas/src/components/_crt/StartSaleOrMarketButton/StartSaleOrMarketButton.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useCallback, useState } from 'react' import { createPortal, flushSync } from 'react-dom' import { SvgActionSell } from '@/assets/icons' @@ -13,6 +13,7 @@ type StartSaleOrMarketButtonProps = { export const StartSaleOrMarketButton = ({ tokenName, ...buttonProps }: StartSaleOrMarketButtonProps) => { const [showChoiceDrawer, setShowChoiceDrawer] = useState(false) const [showMarketDrawer, setShowMarketDrawer] = useState(false) + const onMarketClose = useCallback(() => setShowMarketDrawer(false), []) return ( <>