feat: improve eurc warning on demo

Author: akbarsaputrait

examples/nextjs-app/src/app/basic/page.tsx

@@ -2,12 +2,15 @@
 
 import * as Tokens from "@rozoai/intent-common";
 import {
+  baseEURC,
   FeeType,
   getChainName,
   getChainNativeToken,
+  getKnownToken,
   knownTokens,
   rozoSolana,
   rozoStellar,
+  rozoStellarEURC,
   TokenSymbol,
 } from "@rozoai/intent-common";
 import {
@@ -187,10 +190,32 @@ export default function DemoBasic() {
     TokenSymbol.USDC,
     TokenSymbol.USDT,
   ]);
+  const [eurcValidationError, setEurcValidationError] = useState<string>("");
 
   const handleSetConfig = useCallback(
     (newConfig: Config, symbols?: TokenSymbol[]) => {
       const symbolsToUse = symbols ?? preferredSymbol;
+
+      // Validate EURC: EURC can only be sent to EURC
+      const hasEURC = symbolsToUse.includes(TokenSymbol.EURC);
+      if (hasEURC && newConfig.tokenAddress) {
+        const destinationToken = getKnownToken(
+          newConfig.chainId,
+          newConfig.tokenAddress
+        );
+        const isDestinationEURC = destinationToken?.symbol === TokenSymbol.EURC;
+
+        if (!isDestinationEURC) {
+          setEurcValidationError(
+            `EURC can only be sent to another EURC. Please select an EURC token as the destination token.`
+          );
+          return; // Don't update config if validation fails
+        }
+      }
+
+      // Clear error if validation passes
+      setEurcValidationError("");
+
       const configWithSymbols = {
         ...newConfig,
         preferredSymbol: symbolsToUse,
@@ -261,6 +286,27 @@ export default function DemoBasic() {
         "chainId" in parsedConfig &&
         "tokenAddress" in parsedConfig
       ) {
+        // Validate EURC: EURC can only be sent to EURC
+        const hasEURC = parsedConfig.preferredSymbol?.includes(
+          TokenSymbol.EURC
+        );
+        if (hasEURC && parsedConfig.tokenAddress && parsedConfig.chainId) {
+          const destinationToken = getKnownToken(
+            parsedConfig.chainId,
+            parsedConfig.tokenAddress
+          );
+          const isDestinationEURC =
+            destinationToken?.symbol === TokenSymbol.EURC;
+
+          if (!isDestinationEURC) {
+            // Reset preferredSymbol to default if EURC validation fails
+            parsedConfig.preferredSymbol = [TokenSymbol.USDC, TokenSymbol.USDT];
+            setEurcValidationError(
+              `EURC can only be sent to another EURC. Configuration has been reset to default.`
+            );
+          }
+        }
+
         setConfig(parsedConfig);
         setParsedConfig(parsedConfig);
         if (parsedConfig.preferredSymbol) {
@@ -279,6 +325,41 @@ export default function DemoBasic() {
     parsedConfig.tokenAddress &&
     parsedConfig.amount;
 
+  // Check if destination token is Base EURC or Stellar EURC
+  const isDestinationEURC = useMemo(() => {
+    if (!parsedConfig || !parsedConfig.tokenAddress || !parsedConfig.chainId) {
+      return false;
+    }
+
+    const destinationToken = getKnownToken(
+      parsedConfig.chainId,
+      parsedConfig.tokenAddress
+    );
+
+    if (!destinationToken) return false;
+
+    // Check if it's Base EURC
+    if (
+      parsedConfig.chainId === baseEURC.chainId &&
+      isEvmChain(parsedConfig.chainId)
+    ) {
+      try {
+        return (
+          getAddress(destinationToken.token) === getAddress(baseEURC.token)
+        );
+      } catch {
+        return destinationToken.token === baseEURC.token;
+      }
+    }
+
+    // Check if it's Stellar EURC
+    if (parsedConfig.chainId === rozoStellarEURC.chainId) {
+      return destinationToken.token === rozoStellarEURC.token;
+    }
+
+    return false;
+  }, [parsedConfig]);
+
   // Generate code snippet when config changes
   const codeSnippet = useMemo(() => {
     if (!hasValidConfig || !parsedConfig) return "";
@@ -299,6 +380,30 @@ export default function DemoBasic() {
         ? [TokenSymbol.USDC, TokenSymbol.USDT]
         : [TokenSymbol.EURC];
 
+    // If switching to EURC, find and set an EURC token for the current chain
+    if (nextSymbols.includes(TokenSymbol.EURC) && config.chainId) {
+      const eurcToken = knownTokens.find(
+        (t: any) =>
+          t.chainId === config.chainId && t.symbol === TokenSymbol.EURC
+      );
+
+      if (eurcToken) {
+        const updatedConfig: Config = {
+          ...config,
+          tokenAddress: eurcToken.token,
+          preferredSymbol: nextSymbols,
+        };
+        setPreferredSymbol(nextSymbols);
+        handleSetConfig(updatedConfig, nextSymbols);
+        return;
+      } else {
+        setEurcValidationError(
+          `EURC is not available on the selected chain. Please select a chain that supports EURC (Base, Ethereum, or Stellar).`
+        );
+        return;
+      }
+    }
+
     setPreferredSymbol(nextSymbols);
     handleSetConfig(config, nextSymbols);
   }, [config, preferredSymbol, handleSetConfig]);
@@ -317,7 +422,19 @@ export default function DemoBasic() {
         </Text>
       </div>
 
-      <button onClick={handleChangeCurrency}>Change currency</button>
+      <div className="mb-4 flex items-center gap-4">
+        <button
+          onClick={handleChangeCurrency}
+          className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors font-medium mx-auto"
+        >
+          Change currency
+        </button>
+        {eurcValidationError && (
+          <div className="flex-1 bg-red-50 border border-red-200 rounded-lg p-3">
+            <p className="text-sm text-red-800">{eurcValidationError}</p>
+          </div>
+        )}
+      </div>
 
       {/* Main Content */}
       <div className="flex flex-col items-center gap-6">
@@ -328,6 +445,14 @@ export default function DemoBasic() {
               <h2 className="text-xl font-semibold text-gray-800 mb-4">
                 Try the Payment
               </h2>
+              {isDestinationEURC && (
+                <div className="mb-4 bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                  <p className="text-sm text-yellow-800">
+                    <strong>⚠️ EURC Restriction:</strong> EURC can only be sent
+                    to another EURC token. The destination token must be EURC.
+                  </p>
+                </div>
+              )}
               <div className="flex flex-col gap-3">
                 <RozoPayButton.Custom
                   appId={APP_ID}
@@ -512,6 +637,12 @@ export default function DemoBasic() {
                     </code>
                     . Automatically finds matching tokens across all supported
                     chains.
+                    <br />
+                    <strong className="text-red-600">
+                      ⚠️ Important: EURC can only be sent to another EURC token.
+                      If EURC is in preferredSymbol, the destination token must
+                      also be EURC.
+                    </strong>
                   </dd>
                 </div>
                 <div>