@rango-dev/widget-embedded 0.21.1-next.5 → 0.21.1-next.6

package/dist/store/slices/config.d.ts

@@ -1,9 +1,17 @@
 import type { WidgetConfig } from '../../types';
 import type { StateCreatorWithInitialData } from '../app';
 export declare const DEFAULT_CONFIG: WidgetConfig;
+interface IframeConfigs {
+    clientUrl?: string;
+}
 export type ConfigSlice = {
     config: WidgetConfig;
     updateConfig: (config: WidgetConfig) => void;
+    iframe: {
+        clientUrl?: string;
+    };
+    updateIframe: <K extends keyof IframeConfigs>(name: K, value: IframeConfigs[K]) => void;
 };
 export declare const createConfigSlice: StateCreatorWithInitialData<WidgetConfig, ConfigSlice, ConfigSlice>;
+export {};
 //# sourceMappingURL=config.d.ts.map

package/dist/store/slices/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/store/slices/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,cAAc,EAAE,YAM5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,YAAY,CAAC;IAErB,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CACzD,YAAY,EACZ,WAAW,EACX,WAAW,CAiBZ,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/store/slices/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,cAAc,EAAE,YAM5B,CAAC;AAEF,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,MAAM,MAAM,WAAW,GAAG;IAExB,MAAM,EAAE,YAAY,CAAC;IACrB,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAG7C,MAAM,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,YAAY,EAAE,CAAC,CAAC,SAAS,MAAM,aAAa,EAC1C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KACpB,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CACzD,YAAY,EACZ,WAAW,EACX,WAAW,CA6BZ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.21.1-next.5",
+  "version": "0.21.1-next.6",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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

@@ -6,7 +6,7 @@ export const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '$primary',
-  width: '100vh',
+  width: '100vw',
   minWidth: '300px',
   maxWidth: '390px',
   boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',

package/src/components/Layout/Layout.tsx

@@ -7,6 +7,8 @@ import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React, { useEffect, useRef } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
+import { useIframe } from '../../hooks/useIframe';
+import { isAppLoadedIntoIframe } from '../../hooks/useIframe/useIframe.helpers';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
@@ -24,6 +26,7 @@ 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 connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
@@ -60,6 +63,20 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     typeof header.hasBackButton === 'undefined' || header.hasBackButton;
 
   const scrollViewRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const isIframe = isAppLoadedIntoIframe();
+
+    // This feature only will be available in an iframe context.
+    if (isIframe && containerRef.current) {
+      connectHeightObserver(containerRef.current);
+    }
+
+    return () => {
+      disconnectHeightObserver();
+    };
+  }, []);
 
   useEffect(() => {
     scrollViewRef.current?.addEventListener(
@@ -79,7 +96,8 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     <Container
       height={height}
       id={WIDGET_UI_ID.SWAP_BOX_ID}
-      className={activeTheme()}>
+      className={activeTheme()}
+      ref={containerRef}>
       <Header
         prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}

package/src/constants/searchParams.ts

@@ -5,4 +5,6 @@ export enum SearchParams {
   TO_TOKEN = 'toToken',
   FROM_AMOUNT = 'fromAmount',
   AUTO_CONNECT = 'autoConnect',
+  // iframe environments
+  CLIENT_URL = 'clientUrl',
 }

package/src/hooks/useIframe/index.ts

@@ -0,0 +1 @@
+export { useIframe } from './useIframe';

package/src/hooks/useIframe/useIframe.helpers.ts

@@ -0,0 +1,3 @@
+export function isAppLoadedIntoIframe() {
+  return window.self !== window.top;
+}

package/src/hooks/useIframe/useIframe.ts

@@ -0,0 +1,55 @@
+import type { Messages } from './useIframe.types';
+
+import { useRef } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+
+import { isAppLoadedIntoIframe } from './useIframe.helpers';
+
+interface UseIframe {
+  send: (message: Messages) => void;
+  connectHeightObserver: (element: HTMLElement) => void;
+  disconnectHeightObserver: () => void;
+}
+
+function useIframe(): UseIframe {
+  const heightObserver = useRef<ResizeObserver | null>(null);
+  const { iframe } = useAppStore();
+  const isMessagePassingAvailable = isAppLoadedIntoIframe() && iframe.clientUrl;
+
+  const send = (message: Messages) => {
+    if (isMessagePassingAvailable) {
+      window.top?.postMessage(message, iframe.clientUrl!);
+    }
+  };
+
+  const connectHeightObserver = (element: HTMLElement) => {
+    heightObserver.current = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        send({
+          type: 'widget_height',
+          data: {
+            height: entry.contentRect.height,
+          },
+        });
+      }
+    });
+
+    heightObserver.current.observe(element);
+  };
+
+  const disconnectHeightObserver = () => {
+    if (heightObserver.current) {
+      heightObserver.current.disconnect();
+      heightObserver.current = null;
+    }
+  };
+
+  return {
+    send,
+    connectHeightObserver,
+    disconnectHeightObserver,
+  };
+}
+
+export { useIframe };

package/src/hooks/useIframe/useIframe.types.ts

@@ -0,0 +1,13 @@
+type Message<T, D> = {
+  type: T;
+  data: D;
+};
+type WidgetHeightMessage = Message<
+  'widget_height',
+  {
+    height: number;
+  }
+>;
+
+// Add new types of messages to this union.
+export type Messages = WidgetHeightMessage;

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -33,6 +33,7 @@ export function useSyncUrlAndStore() {
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const isInRouterContext = useInRouterContext();
+  const { updateIframe } = useAppStore();
 
   const getUrlSearchParams = () => {
     const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
@@ -41,6 +42,7 @@ export function useSyncUrlAndStore() {
     const toBlockchain = searchParams.get(SearchParams.TO_BLOCKCHAIN);
     const toToken = searchParams.get(SearchParams.TO_TOKEN);
     const autoConnect = searchParams.get(SearchParams.AUTO_CONNECT);
+    const clientUrl = searchParams.get(SearchParams.CLIENT_URL);
 
     return {
       fromAmount,
@@ -49,6 +51,7 @@ export function useSyncUrlAndStore() {
       toBlockchain,
       toToken,
       autoConnect,
+      clientUrl,
     };
   };
 
@@ -64,7 +67,7 @@ export function useSyncUrlAndStore() {
   };
 
   useEffect(() => {
-    const { autoConnect } = getUrlSearchParams();
+    const { autoConnect, clientUrl } = getUrlSearchParams();
     if (isInRouterContext && fetchMetaStatus === 'success') {
       updateUrlSearchParams({
         [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
@@ -73,6 +76,7 @@ export function useSyncUrlAndStore() {
         [SearchParams.TO_TOKEN]: tokenToSearchParam(toToken),
         [SearchParams.FROM_AMOUNT]: inputAmount,
         [SearchParams.AUTO_CONNECT]: autoConnect ?? undefined,
+        [SearchParams.CLIENT_URL]: clientUrl ?? undefined,
       });
     }
   }, [
@@ -132,4 +136,10 @@ export function useSyncUrlAndStore() {
       }
     }
   }, [fetchMetaStatus]);
+
+  // We run this only once, because if the app is embedded into an iframe, the data in url for iframe will not change.
+  useEffect(() => {
+    const { clientUrl } = getUrlSearchParams();
+    updateIframe('clientUrl', clientUrl || undefined);
+  }, []);
 }

package/src/store/slices/config.ts

@@ -9,10 +9,25 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   customDestination: true,
 };
 
+interface IframeConfigs {
+  clientUrl?: string;
+}
+
+const DEFAULT_IFRAME_CONFIGS: IframeConfigs = {
+  clientUrl: undefined,
+};
+
 export type ConfigSlice = {
+  // What user can set directly.
   config: WidgetConfig;
-
   updateConfig: (config: WidgetConfig) => void;
+
+  // What we are setting based on enviroments.
+  iframe: { clientUrl?: string };
+  updateIframe: <K extends keyof IframeConfigs>(
+    name: K,
+    value: IframeConfigs[K]
+  ) => void;
 };
 
 export const createConfigSlice: StateCreatorWithInitialData<
@@ -22,6 +37,7 @@ export const createConfigSlice: StateCreatorWithInitialData<
 > = (initialData, set, get) => {
   return {
     config: { ...DEFAULT_CONFIG, ...initialData },
+    iframe: DEFAULT_IFRAME_CONFIGS,
 
     // Actions
     updateConfig: (nextConfig: WidgetConfig) => {
@@ -34,5 +50,16 @@ export const createConfigSlice: StateCreatorWithInitialData<
         },
       });
     },
+
+    updateIframe: (name, value) => {
+      const currentIframeConfig = get().iframe;
+
+      set({
+        iframe: {
+          ...currentIframeConfig,
+          [name]: value,
+        },
+      });
+    },
   };
 };