@rango-dev/widget-embedded 0.20.0 → 0.20.1-next.1

package/dist/utils/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,YAAY,mBAC2B,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,YAAY,mBACkC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.0",
+  "version": "0.20.1-next.1",
   "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.25.0",
+    "@rango-dev/provider-all": "^0.25.1-next.0",
     "@rango-dev/queue-manager-core": "^0.25.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.25.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.25.1-next.0",
     "@rango-dev/queue-manager-react": "^0.24.0",
-    "@rango-dev/ui": "^0.26.0",
-    "@rango-dev/wallets-react": "^0.11.0",
-    "@rango-dev/wallets-shared": "^0.25.0",
+    "@rango-dev/ui": "^0.26.1-next.0",
+    "@rango-dev/wallets-react": "^0.11.1-next.0",
+    "@rango-dev/wallets-shared": "^0.25.1-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -18,6 +18,7 @@ import {
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { getQuoteErrorMessage } from '../../constants/errors';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
@@ -238,7 +239,9 @@ export function ConfirmWalletsModal(props: PropTypes) {
     }
   }, [showCustomDestination]);
 
-  const modalContainer = document.querySelector('#swap-box') as HTMLDivElement;
+  const modalContainer = document.getElementById(
+    RANGO_SWAP_BOX_ID
+  ) as HTMLDivElement;
 
   const navigate = useNavigate();
   return (

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -18,6 +18,7 @@ import {
 import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
+import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { useWalletList } from '../../hooks/useWalletList';
 import {
   TIME_TO_CLOSE_MODAL,
@@ -107,7 +108,9 @@ export function WalletList(props: PropTypes) {
     });
   }, [JSON.stringify(list)]);
 
-  const modalContainer = document.querySelector('#swap-box') as HTMLDivElement;
+  const modalContainer = document.getElementById(
+    RANGO_SWAP_BOX_ID
+  ) as HTMLDivElement;
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout> | null = null;

package/src/components/Layout/Layout.styles.ts

@@ -7,7 +7,7 @@ export const Container = styled('div', {
   borderRadius: '$primary',
   overflow: 'hidden !important',
   boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
-  width: '95vw',
+  width: '100vw',
   minWidth: '300px',
   maxWidth: '390px',
   maxHeight: '700px',
@@ -20,10 +20,10 @@ export const Container = styled('div', {
   variants: {
     fixedHeight: {
       true: {
-        height: '95vh',
+        height: '100vh',
       },
       false: {
-        height: 'auto',
+        height: 'auto !important',
       },
     },
   },

package/src/components/Layout/Layout.tsx

@@ -4,7 +4,9 @@ import type { PropsWithChildren } from 'react';
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React from 'react';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
@@ -25,8 +27,9 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
   } = props;
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
-    config: { features },
+    config: { features, theme },
   } = useAppStore();
+  const { activeTheme } = useTheme(theme || {});
 
   const isConnectWalletHidden = isFeatureHidden(
     'connectWalletButton',
@@ -47,7 +50,11 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     typeof header.hasBackButton === 'undefined' || header.hasBackButton;
 
   return (
-    <Container ref={ref} fixedHeight={fixedHeight} id="swap-box">
+    <Container
+      ref={ref}
+      fixedHeight={fixedHeight}
+      id={RANGO_SWAP_BOX_ID}
+      className={activeTheme()}>
       <Header
         prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -12,6 +12,8 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
+
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
     open,
@@ -31,7 +33,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     <Modal
       open={open}
       onClose={onClose}
-      container={document.getElementById('swap-box') || document.body}>
+      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
       {status === 'success' ? (
         <MessageBox type="success" title={i18n.t('Swap Successful')}>
           <TokenAmount

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -4,6 +4,8 @@ import { Modal } from '@rango-dev/ui';
 import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
+
 import { CancelContent } from './SwapDetailsModal.Cancel';
 import { DeleteContent } from './SwapDetailsModal.Delete';
 import { modalNetworkValues } from './SwapDetailsModal.helpers';
@@ -22,7 +24,7 @@ export function SwapDetailsModal(props: ModalPropTypes) {
     <Modal
       open={!!state}
       onClose={onClose}
-      container={document.getElementById('swap-box') || document.body}>
+      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
       {showWalletStateContent && (
         <WalletStateContent
           type={modalNetworkValues[state].type}

package/src/components/WalletModal/WalletModal.tsx

@@ -3,6 +3,8 @@ import type { PropTypes } from './WalletModal.types';
 import { Divider, Modal } from '@rango-dev/ui';
 import React from 'react';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
+
 import { ModalContent } from './WalletModalContent';
 
 export function WalletModal(props: PropTypes) {
@@ -12,7 +14,7 @@ export function WalletModal(props: PropTypes) {
     <Modal
       open={open}
       onClose={onClose}
-      container={document.getElementById('swap-box') || document.body}>
+      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
       <ModalContent {...otherProps} />
       <Divider direction="vertical" size={32} />
     </Modal>

package/src/constants/index.ts

@@ -1,2 +1,3 @@
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
+export const RANGO_SWAP_BOX_ID = 'rango-swap-box';

package/src/containers/App/App.styles.ts

@@ -1,7 +1,6 @@
 import { styled } from '@rango-dev/ui';
 
 export const MainContainer = styled('div', {
-  width: '100%',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -9,10 +8,10 @@ export const MainContainer = styled('div', {
   boxSizing: 'border-box',
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
-    listStyleType: 'none',
   },
   '& *:focus-visible': {
     outlineColor: '$info500',
     transition: 'none',
   },
+  '& ul, ol, li': { listStyleType: 'none' },
 });

package/src/hooks/useWalletList.ts

@@ -1,4 +1,5 @@
 import type { WidgetConfig } from '../types';
+import type { WalletInfo } from '@rango-dev/ui';
 import type { BlockchainMeta } from 'rango-sdk';
 
 import { WalletState } from '@rango-dev/ui';
@@ -101,15 +102,36 @@ export function useWalletList(params: Params) {
     };
   }, []);
 
+  /*
+   * Atm, we only support default injected wallet for the EVM
+   * so we show default wallet when there is no other evm wallet installed
+   * but we have ethereum injected
+   */
+  const shouldShowDefaultInjectedWallet = (wallets: WalletInfo[]) => {
+    const isEvmWalletInstalledExceptDefault = wallets.filter(
+      (wallet) =>
+        wallet.state != WalletState.NOT_INSTALLED &&
+        ![WalletTypes.DEFAULT, WalletTypes.WALLET_CONNECT_2].includes(
+          wallet.type as WalletTypes
+        ) &&
+        getWalletInfo(wallet.type).supportedChains.filter(
+          (blockchain) => blockchain.type == 'EVM'
+        ).length > 0
+    );
+    return isEvmWalletInstalledExceptDefault.length == 0;
+  };
+
   const shouldExcludeWallet = (
     walletType: string,
     chain: string,
     blockchains: BlockchainMeta[]
   ) => {
     return (
-      isExperimentalChain(blockchains, chain) &&
-      isExperimentalChainNotAdded(walletType) &&
-      !KEPLR_COMPATIBLE_WALLETS.includes(walletType)
+      (isExperimentalChain(blockchains, chain) &&
+        isExperimentalChainNotAdded(walletType) &&
+        !KEPLR_COMPATIBLE_WALLETS.includes(walletType)) ||
+      (walletType == WalletTypes.DEFAULT &&
+        !shouldShowDefaultInjectedWallet(wallets))
     );
   };
 

package/src/utils/common.ts

@@ -1,3 +1,5 @@
+import { RANGO_SWAP_BOX_ID } from '../constants';
+
 export function removeDuplicateFrom<T>(array: T[]): T[] {
   return Array.from(new Set(array));
 }
@@ -31,4 +33,4 @@ export function containsText(text: string, searchText: string): boolean {
 }
 
 export const getContainer = () =>
-  document.getElementById('swap-box') as HTMLElement;
+  document.getElementById(RANGO_SWAP_BOX_ID) as HTMLElement;