ARC-0031: Reference Implementation

algorandfoundation · deanstef · Apr 5, 2022 · Apr 5, 2022 · Apr 5, 2022 · Apr 7, 2022
commit 0da7597c2da2d2558c5c229e11830ba06b6080c5
diff --git a/assets/arc-0031/.dockerignore b/assets/arc-0031/.dockerignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+.env
+.env.*
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/assets/arc-0031/.gitignore b/assets/arc-0031/.gitignore
@@ -0,0 +1,35 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+.env
+.env.*
+
+# Nuxt dev/build outputs
+.output
+.nuxt
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json.example
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/assets/arc-0031/.prettierrc b/assets/arc-0031/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "htmlWhitespaceSensitivity": "strict"
+}
diff --git a/assets/arc-0031/.vscode/settings.json.example b/assets/arc-0031/.vscode/settings.json.example
@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.workingDirectories": ["client", "server"],
+  "prettier.requireConfig": true
+}
diff --git a/assets/arc-0031/README.md b/assets/arc-0031/README.md
@@ -0,0 +1,45 @@
+# arc-0031
+
+## Users registration
+
+Add registered users to the `server/mock/users.json` array, user `nonce` must be set to `''`.
+
+## Run via Docker Compose
+
+From `client` folder run
+
+```
+docker build -t arc-0031-client .
+```
+
+From `server` folder run
+
+```
+docker build -t arc-0031-server .
+```
+
+From `arc-0031` folder run
+
+```
+docker-compose up
+```
+
+Visit `localhost:3000`
+
+## Run local development environment
+
+From `client` folder run
+
+```
+yarn install --frozen-lockfile
+yarn dev
+```
+
+From `server` folder run
+
+```
+yarn install --frozen-lockfile
+yarn dev
+```
+
+Visit `localhost:3000`
diff --git a/assets/arc-0031/client/.eslintrc b/assets/arc-0031/client/.eslintrc
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["@nuxtjs/eslint-config-typescript", "plugin:prettier/recommended"]
+}
diff --git a/assets/arc-0031/client/Dockerfile b/assets/arc-0031/client/Dockerfile
@@ -0,0 +1,14 @@
+FROM node:16-bullseye
+
+WORKDIR /client
+COPY package.json /client/package.json
+COPY . .
+RUN yarn install \
+  --prefer-offline \
+  --frozen-lockfile \
+  --non-interactive
+RUN NODE_ENV=production yarn build
+
+EXPOSE 3000
+
+ENTRYPOINT ["node", ".output/server/index.mjs"]
diff --git a/assets/arc-0031/client/README.md b/assets/arc-0031/client/README.md
@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/assets/arc-0031/client/app.vue b/assets/arc-0031/client/app.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { useDark } from '@vueuse/core'
+import { darkTheme, type GlobalTheme, NConfigProvider, NGlobalStyle, NLayout, NMessageProvider } from 'naive-ui'
+import { ref, onMounted } from 'vue'
+
+useHead({
+  title: 'Index',
+  titleTemplate: '%s - arc-0031',
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    {
+      hid: 'description',
+      name: 'description',
+      content: 'Nuxt'
+    }
+  ],
+  link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
+})
+
+const theme = ref<GlobalTheme | null>(null)
+onMounted(() => {
+  const isDark = useDark()
+  if (isDark.value) {
+    theme.value = darkTheme
+  }
+})
+</script>
+
+<template>
+  <Html>
+    <Body>
+      <NConfigProvider :theme="theme">
+        <NMessageProvider>
+          <NLayout>
+            <NuxtLoadingIndicator :height="5" :duration="3000" />
+            <NuxtPage style="width: 100vw; height: 100vh" />
+          </NLayout>
+        </NMessageProvider>
+        <NGlobalStyle />
+      </NConfigProvider>
+    </Body>
+  </Html>
+</template>
diff --git a/assets/arc-0031/client/middleware/guard.global.ts b/assets/arc-0031/client/middleware/guard.global.ts
@@ -0,0 +1,15 @@
+import { useAuthStore } from '~~/store/auth'
+
+export default defineNuxtRouteMiddleware(to => {
+  if (process.server) {
+    const authStore = useAuthStore()
+    const { loadSession } = authStore
+    loadSession()
+    if (!authStore.session && to.path !== '/signin') {
+      return '/signin'
+    }
+    if (authStore.session && to.path === '/signin') {
+      return '/'
+    }
+  }
+})
diff --git a/assets/arc-0031/client/nuxt.config.ts b/assets/arc-0031/client/nuxt.config.ts
@@ -0,0 +1,44 @@
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
+import inject from '@rollup/plugin-inject'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    [
+      '@pinia/nuxt',
+      {
+        autoImports: ['defineStore', ['defineStore', 'definePiniaStore']]
+      }
+    ]
+  ],
+  build: {
+    transpile:
+      process.env.NODE_ENV === 'production'
+        ? ['naive-ui', 'vueuc', '@css-render/vue3-ssr', '@juggle/resize-observer']
+        : ['@juggle/resize-observer']
+  },
+  vite: {
+    build: {
+      rollupOptions: {
+        plugins: [inject({ Buffer: ['buffer', 'Buffer'] })]
+      }
+    },
+    // in dev mode, vite use `esbuild`, so we should add `node polyfill`
+    optimizeDeps: {
+      include: process.env.NODE_ENV === 'development' ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone'] : [],
+      esbuildOptions: {
+        define: {
+          global: 'globalThis'
+        },
+        plugins: [
+          NodeGlobalsPolyfillPlugin({
+            process: true,
+            buffer: true
+          }),
+          NodeModulesPolyfillPlugin()
+        ]
+      }
+    }
+  }
+})