@rango-dev/widget-embedded 0.1.11-next.5 → 0.1.11-next.7

package/dist/widget-embedded.esm.js

@@ -1,4 +1,4 @@
-import { WalletState, Typography, InfoCircleIcon, AngleDownIcon, Spacer, Button, TextField, styled, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, Alert, ChevronRightIcon, GasIcon, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, LoadingFailedAlert, Wallet, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
+import { WalletState, Typography, InfoCircleIcon, AngleDownIcon, Spacer, Button, Image, TextField, styled, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, Alert, ChevronRightIcon, GasIcon, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, LoadingFailedAlert, Wallet, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
 import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
 import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation as useLocation$1, useNavigate as useNavigate$1 } from 'react-router';
 import { PendingSwapNetworkStatus, useQueueManager, calculatePendingSwap, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, swapQueueDef, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
@@ -702,7 +702,10 @@ const createSelectors = _store => {
   return store;
 };
 
-const httpService = /*#__PURE__*/new RangoClient(process.env.REACT_APP_API_KEY);
+// this API key is limited and
+// it is only for test purpose
+const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+const httpService = /*#__PURE__*/new RangoClient(process.env.REACT_APP_API_KEY || RANGO_PUBLIC_API_KEY);
 
 const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
 const DEFAULT_SLIPPAGE = 1;
@@ -1343,10 +1346,6 @@ const Container = /*#__PURE__*/styled('div', {
     }
   }
 });
-const StyledImage = /*#__PURE__*/styled('img', {
-  width: '$24',
-  maxHeight: '$24'
-});
 const Options = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
@@ -1443,8 +1442,9 @@ function TokenInfo(props) {
     variant: "outlined",
     disabled: loadingStatus === 'failed',
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React.createElement(StyledImage, {
-      src: chain.logo
+    prefix: loadingStatus === 'success' && chain ? React.createElement(Image, {
+      src: chain.logo,
+      size: 24
     }) : React.createElement(ImagePlaceholder, null),
     suffix: ItemSuffix,
     align: "start",
@@ -1459,8 +1459,9 @@ function TokenInfo(props) {
     variant: "outlined",
     disabled: loadingStatus === 'failed' || type === 'From' && !fromChain || type === 'To' && !toChain,
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && token ? React.createElement(StyledImage, {
-      src: token.image
+    prefix: loadingStatus === 'success' && token ? React.createElement(Image, {
+      src: token.image,
+      size: 24
     }) : React.createElement(ImagePlaceholder, null),
     suffix: ItemSuffix,
     size: "large",
@@ -1605,7 +1606,8 @@ function HeaderButtons(props) {
     onClick: onClickRefresh,
     disabled: !onClickRefresh
   }, React.createElement(RetryIcon, {
-    size: 24
+    size: 24,
+    disabled: !onClickRefresh
   }))), React.createElement(Tooltip, {
     content: "Transactions History"
   }, React.createElement(Button, {
@@ -1852,10 +1854,6 @@ const Container$3 = /*#__PURE__*/styled('div', {
     }
   }
 });
-const StyledImage$1 = /*#__PURE__*/styled('img', {
-  width: '$24',
-  maxHeight: '$24'
-});
 const ImagePlaceholder$1 = /*#__PURE__*/styled('span', {
   width: '24px',
   height: '24px',
@@ -1911,8 +1909,9 @@ function TokenPreview(props) {
     className: "selectors",
     variant: "outlined",
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React.createElement(StyledImage$1, {
-      src: chain.logo
+    prefix: loadingStatus === 'success' && chain ? React.createElement(Image, {
+      src: chain.logo,
+      size: 24
     }) : React.createElement(ImagePlaceholder$1, null),
     suffix: ItemSuffix,
     align: "start",
@@ -1923,8 +1922,9 @@ function TokenPreview(props) {
     className: "selectors",
     variant: "outlined",
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && token ? React.createElement(StyledImage$1, {
-      src: token.image
+    prefix: loadingStatus === 'success' && token ? React.createElement(Image, {
+      src: token.image,
+      size: 24
     }) : React.createElement(ImagePlaceholder$1, null),
     suffix: ItemSuffix,
     size: "large",
@@ -2954,9 +2954,7 @@ const Header = /*#__PURE__*/styled('div', {
     display: 'flex'
   }
 });
-const WalletImage = /*#__PURE__*/styled('img', {
-  width: '$24',
-  height: '$24',
+const WalletImageContainer = /*#__PURE__*/styled('div', {
   marginLeft: -15,
   marginRight: '$6',
   borderRadius: '99999px'
@@ -3022,10 +3020,12 @@ function Layout(_ref) {
     onClick: () => {
       if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
     }
-  }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React.createElement(WalletImage, {
-    key: index,
-    src: walletImage
-  })) : React.createElement(React.Fragment, null), React.createElement("div", {
+  }, 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", {
     className: "balance"
   }, React.createElement(Typography, {
     variant: "body2"
@@ -3128,6 +3128,9 @@ function useTheme(_ref) {
     colors,
     radii: {
       5: `${borderRadius}px`
+    },
+    shadows: {
+      s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5'
     }
   });
   const customeDarkTheme = createTheme({
@@ -3146,6 +3149,9 @@ function useTheme(_ref) {
     },
     radii: {
       5: `${borderRadius}px`
+    },
+    shadows: {
+      s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222'
     }
   });
   const [OSTheme, setOSTheme] = useState(customeLightTheme);