@rango-dev/widget-embedded 0.1.19 → 0.1.20-next.0

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';
@@ -8,8 +8,7 @@ import { create } from 'zustand';
 import BigNumber, { BigNumber as BigNumber$1 } from 'bignumber.js';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { RangoClient, isEvmBlockchain as isEvmBlockchain$1 } from 'rango-sdk';
-import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, detectInstallLink, WalletType, getCosmosExperimentalChainInfo, detectMobileScreens, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
-export { WalletType } from '@rango-dev/wallets-shared';
+import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, detectInstallLink, WalletTypes, getCosmosExperimentalChainInfo, detectMobileScreens, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
 import { readAccountAddress, useWallets, Provider as Provider$1, Events } from '@rango-dev/wallets-core';
 import { shallow } from 'zustand/shallow';
 import { allProviders } from '@rango-dev/provider-all';
@@ -292,7 +291,7 @@ function getStateWallet(state) {
       return WalletState.DISCONNECTED;
   }
 }
-const excludedWallets = [WalletType.UNKNOWN, WalletType.LEAP];
+const excludedWallets = [WalletTypes.LEAP];
 function getlistWallet(getState, getWalletInfo, list) {
   return list.filter(wallet => !excludedWallets.includes(wallet)).map(type => {
     const {
@@ -475,7 +474,9 @@ const isExperimentalChain = (blockchains, wallet) => {
   return cosmosExperimentalChainInfo && !!cosmosExperimentalChainInfo[wallet];
 };
 const getKeplrCompatibleConnectedWallets = selectableWallets => {
-  const connectedWalletTypes = new Set(selectableWallets.map(a => a.walletType.toString()));
+  const connectedWalletTypes = new Set(selectableWallets.map(wallet => {
+    return wallet.walletType;
+  }));
   return KEPLR_COMPATIBLE_WALLETS.filter(compatibleWallet => connectedWalletTypes.has(compatibleWallet));
 };
 function getTokensWithBalance(tokens, connectedWallets) {
@@ -1439,8 +1440,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 +1454,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 +1502,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 +1675,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 +1713,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 +1896,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 +1923,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 +2127,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 +2158,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 +2176,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, {
@@ -2639,7 +2640,7 @@ function WalletsPage(_ref) {
     getWalletInfo,
     connect
   } = useWallets();
-  const wallets = getlistWallet(state, getWalletInfo, supportedWallets || Object.values(WalletType));
+  const wallets = getlistWallet(state, getWalletInfo, supportedWallets || Object.values(WalletTypes));
   const walletsRef = useRef();
   let sortedWallets = detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
   sortedWallets = sortWalletsBasedOnState(sortedWallets);
@@ -2828,7 +2829,7 @@ function SwapDetailsPage() {
           label={t('From')}
           loadingStatus={'success'}
         />
-        <Spacer size={12} direction="vertical" />
+        <Divider size={12} />
         <TokenPreview
           chain={{
             displayName: lastStep?.toBlockchain || '',
@@ -2940,6 +2941,10 @@ const Header = /*#__PURE__*/styled('div', {
     display: 'flex'
   }
 });
+const WalletImages = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  paddingLeft: '12px'
+});
 const WalletImageContainer = /*#__PURE__*/styled('div', {
   marginLeft: -15,
   marginRight: '$6',
@@ -3010,13 +3015,14 @@ function Layout(_ref) {
     disabled: loadingMetaStatus === 'failed',
     onClick: () => {
       if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
-    }
-  }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React.createElement(WalletImageContainer, {
-    key: index
-  }, React.createElement(Image, {
-    src: walletImage,
-    size: 24
-  }))) : React.createElement(React.Fragment, null), React.createElement("div", {
+    },
+    prefix: connectedWalletsImages?.length ? React.createElement(WalletImages, null, connectedWalletsImages.map((walletImage, index) => React.createElement(WalletImageContainer, {
+      key: index
+    }, React.createElement(Image, {
+      src: walletImage,
+      size: 24
+    })))) : null
+  }, React.createElement("div", {
     className: "balance"
   }, React.createElement(Typography, {
     variant: "body2"
@@ -3249,6 +3255,7 @@ function QueueManager(props) {
     }
     return connect(wallet, network);
   };
+  const isMobileWallet = walletType => !!getWalletInfo(walletType).mobileWallet;
   // TODO: this code copy & pasted from rango, should be refactored.
   const allBlockchains = blockchains.filter(blockchain => blockchain.enabled).reduce((blockchainsObj, blockchain) => (blockchainsObj[blockchain.name] = blockchain, blockchainsObj), {});
   const evmBasedChains = blockchains.filter(isEvmBlockchain$1);
@@ -3285,6 +3292,7 @@ function QueueManager(props) {
     switchNetwork,
     connect,
     state,
+    isMobileWallet,
     notifier
   };
   return React.createElement(Provider, {