@rango-dev/widget-embedded 0.63.1-next.1 → 0.63.1-next.10

package/src/utils/errors.ts

@@ -0,0 +1,69 @@
+import { errorMessages } from '../constants/errors';
+
+/*
+ * A failed `import()` has no standard error, so each engine and bundler words
+ * it differently. Lowercase, they are matched against a lowercased message.
+ */
+const MODULE_LOAD_ERROR_MESSAGES = [
+  // Chromium
+  'failed to fetch dynamically imported module',
+  // Firefox
+  'error loading dynamically imported module',
+  // Safari
+  'importing a module script failed',
+  // A stale chunk answered with the index page instead of a module
+  'failed to load module script',
+  // Vite
+  'unable to preload css',
+  // Webpack
+  'loading chunk',
+  'loading css chunk',
+  'chunkloaderror',
+];
+
+function toMessage(value: unknown): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (value instanceof Error) {
+    // Webpack names its failures rather than wording them.
+    return `${value.name} ${value.message}`;
+  }
+
+  return '';
+}
+
+export function isModuleLoadError(value: unknown): boolean {
+  const message = toMessage(value).toLowerCase();
+
+  return (
+    !!message &&
+    MODULE_LOAD_ERROR_MESSAGES.some((candidate) => message.includes(candidate))
+  );
+}
+
+/**
+ * Replace a failure we recognize with one worth showing to a user.
+ *
+ * Every place the widget calls into another package routes its failures through
+ * here, so a new class of failure only has to be taught to the widget once.
+ *
+ * @param error - a thrown error, or a message already stringified from one.
+ * @returns a user facing error keeping the original as `cause`, or `null` when
+ * the failure is not one we recognize.
+ */
+export function tryRefineError(error: unknown): Error | null {
+  if (isModuleLoadError(error)) {
+    return new Error(errorMessages().moduleLoadError, { cause: error });
+  }
+
+  return null;
+}
+
+export function tryRefineErrorMessage(
+  error: unknown,
+  fallback: string
+): string {
+  return tryRefineError(error)?.message ?? fallback;
+}

package/src/utils/providers.ts

@@ -1,5 +1,4 @@
 import type { WidgetConfig } from '../types';
-import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
 
 import { Provider } from '@hub3js/core';
 import {
@@ -19,11 +18,10 @@ export interface ProvidersOptions {
 
 /**
  *
- * Generate a list of providers by passing a provider name (e.g. metamask) or a custom provider which implemented ProviderInterface.
- * @returns BothProvidersInterface[] a list of BothProvidersInterface
+ * Generate a list of providers by passing a provider name (e.g. metamask) or a custom hub `Provider`.
+ * @returns VersionedProviders[] a list of VersionedProviders
  *
  */
-type BothProvidersInterface = LegacyProviderInterface | Provider;
 export function matchAndGenerateProviders({
   allProviders,
   configWallets,
@@ -43,30 +41,13 @@ export function matchAndGenerateProviders({
       /*
        * There are two types of provider we get, the first one is only passing the wallet name
        * then we will match the wallet name with our providers (@rango-dev/provider-*).
-       * The second way is passing a custom provider which implemented ProviderInterface.
+       * The second way is passing a custom hub `Provider` instance.
        */
       if (typeof requestedWallet === 'string') {
-        const result = allProviders.find((provider) => {
-          /*
-           * To find a provider in allProviders,
-           * a version of each provider should be picked
-           * and validated based on that version scheme.
-           * If the corresponding provider to a wallet was found in allProvider,
-           * it will be add to selected providers.
-           */
-          const versionedProvider =
-            pickProviderVersionWithFallbackToLegacy(provider);
-          if (versionedProvider instanceof Provider) {
-            return versionedProvider.id === requestedWallet;
-          }
-          return versionedProvider.config.type === requestedWallet;
-        });
+        const result = allProviders.find(
+          (provider) => pickProviderVersion(provider).id === requestedWallet
+        );
 
-        /*
-         * A provider may have multiple versions
-         * (e.g., 0.0, also known as legacy, and 1.0, also known as hub).
-         * We should ensure that all existing versions of a provider are added to selectedProviders.
-         */
         if (result) {
           selectedProviders.push(result);
         } else {
@@ -77,15 +58,15 @@ export function matchAndGenerateProviders({
         }
       } else {
         // It's a custom provider so we directly push it to the list.
-        if (requestedWallet instanceof Provider) {
-          selectedProviders.push(
-            defineVersions().version('1.0.0', requestedWallet).build()
-          );
-        } else {
-          selectedProviders.push(
-            defineVersions().version('0.0.0', requestedWallet).build()
+        if (!(requestedWallet instanceof Provider)) {
+          throw new Error(
+            `Legacy providers aren't supported anymore. Pass a hub 'Provider' instance in 'wallets' instead.`
           );
         }
+
+        selectedProviders.push(
+          defineVersions().version('1.0.0', requestedWallet).build()
+        );
       }
     });
 
@@ -95,27 +76,12 @@ export function matchAndGenerateProviders({
   return allProviders;
 }
 
-export function pickProviderVersionWithFallbackToLegacy(
-  provider: VersionedProviders
-): BothProvidersInterface {
-  try {
-    return pickVersion(provider, '1.0.0')[1];
-  } catch {
-    // Fallback to legacy version, if target version doesn't exists.
-    return pickVersion(provider, '0.0.0')[1];
-  }
+export function pickProviderVersion(provider: VersionedProviders): Provider {
+  return pickVersion(provider, '1.0.0')[1];
 }
 
 export function configWalletsToWalletName(
   providers: VersionedProviders[]
 ): string[] {
-  const names = providers
-    .map((provider) => pickProviderVersionWithFallbackToLegacy(provider))
-    .map((provider) => {
-      if (provider instanceof Provider) {
-        return provider.id;
-      }
-      return provider.config.type;
-    });
-  return names;
+  return providers.map((provider) => pickProviderVersion(provider).id);
 }

package/src/utils/swap.ts

@@ -9,8 +9,8 @@ import type {
   SwapButtonState,
   Wallet,
 } from '../types';
+import type { WalletType } from '@hub3js/core';
 import type { ExtendedWalletInfo } from '@rango-dev/wallets-react';
-import type { WalletType } from '@rango-dev/wallets-shared';
 import type {
   BestRouteRequest,
   BlockchainMeta,
@@ -49,6 +49,7 @@ import {
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../constants/routing';
 
+import { tryRefineError } from './errors';
 import { getBlockchainShortNameFor, isValidTokenAddress } from './meta';
 import { numberToString } from './numbers';
 import { getRequiredBalanceOfWallet } from './quote';
@@ -737,6 +738,12 @@ export function getSwapMessages(
   }
   detailedMessage = detailedMessage || '';
   message = message || '';
+  const refined = tryRefineError(message) ?? tryRefineError(detailedMessage);
+  if (refined) {
+    detailedMessage = [message, detailedMessage].filter(Boolean).join('\n');
+    message = refined.message;
+  }
+
   const isRpc =
     message?.indexOf('code') !== -1 && message?.indexOf('reason') !== -1;
 

package/src/utils/wallets.ts

@@ -5,30 +5,27 @@ import type {
   Wallet,
   WalletInfoWithExtra,
 } from '../types';
+import type { WalletType } from '@hub3js/core';
+import type { Network } from '@rango-dev/internal-blockchains';
 import type {
   ExtendedWalletInfo,
   ProviderContext,
 } from '@rango-dev/wallets-react';
-import type {
-  Network,
-  WalletType,
-  WalletTypes,
-} from '@rango-dev/wallets-shared';
 import type { BlockchainMeta, Token, TransactionType } from 'rango-sdk';
 
 import {
-  BlockchainCategories,
-  WalletState as WalletStatus,
-} from '@rango-dev/ui';
-import { legacyReadAccountAddress as readAccountAddress } from '@rango-dev/wallets-core/legacy';
-import {
-  detectInstallLink,
   getBlockChainNameFromId,
   HYPERLIQUID_SIGN_NETWORK,
-  isEvmAddress,
   Networks,
-} from '@rango-dev/wallets-shared';
+  readAccountAddress,
+} from '@rango-dev/internal-blockchains';
+import {
+  BlockchainCategories,
+  detectInstallLink,
+  WalletState as WalletStatus,
+} from '@rango-dev/ui';
 import BigNumber from 'bignumber.js';
+import { isAddress as isEvmAddress } from 'ethers';
 
 import { ZERO } from '../constants/numbers';
 import {
@@ -86,7 +83,7 @@ export function mapWalletTypesToWalletInfo(
   chain?: string
 ): ExtendedModalWalletInfo[] {
   return list
-    .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes))
+    .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet))
     .filter((wallet) => {
       const { supportedChains, isContractWallet } = getWalletInfo(wallet);
 
@@ -528,7 +525,7 @@ export function checkIsWalletPartiallyConnected(
   wallet: ExtendedWalletInfo,
   walletState: ReturnType<ProviderContext['state']>
 ) {
-  if (!wallet.isHub || !wallet.needsNamespace || !walletState.connected) {
+  if (!wallet.needsNamespace || !walletState.connected) {
     return false;
   }
   const namespaces = wallet.needsNamespace.data;