@rango-dev/widget-embedded 0.14.1-next.16 → 0.14.1-next.18

package/dist/store/settings.d.ts

@@ -57,7 +57,7 @@ export declare const useSettingsStore: {
         infiniteApprove: () => boolean;
         disabledLiquiditySources: () => string[];
         theme: () => ThemeMode;
-        language: () => "en" | "es" | "jp" | "fr";
+        language: () => "en" | "es" | "ja" | "fr";
         affiliateRef: () => string | null;
         affiliatePercent: () => number | null;
         affiliateWallets: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.14.1-next.16",
+  "version": "0.14.1-next.18",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.17.0",
     "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.2",
     "@rango-dev/queue-manager-react": "^0.17.0",
-    "@rango-dev/ui": "^0.17.1-next.10",
+    "@rango-dev/ui": "^0.17.1-next.11",
     "@rango-dev/wallets-react": "^0.3.1-next.1",
     "@rango-dev/wallets-shared": "^0.17.1-next.0",
     "bignumber.js": "^9.1.1",

package/src/constants/languages.ts

@@ -13,7 +13,7 @@ export const LANGUAGES: LanguageItem[] = [
   { title: 'English', label: 'English', local: 'en', SVGFlag: English },
   { title: 'Spanish', label: 'Español', local: 'es', SVGFlag: Spanish },
   { title: 'French', label: 'Français', local: 'fr', SVGFlag: French },
-  { title: 'Japanese', label: '日本語', local: 'jp', SVGFlag: Japanese },
+  { title: 'Japanese', label: '日本語', local: 'ja', SVGFlag: Japanese },
 ];
 
 export const DEFAULT_LANGUAGE = 'en';

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,7 +1,7 @@
 import type { WidgetConfig } from '../types';
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
@@ -15,6 +15,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     setToBlockchain,
     setFromBlockchain,
     setFromToken,
+    fromToken,
+    toToken,
+    fromBlockchain,
+    toBlockchain,
   } = useBestRouteStore();
 
   const {
@@ -25,6 +29,22 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
     useSettingsStore();
 
+  const fromTokensConfig = useMemo(
+    () => config?.from?.tokens,
+    [config?.from?.tokens]
+  );
+  const fromBlockchainsConfig = useMemo(
+    () => config?.from?.blockchains,
+    [config?.from?.blockchains]
+  );
+  const toTokensConfig = useMemo(
+    () => config?.to?.tokens,
+    [config?.to?.tokens]
+  );
+  const toBlockchainsConfig = useMemo(
+    () => config?.to?.blockchains,
+    [config?.to?.blockchains]
+  );
   const prevConfigFromToken = useRef<Asset | undefined>(undefined);
   const prevConfigToToken = useRef<Asset | undefined>(undefined);
   const prevConfigFromBlockchain = useRef<string | undefined>(undefined);
@@ -62,6 +82,34 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     loadingMetaStatus,
   ]);
 
+  useEffect(() => {
+    if (fromToken && fromTokensConfig) {
+      if (!fromTokensConfig.some((token) => tokensAreEqual(token, fromToken))) {
+        setFromToken(null);
+      }
+    }
+
+    if (fromBlockchain && fromBlockchainsConfig) {
+      if (!fromBlockchainsConfig.includes(fromBlockchain.name)) {
+        setFromBlockchain(null);
+      }
+    }
+  }, [fromTokensConfig, fromBlockchainsConfig]);
+
+  useEffect(() => {
+    if (toToken && toTokensConfig) {
+      if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) {
+        setToToken(null);
+      }
+    }
+
+    if (toBlockchain && toBlockchainsConfig) {
+      if (!toBlockchainsConfig.includes(toBlockchain.name)) {
+        setToBlockchain(null);
+      }
+    }
+  }, [toTokensConfig, toBlockchainsConfig]);
+
   useEffect(() => {
     if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(