@rango-dev/widget-embedded 0.1.11-next.8 → 0.1.11

package/src/services/httpService.ts

@@ -1,9 +1,14 @@
 import { RangoClient } from 'rango-sdk';
+import { getConfig } from '../utils/configs';
 
 // this API key is limited and
 // it is only for test purpose
-const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 
-export const httpService = new RangoClient(
-  (process.env.REACT_APP_API_KEY as string) || RANGO_PUBLIC_API_KEY
-);
+let rango: RangoClient | undefined = undefined;
+
+export const httpService = () => {
+  if (rango) return rango;
+  rango = new RangoClient(getConfig('API_KEY'));
+  return rango;
+};

package/src/store/bestRoute.ts

@@ -22,6 +22,8 @@ import { useWalletsStore } from './wallets';
 import { TokenWithBalance } from '../pages/SelectTokenPage';
 import { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
 import { debounce } from '../utils/common';
+import { isPositiveNumber } from '../utils/numbers';
+
 const getUsdValue = (token: Token | null, amount: string) =>
   new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
 
@@ -72,7 +74,7 @@ export const useBestRouteStore = createSelectors(
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
-          if (!state.inputAmount || state.inputAmount === '0') return {};
+          if (!isPositiveNumber(state.inputAmount)) return {};
           if (!!bestRoute) {
             outputAmount = !!bestRoute.result?.outputAmount
               ? new BigNumber(bestRoute.result?.outputAmount)
@@ -251,7 +253,7 @@ const bestRoute = (
     const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
     const { slippage, customSlippage, disabledLiquiditySources, affiliateRef } =
       settingsStore.getState();
-    if (!fromToken || !toToken || !inputAmount || inputAmount === '0') return;
+    if (!fromToken || !toToken || !isPositiveNumber(inputAmount)) return;
     abortController?.abort();
     abortController = new AbortController();
     const userSlippage = !!customSlippage ? customSlippage : slippage;
@@ -263,7 +265,6 @@ const bestRoute = (
       [],
       disabledLiquiditySources,
       userSlippage,
-      false,
       affiliateRef
     );
     if (!bestRouteStore.getState().loading)
@@ -273,7 +274,7 @@ const bestRoute = (
         outputAmount: null,
         outputUsdValue: new BigNumber(0),
       });
-    httpService
+    httpService()
       .getBestRoute(requestBody, {
         signal: abortController.signal,
       })
@@ -297,7 +298,8 @@ const bestRoute = (
   const bestRouteParamsListener = () => {
     const { fromToken, toToken, inputAmount, inputUsdValue } =
       useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
+    if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0))
+      return bestRouteStore.setState({ loading: false });
 
     if (tokensAreEqual(fromToken, toToken))
       return bestRouteStore.setState({

package/src/store/meta.ts

@@ -18,12 +18,14 @@ export const useMetaStore = createSelectors(
     loadingStatus: 'loading',
     fetchMeta: async () => {
       try {
-        const response = await httpService.getAllMetadata();
+        const response = await httpService().getAllMetadata();
         const chainThatHasTokenInMetaResponse = removeDuplicateFrom(
-          response.tokens.map((t) => t.blockchain),
+          response.tokens.map((t) => t.blockchain)
         );
         const enabledChains = response.blockchains.filter(
-          (chain) => chain.enabled && chainThatHasTokenInMetaResponse.includes(chain.name),
+          (chain) =>
+            chain.enabled &&
+            chainThatHasTokenInMetaResponse.includes(chain.name)
         );
         response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
         set({ meta: response, loadingStatus: 'success' });
@@ -31,5 +33,5 @@ export const useMetaStore = createSelectors(
         set({ loadingStatus: 'failed' });
       }
     },
-  })),
+  }))
 );

package/src/store/wallets.ts

@@ -81,7 +81,7 @@ export const useWalletsStore = createSelectors(
         }));
         accounts.forEach(async (account) => {
           try {
-            const response = await httpService.getWalletsDetails([
+            const response = await httpService().getWalletsDetails([
               { address: account.address, blockchain: account.chain },
             ]);
             const retrivedBalance = response.wallets[0];
@@ -142,7 +142,7 @@ export const useWalletsStore = createSelectors(
             }
           });
           return {
-            selectedWallets: selectedWallets,
+            selectedWallets: state.selectedWallets.concat(selectedWallets),
           };
         }),
       setSelectedWallet: (wallet) =>

package/src/types/config.ts

@@ -1,42 +1,109 @@
 import { Asset } from 'rango-sdk';
 import { WalletType } from '@rango-dev/wallets-shared';
 
-export type Colors = {
+/**
+ * The above type defines a set of optional color properties for a widget.
+ * @property {string} background
+ * @property {string} foreground
+ * @property {string} primary
+ * @property {string} success
+ * @property {string} error
+ * @property {string} warning
+ */
+export type WidgetColors = {
   background?: string;
-  // inputBackground?: string;
-  // icons?: string;
-  primary?: string;
   foreground?: string;
-  // text?: string;
+  primary?: string;
   success?: string;
   error?: string;
   warning?: string;
 };
 
-export type Theme = {
-  mode?: 'dark' | 'light' | 'auto';
+/**
+ * The `WidgetTheme` defines the properties of a widget theme, including mode, font family, colors, border
+ * radius, width, and height.
+ * @property {'auto' | 'light' | 'dark'} mode - The mode property is used to specify the default theme for
+ * the widget.
+ * @property {string} fontFamily - The font family to be used in the widget.
+ * @property {Colors} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
+ * defines the color scheme for the widget. It is of type `Colors`, which is likely another object that
+ * contains specific color values for various parts of the widget (e.g. background color, text color,
+ * border color
+ * @property {number} borderRadius - `borderRadius` is a property of the `WidgetTheme` type that
+ * specifies the radius of the corners of a widget.
+ * @property {number} width - The `width` property is a number that represents the width of the widget.
+ * @property {number} height - The `height` property is a number that specifies the height of the widget.
+ */
+export type WidgetTheme = {
+  mode?: 'auto' | 'light' | 'dark';
   fontFamily?: string;
-  colors?: Colors;
+  colors?: WidgetColors;
   borderRadius?: number;
   width?: number;
   height?: number;
 };
-export type Support = {
+
+/**
+ * `BlockchainAndTokenConfig`
+ *
+ * @property {string} blockchain - This property is optional and represents the default selected blockchain.
+ * @property {Asset} token - The `token` property is a type of `Asset` and represents the default token
+ * which is selected. e.g. {blockchain: 'BSC', symbol: 'BNB', address: null}
+ * @property {string[]} blockchains - An optional array of strings representing the supported
+ * blockchains. e.g. ['BSC','ETHEREUM']
+ * @property {Asset[]} tokens - The `tokens` property is an optional array of `Asset` objects that
+ * you could use that to limit tokens to some limited ones.
+ */
+export type BlockchainAndTokenConfig = {
   blockchain?: string;
   token?: Asset;
   blockchains?: string[];
   tokens?: Asset[];
 };
 
+/**
+ * The type WidgetConfig defines the configuration options for a widget, including API key, affiliate
+ * reference, amount, blockchain and token configurations, liquidity sources, wallet types, language,
+ * and theme.
+ *
+ * @property {string} apiKey - The API key used to communicate with Rango API
+ * @property {string} affiliateRef - The affiliate reference is an optional string property in the
+ * WidgetConfig type. It is used to set and track referrals or affiliations for the dApps.
+ * @property {number} amount - The default input amount.
+ * @property {BlockchainAndTokenConfig} from - The `from` property is an optional property of type
+ * `BlockchainAndTokenConfig` that specifies the default blockchain and token from which the user wants to
+ * exchange.It can also used to limit source swap blockchains/tokens to some limited ones.
+ * @property {BlockchainAndTokenConfig} to - The "to" property is an optional property of type
+ * "BlockchainAndTokenConfig" that specifies the default blockchain and token to which the user wants to
+ * exchange.It can also used to limit destination swap blockchains/tokens to some limited ones.
+ * blockchain during the transaction.
+ * @property {string[]} liquiditySources - The `liquiditySources` property is an optional array of
+ * strings that specifies the liquidity sources allowed dexes and bridges for the routing
+ * @property {WalletType[]} wallets - The `wallets` property is an optional array of `WalletType`
+ * values that represent the types of wallets that the widget should support. For example, it could
+ * include values like `"metamask"`, `"kepler"`, or `"phantom"`.
+ * @property {boolean} multiWallets - The `multiWallets` property is a boolean value that indicates
+ * whether the widget should allow the user to select multiple wallets for the transaction.
+ * @property {boolean} customAddress - A boolean value indicating whether the user can input a custom
+ * address for the transaction. If set to true, the widget will allow the user to input a custom
+ * address for the destination.
+ * @property {string} language - The language property is an optional string that specifies the
+ * default language in which the widget should be displayed. If not provided, the widget will default to the
+ * language of the user's browser.
+ * @property {WidgetTheme} theme - The `theme` property is a part of the `WidgetConfig` type and is
+ * used to specify the visual theme of the widget. It is of type `WidgetTheme`, which is an interface
+ * that defines the various properties of the theme, such as colors, fonts, and others.
+ */
 export type WidgetConfig = {
+  apiKey: string;
   affiliateRef?: string;
   amount?: number;
-  from?: Support;
-  to?: Support;
+  from?: BlockchainAndTokenConfig;
+  to?: BlockchainAndTokenConfig;
   liquiditySources?: string[];
   wallets?: WalletType[];
   multiWallets?: boolean;
   customAddress?: boolean;
   language?: string;
-  theme?: Theme;
+  theme?: WidgetTheme;
 };

package/src/types/routing.ts

@@ -33,6 +33,7 @@ export enum ConfirmSwapErrorTypes {
   ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
   REQUEST_FAILED,
   INSUFFICIENT_SLIPPAGE,
+  INSUFFICIENT_BALANCE,
 }
 
 export type ConfirmSwapError =
@@ -44,11 +45,13 @@ export type ConfirmSwapError =
       type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE;
       minRequiredSlippage: string | null;
     }
+  | { type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE; messages: string[] }
   | {
       type: Exclude<
         ConfirmSwapErrorTypes,
         | ConfirmSwapErrorTypes.REQUEST_FAILED
         | ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
+        | ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE
       >;
     };
 
@@ -58,12 +61,10 @@ export type ConfirmSwapWarnings =
       newOutputAmount: string;
       percentageChange: string;
     }
-  | { type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE; messages: string[] }
   | {
       type: Exclude<
         ConfirmSwapWarningTypes,
-        | ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
-        | ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE
+        ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
       >;
     };
 
@@ -72,5 +73,4 @@ export enum ConfirmSwapWarningTypes {
   ROUTE_SWAPPERS_UPDATED,
   ROUTE_COINS_UPDATED,
   ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
-  INSUFFICIENT_BALANCE,
 }

package/src/utils/configs.ts

@@ -0,0 +1,30 @@
+export interface Configs {
+  API_KEY: string;
+}
+
+const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+
+let configs: Configs = {
+  API_KEY: RANGO_PUBLIC_API_KEY,
+};
+
+export function getConfig(name: keyof Configs) {
+  return configs[name];
+}
+
+export function setConfig(name: keyof Configs, value: any) {
+  configs[name] = value;
+
+  return value;
+}
+
+export function initConfig(nextConfigs: Configs) {
+  let clonedConfigs;
+  if (typeof structuredClone === 'function') {
+    clonedConfigs = structuredClone(nextConfigs);
+  } else {
+    clonedConfigs = JSON.parse(JSON.stringify(nextConfigs));
+  }
+  configs = clonedConfigs;
+  return configs;
+}

package/src/utils/numbers.ts

@@ -131,3 +131,7 @@ export const decimalNumber = (number = '0', toFixed: number) =>
 
 export const containsText = (text: string, searchText: string) =>
   text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+
+export const isPositiveNumber = (text?: string) =>
+  !!text && parseFloat(text) > 0;
+10;

package/src/utils/routing.ts

@@ -7,10 +7,8 @@ import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import { areEqual } from './common';
 import { SelectedWallet } from './wallets';
 import { BestRouteEqualityParams } from '../types';
-import { TokenMeta } from '@rango-dev/ui/dist/types/meta';
 import { numberToString } from './numbers';
-import { getUsdFeeOfStep } from './swap';
-import { BestRouteWithFee } from '@rango-dev/ui';
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 export function searchParamsToToken(
   tokens: Token[],
@@ -142,19 +140,41 @@ export function isRouteParametersChanged(params: BestRouteEqualityParams) {
   return false;
 }
 
-export function getBestRouteWithCalculatedFees(
-  bestRoute: BestRouteResponse | null,
-  tokens: TokenMeta[]
-): BestRouteWithFee | null {
-  if (!bestRoute || !bestRoute.result) return null;
-  const swapsWithFee = (bestRoute?.result?.swaps || []).map((swap) => ({
+export function getFormatedBestRoute(
+  bestRoute: BestRouteResponse | null
+): BestRouteResponse | null {
+  if (!bestRoute) return null;
+
+  const formatedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
     ...swap,
-    feeInUsd: numberToString(getUsdFeeOfStep(swap, tokens), 0, 2),
+    fromAmount: numberToString(swap.fromAmount, 6, 6),
+    toAmount: numberToString(swap.toAmount, 6, 6),
   }));
 
   return {
     ...bestRoute,
-    result: { ...bestRoute.result, swaps: swapsWithFee },
+    ...(bestRoute.result && {
+      result: { ...bestRoute.result, swaps: formatedSwaps },
+    }),
+  };
+}
+
+export function getFormatedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
+  const formatedSteps = pendingSwap.steps.map((step) => ({
+    ...step,
+    feeInUsd: numberToString(step.feeInUsd, 4, 4),
+    outputAmount: numberToString(step.outputAmount, 6, 6),
+    expectedOutputAmountHumanReadable: numberToString(
+      step.expectedOutputAmountHumanReadable,
+      6,
+      6
+    ),
+  }));
+
+  return {
+    ...pendingSwap,
+    inputAmount: numberToString(pendingSwap.inputAmount, 6, 6),
+    steps: formatedSteps,
   };
 }
 

package/src/utils/swap.ts

@@ -19,6 +19,7 @@ import {
   PendingSwapStep,
 } from '@rango-dev/queue-manager-rango-preset';
 import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import { removeDuplicateFrom } from './common';
 
 export function getOutputRatio(
   inputUsdValue: BigNumber,
@@ -128,13 +129,14 @@ export function getSwapButtonState(
   highValueLoss: boolean,
   priceImpactCanNotBeComputed: boolean,
   needsToWarnEthOnPath: boolean,
-  inputIsZero: boolean
+  inputAmount: string
 ): SwapButtonState {
   if (loadingMetaStatus !== 'success')
     return { title: 'Connect Wallet', disabled: true };
   if (accounts.length == 0) return { title: 'Connect Wallet', disabled: false };
   if (loading) return { title: 'Finding Best Route...', disabled: true };
-  else if (inputIsZero) return { title: 'Enter an amount', disabled: true };
+  else if (!inputAmount || inputAmount === '0')
+    return { title: 'Enter an amount', disabled: true };
   else if (!bestRoute || !bestRoute.result)
     return { title: 'Swap', disabled: true };
   else if (hasLimitError) return { title: 'Limit Error', disabled: true };
@@ -313,8 +315,8 @@ export function createBestRouteRequestBody(
   selectedWallets: SelectedWallet[],
   disabledLiquiditySources: string[],
   slippage: number,
-  checkPrerequisites: boolean,
-  affiliateRef: string | null
+  affiliateRef: string | null,
+  initialRoute?: BestRouteResponse
 ): BestRouteRequest {
   const selectedWalletsMap = selectedWallets.reduce(
     (
@@ -341,7 +343,16 @@ export function createBestRouteRequestBody(
       });
   });
 
-  const filteredBlockchains = selectedWallets.map((wallet) => wallet.chain);
+  const checkPrerequisites = !!initialRoute;
+
+  const filteredBlockchains = removeDuplicateFrom(
+    (initialRoute?.result?.swaps || []).reduce(
+      (blockchains: string[], swap) => (
+        blockchains.push(swap.from.blockchain, swap.to.blockchain), blockchains
+      ),
+      []
+    )
+  );
 
   const requestBody: BestRouteRequest = {
     amount: inputAmount.toString(),

package/src/utils/time.ts

@@ -41,12 +41,6 @@ export function timeSince(timeMillis: number): string {
 
 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()}`;
+    ? `${timeSince(parseInt(pendingSwap.finishTime))} ago`
+    : `${timeSince(parseInt(pendingSwap.creationTime))} ago`;
 }

package/dist/components/warnings/BalanceWarnings.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface PropTypes {
-    messages: string[];
-}
-export declare function BalanceWarnings({ messages }: PropTypes): JSX.Element;
-export {};
-//# sourceMappingURL=BalanceWarnings.d.ts.map

package/dist/components/warnings/BalanceWarnings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BalanceWarnings.d.ts","sourceRoot":"","sources":["../../src/components/warnings/BalanceWarnings.tsx"],"names":[],"mappings":";AAGA,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAuBD,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,eAWtD"}

package/src/components/warnings/BalanceWarnings.tsx

@@ -1,40 +0,0 @@
-import { styled, Typography } from '@rango-dev/ui';
-import React from 'react';
-
-interface PropTypes {
-  messages: string[];
-}
-
-const List = styled('ul', {
-  variants: {
-    showListStyle: {
-      true: { paddingLeft: '$24' },
-    },
-  },
-});
-
-const ListItem = styled('li', {
-  variants: {
-    showListStyle: {
-      true: { listStyleType: 'disc', listStylePosition: 'outside' },
-    },
-  },
-});
-
-const Message = styled(Typography, {
-  display: 'block',
-  color: '$warning500 !important',
-});
-
-export function BalanceWarnings({ messages }: PropTypes) {
-  const showListStyle = messages.length > 1;
-  return (
-    <List showListStyle={showListStyle}>
-      {messages.map((warning) => (
-        <ListItem showListStyle={showListStyle}>
-          <Message variant="body2">{warning}</Message>
-        </ListItem>
-      ))}
-    </List>
-  );
-}