@rango-dev/widget-embedded 0.43.0 → 0.43.1-next.0

package/src/components/WalletStatefulConnect/NamespaceListItem.tsx

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

package/src/components/WalletStatefulConnect/NamespaceUnsupportedItem.tsx

@@ -0,0 +1,42 @@
+import type { NamespaceUnsupportedItemPropTypes } from './Namespaces.types';
+
+import { i18n } from '@lingui/core';
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+
+import { getBlockchainLogo } from './Namespaces.helpers';
+import {
+  NamespaceItemContainer,
+  NamespaceItemContent,
+  NamespaceLogo,
+  UnsupportedNamespaceItemInnerContent,
+} from './Namespaces.styles';
+
+export function NamespaceUnsupportedItem(
+  props: NamespaceUnsupportedItemPropTypes
+) {
+  const { namespace } = props;
+  const blockchains = useAppStore().blockchains();
+
+  return (
+    <NamespaceItemContainer unsupported>
+      <NamespaceItemContent>
+        <NamespaceLogo
+          src={getBlockchainLogo(blockchains, namespace.id)}
+          size={40}
+          disabled
+        />
+        <UnsupportedNamespaceItemInnerContent>
+          <Typography variant="label" size="large">
+            {namespace.label}
+          </Typography>
+          <Typography variant="body" size="xsmall">
+            {i18n.t('(Currently not supported)')}
+          </Typography>
+        </UnsupportedNamespaceItemInnerContent>
+      </NamespaceItemContent>
+    </NamespaceItemContainer>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { Button, Image, styled } from '@rango-dev/ui';
+import { Button, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
 
 export const NamespaceList = styled('ul', {
   padding: 0,
@@ -10,12 +10,21 @@ 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',
@@ -27,9 +36,16 @@ 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: {
@@ -43,7 +59,7 @@ export const NamespaceItemContent = styled('div', {
   },
 });
 
-export const NotSupportedNamespaceItemContent = styled('div', {
+export const UnsupportedNamespaceItemInnerContent = styled('div', {
   flex: '1',
   display: 'flex',
   alignItems: 'center',
@@ -64,3 +80,25 @@ 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,6 +14,7 @@ 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;
@@ -97,7 +98,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 to."
+          'This wallet supports multiple chains. Choose which chains you’d like to connect.'
         )}
         icon={<Image src={providerImage} size={45} />}
       />
@@ -134,12 +135,16 @@ export function Namespaces(props: PropTypes) {
             {targetWallet.needsNamespace?.data.map(
               (namespace, index, array) => (
                 <React.Fragment key={namespace.id}>
-                  <NamespaceListItem
-                    value={selectedNamespaces.includes(namespace.value)}
-                    namespace={namespace}
-                    type={singleNamespace ? 'radio' : 'checkbox'}
-                    onClick={() => onSelect(namespace.value)}
-                  />
+                  {namespace.unsupported ? (
+                    <NamespaceUnsupportedItem namespace={namespace} />
+                  ) : (
+                    <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,8 +1,6 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
-import type {
-  Chain,
-  Namespace,
-} from '@rango-dev/wallets-core/namespaces/common';
+import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 export interface PropTypes {
   onConfirm: (namespaces: Namespace[]) => void;
@@ -12,13 +10,7 @@ export interface PropTypes {
 interface NamespaceItemSharedPropTypes {
   onClick: () => void;
   type: 'radio' | 'checkbox';
-  namespace: {
-    label: string;
-    id: string;
-    value: Namespace;
-    chains: Chain[];
-    unsupported?: boolean;
-  };
+  namespace: LegacyNamespaceMeta;
 }
 
 interface RadioNamespaceItemPropTypes extends NamespaceItemSharedPropTypes {
@@ -33,3 +25,13 @@ 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,4 +1,5 @@
 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,12 +52,11 @@ export const errorMessages = () => {
 };
 
 export function getQuoteErrorMessage(error: QuoteError) {
-  switch (error.type) {
-    case QuoteErrorType.NO_RESULT:
-      return error.diagnosisMessage ?? errorMessages().noResultError.title;
-    case QuoteErrorType.REQUEST_FAILED:
-      return errorMessages().genericServerError;
-    default:
-      return '';
+  if (error.type === QuoteErrorType.NO_RESULT) {
+    return error.diagnosisMessage ?? errorMessages().noResultError.title;
+  } else if (error.type === QuoteErrorType.REQUEST_FAILED) {
+    return error.diagnosisMessage ?? errorMessages().genericServerError;
   }
+
+  return '';
 }

package/src/containers/Inputs/Inputs.tsx

@@ -34,6 +34,7 @@ export function Inputs(props: PropTypes) {
     toToken,
     toBlockchain,
     setInputAmount,
+    sanitizeInputAmount,
     inputAmount,
     inputUsdValue,
     outputAmount,
@@ -79,6 +80,7 @@ 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,5 +1,6 @@
 import type {
-  OnWalletConnectionChange,
+  OnWalletConnectHandler,
+  OnWalletDisconnectHandler,
   PropTypes,
   WidgetContextInterface,
 } from './Wallets.types';
@@ -45,8 +46,8 @@ function Main(props: PropsWithChildren<PropTypes>) {
         ?.walletConnectListedDesktopWalletLink,
   };
   const { providers } = useWalletProviders(config.wallets, walletOptions);
-  const onConnectWalletHandler = useRef<OnWalletConnectionChange>();
-  const onDisconnectWalletHandler = useRef<OnWalletConnectionChange>();
+  const onConnectWalletHandler = useRef<OnWalletConnectHandler>();
+  const onDisconnectWalletHandler = useRef<OnWalletDisconnectHandler>();
   const { handler: handleEvent } = useUpdates({
     onConnectWalletHandler,
     onDisconnectWalletHandler,
@@ -71,10 +72,10 @@ function Main(props: PropsWithChildren<PropTypes>) {
 
   const handlers = useMemo(
     () => ({
-      onConnectWallet: (handler: OnWalletConnectionChange) => {
+      onConnectWallet: (handler: OnWalletConnectHandler) => {
         onConnectWalletHandler.current = handler;
       },
-      onDisconnectWallet: (handler: OnWalletConnectionChange) => {
+      onDisconnectWallet: (handler: OnWalletDisconnectHandler) => {
         onDisconnectWalletHandler.current = handler;
       },
     }),

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

@@ -1,23 +1,25 @@
 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 OnWalletConnectionChange = (key: string) => void;
+export type OnWalletConnectHandler = (wallet: LastConnectedWallet) => void;
+export type OnWalletDisconnectHandler = (walletType: 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: OnWalletConnectionChange): void;
+  onConnectWallet(handler: OnWalletConnectHandler): 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: OnWalletConnectionChange): void;
+  onDisconnectWallet(handler: OnWalletDisconnectHandler): void;
 }
 
 type EventHandlerParams = Parameters<EventHandler>;

package/src/containers/Wallets/useUpdates.ts

@@ -1,4 +1,8 @@
-import type { OnWalletConnectionChange } from './Wallets.types';
+import type {
+  OnWalletConnectHandler,
+  OnWalletDisconnectHandler,
+} from './Wallets.types';
+import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
 import type {
   LegacyEventHandler as EventHandler,
   LegacyEventHandler,
@@ -20,10 +24,10 @@ import {
 
 interface UseUpdatesParams {
   onConnectWalletHandler: React.MutableRefObject<
-    OnWalletConnectionChange | undefined
+    OnWalletConnectHandler | undefined
   >;
   onDisconnectWalletHandler: React.MutableRefObject<
-    OnWalletConnectionChange | undefined
+    OnWalletDisconnectHandler | undefined
   >;
 }
 interface UseUpdates {
@@ -51,7 +55,18 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
       supportedChainNames: Network[] | null;
     }
   ) => {
-    const [type, , value, , info] = event;
+    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 data = prepareAccountsForWalletStore(
       type,
@@ -85,16 +100,6 @@ 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) {
@@ -191,33 +196,36 @@ 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.NETWORK && state.network) {
-      const key = `${type}-${state.network}`;
+    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 (!!onConnectWalletHandler.current) {
-        onConnectWalletHandler.current(key);
+        onConnectWalletHandler.current(walletFromEvent);
       } 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 [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
-    useState('');
+  const [lastConnectedWallet, setLastConnectedWallet] =
+    useState<LastConnectedWallet | null>(null);
   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: lastConnectedWalletWithNetwork,
+    lastConnectedWallet,
     clearDisconnectedWallet: () => {
       setDisconnectedWallet(undefined);
     },
@@ -63,14 +63,37 @@ 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(setLastConnectedWalletWithNetwork);
+    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.onDisconnectWallet((walletType) => {
       setDisconnectedWallet(walletType);
-      if (
-        walletType === splitWalletNetwork(lastConnectedWalletWithNetwork)?.[0]
-      ) {
-        setLastConnectedWalletWithNetwork('');
-      }
+      setLastConnectedWallet((lastConnectedWallet) =>
+        walletType === lastConnectedWallet?.walletType
+          ? null
+          : lastConnectedWallet
+      );
     });
 
     void fetchApiConfig().catch(console.log);

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

@@ -158,6 +158,7 @@ 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('Error fetching updated route');
+          throw new Error(response.error ?? 'Error fetching updated quote');
         }
 
         throwErrorIfResponseIsNotValid({

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

@@ -3,17 +3,20 @@ import type {
   NeedsDerivationPathState,
   NeedsNamespacesState,
 } from './useStatefulConnect.types';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 export interface State {
-  status: 'init' | 'namespace' | 'derivationPath';
+  status: 'init' | 'namespace' | 'derivationPath' | 'detached';
   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 {
@@ -31,6 +34,13 @@ 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':