+
+ + Learn Hathor Network +
+
+ Interactive Jupyter notebooks to master blockchain development with
+ Python-powered smart contracts.
+
+
+ No setup required — just launch and start coding.
+
+
+ {categories.length > 0 ? (
+ categories.map((category, index) => (
+
+
+
+ )}
+ No notebooks available yet. Check back soon!
+
+ {isBuilding && (
+
+ )}
+ {isReady &&
+
+ {/* Progress bar */}
+
+
+ )}
+
+ {/* Logs toggle */}
+
+
+
+
+
+ {showLogs && (
+
+
+
+ )}
+
+ {buildState.logs.length > 0
+ ? buildState.logs.join('\n')
+ : 'Waiting for logs...'}
+
+
+ {/* Header */}
+
+
+ {/* Content */}
+ {isExpanded && (
+
+ );
+}
diff --git a/learn-hathor-website/src/components/InfoSection.tsx b/learn-hathor-website/src/components/InfoSection.tsx
new file mode 100644
index 0000000..a46be4d
--- /dev/null
+++ b/learn-hathor-website/src/components/InfoSection.tsx
@@ -0,0 +1,65 @@
+import { AlertCircle, Clock, Users, Timer } from 'lucide-react';
+import { Card, CardContent } from './ui';
+
+interface LimitItemProps {
+ icon: React.ReactNode;
+ title: string;
+ description: string;
+}
+
+function LimitItem({ icon, title, description }: LimitItemProps) {
+ return (
+
+
+ )}
+
+ {category.notebooks.map((notebook) => (
+ onLaunchNotebook(notebook.id)}
+ />
+ ))}
+
+
+
+ );
+}
+
+export function InfoSection() {
+ return (
+
+ {icon}
+
+
+
+ {title}
++ {description} +
+
+
+
+
+
+
+
+
+
+ + Usage Guidelines & Limits +
+
+
+
+
+
+
+ + {notebook.name} +
+ + {notebook.difficulty} + ++ {notebook.description} +
+ +
+ {notebook.duration && (
+
+
+
+
+ {/* Logo */}
+
+ 
+ Learning Hub
+
+
+ {/* Navigation */}
+
+
+
+ Learning Hub
+
+
+ {/* Navigation */}
+
+
+ {children}
+
+
+ );
+}
diff --git a/learn-hathor-website/src/components/layout/index.ts b/learn-hathor-website/src/components/layout/index.ts
new file mode 100644
index 0000000..329f570
--- /dev/null
+++ b/learn-hathor-website/src/components/layout/index.ts
@@ -0,0 +1,3 @@
+export { Header } from './Header';
+export { Footer } from './Footer';
+export { Layout } from './Layout';
diff --git a/learn-hathor-website/src/components/ui/Button.test.tsx b/learn-hathor-website/src/components/ui/Button.test.tsx
new file mode 100644
index 0000000..54e4314
--- /dev/null
+++ b/learn-hathor-website/src/components/ui/Button.test.tsx
@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import { Button } from '@/components/ui/Button';
+
+describe('Button', () => {
+ it('renders children correctly', () => {
+ render();
+ expect(
+ screen.getByRole('button', { name: /click me/i })
+ ).toBeInTheDocument();
+ });
+
+ it('applies primary variant styles by default', () => {
+ render();
+ const button = screen.getByRole('button');
+ expect(button).toHaveClass('from-primary-500');
+ });
+
+ it('applies secondary variant styles when specified', () => {
+ render();
+ const button = screen.getByRole('button');
+ expect(button).toHaveClass('bg-bg-tertiary');
+ });
+
+ it('shows loading spinner when isLoading is true', () => {
+ render();
+ const button = screen.getByRole('button');
+ expect(button).toBeDisabled();
+ expect(button.querySelector('svg')).toBeInTheDocument();
+ });
+
+ it('disables button when disabled prop is true', () => {
+ render();
+ expect(screen.getByRole('button')).toBeDisabled();
+ });
+
+ it('calls onClick when clicked', async () => {
+ const handleClick = vi.fn();
+ const { user } = render();
+
+ await user.click(screen.getByRole('button'));
+ expect(handleClick).toHaveBeenCalledTimes(1);
+ });
+
+ it('does not call onClick when disabled', async () => {
+ const handleClick = vi.fn();
+ const { user } = render(
+
+ );
+
+ await user.click(screen.getByRole('button'));
+ expect(handleClick).not.toHaveBeenCalled();
+ });
+});
diff --git a/learn-hathor-website/src/components/ui/Button.tsx b/learn-hathor-website/src/components/ui/Button.tsx
new file mode 100644
index 0000000..f2d7046
--- /dev/null
+++ b/learn-hathor-website/src/components/ui/Button.tsx
@@ -0,0 +1,98 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface ButtonProps extends ButtonHTMLAttributes
+ {children}
+
+ );
+ }
+);
+
+Card.displayName = 'Card';
+
+interface CardHeaderProps extends HTMLAttributes
+ {children}
+
+ );
+ }
+);
+
+CardHeader.displayName = 'CardHeader';
+
+interface CardContentProps extends HTMLAttributes
+ {children}
+
+ );
+ }
+);
+
+CardContent.displayName = 'CardContent';
+
+interface CardFooterProps extends HTMLAttributes
+ {children}
+
+ );
+ }
+);
+
+CardFooter.displayName = 'CardFooter';
diff --git a/learn-hathor-website/src/components/ui/Modal.tsx b/learn-hathor-website/src/components/ui/Modal.tsx
new file mode 100644
index 0000000..5827fd2
--- /dev/null
+++ b/learn-hathor-website/src/components/ui/Modal.tsx
@@ -0,0 +1,123 @@
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ title?: string;
+ subtitle?: string;
+ children: ReactNode;
+ footer?: ReactNode;
+}
+
+export function Modal({
+ isOpen,
+ onClose,
+ title,
+ subtitle,
+ children,
+ footer,
+}: ModalProps) {
+ const modalRef = useRef
+ {/* Backdrop */}
+
+
+ {/* Modal content */}
+
+ );
+}
diff --git a/learn-hathor-website/src/components/ui/ProgressBar.tsx b/learn-hathor-website/src/components/ui/ProgressBar.tsx
new file mode 100644
index 0000000..72713e9
--- /dev/null
+++ b/learn-hathor-website/src/components/ui/ProgressBar.tsx
@@ -0,0 +1,17 @@
+interface ProgressBarProps {
+ progress: number;
+ className?: string;
+}
+
+export function ProgressBar({ progress, className = '' }: ProgressBarProps) {
+ return (
+
+ {/* Close button */}
+
+
+ {/* Header */}
+ {(title || subtitle) && (
+
+
+ {title && (
+
+ )}
+
+ {/* Body */}
+ + {title} +
+ )} + {subtitle && ( +{subtitle}
+ )} +{children}
+
+ {/* Footer */}
+ {footer && (
+
+ {footer}
+
+ )}
+
+
+
+ );
+}
diff --git a/learn-hathor-website/src/components/ui/index.ts b/learn-hathor-website/src/components/ui/index.ts
new file mode 100644
index 0000000..dc59c58
--- /dev/null
+++ b/learn-hathor-website/src/components/ui/index.ts
@@ -0,0 +1,4 @@
+export { Button } from './Button';
+export { Card, CardHeader, CardContent, CardFooter } from './Card';
+export { Modal } from './Modal';
+export { ProgressBar } from './ProgressBar';
diff --git a/learn-hathor-website/src/config/index.ts b/learn-hathor-website/src/config/index.ts
new file mode 100644
index 0000000..74a575b
--- /dev/null
+++ b/learn-hathor-website/src/config/index.ts
@@ -0,0 +1,7 @@
+export {
+ BINDERHUB_URL,
+ categories,
+ getAllNotebooks,
+ getNotebookById,
+ getCategoriesWithNotebooks,
+} from './notebooks';
diff --git a/learn-hathor-website/src/config/notebooks.ts b/learn-hathor-website/src/config/notebooks.ts
new file mode 100644
index 0000000..6f97fc5
--- /dev/null
+++ b/learn-hathor-website/src/config/notebooks.ts
@@ -0,0 +1,62 @@
+import type { Category } from '@/types';
+import { createLatestReleaseGetter } from '@/lib/github';
+
+/**
+ * BinderHub instance URL
+ * Configured via VITE_BINDERHUB_URL environment variable
+ * Falls back to default if not set
+ */
+export const BINDERHUB_URL = import.meta.env.VITE_BINDERHUB_URL;
+
+/**
+ * All notebook categories with their notebooks
+ *
+ * Branch configuration examples:
+ * - Dynamic (latest release): branch: createLatestReleaseGetter('owner/repo')
+ * - Static branch: branch: 'main'
+ * - Custom function: branch: () => 'feature/test'
+ * - Async function: branch: async () => 'v1.0.0'
+ */
+export const categories: Category[] = [
+ {
+ id: 'nano-contracts',
+ name: 'Nano Contracts',
+ description: 'Learn to build Python-powered smart contracts on Hathor',
+ icon: 'code',
+ notebooks: [
+ {
+ id: 'hathordice-tutorial',
+ name: 'Creating a Hathor Blueprint: HathorDice Tutorial',
+ description:
+ 'Learn how to create a nanocontract blueprint on Hathor. Walk through building a simple HathorDice contract, understanding blueprints, decorators, syscalls, and testing.',
+ repo: 'HathorNetwork/learn-nano-binder',
+ branch: createLatestReleaseGetter('HathorNetwork/learn-nano-binder'),
+ filepath: 'notebooks/01-blueprint-basics/Blueprint.ipynb',
+ difficulty: 'beginner',
+ duration: '20 min',
+ },
+ // Add more Nano Contracts notebooks here
+ ],
+ },
+];
+
+/**
+ * Get all notebooks from all categories
+ */
+export function getAllNotebooks() {
+ return categories.flatMap((category) => category.notebooks);
+}
+
+/**
+ * Get a notebook by its ID
+ */
+export function getNotebookById(id: string) {
+ return getAllNotebooks().find((notebook) => notebook.id === id);
+}
+
+/**
+ * Get categories that have at least one notebook
+ */
+export function getCategoriesWithNotebooks() {
+ return categories.filter((category) => category.notebooks.length > 0);
+}
diff --git a/learn-hathor-website/src/hooks/index.ts b/learn-hathor-website/src/hooks/index.ts
new file mode 100644
index 0000000..bf89095
--- /dev/null
+++ b/learn-hathor-website/src/hooks/index.ts
@@ -0,0 +1 @@
+export { useBinderBuild } from './useBinderBuild';
diff --git a/learn-hathor-website/src/hooks/useBinderBuild.ts b/learn-hathor-website/src/hooks/useBinderBuild.ts
new file mode 100644
index 0000000..7e80a18
--- /dev/null
+++ b/learn-hathor-website/src/hooks/useBinderBuild.ts
@@ -0,0 +1,136 @@
+import { useCallback, useRef, useState } from 'react';
+import type { BuildState, Notebook } from '@/types';
+import {
+ formatPhase,
+ getNotebookUrl,
+ getPhaseProgress,
+ resolveBranch,
+ streamBuild,
+} from '@/lib/binderhub';
+
+const initialState: BuildState = {
+ status: 'idle',
+ phase: null,
+ message: '',
+ logs: [],
+ progress: 0,
+ notebookUrl: null,
+ error: null,
+ repo: null,
+ branch: null,
+};
+
+/**
+ * Hook for managing BinderHub build state
+ */
+export function useBinderBuild() {
+ const [state, setState] = useState
+
+ 
+ Learning Hub
+
+
+
+
+ Learning Hub
+
+
+
+
+ Learn Hathor Network
+
+ Interactive Jupyter notebooks to master blockchain development with Python-powered smart contracts.
+
No setup required — just launch and start coding.
+
+
+
+
+
+
+
+
+