try to make a globle - v1

XNOHub · Aug 13, 2023 · 370b556 · 370b556
1 parent 1839d2a
commit 370b556
Show file tree

Hide file tree

Showing 23 changed files with 25,355 additions and 63 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,44 @@
+# See https://prettier.io/docs/en/ignore.html for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+.vercel/
+out/
+build
+dist
+
+# misc
+tsconfig.tsbuildinfo
+.DS_Store
+*.pem
+.idea
+.vscode
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# autogenerated files
+pnpm-lock.yaml
+
+#markdown
+*.md
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "trailingComma": "es5"
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "prettier.semi": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -17,38 +17,11 @@ export default async function RootLayout({
 }) {
   return (
     <html lang="en" className="h-full relative">
-      <div
-        className="fixed inset-0"
-        style={{
-          background: `black url('/logo.png') repeat 0 0 / 300px 100px`,
-          top: '-50%',
-          left: '-50%',
-          filter: 'blur(5px)',
-          transform: 'rotate(-35deg)',
-          opacity: '0.1',
-          width: '200%',
-          height: '200%',
-          overflow: 'hidden',
-          zIndex: -1
-        }}
-      ></div>
       <body className="h-full text-white relative bg-black">
-        {/* <Suspense>
+        <Suspense>
           <Nav />
-        </Suspense> */}
-        {/* {children} */}
-        <main className="flex flex-col items-center justify-center h-screen text-2xl text-center z-10">
-          <h1 className="mb-4 text-orange-500 text-4xl">
-            Our XNOHub.com App is Coming Soon!
-          </h1>
-          <p className="text-2xl text-blue-300">
-            &quot;What&apos;s a Bitcoin enthusiast&apos;s favorite drink?
-            Feeeeees!&quot; LOL
-          </p>
-          <p className="text-2xl">
-            We&apos;re working hard Nano fam, Stay tuned!
-          </p>
-        </main>
+        </Suspense>
+        {children}
         <Analytics />
       </body>
     </html>

diff --git a/app/loading.tsx b/app/loading.tsx
@@ -4,12 +4,13 @@ import Search from './search';
 export default async function Loading() {
   return (
     <main className="p-4 md:p-10 mx-auto max-w-7xl">
-      <Title>Users</Title>
-      <Text>
+      <span>Loading..........</span>
+      {/* <Title>Users</Title> */}
+      {/* <Text>
         A list of users retrieved from a MySQL database (PlanetScale).
       </Text>
       <Search disabled />
-      <div className="tremor-base tr-relative tr-w-full tr-mx-auto tr-text-left tr-ring-1 tr-mt-6 tr-max-w-none tr-bg-white tr-shadow tr-border-blue-400 tr-ring-gray-200 tr-pl-6 tr-pr-6 tr-pt-6 tr-pb-6 tr-rounded-lg h-[360px]" />
+      <div className="tremor-base tr-relative tr-w-full tr-mx-auto tr-text-left tr-ring-1 tr-mt-6 tr-max-w-none tr-bg-white tr-shadow tr-border-blue-400 tr-ring-gray-200 tr-pl-6 tr-pr-6 tr-pt-6 tr-pb-6 tr-rounded-lg h-[360px]" /> */}
     </main>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,32 +1,57 @@
 import { Card, Title, Text } from '@tremor/react';
-import { queryBuilder } from '../lib/planetscale';
-import Search from './search';
-import UsersTable from './table';
+import Test from './three-scence';
 
 export const dynamic = 'force-dynamic';
 
-export default async function IndexPage({
-  searchParams
-}: {
-  searchParams: { q: string };
-}) {
-  const search = searchParams.q ?? '';
-  const users = await queryBuilder
-    .selectFrom('users')
-    .select(['id', 'name', 'username', 'email'])
-    .where('name', 'like', `%${search}%`)
-    .execute();
+interface Rep {
+  rep_address: string;
+  est_payment: string | null;
+  donation_address: string | null;
+  weight: number;
+  delegators: number;
+  uptime: string;
+  synced: number;
+  website: string | null;
+  latitude: number;
+  longitude: number;
+  alias: string;
+  uptime_over: {
+    week: number;
+    day: number;
+  };
+  score: number;
+  donation: string | null;
+  lastVoted: string;
+}
+
+async function fetchData(): Promise<Rep[] | null> {
+  const body = {
+    action: 'reps'
+  };
+
+  const response = await fetch('https://rpc.nano.to', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    cache: 'force-cache',
+    body: JSON.stringify(body)
+  });
+
+  const data = await response.json();
+  console.log(data);
+  return data;
+}
+
+export default async function IndexPage({}: {}) {
+  // const data = fetchData();const myGlobe = Globe();
 
   return (
-    <main className="p-4 md:p-10 mx-auto max-w-7xl">
-      <Title>Users</Title>
-      <Text>
-        A list of users retrieved from a MySQL database (PlanetScale).
-      </Text>
-      <Search />
-      <Card className="mt-6">
-        <UsersTable users={users} />
-      </Card>
+    <main className="p-4 md:p-10 mx-auto max-w-7xl h-full">
+      <Title>XNO Globe</Title>
+      <div className="flex justify-center items-center h-full">
+        <Test />
+      </div>
     </main>
   );
 }
diff --git a/app/three-country.tsx b/app/three-country.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { GeoJsonGeometry } from 'three-geojson-geometry';
+
+import geoJson from '../public/ne_110m_admin_0_countries.geojson.json';
+
+const ThreeCountries = () => {
+  return (
+    <group>
+      {geoJson.features.map((data, index) => {
+        const { geometry } = data as any;
+        return (
+          <lineSegments key={index} geometry={new GeoJsonGeometry(geometry, 1)}>
+            <lineBasicMaterial color="#5c5c5c" />
+          </lineSegments>
+        );
+      })}
+    </group>
+  );
+};
+
+export default ThreeCountries;
diff --git a/app/three-graticule.tsx b/app/three-graticule.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { GeoJsonGeometry } from 'three-geojson-geometry';
+import { geoGraticule10 } from 'd3-geo';
+
+const ThreeGraticule = () => {
+  return (
+    <group>
+      <lineSegments geometry={new GeoJsonGeometry(geoGraticule10(), 1)}>
+        <lineBasicMaterial color="#3c3c3c" />
+      </lineSegments>
+    </group>
+  );
+};
+
+export default ThreeGraticule;
diff --git a/app/three-mesh.tsx b/app/three-mesh.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ThreeGraticule from './three-graticule';
+import ThreeCountries from './three-country';
+
+const ThreeMesh = () => {
+  return (
+    <mesh>
+      <sphereGeometry args={[1, 32]} />
+      <meshPhongMaterial color="#191919" transparent={true} opacity={0.8} />
+      <ThreeGraticule />
+      <ThreeCountries />
+    </mesh>
+  );
+};
+
+export default ThreeMesh;
diff --git a/app/three-scence.tsx b/app/three-scence.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import React from 'react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls } from '@react-three/drei';
+import ThreeMesh from './three-mesh';
+
+const ThreeScene = () => {
+  return (
+    <Canvas
+      camera={{
+        fov: 75,
+        position: [0, 0, 2.1]
+      }}
+      style={{
+        cursor: 'move'
+      }}
+    >
+      <OrbitControls enableRotate={true} enableZoom={false} enablePan={false} />
+      <ambientLight intensity={1.3} />
+      <pointLight position={[-10, -10, -10]} intensity={0.4} />
+      <ThreeMesh />
+    </Canvas>
+  );
+};
+
+export default ThreeScene;
diff --git a/package.json b/package.json
@@ -6,19 +6,24 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "ts": "tsc --noEmit"
+    "ts": "tsc --noEmit",
+    "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json)\""
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
     "@planetscale/database": "^1.7.0",
+    "@react-three/drei": "^9.80.2",
+    "@react-three/fiber": "^8.13.6",
     "@tremor/react": "^3.2.6",
     "@types/js-cookie": "^3.0.3",
     "@types/node": "20.3.0",
     "@types/react": "18.2.11",
     "@types/react-dom": "18.2.4",
+    "@types/three": "^0.155.0",
     "@vercel/analytics": "^1.0.1",
     "autoprefixer": "^10.4.14",
+    "d3-geo": "^3.1.0",
     "eslint": "8.42.0",
     "eslint-config-next": "13.4.5",
     "js-cookie": "^3.0.5",
@@ -33,6 +38,7 @@
     "react-dom": "18.2.0",
     "server-only": "^0.0.1",
     "tailwindcss": "^3.3.2",
+    "three-geojson-geometry": "^1.3.1",
     "typescript": "5.1.3"
   },
   "prettier": {

diff --git a/pages/api/auth/[...nextauth].ts b/pages/api/auth/[...nextauth].ts
@@ -5,9 +5,9 @@ export const authOptions: NextAuthOptions = {
   providers: [
     GithubProvider({
       clientId: process.env.GITHUB_ID as string,
-      clientSecret: process.env.GITHUB_SECRET as string,
-    }),
-  ],
+      clientSecret: process.env.GITHUB_SECRET as string
+    })
+  ]
 };
 
 export default NextAuth(authOptions);