@rango-dev/widget-embedded 0.21.1-next.0 → 0.21.1-next.10

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 { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { ModalContent } from './WalletModalContent';
 
@@ -11,12 +12,14 @@ export function WalletModal(props: PropTypes) {
   const { open, onClose, ...otherProps } = props;
 
   return (
-    <Modal
+    <WatermarkedModal
       open={open}
       onClose={onClose}
-      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
       <ModalContent {...otherProps} />
       <Divider direction="vertical" size={32} />
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/common/ActivateTabModal/ActivateTabModal.tsx

@@ -1,15 +1,21 @@
 import type { PropTypes } from './ActivateTabModal.types';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, MessageBox, Modal } from '@rango-dev/ui';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
 import React from 'react';
 
 import { getContainer } from '../../../utils/common';
+import { WatermarkedModal } from '../WatermarkedModal';
 
 export function ActivateTabModal(props: PropTypes) {
   const { open, onClose, onConfirm } = props;
+
   return (
-    <Modal open={open} dismissible onClose={onClose} container={getContainer()}>
+    <WatermarkedModal
+      open={open}
+      dismissible
+      onClose={onClose}
+      container={getContainer()}>
       <MessageBox
         title={i18n.t('Activate current tab')}
         type="warning"
@@ -26,6 +32,6 @@ export function ActivateTabModal(props: PropTypes) {
           {i18n.t('Confirm')}
         </Button>
       </MessageBox>
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/common/WatermarkedModal/WatermarkedModal.tsx

@@ -0,0 +1,18 @@
+import type { ModalPropTypes } from '@rango-dev/ui';
+import type { PropsWithChildren } from 'react';
+
+import { Modal } from '@rango-dev/ui';
+import React from 'react';
+
+import { useUiStore } from '../../../store/ui';
+
+export function WatermarkedModal(props: PropsWithChildren<ModalPropTypes>) {
+  const { watermark } = useUiStore();
+
+  const hasWatermark = watermark === 'FULL';
+  return (
+    <Modal hasWatermark={hasWatermark} {...props}>
+      {props.children}
+    </Modal>
+  );
+}

package/src/components/common/WatermarkedModal/index.ts

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

package/src/constants/index.ts

@@ -1,4 +1,10 @@
+import { UI_ID } from '@rango-dev/ui';
+
 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';
 export const SCANNER_BASE_URL = 'https://scan.rango.exchange';
+
+export const WIDGET_UI_ID = {
+  SWAP_BOX_ID: 'rango-swap-box',
+  ...UI_ID,
+};

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/containers/App/App.tsx

@@ -7,6 +7,7 @@ import { AppRouter } from '../../components/AppRouter';
 import { AppRoutes } from '../../components/AppRoutes';
 import { WidgetEvents } from '../../components/WidgetEvents';
 import { globalFont } from '../../globalStyles';
+import { useFetchApiConfig } from '../../hooks/useFetchApiConfig';
 import { useLanguage } from '../../hooks/useLanguage';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
@@ -25,10 +26,11 @@ export function Main() {
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
   const widgetContext = useContext(WidgetContext);
-
+  const { fetchApiConfig } = useFetchApiConfig();
   useEffect(() => {
     void useNotificationStore.persist.rehydrate();
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
+    void fetchApiConfig().catch(console.log);
   }, []);
 
   return (

package/src/hooks/useFetchApiConfig.ts

@@ -0,0 +1,33 @@
+import { useUiStore } from '../store/ui';
+import { getConfig } from '../utils/configs';
+
+export type Watermark = 'NONE' | 'FULL';
+
+type ConfigResponse = {
+  config: {
+    watermark: Watermark;
+  };
+};
+
+interface UseFetchApiConfig {
+  fetchApiConfig: () => Promise<void>;
+}
+
+export function useFetchApiConfig(): UseFetchApiConfig {
+  const { setWatermark } = useUiStore();
+
+  const fetchApiConfig: UseFetchApiConfig['fetchApiConfig'] = async () => {
+    const response = await fetch(
+      `${getConfig('BASE_URL')}/meta/dapp/config?apiKey=${getConfig('API_KEY')}`
+    );
+
+    if (!response.ok) {
+      throw new Error(`Request failed with status: ${response.status} `);
+    }
+
+    const data: ConfigResponse = await response.json();
+
+    setWatermark(data.config.watermark);
+  };
+  return { fetchApiConfig };
+}

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/useSwapInput.ts

@@ -11,7 +11,7 @@ import { isPositiveNumber } from '../utils/numbers';
 import { generateQuoteWarnings } from '../utils/quote';
 import { isFeatureEnabled } from '../utils/settings';
 import { createQuoteRequestBody } from '../utils/swap';
-import { tokensAreEqual } from '../utils/wallets';
+import { areTokensEqual } from '../utils/wallets';
 
 import {
   handleQuoteErrors,
@@ -68,7 +68,7 @@ export function useSwapInput(): UseSwapInput {
   const tokensValueInvalid = !fromToken || !toToken;
   const shouldSkipRequest =
     tokensValueInvalid ||
-    tokensAreEqual(fromToken, toToken) ||
+    areTokensEqual(fromToken, toToken) ||
     !isPositiveNumber(inputAmount);
 
   const resetState = (loading: boolean) => {

package/src/hooks/useSyncStoresWithConfig.ts

@@ -8,7 +8,7 @@ import {
   isBlockchainExcludedInConfig,
   isTokenExcludedInConfig,
 } from '../utils/configs';
-import { tokensAreEqual } from '../utils/wallets';
+import { areTokensEqual } from '../utils/wallets';
 
 export function useSyncStoresWithConfig() {
   const {
@@ -50,7 +50,7 @@ export function useSyncStoresWithConfig() {
         (chain) => chain.name === config?.from?.blockchain
       );
       const token = tokens.find((t) =>
-        tokensAreEqual(t, config?.from?.token || null)
+        areTokensEqual(t, config?.from?.token || null)
       );
 
       if (chain || (!chain && prevConfigFromBlockchain.current)) {
@@ -99,7 +99,7 @@ export function useSyncStoresWithConfig() {
         (chain) => chain.name === config?.to?.blockchain
       );
       const token = tokens.find((t) =>
-        tokensAreEqual(t, config?.to?.token || null)
+        areTokensEqual(t, config?.to?.token || null)
       );
 
       if (chain || (!chain && prevConfigToBlockchain.current)) {

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/hooks/useWalletList.ts

@@ -9,12 +9,13 @@ import {
   type WalletType,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useWalletsStore } from '../store/wallets';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
+  hashWalletsState,
   isExperimentalChain,
   mapWalletTypesToWalletInfo,
   sortWalletsBasedOnConnectionState,
@@ -39,6 +40,7 @@ export function useWalletList(params: Params) {
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();
+  const componentWillUnmount = useRef(false);
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
   const listAvailableWalletTypes =
@@ -87,21 +89,34 @@ export function useWalletList(params: Params) {
     }
   };
 
-  const disconnectConnectingWallets = () => {
+  const disconnectConnectingWallets = useCallback(() => {
     const connectingWallets =
       wallets?.filter((wallet) => wallet.state === WalletState.CONNECTING) ||
       [];
     for (const wallet of connectingWallets) {
       void disconnect(wallet.type);
     }
-  };
+  }, [hashWalletsState(wallets)]);
 
+  /*
+   * The order of useEffects is crucial.
+   * 1- The first useEffect for componentWillUnmount sets its value to true
+   */
   useEffect(() => {
     return () => {
-      disconnectConnectingWallets();
+      componentWillUnmount.current = true;
     };
   }, []);
 
+  // 2- The second useEffect checks if componentWillUnmount is true then it disconnects connecting wallets
+  useEffect(() => {
+    return () => {
+      if (componentWillUnmount.current) {
+        disconnectConnectingWallets();
+      }
+    };
+  }, [disconnectConnectingWallets]);
+
   /*
    * Atm, we only support default injected wallet for the EVM
    * so we show default wallet when there is no other evm wallet installed
@@ -141,5 +156,6 @@ export function useWalletList(params: Params) {
     ),
     error,
     handleClick,
+    disconnectConnectingWallets,
   };
 }

package/src/index.ts

@@ -55,6 +55,7 @@ import {
 import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
 import { PendingSwapNetworkStatus } from 'rango-types';
 
+import { WIDGET_UI_ID as UI_ID } from './constants';
 import { WidgetWallets } from './containers/Wallets';
 import { Widget } from './containers/Widget';
 import { useWidget } from './containers/WidgetInfo';
@@ -105,6 +106,7 @@ export {
   StepEventType,
   StepExecutionEventStatus,
   StepExecutionBlockedEventStatus,
+  UI_ID,
 };
 
 // Internal type exports for Rango

package/src/pages/HistoryPage.tsx

@@ -6,15 +6,15 @@ import { Divider, NotFound, styled } from '@rango-dev/ui';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { HistoryGroupedList } from '../components/HistoryGroupedList';
+import { NotFoundContainer } from '../components/HistoryGroupedList/HistoryGroupedList.styles';
 import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
-import { SwapsGroup } from '../components/SwapsGroup';
-import { NotFoundContainer } from '../components/SwapsGroup/SwapsGroup.styles';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
 import { getPendingSwaps } from '../utils/queue';
 
-const SwapsGroupContainer = styled('div', {
+const HistoryGroupedListContainer = styled('div', {
   overflowY: 'visible',
   width: '100%',
   display: 'flex',
@@ -77,7 +77,7 @@ export function HistoryPage() {
           value={searchedFor}
         />
         <Divider size="16" />
-        <SwapsGroupContainer>
+        <HistoryGroupedListContainer>
           {isEmpty && (
             <NotFoundContainer>
               <Divider size={32} />
@@ -90,14 +90,14 @@ export function HistoryPage() {
             </NotFoundContainer>
           )}
           {!isEmpty && (
-            <SwapsGroup
+            <HistoryGroupedList
               list={filteredList}
               onSwapClick={navigate}
               groupBy={groupSwapsByDate}
               isLoading={loading}
             />
           )}
-        </SwapsGroupContainer>
+        </HistoryGroupedListContainer>
       </PageContainer>
     </Layout>
   );

package/src/pages/Home.tsx

@@ -62,7 +62,7 @@ export function Home() {
     setQuoteWarningsConfirmed,
   } = useQuoteStore();
 
-  const fetchMetaStatus = useAppStore().fetchStatus;
+  const { config, fetchStatus: fetchMetaStatus } = useAppStore();
 
   const { connectedWallets, getBalanceFor } = useWalletsStore();
   const { isActiveTab } = useUiStore();
@@ -125,7 +125,6 @@ export function Home() {
   return (
     <Layout
       height="auto"
-      hasLogo
       footer={
         <Button
           type="primary"
@@ -152,7 +151,7 @@ export function Home() {
           navigate(navigationRoutes.wallets);
         },
         hasBackButton: false,
-        title: i18n.t('Swap'),
+        title: config.title || i18n.t('Swap'),
         suffix: (
           <HomeButtons
             onClickRefresh={

package/src/pages/WalletsPage.tsx

@@ -35,23 +35,29 @@ export function WalletsPage() {
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  const { list, handleClick, error } = useWalletList({
-    config,
-    onBeforeConnect: (type) => {
-      modalTimerId = setTimeout(() => {
-        setOpenModal(true);
-        setSelectedWalletType(type);
-      }, TIME_TO_IGNORE_MODAL);
-    },
-    onConnect: () => {
-      if (modalTimerId) {
-        clearTimeout(modalTimerId);
-      }
-      setTimeout(() => {
-        setOpenModal(false);
-      }, TIME_TO_CLOSE_MODAL);
-    },
-  });
+  const { list, handleClick, error, disconnectConnectingWallets } =
+    useWalletList({
+      config,
+      onBeforeConnect: (type) => {
+        modalTimerId = setTimeout(() => {
+          setOpenModal(true);
+          setSelectedWalletType(type);
+        }, TIME_TO_IGNORE_MODAL);
+      },
+      onConnect: () => {
+        if (modalTimerId) {
+          clearTimeout(modalTimerId);
+        }
+        setTimeout(() => {
+          setOpenModal(false);
+        }, TIME_TO_CLOSE_MODAL);
+      },
+    });
+
+  const handleCloseWalletModal = () => {
+    disconnectConnectingWallets();
+    setOpenModal(false);
+  };
 
   const selectedWallet = list.find(
     (wallet) => wallet.type === selectedWalletType
@@ -87,7 +93,7 @@ export function WalletsPage() {
           })}
           <WalletModal
             open={!!openModal}
-            onClose={() => setOpenModal(false)}
+            onClose={handleCloseWalletModal}
             image={selectedWalletImage}
             state={selectedWalletState}
             error={error}

package/src/store/notification.ts

@@ -34,13 +34,13 @@ export const useNotificationStore = createSelectors(
             route: {
               from: {
                 blockchain: fromStep.fromBlockchain,
-                tokenAddress: fromStep.fromSymbolAddress,
-                tokenSymbol: fromStep.fromSymbol,
+                address: fromStep.fromSymbolAddress,
+                symbol: fromStep.fromSymbol,
               },
               to: {
                 blockchain: toStep.toBlockchain,
-                tokenSymbol: toStep.toSymbol,
-                tokenAddress: toStep.toSymbolAddress,
+                address: toStep.toSymbolAddress,
+                symbol: toStep.toSymbol,
               },
             },
           };

package/src/store/slices/config.ts

@@ -3,15 +3,31 @@ import type { StateCreatorWithInitialData } from '../app';
 
 export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
+  title: undefined,
   multiWallets: true,
   enableNewLiquiditySources: true,
   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<
@@ -21,6 +37,7 @@ export const createConfigSlice: StateCreatorWithInitialData<
 > = (initialData, set, get) => {
   return {
     config: { ...DEFAULT_CONFIG, ...initialData },
+    iframe: DEFAULT_IFRAME_CONFIGS,
 
     // Actions
     updateConfig: (nextConfig: WidgetConfig) => {
@@ -33,5 +50,16 @@ export const createConfigSlice: StateCreatorWithInitialData<
         },
       });
     },
+
+    updateIframe: (name, value) => {
+      const currentIframeConfig = get().iframe;
+
+      set({
+        iframe: {
+          ...currentIframeConfig,
+          [name]: value,
+        },
+      });
+    },
   };
 };

package/src/store/slices/data.ts

@@ -8,7 +8,7 @@ import { httpService as sdk } from '../../services/httpService';
 import { containsText } from '../../utils/common';
 import { isTokenExcludedInConfig } from '../../utils/configs';
 import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
-import { tokensAreEqual } from '../../utils/wallets';
+import { areTokensEqual } from '../../utils/wallets';
 
 type BlockchainOptions = {
   type?: 'source' | 'destination';
@@ -163,7 +163,7 @@ export const createDataSlice: StateCreator<
         ? get().config.from?.pinnedTokens
         : get().config.to?.pinnedTokens;
     const pinned = !!pinnedTokens?.some((pinnedToken) =>
-      tokensAreEqual(pinnedToken, token)
+      areTokensEqual(pinnedToken, token)
     );
     return pinned;
   },