Merge branch 'crt' into feature/token-preview

# Conflicts:
#	packages/atlas/src/api/schemas/orion.json
#	packages/atlas/src/joystream-lib/extrinsics.ts
#	packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx
#	packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.tsx
#	packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx

packages/atlas/src/assets/illustrations/PatternAngledLines.tsx

@@ -0,0 +1,17 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgPatternAngledLines = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={72} height={72} viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M72 66.36V72h-5.64L0 5.64V0h5.64L72 66.36ZM0 17.28v11.255L43.466 72H54.72L0 17.28Zm0 33.64V39.6L32.4 72H21.08L0 50.92ZM0 72h10.08L0 61.92V72ZM17.28 0h11.254L72 43.465V54.72L17.28 0Zm33.64 0H39.6L72 32.4V21.08L50.92 0ZM72 10.08 61.92 0H72v10.08Z"
+      fill="#BBD9F6"
+      fillOpacity={0.13}
+    />
+  </svg>
+))
+SvgPatternAngledLines.displayName = 'SvgPatternAngledLines'
+const Memo = memo(SvgPatternAngledLines)
+export { Memo as SvgPatternAngledLines }

packages/atlas/src/assets/illustrations/PatternCircleLines.tsx

@@ -0,0 +1,21 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgPatternCircleLines = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={72} height={72} viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <g clipPath="url(#clip0_2659_1145)" fill="#BBD9F6" fillOpacity={0.13}>
+      <path d="M0 .027V8.03C34.861 9.067 62.933 37.139 63.97 72h8.004C70.93 32.72 39.28 1.069 0 .027Z" />
+      <path d="M55.966 72C54.935 41.557 30.443 17.065 0 16.034v8.005C26.024 25.063 46.937 45.976 47.96 72h8.006Z" />
+      <path d="M40 72c0-22.091-17.909-40-40-40v8c17.673 0 32 14.327 32 32h8Z" />
+      <path d="M24 72c0-13.255-10.745-24-24-24v8c8.837 0 16 7.163 16 16h8ZM8 72a8 8 0 0 0-8-8v8h8Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2659_1145">
+        <path fill="#fff" d="M0 0h72v72H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+))
+SvgPatternCircleLines.displayName = 'SvgPatternCircleLines'
+const Memo = memo(SvgPatternCircleLines)
+export { Memo as SvgPatternCircleLines }

packages/atlas/src/assets/illustrations/index.ts

@@ -2,6 +2,12 @@
 export * from './404PatternBottomLeft'
 export * from './404PatternTopRight'
 export * from './AvatarSilhouette'
+export * from './BenefitCardPatternSm1'
+export * from './BenefitCardPatternSm2'
+export * from './BenefitCardPatternSm3'
+export * from './BenefitCardPatternXxs1'
+export * from './BenefitCardPatternXxs2'
+export * from './BenefitCardPatternXxs3'
 export * from './BgPattern'
 export * from './EmptyStateIllustration'
 export * from './LargeComputer'
@@ -13,6 +19,8 @@ export * from './OtherSignInDialogPatterns'
 export * from './OtherSignInMobileDialogPatterns'
 export * from './OtherThumbsUpIllustrationSvg'
 export * from './OtherVideoTile'
+export * from './PatternAngledLines'
+export * from './PatternCircleLines'
 export * from './SigninIllustration'
 export * from './SmallCursor'
 export * from './SmallMoneroModified'

packages/atlas/src/components/_crt/MarketDrawer/MarketDrawer.tsx

@@ -26,7 +26,7 @@ export type CrtMarketSaleViewProps = {
 export const MarketDrawer = ({ show, onClose, tokenName }: CrtMarketSaleViewProps) => {
   const [activeStep, setActiveStep] = useState(MARKET_STEPS.market)
   const [marketData, setMarketData] = useState<CrtMarketForm>({
-    price: 0,
+    price: 10,
     tnc: atlasConfig.legal.crtTnc,
     isChecked: true,
   })
@@ -71,6 +71,7 @@ export const MarketDrawer = ({ show, onClose, tokenName }: CrtMarketSaleViewProp
             setPrimaryButtonProps={setPrimaryButtonProps}
             setSecondaryButtonProps={setSecondaryButtonProps}
             handleBackClick={handleBackClick}
+            handleCloseModal={onClose}
           />
         )
     }

packages/atlas/src/components/_crt/MarketDrawer/steps/MarketStep.tsx

@@ -26,7 +26,7 @@ type MarketStepProps = {
   onNextStep: (props: CrtMarketForm) => void
 }
 
-const DEFAULT_MIN_PRICE = 100
+const DEFAULT_MIN_PRICE = 0.01
 
 export const MarketStep: FC<MarketStepProps> = ({
   tokenName,
@@ -122,7 +122,7 @@ export const MarketStep: FC<MarketStepProps> = ({
               onChange={setPrice}
               nodeEnd={
                 <Text variant="t300" as="p" color="colorTextMuted">
-                  ${tokenInUsd.toFixed(2)}
+                  ${tokenInUsd.toFixed(price < 1 ? 5 : 2)}
                 </Text>
               }
             />

packages/atlas/src/components/_crt/MarketDrawer/steps/SaleSummaryStep.tsx

@@ -1,3 +1,4 @@
+import { useApolloClient } from '@apollo/client'
 import { FC, useEffect } from 'react'
 
 import { SvgAlertsInformative24 } from '@/assets/icons'
@@ -9,29 +10,58 @@ import { Text } from '@/components/Text'
 import { Tooltip } from '@/components/Tooltip'
 import { HDivider } from '@/components/_crt/MarketDrawer/MarketDrawer.styles'
 import { SummaryRow } from '@/components/_overlays/SendTransferDialogs/SendTransferDialogs.styles'
+import { useFee, useJoystream } from '@/providers/joystream'
+import { useSnackbar } from '@/providers/snackbars'
+import { useTransaction } from '@/providers/transactions/transactions.hooks'
+import { useUser } from '@/providers/user/user.hooks'
 
 type SaleSummaryProps = {
   price: number
   tnc: string
   setPrimaryButtonProps: (props: ActionDialogButtonProps) => void
   setSecondaryButtonProps: (props: ActionDialogButtonProps) => void
   handleBackClick: () => void
+  handleCloseModal: () => void
 }
 
 export const SaleSummaryStep: FC<SaleSummaryProps> = ({
   price,
   setSecondaryButtonProps,
   setPrimaryButtonProps,
   handleBackClick,
+  handleCloseModal,
 }) => {
-  // TODO: include fee
-  // const {fullFee, loading: feeLoading} = useFee('startMarketTx')
+  const { fullFee } = useFee('startAmmTx', ['1', '1', 1, price])
+  const { tokenPrice } = useJoystream()
+  const handleTransaction = useTransaction()
+  const { displaySnackbar } = useSnackbar()
+  const { joystream, proxyCallback } = useJoystream()
+  const client = useApolloClient()
+  const { memberId, channelId } = useUser()
 
   useEffect(() => {
     setPrimaryButtonProps({
       text: 'Start sale',
       onClick: () => {
-        // token sale tx
+        if (!joystream || !memberId || !channelId || !tokenPrice) return
+        handleTransaction({
+          txFactory: async (updateStatus) =>
+            (await joystream.extrinsics).startAmm(memberId, channelId, tokenPrice, price, proxyCallback(updateStatus)),
+          onTxSync: async () => {
+            displaySnackbar({
+              title: 'Success',
+              iconType: 'success',
+            })
+            client.refetchQueries({ include: 'active' })
+            handleCloseModal()
+          },
+          onError: () => {
+            displaySnackbar({
+              title: 'Something went wrong',
+            })
+            handleCloseModal()
+          },
+        })
       },
     })
     setSecondaryButtonProps({
@@ -40,7 +70,21 @@ export const SaleSummaryStep: FC<SaleSummaryProps> = ({
         handleBackClick()
       },
     })
-  }, [handleBackClick, setPrimaryButtonProps, setSecondaryButtonProps])
+  }, [
+    channelId,
+    client,
+    displaySnackbar,
+    handleBackClick,
+    handleCloseModal,
+    handleTransaction,
+    joystream,
+    memberId,
+    price,
+    proxyCallback,
+    setPrimaryButtonProps,
+    setSecondaryButtonProps,
+    tokenPrice,
+  ])
 
   return (
     <ColumnBox gap={2}>
@@ -71,7 +115,7 @@ export const SaleSummaryStep: FC<SaleSummaryProps> = ({
             <SvgAlertsInformative24 width={16} height={16} />
           </Tooltip>
         </FlexBox>
-        <NumberFormat variant="h300" withDenomination="before" value={0} withToken as="span" />
+        <NumberFormat variant="h300" withDenomination="before" format="short" value={fullFee} withToken as="span" />
       </SummaryRow>
     </ColumnBox>
   )

packages/atlas/src/components/_crt/SaleMarketChoiceDrawer/SaleMarketChoiceDrawer.tsx

@@ -0,0 +1,179 @@
+import styled from '@emotion/styled'
+import { ReactElement } from 'react'
+
+import { SvgActionCheck, SvgActionPlay } from '@/assets/icons'
+import { SvgPatternAngledLines, SvgPatternCircleLines } from '@/assets/illustrations'
+import { FlexBox } from '@/components/FlexBox'
+import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
+import { Text } from '@/components/Text'
+import { Button } from '@/components/_buttons/Button'
+import { BottomDrawer } from '@/components/_overlays/BottomDrawer'
+import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { cVar, media, sizes, square } from '@/styles'
+
+const SALE_POINTS = [
+  {
+    title: 'Direct revenue',
+    description: 'Earn money directly from your sale.',
+  },
+  {
+    title: 'Urgency',
+    description:
+      'Create an event with a clear end date to get everyone focused on one big event, get greater participation and excitement.',
+  },
+]
+
+const MARKET_POINTS = [
+  {
+    title: 'Liquidity',
+    description: 'You, and everyone else, can buy and sell at any time.',
+  },
+  {
+    title: 'Urgency',
+    description:
+      'Your AMM will be open all the time until you close it manually - this will be possible only if you have enough of your own tokens to do it.',
+  },
+]
+
+type SaleMarketChoiceDrawerProps = {
+  isOpen: boolean
+  onClose: () => void
+  onMarketChoice: () => void
+}
+
+export const SaleMarketChoiceDrawer = ({ isOpen, onClose, onMarketChoice }: SaleMarketChoiceDrawerProps) => {
+  const smMatch = useMediaMatch('sm')
+  return (
+    <StyledBottomDrawer isOpen={isOpen} onClose={onClose} title="Start sale or market">
+      <StyledLayoutGrid>
+        <GridItem colSpan={{ base: 12, lg: 10, xl: 8, xxl: 6 }} colStart={{ lg: 2, xl: 3, xxl: 4 }}>
+          <FlexBox gap={14} flow="column">
+            <FlexBox gap={2} flow="column">
+              <Text variant="h700" as="h1">
+                Start sale or market
+              </Text>
+              <Text variant="t300" color="colorText" as="p">
+                Sell your pre-minted tokens or open market for anyone to buy and sell your token.
+              </Text>
+            </FlexBox>
+            <FlexBox flow={smMatch ? 'row' : 'column'} alignItems="strech" width="100%" gap={6}>
+              <OptionCard
+                title="Sale"
+                description="A sale is a way to raise money for a new project by selling a certain number of tokens to the public at a set price over a certain period."
+                points={SALE_POINTS}
+                actionButton={{
+                  text: 'Start sale',
+                  onClick: () => undefined,
+                  disabled: true,
+                }}
+                icon={<SvgPatternCircleLines />}
+              />
+              <OptionCard
+                title="Market"
+                description="An automated market maker (AMM) is an algorithm that helps to buy and sell tokens by using price curves which automatically set prices and match buyers and sellers."
+                points={MARKET_POINTS}
+                actionButton={{
+                  text: 'Start market',
+                  onClick: onMarketChoice,
+                }}
+                icon={<SvgPatternAngledLines />}
+              />
+            </FlexBox>
+          </FlexBox>
+        </GridItem>
+      </StyledLayoutGrid>
+    </StyledBottomDrawer>
+  )
+}
+
+type OptionCardProps = {
+  title: string
+  description: string
+  points: {
+    title: string
+    description: string
+  }[]
+  actionButton: {
+    text: string
+    onClick: () => void
+    disabled?: boolean
+  }
+  icon: ReactElement
+}
+
+const OptionCard = ({ title, description, points, actionButton, icon }: OptionCardProps) => {
+  return (
+    <OptionCardWrapper>
+      <FlexBox flow="column" gap={4}>
+        {icon}
+        <FlexBox gap={4} alignItems="center">
+          <Text variant="h600" as="h1">
+            {title}
+          </Text>
+          <Button _textOnly icon={<SvgActionPlay />}>
+            Learn more
+          </Button>
+        </FlexBox>
+        <Text variant="t300" as="h1" color="colorText">
+          {description}
+        </Text>
+      </FlexBox>
+
+      <FlexBox flow="column" gap={6}>
+        {points.map((point, idx) => (
+          <FlexBox gap={4} key={idx}>
+            <CheckWrapper>
+              <SvgActionCheck />
+            </CheckWrapper>
+            <FlexBox flow="column">
+              <Text variant="h300" as="h1" color="colorTextStrong">
+                {point.title}
+              </Text>
+              <Text variant="t200" as="p" color="colorText">
+                {point.description}
+              </Text>
+            </FlexBox>
+          </FlexBox>
+        ))}
+      </FlexBox>
+
+      <Button fullWidth onClick={actionButton.onClick} disabled={actionButton.disabled}>
+        {actionButton.text}
+      </Button>
+    </OptionCardWrapper>
+  )
+}
+
+const CheckWrapper = styled.div`
+  display: grid;
+  place-items: center;
+  padding: ${sizes(1)};
+  background-color: ${cVar('colorBackgroundMutedAlpha')};
+  border-radius: 50%;
+`
+
+const OptionCardWrapper = styled.div`
+  display: grid;
+  flex: 1;
+  grid-template-rows: auto 1fr auto;
+  gap: ${sizes(12)};
+  padding: ${sizes(8)};
+  background-color: ${cVar('colorBackgroundMutedAlpha')};
+
+  > * > svg {
+    ${square(56)};
+  }
+`
+
+const StyledBottomDrawer = styled(BottomDrawer)`
+  top: 0;
+  height: 100vh;
+`
+
+const StyledLayoutGrid = styled(LayoutGrid)`
+  padding: ${sizes(20)} ${sizes(4)};
+
+  ${media.md} {
+    padding: ${sizes(20)} ${sizes(8)};
+  }
+`

packages/atlas/src/components/_crt/SaleMarketChoiceDrawer/index.ts

@@ -0,0 +1 @@
+export * from './SaleMarketChoiceDrawer'