@rango-dev/widget-embedded 0.17.1-next.21 → 0.17.1-next.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.17.1-next.21",
+  "version": "0.17.1-next.22",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

package/src/components/UpdateUrl.tsx

@@ -7,7 +7,6 @@ import {
 
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { SearchParams } from '../constants/searchParams';
-import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
@@ -33,7 +32,6 @@ export function UpdateUrl() {
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  useSyncStoresWithConfig();
 
   useEffect(() => {
     const params: Record<string, string> = {};

package/src/containers/Wallets/Wallets.tsx

@@ -12,6 +12,7 @@ import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
 import React, { createContext, useEffect, useRef } from 'react';
 
+import { useSyncStoresWithConfig } from '../../hooks/useSyncStoresWithConfig';
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
@@ -37,6 +38,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
+  useSyncStoresWithConfig();
 
   useEffect(() => {
     if (props.config) {

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,6 +1,6 @@
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
@@ -53,7 +53,14 @@ export function useSyncStoresWithConfig() {
     setInputAmount(config?.amount?.toString() || '');
   }, [config?.amount]);
 
-  useEffect(() => {
+  /*
+   * We update quote tokens in two scenarios.
+   * If default values exist in widget config or search parameters exist in URL.
+   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
+   * Using useLayoutEffect causes widget config values to apply first.
+   * We may consider replacing this with a better solution in the future.
+   */
+  useLayoutEffect(() => {
     if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
@@ -111,7 +118,14 @@ export function useSyncStoresWithConfig() {
     }
   }, [toTokensConfig, toBlockchainsConfig]);
 
-  useEffect(() => {
+  /*
+   * We update quote tokens in two scenarios.
+   * If default values exist in widget config or search parameters exist in URL.
+   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
+   * Using useLayoutEffect causes widget config values to apply first.
+   * We may consider replacing this with a better solution in the future.
+   */
+  useLayoutEffect(() => {
     if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain