@rango-dev/widget-embedded 0.20.1-next.7 → 0.20.1-next.8

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAyD5E,wBAAgB,eAAe,sBA2S9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AA0D5E,wBAAgB,eAAe,sBA6S9B"}

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA+C3D,wBAAgB,IAAI,sBAyOnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA+C3D,wBAAgB,IAAI,sBA6OnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.1-next.7",
+  "version": "0.20.1-next.8",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.25.0",
     "@rango-dev/queue-manager-rango-preset": "^0.25.1-next.1",
     "@rango-dev/queue-manager-react": "^0.24.0",
-    "@rango-dev/ui": "^0.26.1-next.3",
+    "@rango-dev/ui": "^0.26.1-next.4",
     "@rango-dev/wallets-react": "^0.11.1-next.1",
     "@rango-dev/wallets-shared": "^0.25.1-next.1",
     "bignumber.js": "^9.1.1",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/HeaderButtons/HeaderButtons.styles.ts

@@ -38,3 +38,15 @@ export const NotificationsBadgeContainer = styled('div', {
   top: '$0',
   right: '$0',
 });
+
+export const ProgressIcon = styled('div', {
+  padding: '$2',
+  variants: {
+    isRefetched: {
+      true: {
+        transform: `rotate(360deg)`,
+        transition: 'transform 1s ease-in-out',
+      },
+    },
+  },
+});

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -4,7 +4,6 @@ import { i18n } from '@lingui/core';
 import {
   NotificationsIcon,
   Popover,
-  RefreshIcon,
   SettingsIcon,
   Tooltip,
   TransactionIcon,
@@ -17,6 +16,7 @@ import { isFeatureHidden } from '../../utils/settings';
 import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
+import { RefreshButton } from './RefreshButton';
 import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
 
 export function HomeButtons(props: HomeButtonsPropTypes) {
@@ -34,13 +34,7 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
         container={getContainer()}
         side="top"
         content={i18n.t('Refresh')}>
-        <HeaderButton
-          variant="ghost"
-          size="small"
-          onClick={onClickRefresh}
-          disabled={!onClickRefresh}>
-          <RefreshIcon size={16} color={!onClickRefresh ? 'gray' : 'black'} />
-        </HeaderButton>
+        <RefreshButton onClick={onClickRefresh} />
       </Tooltip>
 
       {!isNotificationsHidden && (

package/src/components/HeaderButtons/RefreshButton.tsx

@@ -0,0 +1,81 @@
+import { RefreshProgressButton } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { HeaderButton, ProgressIcon } from './HeaderButtons.styles';
+
+const REFRESH_INTERVAL = 1000;
+const MAX_ELAPSED_TIME = 60;
+const MAX_PERCENTAGE = 100;
+
+function RefreshButton({ onClick }: { onClick: (() => void) | undefined }) {
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [isRefetched, setIsRefetched] = useState(false);
+
+  const handleVisibilityChange = (interval?: number) => {
+    if (document.hidden && interval) {
+      // Tab is inactive, clear the interval
+      clearTimeout(interval);
+    }
+  };
+
+  useEffect(() => {
+    let interval: number | undefined;
+    if (onClick) {
+      interval = window.setInterval(() => {
+        setElapsedTime((prevTime) => prevTime + 1);
+
+        if (elapsedTime === MAX_ELAPSED_TIME) {
+          handleRefreshClick();
+        }
+      }, REFRESH_INTERVAL);
+    } else {
+      clearTimeout(interval);
+    }
+
+    document.addEventListener('visibilitychange', () =>
+      handleVisibilityChange(interval)
+    );
+
+    return () => {
+      document.removeEventListener('visibilitychange', () =>
+        handleVisibilityChange(interval)
+      );
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [elapsedTime, onClick]);
+
+  const clearTimeout = (interval?: number) => {
+    if (interval) {
+      clearInterval(interval);
+    }
+    setElapsedTime(0);
+  };
+
+  const handleRefreshClick = () => {
+    onClick?.();
+    setElapsedTime(0);
+    setIsRefetched(true);
+  };
+
+  return (
+    <HeaderButton
+      variant="ghost"
+      size="small"
+      onClick={handleRefreshClick}
+      disabled={!onClick}>
+      <ProgressIcon
+        onTransitionEnd={() => setIsRefetched(false)}
+        isRefetched={isRefetched}>
+        <RefreshProgressButton
+          size={24}
+          color={!onClick ? 'gray' : 'black'}
+          progress={(elapsedTime / MAX_ELAPSED_TIME) * MAX_PERCENTAGE}
+        />
+      </ProgressIcon>
+    </HeaderButton>
+  );
+}
+
+export { RefreshButton };

package/src/pages/ConfirmSwapPage.tsx

@@ -12,7 +12,6 @@ import {
   css,
   Divider,
   IconButton,
-  RefreshIcon,
   SettingsIcon,
   styled,
   Tooltip,
@@ -26,6 +25,7 @@ import { useNavigate } from 'react-router-dom';
 import { getRequiredWallets } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
 import { HeaderButton } from '../components/HeaderButtons/HeaderButtons.styles';
+import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
 import { Layout } from '../components/Layout';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../constants/warnings';
@@ -324,15 +324,17 @@ export function ConfirmSwapPage() {
           <Typography variant="title" size="small">
             {i18n.t('You get')}
           </Typography>
-          <Button
-            style={{ padding: '0' }}
-            variant="ghost"
-            disabled={fetchingConfirmationQuote}
-            onClick={onRefresh}>
-            <div className={iconStyles()}>
-              <RefreshIcon size={16} />
-            </div>
-          </Button>
+          <div className={iconStyles()}>
+            <RefreshButton
+              onClick={
+                !fetchingConfirmationQuote &&
+                !showWallets &&
+                !showQuoteWarningModal
+                  ? onRefresh
+                  : undefined
+              }
+            />
+          </div>
         </div>
         {dbErrorMessage && (
           <>

package/src/pages/Home.tsx

@@ -161,7 +161,11 @@ export function Home() {
         suffix: (
           <HomeButtons
             layoutRef={layoutRef.current}
-            onClickRefresh={!!quote || quoteError ? fetchQuote : undefined}
+            onClickRefresh={
+              (!!quote || quoteError) && !showQuoteWarningModal
+                ? fetchQuote
+                : undefined
+            }
             onClickHistory={() => navigate(navigationRoutes.swaps)}
             onClickSettings={() => navigate(navigationRoutes.settings)}
           />