Market start changes

WRadoslaw · Nov 27, 2023 · 2174d92 · 2174d92
1 parent cf11ed8
commit 2174d92
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 100 deletions.
diff --git 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
@@ -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
@@ -7,17 +7,18 @@ 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'
 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
@@ -2,18 +2,20 @@ 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'
 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 (
     <>
       <ChartBox>
-        <LineChart
-          curve="natural"
-          enablePointLabel
-          tooltip={(point) => {
-            return (
-              <TooltipBox>
-                <Text variant="t300" as="p">
-                  <NumberFormat value={Number(point.data.yFormatted)} format="short" as="span" withToken />
-                </Text>
-                <Text variant="t100" as="p" color="colorTextMuted">
-                  {point.data.xFormatted} {tokenName} supply
-                </Text>
-              </TooltipBox>
-            )
-          }}
-          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
+        <FlexBox gap={2} flow="column">
+          <Text variant="h100" as="h1">
+            HOW TOKEN PRICE RISES WITH GROWING TOTAL SUPPLY
+          </Text>
+          <Text variant="t200" as="p" color="colorTextMuted">
+            The more the supply the higher the price.
+          </Text>
+        </FlexBox>
+        <div className="chart-box">
+          <LineChart
+            curve="natural"
+            enablePointLabel
+            tooltip={(point) => {
               return (
-                <g transform={`translate(${x - 24},${y})`} style={{ opacity }}>
-                  <SvgJoyTokenMonochrome16 x={iconX} y={iconY} />
-                  <text
-                    // eslint-disable-next-line
-                    // @ts-ignore
-                    alignmentBaseline={textBaseline}
-                    textAnchor="start"
-                    transform={`translate(${textX},${textY})`}
-                    style={defaultChartTheme.axis.ticks.text}
-                  >
-                    {format && format(value)}
-                  </text>
-                </g>
+                <TooltipBox>
+                  <Text variant="t300" as="p">
+                    <NumberFormat value={Number(point.data.yFormatted)} format="short" as="span" withToken />
+                  </Text>
+                  <Text variant="t100" as="p" color="colorTextMuted">
+                    {point.data.xFormatted} ${tokenName} supply
+                  </Text>
+                </TooltipBox>
               )
-            },
-          }}
-          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 (
+                  <g transform={`translate(${x - 24},${y})`} style={{ opacity }}>
+                    <SvgJoyTokenMonochrome16 x={iconX} y={iconY} />
+                    <text
+                      // eslint-disable-next-line
+                      // @ts-ignore
+                      alignmentBaseline={textBaseline}
+                      textAnchor="start"
+                      transform={`translate(${textX},${textY})`}
+                      style={defaultChartTheme.axis.ticks.text}
+                    >
+                      {format && format(value)}
+                    </text>
+                  </g>
+                )
+              },
+            }}
+            gridYValues={getTickValues()}
+            data={[
+              {
+                id: 1,
+                color: cVar('colorCoreBlue500'),
+                data: chartData,
+              },
+            ]}
+            enableCrosshair={false}
+          />
+        </div>
       </ChartBox>
     </>
   )

diff --git 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<MarketStepProps> = ({
     defaultValues: formDefaultValue,
   })
 
-  const priceWatch = watch('price')
+  const priceWatch = Math.max(0, watch('price'))
 
   useEffect(() => {
     handlePriceChange(priceWatch)
@@ -75,9 +75,8 @@ export const MarketStep: FC<MarketStepProps> = ({
   })
 
   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
@@ -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,48 +39,48 @@ export const SaleSummaryStep: FC<SaleSummaryProps> = ({
   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,
     memberId,
     onSuccess,
     price,
     proxyCallback,
-    setPrimaryButtonProps,
-    setSecondaryButtonProps,
     tokenPrice,
   ])
 
+  useEffect(() => {
+    setPrimaryButtonProps({
+      text: 'Start sale',
+      onClick: () => handleSubmitTransaction(),
+    })
+
+    setSecondaryButtonProps({
+      text: 'Back',
+      onClick: () => {
+        handleBackClick()
+      },
+    })
+  }, [handleBackClick, handleSubmitTransaction, setPrimaryButtonProps, setSecondaryButtonProps])
+
   return (
     <ColumnBox gap={2}>
       <Text variant="h500" as="h2" margin={{ bottom: 2 }}>

diff --git 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 (
     <>
       <Button {...buttonProps} onClick={() => setShowChoiceDrawer(true)} icon={<SvgActionSell />}>
@@ -30,7 +31,7 @@ export const StartSaleOrMarketButton = ({ tokenName, ...buttonProps }: StartSale
               setShowMarketDrawer(true)
             }}
           />
-          <MarketDrawer tokenName={tokenName} show={showMarketDrawer} onClose={() => setShowMarketDrawer(false)} />
+          <MarketDrawer tokenName={tokenName} show={showMarketDrawer} onClose={onMarketClose} />
         </>,
         document.body
       )}