fix: chain order for multiple widget instances

packages/widget/src/stores/StoreProvider.tsx

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import type { WidgetConfigProps } from '../types';
+import { ChainOrderStoreProvider } from './chains';
 import { HeaderStoreProvider } from './header';
 import { RouteExecutionStoreProvider } from './routes';
 import { SplitSubvariantStoreProvider } from './settings';
@@ -13,9 +14,11 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
       state={config.subvariant === 'split' ? 'swap' : undefined}
     >
       <HeaderStoreProvider namePrefix={config?.keyPrefix}>
-        <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
-          {children}
-        </RouteExecutionStoreProvider>
+        <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
+          <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
+            {children}
+          </RouteExecutionStoreProvider>
+        </ChainOrderStoreProvider>
       </HeaderStoreProvider>
     </SplitSubvariantStoreProvider>
   );

packages/widget/src/stores/chains/ChainOrderStore.tsx

@@ -0,0 +1,49 @@
+import { createContext, useContext, useRef } from 'react';
+import type { StoreApi, UseBoundStore } from 'zustand';
+import type { PersistStoreProviderProps } from '../types';
+import { createChainOrderStore } from './createChainOrderStore';
+import type { ChainOrderState } from './types';
+
+export type ChainOrderStore = UseBoundStore<StoreApi<ChainOrderState>>;
+
+export const ChainOrderStoreContext = createContext<ChainOrderStore | null>(
+  null,
+);
+
+export function ChainOrderStoreProvider({
+  children,
+  ...props
+}: PersistStoreProviderProps) {
+  const storeRef = useRef<ChainOrderStore>();
+  if (!storeRef.current) {
+    storeRef.current = createChainOrderStore(props);
+  }
+  return (
+    <ChainOrderStoreContext.Provider value={storeRef.current}>
+      {children}
+    </ChainOrderStoreContext.Provider>
+  );
+}
+
+export function useChainOrderStore<T>(
+  selector: (state: ChainOrderState) => T,
+  equalityFn?: (left: T, right: T) => boolean,
+): T {
+  const useStore = useContext(ChainOrderStoreContext);
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`,
+    );
+  }
+  return useStore(selector, equalityFn);
+}
+
+export function useChainOrderStoreContext() {
+  const useStore = useContext(ChainOrderStoreContext);
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`,
+    );
+  }
+  return useStore;
+}

packages/widget/src/stores/chains/createChainOrderStore.ts

@@ -0,0 +1,66 @@
+import type { StateCreator } from 'zustand';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { PersistStoreProps } from '../types';
+import type { ChainOrderState } from './types';
+
+export const maxChainToOrder = 9;
+
+export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
+  create<ChainOrderState>(
+    persist(
+      (set, get) => ({
+        chainOrder: [],
+        availableChains: [],
+        initializeChains: (chainIds: number[]) => {
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder.filter((chainId) =>
+              chainIds.includes(chainId),
+            );
+            const chainsToAdd = chainIds.filter(
+              (chainId) => !chainOrder.includes(chainId),
+            );
+            if (chainOrder.length === maxChainToOrder || !chainsToAdd.length) {
+              return {
+                availableChains: chainIds,
+                chainOrder,
+              };
+            }
+            const chainsToAddLength = maxChainToOrder - chainOrder.length;
+            for (let index = 0; index < chainsToAddLength; index++) {
+              chainOrder.push(chainsToAdd[index]);
+            }
+            return {
+              availableChains: chainIds,
+              chainOrder,
+            };
+          });
+          return get().chainOrder;
+        },
+        setChain: (chainId: number) => {
+          const state = get();
+          if (
+            state.chainOrder.includes(chainId) ||
+            !state.availableChains.includes(chainId)
+          ) {
+            return;
+          }
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder.slice();
+            chainOrder.unshift(chainId);
+            if (chainOrder.length > maxChainToOrder) {
+              chainOrder.pop();
+            }
+            return {
+              chainOrder,
+            };
+          });
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-widget-chains-order`,
+        version: 0,
+        partialize: (state) => ({ chainOrder: state.chainOrder }),
+      },
+    ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,
+  );

packages/widget/src/stores/chains/index.ts

@@ -1,3 +1,4 @@
+export * from './ChainOrderStore';
+export * from './createChainOrderStore';
 export * from './types';
 export * from './useChainOrder';
-export * from './useChainOrderStore';

packages/widget/src/stores/chains/useChainOrder.ts

@@ -1,5 +1,5 @@
 import { shallow } from 'zustand/shallow';
-import { useChainOrderStore } from '.';
+import { useChainOrderStore } from './ChainOrderStore';
 
 export const useChainOrder = (): [number[], (chainId: number) => void] => {
   return useChainOrderStore(