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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.42.4-next.0",
+  "version": "0.43.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.45.2-next.6",
+    "@rango-dev/provider-all": "^0.46.0",
     "@rango-dev/queue-manager-core": "^0.29.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.45.2-next.6",
+    "@rango-dev/queue-manager-rango-preset": "^0.45.1",
     "@rango-dev/queue-manager-react": "^0.29.0",
-    "@rango-dev/signer-solana": "^0.39.1-next.2",
-    "@rango-dev/ui": "^0.46.2-next.8",
-    "@rango-dev/wallets-core": "^0.43.1-next.5",
-    "@rango-dev/wallets-react": "^0.30.2-next.6",
-    "@rango-dev/wallets-shared": "^0.44.2-next.6",
+    "@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",
     "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, IconButton, SelectableWalletButton, styled } from '@rango-dev/ui';
+import { css, darkTheme, IconButton, styled } from '@rango-dev/ui';
 
 export const Title = styled('div', {
   display: 'flex',
@@ -11,15 +11,58 @@ export const ListContainer = styled('div', {
   display: 'flex',
   justifyContent: 'space-evenly',
   alignItems: 'center',
-  columnGap: '$5',
-  rowGap: '$10',
+  gap: '$10',
   flexWrap: 'wrap',
   paddingTop: '$5',
   height: '100%',
 });
 
-export const ShowMoreWallets = styled(SelectableWalletButton, {
+export const WalletButton = styled('button', {
+  borderRadius: '$xm',
+  padding: '$10',
+  border: '0',
+  display: 'flex',
   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,7 +6,6 @@ import { i18n } from '@lingui/core';
 import { warn } from '@rango-dev/logging-core';
 import {
   Divider,
-  makeInfo,
   SelectableWallet,
   Typography,
   WalletState,
@@ -15,6 +14,7 @@ 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,6 +49,7 @@ 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,
   });
@@ -118,14 +119,9 @@ 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);
 
@@ -140,10 +136,25 @@ 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({
@@ -161,32 +172,6 @@ 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(
@@ -226,8 +211,7 @@ export function WalletList(props: PropTypes) {
             )}
             <SelectableWallet
               key={wallet.type}
-              description={getWalletDescription()}
-              descriptionColor={getWalletDescriptionColor()}
+              description={connectedWalletDescription}
               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', skipAlerts } = props;
+  const { fetch, error, size = 'small' } = props;
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
   const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
 
@@ -37,9 +37,6 @@ export function NoResult(props: PropTypes) {
     () => toggleAllLiquiditySources(swappers, true),
     fetch
   );
-  if (skipAlerts) {
-    info.alert = null;
-  }
 
   return (
     <Container>

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

@@ -4,7 +4,6 @@ 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 suggested slippage: {minRequiredSlippage}',
+                              id: 'Minimum required slippage: {minRequiredSlippage}',
                               values: {
                                 ...(error?.type ===
                                   QuoteErrorType.INSUFFICIENT_SLIPPAGE && {

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

@@ -10,17 +10,10 @@ import { errorMessages } from '../../constants/errors';
 import { QuoteErrorType, QuoteWarningType } from '../../types';
 import { getPriceImpactLevel } from '../../utils/quote';
 
-export type ActionType =
-  | 'show-info'
-  | 'change-settings'
-  | 'change-slippage'
-  | null;
-
-export type AlertInfo = {
+type AlertInfo = {
   alertType: 'error' | 'warning';
   title: string;
-  action: ActionType;
-  actionButtonTitle: string | null;
+  action: 'show-info' | 'change-settings' | null;
 };
 
 export function makeAlerts(
@@ -31,9 +24,7 @@ export function makeAlerts(
     alertType: 'warning',
     title: '',
     action: null,
-    actionButtonTitle: null,
   };
-
   if (error) {
     alertInfo.alertType = 'error';
     if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
@@ -47,8 +38,7 @@ export function makeAlerts(
           minRequiredSlippage: error.minRequiredSlippage,
         },
       });
-      alertInfo.action = 'change-slippage';
-      alertInfo.actionButtonTitle = i18n.t('Increase');
+      alertInfo.action = 'change-settings';
     }
 
     return alertInfo;
@@ -85,9 +75,7 @@ export function makeAlerts(
             minRequiredSlippage: warning.minRequiredSlippage,
           },
         });
-        alertInfo.action = 'change-slippage';
-        alertInfo.actionButtonTitle = i18n.t('Increase');
-
+        alertInfo.action = 'change-settings';
         break;
       }
       case QuoteWarningType.HIGH_SLIPPAGE: {
@@ -104,16 +92,3 @@ 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 { Button, darkTheme, styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
@@ -32,12 +32,3 @@ 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,18 +1,14 @@
-import type { ActionType } from './QuoteWarningsAndErrors.helpers';
 import type { PropTypes } from './QuoteWarningsAndErrors.types';
 
 import { i18n } from '@lingui/core';
-import { Alert, Button, Divider, InfoIcon } from '@rango-dev/ui';
+import { Alert, Button, InfoIcon } from '@rango-dev/ui';
 import React from 'react';
 
 import { QuoteErrorType, QuoteWarningType } from '../../types';
 import { NoResult } from '../NoResult';
 
 import { HighValueLossWarningModal } from './HighValueLossWarningModal';
-import {
-  getRequiredSlippage,
-  makeAlerts,
-} from './QuoteWarningsAndErrors.helpers';
+import { makeAlerts } from './QuoteWarningsAndErrors.helpers';
 import { Action, Alerts } from './QuoteWarningsAndErrors.styles';
 import { SlippageWarningModal } from './SlippageWariningModal';
 import { UnknownPriceWarningModal } from './UnknownPriceWarningModal';
@@ -24,13 +20,11 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
     couldChangeSettings,
     showWarningModal,
     confirmationDisabled,
-    skipAlerts,
     refetchQuote,
     onOpenWarningModal,
     onCloseWarningModal,
     onConfirmWarningModal,
     onChangeSettings,
-    onChangeSlippage,
   } = props;
 
   const warningModalHandlers = {
@@ -55,38 +49,14 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
     alertInfo.action = null;
   }
 
-  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();
-    }
-  };
+  const showAlerts = !!alertInfo;
 
   return (
     <>
-      {showNoResultMessage && (
-        <>
-          <Divider size={10} />
-          <NoResult
-            skipAlerts={skipAlerts}
-            error={error}
-            fetch={refetchQuote}
-          />
-        </>
-      )}
+      {showNoResultMessage && <NoResult error={error} fetch={refetchQuote} />}
 
       {showAlerts && (
         <Alerts>
-          <Divider size={10} />
           <Alert
             title={alertInfo.title}
             type={alertInfo.alertType}
@@ -98,15 +68,14 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
                 </Action>
               ),
             })}
-            {...((alertInfo.action === 'change-settings' ||
-              alertInfo.action === 'change-slippage') && {
+            {...(alertInfo.action === 'change-settings' && {
               action: (
                 <Button
                   id="widget-quote-warning-error-change-settings-btn"
                   size="xxsmall"
                   type={alertInfo.alertType}
-                  onClick={() => onclickActionButton(alertInfo.action)}>
-                  {alertInfo.actionButtonTitle || i18n.t('Change')}
+                  onClick={onChangeSettings}>
+                  {i18n.t('Change')}
                 </Button>
               ),
             })}

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

@@ -6,13 +6,11 @@ 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,17 +4,16 @@ import type {
 } from '../../types';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, MessageBox, WarningIcon } from '@rango-dev/ui';
+import { Button, Divider, MessageBox, Typography } 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;
@@ -24,13 +23,26 @@ 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
@@ -42,9 +54,10 @@ export function SlippageWarningModal(props: PropsTypes) {
         }
         description={
           warning.type === QuoteWarningType.HIGH_SLIPPAGE
-            ? i18n.t(
-                'Caution, your slippage is high. Your trade may be front run.'
-              )
+            ? i18n.t({
+                id: ' Caution, your slippage is high (={userSlippage}). Your trade may be front run.',
+                values: { userSlippage },
+              })
             : i18n.t({
                 id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
                 values: {
@@ -54,7 +67,7 @@ export function SlippageWarningModal(props: PropsTypes) {
         }>
         <Divider size={18} />
         <Divider size={32} />
-        <SwapButton
+        <Button
           id="widget-slippage-warning-modal-confirm-anyway-btn"
           size="large"
           type="primary"
@@ -62,19 +75,7 @@ export function SlippageWarningModal(props: PropsTypes) {
           fullWidth
           disabled={confirmationDisabled}
           onClick={onConfirm}>
-          <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')}
+          {i18n.t('Confirm anyway')}
         </Button>
       </MessageBox>
     </WatermarkedModal>

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

@@ -32,26 +32,3 @@ 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,14 +14,12 @@ 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';
 
@@ -56,8 +54,9 @@ 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 (!isValidCurrencyFormat(value)) {
+    if (!regex.test(value)) {
       input.value = value.slice(0, -1);
     }
   };
@@ -91,31 +90,26 @@ export function Slippage() {
             />
           );
         })}
-        <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>
+        <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')}
+        />
       </SlippageChipsContainer>
 
       {slippageValidation && (