@rango-dev/widget-embedded 0.29.1-next.15 → 0.29.1-next.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.15",
+  "version": "0.29.1-next.16",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -18,7 +18,13 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
@@ -87,10 +93,14 @@ export function ConfirmWalletsModal(props: PropTypes) {
 
   const isFirefox = navigator?.userAgent.includes('Firefox');
 
-  const quoteWallets = getQuoteWallets({
-    filter: 'all',
-    quote: selectedQuote,
-  });
+  const quoteWallets = useMemo(
+    () =>
+      getQuoteWallets({
+        filter: 'all',
+        quote: selectedQuote,
+      }),
+    [selectedQuote]
+  );
 
   const requiredWallets = getQuoteWallets({
     filter: 'required',
@@ -113,7 +123,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
           quoteWallets.includes(connectedWallet.chain)
         );
       }),
-    [connectedWallets.length, quoteWallets.length]
+    [connectedWallets, quoteWallets]
   );
 
   const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
@@ -333,7 +343,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       );
       return nextState;
     });
-  }, [connectedWallets.length, quoteWallets.length]);
+  }, [connectedWallets, quoteWallets]);
 
   useEffect(() => {
     const nextState: typeof nextSelectedWallets = [];
@@ -353,7 +363,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       });
       setNextSelectedWallets(nextState);
     }
-  }, [connectedWallets.length, nextSelectedWallets.length]);
+  }, [connectedWallets, nextSelectedWallets]);
 
   const modalContainer = document.getElementById(
     WIDGET_UI_ID.SWAP_BOX_ID

package/src/components/TokenList/TokenList.tsx

@@ -110,7 +110,7 @@ export function TokenList(props: PropTypes) {
 
   useEffect(() => {
     setTokens(list.slice(0, PAGE_SIZE));
-  }, [list.length]);
+  }, [list.length, selectedBlockchain]);
 
   const renderList = () => {
     if (!tokens.length && !!searchedFor) {

package/src/hooks/useSubscribeToWidgetEvents/useSubscribeToWidgetEvents.ts

@@ -46,9 +46,8 @@ export function useSubscribeToWidgetEvents() {
       setNotification(event, route);
     };
     eventEmitter.on(WidgetEvents.StepEvent, handleStepEvent);
-
     return () => eventEmitter.off(WidgetEvents.StepEvent, handleStepEvent);
-  }, [eventEmitter, connectedWallets.length]);
+  }, [eventEmitter, connectedWallets]);
 
   useEffect(() => {
     const handleRouteEvent = (widgetEvent: RouteEventData) => {
@@ -64,5 +63,5 @@ export function useSubscribeToWidgetEvents() {
     eventEmitter.on(WidgetEvents.RouteEvent, handleRouteEvent);
 
     return () => eventEmitter.off(WidgetEvents.RouteEvent, handleRouteEvent);
-  }, [eventEmitter, connectedWallets.length]);
+  }, [eventEmitter]);
 }

package/src/hooks/useWalletProviders/index.ts

@@ -0,0 +1 @@
+export { useWalletProviders } from './useWalletProviders';

package/src/hooks/useWalletProviders/useWalletProviders.helpers.ts

@@ -0,0 +1,14 @@
+import type { ProviderInterface } from '@rango-dev/wallets-react';
+
+export function hashProviders(
+  providers: (string | ProviderInterface)[]
+): string {
+  return providers
+    .map((provider) => {
+      if (typeof provider === 'string') {
+        return provider;
+      }
+      return provider.config.type;
+    })
+    .join('-');
+}

package/src/hooks/{useWalletProviders.ts → useWalletProviders/useWalletProviders.ts}

@@ -1,11 +1,13 @@
-import type { WidgetConfig } from '../types';
-import type { ProvidersOptions } from '../utils/providers';
+import type { WidgetConfig } from '../../types';
+import type { ProvidersOptions } from '../../utils/providers';
 import type { ProviderInterface } from '@rango-dev/wallets-react';
 
 import { useEffect } from 'react';
 
-import { useWalletsStore } from '../store/wallets';
-import { matchAndGenerateProviders } from '../utils/providers';
+import { useWalletsStore } from '../../store/wallets';
+import { matchAndGenerateProviders } from '../../utils/providers';
+
+import { hashProviders } from './useWalletProviders.helpers';
 
 export function useWalletProviders(
   providers: WidgetConfig['wallets'],
@@ -20,7 +22,11 @@ export function useWalletProviders(
   useEffect(() => {
     clearConnectedWallet();
     generateProviders = matchAndGenerateProviders(providers, options);
-  }, [providers?.length]);
+  }, [
+    hashProviders(providers ?? []),
+    options?.walletConnectProjectId,
+    options?.walletConnectListedDesktopWalletLink,
+  ]);
 
   return {
     providers: generateProviders,

package/dist/hooks/useWalletProviders.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useWalletProviders.d.ts","sourceRoot":"","sources":["../../src/hooks/useWalletProviders.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAOlE,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,EAClC,OAAO,CAAC,EAAE,gBAAgB;;EAgB3B"}