@rango-dev/widget-embedded 0.22.4-next.8 → 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/dist/pages/SettingsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,wBAAgB,YAAY,sBA+M3B"}
+{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,wBAAgB,YAAY,sBA6M3B"}

package/dist/store/AppStore.d.ts

@@ -8,7 +8,7 @@ export declare const AppStoreContext: React.Context<import("zustand").UseBoundSt
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<import("./app").AppStoreState, {
             theme: import("./slices/settings").ThemeMode;
-            language: "en" | "es" | "ja" | "fr" | null;
+            language: "en" | "es" | "ja" | "fr" | "pt" | null;
             affiliatePercent: number | null;
             affiliateRef: string | null;
             affiliateWallets: {
@@ -27,7 +27,7 @@ export declare const AppStoreContext: React.Context<import("zustand").UseBoundSt
         onFinishHydration: (fn: (state: import("./app").AppStoreState) => void) => () => void;
         getOptions: () => Partial<import("zustand/middleware").PersistOptions<import("./app").AppStoreState, {
             theme: import("./slices/settings").ThemeMode;
-            language: "en" | "es" | "ja" | "fr" | null;
+            language: "en" | "es" | "ja" | "fr" | "pt" | null;
             affiliatePercent: number | null;
             affiliateRef: string | null;
             affiliateWallets: {

package/dist/store/app.d.ts

@@ -9,7 +9,7 @@ export declare function createAppStore(initialData?: WidgetConfig): import("zust
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<AppStoreState, {
             theme: import("./slices/settings").ThemeMode;
-            language: "en" | "es" | "ja" | "fr" | null;
+            language: "en" | "es" | "ja" | "fr" | "pt" | null;
             affiliatePercent: number | null;
             affiliateRef: string | null;
             affiliateWallets: {
@@ -28,7 +28,7 @@ export declare function createAppStore(initialData?: WidgetConfig): import("zust
         onFinishHydration: (fn: (state: AppStoreState) => void) => () => void;
         getOptions: () => Partial<import("zustand/middleware").PersistOptions<AppStoreState, {
             theme: import("./slices/settings").ThemeMode;
-            language: "en" | "es" | "ja" | "fr" | null;
+            language: "en" | "es" | "ja" | "fr" | "pt" | null;
             affiliatePercent: number | null;
             affiliateRef: string | null;
             affiliateWallets: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.22.4-next.8",
+  "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.7",
-    "@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/Quote/Quote.tsx

@@ -122,6 +122,14 @@ export function Quote(props: QuoteProps) {
         stepState = 'warning';
       }
 
+      let alertTitle = stepHasError
+        ? i18n.t('Slippage Error')
+        : i18n.t('Slippage Warning');
+
+      if (error?.type === QuoteErrorType.BRIDGE_LIMIT) {
+        alertTitle = error?.recommendation;
+      }
+
       return {
         swapper: {
           displayName: getSwapperDisplayName(swap.swapperId, swappers),
@@ -197,11 +205,7 @@ export function Quote(props: QuoteProps) {
               <Alert
                 variant="alarm"
                 type={stepHasError ? 'error' : 'warning'}
-                title={
-                  error?.type === QuoteErrorType.BRIDGE_LIMIT
-                    ? error?.recommendation
-                    : i18n.t(`Slippage ${stepHasError ? 'Error' : 'Warning'}:`)
-                }
+                title={alertTitle}
                 footer={
                   <FooterAlert>
                     {error?.type === QuoteErrorType.BRIDGE_LIMIT && (

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/constants/languages.ts

@@ -1,6 +1,6 @@
 import type { FlagPropTypes, Language } from '@rango-dev/ui';
 
-import { English, French, Japanese, Spanish } from '@rango-dev/ui';
+import { English, French, Japanese, Portuguese, Spanish } from '@rango-dev/ui';
 
 export type LanguageItem = {
   title: string;
@@ -14,6 +14,7 @@ export const LANGUAGES: LanguageItem[] = [
   { title: 'Spanish', label: 'Español', local: 'es', SVGFlag: Spanish },
   { title: 'French', label: 'Français', local: 'fr', SVGFlag: French },
   { title: 'Japanese', label: '日本語', local: 'ja', SVGFlag: Japanese },
+  { title: 'Portuguese', label: 'Português', local: 'pt', SVGFlag: Portuguese },
 ];
 
 export const DEFAULT_LANGUAGE = 'en';

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 />

package/src/pages/SettingsPage.tsx

@@ -129,18 +129,16 @@ export function SettingsPage() {
     onClick: () => navigate(navigationRoutes.exchanges),
   };
 
-  /*
-   * const languageItem = {
-   *   id: 'language-item',
-   *   title: (
-   *     <Typography variant="title" size="xmedium">
-   *       {i18n.t('Language')}
-   *     </Typography>
-   *   ),
-   *   end: <ChevronRightIcon color="gray" />,
-   *   onClick: () => navigate(navigationRoutes.languages),
-   * };
-   */
+  const languageItem = {
+    id: 'language-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Language')}
+      </Typography>
+    ),
+    end: <ChevronRightIcon color="gray" />,
+    onClick: () => navigate(navigationRoutes.languages),
+  };
 
   const themeItem = {
     id: 'theme-item',
@@ -185,7 +183,7 @@ export function SettingsPage() {
   const settingItems = isLiquidityHidden ? [] : [bridgeItem, exchangeItem];
 
   if (!isLanguageHidden) {
-    // settingItems.push(languageItem);
+    settingItems.push(languageItem);
   }
   if (!theme?.singleTheme && !isThemeHidden) {
     settingItems.push(themeItem);