Improve development Environment

v3xlabs · Aug 3, 2023 · 31c2fc2 · 31c2fc2
1 parent bd2827f
commit 31c2fc2
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 48 deletions.
diff --git a/.github/pnpm.dockerfile b/.github/pnpm.dockerfile
@@ -0,0 +1,13 @@
+FROM node:20-alpine
+
+# Install pnpm with corepack
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+# Enable `pnpm add --global` on Alpine Linux by setting
+# home location environment variable to a location already in $PATH
+# https://github.com/pnpm/pnpm/issues/784#issuecomment-1518582235
+ENV PNPM_HOME=/usr/local/bin
+
+WORKDIR /app
+
+CMD ["pnpm", "dev"]
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,9 +1,54 @@
 version: "3.7"
 services:
+  # Edge API
+  api:
+    build:
+      context: .github
+      dockerfile: pnpm.dockerfile
+    command: pnpm dev
+    working_dir: /app/services/api
+    volumes:
+      - ./:/app
+    ports:
+      - 1234:1234
+    depends_on:
+      - db
+      - minio
+    # DB_IP variable to 1
+    environment:
+      - ENVIRONMENT=development
+      - DB_IP=scylla:9042
+      - DB_DATACENTER=datacenter1
+      - INSTANCE_ID=1
+      - REDIS_IP=db
+      - SIGNALFS_HOST=minio
+
+  # Frontend (Developmment Mode)
+
+  app:
+    build:
+      context: .github
+      dockerfile: pnpm.dockerfile
+    command: pnpm dev --host
+    working_dir: /app/web/app
+    volumes:
+      - ./:/app
+    ports:
+      - 5173:5173
+    depends_on:
+      - db
+      - minio
+    # DB_IP variable to 1
+    environment:
+      - ENVIRONMENT=development
+      - VITE_API_URL=http://localhost:1234
+
+  # Redis
   db:
     image: redis:alpine
     ports:
       - "6379:6379"
+  # Object Storage
   minio:
     image: minio/minio
     command: server /data --console-address ":9001"
@@ -13,7 +58,9 @@ services:
     environment:
       - MINIO_ROOT_USER=minio
       - MINIO_ROOT_PASSWORD=wachtwoord
+  # ScyllaDB
   scylla:
     image: scylladb/scylla
+    command:  ["--developer-mode", "1", "--smp", "1"]
     ports:
       - "9042:9042"
diff --git a/services/api/src/index.ts b/services/api/src/index.ts
@@ -6,7 +6,6 @@ import { initDB } from './database/index.js';
 import { ApiRoute } from './routes/index.js';
 import { polyfillBigInt } from './utils/bigintJSON.js';
 import { log } from './utils/logger.js';
-import { obfusicate } from './utils/obfusicate.js';
 
 polyfillBigInt();
 
@@ -15,9 +14,6 @@ const globals = {
     SIGNALFS_HOST: process.env.SIGNALFS_HOST,
     DB_IP: process.env.DB_IP,
     DB_DATACENTER: process.env.DB_DATACENTER,
-    SIGNAL_MASTER: process.env.SIGNAL_MASTER,
-    SENTRY_DSN: process.env.SENTRY_DSN,
-    SENTRY_SAMPLE_RATE: process.env.SENTRY_SAMPLE_RATE,
     INSTANCE_ID: process.env.INSTANCE_ID,
     REDIS_IP: process.env.REDIS_IP,
 };
@@ -29,15 +25,6 @@ log.settings(
     'SIGNALFS_HOST ' + chalk.gray(globals.SIGNALFS_HOST),
     'DB_IP ' + chalk.gray(globals.DB_IP),
     'DB_DATACENTER ' + chalk.gray(globals.DB_DATACENTER),
-    'SIGNAL_MASTER ' +
-    (globals.SIGNAL_MASTER
-        ? chalk.gray(obfusicate(globals.SIGNAL_MASTER))
-        : chalk.red('MISSING')),
-    'SENTRY_DSN ' +
-    (globals.SENTRY_DSN
-        ? chalk.gray(globals.SENTRY_DSN)
-        : chalk.red('MISSING')),
-    'SAMPLE RATE ' + chalk.gray(globals.SENTRY_SAMPLE_RATE),
     'INSTANCE_ID ' + chalk.gray(globals.INSTANCE_ID),
     'REDIS_IP ' + chalk.gray(globals.REDIS_IP)
 );

diff --git a/web/app/src/pages/login/components/LoginButton.tsx b/web/app/src/pages/login/components/LoginButton.tsx
@@ -1,17 +1,10 @@
 /* eslint-disable jsx-a11y/alt-text */
 import { ConnectKitButton } from 'connectkit';
-import { formatAddress } from 'ens-tools';
-import { FiCreditCard } from 'react-icons/fi';
 import { useAuth } from 'src/hooks/useAuth';
-import { useEnsAvatar, useEnsName } from 'wagmi';
 
 export const LoginButton = () => {
     const { user } = useAuth();
 
-    const { data: ensName } = useEnsName({ address: user as any });
-    const { data: ensImage } = useEnsAvatar({ address: ensName as any });
-    const formattedaddress = user ? formatAddress(user) : 'Not Connected';
-
     return (
         <ConnectKitButton.Custom>
             {({
@@ -25,26 +18,10 @@ export const LoginButton = () => {
             }) => {
                 return (
                     <button
-                        className="group flex items-center justify-center"
+                        className="group flex items-center justify-center rounded-lg bg-gray-100 p-2 font-bold transition hover:brightness-95"
                         onClick={show}
                     >
-                        <div className="flex h-12 rounded-lg border-[1px] border-purple-500">
-                            <div className="flex items-center gap-x-2 rounded-l-md bg-purple-500 px-4 text-lg font-bold text-white group-hover:bg-purple-700">
-                                Sign in with Ethereum
-                                <FiCreditCard className="h-6 w-6 text-white" />
-                            </div>
-                            <div className="flex w-52 items-center justify-center gap-x-2 rounded-r-lg text-lg font-bold text-purple-500">
-                                {user
-                                    ? `${ensName || formattedaddress}`
-                                    : 'Not Conected'}
-                                {user && (
-                                    <img
-                                        src={ensImage || ''}
-                                        className="h- w-10 justify-center rounded-full"
-                                    />
-                                )}
-                            </div>
-                        </div>
+                        Connect App
                     </button>
                 );
             }}

diff --git a/web/app/src/pages/login/index.tsx b/web/app/src/pages/login/index.tsx
@@ -2,16 +2,19 @@ import { LoginButton } from './components/LoginButton';
 
 export const LoginPage = () => {
     return (
-        <div className="flex h-screen w-screen items-center justify-center text-black">
-            <div className="flex flex-col justify-center gap-y-2 rounded-lg border-[1px] border-black px-20 py-10">
-                <div className="flex items-center justify-center gap-x-4">
-                    <img
-                        src="https://app.edgeserver.io/assets/favicon.d38ec687.svg"
-                        alt="logo"
-                        className="h-20 w-20"
-                    />
-                    <p className="text-center text-3xl font-bold uppercase">
-                        edgeserver.io
+        <div className="flex h-screen w-screen items-center justify-center bg-neutral-100/10 text-black">
+            <div className="flex w-full max-w-xs flex-col justify-center gap-y-2 rounded-xl border bg-white p-4 shadow-sm">
+                <div className="p-2">Edgeserver</div>
+                <div className="px-3 pb-2 text-sm">
+                    <p>
+                        You're about to sign in using passkeys. If you need help{' '}
+                        <a
+                            href="https://og.ax"
+                            className="text-blue-500 hover:underline"
+                        >
+                            check here
+                        </a>
+                        .
                     </p>
                 </div>
                 <LoginButton />