@rango-dev/widget-embedded 0.40.2-next.4 → 0.40.2-next.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.40.2-next.4",
+  "version": "0.40.2-next.6",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -27,10 +27,10 @@
     "@rango-dev/logging-core": "^0.7.1-next.1",
     "@rango-dev/provider-all": "^0.43.1-next.4",
     "@rango-dev/queue-manager-core": "^0.28.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.43.1-next.4",
+    "@rango-dev/queue-manager-rango-preset": "^0.43.1-next.5",
     "@rango-dev/queue-manager-react": "^0.28.1-next.0",
     "@rango-dev/signer-solana": "^0.37.1-next.2",
-    "@rango-dev/ui": "^0.44.1-next.4",
+    "@rango-dev/ui": "^0.44.1-next.5",
     "@rango-dev/wallets-core": "^0.41.1-next.4",
     "@rango-dev/wallets-react": "^0.28.1-next.4",
     "@rango-dev/wallets-shared": "^0.42.1-next.4",

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

@@ -26,6 +26,11 @@ export const Container = styled('div', {
         height: WIDGET_HEIGHT,
       },
     },
+    showBanner: {
+      true: {
+        overflow: 'visible',
+      },
+    },
   },
 });
 
@@ -55,3 +60,10 @@ export const Footer = styled('div', {
     },
   },
 });
+
+export const BannerContainer = styled('div', {
+  width: '100%',
+  position: 'absolute',
+  bottom: '-$10',
+  transform: 'translateY(100%)',
+});

package/src/components/Layout/Layout.tsx

@@ -4,7 +4,7 @@ import type { PropsWithChildren } from 'react';
 
 import { useManager } from '@rango-dev/queue-manager-react';
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
 import { useIframe } from '../../hooks/useIframe';
@@ -22,12 +22,22 @@ import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 import { RefreshModal } from '../RefreshModal';
 
 import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
-import { Container, Content, Footer, LayoutContainer } from './Layout.styles';
+import {
+  BannerContainer,
+  Container,
+  Content,
+  Footer,
+  LayoutContainer,
+} from './Layout.styles';
 
 function Layout(props: PropsWithChildren<PropTypes>) {
   const { connectHeightObserver, disconnectHeightObserver } = useIframe();
   const { children, header, footer, height = 'fixed' } = props;
-  const { fetchStatus, connectedWallets } = useAppStore();
+  const {
+    fetchStatus,
+    connectedWallets,
+    config: { __UNSTABLE_OR_INTERNAL__ },
+  } = useAppStore();
   const [openRefreshModal, setOpenRefreshModal] = useState(false);
   const {
     config: { features, theme },
@@ -68,6 +78,22 @@ function Layout(props: PropsWithChildren<PropTypes>) {
 
   const scrollViewRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const showBanner = useMemo(() => {
+    const anyRouteExists =
+      (__UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.routes?.length ?? 0) === 0;
+    const routesMatched =
+      !!__UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.routes?.some((route) =>
+        location.pathname.endsWith(route)
+      );
+
+    return (
+      __UNSTABLE_OR_INTERNAL__?.swapBoxBanner &&
+      (anyRouteExists || routesMatched)
+    );
+  }, [
+    __UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.routes?.length,
+    location.pathname,
+  ]);
 
   useEffect(() => {
     const isIframe = isAppLoadedIntoIframe();
@@ -104,7 +130,8 @@ function Layout(props: PropsWithChildren<PropTypes>) {
       height={height}
       id={WIDGET_UI_ID.SWAP_BOX_ID}
       className={`${activeTheme()} ${LayoutContainer()}`}
-      ref={containerRef}>
+      ref={containerRef}
+      showBanner={showBanner}>
       <Header
         prefix={
           showBackButton ? (
@@ -112,7 +139,7 @@ function Layout(props: PropsWithChildren<PropTypes>) {
               onClick={() => {
                 navigateBack();
                 // As an example, used in routes page to add a custom logic when navigating back to the home page.
-                header.onBack && header.onBack();
+                header.onBack?.();
               }}
             />
           ) : null
@@ -159,6 +186,11 @@ function Layout(props: PropsWithChildren<PropTypes>) {
           <BottomLogo />
         </div>
       </Footer>
+      {showBanner && (
+        <BannerContainer>
+          {__UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.element}
+        </BannerContainer>
+      )}
       <RefreshModal
         open={openRefreshModal}
         onClose={() => setOpenRefreshModal(false)}

package/src/types/config.ts

@@ -2,6 +2,7 @@ import type { Language, theme } from '@rango-dev/ui';
 import type { LegacyProviderInterface } from '@rango-dev/wallets-core/dist/legacy/mod';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
+import type { ReactElement } from 'react';
 
 export type WidgetVariant = 'default' | 'expanded' | 'full-expanded';
 
@@ -273,6 +274,10 @@ export type WidgetConfig = {
   __UNSTABLE_OR_INTERNAL__?: {
     walletConnectListedDesktopWalletLink?: string;
     autoUpdateSettings?: boolean; // If true, settings will be updated automatically based on the configuration.
+    swapBoxBanner?: {
+      element: ReactElement;
+      routes?: string[];
+    };
   };
   routing?: Routing;
 };