@rango-dev/widget-embedded 0.36.1-next.13 → 0.36.1-next.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.36.1-next.13",
+  "version": "0.36.1-next.14",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
+import { useUiStore } from '../../store/ui';
 import { getContainer } from '../../utils/common';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
@@ -31,6 +32,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     diagnosisUrl,
   } = props;
   const navigate = useNavigate();
+  const { showProfileBanner } = useUiStore();
 
   return (
     <WatermarkedModal
@@ -72,21 +74,32 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           description={description}
         />
       )}
-      <Divider size={32} />
+      <Divider size={30} />
       {status === 'success' && (
-        <Button
-          id="widget-swap-details-modal-done-btn"
-          variant="contained"
-          type="primary"
-          size="large"
-          onClick={() => {
-            const home = '../../';
-            navigate(home);
-          }}>
-          <Typography variant="title" size="medium" color="neutral100">
+        <>
+          {showProfileBanner && (
+            <>
+              <img
+                src={
+                  'https://raw.githubusercontent.com/rango-exchange/assets/main/banners/widget/profile.png'
+                }
+                alt="Profile Banner"
+              />
+              <Divider size={30} />
+            </>
+          )}
+          <Button
+            id="widget-swap-details-modal-done-btn"
+            variant="contained"
+            type="primary"
+            size="large"
+            onClick={() => {
+              const home = '../../';
+              navigate(home);
+            }}>
             {i18n.t('Done')}
-          </Typography>
-        </Button>
+          </Button>
+        </>
       )}
       <Divider size={12} />
       {diagnosisUrl && (

package/src/hooks/useFetchApiConfig.ts

@@ -6,6 +6,9 @@ export type Watermark = 'NONE' | 'FULL';
 type ConfigResponse = {
   config: {
     watermark: Watermark;
+    banners: {
+      profile: boolean;
+    };
   };
 };
 
@@ -14,7 +17,7 @@ interface UseFetchApiConfig {
 }
 
 export function useFetchApiConfig(): UseFetchApiConfig {
-  const { setWatermark } = useUiStore();
+  const { setWatermark, setShowProfileBanner } = useUiStore();
 
   const fetchApiConfig: UseFetchApiConfig['fetchApiConfig'] = async () => {
     const response = await fetch(
@@ -28,6 +31,7 @@ export function useFetchApiConfig(): UseFetchApiConfig {
     const data: ConfigResponse = await response.json();
 
     setWatermark(data.config.watermark);
+    setShowProfileBanner(data.config.banners.profile);
   };
   return { fetchApiConfig };
 }

package/src/store/ui.ts

@@ -12,12 +12,14 @@ interface UiState {
   tabManagerInitiated: boolean;
   showActivateTabModal: boolean;
   watermark: Watermark;
+  showProfileBanner: boolean;
   activateCurrentTab: (
     setCurrentTabAsActive: () => void,
     hasRunningSwaps: boolean
   ) => void;
   setShowActivateTabModal: (flag: boolean) => void;
   setWatermark: (watermark: Watermark) => void;
+  setShowProfileBanner: (showProfileBanner: boolean) => void;
 }
 
 export const useUiStore = createSelectors(
@@ -26,6 +28,7 @@ export const useUiStore = createSelectors(
     tabManagerInitiated: false,
     showActivateTabModal: false,
     watermark: 'NONE',
+    showProfileBanner: false,
     fetchingApiConfig: false,
     activateCurrentTab: (setCurrentTabAsActive, hasRunningSwaps) => {
       const { showActivateTabModal } = get();
@@ -42,6 +45,9 @@ export const useUiStore = createSelectors(
     setWatermark: (watermark) => {
       set({ watermark });
     },
+    setShowProfileBanner: (showProfileBanner) => {
+      set({ showProfileBanner });
+    },
   }))
 );