@rango-dev/queue-manager-rango-preset 0.0.0-experimental-936229e8-20251208

package/src/hooks.ts

@@ -0,0 +1,94 @@
+import type { LastConnectedWallet, UseQueueManagerParams } from './types';
+
+import { useManager } from '@rango-dev/queue-manager-react';
+import { useEffect, useState } from 'react';
+
+import {
+  checkWaitingForConnectWalletChange,
+  checkWaitingForNetworkChange,
+  retryOn,
+} from './helpers';
+import { migrated, migration } from './migration';
+
+let isCalled = 0;
+
+function getLastConnectedWalletHash(
+  lastConnectedWallet: LastConnectedWallet | null
+) {
+  return `${lastConnectedWallet?.walletType}-${
+    lastConnectedWallet?.network
+  }-${lastConnectedWallet?.accounts?.toString()}`;
+}
+
+/**
+ *
+ * Runs a migration (old swaps from localstorage to queue manager's IndexedDB)
+ * It will be run only once on page load.
+ *
+ */
+function useMigration(): {
+  status: boolean;
+} {
+  const isMigrated = migrated();
+  const [status, setStatus] = useState<boolean>(isMigrated);
+
+  useEffect(() => {
+    void (async () => {
+      // Preventing react to be called twice on Strict Mode (development)
+      if (isCalled) {
+        return;
+      }
+      isCalled = 1;
+
+      void migration().finally(() => {
+        setStatus(true);
+      });
+    })();
+  }, []);
+
+  return {
+    status,
+  };
+}
+
+/**
+ *
+ * On initial load and also connect/disconnect we may need to update swap's notified message.
+ * And also if a new wallet is connected we will retry the queue to see we can resume it or not.
+ *
+ */
+function useQueueManager(params: UseQueueManagerParams): void {
+  const { manager } = useManager();
+  const {
+    lastConnectedWallet,
+    disconnectedWallet,
+    evmChains,
+    canSwitchNetworkTo,
+    clearDisconnectedWallet,
+  } = params;
+
+  useEffect(() => {
+    if (lastConnectedWallet) {
+      checkWaitingForConnectWalletChange({
+        evmChains,
+        lastConnectedWallet,
+        manager,
+      });
+      retryOn(lastConnectedWallet, manager, canSwitchNetworkTo);
+    }
+  }, [getLastConnectedWalletHash(lastConnectedWallet)]);
+
+  useEffect(() => {
+    if (disconnectedWallet) {
+      checkWaitingForNetworkChange(manager);
+
+      /*
+       *We need to reset the state value, so if a wallet disconnected twice (after reconnect),
+       *this effect will be run properly.
+       */
+      clearDisconnectedWallet();
+    }
+  }, [disconnectedWallet]);
+}
+
+export { useQueueManager, useMigration };

package/src/index.ts

@@ -0,0 +1,68 @@
+import type { Configs } from './configs';
+import type { SwapQueueDef } from './types';
+
+import { initConfig } from './configs';
+import { swapQueueDef } from './queueDef';
+
+export { PrettyError, prettifyErrorMessage } from './shared-errors';
+export type {
+  SwapQueueContext,
+  SwapStorage,
+  RouteExecutionEvents,
+  Route,
+  Step,
+  RouteEvent,
+  StepEvent,
+  RouteEventData,
+  StepEventData,
+  RouteStartedEvent,
+  RouteSucceededEvent,
+  RouteFailedEvent,
+  StepStartedEvent,
+  StepSucceededEvent,
+  StepFailedEvent,
+  StepTxExecutionUpdatedEvent,
+  StepTxExecutionBlockedEvent,
+  StepCheckStatusEvent,
+  StepApprovalTxSucceededEvent,
+  StepOutputRevealedEvent,
+  LastConnectedWallet,
+} from './types';
+export {
+  WidgetEvents,
+  StepEventType,
+  RouteEventType,
+  StepExecutionEventStatus,
+  StepExecutionBlockedEventStatus,
+  EventSeverity,
+} from './types';
+export type {
+  PendingSwapWithQueueID,
+  EventType,
+  TargetNamespace,
+} from './shared';
+export {
+  getCurrentNamespaceOfOrNull,
+  getRelatedWalletOrNull,
+  getRelatedWallet,
+  MessageSeverity,
+  calculatePendingSwap,
+  getUsdPrice,
+} from './shared';
+export {
+  updateSwapStatus,
+  checkWaitingForNetworkChange,
+  getCurrentStep,
+  cancelSwap,
+  getRequiredWallet,
+  getRunningSwaps,
+  resetRunningSwapNotifsOnPageLoad,
+  isApprovalTX,
+  getLastSuccessfulStep,
+} from './helpers';
+export { useMigration, useQueueManager } from './hooks';
+
+export function makeQueueDefinition(configs: Configs): SwapQueueDef {
+  initConfig(configs);
+  return swapQueueDef;
+}

package/src/migration.ts

@@ -0,0 +1,124 @@
+import type { PersistedQueue } from '@rango-dev/queue-manager-core';
+import type { PendingSwap } from 'rango-types';
+
+import { DB_NAME, Persistor, Status } from '@rango-dev/queue-manager-core';
+import { v4 as uuid } from 'uuid';
+
+import { SwapActionTypes } from './types';
+
+const MIGRATED_KEY = 'migratedToQueueManager';
+
+/**
+ *
+ * If `MIGRATED_KEY` is set, it means we already migrated data from localstorage.
+ *
+ */
+function migrated(): boolean {
+  return !!window.localStorage.getItem(MIGRATED_KEY);
+}
+
+async function hasQueueManagerOnIDB(): Promise<boolean> {
+  try {
+    return (await (window.indexedDB as any).databases())
+      .map((db: any) => db.name)
+      .includes(DB_NAME);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ *
+ * By calling this function, we first check if the data already migrated or not,
+ * If not, starting to migrating to IndexedDb with proper format that queue manager is understand.
+ *
+ */
+async function migration(): Promise<boolean> {
+  const swapsFromStorage = window.localStorage.getItem('pendingSwaps');
+  const hasIndexDB = await hasQueueManagerOnIDB();
+
+  // For new users or already migrated.
+  if (!swapsFromStorage || migrated() || hasIndexDB) {
+    return true;
+  }
+
+  // For old users, but they didn't do any swaps yet.
+  const swaps: PendingSwap[] = JSON.parse(swapsFromStorage);
+  const convertedSwaps: PersistedQueue[] = [];
+
+  swaps.forEach((swap) => {
+    /*
+     *For running task we need to add some more work
+     *We need to create a queue task to be run and resume the running task from queue manager.
+     */
+    if (swap.status === 'running') {
+      const taskId = uuid();
+
+      const convertedSwap: PersistedQueue = {
+        id: swap.requestId,
+        createdAt: Number(swap.creationTime),
+        name: 'swap',
+        status: Status.RUNNING,
+        storage: {
+          swapDetails: swap,
+        },
+        state: {
+          status: Status.RUNNING,
+          activeTaskIndex: 0,
+          tasks: {
+            [taskId]: {
+              blockedFor: null,
+              status: Status.RUNNING,
+            },
+          },
+        },
+        tasks: [
+          {
+            id: taskId,
+            action: SwapActionTypes.SCHEDULE_NEXT_STEP,
+          },
+        ],
+      };
+      convertedSwaps.push(convertedSwap);
+    } else {
+      /*
+       * For failed or successful swaps, we only move it to IndexedDB,
+       * And there is no need to consider them to be run.
+       */
+      const status = swap.status === 'success' ? Status.SUCCESS : Status.FAILED;
+
+      const convertedSwap: PersistedQueue = {
+        id: swap.requestId,
+        createdAt: Number(swap.creationTime),
+        name: 'swap',
+        status,
+        storage: {
+          swapDetails: swap,
+        },
+        state: {
+          status,
+          activeTaskIndex: 0,
+          tasks: {},
+        },
+        tasks: [],
+      };
+
+      convertedSwaps.push(convertedSwap);
+    }
+  });
+
+  // Getting an instance from persistor, so we can directly put our data inside it.
+  const persistor = new Persistor();
+
+  const promises = convertedSwaps.map(async (queue) =>
+    persistor.insertQueue(queue)
+  );
+  await Promise.all(promises);
+
+  // Mark as the data has been successfully migrated.
+  window.localStorage.setItem(MIGRATED_KEY, '1');
+
+  return true;
+}
+
+export { migration, migrated };

package/src/numbers.ts

@@ -0,0 +1,68 @@
+import BigNumber from 'bignumber.js';
+
+export const numberToString = (
+  number: BigNumber | string | null,
+  minDecimals: number | null = null,
+  maxDecimals: number | null = null
+): string => {
+  if (number === null) return '';
+  if (number === '') return '';
+  const n = new BigNumber(number);
+  const roundingMode = 1;
+  let maxI = 1000;
+  for (let i = 0; i < 60; i++) {
+    if (new BigNumber(n.toFixed(i, roundingMode)).eq(n)) {
+      maxI = i;
+      break;
+    }
+  }
+
+  if (n.gte(10000)) return n.toFormat(0, roundingMode);
+  if (n.gte(1000))
+    return n.toFormat(
+      Math.min(
+        maxI,
+        Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))
+      ),
+      roundingMode
+    );
+  if (n.gte(100))
+    return n.toFormat(
+      Math.min(
+        maxI,
+        Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))
+      ),
+      roundingMode
+    );
+  if (n.gte(1))
+    return n.toFormat(
+      Math.min(
+        maxI,
+        Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 2))
+      ),
+      roundingMode
+    );
+  if (n.gte(0.01))
+    return n.toFormat(
+      Math.min(
+        maxI,
+        Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 4))
+      ),
+      roundingMode
+    );
+  for (let i = minDecimals || 4; i < 17; i++)
+    if (n.gte(Math.pow(10, -i)))
+      return n.toFormat(
+        Math.min(
+          maxI,
+          Math.min(maxDecimals || 100, Math.max(minDecimals || 0, i))
+        ),
+        roundingMode
+      );
+  if (n.isEqualTo(0)) return '0';
+
+  return n.toFormat(
+    Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 8))),
+    roundingMode
+  );
+};

package/src/queueDef.ts

@@ -0,0 +1,39 @@
+import { BlockReason, SwapActionTypes, SwapQueueDef } from './types';
+import { checkStatus } from './actions/checkStatus';
+import { createTransaction } from './actions/createTransaction';
+import { executeTransaction } from './actions/executeTransaction';
+import { scheduleNextStep } from './actions/scheduleNextStep';
+import { start } from './actions/start';
+import {
+  onBlockForChangeNetwork,
+  onBlockForConnectWallet,
+  onDependsOnOtherQueues,
+} from './helpers';
+
+/**
+ *
+ * The idea behind this queue is to be able dynamically add some steps.
+ * After running a swap, it can be blocked (like on waiting for switch netwrok)
+ *  or waits for something happend (like checking status of a transaction from server)
+ *
+ */
+export const swapQueueDef: SwapQueueDef = {
+  name: 'swap',
+  actions: {
+    [SwapActionTypes.START]: start,
+    [SwapActionTypes.SCHEDULE_NEXT_STEP]: scheduleNextStep,
+    [SwapActionTypes.CREATE_TRANSACTION]: createTransaction,
+    [SwapActionTypes.EXECUTE_TRANSACTION]: executeTransaction,
+    [SwapActionTypes.CHECK_TRANSACTION_STATUS]: checkStatus,
+  },
+  run: [SwapActionTypes.START],
+  whenTaskBlocked: (event, meta) => {
+    if (event.reason.reason === BlockReason.WAIT_FOR_CONNECT_WALLET) {
+      onBlockForConnectWallet(event, meta);
+    } else if (event.reason.reason === BlockReason.WAIT_FOR_NETWORK_CHANGE) {
+      onBlockForChangeNetwork(event, meta);
+    } else if (event.reason.reason === BlockReason.DEPENDS_ON_OTHER_QUEUES) {
+      onDependsOnOtherQueues(event, meta);
+    }
+  },
+};

package/src/services/eventEmitter.ts

@@ -0,0 +1,290 @@
+import type {
+  RemoveNameField,
+  Route,
+  RouteEvent,
+  Step,
+  StepEvent,
+} from '../types';
+import type { PendingSwap, PendingSwapStep } from 'rango-types';
+
+import { getConfig } from '../configs';
+import {
+  getCurrentStepTx,
+  getFailedStep,
+  getLastSuccessfulStep,
+  getSwapInputUsd,
+  getSwapOutputUsd,
+  isApprovalCurrentStepTx,
+} from '../helpers';
+import { getCurrentNamespaceOfOrNull } from '../shared';
+import {
+  EventSeverity,
+  RouteEventType,
+  StepEventType,
+  StepExecutionBlockedEventStatus,
+  StepExecutionEventStatus,
+  WidgetEvents,
+} from '../types';
+
+export type NotifierParams = {
+  swap: PendingSwap;
+  step: PendingSwapStep | null;
+} & {
+  event: RemoveNameField<StepEvent, 'message' | 'messageSeverity'>;
+};
+
+function createSteps(swapSteps: PendingSwapStep[]): Step[] {
+  return swapSteps.map((swapStep) => {
+    const {
+      diagnosisUrl,
+      estimatedTimeInSeconds,
+      explorerUrl,
+      feeInUsd,
+      executedTransactionId,
+      executedTransactionTime,
+      expectedOutputAmountHumanReadable,
+      fromBlockchain,
+      toBlockchain,
+      fromSymbol,
+      toSymbol,
+      fromSymbolAddress,
+      toSymbolAddress,
+      swapperType,
+      swapperId,
+      outputAmount,
+      fromAmountMaxValue,
+      fromAmountMinValue,
+      fromAmountPrecision,
+      fromAmountRestrictionType,
+      fromDecimals,
+      status: stepStatus,
+    } = swapStep;
+
+    const step: Step = {
+      diagnosisUrl,
+      estimatedTimeInSeconds,
+      explorerUrl,
+      feeInUsd,
+      executedTransactionId,
+      executedTransactionTime,
+      expectedOutputAmountHumanReadable,
+      fromBlockchain,
+      toBlockchain,
+      fromSymbol,
+      toSymbol,
+      fromSymbolAddress,
+      toSymbolAddress,
+      swapperName: swapperId,
+      swapperType,
+      outputAmount,
+      fromAmountMaxValue,
+      fromAmountMinValue,
+      fromAmountPrecision,
+      fromAmountRestrictionType,
+      fromDecimals,
+      status: stepStatus,
+      transaction: getCurrentStepTx(swapStep),
+    };
+
+    return step;
+  });
+}
+
+function getEventPayload(
+  swap: PendingSwap,
+  type: StepEventType | RouteEventType,
+  swapStep?: PendingSwapStep
+): { route: Route; step: Step } {
+  const {
+    creationTime,
+    finishTime,
+    requestId,
+    inputAmount,
+    status,
+    wallets,
+    steps,
+    settings,
+  } = swap;
+
+  const routeSteps = createSteps(steps);
+  const route: Route = {
+    creationTime,
+    finishTime,
+    requestId,
+    inputAmount,
+    status,
+    wallets,
+    steps: routeSteps,
+    slippage: settings.slippage,
+    infiniteApproval: settings.infiniteApprove,
+  };
+
+  const result: { route: Route; step: Step } = {
+    route,
+    step: routeSteps[routeSteps.length - 1],
+  };
+  if (swapStep) {
+    result.step = createSteps([swapStep])[0];
+  } else {
+    if (type === 'failed') {
+      const failedStep = getFailedStep(routeSteps);
+      if (failedStep) {
+        result.step = failedStep;
+      }
+    } else {
+      const lastSuccessfulStep = getLastSuccessfulStep(routeSteps);
+      if (lastSuccessfulStep) {
+        result.step = lastSuccessfulStep;
+      }
+    }
+  }
+
+  return result;
+}
+
+function emitRouteEvent(stepEvent: StepEvent, route: Route, swap: PendingSwap) {
+  let routeEvent: RouteEvent | undefined;
+  const { type } = stepEvent;
+  // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
+  switch (type) {
+    case StepEventType.STARTED:
+      routeEvent = { ...stepEvent, type: RouteEventType.STARTED };
+      break;
+    case StepEventType.FAILED:
+      routeEvent = {
+        ...stepEvent,
+        type: RouteEventType.FAILED,
+        inputAmount: swap.inputAmount,
+        inputAmountUsd: getSwapInputUsd(swap),
+        swapMode: swap.mode || 'swap',
+      };
+      break;
+    case StepEventType.SUCCEEDED: {
+      routeEvent = {
+        ...stepEvent,
+        type: RouteEventType.SUCCEEDED,
+        inputAmount: swap.inputAmount,
+        inputAmountUsd: getSwapInputUsd(swap),
+        outputAmount: swap.steps[swap.steps.length - 1].outputAmount ?? '',
+        outputAmountUsd: getSwapOutputUsd(swap),
+        swapMode: swap.mode || 'swap',
+      };
+      break;
+    }
+    default:
+      break;
+  }
+  if (routeEvent) {
+    const eventEmitter = getConfig('emitter');
+    eventEmitter?.emit(WidgetEvents.RouteEvent, { event: routeEvent, route });
+  }
+}
+
+function emitStepEvent(stepEvent: StepEvent, route: Route, step: Step) {
+  const eventEmitter = getConfig('emitter');
+  eventEmitter?.emit(WidgetEvents.StepEvent, { event: stepEvent, route, step });
+}
+
+export function notifier(params: NotifierParams) {
+  const { event } = params;
+  const { type } = event;
+  const { route, step } = getEventPayload(
+    params.swap,
+    type,
+    params.step ?? undefined
+  );
+  const fromAsset = `${step.fromBlockchain}.${step.fromSymbol}`;
+  const toAsset = `${step.toBlockchain}.${step.toSymbol}`;
+  const outputAmount = step.outputAmount ?? '';
+  const currentFromNamespace = !!params.step
+    ? getCurrentNamespaceOfOrNull(params.swap, params.step)
+    : null;
+  let message = '';
+  let messageSeverity: StepEvent['messageSeverity'] = EventSeverity.INFO;
+
+  switch (type) {
+    case StepEventType.STARTED:
+      message = 'Swap process started';
+      messageSeverity = EventSeverity.SUCCESS;
+      break;
+    case StepEventType.SUCCEEDED:
+      message = `You received ${outputAmount} ${toAsset}, hooray!`;
+      messageSeverity = EventSeverity.SUCCESS;
+      break;
+    case StepEventType.FAILED:
+      message = `Swap failed: ${
+        params.swap?.extraMessage ?? 'Reason is unknown'
+      }`;
+      messageSeverity = EventSeverity.ERROR;
+      break;
+    case StepEventType.TX_EXECUTION:
+      if (event.status === StepExecutionEventStatus.CREATE_TX) {
+        message = 'Please wait while the transaction is created ...';
+        messageSeverity = EventSeverity.INFO;
+      } else if (event.status === StepExecutionEventStatus.SEND_TX) {
+        if (params.step && isApprovalCurrentStepTx(params.step)) {
+          message = `Please confirm '${step.swapperName}' smart contract access to ${fromAsset}`;
+        } else {
+          message = 'Please confirm transaction request in your wallet';
+        }
+        messageSeverity = EventSeverity.WARNING;
+      } else if (event.status === StepExecutionEventStatus.TX_SENT) {
+        message = 'Transaction sent successfully';
+        messageSeverity = EventSeverity.INFO;
+      }
+      break;
+    case StepEventType.CHECK_STATUS:
+      if (params.step && isApprovalCurrentStepTx(params.step)) {
+        message = 'Checking approve transaction status ...';
+      } else {
+        message = 'Checking transaction status ...';
+      }
+      messageSeverity = EventSeverity.INFO;
+      break;
+    case StepEventType.APPROVAL_TX_SUCCEEDED:
+      message = 'Smart contract called successfully';
+      messageSeverity = EventSeverity.SUCCESS;
+      break;
+    case StepEventType.OUTPUT_REVEALED:
+      message = 'Transaction output amount revealed';
+      messageSeverity = EventSeverity.SUCCESS;
+      break;
+
+    case StepEventType.TX_EXECUTION_BLOCKED:
+      if (
+        event.status ===
+        StepExecutionBlockedEventStatus.WAITING_FOR_WALLET_CONNECT
+      ) {
+        message = 'Please connect your wallet.';
+        messageSeverity = EventSeverity.WARNING;
+      } else if (
+        event.status === StepExecutionBlockedEventStatus.WAITING_FOR_QUEUE
+      ) {
+        message = 'Waiting for other swaps to complete';
+        messageSeverity = EventSeverity.WARNING;
+      } else if (
+        event.status ===
+        StepExecutionBlockedEventStatus.WAITING_FOR_CHANGE_WALLET_ACCOUNT
+      ) {
+        message = 'Please change your wallet account.';
+        messageSeverity = EventSeverity.WARNING;
+      } else if (
+        event.status ===
+        StepExecutionBlockedEventStatus.WAITING_FOR_NETWORK_CHANGE
+      ) {
+        message = `Please change your wallet network to ${currentFromNamespace?.network}.`;
+        messageSeverity = EventSeverity.WARNING;
+      }
+      break;
+
+    default:
+      break;
+  }
+
+  if (params.step) {
+    emitStepEvent({ ...event, message, messageSeverity }, route, step);
+  }
+  if (params.event.type === StepEventType.FAILED || !params.step) {
+    emitRouteEvent({ ...event, message, messageSeverity }, route, params.swap);
+  }
+}

package/src/services/httpService.ts

@@ -0,0 +1,10 @@
+import { RangoClient } from 'rango-sdk';
+import { getConfig } from '../configs';
+
+let rango: RangoClient | undefined = undefined;
+
+export const httpService = () => {
+  if (rango) return rango;
+  rango = new RangoClient(getConfig('API_KEY'), getConfig('BASE_URL'));
+  return rango;
+};

package/src/services/index.ts

@@ -0,0 +1 @@
+export { httpService } from './httpService';