feat: initialize frontend w/ bitmex ui lib

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# VSCode
+.vscode

frontend/README.md

@@ -0,0 +1,19 @@
+# frontend
+
+## Run locally
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run
+pnpm run dev
+```
+
+1. Leaderboard of top users, sorted by price of token
+2. Buy/sell option
+3. Token price chart
+4. Recent transactions overall
+5. Recent transactions for token
+6. Recent transactions by user
+7. Most profitable users

frontend/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "global.css",
+    "baseColor": "zinc",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "components",
+    "utils": "utils"
+  }
+}

frontend/components/Card.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+
+export default function Card({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactElement | ReactElement[];
+}) {
+  return (
+    <div className="flex flex-col bg-white border-[1px] border-bitmex-strong-border h-full">
+      <div className="bg-bitmex-strong px-2 py-0.5">
+        <span className="text-sm font-bold">{title}</span>
+      </div>
+      <div className="px-2 py-0.5 bg-bitmex-widget flex-1">{children}</div>
+    </div>
+  );
+}

frontend/components/Header.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import Image from "next/image";
+
+export default function Header() {
+  return (
+    <div>
+      {/* Sub header */}
+      <div className="flex items-center justify-center py-0.5">
+        <span className="text-xs">
+          An{" "}
+          <a
+            href="https://github.com/anish-agnihotri/friend.expert"
+            target="_blank"
+            rel="noopen noreferrer"
+            className="hover:opacity-70 transition-opacity underline"
+          >
+            open-source
+          </a>{" "}
+          project by{" "}
+          <a
+            href="https://anishagnihotri.com"
+            target="_blank"
+            rel="noopen noreferrer"
+            className="hover:opacity-70 transition-opacity underline"
+          >
+            Anish Agnihotri
+          </a>
+          .
+        </span>
+      </div>
+
+      {/* Main header */}
+      <div className="flex h-14 px-4 items-center bg-black">
+        <div>
+          <Link href="/" className="hover:opacity-70 transition-opacity">
+            <Image
+              src="/vectors/logo.svg"
+              height={30}
+              width={165}
+              alt="FriendMEX logo"
+            />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/Layout.tsx

@@ -0,0 +1,17 @@
+import Header from "components/Header";
+import type { ReactElement } from "react";
+
+export default function Layout({
+  children,
+}: {
+  children: ReactElement | ReactElement[];
+}) {
+  return (
+    <div>
+      {/* Header */}
+      <Header />
+
+      <div>{children}</div>
+    </div>
+  );
+}

frontend/components/trading/Leaderboard.tsx

@@ -0,0 +1,11 @@
+import Card from "components/Card";
+
+export default function Leaderboard() {
+  return (
+    <Card title="Friend Leaderboard">
+      <div>
+        <span>Test</span>
+      </div>
+    </Card>
+  );
+}

frontend/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig

frontend/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "next": "13.4.13",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-grid-layout": "^1.3.4",
+    "react-resizable": "^3.0.5",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.6"
+  },
+  "devDependencies": {
+    "@types/node": "20.4.10",
+    "@types/react": "18.2.20",
+    "@types/react-dom": "18.2.7",
+    "@types/react-grid-layout": "^1.3.2",
+    "autoprefixer": "^10.4.14",
+    "eslint": "8.47.0",
+    "eslint-config-next": "13.4.13",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
+    "typescript": "5.1.6"
+  }
+}

frontend/pages/_app.tsx

@@ -0,0 +1,10 @@
+import type { AppProps } from "next/app";
+
+// CSS imports
+import "globals.css";
+import "react-resizable/css/styles.css";
+import "react-grid-layout/css/styles.css";
+
+export default function FriendMEX({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}

frontend/pages/index.tsx

@@ -0,0 +1,17 @@
+import Layout from "components/Layout";
+import GridLayout from "react-grid-layout";
+import Leaderboard from "components/trading/Leaderboard";
+
+export default function Home() {
+  const layout = [{ i: "leaderboard", x: 0, y: 0, w: 12, h: 3 }];
+
+  return (
+    <Layout>
+      <GridLayout layout={layout} cols={36} width={1800}>
+        <div key="leaderboard">
+          <Leaderboard />
+        </div>
+      </GridLayout>
+    </Layout>
+  );
+}