@rango-dev/widget-embedded 0.21.1-next.9 → 0.22.1

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>
   );
 }

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

@@ -4,13 +4,14 @@ import type { PropsWithChildren } from 'react';
 import React, { useEffect } from 'react';
 
 import { DEFAULT_CONFIG } from '../../store/slices/config';
-import { destroyTabManager } from '../../store/ui';
+import { tabManager } from '../../store/ui';
 import { Main } from '../App';
 import { WidgetProvider } from '../WidgetProvider';
 
 export function Widget(props: PropsWithChildren<WidgetProps>) {
   useEffect(() => {
-    return destroyTabManager;
+    tabManager.init();
+    return tabManager.destroy;
   }, []);
 
   if (!props.config?.externalWallets) {

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -7,7 +7,7 @@ import { useLanguage } from '../../hooks/useLanguage';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
-import { setCurrentTabAsActive, useUiStore } from '../../store/ui';
+import { tabManager, useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { calculateWalletUsdValue } from '../../utils/wallets';
 
@@ -36,7 +36,7 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   const value: WidgetInfoContextInterface = {
     isActiveTab,
-    setCurrentTabAsActive,
+    setCurrentTabAsActive: tabManager.forceClaim,
     history,
     wallets: {
       isLoading,

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

@@ -9,13 +9,12 @@ import {
   type WalletType,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useWalletsStore } from '../store/wallets';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
-  hashWalletsState,
   isExperimentalChain,
   mapWalletTypesToWalletInfo,
   sortWalletsBasedOnConnectionState,
@@ -40,7 +39,6 @@ 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 =
@@ -89,34 +87,21 @@ export function useWalletList(params: Params) {
     }
   };
 
-  const disconnectConnectingWallets = useCallback(() => {
+  const disconnectConnectingWallets = () => {
     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 () => {
-      componentWillUnmount.current = true;
+      disconnectConnectingWallets();
     };
   }, []);
 
-  // 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
@@ -156,6 +141,5 @@ export function useWalletList(params: Params) {
     ),
     error,
     handleClick,
-    disconnectConnectingWallets,
   };
 }

package/src/libs/tabManager/tabManager.ts

@@ -18,9 +18,12 @@ export class TabManager implements TabManagerInterface {
     this.channel = new BroadcastChannel(CHANNEL_NAME);
     this.tabId = Math.trunc(Math.random() * MAXIMUM_TAB_ID);
     this.events = events;
+  }
+
+  init = () => {
     this.initEvents();
     void this.tryClaim();
-  }
+  };
 
   /**
    * This is applicable when a user in an inactive tab seeks to activate that tab.

package/src/libs/tabManager/tabManager.types.ts

@@ -22,6 +22,7 @@ export type Events = {
 };
 
 export interface TabManagerInterface {
+  init: () => void;
   forceClaim: () => void;
   isClaimed: () => boolean;
   destroy: () => void;

package/src/pages/Home.tsx

@@ -125,7 +125,6 @@ export function Home() {
   return (
     <Layout
       height="auto"
-      hasLogo
       footer={
         <Button
           type="primary"

package/src/pages/WalletsPage.tsx

@@ -35,29 +35,23 @@ export function WalletsPage() {
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  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 { 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 selectedWallet = list.find(
     (wallet) => wallet.type === selectedWalletType
@@ -93,7 +87,7 @@ export function WalletsPage() {
           })}
           <WalletModal
             open={!!openModal}
-            onClose={handleCloseWalletModal}
+            onClose={() => setOpenModal(false)}
             image={selectedWalletImage}
             state={selectedWalletState}
             error={error}

package/src/store/ui.ts

@@ -1,3 +1,4 @@
+import type { Watermark } from '../hooks/useFetchApiConfig';
 import type { TabManagerInterface } from '../libs/tabManager';
 
 import { create } from 'zustand';
@@ -10,11 +11,13 @@ 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 const useUiStore = createSelectors(
@@ -22,6 +25,8 @@ export const useUiStore = createSelectors(
     isActiveTab: false,
     tabManagerInitiated: false,
     showActivateTabModal: false,
+    watermark: 'NONE',
+    fetchingApiConfig: false,
     activateCurrentTab: (setCurrentTabAsActive, hasRunningSwaps) => {
       const { showActivateTabModal } = get();
 
@@ -34,16 +39,15 @@ export const useUiStore = createSelectors(
     setShowActivateTabModal: (flag) => {
       set({ showActivateTabModal: flag });
     },
+    setWatermark: (watermark) => {
+      set({ watermark });
+    },
   }))
 );
 
-const tabManager: TabManagerInterface = new TabManager({
+export const tabManager: TabManagerInterface = new TabManager({
   onInit: () => useUiStore.setState({ tabManagerInitiated: true }),
   onClaim: () =>
     useUiStore.setState({ isActiveTab: true, showActivateTabModal: false }),
   onRelease: () => useUiStore.setState({ isActiveTab: false }),
 });
-
-export const setCurrentTabAsActive = tabManager.forceClaim;
-
-export const destroyTabManager = tabManager.destroy;

package/src/utils/wallets.ts

@@ -551,7 +551,3 @@ export const isFetchingBalance = (
   !!connectedWallets.find(
     (wallet) => wallet.chain === blockchain && wallet.loading
   );
-
-export function hashWalletsState(walletsInfo: ModalWalletInfo[]) {
-  return walletsInfo.map((w) => w.state).join('-');
-}