[PROTO-1726] Start simple entrypoint for distro (#8104)

AudiusProject · Apr 18, 2024 · 7182221 · 7182221
1 parent 4180e1a
commit 7182221
Show file tree

Hide file tree

Showing 21 changed files with 2,054 additions and 335 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "packages/ddex/webapp/server",
     "packages/ddex/webapp/client",
     "packages/ddex/publisher",
+    "packages/ddex/entrypoint",
     "packages/es-indexer"
   ],
   "private": true,

diff --git a/packages/ddex/README.md b/packages/ddex/README.md
@@ -138,7 +138,7 @@ For docker compose to work: `cat packages/ddex/.env >> dev-tools/compose/.env`
 
 
 ### Bring up the ddex stack locally
-Run `audius-compose up -ddex-release-by-release` (or `audius-compose up --ddex-batched` -- see "Choreography" in Glossary below), and navigate to `http://localhost:9000` to view the DDEX webapp
+Run `audius-compose up --ddex-release-by-release` (or `audius-compose up --ddex-batched` -- see "Choreography" in Glossary below), and navigate to `http://localhost:9000` to view the DDEX webapp
 
 To upload a delivery to be processed:
   1. Create buckets: `aws --endpoint=http://ingress:4566 s3 mb s3://audius-test-raw && aws --endpoint=http://ingress:4566 s3 mb s3://audius-test-crawled`

diff --git a/packages/ddex/entrypoint/.eslintrc.cjs b/packages/ddex/entrypoint/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/packages/ddex/entrypoint/.gitignore b/packages/ddex/entrypoint/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/ddex/entrypoint/README.md b/packages/ddex/entrypoint/README.md
@@ -0,0 +1,15 @@
+# DDEX entrypoint
+
+Found at distro.audius.co.
+
+Simple redirects to relevant DDEX apps.
+
+## Development
+```
+npm run dev
+```
+
+## Deployment
+```
+npm run deploy
+```
diff --git a/packages/ddex/entrypoint/gitignore b/packages/ddex/entrypoint/gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/ddex/entrypoint/index.html b/packages/ddex/entrypoint/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Audius Distro</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/ddex/entrypoint/package.json b/packages/ddex/entrypoint/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "entrypoint",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "start": "npm run preview",
+    "deploy": "npm run build && wrangler pages deploy ./dist"
+  },
+  "dependencies": {
+    "@audius/sdk": "*",
+    "@audius/harmony": "*",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
+    "@typescript-eslint/eslint-plugin": "6.0.0",
+    "@typescript-eslint/parser": "6.0.0",
+    "@vitejs/plugin-react": "4.0.3",
+    "eslint": "8.45.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.3",
+    "typescript": "5.0.2",
+    "vite": "4.4.5",
+    "wrangler": "3.30.1"
+  }
+}
diff --git a/packages/ddex/entrypoint/public/favicon.ico b/packages/ddex/entrypoint/public/favicon.ico
diff --git a/packages/ddex/entrypoint/src/App.css b/packages/ddex/entrypoint/src/App.css
diff --git a/packages/ddex/entrypoint/src/App.tsx b/packages/ddex/entrypoint/src/App.tsx
@@ -0,0 +1,155 @@
+import { useCallback } from 'react'
+import {
+  ThemeProvider as HarmonyThemeProvider,
+  IconArrowRight,
+  IconAudiusLogoHorizontal,
+  IconAudiusLogoHorizontalColor,
+  Paper,
+  Text,
+  TextLink
+} from '@audius/harmony'
+import { Button, Flex } from '@audius/harmony'
+
+const messages = {
+  connect: 'Connect Distributor',
+  access: 'Grant your provider access to publish songs to Audius on your behalf.',
+  choose: 'Please choose your distributor',
+  login: 'Log in with Audius',
+  questions: 'Got questions',
+  learnMore: 'Learn more',
+  privacy: 'Privacy',
+  terms: 'Terms',
+  developers: 'Developers',
+  audius: 'Audius'
+}
+
+const links = {
+  privacy: 'https://audius.co/legal/privacy-policy',
+  terms: 'https://audius.co/legal/terms-of-use',
+  developers: 'https://docs.audius.org',
+  audius: 'https://audius.co'
+}
+
+const Footer = () => {
+  return (
+    <footer>
+      <Flex
+        justifyContent='space-between'
+        alignItems='center'
+        backgroundColor='surface1'
+        ph='2xl'
+        h={'unit8'}
+      >
+        <Flex alignItems='center' gap='2xl'>
+          <Flex alignItems='center' gap='s'>
+            <IconAudiusLogoHorizontal width={'80px'} height={'20px'} color='subdued' />
+            <Text
+              variant='body'
+              size='s'
+              color='subdued'
+            >
+              &copy; {new Date().getFullYear()}
+            </Text>
+          </Flex>
+          <TextLink
+            variant='subdued'
+            textVariant='body'
+            size='s'
+            color='subdued'
+            href={links.privacy}
+          >{messages.privacy}</TextLink>
+          <TextLink
+            variant='subdued'
+            textVariant='body'
+            size='s'
+            color='subdued'
+            href={links.terms}
+          >{messages.terms}</TextLink>
+        </Flex>
+        <Flex alignItems='center' gap='2xl'>
+          <TextLink
+            variant='subdued'
+            textVariant='body'
+            size='s'
+            color='subdued'
+            href={links.developers}
+          >{messages.developers}</TextLink>
+          <TextLink
+            variant='subdued'
+            textVariant='body'
+            size='s'
+            color='subdued'
+            href={links.audius}
+          >{messages.audius}</TextLink>
+        </Flex>
+      </Flex>
+    </footer>
+  )
+}
+
+
+export default function App() {
+  const onClickLogin = useCallback(() => {
+    window.open('http://localhost:5174/login?auto=true', '_self')
+  }, [])
+
+  return (
+    <HarmonyThemeProvider theme='day'>
+      <Flex
+        direction='column'
+        backgroundColor='default'
+        h={'100vh'}
+      >
+        <Flex
+          flex={1}
+          gap='m'
+          justifyContent='center'
+          alignItems='center'
+        >
+          <Paper
+            h='460px'
+            w='416px'
+            direction='column'
+            p='2xl'
+            gap='2xl'
+          >
+            <Flex justifyContent='center'>
+              <IconAudiusLogoHorizontalColor />
+            </Flex>
+            <Text
+              variant='heading'
+              size='l'
+              color='accent'
+              textAlign='center'
+            >
+              {messages.connect}
+            </Text>
+            <Text
+              variant='body'
+              size='m'
+              textAlign='center'
+              color='default'
+            >
+              {messages.access}
+            </Text>
+            <Text
+              variant='body'
+              size='m'
+              color='default'
+            >
+              {`${messages.choose}:`}
+            </Text>
+            <Button
+              variant='primary'
+              onClick={onClickLogin}
+              iconRight={IconArrowRight}
+            >
+              {messages.login}
+            </Button>
+          </Paper>
+        </Flex>
+        <Footer />
+      </Flex>
+    </HarmonyThemeProvider>
+  )
+}
diff --git a/packages/ddex/entrypoint/src/emotion.d.ts b/packages/ddex/entrypoint/src/emotion.d.ts
@@ -0,0 +1,6 @@
+import '@emotion/react'
+import type { HarmonyTheme } from '@audius/harmony'
+
+declare module '@emotion/react' {
+  export interface Theme extends HarmonyTheme {}
+}
diff --git a/packages/ddex/entrypoint/src/main.tsx b/packages/ddex/entrypoint/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import '@audius/harmony/dist/harmony.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/packages/ddex/entrypoint/src/vite-env.d.ts b/packages/ddex/entrypoint/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/ddex/entrypoint/tsconfig.json b/packages/ddex/entrypoint/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "jsxImportSource": "@emotion/react",
+
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/ddex/entrypoint/tsconfig.node.json b/packages/ddex/entrypoint/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/ddex/entrypoint/vite.config.ts b/packages/ddex/entrypoint/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: 'globalThis'
+      },
+      plugins: [
+        NodeGlobalsPolyfillPlugin({
+          buffer: true
+        })
+      ]
+    }
+  }
+})
diff --git a/packages/ddex/webapp/client/package.json b/packages/ddex/webapp/client/package.json
@@ -8,8 +8,8 @@
     "start:dev": "IS_DEV=true env-cmd -f .env.dev turbo run start --filter=@audius/ddex-webapp-client",
     "start:stage": "IS_DEV=true env-cmd -f .env.stage.local turbo run start --filter=@audius/ddex-webapp-client",
     "start:prod": "IS_DEV=true env-cmd -f .env.prod.local turbo run start --filter=@audius/ddex-webapp-client",
-    "stage:preview": "IS_DEV=true env-cmd -f .env.stage.local vite build && vite preview",
-    "prod:preview": "IS_DEV=true env-cmd -f .env.prod.local vite build && vite preview",
+    "preview:stage": "IS_DEV=true env-cmd -f .env.stage.local vite build && vite preview",
+    "preview:prod": "IS_DEV=true env-cmd -f .env.prod.local vite build && vite preview",
     "build": "tsc && vite build",
     "serve": "vite preview",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",