🧰 CRT Maintenance (#4997)

* New asset

* Add crt maintenance view

* Add config entry

* Linter

packages/atlas/atlas.config.yml

@@ -11,6 +11,7 @@ general:
   joystreamLandingPageUrl: 'https://www.joystream.org' # URL for Joystream landing page - used in the footer and in "Learn more" links
   joystreamDiscordUrl: 'https://discord.gg/DE9UN3YpRP' # URL for Joystream Discord - used for support when errors occur
   appContentFocus: 'web3 & crypto' # Content focus of given app. Provide a string, for example `web & crypto` or `sport`
+  crtMaintenanceMode: false
 storage:
   assetResponseTimeout: 2_000 # Timeout for asset response in ms - after this timeout, different distributor will be tried
   assetUploadStatusPollingInterval: 2000 # Interval for polling asset upload status in ms - polling begins once asset is uploaded and is finished once QN reports the asset as accepted

packages/atlas/src/config/configSchema.ts

@@ -18,6 +18,7 @@ export const configSchema = z.object({
     joystreamLandingPageUrl: z.string(),
     joystreamDiscordUrl: z.string(),
     appContentFocus: z.string().nullable(),
+    crtMaintenanceMode: z.boolean(),
   }),
   storage: z.object({
     assetResponseTimeout: z.number(),

packages/atlas/src/views/studio/CrtMaintenanceView/CrtMaintenanceView.tsx

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled'
+import { FC } from 'react'
+
+import crtMaint from '@/assets/images/crt-maintenance.webp'
+import { Text } from '@/components/Text'
+import { useHeadTags } from '@/hooks/useHeadTags'
+
+export const CrtMaintenanceView: FC = () => {
+  const headTags = useHeadTags('Creator tokens')
+  return (
+    <>
+      {headTags}
+      <Container>
+        <img style={{ maxWidth: '428px' }} src={crtMaint} alt="Creator token maintenance image" />
+        <Text variant="h500" as="h1" margin={{ top: 10 }}>
+          Creator Tokens are Under Maintenance
+        </Text>
+        <Text as="span" margin={{ top: 2 }} align="center" variant="t200" color="colorText">
+          We should be back shortly. In the meantime, {/*@ts-ignore our types don't allow this but its fine here*/}
+          <Text variant="t200" as="a" color="colorTextPrimary" href="https://www.google.com" target="_blank">
+            feel free to connect with us on Discord.
+          </Text>
+        </Text>
+      </Container>
+    </>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  margin: 0 auto;
+  text-align: center;
+
+  * {
+    width: min(100%, 408px);
+  }
+`

packages/atlas/src/views/studio/CrtMaintenanceView/index.ts

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

packages/atlas/src/views/studio/CrtWelcomeView/CrtWelcomeView.tsx

@@ -3,9 +3,14 @@ import { useState } from 'react'
 import { SvgActionPlay } from '@/assets/icons'
 import { WelcomeView } from '@/components/WelcomeView'
 import { CreateTokenDrawer } from '@/components/_crt/CreateTokenDrawer/CreateTokenDrawer'
+import { atlasConfig } from '@/config'
+import { CrtMaintenanceView } from '@/views/studio/CrtMaintenanceView'
 
 export const CrtWelcomeView = () => {
   const [showDrawer, setShowDrawer] = useState(false)
+  if (atlasConfig.general.crtMaintenanceMode) {
+    return <CrtMaintenanceView />
+  }
   return (
     <>
       <CreateTokenDrawer show={showDrawer} onClose={() => setShowDrawer(false)} />