feat: clear cache payment options on payment completed

akbarsaputrait · akbarsaputrait · commit db4e352515b6 · 2025-12-16T13:26:26.000+07:00
diff --git a/packages/connectkit/src/components/Pages/Stellar/PayWithStellarToken/index.tsx b/packages/connectkit/src/components/Pages/Stellar/PayWithStellarToken/index.tsx
@@ -45,6 +45,7 @@ const PayWithStellarToken: React.FC = () => {
   const {
     selectedStellarTokenOption,
     payWithStellarToken,
+    clearPaymentOptionsCache,
     setTxHash,
     payParams,
     rozoPaymentId,
@@ -248,6 +249,7 @@ const PayWithStellarToken: React.FC = () => {
         );
 
         if (response.successful) {
+          clearPaymentOptionsCache();
           setPayState(PayState.RequestSuccessful);
           setTxHash(response.hash);
           setTxURL(getChainExplorerTxUrl(stellar.chainId, response.hash));
diff --git a/packages/connectkit/src/hooks/useDepositAddressOptions.ts b/packages/connectkit/src/hooks/useDepositAddressOptions.ts
@@ -73,7 +73,7 @@ export function useDepositAddressOptions({
       {
         id: DepositAddressPaymentOptions.BASE_USDC,
         logoURI: baseUSDC.logoURI,
-        minimumUsd: 0.01,
+        minimumUsd: 0.1,
         chainId: base.chainId,
         token: baseUSDC,
       },
diff --git a/packages/connectkit/src/hooks/usePaymentState.ts b/packages/connectkit/src/hooks/usePaymentState.ts
@@ -223,6 +223,9 @@ export interface PaymentState {
     option: WalletPaymentOption,
     store: Store<PaymentState, PaymentEvent>
   ) => Promise<PaymentResponse | undefined>;
+
+  // Clear payment options cache to prevent stale balances
+  clearPaymentOptionsCache: () => void;
 }
 
 export function usePaymentState({
@@ -720,6 +723,7 @@ export function usePaymentState({
 
     // Set transaction hash and return result
     setTxHash(paymentTxHash);
+    clearPaymentOptionsCache();
     return { txHash: paymentTxHash, success: true };
   };
 
@@ -962,6 +966,7 @@ export function usePaymentState({
       const tx = Transaction.from(bs58.decode(serializedTransaction));
       const txHash = await solanaWallet.sendTransaction(tx, connection);
       log("[PAY SOLANA] Transaction sent! Hash:", txHash);
+      clearPaymentOptionsCache();
       return { txHash: txHash, success: true };
     } catch (error) {
       console.error(`[PAY SOLANA] Error: ${error}`);
@@ -1278,6 +1283,12 @@ export function usePaymentState({
     await pay.createPreviewOrder(currPayParams);
   };
 
+  const clearPaymentOptionsCache = () => {
+    walletPaymentOptions.clearCache();
+    solanaPaymentOptions.clearCache();
+    stellarPaymentOptions.clearCache();
+  };
+
   const resetOrder = useCallback(
     async (payParams?: Partial<PayParams>) => {
       const mergedPayParams: PayParams | undefined =
@@ -1382,5 +1393,6 @@ export function usePaymentState({
     solanaPubKey,
     stellarPubKey,
     orderUsdAmount,
+    clearPaymentOptionsCache,
   };
 }
diff --git a/packages/connectkit/src/hooks/useSolanaPaymentOptions.ts b/packages/connectkit/src/hooks/useSolanaPaymentOptions.ts
@@ -31,6 +31,9 @@ export function useSolanaPaymentOptions({
   // Track if we're currently making an API call to prevent concurrent requests
   const isApiCallInProgress = useRef<boolean>(false);
 
+  // Track if we have initial data to prevent clearing options on refresh (prevents flickering)
+  const hasInitialData = useRef<boolean>(false);
+
   const stableAppId = useMemo(() => {
     return payParams?.appId;
   }, [payParams]);
@@ -66,8 +69,15 @@ export function useSolanaPaymentOptions({
   const fetchBalances = useCallback(async () => {
     if (address == null || usdRequired == null || stableAppId == null) return;
 
-    setOptions(null);
-    setIsLoading(true);
+    // Only clear options if we don't have initial data yet to prevent flickering
+    // If we already have options, keep them visible while loading new data
+    if (!hasInitialData.current) {
+      setOptions(null);
+      setIsLoading(true);
+    } else {
+      // Keep existing options visible, just set loading state
+      setIsLoading(true);
+    }
 
     try {
       const newOptions = await trpc.getSolanaPaymentOptions.query({
@@ -77,9 +87,13 @@ export function useSolanaPaymentOptions({
         appId: stableAppId,
       });
       setOptions(newOptions);
+      hasInitialData.current = true;
     } catch (error) {
       console.error(error);
-      setOptions([]);
+      // Only set empty array if we don't have initial data
+      if (!hasInitialData.current) {
+        setOptions([]);
+      }
     } finally {
       isApiCallInProgress.current = false;
       setIsLoading(false);
@@ -92,6 +106,22 @@ export function useSolanaPaymentOptions({
     isApiCallInProgress,
   });
 
+  // Clear cache function to reset balance state and tracking
+  // This is called when payment completes for Solana tokens to prevent stale balances
+  const clearCache = useCallback(() => {
+    setOptions(null);
+    lastExecutedParams.current = null;
+    isApiCallInProgress.current = false;
+    hasInitialData.current = false;
+  }, []);
+
+  // Reset hasInitialData when address changes to allow clearing options for new address
+  useEffect(() => {
+    if (address) {
+      hasInitialData.current = false;
+    }
+  }, [address]);
+
   // Smart clearing: only clear if we don't have data for this address
   useEffect(() => {
     if (address && !options) {
@@ -132,11 +162,13 @@ export function useSolanaPaymentOptions({
     if (address != null && usdRequired != null && stableAppId != null) {
       refreshOptions();
     }
-  }, [address, usdRequired, stableAppId]);
+    // refreshOptions is stable (created from fetchBalances which only changes when dependencies change)
+  }, [address, usdRequired, stableAppId]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return {
     options: filteredOptions,
     isLoading,
     refreshOptions,
+    clearCache,
   };
 }
diff --git a/packages/connectkit/src/hooks/useStellarPaymentOptions.ts b/packages/connectkit/src/hooks/useStellarPaymentOptions.ts
@@ -92,6 +92,14 @@ export function useStellarPaymentOptions({
     isApiCallInProgress,
   });
 
+  // Clear cache function to reset balance state and tracking
+  // This is called when payment completes for Stellar tokens to prevent stale balances
+  const clearCache = useCallback(() => {
+    setOptions(null);
+    lastExecutedParams.current = null;
+    isApiCallInProgress.current = false;
+  }, []);
+
   // Smart clearing: only clear if we don't have data for this address
   useEffect(() => {
     if (address && !options) {
@@ -138,5 +146,6 @@ export function useStellarPaymentOptions({
     options: filteredOptions,
     isLoading,
     refreshOptions,
+    clearCache,
   };
 }
diff --git a/packages/connectkit/src/hooks/useTokenOptions.tsx b/packages/connectkit/src/hooks/useTokenOptions.tsx
@@ -123,14 +123,13 @@ export function useTokenOptions(mode: "evm" | "solana" | "stellar" | "all"): {
         )
       : solanaOptionsRaw;
 
-    const solanaOptions = solanaPaymentOptions.isLoading
-      ? []
-      : getSolanaTokenOptions(
-          filteredSolanaOptions,
-          isDepositFlow,
-          setSelectedSolanaTokenOption,
-          setRoute
-        );
+    // Don't clear options when loading - keep existing options visible to prevent flickering
+    const solanaOptions = getSolanaTokenOptions(
+      filteredSolanaOptions,
+      isDepositFlow,
+      setSelectedSolanaTokenOption,
+      setRoute
+    );
     optionsList.push(...solanaOptions);
     isLoading ||= solanaPaymentOptions.isLoading;
     hasAnyData ||= filteredSolanaOptions.length > 0;
diff --git a/packages/connectkit/src/hooks/useWalletPaymentOptions.ts b/packages/connectkit/src/hooks/useWalletPaymentOptions.ts
@@ -177,6 +177,14 @@ export function useWalletPaymentOptions({
     isApiCallInProgress,
   });
 
+  // Clear cache function to reset balance state and tracking
+  // This is called when payment completes for EVM tokens to prevent stale balances
+  const clearCache = useCallback(() => {
+    setOptions(null);
+    lastExecutedParams.current = null;
+    isApiCallInProgress.current = false;
+  }, []);
+
   // Initial fetch when hook mounts with valid parameters or when key parameters change
   useEffect(() => {
     if (
@@ -193,5 +201,6 @@ export function useWalletPaymentOptions({
     options: filteredOptions,
     isLoading,
     refreshOptions,
+    clearCache,
   };
 }
diff --git a/packages/pay-common/README.md b/packages/pay-common/README.md
@@ -316,76 +316,6 @@ Based on [ROZO API Documentation](https://docs.rozo.ai/integration/api-doc/suppo
 | Base         | `8453`   | `base`        | EVM     | ✅           |
 | Rozo Stellar | `1500`   | `rozoStellar` | Stellar | ✅ (7 dec)   |
 
-### Token Addresses
-
-<details>
-<summary><strong>Ethereum (Chain ID: 1)</strong></summary>
-
-| Token | Address                                      | Decimals | Constant       |
-| ----- | -------------------------------------------- | -------- | -------------- |
-| USDC  | `0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48` | 6        | `ethereumUSDC` |
-| USDT  | `0xdac17f958d2ee523a2206206994597c13d831ec7` | 6        | `ethereumUSDT` |
-
-</details>
-
-<details>
-<summary><strong>Arbitrum (Chain ID: 42161)</strong></summary>
-
-| Token | Address                                      | Decimals | Constant       |
-| ----- | -------------------------------------------- | -------- | -------------- |
-| USDC  | `0xaf88d065e77c8cc2239327c5edb3a432268e5831` | 6        | `arbitrumUSDC` |
-| USDT  | `0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9` | 6        | `arbitrumUSDT` |
-
-</details>
-
-<details>
-<summary><strong>Base (Chain ID: 8453)</strong></summary>
-
-| Token | Address                                      | Decimals | Constant   |
-| ----- | -------------------------------------------- | -------- | ---------- |
-| USDC  | `0x833589fcd6edb6e08f4c7c32d4f71b54bda02913` | 6        | `baseUSDC` |
-
-</details>
-
-<details>
-<summary><strong>BSC (Chain ID: 56)</strong></summary>
-
-| Token | Address                                      | Decimals | Constant  |
-| ----- | -------------------------------------------- | -------- | --------- |
-| USDC  | `0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d` | 18       | `bscUSDC` |
-| USDT  | `0x55d398326f99059ff775485246999027b3197955` | 18       | `bscUSDT` |
-
-</details>
-
-<details>
-<summary><strong>Polygon (Chain ID: 137)</strong></summary>
-
-| Token | Address                                      | Decimals | Constant      |
-| ----- | -------------------------------------------- | -------- | ------------- |
-| USDC  | `0x3c499c542cef5e3811e1192ce70d8cc03d5c3359` | 6        | `polygonUSDC` |
-| USDT  | `0xc2132d05d31c914a87c6611c10748aeb04b58e8f` | 6        | `polygonUSDT` |
-
-</details>
-
-<details>
-<summary><strong>Rozo Solana (Chain ID: 900)</strong></summary>
-
-| Token | Address                                        | Decimals | Constant         |
-| ----- | ---------------------------------------------- | -------- | ---------------- |
-| USDC  | `EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v` | 6        | `rozoSolanaUSDC` |
-| USDT  | `Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB` | 6        | `rozoSolanaUSDT` |
-
-</details>
-
-<details>
-<summary><strong>Rozo Stellar (Chain ID: 1500)</strong></summary>
-
-| Token | Address                                                         | Decimals | Constant          |
-| ----- | --------------------------------------------------------------- | -------- | ----------------- |
-| USDC  | `USDC:GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN` | 7        | `rozoStellarUSDC` |
-
-</details>
-
 ---
 
 ## 🛠️ Utility Functions
@@ -437,44 +367,6 @@ console.log(config.preferred); // Source payment details
 console.log(config.destination); // Destination payment details
 ```
 
----
-
-## 🔐 Webhook Verification
-
-When using webhooks, verify incoming requests using HMAC-SHA256:
-
-```typescript
-import crypto from "crypto";
-
-function verifyWebhook(
-  payload: string,
-  signature: string,
-  secret: string
-): boolean {
-  const hmac = crypto.createHmac("sha256", secret);
-  const digest = hmac.update(payload).digest("hex");
-  return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(digest));
-}
-
-// In your webhook handler
-app.post("/api/webhooks/payment", (req, res) => {
-  const signature = req.headers["x-rozo-signature"];
-  const payload = JSON.stringify(req.body);
-
-  if (!verifyWebhook(payload, signature, payment.webhookSecret)) {
-    return res.status(401).send("Invalid signature");
-  }
-
-  // Process webhook
-  const { status, id } = req.body;
-  console.log(`Payment ${id} status: ${status}`);
-
-  res.status(200).send("OK");
-});
-```
-
----
-
 ## 📚 TypeScript Support
 
 Full TypeScript definitions included. All exports are typed.
diff --git a/packages/pay-common/package.json b/packages/pay-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rozoai/intent-common",
-  "version": "0.1.6-beta.3",
+  "version": "0.1.6",
   "description": "Intent Pay shared types and utilities",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export function useDepositAddressOptions({`
`73`	`73`	`{`
`74`	`74`	`id: DepositAddressPaymentOptions.BASE_USDC,`
`75`	`75`	`logoURI: baseUSDC.logoURI,`
`76`		`- minimumUsd: 0.01,`
	`76`	`+ minimumUsd: 0.1,`
`77`	`77`	`chainId: base.chainId,`
`78`	`78`	`token: baseUSDC,`
`79`	`79`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@rozoai/intent-common",`
`3`		`- "version": "0.1.6-beta.3",`
	`3`	`+ "version": "0.1.6",`
`4`	`4`	`"description": "Intent Pay shared types and utilities",`
`5`	`5`	`"main": "dist/index.js",`
`6`	`6`	`"types": "dist/index.d.ts",`