move all the app config into single YAML file (#3293)

* move all the app config into single YAML file

* update comment

* fix storybook build issue

packages/atlas-meta-server/.env

@@ -3,4 +3,4 @@
 GRAPHQL_URL=https://orion.joystream.org/graphql
 APP_NAME=Atlas
 TWITTER_ID=@JoystreamDAO
-BASE_APP_URL=https://play.joystream.org
+BASE_APP_URL=https://play.joystream.org

packages/atlas/.storybook/main.ts

@@ -1,3 +1,4 @@
+import ViteYaml from '@modyfi/vite-plugin-yaml'
 import { Options, StorybookConfig } from '@storybook/core-common'
 import { UserConfig, mergeConfig } from 'vite'
 
@@ -26,9 +27,12 @@ const config: CustomizedStorybookConfig = {
       resolve: viteConfig.resolve,
       build: {
         target: viteConfig.build?.target,
+        // https://github.com/storybookjs/builder-vite/issues/409
+        minify: false,
+        sourcemap: false,
       },
       // eslint-disable-next-line
-      plugins: [viteConfig.plugins?.find((p) => (p as any).name === 'babel')],
+      plugins: [viteConfig.plugins?.find((p) => (p as any).name === 'babel'), ViteYaml()],
     })
   },
 }

packages/atlas/atlas.config.yml

@@ -0,0 +1,160 @@
+general:
+  appName: 'Atlas' # Application name - used in the copy throughout the app, in index.html, open graph meta tags, etc
+  appTwitterId: '@JoystreamDAO' # Twitter handle for the app - used in open graph meta tags in HTML
+  appUrl: 'https://play.joystream.org' # URL at which the app is hosted - used in open graph meta tags in HTML
+  appGithubUrl: 'https://github.com/Joystream/atlas' # URL for Atlas GitHub repository - used in the footer
+  pioneerMemberUrlPrefix: 'https://dao.joystream.org/#/members' # URL prefix for Pioneer member profile page - used to link to member details
+  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
+
+storage:
+  assetResponseTimeout: 20000 # 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
+  uploadProcessingTimeout: 60000 # Timeout for processing uploaded asset in ms - after this timeout, upload will be considered failed
+  minimumDistributorRefetchTime: 1000 # Minimum time before refetching distributors list in ms - refetching is done if certain bag is not found on any distributor
+
+  channelBagPrefix: 'dynamic:channel:' # Prefix for channel bag ID - used to create a unique bag ID for each channel
+  uploadPath: 'api/v1/files' # Path to Storage Node upload endpoint
+  assetPath: 'api/v1/assets' # Path to Distributor Node asset endpoint
+
+joystream:
+  tokenTicker: 'tJOY' # Ticker for the token used in the app
+  alternativeNodes:
+    - name: 'Jsgenesis (Europe/UK)'
+      url: 'wss://testnet-rpc-3-uk.joystream.org'
+    - name: 'Jsgenesis (US/East)'
+      url: 'wss://testnet-rpc-1-us.joystream.org'
+    - name: 'JoystreamStats.Live'
+      url: 'wss://pl.joystreamstats.live/rpc'
+    - name: 'Local'
+      url: 'ws://localhost:9944'
+
+features:
+  nft:
+    auctionMinimumBidStepMultiplier: 0.02 # Multiplier for the auction's starting price used to determine auction's minimum bid step. See more: https://joystream.gitbook.io/testnet-workspace/system/content-directory/nft#auction
+    openAuctionBidLockDuration: 300 # Number of blocks for which bids on open auctions are locked from withdrawal. See more: https://joystream.gitbook.io/testnet-workspace/system/content-directory/nft#auction-type
+    englishAuctionExtensionPeriod: 5 # Number of blocks from the auction's end during which auction will be extended if a bid is placed. See more: https://joystream.gitbook.io/testnet-workspace/system/content-directory/nft#auction-type
+    statusPollingInterval: 20000 # Interval for polling NFT status on VideoView in ms
+  notifications:
+    pollingInterval: 30000 # Interval for polling notifications in ms
+  playback:
+    playbackRates: [2, 1.5, 1.25, 1, 0.5, 0.25] # Playback rates available in the player
+  comments:
+    reactions: # List of allowed comment reactions
+      - id: 1
+        emoji: '👍'
+        name: 'like'
+      - id: 2
+        emoji: '❤️'
+        name: 'love'
+      - id: 3
+        emoji: '😂'
+        name: 'laugh'
+      - id: 4
+        emoji: '🤯'
+        name: 'shock'
+      - id: 5
+        emoji: '😠'
+        name: 'anger'
+content:
+  blockedDataObjectIds: [] # Array of data object IDs that should be blocked from being displayed in the app
+  blockedVideoIds: [] # Array of video IDs that should be blocked from being displayed in the app
+  blockedChannelIds: [] # Array of channel IDs that should be blocked from being displayed in the app
+
+  categories: # List of display categories to be used in the app. Those are local to the application and are related to metaprotocol categories via 'videoCategories' array.
+    - id: '1' # Local category ID
+      name: 'Music' # Display name of the category
+      color: '#D92E61' # Color used in the UI for this category
+      iconUrl: '...' # URL for category icon SVG
+      coverImgUrl: '...' # URL for category cover image
+      videoCategories: ['1', '2'] # List of metaprotocol category IDs that should be included in this display category
+
+  languages: # List of languages to be used in the app. Those will be used when setting video's language, for adding subtitles, etc.
+    - isoCode: ar
+      name: Arabic
+    - isoCode: zh
+      name: Chinese
+    - isoCode: en
+      name: English
+    - isoCode: fr
+      name: French
+    - isoCode: de
+      name: German
+    - isoCode: ja
+      name: Japanese
+    - isoCode: ms
+      name: Malay
+    - isoCode: pt
+      name: Portuguese
+    - isoCode: ru
+      name: Russian
+    - isoCode: st
+      name: Spanish
+    - isoCode: am
+      name: Amharic
+    - isoCode: bn
+      name: Bengali
+    - isoCode: bg
+      name: Bulgarian
+    - isoCode: hr
+      name: Croatian
+    - isoCode: cs
+      name: Czech
+    - isoCode: da
+      name: Danish
+    - isoCode: dv
+      name: Dutch
+    - isoCode: et
+      name: Estonian
+    - isoCode: fj
+      name: Filipino
+    - isoCode: fi
+      name: Finnish
+    - isoCode: de
+      name: Greek
+    - isoCode: ha
+      name: Hausa
+    - isoCode: he
+      name: Hebrew
+    - isoCode: hu
+      name: Hungarian
+    - isoCode: ga
+      name: Irish
+    - isoCode: it
+      name: Italian
+    - isoCode: ko
+      name: Korean
+    - isoCode: lo
+      name: Lao
+    - isoCode: lv
+      name: Latvian
+    - isoCode: lt
+      name: Lithuanian
+    - isoCode: mt
+      name: Maltese
+    - isoCode: pl
+      name: Polish
+    - isoCode: pt
+      name: Punjabi
+    - isoCode: qu
+      name: Romanian
+    - isoCode: sk
+      name: Slovak
+    - isoCode: sl
+      name: Slovenian
+    - isoCode: sw
+      name: Swahili
+    - isoCode: sv
+      name: Swedish
+    - isoCode: ta
+      name: Tamil
+    - isoCode: th
+      name: Thai
+    - isoCode: tr
+      name: Turkish
+    - isoCode: ur
+      name: Urdu
+    - isoCode: vi
+      name: Vietnamese
+    - isoCode: yo
+      name: Yoruba

packages/atlas/package.json

@@ -96,12 +96,13 @@
     "@graphql-codegen/typescript-operations": "^2.5.3",
     "@graphql-codegen/typescript-react-apollo": "^3.3.3",
     "@joystream/prettier-config": "^1.0.0",
+    "@modyfi/vite-plugin-yaml": "^1.0.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@storybook/addon-actions": "6.4.18",
     "@storybook/addon-docs": "6.4.18",
     "@storybook/addon-essentials": "6.4.18",
     "@storybook/addon-links": "6.4.18",
-    "@storybook/builder-vite": "0.2.2",
+    "@storybook/builder-vite": "0.2.3",
     "@storybook/react": "6.4.18",
     "@storybook/theming": "6.4.18",
     "@svgr/cli": "^6.3.1",
@@ -110,6 +111,7 @@
     "@testing-library/react": "^13.4.0",
     "@types/bn.js": "^5.1.1",
     "@types/glider-js": "^1.7.6",
+    "@types/js-yaml": "^4",
     "@types/loadable__component": "^5.13.4",
     "@types/lodash-es": "^4.17.6",
     "@types/react": "^18.0.18",
@@ -122,6 +124,7 @@
     "@vitejs/plugin-react": "^2.1.0",
     "esbuild-register": "^3.3.3",
     "happy-dom": "^4.1.0",
+    "js-yaml": "^4.1.0",
     "madge": "^5.0.1",
     "postcss-syntax": "^0.36.2",
     "react-hooks-testing-library": "^0.6.0",

packages/atlas/src/.env

@@ -6,10 +6,6 @@ VITE_PRICE_SERVICE_URL=
 VITE_ASSETS_SERVICE_URL=https://atlas-services.joystream.org/avatars
 VITE_HCAPTCHA_SITE_KEY=69bf583a-6e4b-4272-9d2e-8c4337e25187
 
-VITE_APP_NAME=Atlas
-VITE_TWITTER_ID=@JoystreamDAO
-VITE_BASE_APP_URL=https://play.joystream.org/
-
 # default target env is development
 VITE_DEVELOPMENT_ORION_URL=https://atlas-dev.joystream.org/orion/graphql
 VITE_DEVELOPMENT_QUERY_NODE_SUBSCRIPTION_URL=wss://atlas-dev.joystream.org/query-node/server/graphql

packages/atlas/src/AnalyticsManager.tsx

@@ -1,7 +1,7 @@
 import ls from '@livesession/sdk'
 import { FC, useCallback, useEffect } from 'react'
 
-import { BUILD_ENV, readEnv } from '@/config/envs'
+import { BUILD_ENV, readEnv } from '@/config/env'
 import { usePersonalDataStore } from '@/providers/personalData'
 
 export const AnalyticsManager: FC = () => {

packages/atlas/src/Maintenance.tsx

@@ -3,8 +3,7 @@ import { FC } from 'react'
 
 import { Text } from '@/components/Text'
 import { SvgEmptyStateIllustration, SvgJoystreamLogoFull } from '@/components/_illustrations'
-
-import { APP_NAME } from './config/env'
+import { atlasConfig } from '@/config'
 
 export const Maintenance: FC = () => (
   <Container>
@@ -13,8 +12,8 @@ export const Maintenance: FC = () => (
       We’ll be right back!
     </Header>
     <Text as="p" variant="t200" color="colorText">
-      {APP_NAME} is currently undergoing maintenance work <br /> in order to ensure the best features <br /> and
-      performance for our users. <br /> <br />
+      {atlasConfig.general.appName} is currently undergoing maintenance work <br /> in order to ensure the best features{' '}
+      <br /> and performance for our users. <br /> <br />
       We should be back shortly. <br /> See you soon!
     </Text>
     <SvgJoystreamLogoFull />

packages/atlas/src/components/FiltersBar/FiltersBar.tsx

@@ -12,7 +12,7 @@ import { Select } from '@/components/_inputs/Select'
 import { DialogModal, DialogModalProps } from '@/components/_overlays/DialogModal'
 import { DialogPopover } from '@/components/_overlays/DialogPopover'
 import { PopoverImperativeHandle } from '@/components/_overlays/Popover'
-import { LANGUAGES_LIST } from '@/config/languages'
+import { atlasConfig } from '@/config'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { transitions } from '@/styles'
 
@@ -258,7 +258,7 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
                   Language
                 </Text>
                 <Select
-                  items={[{ name: 'All languages', value: 'undefined' }, ...LANGUAGES_LIST]}
+                  items={[{ name: 'All languages', value: 'undefined' }, ...atlasConfig.derived.languagesSelectValues]}
                   placeholder="Any language"
                   size="medium"
                   value={language}

packages/atlas/src/components/NumberFormat/NumberFormat.tsx

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react'
 import mergeRefs from 'react-merge-refs'
 
 import { Text, TextProps, TextVariant } from '@/components/Text'
-import { JOY_CURRENCY_TICKER } from '@/config/joystream'
+import { atlasConfig } from '@/config'
 import { hapiBnToTokenNumber } from '@/joystream-lib/utils'
 import { formatNumber } from '@/utils/number'
 
@@ -52,7 +52,7 @@ export const NumberFormat = forwardRef<HTMLHeadingElement, NumberFormatProps>(
     const content = (
       <StyledText {...textProps} variant={variant} ref={mergeRefs([ref, textRef])}>
         {displayedValue || formattedValue}
-        {withToken && ` ${JOY_CURRENCY_TICKER}`}
+        {withToken && ` ${atlasConfig.joystream.tokenTicker}`}
       </StyledText>
     )
 

packages/atlas/src/components/ViewErrorFallback/ViewErrorFallback.tsx

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom'
 import { AnimatedError } from '@/components/AnimatedError'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
-import { JOYSTREAM_DISCORD_URL } from '@/config/env'
+import { atlasConfig } from '@/config'
 import { absoluteRoutes } from '@/config/routes'
 import { media, sizes } from '@/styles'
 import { SentryLogger } from '@/utils/logs'
@@ -45,7 +45,7 @@ export const ViewErrorFallback: FC<ViewErrorFallbackProps> = ({ onResetClick })
         </Text>
       </Message>
       <ButtonsContainer>
-        <Button to={JOYSTREAM_DISCORD_URL} variant="secondary">
+        <Button to={atlasConfig.general.joystreamDiscordUrl} variant="secondary">
           Open Discord
         </Button>
         <Button onClick={handleResetClick}>Return to home page</Button>

packages/atlas/src/components/_auth/SignInModal/SignInModal.tsx

@@ -5,8 +5,8 @@ import shallow from 'zustand/shallow'
 
 import { Button } from '@/components/_buttons/Button'
 import { DialogButtonProps } from '@/components/_overlays/Dialog'
+import { atlasConfig } from '@/config'
 import { FAUCET_URL } from '@/config/env'
-import { JOY_CURRENCY_TICKER } from '@/config/joystream'
 import { MemberId } from '@/joystream-lib/types'
 import { hapiBnToTokenNumber } from '@/joystream-lib/utils'
 import { useJoystream } from '@/providers/joystream/joystream.hooks'
@@ -120,7 +120,7 @@ export const SignInModal: FC = () => {
             return
           }
           const { lockedBalance } = await joystream.getAccountBalance(selectedAddress)
-          const amountOfTokens = `${hapiBnToTokenNumber(new BN(lockedBalance))} ${JOY_CURRENCY_TICKER}`
+          const amountOfTokens = `${hapiBnToTokenNumber(new BN(lockedBalance))} ${atlasConfig.joystream.tokenTicker}`
           displaySnackbar({
             title: `You received ${amountOfTokens}`,
             description: `Enjoy your ${amountOfTokens} tokens to help you cover transaction fees. These tokens are non-transferable and can't be spent on NFTs or other purchases.`,

packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalMembershipStep.tsx

@@ -13,7 +13,8 @@ import { Text } from '@/components/Text'
 import { FormField } from '@/components/_inputs/FormField'
 import { Input } from '@/components/_inputs/Input'
 import { ImageCropModal, ImageCropModalImperativeHandle } from '@/components/_overlays/ImageCropModal'
-import { APP_NAME, HCAPTCHA_SITE_KEY, JOYSTREAM_URL } from '@/config/env'
+import { atlasConfig } from '@/config'
+import { HCAPTCHA_SITE_KEY } from '@/config/env'
 import { MEMBERSHIP_NAME_PATTERN } from '@/config/regex'
 
 import { SignInModalStepTemplate } from './SignInModalStepTemplate'
@@ -120,9 +121,9 @@ export const SignInModalMembershipStep: FC<SignInModalMembershipStepProps> = ({
       backgroundImage={watch('avatar')?.url || undefined}
       subtitle={
         <>
-          To get the full {APP_NAME} experience, you need a free Joystream blockchain membership.
+          To get the full {atlasConfig.general.appName} experience, you need a free Joystream blockchain membership.
           <Text as="p" variant="t100" color="inherit">
-            <Anchor href={JOYSTREAM_URL} target="_blank">
+            <Anchor href={atlasConfig.general.joystreamLandingPageUrl} target="_blank">
               Learn about Joystream &rarr;
             </Anchor>
           </Text>

packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalTermsStep.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect } from 'react'
 
 import { TermsOfServiceWithoutPreamble } from '@/components/TermsOfService'
-import { APP_NAME } from '@/config/env'
+import { atlasConfig } from '@/config'
 
 import { SignInModalStepTemplate } from './SignInModalStepTemplate'
 import { SignInStepProps } from './SignInSteps.types'
@@ -22,7 +22,7 @@ export const SignInModalTermsStep: FC<SignInStepProps> = ({
   return (
     <SignInModalStepTemplate
       title="Accept Terms of Service"
-      subtitle={`Last updated on the 4th of May 2021. This Terms of Service ("Agreement") is a binding obligation between you ("User") and Jsgenesis AS ("Company", "We", "Us", "Our") for use of our Joystream Player interface ("${APP_NAME}") hosted at play.joystream.org and all other products (collectively "Software") developed and published by Us.`}
+      subtitle={`Last updated on the 4th of May 2021. This Terms of Service ("Agreement") is a binding obligation between you ("User") and Jsgenesis AS ("Company", "We", "Us", "Our") for use of our Joystream Player interface ("${atlasConfig.general.appName}") hosted at play.joystream.org and all other products (collectively "Software") developed and published by Us.`}
       hasNavigatedBack={hasNavigatedBack}
     >
       <TermsOfServiceWithoutPreamble standalone />