Round #{round.id?.round_id} โ Motherlode: {round.state?.motherlode}
diff --git a/examples/ore-react/package.json b/examples/ore-react/package.json
index 27ba53c..5245f8f 100644
--- a/examples/ore-react/package.json
+++ b/examples/ore-react/package.json
@@ -13,12 +13,17 @@
"hyperstack-stacks": "^0.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
+ "zod": "^3.23.0",
"zustand": "^4.4.1"
},
"devDependencies": {
+ "@tailwindcss/postcss": "^4.1.18",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^4.2.0",
+ "autoprefixer": "^10.4.24",
+ "postcss": "^8.5.6",
+ "tailwindcss": "^4.1.18",
"typescript": "^5.3.0",
"vite": "^5.0.0"
}
diff --git a/examples/ore-react/postcss.config.js b/examples/ore-react/postcss.config.js
new file mode 100644
index 0000000..a7f73a2
--- /dev/null
+++ b/examples/ore-react/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+ plugins: {
+ '@tailwindcss/postcss': {},
+ },
+}
diff --git a/examples/ore-react/src/App.tsx b/examples/ore-react/src/App.tsx
index 9a218d8..e9d4df5 100644
--- a/examples/ore-react/src/App.tsx
+++ b/examples/ore-react/src/App.tsx
@@ -1,10 +1,13 @@
-import { OreDashboard } from './components/OreDashboard';
+import { OreDashboard } from './components';
import { HyperstackProvider } from 'hyperstack-react';
+import { ThemeProvider } from './hooks/useTheme';
export default function App() {
return (
-
-
-
+
+
+
+
+
);
}
diff --git a/examples/ore-react/src/components/BlockGrid.tsx b/examples/ore-react/src/components/BlockGrid.tsx
new file mode 100644
index 0000000..2f1bc21
--- /dev/null
+++ b/examples/ore-react/src/components/BlockGrid.tsx
@@ -0,0 +1,59 @@
+import type { ValidatedOreRound } from '../schemas/ore-round-validated';
+import { MinerIcon, SolanaIcon } from './icons';
+
+interface BlockGridProps {
+ round: ValidatedOreRound | undefined;
+}
+
+export function BlockGrid({ round }: BlockGridProps) {
+ const blocks = round
+ ? round.state.deployed_per_square_ui.map((deployedUi, i) => ({
+ id: i + 1,
+ minerCount: round.state.count_per_square[i],
+ deployedUi,
+ isWinner: round.results?.winning_square === i,
+ }))
+ : Array.from({ length: 25 }, (_, i) => ({
+ id: i + 1,
+ minerCount: 0,
+ deployedUi: 0,
+ isWinner: false,
+ }));
+
+ return (
+
+ {blocks.map((block) => (
+
+
+
{block.id}
+
+ {block.minerCount}
+
+
+
+
+
+ {Number(block.deployedUi).toFixed(4)}
+
+
+ ))}
+
+ );
+}
diff --git a/examples/ore-react/src/components/ConnectionBadge.tsx b/examples/ore-react/src/components/ConnectionBadge.tsx
new file mode 100644
index 0000000..710b734
--- /dev/null
+++ b/examples/ore-react/src/components/ConnectionBadge.tsx
@@ -0,0 +1,16 @@
+interface ConnectionBadgeProps {
+ isConnected: boolean;
+}
+
+export function ConnectionBadge({ isConnected }: ConnectionBadgeProps) {
+ return (
+
+
+
+
+ {isConnected ? 'Connected' : 'Connecting'}
+
+
+ );
+}
diff --git a/examples/ore-react/src/components/OreDashboard.tsx b/examples/ore-react/src/components/OreDashboard.tsx
index cbe3457..d22fe2f 100644
--- a/examples/ore-react/src/components/OreDashboard.tsx
+++ b/examples/ore-react/src/components/OreDashboard.tsx
@@ -1,95 +1,41 @@
-import { useHyperstack, useConnectionState } from 'hyperstack-react';
-import {
- ORE_STREAM_STACK,
- type OreRound,
- type OreTreasury,
- type OreMiner,
-} from 'hyperstack-stacks/ore';
+import { useHyperstack } from 'hyperstack-react';
+import { ORE_STREAM_STACK } from 'hyperstack-stacks/ore';
+import { ValidatedOreRoundSchema } from '../schemas/ore-round-validated';
+import { BlockGrid } from './BlockGrid';
+import { StatsPanel } from './StatsPanel';
+import { ConnectionBadge } from './ConnectionBadge';
+import { ThemeToggle } from './ThemeToggle';
export function OreDashboard() {
- const stack = useHyperstack(ORE_STREAM_STACK);
- const { data: latestRounds } = stack.views.OreRound.latest.use({ take: 5 });
- // const { data: treasury } = stack.views.OreTreasury.list.use({ take: 1 });
- // console.log(treasury);
- // const { data: miner } = stack.views.OreMiner.list.use({ take: 1 });
- const connectionState = useConnectionState();
- console.log(connectionState);
- const isConnected = connectionState === 'connected';
+ const { views, isConnected } = useHyperstack(ORE_STREAM_STACK, { url: "ws://localhost:8878" });
+ const { data: latestRound } = views.OreRound.latest.useOne({ schema: ValidatedOreRoundSchema });
+ const { data: treasuryData } = views.OreTreasury.list.useOne();
return (
-
-