@rango-dev/widget-embedded 0.22.4-next.9 → 0.23.0

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuCnD,wBAAgB,IAAI,sBAkQnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuCnD,wBAAgB,IAAI,sBAgQnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.22.4-next.9",
+  "version": "0.23.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -21,13 +21,13 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/provider-all": "^0.27.1-next.1",
-    "@rango-dev/queue-manager-core": "^0.25.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.27.1-next.1",
-    "@rango-dev/queue-manager-react": "^0.25.1-next.0",
-    "@rango-dev/ui": "^0.28.2-next.8",
-    "@rango-dev/wallets-react": "^0.13.1-next.1",
-    "@rango-dev/wallets-shared": "^0.27.1-next.1",
+    "@rango-dev/provider-all": "^0.28.0",
+    "@rango-dev/queue-manager-core": "^0.26.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.28.0",
+    "@rango-dev/queue-manager-react": "^0.26.0",
+    "@rango-dev/ui": "^0.29.0",
+    "@rango-dev/wallets-react": "^0.14.0",
+    "@rango-dev/wallets-shared": "^0.28.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/QueueManager.tsx

@@ -80,9 +80,6 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
       getSupportedChainNames,
     },
     getSigners,
-    //todo: remove Network type
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
     wallets,
     providers: allProviders,
     switchNetwork,

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -84,18 +84,23 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const isWalletRequiredFor = (blockchain: string) =>
     !!selectedQuote?.swaps.find((swap) => swap.from.blockchain === blockchain);
 
-  const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
+  const getInitialSelectableWallets = () =>
     connectedWallets.filter((connectedWallet) => {
       return (
         connectedWallet.selected &&
         requiredWallets.includes(connectedWallet.chain)
       );
-    })
+    });
+
+  const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
+    getInitialSelectableWallets()
   );
   const lastStepToBlockchainMeta = blockchains.find(
     (chain) => chain.name === lastStepToBlockchain?.name
   );
 
+  const isInsufficientBalanceModalOpen = balanceWarnings.length > 0;
+
   const isSelected = (walletType: string, chain: string) =>
     !!selectableWallets.find(
       (selectableWallet) =>
@@ -291,7 +296,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       })}
       anchor="center">
       <WatermarkedModal
-        open={balanceWarnings.length > 0}
+        open={isInsufficientBalanceModalOpen}
         onClose={setBalanceWarnings.bind(null, [])}
         container={modalContainer}>
         <MessageBox

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -95,9 +95,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
             type="primary"
             size="large"
             onClick={() => window.open(diagnosisUrl, '_blank')}>
-            <Typography variant="title" size="medium" color="primary">
-              {i18n.t('Diagnosis')}
-            </Typography>
+            {i18n.t('Diagnosis')}
           </Button>
           <Divider size={12} />
         </>

package/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx

@@ -1,7 +1,7 @@
 import type { CancelContentProps } from './SwapDetailsModal.types';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, MessageBox, Typography } from '@rango-dev/ui';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
 import React from 'react';
 
 export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
@@ -19,15 +19,11 @@ export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
         type="primary"
         size="large"
         onClick={onCancel}>
-        <Typography variant="title" size="medium" color="neutral100">
-          {i18n.t('Yes, Cancel it')}
-        </Typography>
+        {i18n.t('Yes, Cancel it')}
       </Button>
       <Divider size={12} />
       <Button variant="outlined" type="primary" size="large" onClick={onClose}>
-        <Typography variant="title" size="medium" color="primary">
-          {i18n.t('No, Continue')}
-        </Typography>
+        {i18n.t('No, Continue')}
       </Button>
     </>
   );

package/src/components/SwapDetailsModal/SwapDetailsModal.Delete.tsx

@@ -19,9 +19,7 @@ export const DeleteContent = ({ onDelete, onClose }: DeleteContentProps) => {
         type="primary"
         size="large"
         onClick={onDelete}>
-        <Typography variant="title" size="medium" color="neutral100">
-          {i18n.t('Yes, Delete it')}
-        </Typography>
+        {i18n.t('Yes, Delete it')}
       </Button>
       <Divider size={12} />
       <Button variant="outlined" type="primary" size="large" onClick={onClose}>

package/src/containers/Wallets/Wallets.tsx

@@ -3,15 +3,14 @@ import type {
   PropTypes,
   WidgetContextInterface,
 } from './Wallets.types';
-import type { Wallet } from '../../types/wallets';
 import type { ProvidersOptions } from '../../utils/providers';
 import type { EventHandler } from '@rango-dev/wallets-react';
-import type { Network } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
 import { Events, Provider } from '@rango-dev/wallets-react';
+import { type Network } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useEffect, useRef, useState } from 'react';
+import React, { createContext, useEffect, useRef } from 'react';
 
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
@@ -35,7 +34,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const walletOptions: ProvidersOptions = {
     walletConnectProjectId: props.config?.walletConnectProjectId,
   };
-  const [accounts, setAccounts] = useState<Wallet[]>([]);
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
@@ -67,7 +65,9 @@ function Main(props: PropsWithChildren<PropTypes>) {
           supportedChainNames,
           meta.isContractWallet
         );
-        setAccounts(data);
+        if (data.length) {
+          connectWallet(data, tokens);
+        }
       } else {
         disconnectWallet(type);
       }
@@ -102,12 +102,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
   };
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  useEffect(() => {
-    if (accounts.length) {
-      connectWallet(accounts, tokens);
-    }
-  }, [accounts, tokens]);
-
   return (
     <WidgetContext.Provider
       // eslint-disable-next-line react/jsx-no-constructed-context-values

package/src/pages/Home.tsx

@@ -102,7 +102,7 @@ export function Home() {
     formatBalance(fromTokenBalance)?.amount ?? '0';
 
   const tokenBalanceReal =
-    !!fromBlockchain && !!fromToken
+    !!fromBlockchain && !!fromToken && fromTokenBalance?.amount
       ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
       : '0';
 
@@ -203,9 +203,7 @@ export function Home() {
               loadingBalance={fetchingBalance}
               tooltipContainer={getContainer()}
               onSelectMaxBalance={() => {
-                if (fromTokenFormattedBalance !== '0') {
-                  setInputAmount(tokenBalanceReal.split(',').join(''));
-                }
+                setInputAmount(tokenBalanceReal.split(',').join(''));
               }}
             />
             <SwitchFromAndToButton />