@rango-dev/widget-embedded 0.1.10-next.99 → 0.1.10

package/src/utils/time.ts

@@ -0,0 +1,52 @@
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+
+export function timeSince(timeMillis: number): string {
+  const seconds = Math.floor((new Date().getTime() - timeMillis) / 1000);
+  let intervalType: string;
+
+  let interval = Math.floor(seconds / 31536000);
+  if (interval >= 1) {
+    intervalType = 'year';
+  } else {
+    interval = Math.floor(seconds / 2592000);
+    if (interval >= 1) {
+      intervalType = 'month';
+    } else {
+      interval = Math.floor(seconds / 86400);
+      if (interval >= 1) {
+        intervalType = 'day';
+      } else {
+        interval = Math.floor(seconds / 3600);
+        if (interval >= 1) {
+          intervalType = 'hour';
+        } else {
+          interval = Math.floor(seconds / 60);
+          if (interval >= 1) {
+            intervalType = 'minute';
+          } else {
+            interval = seconds;
+            intervalType = 'second';
+          }
+        }
+      }
+    }
+  }
+
+  if (interval > 1 || interval === 0) {
+    intervalType += 's';
+  }
+
+  return interval + ' ' + intervalType;
+}
+
+export function getSwapDate(pendingSwap: PendingSwap) {
+  return pendingSwap.finishTime
+    ? `Finished ${timeSince(parseInt(pendingSwap.finishTime))} ago @ ${new Date(
+        parseInt(pendingSwap.finishTime)
+      ).toLocaleString()}`
+    : `Started ${timeSince(
+        parseInt(pendingSwap.creationTime)
+      )} ago @ ${new Date(
+        parseInt(pendingSwap.creationTime)
+      ).toLocaleString()}`;
+}

package/src/utils/wallets.ts

@@ -441,10 +441,13 @@ export function getSortedTokens(
   return sortTokens(getTokensWithBalance(filteredTokens, balances));
 }
 
-export function tokensAreEqual(tokenA: Token | null, tokenB: Token | null) {
+export function tokensAreEqual(
+  tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null,
+  tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null
+) {
   return (
     tokenA?.blockchain === tokenB?.blockchain &&
-    tokenA?.name === tokenB?.name &&
+    tokenA?.symbol === tokenB?.symbol &&
     tokenA?.address === tokenB?.address
   );
 }
@@ -469,7 +472,13 @@ export function sortWalletsBasedOnState(
     (a, b) =>
       Number(b.state === WalletStatus.CONNECTED) -
         Number(a.state === WalletStatus.CONNECTED) ||
-      Number(b.state === WalletStatus.DISCONNECTED) -
-        Number(a.state === WalletStatus.DISCONNECTED)
+      Number(
+        b.state === WalletStatus.DISCONNECTED ||
+          b.state === WalletStatus.CONNECTING
+      ) -
+        Number(
+          a.state === WalletStatus.DISCONNECTED ||
+            a.state === WalletStatus.CONNECTING
+        )
   );
 }

package/dist/components/Header.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export declare const HeaderContainer: any;
-export interface PropTypes {
-    onClickRefresh: () => void;
-    title?: string;
-    titleSize?: number;
-    titleWeight?: number;
-}
-export declare function Header(props: PropTypes): JSX.Element;
-//# sourceMappingURL=Header.d.ts.map

package/dist/components/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../src/components/Header.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,eAAe,KAM1B,CAAC;AAEH,MAAM,WAAW,SAAS;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,eAgBtC"}

package/dist/pages/ConfirmWalletsPage.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function ConfirmWalletsPage(): JSX.Element;
-//# sourceMappingURL=ConfirmWalletsPage.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ConfirmWalletsPage.d.ts","sourceRoot":"","sources":["../src/pages/ConfirmWalletsPage.tsx"],"names":[],"mappings":";AA4BA,wBAAgB,kBAAkB,gBAkGjC"}

package/src/components/Header.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { css, styled, Typography } from '@rango-dev/ui';
-import { HeaderButtons } from './HeaderButtons';
-import { useTranslation } from 'react-i18next';
-
-export const HeaderContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%',
-  padding: '$16 0',
-});
-
-export interface PropTypes {
-  onClickRefresh: () => void;
-  title?: string;
-  titleSize?: number;
-  titleWeight?: number;
-}
-
-export function Header(props: PropTypes) {
-  const { onClickRefresh, title, titleSize, titleWeight } = props;
-  const { t } = useTranslation();
-  const titleStyle = css({
-    fontSize: `${titleSize}px !important`,
-    fontWeight: `${titleWeight} !important`,
-  });
-
-  return (
-    <HeaderContainer>
-      <Typography variant="h4" className={titleStyle()}>
-        {title ? t(title.toLocaleLowerCase()) : ''}
-      </Typography>
-      <HeaderButtons onClickRefresh={onClickRefresh} />
-    </HeaderContainer>
-  );
-}

package/src/pages/ConfirmWalletsPage.tsx

@@ -1,127 +0,0 @@
-import React, { useEffect } from 'react';
-import { ConfirmWallets } from '@rango-dev/ui';
-import { useNavigate } from 'react-router-dom';
-import { useBestRouteStore } from '../store/bestRoute';
-import { useWalletsStore } from '../store/wallets';
-import { useWallets } from '@rango-dev/wallets-core';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import {
-  getKeplrCompatibleConnectedWallets,
-  getRequiredChains,
-  getSelectableWallets,
-  isExperimentalChain,
-} from '../utils/wallets';
-import {
-  calcOutputUsdValue,
-  getTotalFeeInUsd,
-  requiredWallets,
-} from '../utils/swap';
-import { decimalNumber, numberToString } from '../utils/numbers';
-import { useMetaStore } from '../store/meta';
-import { Network, WalletType } from '@rango-dev/wallets-shared';
-import { useNavigateBack } from '../hooks/useNavigateBack';
-import { TokenPreview } from '../components/TokenPreview';
-// @ts-ignore // TODO: fix error in tsc build
-import { t } from 'i18next';
-import { Spacer } from '@rango-dev/ui';
-import RoutesOverview from '../components/RoutesOverview';
-
-export function ConfirmWalletsPage() {
-  const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-
-  const { blockchains, tokens } = useMetaStore.use.meta();
-  const accounts = useWalletsStore.use.accounts();
-  const selectedWallets = useWalletsStore.use.selectedWallets();
-  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
-  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
-
-  const { getWalletInfo, connect } = useWallets();
-  const confirmDisabled = !requiredWallets(bestRoute).every((chain) =>
-    selectedWallets.map((wallet) => wallet.chain).includes(chain)
-  );
-
-  const firstStep = bestRoute?.result?.swaps[0];
-  const lastStep =
-    bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
-
-  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
-  const toAmount = decimalNumber(lastStep?.toAmount, 3);
-  useEffect(() => {
-    initSelectedWallets();
-  }, []);
-
-  const selectableWallets = getSelectableWallets(
-    accounts,
-    selectedWallets,
-    getWalletInfo
-  );
-
-  const handleConnectChain = (wallet: string) => {
-    const network = wallet as Network;
-    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(
-      (compatibleWallet: WalletType) => connect?.(compatibleWallet, network)
-    );
-  };
-
-  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-
-  return (
-    <ConfirmWallets
-      requiredWallets={getRequiredChains(bestRoute)}
-      selectableWallets={selectableWallets}
-      onBack={navigateBackFrom.bind(null, navigationRoutes.confirmWallets)}
-      onConfirm={() =>
-        navigate(navigationRoutes.confirmSwap, { replace: true })
-      }
-      onChange={(wallet) => setSelectedWallet(wallet)}
-      confirmDisabled={confirmDisabled}
-      handleConnectChain={(wallet) => handleConnectChain(wallet)}
-      isExperimentalChain={(wallet) =>
-        getKeplrCompatibleConnectedWallets(selectableWallets).length > 0
-          ? isExperimentalChain(blockchains, wallet)
-          : false
-      }
-      previewInputs={
-        <>
-          <TokenPreview
-            chain={{
-              displayName: firstStep?.from.blockchain || '',
-              logo: firstStep?.from.blockchainLogo || '',
-            }}
-            token={{
-              symbol: firstStep?.from.symbol || '',
-              image: firstStep?.from.logo || '',
-            }}
-            usdValue={calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice)}
-            amount={fromAmount}
-            label={t('From')}
-            loadingStatus={'success'}
-          />
-          <Spacer size={12} direction="vertical" />
-          <TokenPreview
-            chain={{
-              displayName: lastStep?.to.blockchain || '',
-              logo: lastStep?.to.blockchainLogo || '',
-            }}
-            token={{
-              symbol: lastStep?.to.symbol || '',
-              image: lastStep?.to.logo || '',
-            }}
-            usdValue={calcOutputUsdValue(toAmount, lastStep?.to.usdPrice)}
-            amount={toAmount}
-            label={t('To')}
-            loadingStatus={'success'}
-          />
-        </>
-      }
-      previewRoutes={
-        <RoutesOverview
-          routes={bestRoute}
-          totalFee={numberToString(totalFeeInUsd, 0, 2)}
-        />
-      }
-    />
-  );
-}