cryagent/celestia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve

Browse Source
This commit is contained in:
Reihan 2025-03-01 16:46:39 +07:00
parent f717eba7d4
commit 800ad525f8
4 changed files with 25932 additions and 25737 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
src/components/MyScene/Chunk/data.json
View File

@ -25337,6 +25337,184 @@
"Alnasl", "Alnasl",
"Aludra", "Aludra",
"Alphecca", "Alphecca",
"Sadalbari" "Sadalbari",
"Aetheris",
"Andraphis",
"Antareon",
"Aphelionis",
"Aquilares",
"Arctyros",
"Argion",
"Aurion",
"Azimuthos",
"Basilis",
"Betelion",
"Borealis",
"Caelora",
"Caprion",
"Celestara",
"Centrida",
"Cepheion",
"Cirrion",
"Corvannis",
"Cryon",
"Cygnora",
"Delphior",
"Draconis",
"Eldara",
"Electros",
"Equion",
"Erythion",
"Eurynis",
"Exion",
"Farsion",
"Fenrida",
"Galaxion",
"Geminor",
"Glaciaris",
"Halcyonis",
"Helion",
"Horizonis",
"Hyperionis",
"Ignion",
"Ionis",
"Jantharis",
"Kallithor",
"Karnathis",
"Kephorion",
"Kryon",
"Lagrion",
"Laniakis",
"Lunaris",
"Lycoris",
"Machior",
"Magellion",
"Mantissar",
"Metaron",
"Miragis",
"Nebularis",
"Neonaris",
"Neutronis",
"Nexora",
"Novaris",
"Nyxion",
"Oberion",
"Oblivionis",
"Omicronis",
"Oortian",
"Orionis Prime",
"Osirion",
"Parallion",
"Perseion",
"Photonis",
"Plasmion",
"Polarion",
"Promethion",
"Quantoris",
"Quasarion",
"Radionis",
"Rigellion",
"Sagittaron",
"Sanctaris",
"Serapion",
"Shadowis",
"Silicoris",
"Singularis",
"Solaris Major",
"Solstara",
"Spectrion",
"Starion",
"Stellaris",
"Sublion",
"Syzygor",
"Tachionis",
"Terminon",
"Thanatris",
"Thermion",
"Titanaris",
"Tranquilis",
"Umbraxis",
"Vanquor",
"Vanguardis",
"Varion",
"Vega Minor",
"Velorius",
"Viridion",
"Voidara",
"Voltarion",
"Warpion",
"Xenoris",
"Ymiris",
"Zenithar",
"Zephirion",
"Zero Pointis",
"Zetaron",
"Nebularis Prime",
"Galactis",
"Ionis Major",
"Shadowbornis",
"Etherion",
"Luminoris",
"Quarkis",
"Astralis",
"Antimatteris",
"Hyperfluxis",
"Darkmatris",
"Plasmaris",
"Chrysalion",
"Heliosar",
"Pulsaris",
"Ereboris",
"Solarion",
"Oblivionis Major",
"Metapharion",
"Lyrion",
"Empyreoris",
"Novaaris",
"Hypernovis",
"Celestaron",
"Binaryis",
"Resonaris",
"Vortexis",
"Chronion",
"Plutonis",
"Etherealis",
"Photonis Prime",
"Tesserion",
"Syntheos",
"Pyronis",
"Exelion",
"Zepharion",
"Odyssion",
"Krython",
"Nyxaris",
"Vesperon",
"Lazurion",
"Noctivis",
"Celestion",
"Hesperion",
"Saphyros",
"Galathor",
"Callidion",
"Solvion",
"Deltanis",
"Harmonia",
"Velatris",
"Auralis",
"Phoenion",
"Scyphion",
"Nexis",
"Tytanaris",
"Astridion",
"Zephyris",
"Radiantis",
"Zirconis",
"Neptorion",
"Kronion",
"Xanthar",
"Tethyros",
"Argentis",
"Hyperion Major"
] ]
} }

212
src/components/MyScene/Chunk/index.tsx
View File

@ -1,194 +1,208 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import * as THREE from "three" import * as THREE from "three";
import { useFrame, useThree } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import { getChunkCoordinates3D, offset } from "./chunkutils" import { getChunkCoordinates3D, offset } from "./chunkutils";
import useStore from "@/lib/store"; import useStore from "@/lib/store";
import { supabase } from "@/lib/supabaseClient"; import { supabase } from "@/lib/supabaseClient";
import { CSS2DRenderer, CSS2DObject } from "three/examples/jsm/Addons.js"; import { CSS2DRenderer, CSS2DObject } from "three/examples/jsm/Addons.js";
import { UNIT, CHUNK_SIZE, RADIUS } from "@/lib/constants"; import { UNIT, CHUNK_SIZE, RADIUS } from "@/lib/constants";
import starData from "./data.json" import starData from "./data.json";
export default function Chunks() { export default function Chunks() {
const { scene, camera } = useThree();
const { scene, camera } = useThree() const focus = useStore((s) => s.focus);
const [chunk, setChunk] = useState({ chunkX: 0, chunkY: 0, chunkZ: 0 });
const focus = useStore((s)=>s.focus) const update = useStore((s) => s.update);
const [chunk, setChunk] = useState({chunkX: 0,chunkY: 0,chunkZ: 0}) const colors = [0xf9c54b, 0xa891fb, 0xff9933, 0x00ccff, 0xccb0e9];
const update = useStore((s)=>s.update) const [loaded] = useState({ data: new Map() });
const colors = [0xf9c54b, 0xa891fb, 0xff9933, 0x00ccff, 0xccb0e9] const [labelRenderer] = useState(new CSS2DRenderer());
const [loaded] = useState({data:new Map()}) const chunkMap = starData.chunkMap;
const [labelRenderer] = useState(new CSS2DRenderer()) const names = starData.names;
const chunkMap = starData.chunkMap
const names = starData.names
const createStar = (pos: THREE.Vector3, data: any, constellationIndex: number, chunkIndex: number) => { const createStar = (pos: THREE.Vector3, data: any, constellationIndex: number, chunkIndex: number) => {
const _rr = data? Math.cbrt( data.amount * 0.239 ) / 5000 : 0.2 const _rr = data ? Math.cbrt(data.amount * 0.239) / 5000 : 0.2;
const rr = (_rr>2.5)?2.5:(_rr<0.2)?0.2:_rr const rr = _rr > 2.5 ? 2.5 : _rr < 0.2 ? 0.2 : _rr;
const color = colors[Math.floor(Math.random() * 4.5)] const color = colors[Math.floor(Math.random() * 4.5)];
const material = new THREE.MeshLambertMaterial({color:color}) const material = new THREE.MeshLambertMaterial({ color: color });
const geometry = new THREE.SphereGeometry(rr, 16, 16) const geometry = new THREE.SphereGeometry(rr, 16, 16);
const mesh = new THREE.Mesh(geometry, material) const mesh = new THREE.Mesh(geometry, material);
if (data) { if (data) {
data.constellationIndex = constellationIndex data.constellationIndex = constellationIndex;
data.chunkIndex = chunkIndex data.chunkIndex = chunkIndex;
}
mesh.name = data ? data.transaction_signature : undefined
mesh.userData = data ? data : undefined
mesh.position.copy(pos)
return mesh
} }
mesh.name = data ? data.transaction_signature : undefined;
mesh.userData = data ? data : undefined;
mesh.position.copy(pos);
return mesh;
};
const createConstellation = (_size: number, data: any[], constellationIndex: number, chunkIndex: number) => { const createConstellation = (_size: number, data: any[], constellationIndex: number, chunkIndex: number) => {
// constellationIndex=== 1 && console.log(constellationIndex, data) // constellationIndex=== 1 && console.log(constellationIndex, data)
const starGroup = new THREE.Group() const starGroup = new THREE.Group();
const points: any[] = [] const points: any[] = [];
data.map((item) => { data.map((item) => {
if (item) { if (item) {
const pos = new THREE.Vector3(item.x, item.y, item.z) const pos = new THREE.Vector3(item.x, item.y, item.z);
const star = createStar(pos, item, constellationIndex, chunkIndex) const star = createStar(pos, item, constellationIndex, chunkIndex);
starGroup.add(star) starGroup.add(star);
points.push(pos) points.push(pos);
} }
}) });
if (points.length>0) if (points.length > 0) points.push(points[0]);
points.push(points[0])
const material = new THREE.LineBasicMaterial({ const material = new THREE.LineBasicMaterial({
color: 0x888888 color: 0x888888,
}); });
const geometry = new THREE.BufferGeometry().setFromPoints(points); const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material); const line = new THREE.Line(geometry, material);
line.name = "line" line.name = "line";
line.userData = {constellation:constellationIndex} line.userData = { constellation: constellationIndex };
starGroup.add(line) starGroup.add(line);
// starGroup.scale.setScalar(1.5) // starGroup.scale.setScalar(1.5)
const label = document.createElement('div'); const label = document.createElement("div");
label.className = "scene-label" label.className = "scene-label";
label.textContent = names[constellationIndex % names.length]; label.textContent = names[constellationIndex % names.length];
const labelObject = new CSS2DObject(label); const labelObject = new CSS2DObject(label);
labelObject.name = `constellation${constellationIndex}_label` labelObject.name = `constellation${constellationIndex}_label`;
starGroup.add(labelObject); starGroup.add(labelObject);
starGroup.name = `constellation${constellationIndex}` starGroup.name = `constellation${constellationIndex}`;
const mesh = new THREE.Mesh(new THREE.BoxGeometry(UNIT/CHUNK_SIZE, UNIT/CHUNK_SIZE, UNIT/CHUNK_SIZE), new THREE.MeshBasicMaterial({color:0x990000, wireframe:true})) const mesh = new THREE.Mesh(
new THREE.BoxGeometry(UNIT / CHUNK_SIZE, UNIT / CHUNK_SIZE, UNIT / CHUNK_SIZE),
new THREE.MeshBasicMaterial({ color: 0x990000, wireframe: true })
);
// starGroup.add(mesh) // starGroup.add(mesh)
return starGroup return starGroup;
} };
const createChunk = async (chunkX: number, chunkY: number, chunkZ: number, chunkKey: string) => { const createChunk = async (chunkX: number, chunkY: number, chunkZ: number, chunkKey: string) => {
const newChunk = new THREE.Group(); // Each chunk is a Group (or Object3D) const newChunk = new THREE.Group(); // Each chunk is a Group (or Object3D)
newChunk.name = chunkKey newChunk.name = chunkKey;
const chunkIndex = chunkMap[chunkKey as keyof typeof chunkMap] const chunkIndex = chunkMap[chunkKey as keyof typeof chunkMap];
newChunk.userData = {index:chunkIndex} newChunk.userData = { index: chunkIndex };
// Add geometry or objects to the chunk // Add geometry or objects to the chunk
const _size = UNIT/CHUNK_SIZE const _size = UNIT / CHUNK_SIZE;
const low = (chunkIndex-1)*8*5 const low = (chunkIndex - 1) * 8 * 5;
const high = low + 40 + 1 const high = low + 40 + 1;
const { data, error } = await supabase.from('transaction-data-updated').select('*').gt('transaction_id', low).lt('transaction_id', high).order('transaction_id', { ascending: true }); const { data, error } = await supabase
.from("celestia-data")
.select("*")
.gt("transaction_id", low)
.lt("transaction_id", high)
.order("transaction_id", { ascending: true });
if (error) { if (error) {
console.error('Error fetching data:', error); console.error("Error fetching data:", error);
return null return null;
} }
let _index = 0 let _index = 0;
for (let x = 0; x < CHUNK_SIZE; x++) { for (let x = 0; x < CHUNK_SIZE; x++) {
for (let y = 0; y < CHUNK_SIZE; y++) { for (let y = 0; y < CHUNK_SIZE; y++) {
for (let z = 0; z < CHUNK_SIZE; z++) { for (let z = 0; z < CHUNK_SIZE; z++) {
if (data[_index * 5]) { if (data[_index * 5]) {
const constellationIndex = (chunkMap[chunkKey as keyof typeof chunkMap]-1) * 8 + _index const constellationIndex = (chunkMap[chunkKey as keyof typeof chunkMap] - 1) * 8 + _index;
const newArray = [data[_index*5], data[_index*5+1], data[_index*5+2], data[_index*5+3], data[_index*5+4]] const newArray = [
const constellation = createConstellation(_size, newArray, constellationIndex, chunkIndex) data[_index * 5],
const _offset = offset(constellationIndex) data[_index * 5 + 1],
constellation.position.set((x-0.5)*_size + _offset.x, (y-0.5)*_size + _offset.y, (z-0.5)*_size + _offset.z); data[_index * 5 + 2],
data[_index * 5 + 3],
data[_index * 5 + 4],
];
const constellation = createConstellation(_size, newArray, constellationIndex, chunkIndex);
const _offset = offset(constellationIndex);
constellation.position.set(
(x - 0.5) * _size + _offset.x,
(y - 0.5) * _size + _offset.y,
(z - 0.5) * _size + _offset.z
);
newChunk.add(constellation); newChunk.add(constellation);
} }
_index ++ _index++;
} }
} }
} }
newChunk.position.set(chunkX*UNIT, chunkY*UNIT, chunkZ*UNIT) newChunk.position.set(chunkX * UNIT, chunkY * UNIT, chunkZ * UNIT);
const mesh = new THREE.Mesh(new THREE.BoxGeometry(UNIT, UNIT, UNIT), new THREE.MeshBasicMaterial({color:0x227722, transparent:true, opacity:0.5})) const mesh = new THREE.Mesh(
new THREE.BoxGeometry(UNIT, UNIT, UNIT),
new THREE.MeshBasicMaterial({ color: 0x227722, transparent: true, opacity: 0.5 })
);
// newChunk.add(mesh) // newChunk.add(mesh)
return newChunk return newChunk;
} };
const updateChunks = async (chunkX: number, chunkY: number, chunkZ: number) => { const updateChunks = async (chunkX: number, chunkY: number, chunkZ: number) => {
// Load chunks in a grid around the camera // Load chunks in a grid around the camera
const network = scene.getObjectByName("network") const network = scene.getObjectByName("network");
if (network) { if (network) {
for (let x = -RADIUS; x <= RADIUS; x++) { for (let x = -RADIUS; x <= RADIUS; x++) {
for (let y = -RADIUS; y <= RADIUS; y++) { for (let y = -RADIUS; y <= RADIUS; y++) {
for (let z = -RADIUS; z <= RADIUS; z++) { for (let z = -RADIUS; z <= RADIUS; z++) {
const chunkKey = `${chunkX + x},${chunkY + y},${chunkZ + z}`; // Unique key for the chunk const chunkKey = `${chunkX + x},${chunkY + y},${chunkZ + z}`; // Unique key for the chunk
if (loaded.data.has(chunkKey)) if (loaded.data.has(chunkKey)) continue;
continue;
loaded.data.set(chunkKey, true); loaded.data.set(chunkKey, true);
const chunk = await createChunk(chunkX + x, chunkY + y, chunkZ + z, chunkKey); const chunk = await createChunk(chunkX + x, chunkY + y, chunkZ + z, chunkKey);
if(chunk) network.add(chunk) if (chunk) network.add(chunk);
} }
} }
} }
// Unload chunks that are too far away // Unload chunks that are too far away
const removeGroup : any = [] const removeGroup: any = [];
for (const chunkKey of loaded.data.keys()) { for (const chunkKey of loaded.data.keys()) {
const [x, y, z] = chunkKey.split(",").map(Number); const [x, y, z] = chunkKey.split(",").map(Number);
if (Math.abs(x - chunkX) > RADIUS || Math.abs(y - chunkY) > RADIUS || Math.abs(z - chunkZ) > RADIUS) { if (Math.abs(x - chunkX) > RADIUS || Math.abs(y - chunkY) > RADIUS || Math.abs(z - chunkZ) > RADIUS) {
removeGroup.push(chunkKey) removeGroup.push(chunkKey);
loaded.data.delete(chunkKey); // Free memory loaded.data.delete(chunkKey); // Free memory
} }
} }
removeGroup.map((item: string) => { removeGroup.map((item: string) => {
const _obj = scene.getObjectByName(item) const _obj = scene.getObjectByName(item);
if (_obj) { if (_obj) {
_obj?.children.map((item) => { _obj?.children.map((item) => {
const name = item.name const name = item.name;
const child:any =_obj.getObjectByName(`${name}_label`) const child: any = _obj.getObjectByName(`${name}_label`);
if (child && child.element && child.element.parentNode) { if (child && child.element && child.element.parentNode) {
child.element.parentNode.removeChild(child.element); child.element.parentNode.removeChild(child.element);
} }
}) });
network.remove(_obj) network.remove(_obj);
} }
}) });
update.flag = false update.flag = false;
}
} }
};
useEffect(() => { useEffect(() => {
const { chunkX, chunkY, chunkZ } = getChunkCoordinates3D(focus.x, focus.y, focus.z); const { chunkX, chunkY, chunkZ } = getChunkCoordinates3D(focus.x, focus.y, focus.z);
if (chunk.chunkX !== chunkX || chunk.chunkY !== chunkY || chunk.chunkZ !== chunkZ) { if (chunk.chunkX !== chunkX || chunk.chunkY !== chunkY || chunk.chunkZ !== chunkZ) {
// update.flag = true // update.flag = true
setChunk({ chunkX, chunkY, chunkZ }) setChunk({ chunkX, chunkY, chunkZ });
updateChunks(chunkX, chunkY, chunkZ) updateChunks(chunkX, chunkY, chunkZ);
} }
},[focus]) }, [focus]);
useEffect(() => { useEffect(() => {
labelRenderer.setSize(window.innerWidth, window.innerHeight); labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute'; labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = '0px'; labelRenderer.domElement.style.top = "0px";
labelRenderer.domElement.style.color = 'white'; labelRenderer.domElement.style.color = "white";
labelRenderer.domElement.style.fontStyle = 'bold'; labelRenderer.domElement.style.fontStyle = "bold";
labelRenderer.domElement.style.fontSize = '10px'; labelRenderer.domElement.style.fontSize = "10px";
labelRenderer.domElement.style.pointerEvents = 'none' labelRenderer.domElement.style.pointerEvents = "none";
const dom = document.getElementById( 'canvas-wrapper' ) const dom = document.getElementById("canvas-wrapper");
if (dom) { if (dom) {
dom.appendChild(labelRenderer.domElement); dom.appendChild(labelRenderer.domElement);
} }
const { chunkX, chunkY, chunkZ } = getChunkCoordinates3D(focus.x, focus.y, focus.z); const { chunkX, chunkY, chunkZ } = getChunkCoordinates3D(focus.x, focus.y, focus.z);
update.flag = true update.flag = true;
updateChunks(chunkX, chunkY, chunkZ) updateChunks(chunkX, chunkY, chunkZ);
},[]) }, []);
useFrame(() => { useFrame(() => {
labelRenderer.render(scene, camera); labelRenderer.render(scene, camera);
}) });
return ( return <group name="network"></group>;
<group name="network">
</group>
)
} }

176
src/components/html/BottomPanel/index.tsx
View File

@ -1,90 +1,93 @@
import useStore from "@/lib/store";
import React, { useEffect, useRef, useState } from "react";
import Styles from "./styles.module.scss";
import { supabase } from "@/lib/supabaseClient";
import SearchResults from "./SearchResults";
import RecentTXNs from "./RecentTXNs";
import starData from "@/components/MyScene/Chunk/data.json";
import Notifications from "./Notifications";
import useStore from '@/lib/store'; export default function BottomPanel({ flag, changeFlag }: { flag: boolean; changeFlag(value: boolean): void }) {
import React, { useEffect, useRef, useState } from 'react' const [results, setResults] = useState<any[] | undefined>(undefined);
import Styles from "./styles.module.scss"
import { supabase } from '@/lib/supabaseClient';
import SearchResults from './SearchResults';
import RecentTXNs from './RecentTXNs';
import starData from "@/components/MyScene/Chunk/data.json"
import Notifications from './Notifications';
export default function BottomPanel({flag, changeFlag}:{flag:boolean, changeFlag(value:boolean):void}) {
const [results, setResults] = useState<any[] | undefined>(undefined)
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const [Observatory, setObservatory] = useState({stars:0, constellations:0, wallets:0}) const [Observatory, setObservatory] = useState({ stars: 0, constellations: 0, wallets: 0 });
const [recentTXNs, setRecentTXNs] = useState<any[] | undefined>(undefined) const [recentTXNs, setRecentTXNs] = useState<any[] | undefined>(undefined);
const [latestConstellations, setLatestConstellations] = useState<string[]>([]) const [latestConstellations, setLatestConstellations] = useState<string[]>([]);
const names = starData.names const names = starData.names;
const tutorial = useStore((s)=>s.tutorial) const tutorial = useStore((s) => s.tutorial);
const tabs = useStore((s)=>s.tabs) const tabs = useStore((s) => s.tabs);
const fetchTableData = async (tableName: string, filter?: string) => { const fetchTableData = async (tableName: string, filter?: string) => {
try { try {
const { data, error } = await supabase.from(tableName).select('*').or(`transaction_signature.eq.${filter}, from_address.eq.${filter}`); const { data, error } = await supabase
.from(tableName)
.select("*")
.or(`transaction_signature.eq.${filter}, from_address.eq.${filter}`);
// 5Q544fKrFoe6tsEbD7S8EmxGTJYAKtTVhAW5Q5pge4j1 // 5Q544fKrFoe6tsEbD7S8EmxGTJYAKtTVhAW5Q5pge4j1
if (error) { if (error) {
throw new Error(error.message); throw new Error(error.message);
} }
return data; return data;
} catch (error) { } catch (error) {
console.error('Error fetching data:', error); console.error("Error fetching data:", error);
throw error; throw error;
} }
}; };
const handleKeyDown = async (event: any) => { const handleKeyDown = async (event: any) => {
if (event.key === 'Enter') { if (event.key === "Enter") {
if (event.target.value !== "") { if (event.target.value !== "") {
const data = await fetchTableData('transaction-data-updated', event.target.value) const data = await fetchTableData("celestia-data", event.target.value);
setResults(data) setResults(data);
} }
} }
}; };
const changeInput = async (value: string) => { const changeInput = async (value: string) => {
if (value === "") { if (value === "") {
setResults(undefined) setResults(undefined);
useStore.setState({choose:undefined}) useStore.setState({ choose: undefined });
} }
}; };
const fetchDataForObservatory = async () => { const fetchDataForObservatory = async () => {
try { try {
const { data, error } = await supabase.from("transaction-data-updated").select('*').order('transaction_id', { ascending: false }); const { data, error } = await supabase
.from("celestia-data")
.select("*")
.order("transaction_id", { ascending: false });
// 5Q544fKrFoe6tsEbD7S8EmxGTJYAKtTVhAW5Q5pge4j1 // 5Q544fKrFoe6tsEbD7S8EmxGTJYAKtTVhAW5Q5pge4j1
if (error) { if (error) {
console.log(error.message) console.log(error.message);
throw new Error(error.message); throw new Error(error.message);
} }
if (data.length > 0) { if (data.length > 0) {
const stars = data.length const stars = data.length;
const constellations = Math.floor((stars-1)/5)+1 const constellations = Math.floor((stars - 1) / 5) + 1;
const temp : string[] = [] const temp: string[] = [];
setRecentTXNs(data.slice(0, 15)) setRecentTXNs(data.slice(0, 15));
data.map((item) => { data.map((item) => {
if(!temp.includes(item["from_address"])) if (!temp.includes(item["from_address"])) temp.push(item["from_address"]);
temp.push(item["from_address"]) });
}) const wallets = temp.length;
const wallets = temp.length setObservatory({ stars, constellations, wallets });
setObservatory({stars, constellations, wallets}) const tempLatestConstellations: string[] = [];
const tempLatestConstellations : string[] = []
data.slice(0, 15).map((item) => { data.slice(0, 15).map((item) => {
const k = Math.floor((item.transaction_id-1)/5) const k = Math.floor((item.transaction_id - 1) / 5);
if (!tempLatestConstellations.includes(names[k])) { if (!tempLatestConstellations.includes(names[k])) {
tempLatestConstellations.push(names[k]) tempLatestConstellations.push(names[k]);
} }
}) });
setLatestConstellations(tempLatestConstellations) setLatestConstellations(tempLatestConstellations);
} }
} catch (error) { } catch (error) {
console.error('Error fetching data:', error); console.error("Error fetching data:", error);
throw error; throw error;
} }
} };
useEffect(() => { useEffect(() => {
fetchDataForObservatory() fetchDataForObservatory();
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -99,85 +102,86 @@ export default function BottomPanel({flag, changeFlag}:{flag:boolean, changeFlag
document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener("mousedown", handleClickOutside);
}; };
} }
}, [tutorial]);
},[tutorial])
const changeTabs = (value: number) => { const changeTabs = (value: number) => {
useStore.setState({tabs:value}) useStore.setState({ tabs: value });
} };
return ( return (
<React.Fragment> <React.Fragment>
<div ref={ref} className={(tabs === 1 || tabs === 3)?`${Styles.bottomPanel} ${Styles.activePanel}`:Styles.bottomPanel}> <div
<div className='relative w-full h-fit'> ref={ref}
className={
tabs === 1 || tabs === 3 ? `${Styles.bottomPanel} ${Styles.activePanel}` : Styles.bottomPanel
}
>
<div className="relative w-full h-fit">
<div className={Styles.tabs}> <div className={Styles.tabs}>
<div className={tabs===1?`${Styles.tab} ${Styles.active}`:Styles.tab} onClick={()=>changeTabs(1)}> <div
<div className={Styles.text}> className={tabs === 1 ? `${Styles.tab} ${Styles.active}` : Styles.tab}
Search onClick={() => changeTabs(1)}
>
<div className={Styles.text}>Search</div>
</div> </div>
<div
className={tabs === 2 ? `${Styles.tab} ${Styles.active}` : Styles.tab}
onClick={() => changeTabs(2)}
>
<div className={Styles.text}>Stellar Births</div>
</div> </div>
<div className={tabs===2?`${Styles.tab} ${Styles.active}`:Styles.tab} onClick={()=>changeTabs(2)}> <div
<div className={Styles.text}> className={tabs === 3 ? `${Styles.tab} ${Styles.active}` : Styles.tab}
Stellar Births onClick={() => changeTabs(3)}
</div> >
</div> <div className={Styles.text}>Celestial Observatory</div>
<div className={tabs===3?`${Styles.tab} ${Styles.active}`:Styles.tab} onClick={()=>changeTabs(3)}>
<div className={Styles.text}>
Celestial Observatory
</div>
</div> </div>
</div> </div>
<div className='flex justify-end p-4'> <div className="flex justify-end p-4">
{ {tabs === 1 ? (
tabs === 1 ?
<div className={Styles.wrapper}> <div className={Styles.wrapper}>
<div className={Styles.inputContainter}> <div className={Styles.inputContainter}>
<input type='search' placeholder='transaction signature | wallet address' onKeyDown={handleKeyDown} onChange={(e)=>changeInput(e.target.value)}/> <input
type="search"
placeholder="transaction signature | wallet address"
onKeyDown={handleKeyDown}
onChange={(e) => changeInput(e.target.value)}
/>
</div> </div>
</div> </div>
: tabs === 3 ? ) : tabs === 3 ? (
<div className='flex gap-12'> <div className="flex gap-12">
<div className={Styles.wrapper}> <div className={Styles.wrapper}>
<div className={Styles.inputContainter}> <div className={Styles.inputContainter}>
<p> <p>{Observatory.stars} Stars</p>
{Observatory.stars} Stars
</p>
</div> </div>
</div> </div>
<div className={Styles.wrapper}> <div className={Styles.wrapper}>
<div className={Styles.inputContainter}> <div className={Styles.inputContainter}>
<p> <p>{Observatory.constellations} Constellations</p>
{Observatory.constellations} Constellations
</p>
</div> </div>
</div> </div>
<div className={Styles.wrapper}> <div className={Styles.wrapper}>
<div className={Styles.inputContainter}> <div className={Styles.inputContainter}>
<p> <p>{Observatory.wallets} Cosmic Nurturers</p>
{Observatory.wallets} Cosmic Nurturers
</p>
</div> </div>
</div> </div>
</div> </div>
: ) : (
<div className={`${Styles.wrapper} hidden`}> <div className={`${Styles.wrapper} hidden`}>
<div className={Styles.inputContainter}> <div className={Styles.inputContainter}>
<div> <div></div>
</div> </div>
</div> </div>
</div> )}
}
</div> </div>
{ {latestConstellations?.length > 0 && <Notifications data={latestConstellations} />}
latestConstellations?.length>0 && <Notifications data={latestConstellations}/>
}
</div> </div>
<SearchResults results={results} setResults={setResults} /> <SearchResults results={results} setResults={setResults} />
<RecentTXNs tabs={tabs} data={recentTXNs} setTabs={changeTabs} /> <RecentTXNs tabs={tabs} data={recentTXNs} setTabs={changeTabs} />
</div> </div>
</React.Fragment> </React.Fragment>
) );
} }

11
src/pages/index.tsx
View File

@ -20,27 +20,26 @@ const geistMono = localFont({
}); });
export default function Home() { export default function Home() {
useEffect(() => { useEffect(() => {
const fetchRowCount = async () => { const fetchRowCount = async () => {
try { try {
const { count, error } = await supabase const { count, error } = await supabase
.from("transaction-data-updated") .from("celestia-data")
.select('*', { count: 'exact', head: true }); // `head: true` fetches only the count, not the data .select("*", { count: "exact", head: true }); // `head: true` fetches only the count, not the data
if (error) { if (error) {
throw new Error(error.message); throw new Error(error.message);
} }
useStore.setState({count:Number(count)}) useStore.setState({ count: Number(count) });
return; // This is the total number of rows return; // This is the total number of rows
} catch (error) { } catch (error) {
console.error('Error fetching row count:', error); console.error("Error fetching row count:", error);
throw error; throw error;
} }
}; };
// fetchRowCount(); // fetchRowCount();
},[]) }, []);
return ( return (
<React.Fragment> <React.Fragment>