Merge branch 'crt' into fix/crt-follow-up

# Conflicts:
#	packages/atlas/src/components/CrtPreviewLayout/CrtPreviewLayout.tsx
#	packages/atlas/src/components/_crt/CrtStatusWidget/CrtStatusWidget.tsx
#	packages/atlas/src/views/viewer/ChannelView/ChannelViewTabs/ChannelToken.tsx

packages/atlas/src/api/queries/fragments.graphql

@@ -522,6 +522,7 @@ fragment FullCreatorToken on CreatorToken {
     ammInitPrice
     burnedByAmm
     mintedByAmm
+    ammSlopeParameter
   }
   sales {
     id

packages/atlas/src/components/_crt/AmmModalTemplates/AmmModalFormTemplate.tsx

@@ -0,0 +1,80 @@
+import { ReactNode } from 'react'
+import { Control, Controller, Validate } from 'react-hook-form'
+
+import { FlexBox } from '@/components/FlexBox'
+import { Information } from '@/components/Information'
+import { Text } from '@/components/Text'
+import { TextButton } from '@/components/_buttons/Button'
+import { FormField } from '@/components/_inputs/FormField'
+import { TokenInput } from '@/components/_inputs/TokenInput'
+import { useTokenPrice } from '@/providers/joystream'
+
+type AmmModalFormTemplateProps = {
+  validation?: Validate<number>
+  maxValue?: number
+  pricePerUnit?: number
+  control: Control<{ tokens: number }>
+  details?: {
+    title: string
+    content: ReactNode
+    tooltipText?: string
+  }[]
+  error?: string
+}
+
+export const AmmModalFormTemplate = ({
+  validation,
+  maxValue,
+  pricePerUnit,
+  details,
+  control,
+  error,
+}: AmmModalFormTemplateProps) => {
+  const { convertTokensToUSD } = useTokenPrice()
+
+  return (
+    <FlexBox flow="column" gap={8}>
+      <Controller
+        name="tokens"
+        control={control}
+        rules={{
+          validate: {
+            ...(validation ? { valid: validation } : {}),
+          },
+        }}
+        render={({ field }) => (
+          <FormField error={error}>
+            <TokenInput
+              value={field.value}
+              onChange={field.onChange}
+              placeholder="0"
+              nodeEnd={
+                <FlexBox gap={2} alignItems="baseline">
+                  {pricePerUnit ? (
+                    <Text variant="t300" as="p" color="colorTextMuted">
+                      ${convertTokensToUSD((field.value || 0) * pricePerUnit)?.toFixed(2)}
+                    </Text>
+                  ) : null}
+                  {maxValue ? <TextButton onClick={() => field.onChange(maxValue)}>Max</TextButton> : null}
+                </FlexBox>
+              }
+            />
+          </FormField>
+        )}
+      />
+      <FlexBox flow="column" gap={2}>
+        {details?.map((row, i) => (
+          <FlexBox key={row.title} alignItems="center" justifyContent="space-between">
+            <FlexBox width="auto" alignItems="center">
+              <Text variant={i + 1 === details.length ? 't200-strong' : 't200'} as="span" color="colorText">
+                {row.title}
+              </Text>
+              {row.tooltipText ? <Information text={row.tooltipText} /> : null}
+            </FlexBox>
+            {row.content}
+          </FlexBox>
+        ))}
+      </FlexBox>
+    </FlexBox>
+  )
+}

packages/atlas/src/components/_crt/AmmModalTemplates/AmmModalSummaryTemplate.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react'
+
+import { FlexBox } from '@/components/FlexBox'
+import { Information } from '@/components/Information'
+import { Text } from '@/components/Text'
+
+type AmmModalSummaryTemplateProps = {
+  details?: {
+    title: string
+    content: ReactNode
+    tooltipText?: string
+  }[]
+}
+
+export const AmmModalSummaryTemplate = ({ details }: AmmModalSummaryTemplateProps) => {
+  return (
+    <FlexBox flow="column" gap={5}>
+      {details?.map((row, i) => (
+        <FlexBox key={row.title} alignItems="center" justifyContent="space-between">
+          <FlexBox width="auto" alignItems="center">
+            <Text variant={i + 1 === details.length ? 't200-strong' : 't200'} as="span" color="colorText">
+              {row.title}
+            </Text>
+            {row.tooltipText ? <Information text={row.tooltipText} /> : null}
+          </FlexBox>
+          {row.content}
+        </FlexBox>
+      ))}
+    </FlexBox>
+  )
+}

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

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

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

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+
+import { Button } from '@/components/_buttons/Button'
+import { BuyMarketTokenModal } from '@/components/_crt/BuyMarketTokenModal'
+
+type BuyFromMarketButtonProps = {
+  tokenId: string
+}
+
+export const BuyFromMarketButton = ({ tokenId }: BuyFromMarketButtonProps) => {
+  const [showModal, setShowModal] = useState(false)
+  return (
+    <>
+      <BuyMarketTokenModal tokenId={tokenId} show={showModal} onClose={() => setShowModal(false)} />
+      <Button size="large" onClick={() => setShowModal(true)}>
+        Buy
+      </Button>
+    </>
+  )
+}