@rango-dev/widget-embedded 0.39.1-next.9 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.39.1-next.9",
+  "version": "0.40.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -24,16 +24,16 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/logging-core": "^0.6.1-next.0",
-    "@rango-dev/provider-all": "^0.42.1-next.11",
-    "@rango-dev/queue-manager-core": "^0.27.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.42.1-next.4",
-    "@rango-dev/queue-manager-react": "^0.27.1-next.0",
-    "@rango-dev/signer-solana": "^0.36.1-next.1",
-    "@rango-dev/ui": "^0.43.1-next.5",
-    "@rango-dev/wallets-core": "^0.40.1-next.11",
-    "@rango-dev/wallets-react": "^0.27.1-next.12",
-    "@rango-dev/wallets-shared": "^0.41.1-next.4",
+    "@rango-dev/logging-core": "^0.7.0",
+    "@rango-dev/provider-all": "^0.43.0",
+    "@rango-dev/queue-manager-core": "^0.28.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.43.0",
+    "@rango-dev/queue-manager-react": "^0.28.0",
+    "@rango-dev/signer-solana": "^0.37.0",
+    "@rango-dev/ui": "^0.44.0",
+    "@rango-dev/wallets-core": "^0.41.0",
+    "@rango-dev/wallets-react": "^0.28.0",
+    "@rango-dev/wallets-shared": "^0.42.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -63,7 +63,7 @@ export function WalletList(props: PropTypes) {
     try {
       await suggestAndConnect(wallet.walletType, wallet.chain);
       setAddingExperimentalChainStatus('completed');
-    } catch (e) {
+    } catch {
       setAddingExperimentalChainStatus('rejected');
     }
   };

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -9,13 +9,19 @@ import {
   Typography,
 } from '@rango-dev/ui';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
+import {
+  PROFILE_BANNER_IMAGE_SOURCE,
+  PROFILE_BANNER_NAVIGATION_LINK,
+} from '../../constants/profileBanner';
 import { useUiStore } from '../../store/ui';
 import { getContainer } from '../../utils/common';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
+import { ProfileBanner } from './SwapDetailsModal.styles';
+
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
     open,
@@ -79,12 +85,13 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
         <>
           {showProfileBanner && (
             <>
-              <img
-                src={
-                  'https://raw.githubusercontent.com/rango-exchange/assets/main/banners/widget/profile.jpg'
-                }
-                alt="Profile Banner"
-              />
+              <Link to={PROFILE_BANNER_NAVIGATION_LINK}>
+                <ProfileBanner
+                  src={PROFILE_BANNER_IMAGE_SOURCE}
+                  alt="Profile Banner"
+                />
+              </Link>
+
               <Divider size={30} />
             </>
           )}

package/src/components/SwapDetailsModal/SwapDetailsModal.styles.ts

@@ -12,3 +12,7 @@ export const TooltipErrorContent = styled('div', {
     display: 'block',
   },
 });
+
+export const ProfileBanner = styled('img', {
+  width: '100%',
+});

package/src/constants/profileBanner.ts

@@ -0,0 +1,3 @@
+export const PROFILE_BANNER_IMAGE_SOURCE =
+  'https://raw.githubusercontent.com/rango-exchange/assets/main/banners/widget/profile.jpg';
+export const PROFILE_BANNER_NAVIGATION_LINK = '/profile';

package/src/constants/wallets.ts

@@ -1,3 +1,5 @@
 import { WalletTypes } from '@rango-dev/wallets-shared';
 
+export const BALANCE_SEPARATOR = '~';
+
 export const EXCLUDED_WALLETS = [WalletTypes.LEAP];

package/src/containers/Wallets/Wallets.helpers.ts

@@ -0,0 +1,26 @@
+import type { OnUpdateState } from './Wallets.types';
+import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
+
+import { LegacyEvents } from '@rango-dev/wallets-core/legacy';
+
+/*
+ * propagate updates for Dapps using external wallets
+ *
+ * Note: to take more control over the public interface and wallets-core interface (which may be changed) we use this layer
+ */
+export function propagateEvents(
+  cb: OnUpdateState,
+  eventParams: Parameters<LegacyEventHandler>
+): void {
+  const [walletType, event, value, coreState, info] = eventParams;
+
+  /*
+   * PROVIDER_DISCONNECTED has conflict with WalletEventTypes.DISCONNECT since they are doing samething, the first one is using only for Hub, the second one is what we exposed to the lib users.
+   * so for backward-compat we need to keep the behavior of WalletEventTypes.DISCONNECT
+   */
+  if (event === LegacyEvents.PROVIDER_DISCONNECTED) {
+    return;
+  }
+
+  cb(walletType, event, value, coreState, info);
+}

package/src/containers/Wallets/Wallets.tsx

@@ -4,25 +4,18 @@ import type {
   WidgetContextInterface,
 } from './Wallets.types';
 import type { ProvidersOptions } from '../../utils/providers';
-import type { LegacyEventHandler as EventHandler } from '@rango-dev/wallets-core/legacy';
+import type { LegacyEventHandler } from '@rango-dev/wallets-core/dist/legacy/mod';
 import type { PropsWithChildren } from 'react';
 
-import {
-  legacyFormatAddressWithNetwork as formatAddressWithNetwork,
-  legacyReadAccountAddress as readAccountAddress,
-} from '@rango-dev/wallets-core/legacy';
-import { Events, Provider } from '@rango-dev/wallets-react';
-import { type Network } from '@rango-dev/wallets-shared';
-import { isEvmBlockchain } from 'rango-sdk';
+import { Provider } from '@rango-dev/wallets-react';
 import React, { createContext, useEffect, useMemo, useRef } from 'react';
 
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
-import {
-  prepareAccountsForWalletStore,
-  walletAndSupportedChainsNames,
-} from '../../utils/wallets';
+
+import { useUpdates } from './useUpdates';
+import { propagateEvents } from './Wallets.helpers';
 
 export const WidgetContext = createContext<WidgetContextInterface>({
   onConnectWallet: () => {
@@ -39,11 +32,8 @@ function Main(props: PropsWithChildren<PropTypes>) {
     updateSettings,
     fetch: fetchMeta,
     fetchStatus,
-    removeBalancesForWallet,
   } = useAppStore();
   const blockchains = useAppStore().blockchains();
-  const { newWalletConnected, disconnectWallet, connectedWallets } =
-    useAppStore();
   const config = useAppStore().config;
 
   const walletOptions: ProvidersOptions = {
@@ -57,6 +47,10 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const { providers } = useWalletProviders(config.wallets, walletOptions);
   const onConnectWalletHandler = useRef<OnWalletConnectionChange>();
   const onDisconnectWalletHandler = useRef<OnWalletConnectionChange>();
+  const { handler: handleEvent } = useUpdates({
+    onConnectWalletHandler,
+    onDisconnectWalletHandler,
+  });
 
   useEffect(() => {
     void fetchMeta().catch(console.log);
@@ -73,117 +67,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
     }
   }, [props.config, fetchStatus]);
 
-  const evmBasedChainNames = blockchains
-    .filter(isEvmBlockchain)
-    .map((chain) => chain.name);
-
-  const onUpdateState: EventHandler = (type, event, value, state, meta) => {
-    if (event === Events.ACCOUNTS) {
-      const supportedChainNames: Network[] | null =
-        walletAndSupportedChainsNames(meta.supportedBlockchains);
-
-      /*
-       * When a wallet is connecting to an evm account, we will consider it as the account exists on other evm-compatible blockchains
-       * To get their balances.
-       *
-       * The logic here is for handling switching account functionality in wallets. when a wallet is switching to another account
-       * we need to clean the balances for old accounts.
-       */
-      const evmAccounts: string[] = [];
-      const nonEvmAccounts: string[] = [];
-
-      value?.forEach((account: string) => {
-        const { network } = readAccountAddress(account);
-        if (evmBasedChainNames.includes(network)) {
-          evmAccounts.push(account);
-        } else {
-          nonEvmAccounts.push(account);
-        }
-      });
-
-      const previousAccounts = connectedWallets
-        .filter((wallet) => wallet.walletType === type)
-        .map((wallet) =>
-          formatAddressWithNetwork(wallet.address, wallet.chain)
-        );
-
-      if (previousAccounts.length > 0) {
-        if (evmAccounts.length > 0) {
-          // We use same logic for removing as we use for adding.
-          const data = prepareAccountsForWalletStore(
-            type,
-            evmAccounts,
-            evmBasedChainNames,
-            supportedChainNames,
-            meta.isContractWallet
-          );
-
-          removeBalancesForWallet(type, {
-            chains: data.map((account) => account.chain),
-          });
-        }
-
-        if (nonEvmAccounts.length > 0) {
-          removeBalancesForWallet(type, {
-            chains: nonEvmAccounts.map((account) => {
-              const { network } = readAccountAddress(account);
-              return network;
-            }),
-          });
-        }
-      }
-
-      // After cleaning up balances, it's time to add new accounts.
-      if (value) {
-        const data = prepareAccountsForWalletStore(
-          type,
-          value,
-          evmBasedChainNames,
-          supportedChainNames,
-          meta.isContractWallet
-        );
-        if (data.length) {
-          void newWalletConnected(data);
-        }
-      } else {
-        disconnectWallet(type);
-        if (!!onDisconnectWalletHandler.current) {
-          onDisconnectWalletHandler.current(type);
-        } else {
-          console.warn(
-            `onDisconnectWallet handler hasn't been set. Are you sure?`
-          );
-        }
-      }
-    }
-    if (
-      (event === Events.ACCOUNTS && state.connected) ||
-      // Hub works differently, and this check should be enough.
-      (event === Events.ACCOUNTS && meta.isHub)
-    ) {
-      const key = `${type}-${state.network}-${value}`;
-
-      if (!!onConnectWalletHandler.current) {
-        onConnectWalletHandler.current(key);
-      } else {
-        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
-      }
-    }
-
-    if (event === Events.NETWORK && state.network) {
-      const key = `${type}-${state.network}`;
-      if (!!onConnectWalletHandler.current) {
-        onConnectWalletHandler.current(key);
-      } else {
-        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
-      }
-    }
-
-    // propagate updates for Dapps using external wallets
-    if (props.onUpdateState) {
-      props.onUpdateState(type, event, value, state, meta);
-    }
-  };
   const isActiveTab = useUiStore.use.isActiveTab();
 
   const handlers = useMemo(
@@ -203,7 +86,20 @@ function Main(props: PropsWithChildren<PropTypes>) {
       <Provider
         allBlockChains={blockchains}
         providers={providers}
-        onUpdateState={onUpdateState}
+        onUpdateState={(type, event, value, state, info) => {
+          const eventParams: Parameters<LegacyEventHandler> = [
+            type,
+            event,
+            value,
+            state,
+            info,
+          ];
+          handleEvent(...eventParams);
+
+          if (props.onUpdateState) {
+            propagateEvents(props.onUpdateState, eventParams);
+          }
+        }}
         autoConnect={!!isActiveTab}
         configs={{
           wallets: config.wallets,

package/src/containers/Wallets/Wallets.types.ts

@@ -1,5 +1,8 @@
 import type { WidgetConfig } from '../../types';
-import type { LegacyEventHandler as EventHandler } from '@rango-dev/wallets-core/legacy';
+import type {
+  LegacyEventHandler as EventHandler,
+  LegacyEvents,
+} from '@rango-dev/wallets-core/legacy';
 
 export type OnWalletConnectionChange = (key: string) => void;
 export interface WidgetContextInterface {
@@ -17,7 +20,18 @@ export interface WidgetContextInterface {
   onDisconnectWallet(handler: OnWalletConnectionChange): void;
 }
 
+type EventHandlerParams = Parameters<EventHandler>;
+type EventParam = Exclude<LegacyEvents, LegacyEvents.PROVIDER_DISCONNECTED>;
+
+export type OnUpdateState = (
+  type: EventHandlerParams[0],
+  event: EventParam,
+  value: EventHandlerParams[2],
+  coreState: EventHandlerParams[3],
+  info: EventHandlerParams[4]
+) => void;
+
 export interface PropTypes {
-  onUpdateState?: EventHandler;
+  onUpdateState?: OnUpdateState;
   config: WidgetConfig;
 }

package/src/containers/Wallets/useUpdates.ts

@@ -0,0 +1,240 @@
+import type { OnWalletConnectionChange } from './Wallets.types';
+import type {
+  LegacyEventHandler as EventHandler,
+  LegacyEventHandler,
+} from '@rango-dev/wallets-core/legacy';
+
+import {
+  legacyFormatAddressWithNetwork as formatAddressWithNetwork,
+  legacyReadAccountAddress as readAccountAddress,
+} from '@rango-dev/wallets-core/legacy';
+import { Events } from '@rango-dev/wallets-react';
+import { type Network } from '@rango-dev/wallets-shared';
+import { isEvmBlockchain } from 'rango-sdk';
+
+import { useAppStore } from '../../store/AppStore';
+import {
+  prepareAccountsForWalletStore,
+  walletAndSupportedChainsNames,
+} from '../../utils/wallets';
+
+interface UseUpdatesParams {
+  onConnectWalletHandler: React.MutableRefObject<
+    OnWalletConnectionChange | undefined
+  >;
+  onDisconnectWalletHandler: React.MutableRefObject<
+    OnWalletConnectionChange | undefined
+  >;
+}
+interface UseUpdates {
+  handler: EventHandler;
+}
+
+export function useUpdates(params: UseUpdatesParams): UseUpdates {
+  const {
+    newWalletConnected,
+    disconnectWallet,
+    disconnectNamespaces,
+    connectedWallets,
+    removeBalancesForWallet,
+    blockchains,
+  } = useAppStore();
+
+  const { onConnectWalletHandler, onDisconnectWalletHandler } = params;
+  const evmBasedChainNames = blockchains()
+    .filter(isEvmBlockchain)
+    .map((chain) => chain.name);
+
+  const onAccountsEvent = (
+    event: Parameters<LegacyEventHandler>,
+    params: {
+      supportedChainNames: Network[] | null;
+    }
+  ) => {
+    const [type, , value, , info] = event;
+
+    const data = prepareAccountsForWalletStore(
+      type,
+      value,
+      evmBasedChainNames,
+      params.supportedChainNames,
+      info.isContractWallet
+    );
+
+    if (data.length) {
+      void newWalletConnected(data, info.namespace);
+    }
+  };
+
+  const handleUpdatesForHub: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    info
+  ) => {
+    if (event === Events.ACCOUNTS) {
+      const supportedChainNames: Network[] | null =
+        walletAndSupportedChainsNames(info.supportedBlockchains);
+
+      // After cleaning up balances, it's time to add new accounts.
+      if (value) {
+        onAccountsEvent([type, event, value, state, info], {
+          supportedChainNames,
+        });
+      }
+    }
+
+    if (event === Events.CONNECTED) {
+      const key = `${type}-${state.network}-${value}`;
+
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(key);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
+      }
+    }
+
+    if (event === Events.PROVIDER_DISCONNECTED) {
+      disconnectWallet(type);
+      if (!!onDisconnectWalletHandler.current) {
+        onDisconnectWalletHandler.current(type);
+      } else {
+        console.warn(
+          `onDisconnectWallet handler hasn't been set. Are you sure?`
+        );
+      }
+    }
+
+    if (event === Events.NAMESPACE_DISCONNECTED) {
+      disconnectNamespaces(type, value);
+    }
+  };
+
+  const handleUpdatesForLegacy: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    info
+  ) => {
+    if (event === Events.ACCOUNTS) {
+      const supportedChainNames: Network[] | null =
+        walletAndSupportedChainsNames(info.supportedBlockchains);
+
+      /*
+       * When a wallet is connecting to an evm account, we will consider it as the account exists on other evm-compatible blockchains
+       * To get their balances.
+       *
+       * The logic here is for handling switching account functionality in wallets. when a wallet is switching to another account
+       * we need to clean the balances for old accounts.
+       *
+       * Note: hub will do the cleanup on namespace diconnected event.
+       */
+      const evmAccounts: string[] = [];
+      const nonEvmAccounts: string[] = [];
+
+      value?.forEach((account: string) => {
+        const { network } = readAccountAddress(account);
+        if (evmBasedChainNames.includes(network)) {
+          evmAccounts.push(account);
+        } else {
+          nonEvmAccounts.push(account);
+        }
+      });
+
+      const previousAccounts = connectedWallets
+        .filter((wallet) => wallet.walletType === type)
+        .map((wallet) =>
+          formatAddressWithNetwork(wallet.address, wallet.chain)
+        );
+
+      if (previousAccounts.length > 0) {
+        if (evmAccounts.length > 0) {
+          // We use same logic for removing as we use for adding.
+          const data = prepareAccountsForWalletStore(
+            type,
+            evmAccounts,
+            evmBasedChainNames,
+            supportedChainNames,
+            info.isContractWallet
+          );
+
+          removeBalancesForWallet(type, {
+            chains: data.map((account) => account.chain),
+          });
+        }
+
+        if (nonEvmAccounts.length > 0) {
+          removeBalancesForWallet(type, {
+            chains: nonEvmAccounts.map((account) => {
+              const { network } = readAccountAddress(account);
+              return network;
+            }),
+          });
+        }
+      }
+
+      // After cleaning up balances, it's time to add new accounts.
+      if (value) {
+        onAccountsEvent([type, event, value, state, info], {
+          supportedChainNames,
+        });
+      } else {
+        disconnectWallet(type);
+        if (!!onDisconnectWalletHandler.current) {
+          onDisconnectWalletHandler.current(type);
+        } else {
+          console.warn(
+            `onDisconnectWallet handler hasn't been set. Are you sure?`
+          );
+        }
+      }
+    }
+
+    /*
+     * TODO: not sure why we used `Events.Acccounts` for detecting if a provider gets connected or not, if we can use `CONNCECTED` for the legacy
+     * we can only rely Events.Connected and remove the legacy conidition
+     */
+    if (event === Events.ACCOUNTS && state.connected) {
+      const key = `${type}-${state.network}-${value}`;
+
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(key);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
+      }
+    }
+  };
+
+  const handleUpdatesForBoth: EventHandler = (
+    type,
+    event,
+    _value,
+    state,
+    _info
+  ) => {
+    if (event === Events.NETWORK && state.network) {
+      const key = `${type}-${state.network}`;
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(key);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
+      }
+    }
+  };
+
+  const handler: EventHandler = (type, event, value, state, info) => {
+    if (info.isHub) {
+      handleUpdatesForHub(type, event, value, state, info);
+    } else {
+      handleUpdatesForLegacy(type, event, value, state, info);
+    }
+
+    handleUpdatesForBoth(type, event, value, state, info);
+  };
+
+  return {
+    handler,
+  };
+}

package/src/hooks/useSubscribeToWidgetEvents/useSubscribeToWidgetEvents.ts

@@ -27,20 +27,30 @@ export function useSubscribeToWidgetEvents() {
         event.type === StepEventType.SUCCEEDED;
 
       if (shouldRefetchBalance) {
+        const fromWallet = route.wallets[step?.fromBlockchain];
         const fromAccount = connectedWallets.find(
-          (account) => account.chain === step?.fromBlockchain
+          (connectedWallet) =>
+            connectedWallet.address?.toLocaleLowerCase() ===
+              fromWallet.address?.toLocaleLowerCase() &&
+            connectedWallet.walletType === fromWallet.walletType &&
+            connectedWallet.chain === step?.fromBlockchain
         );
-        const toAccount =
-          step?.fromBlockchain !== step?.toBlockchain &&
-          connectedWallets.find(
-            (wallet) => wallet.chain === step?.toBlockchain
-          );
-
         if (fromAccount) {
           void fetchBalances([fromAccount]);
         }
-        if (toAccount) {
-          void fetchBalances([toAccount]);
+
+        if (step?.fromBlockchain !== step?.toBlockchain) {
+          const toWallet = route.wallets[step?.toBlockchain];
+          const toAccount = connectedWallets.find(
+            (connectedWallet) =>
+              connectedWallet.address?.toLocaleLowerCase() ===
+                toWallet.address?.toLocaleLowerCase() &&
+              connectedWallet.walletType === toWallet.walletType &&
+              connectedWallet.chain === step?.toBlockchain
+          );
+          if (toAccount) {
+            void fetchBalances([toAccount]);
+          }
         }
       }
 

package/src/store/middlewares/keepLastUpdated.ts

@@ -0,0 +1,19 @@
+import type { StateCreator } from 'zustand';
+
+/**
+ * you can wrap your slice in this middleware, it will update `lastUpdatedAt` for that slice when a zustand's `set` is calling
+ */
+export const keepLastUpdated: <Store, Slice extends { lastUpdatedAt: number }>(
+  config: StateCreator<Store, [], [], Slice>
+) => StateCreator<Store, [], [], Slice> = (slice) => (set, get, api) => {
+  const modifedSet: typeof set = (...params) => {
+    set((state) => {
+      return {
+        ...state,
+        lastUpdatedAt: +new Date(),
+      };
+    });
+    set(...params);
+  };
+  return slice(modifedSet, get, api);
+};