@rango-dev/widget-embedded 0.21.1-next.9 → 0.22.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,sBAyPnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuCnD,wBAAgB,IAAI,sBAwPnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBA0E1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAoE1B"}

package/dist/store/ui.d.ts

@@ -1,9 +1,12 @@
+import type { Watermark } from '../hooks/useFetchApiConfig';
 interface UiState {
     isActiveTab: boolean;
     tabManagerInitiated: boolean;
     showActivateTabModal: boolean;
+    watermark: Watermark;
     activateCurrentTab: (setCurrentTabAsActive: () => void, hasRunningSwaps: boolean) => void;
     setShowActivateTabModal: (flag: boolean) => void;
+    setWatermark: (watermark: Watermark) => void;
 }
 export declare const useUiStore: {
     (): UiState;
@@ -14,8 +17,10 @@ export declare const useUiStore: {
         isActiveTab: () => boolean;
         tabManagerInitiated: () => boolean;
         showActivateTabModal: () => boolean;
+        watermark: () => Watermark;
         activateCurrentTab: () => (setCurrentTabAsActive: () => void, hasRunningSwaps: boolean) => void;
         setShowActivateTabModal: () => (flag: boolean) => void;
+        setWatermark: () => (watermark: Watermark) => void;
     };
 };
 export declare const setCurrentTabAsActive: () => void;

package/dist/store/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/store/ui.ts"],"names":[],"mappings":"AAQA,UAAU,OAAO;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,kBAAkB,EAAE,CAClB,qBAAqB,EAAE,MAAM,IAAI,EACjC,eAAe,EAAE,OAAO,KACrB,IAAI,CAAC;IACV,uBAAuB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,UAAU;;;;;;;;;0DANI,MAAM,IAAI,mBAChB,OAAO,KACrB,IAAI;8CACuB,OAAO,KAAK,IAAI;;CAqBjD,CAAC;AASF,eAAO,MAAM,qBAAqB,YAAwB,CAAC;AAE3D,eAAO,MAAM,iBAAiB,YAAqB,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/store/ui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAS5D,UAAU,OAAO;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,kBAAkB,EAAE,CAClB,qBAAqB,EAAE,MAAM,IAAI,EACjC,eAAe,EAAE,OAAO,KACrB,IAAI,CAAC;IACV,uBAAuB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,YAAY,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,UAAU;;;;;;;;;;0DAPI,MAAM,IAAI,mBAChB,OAAO,KACrB,IAAI;8CACuB,OAAO,KAAK,IAAI;wCACtB,SAAS,KAAK,IAAI;;CA0B7C,CAAC;AASF,eAAO,MAAM,qBAAqB,YAAwB,CAAC;AAE3D,eAAO,MAAM,iBAAiB,YAAqB,CAAC"}

package/dist/utils/wallets.d.ts

@@ -29,5 +29,4 @@ export declare function getAddress({ chain, connectedWallets, walletType, }: {
 export declare function createTokenHash(token: Asset): TokenHash;
 export declare function makeTokensBalance(connectedWallets: ConnectedWallet[]): TokensBalance;
 export declare const isFetchingBalance: (connectedWallets: ConnectedWallet[], blockchain: string) => boolean;
-export declare function hashWalletsState(walletsInfo: ModalWalletInfo[]): string;
 //# sourceMappingURL=wallets.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EACV,KAAK,EACL,OAAO,EACP,UAAU,EACV,WAAW,EACX,UAAU,EAEX,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,YAAY,EACb,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,eAAe,CAAC;AAuB5D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAWvE;AAED,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,WAAW,EAC3C,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,UAAU,EAC/C,IAAI,EAAE,UAAU,EAAE,EAClB,KAAK,CAAC,EAAE,MAAM,GACb,eAAe,EAAE,CA6BnB;AAED,wBAAgB,6BAA6B,CAC3C,oBAAoB,EAAE,cAAc,EAAE,GACrC,OAAO,EAAE,GAAG,IAAI,CAUlB;AAED,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,MAAM,EAAE,EAClB,cAAc,EAAE,MAAM,EAAE,EACxB,mBAAmB,EAAE,OAAO,EAAE,GAAG,IAAI,EACrC,gBAAgB,EAAE,OAAO,GACxB,MAAM,EAAE,CAkFV;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,YA4BhE;AAID,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,eAAe,WAOjC;AAED,wBAAgB,cAAc,CAC5B,gBAAgB,EAAE,YAAY,EAC9B,MAAM,EAAE,KAAK,EAAE,GACd,YAAY,EAAE,CAuBhB;AAED,wBAAgB,yBAAyB,CACvC,eAAe,EAAE,eAAe,GAC/B,eAAe,CAEjB;AAED,eAAO,MAAM,uBAAuB,oBAAqB,eAAe,EAAE,WAwCzE,CAAC;AAQF,eAAO,MAAM,WAAW,eACV,MAAM,UACV,MAAM,WACL,MAAM,GAAG,IAAI,aACX,KAAK,EAAE,KACjB,MAAM,GAAG,IAQX,CAAC;AACF,eAAO,MAAM,mBAAmB,gBACjB,cAAc,EAAE,UACrB,MAAM,KACb,OAUF,CAAC;AAEF,eAAO,MAAM,kCAAkC,sBAC1B,MAAM,EAAE,KAC1B,UAAU,EAUZ,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAkBrE;AA8CD,wBAAgB,UAAU,CACxB,MAAM,EAAE,KAAK,EAAE,EACf,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GAAG,IAAI,EAC/C,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,WAczC;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG,IAAI,EAC/D,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG,IAAI,WAOhE;AAED,wBAAgB,iCAAiC,CAC/C,OAAO,EAAE,eAAe,EAAE,GACzB,eAAe,EAAE,CAcnB;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,EAEf,QAAQ,SAAI,EAEZ,cAAc,SAAI,GACjB,MAAM,CAOR;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,gBAAgB,EAChB,UAAU,GACX,EAAE;IACD,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,GAAG,SAAS,CAMrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAEvD;AAED,wBAAgB,iBAAiB,CAAC,gBAAgB,EAAE,eAAe,EAAE,iBAmCpE;AAED,eAAO,MAAM,iBAAiB,qBACV,eAAe,EAAE,cACvB,MAAM,YAIjB,CAAC;AAEJ,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,UAE9D"}
+{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.21.1-next.9",
+  "version": "0.22.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.25.0",
     "@rango-dev/queue-manager-rango-preset": "^0.26.0",
     "@rango-dev/queue-manager-react": "^0.25.0",
-    "@rango-dev/ui": "^0.27.1-next.5",
+    "@rango-dev/ui": "^0.28.0",
     "@rango-dev/wallets-react": "^0.12.0",
     "@rango-dev/wallets-shared": "^0.26.0",
     "bignumber.js": "^9.1.1",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -11,7 +11,6 @@ import {
   ChevronLeftIcon,
   Divider,
   MessageBox,
-  Modal,
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
@@ -26,6 +25,7 @@ import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainShortNameFor } from '../../utils/meta';
 import { confirmSwapDisabled } from '../../utils/swap';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
 import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
 
@@ -52,6 +52,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
   //TODO: move component's logics to a custom hook
   const { open, onClose, onCancel, onCheckBalance, loading } = props;
   const config = useAppStore().config;
+
   const blockchains = useAppStore().blockchains();
   const {
     quote,
@@ -232,8 +233,9 @@ export function ConfirmWalletsModal(props: PropTypes) {
   ) as HTMLDivElement;
 
   const navigate = useNavigate();
+
   return (
-    <Modal
+    <WatermarkedModal
       open={open}
       onClose={() => {
         if (!quoteWalletsConfirmed) {
@@ -291,7 +293,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
         ),
       })}
       anchor="center">
-      <Modal
+      <WatermarkedModal
         open={balanceWarnings.length > 0}
         onClose={setBalanceWarnings.bind(null, [])}
         container={modalContainer}>
@@ -308,7 +310,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
             {i18n.t('Proceed anyway')}
           </Button>
         </MessageBox>
-      </Modal>
+      </WatermarkedModal>
       {showMoreWalletFor && (
         <WalletsContainer>
           <div className={walletsListStyles()}>
@@ -467,6 +469,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
           </Wallets>
         </>
       )}
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -9,7 +9,6 @@ import {
   Divider,
   Image,
   MessageBox,
-  Modal,
   SelectableWallet,
   Typography,
   WalletState,
@@ -32,6 +31,7 @@ import {
   getConciseAddress,
   isExperimentalChain,
 } from '../../utils/wallets';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 import { WalletModal } from '../WalletModal';
 
 import { ShowMoreWallets } from './ConfirmWallets.styles';
@@ -59,24 +59,23 @@ export function WalletList(props: PropTypes) {
     useState<'in-progress' | 'completed' | 'rejected' | null>(null);
   const { suggestAndConnect } = useWallets();
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
-  const { list, error, handleClick, disconnectConnectingWallets } =
-    useWalletList({
-      config,
-      chain,
-      onBeforeConnect: (type) => {
-        modalTimerId = setTimeout(() => {
-          setOpenWalletStateModal(type);
-        }, TIME_TO_IGNORE_MODAL);
-      },
-      onConnect: () => {
-        if (modalTimerId) {
-          clearTimeout(modalTimerId);
-        }
-        setTimeout(() => {
-          setOpenWalletStateModal('');
-        }, TIME_TO_CLOSE_MODAL);
-      },
-    });
+  const { list, error, handleClick } = useWalletList({
+    config,
+    chain,
+    onBeforeConnect: (type) => {
+      modalTimerId = setTimeout(() => {
+        setOpenWalletStateModal(type);
+      }, TIME_TO_IGNORE_MODAL);
+    },
+    onConnect: () => {
+      if (modalTimerId) {
+        clearTimeout(modalTimerId);
+      }
+      setTimeout(() => {
+        setOpenWalletStateModal('');
+      }, TIME_TO_CLOSE_MODAL);
+    },
+  });
   const [sortedList, setSortedList] = useState<WalletInfo[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
@@ -134,11 +133,6 @@ export function WalletList(props: PropTypes) {
     };
   }, [addingExperimentalChainStatus]);
 
-  const handleCloseWalletModal = () => {
-    disconnectConnectingWallets();
-    setOpenWalletStateModal('');
-  };
-
   return (
     <>
       {sortedList.slice(0, limit).map((wallet) => {
@@ -201,13 +195,13 @@ export function WalletList(props: PropTypes) {
           <>
             <WalletModal
               open={openWalletStateModal === wallet.type}
-              onClose={handleCloseWalletModal}
+              onClose={() => setOpenWalletStateModal('')}
               image={wallet.image}
               state={wallet.state}
               error={error}
             />
             {!!experimentalChainWallet && (
-              <Modal
+              <WatermarkedModal
                 open={!!experimentalChainWallet && showExperimentalChainModal}
                 container={modalContainer}
                 onClose={() => {
@@ -237,10 +231,10 @@ export function WalletList(props: PropTypes) {
                     {i18n.t('Confirm')}
                   </Button>
                 </MessageBox>
-              </Modal>
+              </WatermarkedModal>
             )}
             {addingExperimentalChainStatus && (
-              <Modal
+              <WatermarkedModal
                 open={!!addingExperimentalChainStatus}
                 onClose={setAddingExperimentalChainStatus.bind(null, null)}
                 container={modalContainer}>
@@ -292,7 +286,7 @@ export function WalletList(props: PropTypes) {
                 )}
 
                 <Divider direction="vertical" size={32} />
-              </Modal>
+              </WatermarkedModal>
             )}
             <SelectableWallet
               key={wallet.type}

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

@@ -1,6 +1,7 @@
 import { styled } from '@rango-dev/ui';
 
 const WIDGET_HEIGHT = '700px';
+
 export const Container = styled('div', {
   position: 'relative',
   display: 'flex',
@@ -35,11 +36,17 @@ export const Content = styled('div', {
   padding: 0,
   overflowY: 'auto',
 });
+
 export const Footer = styled('div', {
-  '& .footer__content': {
-    padding: '$0 $20',
-  },
+  padding: '0 $20 $10',
   '& .footer__logo': {
-    padding: '$0 $20 $10 $20',
+    opacity: 0,
+    transition: 'opacity 1s ease-in-out',
+    '&.logo__show': {
+      opacity: 1,
+    },
+    '&.logo__hidden': {
+      visibility: 'hidden',
+    },
   },
 });

package/src/components/Layout/Layout.tsx

@@ -25,12 +25,15 @@ import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
 import { Container, Content, Footer } from './Layout.styles';
 
 function Layout(props: PropsWithChildren<PropTypes>) {
-  const { children, header, footer, hasLogo = true, height = 'fixed' } = props;
   const { connectHeightObserver, disconnectHeightObserver } = useIframe();
+  const { children, header, footer, height = 'fixed' } = props;
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
   } = useAppStore();
+  const { watermark } = useUiStore();
+
+  const hasWatermark = watermark === 'FULL';
   const { activeTheme } = useTheme(theme || {});
 
   const isConnectWalletHidden = isFeatureHidden(
@@ -83,7 +86,6 @@ function Layout(props: PropsWithChildren<PropTypes>) {
       'scroll',
       onScrollContentAttachStatusToContainer
     );
-
     return () => {
       scrollViewRef.current?.removeEventListener(
         'scroll',
@@ -121,25 +123,27 @@ function Layout(props: PropsWithChildren<PropTypes>) {
         onClose={() => setShowActivateTabModal(false)}
         onConfirm={onActivateTab}
       />
-      {(hasLogo || footer) && (
-        <Footer>
-          <div className="footer__content">
-            {footer}
-            {tabManagerInitiated && !isActiveTab && (
-              <>
-                <Divider size={12} />
-                <ActivateTabAlert onActivateTab={onActivateTab} />
-              </>
-            )}
-          </div>
-          <Divider size={12} />
-          {hasLogo && (
-            <div className="footer__logo">
-              <BottomLogo />
-            </div>
+
+      <Footer>
+        <div className="footer__content">
+          {footer}
+          {tabManagerInitiated && !isActiveTab && (
+            <>
+              <Divider size={12} />
+              <ActivateTabAlert onActivateTab={onActivateTab} />
+            </>
           )}
-        </Footer>
-      )}
+        </div>
+
+        <Divider size={12} />
+
+        <div
+          className={`footer__logo ${
+            hasWatermark ? 'logo__show' : 'logo__hidden'
+          }`}>
+          <BottomLogo />
+        </div>
+      </Footer>
     </Container>
   );
 }

package/src/components/Layout/Layout.types.ts

@@ -15,7 +15,6 @@ export interface PropTypes {
     hasBackButton?: boolean;
     onCancel?: () => void;
   };
-  hasLogo?: boolean;
   footer?: React.ReactNode;
   height?: ContainerHeightProp;
 }

package/src/components/Quote/QuoteCostDetails.tsx

@@ -7,7 +7,6 @@ import {
   CloseIcon,
   Divider,
   IconButton,
-  Modal,
   QuoteCost,
   Tooltip,
   Typography,
@@ -36,6 +35,7 @@ import {
   getTotalFeesInUsd,
   getUsdFee,
 } from '../../utils/swap';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
 import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
 
@@ -96,7 +96,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
         tooltipContainer={container}
       />
 
-      <Modal
+      <WatermarkedModal
         container={container}
         open={open}
         header={
@@ -212,7 +212,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
             </CustomCollapsible>
           )}
         </ModalContainer>
-      </Modal>
+      </WatermarkedModal>
     </>
   );
 }

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -5,7 +5,6 @@ import {
   Button,
   Divider,
   MessageBox,
-  Modal,
   Typography,
   WarningIcon,
 } from '@rango-dev/ui';
@@ -22,6 +21,7 @@ import {
 } from '../../constants/routing';
 import { getContainer } from '../../utils/common';
 import { numberToString } from '../../utils/numbers';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { QuoteErrorsModalItem } from './QuoteErrorsModalItem';
 import { Flex } from './QuoteWarningsAndErrors.styles';
@@ -37,6 +37,7 @@ type Props = {
 export function HighValueLossWarningModal(props: Props) {
   const { open, onClose, onConfirm, warning, confirmationDisabled } = props;
   const type = warning.warningLevel === 'high' ? 'error' : 'warning';
+
   const highValueLossData = [
     {
       title: i18n.t('Swapping'),
@@ -74,7 +75,7 @@ export function HighValueLossWarningModal(props: Props) {
   ];
 
   return (
-    <Modal open={open} onClose={onClose} container={getContainer()}>
+    <WatermarkedModal open={open} onClose={onClose} container={getContainer()}>
       <MessageBox
         type={type}
         title={errorMessages().highValueLossError.impactTitle}
@@ -104,6 +105,6 @@ export function HighValueLossWarningModal(props: Props) {
         onClick={onConfirm}>
         {errorMessages().highValueLossError.confirmMessage}
       </Button>
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -4,7 +4,7 @@ import type {
 } from '../../types';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, MessageBox, Modal, Typography } from '@rango-dev/ui';
+import { Button, Divider, MessageBox, Typography } from '@rango-dev/ui';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -12,6 +12,7 @@ import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { QuoteWarningType } from '../../types';
 import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 type PropsTypes = {
   open: boolean;
@@ -26,8 +27,9 @@ export function SlippageWarningModal(props: PropsTypes) {
   const { open, onClose, onConfirm, warning, confirmationDisabled } = props;
   const navigate = useNavigate();
   const userSlippage = customSlippage ?? slippage;
+
   return (
-    <Modal
+    <WatermarkedModal
       anchor="bottom"
       open={open}
       prefix={
@@ -74,6 +76,6 @@ export function SlippageWarningModal(props: PropsTypes) {
           {i18n.t('Confirm anyway')}
         </Button>
       </MessageBox>
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -1,10 +1,11 @@
 import type { UnknownPriceWarning } from '../../types';
 
-import { Button, Divider, MessageBox, Modal, WarningIcon } from '@rango-dev/ui';
+import { Button, Divider, MessageBox, WarningIcon } from '@rango-dev/ui';
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
 import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 type Props = {
   open: boolean;
@@ -16,9 +17,8 @@ type Props = {
 
 export function UnknownPriceWarningModal(props: Props) {
   const { open, onClose, onConfirm, confirmationDisabled } = props;
-
   return (
-    <Modal open={open} onClose={onClose} container={getContainer()}>
+    <WatermarkedModal open={open} onClose={onClose} container={getContainer()}>
       <MessageBox
         type="warning"
         title={errorMessages().unknownPriceError.impactTitle}
@@ -35,6 +35,6 @@ export function UnknownPriceWarningModal(props: Props) {
         onClick={onConfirm}>
         {errorMessages().unknownPriceError.confirmMessage}
       </Button>
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -5,7 +5,6 @@ import {
   Button,
   Divider,
   MessageBox,
-  Modal,
   TokenAmount,
   Typography,
 } from '@rango-dev/ui';
@@ -14,6 +13,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
 import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
@@ -33,7 +33,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const navigate = useNavigate();
 
   return (
-    <Modal
+    <WatermarkedModal
       open={open}
       onClose={onClose}
       container={
@@ -107,6 +107,6 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           {i18n.t('See Details')}
         </Typography>
       </Button>
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -1,8 +1,8 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
 
-import { MessageBox, Wallet, WalletState } from '@rango-dev/ui';
+import { MessageBox, Wallet } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
 import { getContainer } from '../../utils/common';
 import { mapStatusToWalletState } from '../../utils/wallets';
@@ -18,40 +18,14 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
     showWalletButton,
     walletButtonDisabled,
   } = props;
-  const { connect, getWalletInfo, state, disconnect } = useWallets();
+  const { connect, getWalletInfo, state } = useWallets();
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
     ? mapStatusToWalletState(state(walletType))
     : null;
-  const componentWillUnmount = useRef(false);
-
   const walletInfo = walletType ? getWalletInfo(walletType) : null;
   const shouldShowWallet =
     showWalletButton && !!walletType && !!walletState && !!walletInfo;
-
-  /*
-   * The order of useEffects is crucial.
-   * 1- The first useEffect for componentWillUnmount sets its value to true
-   */
-  useEffect(() => {
-    return () => {
-      componentWillUnmount.current = true;
-    };
-  }, []);
-
-  // 2- The second useEffect checks if componentWillUnmount is true then it disconnects connecting wallet
-  useEffect(() => {
-    return () => {
-      if (
-        componentWillUnmount.current &&
-        walletType &&
-        walletState === WalletState.CONNECTING
-      ) {
-        void disconnect(walletType);
-      }
-    };
-  }, [walletState]);
-
   return (
     <>
       <MessageBox type={type} title={title} description={message} />

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -1,10 +1,10 @@
 import type { ModalPropTypes } from './SwapDetailsModal.types';
 
-import { Modal } from '@rango-dev/ui';
 import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { CancelContent } from './SwapDetailsModal.Cancel';
 import { DeleteContent } from './SwapDetailsModal.Delete';
@@ -28,7 +28,7 @@ export function SwapDetailsModal(props: ModalPropTypes) {
     state === PendingSwapNetworkStatus.NetworkChanged;
 
   return (
-    <Modal
+    <WatermarkedModal
       open={!!state}
       onClose={onClose}
       container={
@@ -52,6 +52,6 @@ export function SwapDetailsModal(props: ModalPropTypes) {
       {state === 'cancel' && (
         <CancelContent onClose={onClose} onCancel={onCancel} />
       )}
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/WalletModal/WalletModal.tsx

@@ -1,9 +1,10 @@
 import type { PropTypes } from './WalletModal.types';
 
-import { Divider, Modal } from '@rango-dev/ui';
+import { Divider } from '@rango-dev/ui';
 import React from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { ModalContent } from './WalletModalContent';
 
@@ -11,7 +12,7 @@ export function WalletModal(props: PropTypes) {
   const { open, onClose, ...otherProps } = props;
 
   return (
-    <Modal
+    <WatermarkedModal
       open={open}
       onClose={onClose}
       container={
@@ -19,6 +20,6 @@ export function WalletModal(props: PropTypes) {
       }>
       <ModalContent {...otherProps} />
       <Divider direction="vertical" size={32} />
-    </Modal>
+    </WatermarkedModal>
   );
 }