@rango-dev/widget-embedded 0.58.1-next.6 → 0.58.1-next.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.58.1-next.6",
+  "version": "0.58.1-next.8",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,23 +25,23 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.12.1",
-    "@rango-dev/provider-all": "^0.60.1-next.4",
+    "@rango-dev/provider-all": "^0.60.1-next.5",
     "@rango-dev/queue-manager-core": "^0.33.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.60.1-next.2",
+    "@rango-dev/queue-manager-rango-preset": "^0.60.1-next.5",
     "@rango-dev/queue-manager-react": "^0.33.0",
     "@rango-dev/signer-solana": "^0.46.2-next.0",
-    "@rango-dev/ui": "^0.61.1-next.3",
-    "@rango-dev/wallets-core": "^0.57.1-next.0",
-    "@rango-dev/wallets-react": "^0.44.1-next.2",
-    "@rango-dev/wallets-shared": "^0.58.1-next.2",
+    "@rango-dev/ui": "^0.61.1-next.4",
+    "@rango-dev/wallets-core": "^0.57.1-next.1",
+    "@rango-dev/wallets-react": "^0.44.1-next.3",
+    "@rango-dev/wallets-shared": "^0.58.1-next.3",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
     "ethers": "^6.13.2",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
-    "rango-sdk": "^0.1.72",
-    "rango-types": "^0.1.93",
+    "rango-sdk": "^0.1.74",
+    "rango-types": "^0.1.95",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "values.js": "2.1.1",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/constants/index.ts

@@ -1,6 +1,5 @@
 import { UI_ID } from '@rango-dev/ui';
 
-export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
 export const SCANNER_BASE_URL = 'https://explorer.rango.exchange';
 

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -4,11 +4,12 @@ import type { PropsWithChildren } from 'react';
 import { setSolanaSignerConfig } from '@rango-dev/signer-solana';
 import React, { useEffect, useMemo } from 'react';
 
-import { DEFAULT_BASE_URL, RANGO_PUBLIC_API_KEY } from '../../constants';
+import { DEFAULT_BASE_URL } from '../../constants';
 import { useFetchApiConfig } from '../../hooks/useFetchApiConfig';
 import useFontLoader from '../../hooks/useFontLoader';
 import QueueManager from '../../QueueManager';
 import { initConfig } from '../../utils/configs';
+import { getApiKeyFromEnvOrThrow } from '../../utils/env';
 import { WidgetWallets } from '../Wallets';
 import { WidgetInfo } from '../WidgetInfo';
 
@@ -32,7 +33,7 @@ export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
 
   useMemo(() => {
     initConfig({
-      API_KEY: config?.apiKey || RANGO_PUBLIC_API_KEY,
+      API_KEY: config?.apiKey || getApiKeyFromEnvOrThrow(),
       BASE_URL: config?.apiUrl || DEFAULT_BASE_URL,
     });
   }, [config.apiKey, config.apiUrl]);

package/src/store/slices/wallets.ts

@@ -466,7 +466,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
       const { _balances, _aggregatedBalances } =
         computeNextStateAfterWalletBalanceRemoval(
           partialCurrentState,
-          walletType,
+          [walletType],
           options
         );
 
@@ -611,8 +611,10 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
       if (accounts.length === 0 || !accounts[0]) {
         return;
       }
-      // All the `accounts` have same `walletType` so we can pick the first one.
-      const walletType = accounts[0].walletType;
+
+      const walletTypes = [
+        ...new Set(accounts.map((account) => account.walletType)),
+      ];
 
       get().setConnectedWalletAsRefetching(accounts);
 
@@ -630,7 +632,6 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
         return;
       }
       const walletsDetails = response.wallets;
-
       if (walletsDetails) {
         let nextBalances: BalanceState = get()._balances;
         let nextAggregatedBalances: AggregatedBalanceState =
@@ -657,7 +658,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
           const { _balances, _aggregatedBalances } =
             computeNextStateAfterWalletBalanceRemoval(
               partialCurrentState,
-              walletType,
+              walletTypes,
               {
                 chains: [wallet.blockChain],
               }
@@ -672,7 +673,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
           if (
             !get().connectedWallets.find(
               (connectedWallet) =>
-                connectedWallet.walletType === walletType &&
+                walletTypes.includes(connectedWallet.walletType) &&
                 connectedWallet.address === wallet.address &&
                 connectedWallet.chain === wallet.blockChain
             )
@@ -715,11 +716,23 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
         if (retryOnFailedBalances) {
           const failedWallets: Wallet[] = walletsDetails
             .filter((wallet) => wallet.failed)
-            .map((wallet) => ({
-              chain: wallet.blockChain,
-              walletType: walletType,
-              address: wallet.address,
-            }));
+            .map((wallet) => {
+              const walletType = get().connectedWallets.find(
+                (connectedWallet) =>
+                  connectedWallet.chain === wallet.blockChain &&
+                  connectedWallet.address
+              )?.walletType;
+              // Return null if there is no related connected wallet.
+              if (!walletType) {
+                return null;
+              }
+              return {
+                chain: wallet.blockChain,
+                walletType: walletType,
+                address: wallet.address,
+              };
+            })
+            .filter((wallet) => !!wallet);
           if (failedWallets.length > 0) {
             await get().fetchMainTokensBalances(failedWallets, {
               retryOnFailedBalances: false,

package/src/store/utils/wallets.ts

@@ -164,14 +164,14 @@ export function computeNextStateAfterWalletBalanceRemoval(
     _aggregatedBalances: AggregatedBalanceState;
     connectedWallets: ConnectedWallet[];
   },
-  walletType: string,
+  walletTypes: string[],
   options?: {
     chains?: string[];
     namespaces?: Namespace[];
   }
 ) {
   let walletsNeedsToBeRemoved = paritalCurrentState.connectedWallets.filter(
-    (connectedWallet) => connectedWallet.walletType === walletType
+    (connectedWallet) => walletTypes.includes(connectedWallet.walletType)
   );
 
   /*
@@ -181,7 +181,7 @@ export function computeNextStateAfterWalletBalanceRemoval(
    * So we only delete balance when there is no connected wallet that has access to that specific chain and address.
    */
   paritalCurrentState.connectedWallets.forEach((connectedWallet) => {
-    if (connectedWallet.walletType !== walletType) {
+    if (!walletTypes.includes(connectedWallet.walletType)) {
       walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
         const isAnotherWalletHasSameAddressAndChain =
           wallet.chain === connectedWallet.chain &&

package/src/utils/configs.ts

@@ -1,8 +1,7 @@
 import type { Tokens, WidgetVariant } from '../types';
 import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 
-import { RANGO_PUBLIC_API_KEY } from '../constants';
-
+import { getApiKeyFromEnvOrNotSet } from './env';
 import { areTokensEqual } from './wallets';
 
 export interface Configs {
@@ -17,7 +16,7 @@ type TokensConfig =
     };
 
 let configs: Configs = {
-  API_KEY: RANGO_PUBLIC_API_KEY,
+  API_KEY: getApiKeyFromEnvOrNotSet(),
 };
 
 export function getConfig(name: keyof Configs) {

package/src/utils/env.ts

@@ -0,0 +1,28 @@
+export function getApiKeyFromEnv(): string | undefined {
+  // NOTE: parcel doesn't support for dynamic keys, so we have to do it statically.
+  return process.env.REACT_APP_RANGO_API_KEY;
+}
+
+/**
+ * This is useful when the api key is mandatory and nothing works corectly without api key.
+ * You need to first fallback to user's input (widget config), then you can use this to try to find from envs (e.g. widget/app or widget/playground)
+ * Then throw an runtime error to panic the program.
+ */
+export function getApiKeyFromEnvOrThrow() {
+  // NOTE: parcel doesn't support for dynamic keys, so we have to do it statically.
+  const value = getApiKeyFromEnv();
+  if (value) {
+    return value;
+  }
+
+  throw new Error(
+    'Ensure you have set REACT_APP_RANGO_API_KEY in your env variables.'
+  );
+}
+
+/**
+ * You can use this whenever you want to use the api key in initialize process, but mark the key explictly as not set to debug more easily since you should never reach there.
+ */
+export function getApiKeyFromEnvOrNotSet(): string {
+  return getApiKeyFromEnv() || 'NOT_SET';
+}