+
+ Stellar Births
+
+
+
+
+
Name
+
Constellation Name
+
Creation Time
+
+
+ {
+ data?.map((item, index )=>- )
+ }
+
+
+
+
+
+ )
+}
+
+const Item = ({data}:any) =>{
+
+ return (
+
+
+
{data.star_name}
+
{getConstellation(data.transaction_id)}
+
{formatDateTime(data.time)}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/html/SearchResults.tsx b/src/components/html/BottomPanel/SearchResults.tsx
similarity index 100%
rename from src/components/html/SearchResults.tsx
rename to src/components/html/BottomPanel/SearchResults.tsx
diff --git a/src/components/html/BottomPanel/index.tsx b/src/components/html/BottomPanel/index.tsx
new file mode 100644
index 0000000..18a1db3
--- /dev/null
+++ b/src/components/html/BottomPanel/index.tsx
@@ -0,0 +1,183 @@
+
+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';
+
+export default function BottomPanel({flag, changeFlag}:{flag:boolean, changeFlag(value:boolean):void}) {
+
+ const [results, setResults] = useState
(undefined)
+ const ref = useRef(null);
+ const [Observatory, setObservatory] = useState({stars:0, constellations:0, wallets:0})
+ const [recentTXNs, setRecentTXNs] = useState(undefined)
+ const [latestConstellations, setLatestConstellations] = useState([])
+ const names = starData.names
+ const tutorial = useStore((s)=>s.tutorial)
+ const tabs = useStore((s)=>s.tabs)
+
+ const fetchTableData = async (tableName: string, filter?: string) => {
+ try {
+ const { data, error } = await supabase.from(tableName).select('*').or(`transaction_signature.eq.${filter}, from_address.eq.${filter}`);
+ // 5Q544fKrFoe6tsEbD7S8EmxGTJYAKtTVhAW5Q5pge4j1
+ if (error) {
+ throw new Error(error.message);
+ }
+ return data;
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ throw error;
+ }
+ };
+
+ const handleKeyDown = async (event: any) => {
+ if (event.key === 'Enter') {
+ if(event.target.value !== ""){
+ const data = await fetchTableData('transaction-data-updated', event.target.value)
+ setResults(data)
+ }
+ }
+ };
+
+ const changeInput = async (value: string) => {
+ if(value === ""){
+ setResults(undefined)
+ useStore.setState({choose:undefined})
+ }
+ };
+
+ const fetchDataForObservatory = async () =>{
+ try {
+ const { data, error } = await supabase.from("transaction-data-updated").select('*').order('transaction_id', { ascending: false });
+ // 5Q544fKrFoe6tsEbD7S8EmxGTJYAKtTVhAW5Q5pge4j1
+ if (error) {
+ console.log(error.message)
+ throw new Error(error.message);
+ }
+ if(data.length>0){
+ const stars = data.length
+ const constellations = Math.floor((stars-1)/5)+1
+ const temp : string[] = []
+ setRecentTXNs(data.slice(0, 15))
+ data.map((item)=>{
+ if(!temp.includes(item["from_address"]))
+ temp.push(item["from_address"])
+ })
+ const wallets = temp.length
+ setObservatory({stars, constellations, wallets})
+ const tempLatestConstellations : string[] = []
+ data.slice(0, 15).map((item)=>{
+ const k = Math.floor((item.transaction_id-1)/5)
+ if(!tempLatestConstellations.includes(names[k])){
+ tempLatestConstellations.push(names[k])
+ }
+ })
+ setLatestConstellations(tempLatestConstellations)
+ }
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ throw error;
+ }
+ }
+
+ useEffect(() => {
+ fetchDataForObservatory()
+ }, []);
+
+ useEffect(()=>{
+ const handleClickOutside = (event: MouseEvent) => {
+ if (ref.current && !ref.current.contains(event.target as Node)) {
+ !tutorial && useStore.setState({tabs:0});
+ }
+ };
+ if(!tutorial){
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }
+
+ },[tutorial])
+
+ const changeTabs = (value:number) =>{
+ useStore.setState({tabs:value})
+ }
+
+ return (
+
+
+
+
+
changeTabs(1)}>
+
+ Search
+
+
+
changeTabs(2)}>
+
+ Stellar Births
+
+
+
changeTabs(3)}>
+
+ Celestial Observatory
+
+
+
+
+
+ {
+ tabs === 1 ?
+
+
+ changeInput(e.target.value)}/>
+
+
+ : tabs === 3 ?
+
+
+
+
+ {Observatory.stars} Stars
+
+
+
+
+
+
+ {Observatory.constellations} Constellations
+
+
+
+
+
+
+ {Observatory.wallets} Cosmic Nurturers
+
+
+
+
+ :
+
+ }
+
+
+ {
+ latestConstellations?.length>0 &&
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-