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

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/dist/pages/LiquiditySourcePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAexC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBAqH5D"}
+{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAexC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBAwH5D"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBA+FnD"}
+{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAmGnD"}

package/dist/utils/date.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2CAA2C,CAAC;AAKzE,eAAO,MAAM,gBAAgB,EAAE,OAmE9B,CAAC"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2CAA2C,CAAC;AAMzE,eAAO,MAAM,gBAAgB,EAAE,OAmE9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.1-next.7",
+  "version": "0.20.1-next.9",
   "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",

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -274,7 +274,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
               type="primary"
               fullWidth
               size="large">
-              Confirm
+              {i18n.t('Confirm')}
             </Button>
           </ConfirmButton>
         ),

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

@@ -23,7 +23,10 @@ export const ConnectedIcon = styled('div', {
 export const SuffixContainer = styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
-  width: '$40',
+  minWidth: '$40',
+  button: {
+    padding: 0,
+  },
 });
 
 export const NotificationsBadgeContainer = styled('div', {
@@ -38,3 +41,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/components/Quote/QuoteSummary.tsx

@@ -1,5 +1,6 @@
 import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 
+import { i18n } from '@lingui/core';
 import { TokenAmount } from '@rango-dev/ui';
 import React from 'react';
 
@@ -21,7 +22,7 @@ export function QuoteSummary(props: PropTypes) {
     <Container>
       <TokenAmount
         direction="horizontal"
-        label="Swap input"
+        label={i18n.t('Swap input')}
         type="input"
         tooltipContainer={getContainer()}
         price={{
@@ -39,8 +40,8 @@ export function QuoteSummary(props: PropTypes) {
       <div className={separatorStyles()} />
       <TokenAmount
         direction="horizontal"
-        label="Estimated output"
         tooltipContainer={getContainer()}
+        label={i18n.t('Estimated output')}
         type="output"
         price={{
           value: to.price.value,

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -18,11 +18,11 @@ export function SwapsGroup(props: PropTypes) {
 
     const loadingGroups = [
       {
-        title: 'Today',
+        title: i18n.t('Today'),
         swaps,
       },
       {
-        title: 'This month',
+        title: i18n.t('This month'),
         swaps,
       },
     ];
@@ -36,7 +36,7 @@ export function SwapsGroup(props: PropTypes) {
                   variant="label"
                   size="medium"
                   className={groupStyles()}>
-                  {i18n.t(group.title)}
+                  {group.title}
                 </Typography>
               </Time>
               <Divider size={4} />
@@ -69,7 +69,7 @@ export function SwapsGroup(props: PropTypes) {
                   variant="label"
                   size="medium"
                   className={groupStyles()}>
-                  {i18n.t(group.title)}
+                  {group.title}
                 </Typography>
               </Time>
               <Divider size={4} />
@@ -85,8 +85,8 @@ export function SwapsGroup(props: PropTypes) {
                         creationTime={swap.creationTime}
                         status={swap.status}
                         onClick={onSwapClick}
-                        onlyShowTime={group.title === 'Today'}
                         tooltipContainer={getContainer()}
+                        onlyShowTime={group.title === i18n.t('Today')}
                         swapTokenData={{
                           from: {
                             token: {

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

package/src/pages/LiquiditySourcePage.tsx

@@ -40,6 +40,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
     getUniqueSwappersGroups(swappers, disabledLiquiditySources);
 
+  const types = { Exchanges: i18n.t('Exchanges'), Bridges: i18n.t('Bridges') };
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {
     validTypes.push('DEX');
@@ -103,7 +104,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
         suffix: (
           <LiquiditySourceSuffix>
             <Button variant="ghost" size="xsmall" onClick={toggleAllSources}>
-              {i18n.t(hasSelectAll ? 'Deselect all' : 'Select all')}
+              {hasSelectAll ? i18n.t('Deselect all') : i18n.t('Select all')}
             </Button>
           </LiquiditySourceSuffix>
         ),
@@ -115,7 +116,9 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           fullWidth
           color="light"
           variant="contained"
-          placeholder={i18n.t('Search {sourceType}', { sourceType })}
+          placeholder={i18n.t('Search {sourceType}', {
+            sourceType: types[sourceType],
+          })}
           onChange={searchHandler}
         />
         {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}

package/src/pages/SelectBlockchainPage.tsx

@@ -2,7 +2,7 @@ import { i18n } from '@lingui/core';
 import {
   Divider,
   getCountCategories,
-  SelectableCategoryList
+  SelectableCategoryList,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
@@ -27,7 +27,7 @@ export function SelectBlockchainPage(props: PropTypes) {
   const fetchStatus = useAppStore().fetchStatus;
 
   const blockchains = useAppStore().blockchains({
-    type: type
+    type,
   });
 
   const countActiveCategories = getCountCategories(blockchains);
@@ -37,7 +37,7 @@ export function SelectBlockchainPage(props: PropTypes) {
   return (
     <Layout
       header={{
-        title: i18n.t(`Select Blockchain`)
+        title: i18n.t(`Select Blockchain`),
       }}>
       <Divider size={12} />
 

package/src/pages/SelectSwapItemsPage.tsx

@@ -68,11 +68,15 @@ export function SelectSwapItemsPage(props: PropTypes) {
       setToToken({ token, meta: { blockchains, tokens } });
     }
   };
+  const types = {
+    source: i18n.t('Source'),
+    destination: i18n.t('Destination'),
+  };
 
   return (
     <Layout
       header={{
-        title: i18n.t('Swap {type}', { type }),
+        title: i18n.t('Swap {type}', { type: types[type] }),
       }}>
       <BlockchainsSection
         blockchains={blockchains}

package/src/utils/date.ts

@@ -1,6 +1,7 @@
 import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
 import type { PendingSwap } from 'rango-types';
 
+import { i18n } from '@lingui/core';
 import dayjs from 'dayjs';
 
 export const groupSwapsByDate: GroupBy = (swaps) => {
@@ -14,28 +15,28 @@ export const groupSwapsByDate: GroupBy = (swaps) => {
     [
       'today',
       {
-        title: 'Today',
+        title: i18n.t('Today'),
         swaps: [],
       },
     ],
     [
       'week',
       {
-        title: 'This week',
+        title: i18n.t('This week'),
         swaps: [],
       },
     ],
     [
       'month',
       {
-        title: 'This month',
+        title: i18n.t('This month'),
         swaps: [],
       },
     ],
     [
       'year',
       {
-        title: 'This year',
+        title: i18n.t('This year'),
         swaps: [],
       },
     ],