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

package/package.json

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

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/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';
+}