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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.43.0",
+  "version": "0.43.1-next.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.8.0",
-    "@rango-dev/provider-all": "^0.46.0",
+    "@rango-dev/provider-all": "^0.46.1-next.0",
     "@rango-dev/queue-manager-core": "^0.29.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.45.1",
+    "@rango-dev/queue-manager-rango-preset": "^0.45.2-next.7",
     "@rango-dev/queue-manager-react": "^0.29.0",
-    "@rango-dev/signer-solana": "^0.39.0",
-    "@rango-dev/ui": "^0.46.1",
-    "@rango-dev/wallets-core": "^0.43.0",
-    "@rango-dev/wallets-react": "^0.30.1",
-    "@rango-dev/wallets-shared": "^0.44.1",
+    "@rango-dev/signer-solana": "^0.39.1-next.3",
+    "@rango-dev/ui": "^0.46.2-next.9",
+    "@rango-dev/wallets-core": "^0.43.1-next.6",
+    "@rango-dev/wallets-react": "^0.30.2-next.8",
+    "@rango-dev/wallets-shared": "^0.44.2-next.7",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -1,4 +1,4 @@
-import { css, darkTheme, IconButton, styled } from '@rango-dev/ui';
+import { css, IconButton, SelectableWalletButton, styled } from '@rango-dev/ui';
 
 export const Title = styled('div', {
   display: 'flex',
@@ -11,58 +11,15 @@ export const ListContainer = styled('div', {
   display: 'flex',
   justifyContent: 'space-evenly',
   alignItems: 'center',
-  gap: '$10',
+  columnGap: '$5',
+  rowGap: '$10',
   flexWrap: 'wrap',
   paddingTop: '$5',
   height: '100%',
 });
 
-export const WalletButton = styled('button', {
-  borderRadius: '$xm',
-  padding: '$10',
-  border: '0',
-  display: 'flex',
+export const ShowMoreWallets = styled(SelectableWalletButton, {
   justifyContent: 'center',
-  $$color: '$colors$neutral100',
-  [`.${darkTheme} &`]: {
-    $$color: '$colors$neutral300',
-  },
-  backgroundColor: '$$color',
-  alignItems: 'center',
-  cursor: 'pointer',
-  width: 110,
-  position: 'relative',
-
-  '&:hover': {
-    $$color: '$colors$secondary100',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral100',
-    },
-    backgroundColor: '$$color',
-  },
-
-  '&:focus-visible': {
-    $$color: '$colors$secondary100',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$info700',
-    },
-    backgroundColor: '$$color',
-    outline: 0,
-  },
-  variants: {
-    selected: {
-      true: {
-        outlineWidth: 1,
-        outlineColor: '$secondary',
-        outlineStyle: 'solid',
-      },
-    },
-  },
-});
-
-export const ShowMoreWallets = styled(WalletButton, {
-  alignSelf: 'stretch',
-  minHeight: '93px',
 });
 export const ShowMoreHeader = styled('div', {
   padding: '$20 $20 $15 $20',

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -6,6 +6,7 @@ import { i18n } from '@lingui/core';
 import { warn } from '@rango-dev/logging-core';
 import {
   Divider,
+  makeInfo,
   SelectableWallet,
   Typography,
   WalletState,
@@ -14,7 +15,6 @@ import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
 import { WIDGET_UI_ID } from '../../constants';
-import { useStatefulConnect } from '../../hooks/useStatefulConnect';
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
@@ -49,7 +49,6 @@ export function WalletList(props: PropTypes) {
   const [addingExperimentalChainStatus, setAddingExperimentalChainStatus] =
     useState<'in-progress' | 'completed' | 'rejected' | null>(null);
   const { suggestAndConnect } = useWallets();
-  const { handleDisconnect } = useStatefulConnect();
   const { list } = useWalletList({
     chain,
   });
@@ -119,9 +118,14 @@ export function WalletList(props: PropTypes) {
           walletType: wallet.type,
           chain,
         });
+        const isConnected = wallet.state === WalletState.CONNECTED;
         const conciseAddress = address
           ? getConciseAddress(address, ACCOUNT_ADDRESS_MAX_CHARACTERS)
           : '';
+        const isConnectedButDifferentThanTargetNamespace =
+          isConnected && wallet.isHub
+            ? !conciseAddress
+            : !!wallet.needsNamespace && !conciseAddress;
 
         const experimentalChain = isExperimentalChain(blockchains(), chain);
 
@@ -136,25 +140,10 @@ export function WalletList(props: PropTypes) {
           experimentalChainNotAdded &&
           wallet.state === WalletState.CONNECTED;
 
-        const connectedWalletDescription = couldAddExperimentalChain
-          ? i18n.t({
-              id: 'Add {chain} chain',
-              values: { chain },
-            })
-          : conciseAddress;
-
         const onSelectableWalletClick = async () => {
           const isDisconnected = wallet.state === WalletState.DISCONNECTED;
-          const isConnectedButDifferentThanTargetNamespace = wallet.isHub
-            ? !conciseAddress
-            : !!wallet.needsNamespace && !conciseAddress;
-
-          if (isDisconnected) {
-            setSelectedWalletToConnect(wallet);
-          } else if (isConnectedButDifferentThanTargetNamespace) {
-            // wallet is connected on a different namespace
-            await handleDisconnect(wallet.type);
 
+          if (isDisconnected || isConnectedButDifferentThanTargetNamespace) {
             setSelectedWalletToConnect(wallet);
           } else if (couldAddExperimentalChain) {
             setExperimentalChainWallet({
@@ -172,6 +161,32 @@ export function WalletList(props: PropTypes) {
           }
         };
 
+        const info = makeInfo(wallet.state);
+
+        const getWalletDescription = () => {
+          if (couldAddExperimentalChain) {
+            return i18n.t({
+              id: 'Add {chain} chain',
+              values: { chain },
+            });
+          } else if (isConnectedButDifferentThanTargetNamespace) {
+            return i18n.t('Chain not connected');
+          } else if (conciseAddress) {
+            return conciseAddress;
+          }
+          return info.description;
+        };
+
+        const getWalletDescriptionColor = () => {
+          if (wallet.state === WalletState.CONNECTED) {
+            if (isConnectedButDifferentThanTargetNamespace) {
+              return 'neutral600';
+            }
+            return 'neutral700';
+          }
+          return info.color;
+        };
+
         const blockchainDisplayName: string | undefined =
           experimentalChainWallet?.chain
             ? getBlockchainDisplayNameFor(
@@ -211,7 +226,8 @@ export function WalletList(props: PropTypes) {
             )}
             <SelectableWallet
               key={wallet.type}
-              description={connectedWalletDescription}
+              description={getWalletDescription()}
+              descriptionColor={getWalletDescriptionColor()}
               onClick={onSelectableWalletClick}
               selected={isSelected(wallet.type, chain)}
               disabled={!isActiveTab}

package/src/components/NoResult/NoResult.tsx

@@ -26,7 +26,7 @@ import {
 } from './NoResult.styles';
 
 export function NoResult(props: PropTypes) {
-  const { fetch, error, size = 'small' } = props;
+  const { fetch, error, size = 'small', skipAlerts } = props;
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
   const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
 
@@ -37,6 +37,9 @@ export function NoResult(props: PropTypes) {
     () => toggleAllLiquiditySources(swappers, true),
     fetch
   );
+  if (skipAlerts) {
+    info.alert = null;
+  }
 
   return (
     <Container>

package/src/components/NoResult/NoResult.types.ts

@@ -4,6 +4,7 @@ export interface PropTypes {
   fetch: () => void;
   error: NoResultError | QuoteRequestFailed | null;
   size?: 'small' | 'large';
+  skipAlerts?: boolean;
 }
 
 type AlertAction = {

package/src/components/Quote/Quote.tsx

@@ -263,7 +263,7 @@ export function Quote(props: QuoteProps) {
                             variant="body"
                             color="neutral900">
                             {i18n.t({
-                              id: 'Minimum required slippage: {minRequiredSlippage}',
+                              id: 'Minimum suggested slippage: {minRequiredSlippage}',
                               values: {
                                 ...(error?.type ===
                                   QuoteErrorType.INSUFFICIENT_SLIPPAGE && {

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts

@@ -10,10 +10,17 @@ import { errorMessages } from '../../constants/errors';
 import { QuoteErrorType, QuoteWarningType } from '../../types';
 import { getPriceImpactLevel } from '../../utils/quote';
 
-type AlertInfo = {
+export type ActionType =
+  | 'show-info'
+  | 'change-settings'
+  | 'change-slippage'
+  | null;
+
+export type AlertInfo = {
   alertType: 'error' | 'warning';
   title: string;
-  action: 'show-info' | 'change-settings' | null;
+  action: ActionType;
+  actionButtonTitle: string | null;
 };
 
 export function makeAlerts(
@@ -24,7 +31,9 @@ export function makeAlerts(
     alertType: 'warning',
     title: '',
     action: null,
+    actionButtonTitle: null,
   };
+
   if (error) {
     alertInfo.alertType = 'error';
     if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
@@ -38,7 +47,8 @@ export function makeAlerts(
           minRequiredSlippage: error.minRequiredSlippage,
         },
       });
-      alertInfo.action = 'change-settings';
+      alertInfo.action = 'change-slippage';
+      alertInfo.actionButtonTitle = i18n.t('Increase');
     }
 
     return alertInfo;
@@ -75,7 +85,9 @@ export function makeAlerts(
             minRequiredSlippage: warning.minRequiredSlippage,
           },
         });
-        alertInfo.action = 'change-settings';
+        alertInfo.action = 'change-slippage';
+        alertInfo.actionButtonTitle = i18n.t('Increase');
+
         break;
       }
       case QuoteWarningType.HIGH_SLIPPAGE: {
@@ -92,3 +104,16 @@ export function makeAlerts(
   }
   return null;
 }
+
+export function getRequiredSlippage(
+  warning: QuoteWarning | null,
+  error: BridgeLimitError | InsufficientSlippageError | null
+) {
+  if (error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
+    return Number(error.minRequiredSlippage);
+  }
+  if (warning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) {
+    return Number(warning.minRequiredSlippage);
+  }
+  return null;
+}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '@rango-dev/ui';
+import { Button, darkTheme, styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
@@ -32,3 +32,12 @@ export const Action = styled('div', {
   alignSelf: 'flex-start',
   cursor: 'pointer',
 });
+
+export const SwapButton = styled(Button, {
+  '& ._text': {
+    gap: '$5',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -1,14 +1,18 @@
+import type { ActionType } from './QuoteWarningsAndErrors.helpers';
 import type { PropTypes } from './QuoteWarningsAndErrors.types';
 
 import { i18n } from '@lingui/core';
-import { Alert, Button, InfoIcon } from '@rango-dev/ui';
+import { Alert, Button, Divider, InfoIcon } from '@rango-dev/ui';
 import React from 'react';
 
 import { QuoteErrorType, QuoteWarningType } from '../../types';
 import { NoResult } from '../NoResult';
 
 import { HighValueLossWarningModal } from './HighValueLossWarningModal';
-import { makeAlerts } from './QuoteWarningsAndErrors.helpers';
+import {
+  getRequiredSlippage,
+  makeAlerts,
+} from './QuoteWarningsAndErrors.helpers';
 import { Action, Alerts } from './QuoteWarningsAndErrors.styles';
 import { SlippageWarningModal } from './SlippageWariningModal';
 import { UnknownPriceWarningModal } from './UnknownPriceWarningModal';
@@ -20,11 +24,13 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
     couldChangeSettings,
     showWarningModal,
     confirmationDisabled,
+    skipAlerts,
     refetchQuote,
     onOpenWarningModal,
     onCloseWarningModal,
     onConfirmWarningModal,
     onChangeSettings,
+    onChangeSlippage,
   } = props;
 
   const warningModalHandlers = {
@@ -49,14 +55,38 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
     alertInfo.action = null;
   }
 
-  const showAlerts = !!alertInfo;
+  const showAlerts = !!alertInfo && !skipAlerts;
+
+  const onclickActionButton = (action: ActionType) => {
+    if (action === 'change-slippage') {
+      const quoteError =
+        error?.type === QuoteErrorType.BRIDGE_LIMIT ||
+        error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE
+          ? error
+          : null;
+      const requestedSlippage = getRequiredSlippage(warning, quoteError);
+      onChangeSlippage?.(requestedSlippage);
+    } else if (action === 'change-settings') {
+      onChangeSettings();
+    }
+  };
 
   return (
     <>
-      {showNoResultMessage && <NoResult error={error} fetch={refetchQuote} />}
+      {showNoResultMessage && (
+        <>
+          <Divider size={10} />
+          <NoResult
+            skipAlerts={skipAlerts}
+            error={error}
+            fetch={refetchQuote}
+          />
+        </>
+      )}
 
       {showAlerts && (
         <Alerts>
+          <Divider size={10} />
           <Alert
             title={alertInfo.title}
             type={alertInfo.alertType}
@@ -68,14 +98,15 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
                 </Action>
               ),
             })}
-            {...(alertInfo.action === 'change-settings' && {
+            {...((alertInfo.action === 'change-settings' ||
+              alertInfo.action === 'change-slippage') && {
               action: (
                 <Button
                   id="widget-quote-warning-error-change-settings-btn"
                   size="xxsmall"
                   type={alertInfo.alertType}
-                  onClick={onChangeSettings}>
-                  {i18n.t('Change')}
+                  onClick={() => onclickActionButton(alertInfo.action)}>
+                  {alertInfo.actionButtonTitle || i18n.t('Change')}
                 </Button>
               ),
             })}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.types.ts

@@ -6,11 +6,13 @@ export interface PropTypes {
   showWarningModal: boolean;
   confirmationDisabled: boolean;
   couldChangeSettings: boolean;
+  skipAlerts?: boolean;
   refetchQuote: () => void;
   onOpenWarningModal: () => void;
   onCloseWarningModal: () => void;
   onConfirmWarningModal: () => void;
   onChangeSettings: () => void;
+  onChangeSlippage?: (slippage: number | null) => void;
 }
 
 type ModalPropTypesKeys = keyof Omit<PropTypes, 'extraSpace' | 'loading'>;

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -4,16 +4,17 @@ import type {
 } from '../../types';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, MessageBox, Typography } from '@rango-dev/ui';
+import { Button, Divider, MessageBox, WarningIcon } from '@rango-dev/ui';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
-import { useAppStore } from '../../store/AppStore';
 import { QuoteWarningType } from '../../types';
 import { getContainer } from '../../utils/common';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
+import { SwapButton } from './QuoteWarningsAndErrors.styles';
+
 type PropsTypes = {
   open: boolean;
   confirmationDisabled: boolean;
@@ -23,26 +24,13 @@ type PropsTypes = {
 };
 
 export function SlippageWarningModal(props: PropsTypes) {
-  const { customSlippage, slippage } = useAppStore();
   const { open, onClose, onConfirm, warning, confirmationDisabled } = props;
   const navigate = useNavigate();
-  const userSlippage = customSlippage ?? slippage;
 
   return (
     <WatermarkedModal
       anchor="bottom"
       open={open}
-      prefix={
-        <Button
-          size="small"
-          id="widget-slippage-warning-modal-change-settings-btn"
-          variant="ghost"
-          onClick={() => navigate('../' + navigationRoutes.settings)}>
-          <Typography variant="label" size="medium" color="$neutral900">
-            {i18n.t('Change settings')}
-          </Typography>
-        </Button>
-      }
       container={getContainer()}
       onClose={onClose}>
       <MessageBox
@@ -54,10 +42,9 @@ export function SlippageWarningModal(props: PropsTypes) {
         }
         description={
           warning.type === QuoteWarningType.HIGH_SLIPPAGE
-            ? i18n.t({
-                id: ' Caution, your slippage is high (={userSlippage}). Your trade may be front run.',
-                values: { userSlippage },
-              })
+            ? i18n.t(
+                'Caution, your slippage is high. Your trade may be front run.'
+              )
             : i18n.t({
                 id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
                 values: {
@@ -67,7 +54,7 @@ export function SlippageWarningModal(props: PropsTypes) {
         }>
         <Divider size={18} />
         <Divider size={32} />
-        <Button
+        <SwapButton
           id="widget-slippage-warning-modal-confirm-anyway-btn"
           size="large"
           type="primary"
@@ -75,7 +62,19 @@ export function SlippageWarningModal(props: PropsTypes) {
           fullWidth
           disabled={confirmationDisabled}
           onClick={onConfirm}>
-          {i18n.t('Confirm anyway')}
+          <WarningIcon color="white" size={16} />
+          {i18n.t('Swap anyway')}
+        </SwapButton>
+        <Divider size={10} />
+        <Button
+          id="widget-slippage-warning-modal-change-slippage-btn"
+          size="large"
+          type="primary"
+          variant="outlined"
+          fullWidth
+          disabled={confirmationDisabled}
+          onClick={() => navigate('../' + navigationRoutes.settings)}>
+          {i18n.t('Change Slippage')}
         </Button>
       </MessageBox>
     </WatermarkedModal>

package/src/components/Slippage/Slippage.styles.ts

@@ -32,3 +32,26 @@ export const SlippageChip = styled(Chip, {
   width: '61px',
   flexShrink: 0,
 });
+
+export const SlippageTextFieldContainer = styled('div', {
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderRadius: '$xs',
+  flex: 1,
+  variants: {
+    status: {
+      safe: {
+        borderColor: '$secondary500',
+      },
+      error: {
+        borderColor: '$error500',
+      },
+      warning: {
+        borderColor: '$warning500',
+      },
+      empty: {
+        borderWidth: 0,
+      },
+    },
+  },
+});

package/src/components/Slippage/Slippage.tsx

@@ -14,12 +14,14 @@ import { MAX_SLIPPAGE, SLIPPAGES } from '../../constants/swapSettings';
 import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
 import { getSlippageValidation } from '../../utils/settings';
+import { isValidCurrencyFormat } from '../../utils/validation';
 
 import {
   BaseContainer,
   Head,
   SlippageChip,
   SlippageChipsContainer,
+  SlippageTextFieldContainer,
 } from './Slippage.styles';
 import { SlippageTooltipContent } from './SlippageTooltipContent';
 
@@ -54,9 +56,8 @@ export function Slippage() {
 
   const onInput = (event: React.FormEvent<HTMLInputElement>) => {
     const input = event.target as HTMLInputElement;
-    const regex = /^(0|[1-9]\d*)(\.\d{1,2})?$/;
     const value = input.value;
-    if (!regex.test(value)) {
+    if (!isValidCurrencyFormat(value)) {
       input.value = value.slice(0, -1);
     }
   };
@@ -90,26 +91,31 @@ export function Slippage() {
             />
           );
         })}
-        <TextField
-          type="number"
-          min="0.01"
-          max="30"
-          step="0.01"
-          onInput={onInput}
-          fullWidth
-          variant="contained"
-          value={customSlippage === null ? '' : customSlippage}
-          color="dark"
-          onChange={onSlippageValueChange}
-          suffix={
-            customSlippage && (
-              <Typography variant="body" size="small">
-                %
-              </Typography>
-            )
-          }
-          placeholder={i18n.t('Custom')}
-        />
+        <SlippageTextFieldContainer
+          status={
+            slippageValidation?.type || (customSlippage ? 'safe' : 'empty')
+          }>
+          <TextField
+            type="number"
+            min="0.01"
+            max="30"
+            step="0.01"
+            onInput={onInput}
+            fullWidth
+            variant="contained"
+            value={customSlippage === null ? '' : customSlippage}
+            color="dark"
+            onChange={onSlippageValueChange}
+            suffix={
+              customSlippage && (
+                <Typography variant="body" size="small">
+                  %
+                </Typography>
+              )
+            }
+            placeholder={i18n.t('Custom')}
+          />
+        </SlippageTextFieldContainer>
       </SlippageChipsContainer>
 
       {slippageValidation && (

package/src/components/SlippageWarningsAndErrors/SlippageWarningsAndErrors.helpers.ts

@@ -0,0 +1,33 @@
+import type { AlertInfo } from '../QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers';
+
+import { i18n } from '@lingui/core';
+
+import { HIGH_SLIPPAGE, MIN_SLIPPAGE } from '../../constants/swapSettings';
+
+export type ActionType = AlertInfo['action'] | 'reset-slippage';
+
+type Alert = Omit<AlertInfo, 'action'> & {
+  action: ActionType;
+};
+
+export function makeAlerts(slippage: number): Alert | null {
+  let alertInfo: Alert | null = null;
+  if (slippage === MIN_SLIPPAGE) {
+    alertInfo = {
+      alertType: 'error',
+      action: 'reset-slippage',
+      actionButtonTitle: i18n.t('Reset'),
+      title: i18n.t('Slippage cannot be set lower than 0.01%.'),
+    };
+    return alertInfo;
+  } else if (slippage > HIGH_SLIPPAGE) {
+    alertInfo = {
+      alertType: 'warning',
+      action: 'change-settings',
+      actionButtonTitle: i18n.t('Change'),
+      title: i18n.t('Caution, your slippage is high!'),
+    };
+    return alertInfo;
+  }
+  return null;
+}