@rango-dev/widget-embedded 0.1.16-next.18 → 0.1.16-next.19

package/dist/widget-embedded.esm.js

@@ -1,4 +1,4 @@
-import { WalletState, InfoCircleIcon, Typography, Button, Image, Spacer, styled, ChevronRightIcon, GasIcon, Alert, ConfirmSwap, LoadingFailedAlert, History, AngleDownIcon, TextField, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, Wallet, useCopyToClipboard, SwapHistory, AddWalletIcon, globalCss, generateRangeColors, createTheme, SwapContainer } from '@rango-dev/ui';
+import { WalletState, InfoCircleIcon, Typography, Button, Image, Divider, styled, ChevronRightIcon, GasIcon, Alert, ConfirmSwap, LoadingFailedAlert, History, AngleDownIcon, TextField, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, Wallet, useCopyToClipboard, SwapHistory, AddWalletIcon, globalCss, generateRangeColors, createTheme, SwapContainer } from '@rango-dev/ui';
 import React, { useRef, useEffect, Fragment, useState, useLayoutEffect, useMemo } from 'react';
 import { useInRouterContext, MemoryRouter } from 'react-router';
 import { PendingSwapNetworkStatus, useQueueManager, calculatePendingSwap, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, makeQueueDefinition, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
@@ -1439,8 +1439,9 @@ function TokenPreview(props) {
     suffix: ItemSuffix,
     align: "start",
     size: "large"
-  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
-    size: 12
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Divider, {
+    size: 12,
+    direction: "horizontal"
   }), React.createElement(Button, {
     className: "selectors",
     variant: "outlined",
@@ -1452,8 +1453,9 @@ function TokenPreview(props) {
     suffix: ItemSuffix,
     size: "large",
     align: "start"
-  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
-    size: 12
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Divider, {
+    size: 12,
+    direction: "horizontal"
   }), React.createElement("div", {
     className: "amount"
   }, React.createElement(OutputContainer, null, React.createElement(Typography, {
@@ -1499,8 +1501,9 @@ function RoutesOverview(props) {
     className: "fee"
   }, React.createElement(GasIcon, {
     size: 12
-  }), React.createElement(Spacer, {
-    size: 4
+  }), React.createElement(Divider, {
+    size: 4,
+    direction: "horizontal"
   }), "$", props.totalFee) : null);
 }
 
@@ -1671,9 +1674,8 @@ function MinRequiredSlippage(_ref) {
   } = _ref;
   return React.createElement(StyledMessage, {
     variant: "body2"
-  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React.createElement(Spacer, {
-    size: 8,
-    direction: "vertical"
+  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React.createElement(Divider, {
+    size: 8
   }), React.createElement(ChangeSlippageButton, null));
 }
 
@@ -1710,9 +1712,8 @@ function BalanceErrors(_ref) {
     className: "title",
     variant: "title",
     color: 'error'
-  }, "Insufficent Balance:"), React.createElement(Spacer, {
-    size: 8,
-    direction: "vertical"
+  }, "Insufficent Balance:"), React.createElement(Divider, {
+    size: 8
   }), React.createElement(List, {
     showListStyle: showListStyle
   }, messages.map((warning, index) => React.createElement(ListItem, {
@@ -1894,9 +1895,8 @@ function ConfirmSwapPage() {
       amount: fromAmount,
       label: t('From'),
       loadingStatus: loadingMetaStatus !== 'success' ? loadingMetaStatus : bestRouteloadingStatus
-    }), React.createElement(Spacer, {
-      size: 12,
-      direction: "vertical"
+    }), React.createElement(Divider, {
+      size: 12
     }), React.createElement(TokenPreview, {
       chain: {
         displayName: lastStep?.to.blockchain || '',
@@ -1922,9 +1922,7 @@ function ConfirmSwapPage() {
     loading: fetchingConfirmedRoute,
     errors: dbErrorMessage ? [dbErrorMessage, ...ConfirmSwapErrors(errors)] : ConfirmSwapErrors(errors),
     warnings: ConfirmSwapWarnings(warnings),
-    extraMessages: React.createElement(React.Fragment, null, loadingMetaStatus === 'failed' && React.createElement(LoadingFailedAlert, null), loadingMetaStatus === 'failed' && showHighSlippageWarning && React.createElement(Spacer, {
-      direction: "vertical"
-    }), showHighSlippageWarning && React.createElement(ConfirmSwapExtraMessages, {
+    extraMessages: React.createElement(React.Fragment, null, loadingMetaStatus === 'failed' && React.createElement(LoadingFailedAlert, null), loadingMetaStatus === 'failed' && showHighSlippageWarning && React.createElement(Divider, null), showHighSlippageWarning && React.createElement(ConfirmSwapExtraMessages, {
       selectedSlippage: selectedSlippage
     })),
     confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!'
@@ -2128,7 +2126,7 @@ function TokenInfo(props) {
   }, React.createElement(Typography, {
     variant: "body3",
     color: "neutral600"
-  }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React.createElement(Spacer, {
+  }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React.createElement(Divider, {
     size: 4
   }), React.createElement(Button, {
     type: "primary",
@@ -2159,8 +2157,9 @@ function TokenInfo(props) {
     suffix: ItemSuffix,
     align: "start",
     size: "large"
-  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
-    size: 12
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Divider, {
+    size: 12,
+    direction: "horizontal"
   }), React.createElement(Button, {
     className: "selectors",
     onClick: () => {
@@ -2176,8 +2175,9 @@ function TokenInfo(props) {
     suffix: ItemSuffix,
     size: "large",
     align: "start"
-  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
-    size: 12
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Divider, {
+    size: 12,
+    direction: "horizontal"
   }), React.createElement("div", {
     className: "amount"
   }, props.type === 'From' ? React.createElement(TextField, {
@@ -2828,7 +2828,7 @@ function SwapDetailsPage() {
           label={t('From')}
           loadingStatus={'success'}
         />
-        <Spacer size={12} direction="vertical" />
+        <Divider size={12} />
         <TokenPreview
           chain={{
             displayName: lastStep?.toBlockchain || '',