@rango-dev/widget-embedded 0.42.4-next.1 → 0.43.0

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -17,14 +17,8 @@ import {
   DerivationPath,
   Namespaces,
 } from '../WalletStatefulConnect';
-import { Detached } from '../WalletStatefulConnect/Detached';
 
-import {
-  isOnDerivationPath,
-  isOnDetached,
-  isOnNamespace,
-  isOnStatus,
-} from './helpers';
+import { isOnDerivationPath, isOnNamespace, isOnStatus } from './helpers';
 
 const KEEP_SUCCESS_MODAL_FOR = 3_000;
 const DELAY_SHOWING_MODAL_FOR = 300;
@@ -62,10 +56,6 @@ export function StatefulConnectModal(props: PropTypes) {
       .catch(catchErrorOnHandle);
   };
 
-  const handleDetachedConfirm = () => {
-    handleClosingModal();
-  };
-
   const handleDerivationPathConfirm = (derivationPath: string) => {
     if (!derivationPath) {
       throw new Error(
@@ -140,7 +130,6 @@ export function StatefulConnectModal(props: PropTypes) {
         .then((result) => {
           const resultIsNeedMoreStepsToConnect = [
             ResultStatus.Namespace,
-            ResultStatus.Detached,
             ResultStatus.DerivationPath,
           ].includes(result.status);
 
@@ -189,13 +178,6 @@ export function StatefulConnectModal(props: PropTypes) {
           value={getState().derivationPath}
         />
       )}
-      {isOnDetached(getState) && (
-        <Detached
-          onConfirm={handleDetachedConfirm}
-          value={getState().namespace}
-          selectedNamespaces={getState().selectedNamespaces}
-        />
-      )}
     </WatermarkedModal>
   );
 }

package/src/components/StatefulConnectModal/helpers.ts

@@ -21,9 +21,3 @@ export function isOnDerivationPath(
 } {
   return getState().status === 'derivationPath';
 }
-
-export function isOnDetached(
-  getState: () => State
-): getState is () => State & { namespace: NonNullable<State['namespace']> } {
-  return getState().status === 'detached';
-}

package/src/components/StatefulConnectModal/index.ts

@@ -1,2 +1,2 @@
 export { StatefulConnectModal } from './StatefulConnectModal';
-export { isOnNamespace, isOnDerivationPath, isOnDetached } from './helpers';
+export { isOnNamespace, isOnDerivationPath } from './helpers';

package/src/components/WalletStatefulConnect/NamespaceListItem.tsx

@@ -1,5 +1,6 @@
 import type { NamespaceItemPropTypes } from './Namespaces.types';
 
+import { i18n } from '@lingui/core';
 import { Checkbox, Radio, Typography } from '@rango-dev/ui';
 import React from 'react';
 
@@ -9,8 +10,8 @@ import { getBlockchainLogo } from './Namespaces.helpers';
 import {
   NamespaceItemContainer,
   NamespaceItemContent,
-  NamespaceItemInnerContent,
   NamespaceLogo,
+  NotSupportedNamespaceItemContent,
 } from './Namespaces.styles';
 import { SupportedChainsList } from './SupportedChainsList';
 
@@ -18,28 +19,46 @@ export function NamespaceListItem(props: NamespaceItemPropTypes) {
   const { onClick, type, namespace } = props;
   const blockchains = useAppStore().blockchains();
 
-  const showSupportedChains = namespace.chains.length > 1;
-  return (
-    <NamespaceItemContainer onClick={onClick} clickable>
-      <NamespaceItemContent>
+  if (namespace.unsupported) {
+    return (
+      <NamespaceItemContainer unsupported>
         <NamespaceLogo
           src={getBlockchainLogo(blockchains, namespace.id)}
           size={40}
+          disabled
         />
-        <NamespaceItemInnerContent showSupportedChains={showSupportedChains}>
+        <NotSupportedNamespaceItemContent>
           <Typography variant="label" size="large">
             {namespace.label}
           </Typography>
-          {showSupportedChains && (
-            <SupportedChainsList chains={namespace.chains} />
-          )}
-        </NamespaceItemInnerContent>
-        {type === 'radio' ? (
-          <Radio value={namespace.value} />
-        ) : (
-          <Checkbox checked={props.value} />
+          <Typography variant="body" size="xsmall">
+            {i18n.t('(Currently not supported)')}
+          </Typography>
+        </NotSupportedNamespaceItemContent>
+      </NamespaceItemContainer>
+    );
+  }
+
+  const showSupportedChains = namespace.chains.length > 1;
+  return (
+    <NamespaceItemContainer onClick={onClick}>
+      <NamespaceLogo
+        src={getBlockchainLogo(blockchains, namespace.id)}
+        size={40}
+      />
+      <NamespaceItemContent showSupportedChains={showSupportedChains}>
+        <Typography variant="label" size="large">
+          {namespace.label}
+        </Typography>
+        {showSupportedChains && (
+          <SupportedChainsList chains={namespace.chains} />
         )}
       </NamespaceItemContent>
+      {type === 'radio' ? (
+        <Radio value={namespace.value} />
+      ) : (
+        <Checkbox checked={props.value} />
+      )}
     </NamespaceItemContainer>
   );
 }

package/src/components/WalletStatefulConnect/Namespaces.styles.ts

@@ -1,4 +1,4 @@
-import { Button, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
+import { Button, Image, styled } from '@rango-dev/ui';
 
 export const NamespaceList = styled('ul', {
   padding: 0,
@@ -10,21 +10,12 @@ export const NamespaceList = styled('ul', {
 export const NamespaceItemContainer = styled('li', {
   backgroundColor: '$neutral200',
   padding: '$16',
+  display: 'flex',
+  gap: '$8',
+  cursor: 'pointer',
   borderRadius: '$sm',
+  alignItems: 'center',
   variants: {
-    clickable: {
-      true: {
-        cursor: 'pointer',
-      },
-    },
-    hasError: {
-      true: {
-        background: '$error100 ',
-        [`.${darkTheme} &`]: {
-          backgroundColor: '$error700',
-        },
-      },
-    },
     unsupported: {
       true: {
         cursor: 'not-allowed',
@@ -36,16 +27,9 @@ export const NamespaceItemContainer = styled('li', {
 });
 
 export const NamespaceItemContent = styled('div', {
-  display: 'flex',
-  gap: '$8',
-  alignItems: 'center',
-});
-
-export const NamespaceItemInnerContent = styled('div', {
   flex: '1',
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'space-between',
   height: '$40',
   variants: {
     showSupportedChains: {
@@ -59,7 +43,7 @@ export const NamespaceItemInnerContent = styled('div', {
   },
 });
 
-export const UnsupportedNamespaceItemInnerContent = styled('div', {
+export const NotSupportedNamespaceItemContent = styled('div', {
   flex: '1',
   display: 'flex',
   alignItems: 'center',
@@ -80,25 +64,3 @@ export const NamespaceLogo = styled(Image, {
 export const StyledButton = styled(Button, {
   minHeight: '$40',
 });
-
-export const NamespaceAccountAddress = styled(Typography, {
-  maxWidth: '100px',
-});
-
-export const NamespaceItemError = styled('div', {
-  paddingLeft: '48px',
-});
-
-export const NamespaceItemErrorDropdownToggle = styled('div', {
-  display: 'flex',
-  gap: '2px',
-  cursor: 'pointer',
-  alignItems: 'center',
-  width: 'fit-content',
-});
-
-export const NamespaceDetachedItemInfo = styled('div', {
-  display: 'flex',
-  gap: '6px',
-  alignItems: 'center',
-});

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -14,7 +14,6 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { NamespaceListItem } from './NamespaceListItem';
 import { NamespaceList, StyledButton } from './Namespaces.styles';
-import { NamespaceUnsupportedItem } from './NamespaceUnsupportedItem';
 
 export function Namespaces(props: PropTypes) {
   const { targetWallet } = props.value;
@@ -98,7 +97,7 @@ export function Namespaces(props: PropTypes) {
           wallet: targetWallet.title,
         })}
         description={i18n.t(
-          'This wallet supports multiple chains. Choose which chains you’d like to connect.'
+          "This wallet supports multiple chains. Choose which chains you'd like to connect to."
         )}
         icon={<Image src={providerImage} size={45} />}
       />
@@ -135,16 +134,12 @@ export function Namespaces(props: PropTypes) {
             {targetWallet.needsNamespace?.data.map(
               (namespace, index, array) => (
                 <React.Fragment key={namespace.id}>
-                  {namespace.unsupported ? (
-                    <NamespaceUnsupportedItem namespace={namespace} />
-                  ) : (
-                    <NamespaceListItem
-                      value={selectedNamespaces.includes(namespace.value)}
-                      namespace={namespace}
-                      type={singleNamespace ? 'radio' : 'checkbox'}
-                      onClick={() => onSelect(namespace.value)}
-                    />
-                  )}
+                  <NamespaceListItem
+                    value={selectedNamespaces.includes(namespace.value)}
+                    namespace={namespace}
+                    type={singleNamespace ? 'radio' : 'checkbox'}
+                    onClick={() => onSelect(namespace.value)}
+                  />
                   {index !== array.length - 1 && <Divider size={10} />}
                 </React.Fragment>
               )

package/src/components/WalletStatefulConnect/Namespaces.types.tsx

@@ -1,6 +1,8 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
-import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type {
+  Chain,
+  Namespace,
+} from '@rango-dev/wallets-core/namespaces/common';
 
 export interface PropTypes {
   onConfirm: (namespaces: Namespace[]) => void;
@@ -10,7 +12,13 @@ export interface PropTypes {
 interface NamespaceItemSharedPropTypes {
   onClick: () => void;
   type: 'radio' | 'checkbox';
-  namespace: LegacyNamespaceMeta;
+  namespace: {
+    label: string;
+    id: string;
+    value: Namespace;
+    chains: Chain[];
+    unsupported?: boolean;
+  };
 }
 
 interface RadioNamespaceItemPropTypes extends NamespaceItemSharedPropTypes {
@@ -25,13 +33,3 @@ interface CheckboxNamespaceItemPropTypes extends NamespaceItemSharedPropTypes {
 export type NamespaceItemPropTypes =
   | RadioNamespaceItemPropTypes
   | CheckboxNamespaceItemPropTypes;
-
-export type NamespaceDetachedItemPropTypes = {
-  walletType: string;
-  initialConnect?: boolean;
-  namespace: LegacyNamespaceMeta;
-};
-
-export type NamespaceUnsupportedItemPropTypes = {
-  namespace: LegacyNamespaceMeta;
-};

package/src/components/WalletStatefulConnect/index.ts

@@ -1,5 +1,4 @@
 export { Namespaces } from './Namespaces';
-export { Detached } from './Detached';
 export { DerivationPath } from './DerivationPath';
 export { ConnectStatus } from './ConnectStatus';
 export { ExperimentalChain } from './ExperimentalChain';

package/src/constants/errors.ts

@@ -52,11 +52,12 @@ export const errorMessages = () => {
 };
 
 export function getQuoteErrorMessage(error: QuoteError) {
-  if (error.type === QuoteErrorType.NO_RESULT) {
-    return error.diagnosisMessage ?? errorMessages().noResultError.title;
-  } else if (error.type === QuoteErrorType.REQUEST_FAILED) {
-    return error.diagnosisMessage ?? errorMessages().genericServerError;
+  switch (error.type) {
+    case QuoteErrorType.NO_RESULT:
+      return error.diagnosisMessage ?? errorMessages().noResultError.title;
+    case QuoteErrorType.REQUEST_FAILED:
+      return errorMessages().genericServerError;
+    default:
+      return '';
   }
-
-  return '';
 }

package/src/containers/Inputs/Inputs.tsx

@@ -34,7 +34,6 @@ export function Inputs(props: PropTypes) {
     toToken,
     toBlockchain,
     setInputAmount,
-    sanitizeInputAmount,
     inputAmount,
     inputUsdValue,
     outputAmount,
@@ -80,7 +79,6 @@ export function Inputs(props: PropTypes) {
           label={i18n.t('From')}
           mode="From"
           onInputChange={setInputAmount}
-          onInputBlur={sanitizeInputAmount}
           balance={fromTokenFormattedBalance}
           chain={{
             displayName: fromBlockchain?.displayName || '',

package/src/containers/Wallets/Wallets.tsx

@@ -1,6 +1,5 @@
 import type {
-  OnWalletConnectHandler,
-  OnWalletDisconnectHandler,
+  OnWalletConnectionChange,
   PropTypes,
   WidgetContextInterface,
 } from './Wallets.types';
@@ -46,8 +45,8 @@ function Main(props: PropsWithChildren<PropTypes>) {
         ?.walletConnectListedDesktopWalletLink,
   };
   const { providers } = useWalletProviders(config.wallets, walletOptions);
-  const onConnectWalletHandler = useRef<OnWalletConnectHandler>();
-  const onDisconnectWalletHandler = useRef<OnWalletDisconnectHandler>();
+  const onConnectWalletHandler = useRef<OnWalletConnectionChange>();
+  const onDisconnectWalletHandler = useRef<OnWalletConnectionChange>();
   const { handler: handleEvent } = useUpdates({
     onConnectWalletHandler,
     onDisconnectWalletHandler,
@@ -72,10 +71,10 @@ function Main(props: PropsWithChildren<PropTypes>) {
 
   const handlers = useMemo(
     () => ({
-      onConnectWallet: (handler: OnWalletConnectHandler) => {
+      onConnectWallet: (handler: OnWalletConnectionChange) => {
         onConnectWalletHandler.current = handler;
       },
-      onDisconnectWallet: (handler: OnWalletDisconnectHandler) => {
+      onDisconnectWallet: (handler: OnWalletConnectionChange) => {
         onDisconnectWalletHandler.current = handler;
       },
     }),

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

@@ -1,25 +1,23 @@
 import type { WidgetConfig } from '../../types';
-import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
 import type {
   LegacyEventHandler as EventHandler,
   LegacyEvents,
 } from '@rango-dev/wallets-core/legacy';
 
-export type OnWalletConnectHandler = (wallet: LastConnectedWallet) => void;
-export type OnWalletDisconnectHandler = (walletType: string) => void;
+export type OnWalletConnectionChange = (key: string) => void;
 export interface WidgetContextInterface {
   /**
    * A wallet connection handler, utilized within the wallet provider,
    * is linked to the useBootstrap hook for synchronizing the state of the last connected wallet.
    * It's important not to override this handler in other locations.
    */
-  onConnectWallet(handler: OnWalletConnectHandler): void;
+  onConnectWallet(handler: OnWalletConnectionChange): void;
   /**
    * A wallet disconnection handler, utilized within the wallet provider,
    * is linked to the useBootstrap hook for synchronizing the state of the last disconnected wallet.
    * It's important not to override this handler in other locations.
    */
-  onDisconnectWallet(handler: OnWalletDisconnectHandler): void;
+  onDisconnectWallet(handler: OnWalletConnectionChange): void;
 }
 
 type EventHandlerParams = Parameters<EventHandler>;

package/src/containers/Wallets/useUpdates.ts

@@ -1,8 +1,4 @@
-import type {
-  OnWalletConnectHandler,
-  OnWalletDisconnectHandler,
-} from './Wallets.types';
-import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
+import type { OnWalletConnectionChange } from './Wallets.types';
 import type {
   LegacyEventHandler as EventHandler,
   LegacyEventHandler,
@@ -24,10 +20,10 @@ import {
 
 interface UseUpdatesParams {
   onConnectWalletHandler: React.MutableRefObject<
-    OnWalletConnectHandler | undefined
+    OnWalletConnectionChange | undefined
   >;
   onDisconnectWalletHandler: React.MutableRefObject<
-    OnWalletDisconnectHandler | undefined
+    OnWalletConnectionChange | undefined
   >;
 }
 interface UseUpdates {
@@ -55,18 +51,7 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
       supportedChainNames: Network[] | null;
     }
   ) => {
-    const [type, , value, state, info] = event;
-
-    const walletFromEvent: LastConnectedWallet = {
-      walletType: type,
-      network: state.network ?? undefined,
-      accounts: value,
-    };
-    if (!!onConnectWalletHandler.current) {
-      onConnectWalletHandler.current(walletFromEvent);
-    } else {
-      console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
-    }
+    const [type, , value, , info] = event;
 
     const data = prepareAccountsForWalletStore(
       type,
@@ -100,6 +85,16 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
       }
     }
 
+    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) {
@@ -196,36 +191,33 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
         }
       }
     }
+
+    /*
+     * 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,
+    _value,
     state,
     _info
   ) => {
-    if (event === Events.CONNECTED && value) {
-      const walletFromEvent: LastConnectedWallet = {
-        walletType: type,
-        network: state.network ?? undefined,
-        accounts: state.accounts ?? undefined,
-      };
-      if (!!onConnectWalletHandler.current) {
-        onConnectWalletHandler.current(walletFromEvent);
-      } else {
-        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
-      }
-    }
-
-    if (event === Events.NETWORK && value) {
-      const walletFromEvent: LastConnectedWallet = {
-        walletType: type,
-        network: value,
-        accounts: state.accounts ?? undefined,
-      };
+    if (event === Events.NETWORK && state.network) {
+      const key = `${type}-${state.network}`;
       if (!!onConnectWalletHandler.current) {
-        onConnectWalletHandler.current(walletFromEvent);
+        onConnectWalletHandler.current(key);
       } else {
         console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
       }

package/src/hooks/useBootstrap/useBootstrap.ts

@@ -1,7 +1,7 @@
 import type { WalletType } from '../..';
-import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
 
 import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
+import { splitWalletNetwork } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
 import { useContext, useEffect, useState } from 'react';
 
@@ -24,8 +24,8 @@ export function useBootstrap() {
   useSyncNotifications();
   const blockchains = useAppStore().blockchains();
   const { canSwitchNetworkTo } = useWallets();
-  const [lastConnectedWallet, setLastConnectedWallet] =
-    useState<LastConnectedWallet | null>(null);
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
   const widgetContext = useContext(WidgetContext);
 
@@ -38,7 +38,7 @@ export function useBootstrap() {
 
   // At the moment, we only detect the disconnection of EVM wallets.
   useQueueManager({
-    lastConnectedWallet,
+    lastConnectedWallet: lastConnectedWalletWithNetwork,
     clearDisconnectedWallet: () => {
       setDisconnectedWallet(undefined);
     },
@@ -63,37 +63,14 @@ export function useBootstrap() {
      * it the future we should add a safer soloution like considering array of handlers .
      * https://github.com/rango-exchange/rango-client/pull/630/files#r1518846728
      */
-    widgetContext.onConnectWallet((walletFromEvent) => {
-      /*
-       * If no wallet was previously connected or the wallet type has changed,
-       * replace the last connected wallet with the new one from the event.
-       * Otherwise, merge updated `network` and `accounts` information from the new wallet
-       * into the existing last connected wallet without replacing the entire object.
-       */
-      setLastConnectedWallet((lastConnectedWallet) => {
-        if (
-          !lastConnectedWallet ||
-          lastConnectedWallet.walletType !== walletFromEvent.walletType
-        ) {
-          return walletFromEvent;
-        }
-        const lastConnectedWalletClone = { ...lastConnectedWallet };
-        if (walletFromEvent.network) {
-          lastConnectedWalletClone.network = walletFromEvent.network;
-        }
-        if (walletFromEvent.accounts) {
-          lastConnectedWalletClone.accounts = walletFromEvent.accounts;
-        }
-        return lastConnectedWalletClone;
-      });
-    });
+    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
     widgetContext.onDisconnectWallet((walletType) => {
       setDisconnectedWallet(walletType);
-      setLastConnectedWallet((lastConnectedWallet) =>
-        walletType === lastConnectedWallet?.walletType
-          ? null
-          : lastConnectedWallet
-      );
+      if (
+        walletType === splitWalletNetwork(lastConnectedWalletWithNetwork)?.[0]
+      ) {
+        setLastConnectedWalletWithNetwork('');
+      }
     });
 
     void fetchApiConfig().catch(console.log);

package/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts

@@ -158,7 +158,6 @@ export function handleQuoteErrors(error: any): ConfirmSwapFetchResult {
     swap: null,
     error: {
       type: QuoteErrorType.REQUEST_FAILED,
-      diagnosisMessage: error.message,
     },
     warnings: null,
   };

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -72,7 +72,7 @@ export function useConfirmSwap(): ConfirmSwap {
         const { result } = response;
 
         if (!result) {
-          throw new Error(response.error ?? 'Error fetching updated quote');
+          throw new Error('Error fetching updated route');
         }
 
         throwErrorIfResponseIsNotValid({

package/src/hooks/useStatefulConnect/useStatefulConnect.state.ts

@@ -3,20 +3,17 @@ import type {
   NeedsDerivationPathState,
   NeedsNamespacesState,
 } from './useStatefulConnect.types';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 export interface State {
-  status: 'init' | 'namespace' | 'derivationPath' | 'detached';
+  status: 'init' | 'namespace' | 'derivationPath';
   namespace: NeedsNamespacesState | null;
   derivationPath: NeedsDerivationPathState | null;
-  selectedNamespaces: Namespace[] | null;
 }
 
 export const initState: State = {
   status: 'init',
   namespace: null,
   derivationPath: null,
-  selectedNamespaces: null,
 };
 
 export function reducer(state: State, action: Actions): State {
@@ -34,13 +31,6 @@ export function reducer(state: State, action: Actions): State {
         status: 'derivationPath',
         derivationPath: action.payload,
       };
-    case 'detached':
-      return {
-        ...state,
-        status: 'detached',
-        namespace: { targetWallet: action.payload.targetWallet },
-        selectedNamespaces: action.payload.selectedNamespaces,
-      };
     case 'reset':
       return initState;
     case 'resetDerivation':