updating flow

Author: Steake

documentation/vision-delivery-blueprint.md

@@ -63,12 +63,14 @@ function mockScore(address: string): ScoreResponse {
 }
 
 function mockClaimArtifact(address: string, campaign: string): ClaimArtifact {
+  // Ensure artifact score matches the mock score used by getScore(address)
+  const { score1e6 } = mockScore(address);
   return {
     circuitId: "mock-circuit",
     modelDigest: "0x" + "a".repeat(64),
     inputDigest: "0x" + "b".repeat(64),
     addr: address,
-    score: 750000,
+    score: score1e6,
     deadline: Math.floor(Date.now() / 1000) + 3600, // 1 hour from now
     campaign: campaign,
     sig: {
@@ -79,9 +81,11 @@ function mockClaimArtifact(address: string, campaign: string): ClaimArtifact {
   };
 }
 
-function mockProofMeta(_address: string): ProofMeta {
+function mockProofMeta(address: string): ProofMeta {
+  // Ensure proof meta score matches the mock score used by getScore(address)
+  const { score1e6 } = mockScore(address);
   return {
-    score1e6: 750000,
+    score1e6,
     calldata: "0x" + "f".repeat(128),
   };
 }

src/lib/api/client.ts

@@ -45,7 +45,10 @@ export function getPublicClient(chainOverride?: number) {
   const chainId = chainOverride ?? getCurrentChainId();
   const chain = getViemChain(chainId);
   const info = getChainInfo(chainId);
-  const transports = info.rpcUrls.map((url) => http(url, { timeout: 30000 }));
+  // Add lightweight retries and a reasonable timeout per RPC to mitigate transient provider slowness.
+  const transports = info.rpcUrls.map((url) =>
+    http(url, { timeout: 20000, retryCount: 2, retryDelay: 500 })
+  );
   const transport =
     transports.length === 1
       ? transports[0]

src/lib/chain/client.ts

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import { wallet } from "$lib/stores/wallet";
-  import { score } from "$lib/stores/score";
+  import { score, scoreActions } from "$lib/stores/score";
   import { airdrop } from "$lib/stores/airdrop";
   import { toasts } from "$lib/stores/ui";
   import { getClaimArtifact, getProofMeta } from "$lib/api/client";
@@ -21,6 +21,8 @@
   let errorMessage = "";
   let txHash: string | null = null;
   let quote: PayoutQuote | null = null;
+  let lastQuoteKey: string | null = null;
+  let pendingQuoteKey: string | null = null;
 
   const config = $page.data.config;
   // Prefer ZK path if available
@@ -29,22 +31,45 @@
     useZkPath ? config.AIRDROP_ZK_ADDR : config.AIRDROP_ECDSA_ADDR
   ) as Hex;
   const claimAbi = useZkPath ? reputationAirdropZKScaled : reputationAirdropScaled;
+  const SCORE_TOLERANCE = 5; // equals 0.000005 when scaled by 1e6
 
-  async function fetchQuote() {
-    if (typeof $score.value !== "number" || !$airdrop.decimals) return;
+  async function fetchQuote(scoreValue: number, decimals: number) {
+    if (!Number.isFinite(scoreValue) || scoreValue <= 0) return;
+    const minPayout = $airdrop.minPayout;
+    const maxPayout = $airdrop.maxPayout;
+    if (minPayout === undefined || maxPayout === undefined) return;
+
+    const key = `${scoreValue}:${decimals}:${claimContractAddress}`;
+    if (key === lastQuoteKey || key === pendingQuoteKey) return;
+
+    pendingQuoteKey = key;
     try {
+      quote = null;
       const payout = await readContract<bigint>(claimContractAddress, claimAbi, "quotePayout", [
-        BigInt($score.value),
+        BigInt(scoreValue),
       ]);
       quote = {
         payout,
-        min: $airdrop.minPayout!,
-        max: $airdrop.maxPayout!,
-        decimals: $airdrop.decimals!,
+        min: minPayout,
+        max: maxPayout,
+        decimals,
       };
+      lastQuoteKey = key;
     } catch (e) {
       console.error("Failed to fetch quote", e);
       toasts.error("Could not preview payout.");
+    } finally {
+      if (pendingQuoteKey === key) {
+        pendingQuoteKey = null;
+      }
+    }
+  }
+
+  $: {
+    const scoreValue = $score.value;
+    const decimals = $airdrop.decimals;
+    if (typeof scoreValue === "number" && decimals !== undefined) {
+      void fetchQuote(scoreValue, decimals);
     }
   }
 
@@ -57,8 +82,20 @@
       let hash: Hex;
       if (useZkPath) {
         const proofMeta = await getProofMeta($wallet.address);
-        if (proofMeta.score1e6 !== $score.value) {
-          throw new Error("Score mismatch between frontend and backend proof generation.");
+        const currentScore = $score.value;
+        if (typeof currentScore === "number") {
+          const delta = Math.abs(proofMeta.score1e6 - currentScore);
+          if (delta > SCORE_TOLERANCE) {
+            console.warn("Score mismatch detected; aligning with backend value", {
+              frontend: currentScore,
+              backend: proofMeta.score1e6,
+              delta,
+            });
+            scoreActions.setValue(proofMeta.score1e6);
+            toasts.warning("Score updated from backend proof. Refreshing payout…");
+          }
+        } else {
+          scoreActions.setValue(proofMeta.score1e6);
         }
         state = "awaiting_wallet";
         hash = await writeContract(
@@ -116,8 +153,6 @@
       state = "error";
     }
   }
-
-  fetchQuote();
 </script>
 
 <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-200">

src/lib/components/ClaimCard.svelte

@@ -1,6 +1,7 @@
 import { writable, derived, get } from "svelte/store";
 import { walletMock } from "./walletMock";
 import { wallet } from "./wallet";
+import { parseConfig } from "$lib/config";
 
 export type ScoreState = {
   loading: boolean;
@@ -17,6 +18,12 @@ export const score = writable<ScoreState>({
 const CACHE_KEY = "reputation_score_cache";
 const CACHE_TTL = 5 * 60 * 1000; // 5 minutes
 
+const parsedConfig = parseConfig();
+const isMockMode = ((): boolean => {
+  if ("error" in parsedConfig) return true;
+  return !parsedConfig.API_BASE;
+})();
+
 // Load from cache
 function loadFromCache(address: string): ScoreState | null {
   if (typeof window === "undefined") {
@@ -93,14 +100,26 @@ export const mockScore = derived([walletMock, wallet], ([$walletMock, $wallet])
     };
     if (address) saveToCache(address, state);
     return state;
-  } else if (
+  }
+
+  if (!isMockMode) {
+    return {
+      loading: Boolean(address),
+      value: undefined,
+      lastUpdated: undefined,
+      error: undefined,
+      cachedAt: undefined,
+    };
+  }
+
+  if (
     $wallet.connected &&
     !$walletMock.enabled &&
     address &&
     typeof address === "string" &&
     address.startsWith("0x")
   ) {
-    // For real wallet connections without mock, generate deterministic score
+    // For real wallet connections in mock mode, generate deterministic score
     const state = {
       loading: false,
       value: generateDeterministicScore(address as `0x${string}`),

src/lib/stores/score.ts

@@ -19,6 +19,11 @@ function syncWalletStore(ws: OnboardWalletState[] = []) {
     const chainId = chainIdHex ? parseInt(chainIdHex, 16) : undefined;
     const address = primary.accounts?.[0]?.address as `0x${string}` | undefined;
 
+    // Guard against transient states where wallet emits without address yet; avoid flicker.
+    if (!address) {
+      return; // wait for a stable state with an address before marking connected
+    }
+
     wallet.update((current) => ({
       ...current,
       connected: true,
@@ -49,13 +54,8 @@ export async function initOnboard() {
   const existing = get(onboard);
   if (existing) return existing;
 
+  // Allow all injected wallets; still promote popular ones in UI via displayUnavailable.
   const injected = injectedModule({
-    filter: {
-      // Include popular wallets
-      [Symbol.for("web3-onboard-injected-metamask")]: true,
-      [Symbol.for("web3-onboard-injected-trust")]: true,
-      [Symbol.for("web3-onboard-injected-coinbase")]: true,
-    },
     displayUnavailable: ["MetaMask", "Trust Wallet", "Coinbase Wallet"],
   });
 
@@ -151,8 +151,9 @@ export async function initOnboard() {
       ],
     },
     connect: {
-      autoConnectLastWallet: true,
-      autoConnectAllPreviousWallet: true,
+      // Disable autoconnect to prevent modal flicker/auto-dismiss on init.
+      autoConnectLastWallet: false,
+      autoConnectAllPreviousWallet: false,
     },
     accountCenter: {
       desktop: {

src/lib/web3/onboard.ts

@@ -1,16 +1,55 @@
 <script lang="ts">
   import { wallet } from "$lib/stores/wallet";
   import { walletMock } from "$lib/stores/walletMock";
-  import { score } from "$lib/stores/score";
+  import { score, scoreActions } from "$lib/stores/score";
   import { airdrop } from "$lib/stores/airdrop";
   import type { AirdropState } from "$lib/stores/airdrop";
   import ClaimCard from "$lib/components/ClaimCard.svelte";
   import ChecklistItem from "$lib/components/ChecklistItem.svelte";
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
+  import { getScore } from "$lib/api/client";
   import type { PageData } from "./$types";
+  import { browser } from "$app/environment";
+  import { formatUnits } from "viem";
 
   export let data: PageData;
 
+  let lastLoadedAddress: `0x${string}` | null = null;
+  let currentLoadAddress: `0x${string}` | null = null;
+  let unsubscribeWallet: () => void;
+
+  async function loadScore(address: `0x${string}`) {
+    if (!browser) return;
+    if (currentLoadAddress === address || lastLoadedAddress === address) return;
+
+    currentLoadAddress = address;
+    scoreActions.setLoading(true);
+
+    try {
+      const scoreData = await getScore(address);
+      if (!scoreData) {
+        throw new Error("No score data returned");
+      }
+
+      scoreActions.setValue(scoreData.score1e6 ?? 0);
+      score.update((s) => ({
+        ...s,
+        loading: false,
+        lastUpdated: scoreData.updatedAt,
+        error: undefined,
+      }));
+
+      lastLoadedAddress = address;
+    } catch (error) {
+      console.error("Failed to load score for claim page:", error);
+      scoreActions.setError("Failed to load reputation score.");
+    } finally {
+      if (currentLoadAddress === address) {
+        currentLoadAddress = null;
+      }
+    }
+  }
+
   onMount(() => {
     if (data.scoreData) {
       score.set({
@@ -21,6 +60,21 @@
     } else if (data.error) {
       score.set({ loading: false, error: data.error });
     }
+
+    unsubscribeWallet = wallet.subscribe(($wallet) => {
+      if (!browser) return;
+
+      if (!$walletMock.enabled && $wallet.connected && $wallet.address) {
+        void loadScore($wallet.address);
+      } else if (!$walletMock.enabled && (!$wallet.connected || !$wallet.address)) {
+        lastLoadedAddress = null;
+        scoreActions.reset();
+      }
+    });
+  });
+
+  onDestroy(() => {
+    if (unsubscribeWallet) unsubscribeWallet();
   });
 
   // Determine connection status considering both real and mock states
@@ -39,23 +93,32 @@
   $: expectedPayout = calculatePayout($score.value || 0, $airdrop);
 
   function calculatePayout(scoreValue: number, airdropConfig: Partial<AirdropState>): number {
-    if (!scoreValue || !airdropConfig.floor || !airdropConfig.cap) return 0;
+    const { floor, cap, minPayout, maxPayout, decimals } = airdropConfig;
+    if (
+      !scoreValue ||
+      floor === undefined ||
+      cap === undefined ||
+      minPayout === undefined ||
+      maxPayout === undefined ||
+      decimals === undefined
+    ) {
+      return 0;
+    }
 
-    if (scoreValue < airdropConfig.floor) return 0;
+    if (scoreValue < floor) return 0;
 
-    const clampedScore = Math.min(scoreValue, airdropConfig.cap);
-    const range = airdropConfig.cap - airdropConfig.floor;
+    const clampedScore = Math.min(scoreValue, cap);
+    const range = cap - floor;
     if (range <= 0) {
-      return Number(airdropConfig.maxPayout ?? 0n);
+      return Number(formatUnits(maxPayout, decimals));
     }
 
-    const normalizedScore = (clampedScore - airdropConfig.floor) / range;
-
-    const minPayout = Number(airdropConfig.minPayout ?? 0n);
-    const maxPayout = Number(airdropConfig.maxPayout ?? minPayout);
-    const payoutRange = Math.max(0, maxPayout - minPayout);
+    const normalizedScore = (clampedScore - floor) / range;
+    const minTokens = Number(formatUnits(minPayout, decimals));
+    const maxTokens = Number(formatUnits(maxPayout, decimals));
+    const payoutRange = Math.max(0, maxTokens - minTokens);
 
-    return minPayout + normalizedScore * payoutRange;
+    return minTokens + normalizedScore * payoutRange;
   }
 </script>
 

src/routes/claim/+page.svelte

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { getScore, getClaimArtifact, getProofMeta } from '../../src/lib/api/client';
+
+// In mock mode (no VITE_API_BASE), all three should return the same score for a given address
+
+describe('mock api consistency', () => {
+  const addr = '0x1234567890abcdef1234567890abcdef12345678';
+
+  it('getScore/getClaimArtifact/getProofMeta share the same score1e6', async () => {
+    const score = await getScore(addr);
+    const artifact = await getClaimArtifact(addr, '0x' + '1'.repeat(64));
+    const proofMeta = await getProofMeta(addr);
+
+    expect(score.score1e6).toBeGreaterThan(0);
+    expect(artifact.score).toEqual(score.score1e6);
+    expect(proofMeta.score1e6).toEqual(score.score1e6);
+  });
+});