@rango-dev/widget-embedded 0.36.1-next.0 → 0.36.1-next.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.36.1-next.0",
+  "version": "0.36.1-next.10",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.40.1-next.0",
+    "@rango-dev/provider-all": "^0.40.1-next.5",
     "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.40.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.40.1-next.4",
     "@rango-dev/queue-manager-react": "^0.27.0",
-    "@rango-dev/signer-solana": "^0.35.0",
-    "@rango-dev/ui": "^0.42.1-next.0",
-    "@rango-dev/wallets-core": "^0.40.1-next.0",
-    "@rango-dev/wallets-react": "^0.26.1-next.0",
-    "@rango-dev/wallets-shared": "^0.40.1-next.0",
+    "@rango-dev/signer-solana": "^0.35.1-next.0",
+    "@rango-dev/ui": "^0.42.1-next.7",
+    "@rango-dev/wallets-core": "^0.40.1-next.4",
+    "@rango-dev/wallets-react": "^0.26.1-next.5",
+    "@rango-dev/wallets-shared": "^0.40.1-next.4",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/Quote/Quote.tsx

@@ -17,7 +17,11 @@ import {
 import BigNumber from 'bignumber.js';
 import React, { useRef, useState } from 'react';
 
-import { GAS_FEE_MAX } from '../../constants/quote';
+import {
+  GAS_FEE_MAX,
+  ROUTE_TIME_MAX,
+  SECONDS_IN_MINUTE,
+} from '../../constants/quote';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -311,7 +315,8 @@ export function Quote(props: QuoteProps) {
   const container = propContainer || getContainer();
   const sortedQuoteTags = sortTags(props.quote.tags || []);
   const showAllRoutesButton = !!onClickAllRoutes;
-  const totalTime = roundedSecondsToString(totalArrivalTime(quote?.swaps));
+  const totalDurationSeconds = totalArrivalTime(quote?.swaps);
+  const totalTime = roundedSecondsToString(totalDurationSeconds);
   const totalFee = getTotalFeeInUsd(quote?.swaps ?? [], findToken);
   const fee = numberToString(
     totalFee,
@@ -320,6 +325,8 @@ export function Quote(props: QuoteProps) {
   );
 
   const feeWarning = totalFee.gte(new BigNumber(GAS_FEE_MAX));
+  const timeWarning =
+    totalDurationSeconds / SECONDS_IN_MINUTE >= ROUTE_TIME_MAX;
 
   return fullExpandedMode ? (
     <FullExpandedQuote
@@ -329,7 +336,18 @@ export function Quote(props: QuoteProps) {
       tooltipContainer={getExpanded()}
       steps={steps}
       tags={sortedQuoteTags}
-      feeWarning={feeWarning}
+      quoteCost={
+        <QuoteCostDetails
+          quote={quote}
+          fullExpandedMode
+          time={totalTime}
+          fee={fee}
+          feeWarning={feeWarning}
+          timeWarning={timeWarning}
+          showModalFee={showModalFee}
+          steps={numberOfSteps}
+        />
+      }
       percentageChange={percentageChange}
       warningLevel={priceImpactWarningLevel}
       outputPrice={{
@@ -368,6 +386,7 @@ export function Quote(props: QuoteProps) {
             time={totalTime}
             fee={fee}
             feeWarning={feeWarning}
+            timeWarning={timeWarning}
             showModalFee={showModalFee}
             steps={numberOfSteps}
           />

package/src/components/Quote/Quote.types.ts

@@ -48,5 +48,7 @@ export type QuoteCostDetailsProps = {
   fee: string;
   time: string;
   feeWarning?: boolean;
+  timeWarning?: boolean;
   showModalFee: boolean;
+  fullExpandedMode?: boolean;
 };

package/src/components/Quote/QuoteCostDetails.styles.ts

@@ -28,7 +28,6 @@ export const ModalContainer = styled('div', {
 
 export const ModalHeader = styled('div', {
   padding: '$20 $20 $10',
-  textAlign: 'center',
   position: 'relative',
   '._icon-button': {
     position: 'absolute',

package/src/components/Quote/QuoteCostDetails.tsx

@@ -21,7 +21,7 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
-import { getContainer } from '../../utils/common';
+import { getContainer, getExpanded } from '../../utils/common';
 import { numberToString } from '../../utils/numbers';
 import { getFeesGroup, getTotalFeesInUsd, getUsdFee } from '../../utils/swap';
 import { WatermarkedModal } from '../common/WatermarkedModal';
@@ -57,9 +57,18 @@ const NonPayableFee = (props: { fee: BigNumber; label: string }) => {
 export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const [open, setOpen] = useState<boolean>(false);
   const [openCollapse, setOpenCollapse] = useState<boolean>(false);
-  const { steps, quote, fee, time, feeWarning, showModalFee } = props;
+  const {
+    steps,
+    quote,
+    fee,
+    time,
+    feeWarning,
+    timeWarning,
+    showModalFee,
+    fullExpandedMode = false,
+  } = props;
   const swaps = quote?.swaps ?? [];
-  const container = getContainer();
+  const container = fullExpandedMode ? getExpanded() : getContainer();
 
   const feesGroup = getFeesGroup(swaps);
 
@@ -76,6 +85,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
         }
         fee={fee}
         feeWarning={feeWarning}
+        timeWarning={timeWarning}
         time={time}
         steps={steps}
         tooltipGas={showModalFee ? i18n.t('View more info') : undefined}
@@ -85,8 +95,17 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
       <WatermarkedModal
         container={container}
         open={open}
+        anchor={fullExpandedMode ? 'center' : 'bottom'}
+        styles={{
+          container: {
+            maxWidth: fullExpandedMode ? '484px' : 'unset',
+          },
+        }}
         header={
-          <ModalHeader>
+          <ModalHeader
+            style={{
+              textAlign: fullExpandedMode ? 'left' : 'center',
+            }}>
             <Typography variant="title" size="medium">
               {i18n.t('Gas & Fee Explanation')}
             </Typography>

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -1,6 +1,6 @@
 import type { Result } from '../../hooks/useStatefulConnect';
 import type { WalletInfoWithExtra } from '../../types';
-import type { Namespace } from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 import { Divider } from '@rango-dev/ui';
 import React, { useEffect, useRef, useState } from 'react';

package/src/components/WalletStatefulConnect/DerivationPath.helpers.ts

@@ -1,4 +1,5 @@
-import type { DerivationPath, Namespace } from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { DerivationPath } from '@rango-dev/wallets-shared';
 
 import { namespaces } from '@rango-dev/wallets-shared';
 

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -1,5 +1,5 @@
 import type { PropTypes } from './Namespaces.types';
-import type { Namespace } from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 import { i18n } from '@lingui/core';
 import {

package/src/components/WalletStatefulConnect/Namespaces.types.tsx

@@ -1,5 +1,5 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
-import type { Namespace } from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 export interface PropTypes {
   onConfirm: (namespaces: Namespace[]) => void;

package/src/constants/quote.ts

@@ -33,3 +33,5 @@ export const HIGH_PRIORITY_TAGS: TagValue[] = [
 ];
 
 export const GAS_FEE_MAX = 30;
+export const ROUTE_TIME_MAX = 15;
+export const SECONDS_IN_MINUTE = 60;

package/src/containers/ExpandedQuotes/ExpandedQuotes.styles.ts

@@ -4,6 +4,7 @@ export const Container = styled('div', {
   transition: 'width 0.2s, opacity 0.2s, margin-left 0.2s',
   height: '700px',
   width: '390px',
+  position: 'relative',
   opacity: 1,
   marginLeft: '$16',
   backgroundColor: '$neutral100',

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -64,7 +64,7 @@ export function ExpandedQuotes(props: PropTypes) {
       />
       <Content>
         <Quotes
-          showModalFee={false}
+          showModalFee={true}
           fetch={fetch}
           hasSort={false}
           loading={loading}

package/src/hooks/useFetchCustomToken.ts

@@ -103,6 +103,11 @@ export function useFetchCustomToken(): UseFetchCustomToken {
 
       return token;
     } catch (error: any) {
+      if (error?.code === 'ERR_BAD_REQUEST') {
+        const errorMessage = produceErrorMessage('not-found', blockchain);
+        setError(errorMessage);
+        return undefined;
+      }
       setError(undefined);
       throw new Error(error.message);
     } finally {

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -1,11 +1,8 @@
 import type { HandleConnectOptions, Result } from './useStatefulConnect.types';
 import type { WalletInfoWithExtra } from '../../types';
 import type { ExtendedModalWalletInfo } from '../../utils/wallets';
-import type {
-  Namespace,
-  NamespaceData,
-  WalletType,
-} from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { NamespaceData, WalletType } from '@rango-dev/wallets-shared';
 
 import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -1,4 +1,4 @@
-import type { Namespace } from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 export interface HandleConnectOptions {
   // To have a switch between connect and disconnect when user is clicking on a button, this option can be helpful.

package/src/store/slices/data.ts

@@ -348,8 +348,9 @@ export const createDataSlice: StateCreator<
         {};
       const tokens: Token[] = [];
       const popularTokens: Token[] = response.popularTokens;
-      const swappers: SwapperMeta[] = response.swappers;
-
+      const swappers: SwapperMeta[] = response.swappers.filter(
+        (swapper) => swapper.enabled
+      );
       const blockchainsWithAtLeastOneToken = new Set();
 
       response.tokens.forEach((token) => {

package/src/types/wallets.ts

@@ -1,5 +1,6 @@
 import type { WalletInfo } from '@rango-dev/ui';
-import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { WalletType } from '@rango-dev/wallets-shared';
 
 export interface Wallet {
   chain: string;

package/src/utils/hub.ts

@@ -1,6 +1,5 @@
 import type { CommonNamespaceKeys } from '@rango-dev/wallets-core';
-
-import { Namespace } from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 export function convertCommonNamespacesKeysToLegacyNamespace(
   namespaces: CommonNamespaceKeys[]
@@ -8,15 +7,15 @@ export function convertCommonNamespacesKeysToLegacyNamespace(
   return namespaces.map((namespace) => {
     switch (namespace) {
       case 'evm':
-        return Namespace.Evm;
+        return 'EVM';
       case 'solana':
-        return Namespace.Solana;
+        return 'Solana';
       case 'cosmos':
-        return Namespace.Cosmos;
+        return 'Cosmos';
+      default:
+        throw new Error(
+          'Can not convert this common namespace key to a proper legacy key.'
+        );
     }
-
-    throw new Error(
-      'Can not convert this common namespace key to a proper legacy key.'
-    );
   });
 }