@rango-dev/widget-embedded 0.1.10 → 0.1.11-next.10

package/src/store/bestRoute.ts

@@ -49,6 +49,7 @@ export interface RouteState {
   bestRoute: BestRouteResponse | null;
   setBestRoute: (bestRoute: BestRouteResponse | null) => void;
   retry: (pendingSwap: PendingSwap) => void;
+  switchFromAndTo: () => void;
 }
 
 export const useBestRouteStore = createSelectors(
@@ -146,7 +147,6 @@ export const useBestRouteStore = createSelectors(
           toToken: token,
         })),
       setInputAmount: (amount) => {
-        console.log(amount, typeof amount);
         set((state) => ({
           inputAmount: amount,
           ...(!amount && {
@@ -224,6 +224,20 @@ export const useBestRouteStore = createSelectors(
           destinationTokens: sortedDestinationTokens,
         });
       },
+      switchFromAndTo: () =>
+        set((state) => ({
+          fromChain: state.toChain,
+          fromToken: state.toToken,
+          toChain: state.fromChain,
+          toToken: state.fromToken,
+          sourceTokens: state.destinationTokens,
+          destinationTokens: state.sourceTokens,
+          inputAmount: state.outputAmount?.toString() || '',
+          inputUsdValue: getUsdValue(
+            state.toToken,
+            state.outputAmount?.toString() || ''
+          ),
+        })),
     }))
   )
 );
@@ -235,7 +249,7 @@ const bestRoute = (
   let abortController: AbortController | null = null;
   const fetchBestRoute = () => {
     const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
-    const { slippage, customSlippage, disabledLiquiditySources } =
+    const { slippage, customSlippage, disabledLiquiditySources, affiliateRef } =
       settingsStore.getState();
     if (!fromToken || !toToken || !inputAmount || inputAmount === '0') return;
     abortController?.abort();
@@ -249,7 +263,8 @@ const bestRoute = (
       [],
       disabledLiquiditySources,
       userSlippage,
-      false
+      false,
+      affiliateRef
     );
     if (!bestRouteStore.getState().loading)
       bestRouteStore.setState({
@@ -258,7 +273,7 @@ const bestRoute = (
         outputAmount: null,
         outputUsdValue: new BigNumber(0),
       });
-    httpService
+    httpService()
       .getBestRoute(requestBody, {
         signal: abortController.signal,
       })
@@ -282,7 +297,7 @@ const bestRoute = (
   const bestRouteParamsListener = () => {
     const { fromToken, toToken, inputAmount, inputUsdValue } =
       useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0') return;
+    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
 
     if (tokensAreEqual(fromToken, toToken))
       return bestRouteStore.setState({
@@ -312,8 +327,15 @@ const bestRoute = (
     }),
     bestRouteParamsListener,
     {
-      equalityFn: (prevState, state) => {
-        if (isRouteParametersChanged(prevState, state)) return false;
+      equalityFn: (prevState, currentState) => {
+        if (
+          isRouteParametersChanged({
+            store: 'bestRoute',
+            prevState,
+            currentState,
+          })
+        )
+          return false;
         else return true;
       },
     }
@@ -324,11 +346,19 @@ const bestRoute = (
       slippage: state.slippage,
       customSlippage: state.customSlippage,
       disabledLiquiditySources: state.disabledLiquiditySources,
+      infiniteApprove: state.infiniteApprove,
     }),
     bestRouteParamsListener,
     {
-      equalityFn: (prevState, state) => {
-        if (isRouteParametersChanged(prevState, state)) return false;
+      equalityFn: (prevState, currentState) => {
+        if (
+          isRouteParametersChanged({
+            store: 'settings',
+            prevState,
+            currentState,
+          })
+        )
+          return false;
         else return true;
       },
     }

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/settings.ts

@@ -13,12 +13,14 @@ export interface SettingsState {
   infiniteApprove: boolean;
   disabledLiquiditySources: string[];
   theme: Theme;
+  affiliateRef: string | null;
   setSlippage: (slippage: number) => void;
   setCustomSlippage: (customSlippage: number | null) => void;
   toggleInfiniteApprove: () => void;
   toggleLiquiditySource: (name: string) => void;
   setTheme: (theme: Theme) => void;
   toggleAllLiquiditySources: () => void;
+  setAffiliateRef: (affiliateRef: string | null) => void;
 }
 
 export const useSettingsStore = createSelectors(
@@ -28,6 +30,7 @@ export const useSettingsStore = createSelectors(
         slippage: DEFAULT_SLIPPAGE,
         customSlippage: null,
         infiniteApprove: false,
+        affiliateRef: null,
         disabledLiquiditySources: [],
         theme: 'auto',
         setSlippage: (slippage) =>
@@ -38,6 +41,10 @@ export const useSettingsStore = createSelectors(
           set(() => ({
             customSlippage: customSlippage,
           })),
+        setAffiliateRef: (affiliateRef) =>
+          set(() => ({
+            affiliateRef,
+          })),
         toggleAllLiquiditySources: () =>
           set((state) => {
             const { swappers } = useMetaStore.getState().meta;

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];

package/src/types/config.ts

@@ -1,9 +1,5 @@
-import { BlockchainMeta, Token } from 'rango-sdk';
+import { Asset } from 'rango-sdk';
 import { WalletType } from '@rango-dev/wallets-shared';
-export interface Source {
-  title: string;
-  type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
-}
 
 export type Colors = {
   background?: string;
@@ -17,28 +13,31 @@ export type Colors = {
   warning?: string;
 };
 
-export type Configs = {
-  fromChain: BlockchainMeta | null;
-  fromToken: Token | null;
-  toChain: BlockchainMeta | null;
-  toToken: Token | null;
-  fromAmount: number;
-  fromChains: 'all' | BlockchainMeta[];
-  fromTokens: 'all' | Token[];
-  toChains: 'all' | BlockchainMeta[];
-  toTokens: 'all' | Token[];
-  liquiditySources: 'all' | Source[];
-  wallets: 'all' | WalletType[];
-  multiWallets: boolean;
-  customeAddress: boolean;
-  theme: 'dark' | 'light' | 'auto';
-  title: string;
-  width: number;
-  height: number;
-  languege: string;
-  borderRadius: number;
-  fontFamily: string;
-  titleSize: number;
-  titleWeight: number;
-  colors: Colors;
+export type Theme = {
+  mode?: 'dark' | 'light' | 'auto';
+  fontFamily?: string;
+  colors?: Colors;
+  borderRadius?: number;
+  width?: number;
+  height?: number;
+};
+export type Support = {
+  blockchain?: string;
+  token?: Asset;
+  blockchains?: string[];
+  tokens?: Asset[];
+};
+
+export type WidgetConfig = {
+  apiKey: string;
+  affiliateRef?: string;
+  amount?: number;
+  from?: Support;
+  to?: Support;
+  liquiditySources?: string[];
+  wallets?: WalletType[];
+  multiWallets?: boolean;
+  customAddress?: boolean;
+  language?: string;
+  theme?: Theme;
 };

package/src/types/routing.ts

@@ -1,17 +1,33 @@
 import { RouteState } from '../store/bestRoute';
 import { SettingsState } from '../store/settings';
 
-export interface BestRouteParams {
+interface BestRouteStoreParams {
   fromChain?: RouteState['fromChain'];
   toChain?: RouteState['toChain'];
   fromToken?: RouteState['fromToken'];
   toToken?: RouteState['toToken'];
   inputAmount?: RouteState['inputAmount'];
+}
+
+interface SettingsStoreParams {
   slippage?: SettingsState['slippage'];
   customSlippage?: SettingsState['customSlippage'];
   disabledLiquiditySources?: SettingsState['disabledLiquiditySources'];
+  infiniteApprove?: SettingsState['infiniteApprove'];
 }
 
+export type BestRouteEqualityParams =
+  | {
+      store: 'bestRoute';
+      prevState: BestRouteStoreParams;
+      currentState: BestRouteStoreParams;
+    }
+  | {
+      store: 'settings';
+      prevState: SettingsStoreParams;
+      currentState: SettingsStoreParams;
+    };
+
 export enum ConfirmSwapErrorTypes {
   NO_ROUTE,
   ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,

package/src/utils/configs.ts

@@ -0,0 +1,24 @@
+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) {
+  configs = structuredClone(nextConfigs);
+  return configs;
+}

package/src/utils/routing.ts

@@ -6,7 +6,7 @@ import BigNumber from 'bignumber.js';
 import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import { areEqual } from './common';
 import { SelectedWallet } from './wallets';
-import { BestRouteParams } from '../types';
+import { BestRouteEqualityParams } from '../types';
 import { TokenMeta } from '@rango-dev/ui/dist/types/meta';
 import { numberToString } from './numbers';
 import { getUsdFeeOfStep } from './swap';
@@ -112,28 +112,34 @@ export function getRequiredBalanceOfWallet(
   return relatedFeeStatus.requiredAssets;
 }
 
-export function isRouteParametersChanged(
-  prevParams: BestRouteParams,
-  currentParams: BestRouteParams
-) {
-  return (
-    !!currentParams.fromToken &&
-    !!currentParams.toToken &&
-    (prevParams.fromChain?.name !== currentParams.fromChain?.name ||
-      prevParams.toChain?.name !== currentParams.toChain?.name ||
-      prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol ||
-      prevParams.toToken?.symbol !== currentParams.toToken?.symbol ||
-      prevParams.fromToken?.blockchain !==
-        currentParams.fromToken?.blockchain ||
-      prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain ||
-      prevParams.fromToken?.address !== currentParams.fromToken?.address ||
-      prevParams.toToken?.address !== currentParams.toToken?.address ||
-      prevParams.inputAmount !== currentParams.inputAmount ||
-      prevParams.slippage !== currentParams.slippage ||
-      prevParams.customSlippage !== currentParams.customSlippage ||
-      prevParams.disabledLiquiditySources?.length !==
-        currentParams.disabledLiquiditySources?.length)
-  );
+export function isRouteParametersChanged(params: BestRouteEqualityParams) {
+  if (params.store === 'bestRoute') {
+    const { prevState, currentState } = params;
+    return (
+      !!currentState.fromToken &&
+      !!currentState.toToken &&
+      (prevState.fromChain?.name !== currentState.fromChain?.name ||
+        prevState.toChain?.name !== currentState.toChain?.name ||
+        prevState.fromToken?.symbol !== currentState.fromToken?.symbol ||
+        prevState.toToken?.symbol !== currentState.toToken?.symbol ||
+        prevState.fromToken?.blockchain !== prevState.fromToken?.blockchain ||
+        prevState.toToken?.blockchain !== currentState.toToken?.blockchain ||
+        prevState.fromToken?.address !== currentState.fromToken?.address ||
+        prevState.toToken?.address !== currentState.toToken?.address ||
+        prevState.inputAmount !== currentState.inputAmount)
+    );
+  } else if (params.store === 'settings') {
+    const { prevState, currentState } = params;
+    return (
+      prevState.slippage !== currentState.slippage ||
+      prevState.customSlippage !== currentState.customSlippage ||
+      prevState.disabledLiquiditySources?.length !==
+        currentState.disabledLiquiditySources?.length ||
+      prevState.infiniteApprove ||
+      currentState.infiniteApprove
+    );
+  }
+  return false;
 }
 
 export function getBestRouteWithCalculatedFees(

package/src/utils/swap.ts

@@ -1,14 +1,9 @@
-import {
-  WalletTypeAndAddress,
-  SwapSavedSettings,
-} from '@rango-dev/ui/dist/types/swaps';
 import BigNumber from 'bignumber.js';
 import {
   BestRouteRequest,
   BestRouteResponse,
   RecommendedSlippage,
   SwapResult,
-  MetaResponse,
   Token,
 } from 'rango-sdk';
 import { Account } from '../store/wallets';
@@ -140,7 +135,8 @@ export function getSwapButtonState(
   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 (!bestRoute) return { title: 'Swap', disabled: true };
+  else if (!bestRoute || !bestRoute.result)
+    return { title: 'Swap', disabled: true };
   else if (hasLimitError) return { title: 'Limit Error', disabled: true };
   else if (highValueLoss)
     return { title: 'Price impact is too high!', disabled: true };
@@ -175,96 +171,6 @@ export function canComputePriceImpact(
   );
 }
 
-export function calculatePendingSwap(
-  inputAmount: string,
-  bestRoute: BestRouteResponse,
-  wallets: { [p: string]: WalletTypeAndAddress },
-  settings: Omit<SwapSavedSettings, 'disabledSwappersIds'>,
-  validateBalanceOrFee: boolean,
-  meta: MetaResponse
-): PendingSwap {
-  const simulationResult = bestRoute.result;
-  if (!simulationResult) throw Error('Simulation result should not be null');
-
-  return {
-    creationTime: new Date().getTime().toString(),
-    finishTime: null,
-    requestId: bestRoute.requestId || '',
-    inputAmount: inputAmount,
-    //@ts-ignore
-    wallets,
-    status: 'running',
-    isPaused: false,
-    extraMessage: null,
-    extraMessageSeverity: null,
-    extraMessageDetail: null,
-    extraMessageErrorCode: null,
-    networkStatusExtraMessage: null,
-    networkStatusExtraMessageDetail: null,
-    lastNotificationTime: null,
-    //@ts-ignore
-    settings: settings,
-    simulationResult: simulationResult,
-    validateBalanceOrFee,
-    //@ts-ignore
-    steps:
-      bestRoute.result?.swaps?.map((swap, index) => {
-        const swapper = meta.swappers.find(
-          (swapper) => swapper.id === swap.swapperId
-        );
-        const swapperType = swapper?.types[0];
-        const fromBlockchain = meta.blockchains.find(
-          (blockchain) => blockchain.name === swap.from.blockchain
-        );
-        const toBlockchain = meta.blockchains.find(
-          (blockchain) => blockchain.name === swap.to.blockchain
-        );
-        return {
-          id: index + 1,
-          fromBlockchain: swap.from.blockchain,
-          fromSymbol: swap.from.symbol,
-          fromSymbolAddress: swap.from.address,
-          fromDecimals: swap.from.decimals,
-          fromAmountPrecision: swap.fromAmountPrecision,
-          fromAmountMinValue: swap.fromAmountMinValue,
-          fromAmountMaxValue: swap.fromAmountMaxValue,
-          toBlockchain: swap.to.blockchain,
-          fromLogo: swap.from.logo,
-          toSymbol: swap.to.symbol,
-          toSymbolAddress: swap.to.address,
-          toDecimals: swap.to.decimals,
-          toLogo: swap.to.logo,
-          startTransactionTime: new Date().getTime(),
-          swapperId: swap.swapperId,
-          feeInUsd: numberToString(getUsdFeeOfStep(swap, meta.tokens), null, 2),
-          expectedOutputAmountHumanReadable: swap.toAmount,
-          outputAmount: '',
-          status: 'created',
-          networkStatus: null,
-          executedTransactionId: null,
-          externalTransactionId: null,
-          explorerUrl: null,
-          trackingCode: null,
-          cosmosTransaction: null,
-          solanaTransaction: null,
-          starknetTransaction: null,
-          starknetApprovalTransaction: null,
-          tronTransaction: null,
-          tronApprovalTransaction: null,
-          evmTransaction: null,
-          evmApprovalTransaction: null,
-          transferTransaction: null,
-          diagnosisUrl: null,
-          internalSteps: null,
-          fromBlockchainLogo: fromBlockchain?.logo || '',
-          toBlockchainLogo: toBlockchain?.logo || '',
-          swapperLogo: swapper?.logo || '',
-          swapperType: swapperType || '',
-        };
-      }) || [],
-  };
-}
-
 export function requiredWallets(route: BestRouteResponse | null) {
   const wallets: string[] = [];
 
@@ -407,7 +313,8 @@ export function createBestRouteRequestBody(
   selectedWallets: SelectedWallet[],
   disabledLiquiditySources: string[],
   slippage: number,
-  checkPrerequisites: boolean
+  checkPrerequisites: boolean,
+  affiliateRef: string | null
 ): BestRouteRequest {
   const selectedWalletsMap = selectedWallets.reduce(
     (
@@ -438,6 +345,7 @@ export function createBestRouteRequestBody(
 
   const requestBody: BestRouteRequest = {
     amount: inputAmount.toString(),
+    affiliateRef,
     checkPrerequisites,
     from: {
       address: fromToken.address,