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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.16-next.18",
+  "version": "0.1.16-next.19",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -28,7 +28,7 @@
     "@rango-dev/queue-manager-core": "^0.1.13-next.16",
     "@rango-dev/queue-manager-rango-preset": "^0.1.13-next.16",
     "@rango-dev/queue-manager-react": "^0.1.12-next.13",
-    "@rango-dev/ui": "^0.1.14-next.10",
+    "@rango-dev/ui": "^0.1.14-next.12",
     "@rango-dev/wallets-core": "^0.1.14-next.15",
     "@rango-dev/wallets-shared": "^0.1.13",
     "bignumber.js": "^9.1.1",

package/src/components/Layout.tsx

@@ -4,6 +4,7 @@ import {
   Typography,
   styled,
   Spinner,
+  Image,
 } from '@rango-dev/ui';
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -23,7 +24,6 @@ import { useTranslation } from 'react-i18next';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { Image } from '@rango-dev/ui';
 
 const Header = styled('div', {
   display: 'flex',
@@ -52,7 +52,7 @@ export function Layout({ config }: LayoutProps) {
   const { getWalletInfo } = useWallets();
   const connectedWalletsImages = removeDuplicateFrom(
     getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo).map(
-      (w) => w.image
+      w => w.image
     )
   );
   const { blockchains, tokens } = useMetaStore.use.meta();
@@ -64,8 +64,7 @@ export function Layout({ config }: LayoutProps) {
   const setAffiliateRef = useSettingsStore.use.setAffiliateRef();
 
   const totalBalance = calculateWalletUsdValue(connectedWallets);
-  const connectWalletsButtonDisabled =
-    useUiStore.use.connectWalletsButtonDisabled();
+  const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
 
@@ -73,9 +72,9 @@ export function Layout({ config }: LayoutProps) {
   useEffect(() => {
     if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(
-        (chain) => chain.name === config?.to?.blockchain
+        chain => chain.name === config?.to?.blockchain
       );
-      const token = tokens.find((t) =>
+      const token = tokens.find(t =>
         tokensAreEqual(t, config?.to?.token || null)
       );
       setToChain(chain || null);
@@ -90,9 +89,9 @@ export function Layout({ config }: LayoutProps) {
   useEffect(() => {
     if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(
-        (chain) => chain.name === config?.from?.blockchain
+        chain => chain.name === config?.from?.blockchain
       );
-      const token = tokens.find((t) =>
+      const token = tokens.find(t =>
         tokensAreEqual(t, config?.from?.token || null)
       );
 

package/src/components/RoutesOverview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled, ChevronRightIcon, GasIcon, Spacer } from '@rango-dev/ui';
+import { styled, ChevronRightIcon, GasIcon, Divider } from '@rango-dev/ui';
 import { BestRouteResponse } from 'rango-sdk';
 
 export const Container = styled('div', {
@@ -47,7 +47,7 @@ function RoutesOverview(props: PropTypes) {
       {props.totalFee ? (
         <div className="fee">
           <GasIcon size={12} />
-          <Spacer size={4} />${props.totalFee}
+          <Divider size={4} direction="horizontal" />${props.totalFee}
         </div>
       ) : null}
     </Container>

package/src/components/TokenInfo.tsx

@@ -7,7 +7,7 @@ import {
   TextField,
   Typography,
   Image,
-  Spacer,
+  Divider,
 } from '@rango-dev/ui';
 import { useMetaStore } from '../store/meta';
 import { BlockchainMeta, Token } from 'rango-sdk';
@@ -201,7 +201,7 @@ export function TokenInfo(props: PropTypes) {
                 <Typography variant="body3" color="neutral600">{`${t(
                   'Balance'
                 )}: ${tokenBalance} ${fromToken?.symbol || ''}`}</Typography>
-                <Spacer size={4} />
+                <Divider size={4} />
                 <Button type="primary" variant="ghost" size="compact">
                   {t('Max')}
                 </Button>
@@ -246,7 +246,7 @@ export function TokenInfo(props: PropTypes) {
               ? chain.displayName
               : t('Chain')}
           </Button>
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <Button
             className="selectors"
             onClick={() => {
@@ -272,7 +272,7 @@ export function TokenInfo(props: PropTypes) {
           >
             {loadingStatus === 'success' && token ? token.symbol : t('Token')}
           </Button>
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <div className="amount">
             {props.type === 'From' ? (
               <TextField

package/src/components/TokenPreview.tsx

@@ -4,7 +4,7 @@ import {
   InfoCircleIcon,
   styled,
   Typography,
-  Spacer,
+  Divider,
   Image,
 } from '@rango-dev/ui';
 import { LoadingStatus } from '../store/meta';
@@ -157,7 +157,7 @@ export function TokenPreview(props: PropTypes) {
               ? chain.displayName
               : t('Chain')}
           </Button>
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <Button
             className="selectors"
             variant="outlined"
@@ -175,7 +175,7 @@ export function TokenPreview(props: PropTypes) {
           >
             {loadingStatus === 'success' && token ? token.symbol : t('Token')}
           </Button>
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <div className="amount">
             <OutputContainer>
               <Typography variant="h4">{props.amount}</Typography>

package/src/components/warnings/BalanceErrors.tsx

@@ -1,4 +1,4 @@
-import { Spacer, styled, Typography } from '@rango-dev/ui';
+import { Divider, styled, Typography } from '@rango-dev/ui';
 import React from 'react';
 
 interface PropTypes {
@@ -34,7 +34,7 @@ export function BalanceErrors({ messages }: PropTypes) {
       <Typography className="title" variant="title" color={'error'}>
         Insufficent Balance:
       </Typography>
-      <Spacer size={8} direction="vertical" />
+      <Divider size={8} />
       <List showListStyle={showListStyle}>
         {messages.map((warning, index) => (
           <ListItem showListStyle={showListStyle} key={index}>

package/src/components/warnings/MinRequiredSlippage.tsx

@@ -1,4 +1,4 @@
-import { Spacer, Typography, styled } from '@rango-dev/ui';
+import { Divider, Typography, styled } from '@rango-dev/ui';
 import React from 'react';
 import { ChangeSlippageButton } from '../ChangeSlippageButton';
 
@@ -16,7 +16,7 @@ export function MinRequiredSlippage({ minRequiredSlippage }: PropTypes) {
       We recommend you to increase slippage to at least  
       {minRequiredSlippage}
         for this route.
-      <Spacer size={8} direction="vertical" />
+      <Divider size={8}/>
       <ChangeSlippageButton />
     </StyledMessage>
   );

package/src/pages/ConfirmSwapPage.tsx

@@ -18,7 +18,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { TokenPreview } from '../components/TokenPreview';
 // @ts-ignore // TODO: fix error in tsc build
 import { t } from 'i18next';
-import { Spacer, ConfirmSwap, LoadingFailedAlert } from '@rango-dev/ui';
+import { Divider, ConfirmSwap, LoadingFailedAlert } from '@rango-dev/ui';
 import RoutesOverview from '../components/RoutesOverview';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
@@ -66,14 +66,14 @@ export function ConfirmSwapPage() {
   const selectedSlippage = customSlippage || slippage;
 
   const showHighSlippageWarning = !errors.find(
-    (error) => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
+    error => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
   );
 
   const { getWalletInfo, connect } = useWallets();
   const confirmDisabled =
     fetchingBestRoute ||
-    !requiredWallets(bestRoute).every((chain) =>
-      selectedWallets.map((wallet) => wallet.chain).includes(chain)
+    !requiredWallets(bestRoute).every(chain =>
+      selectedWallets.map(wallet => wallet.chain).includes(chain)
     );
 
   const firstStep = bestRoute?.result?.swaps[0];
@@ -94,8 +94,10 @@ export function ConfirmSwapPage() {
 
   const handleConnectChain = (wallet: string) => {
     const network = wallet as Network;
-    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(
-      (compatibleWallet: WalletType) => connect?.(compatibleWallet, network)
+    getKeplrCompatibleConnectedWallets(
+      selectableWallets
+    ).forEach((compatibleWallet: WalletType) =>
+      connect?.(compatibleWallet, network)
     );
   };
 
@@ -107,7 +109,7 @@ export function ConfirmSwapPage() {
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
       onConfirm={async () => {
-        confirmSwap?.().then(async (swap) => {
+        confirmSwap?.().then(async swap => {
           if (swap) {
             try {
               await manager?.create(
@@ -128,10 +130,10 @@ export function ConfirmSwapPage() {
           }
         });
       }}
-      onChange={(wallet) => setSelectedWallet(wallet)}
+      onChange={wallet => setSelectedWallet(wallet)}
       confirmDisabled={loadingMetaStatus !== 'success' || confirmDisabled}
-      handleConnectChain={(wallet) => handleConnectChain(wallet)}
-      isExperimentalChain={(wallet) =>
+      handleConnectChain={wallet => handleConnectChain(wallet)}
+      isExperimentalChain={wallet =>
         getKeplrCompatibleConnectedWallets(selectableWallets).length > 0
           ? isExperimentalChain(blockchains, wallet)
           : false
@@ -156,7 +158,7 @@ export function ConfirmSwapPage() {
                 : bestRouteloadingStatus
             }
           />
-          <Spacer size={12} direction="vertical" />
+          <Divider size={12} />
           <TokenPreview
             chain={{
               displayName: lastStep?.to.blockchain || '',
@@ -200,7 +202,7 @@ export function ConfirmSwapPage() {
         <>
           {loadingMetaStatus === 'failed' && <LoadingFailedAlert />}
           {loadingMetaStatus === 'failed' && showHighSlippageWarning && (
-            <Spacer direction="vertical" />
+            <Divider />
           )}
           {showHighSlippageWarning && (
             <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />

package/src/pages/SwapDetailsPage.tsx

@@ -109,7 +109,7 @@ export function SwapDetailsPage() {
             label={t('From')}
             loadingStatus={'success'}
           />
-          <Spacer size={12} direction="vertical" />
+          <Divider size={12} />
           <TokenPreview
             chain={{
               displayName: lastStep?.toBlockchain || '',