tax rate, version and compose (#70)

resolves #67

Co-authored-by: johba <johba@harb.eth>
Reviewed-on: https://codeberg.org/johba/harb/pulls/70

web-app/src/composables/useVersionCheck.ts

@@ -0,0 +1,84 @@
+import { ref, onMounted } from 'vue';
+import { KRAIKEN_LIB_VERSION } from 'kraiken-lib/version';
+
+export interface VersionStatus {
+  isValid: boolean;
+  error?: string;
+  contractVersion?: number;
+  indexerVersion?: number;
+  libVersion: number;
+}
+
+const versionStatus = ref<VersionStatus>({
+  isValid: true,
+  libVersion: KRAIKEN_LIB_VERSION,
+});
+
+const isChecking = ref(false);
+const hasChecked = ref(false);
+
+/**
+ * Validates version compatibility between contract, indexer (Ponder), and frontend (kraiken-lib).
+ * 
+ * Queries Ponder GraphQL for the contract version it indexed, then compares:
+ * 1. Frontend lib version vs Ponder's lib version (should match exactly)
+ * 2. Contract version vs compatible versions list (should be in COMPATIBLE_CONTRACT_VERSIONS)
+ */
+export function useVersionCheck() {
+  async function checkVersions(_graphqlUrl: string) {
+    if (isChecking.value || hasChecked.value) return versionStatus.value;
+
+    isChecking.value = true;
+
+    try {
+      // For now, we don't have contract version in Ponder stats yet
+      // This is a placeholder for when we add it to the schema
+      // Just validate that kraiken-lib is loaded correctly
+
+      versionStatus.value = {
+        isValid: true,
+        libVersion: KRAIKEN_LIB_VERSION,
+      };
+
+      // TODO: Implement actual version check against Ponder GraphQL
+      // console.log(`✓ Frontend version check passed: v${KRAIKEN_LIB_VERSION}`);
+      hasChecked.value = true;
+    } catch (error) {
+      // TODO: Add proper error logging
+      // console.error('Version check failed:', error);
+      versionStatus.value = {
+        isValid: false,
+        error: error instanceof Error ? error.message : 'Failed to check version compatibility',
+        libVersion: KRAIKEN_LIB_VERSION,
+      };
+    } finally {
+      isChecking.value = false;
+    }
+
+    return versionStatus.value;
+  }
+
+  return {
+    versionStatus,
+    checkVersions,
+    isChecking,
+    hasChecked,
+  };
+}
+
+/**
+ * Vue composable that automatically checks versions on mount.
+ * Shows a warning banner if versions are incompatible.
+ */
+export function useVersionCheckOnMount(graphqlUrl: string) {
+  const { versionStatus, checkVersions, isChecking } = useVersionCheck();
+
+  onMounted(async () => {
+    await checkVersions(graphqlUrl);
+  });
+
+  return {
+    versionStatus,
+    isChecking,
+  };
+}