@rango-dev/queue-manager-rango-preset 0.1.10-next.101

package/src/hooks.ts

@@ -0,0 +1,76 @@
+import { useManager } from '@rango-dev/queue-manager-react';
+import { useEffect, useState } from 'react';
+import {
+  checkWaitingForConnectWalletChange,
+  checkWaitingForNetworkChange,
+  retryOn,
+} from './helpers';
+import { migrated, migration } from './migration';
+import { UseQueueManagerParams } from './types';
+
+let isCalled = 0;
+
+/**
+ *
+ * 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(() => {
+    (async () => {
+      // Preventing react to be called twice on Strict Mode (development)
+      if (isCalled) return;
+      isCalled = 1;
+
+      migration().finally(() => {
+        setStatus(true);
+      });
+    })();
+  }, []);
+
+  return {
+    status,
+  };
+}
+
+/**
+ *
+ * On initial load and also connect/disconnet 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();
+
+  useEffect(() => {
+    if (params.lastConnectedWallet) {
+      checkWaitingForConnectWalletChange({
+        evmChains: params.evmChains,
+        wallet_network: params.lastConnectedWallet,
+        manager,
+        notifier: params.notifier,
+      });
+      retryOn(params.lastConnectedWallet, params.notifier, manager);
+    }
+  }, [params.lastConnectedWallet]);
+
+  useEffect(() => {
+    if (params.disconnectedWallet) {
+      checkWaitingForNetworkChange(manager);
+
+      /* 
+        We need to reset the state value, so if a wallet disconnected twice (after reconnect),
+        this effect will be run properly.
+      */
+      params.clearDisconnectedWallet();
+    }
+  }, [params.disconnectedWallet]);
+}
+
+export { useQueueManager, useMigration };

package/src/index.ts

@@ -0,0 +1,27 @@
+export { PrettyError, prettifyErrorMessage } from './shared-errors';
+export { SwapQueueContext, SwapStorage } from './types';
+export {
+  PendingSwapWithQueueID,
+  getCurrentBlockchainOfOrNull,
+  getRelatedWalletOrNull,
+  getRelatedWallet,
+  MessageSeverity,
+  PendingSwapStep,
+  PendingSwapNetworkStatus,
+  PendingSwap,
+  EventType,
+  SwapProgressNotification,
+} from './shared';
+export {
+  updateSwapStatus,
+  checkWaitingForNetworkChange,
+  getCurrentStep,
+  getEvmProvider,
+  cancelSwap,
+  getRequiredWallet,
+  getRunningSwaps,
+  splitWalletNetwork,
+  resetRunningSwapNotifsOnPageLoad,
+} from './helpers';
+export { swapQueueDef } from './queueDef';
+export { useMigration, useQueueManager } from './hooks';

package/src/migration.ts

@@ -0,0 +1,124 @@
+import {
+  PersistedQueue,
+  Persistor,
+  Status,
+  DB_NAME,
+} from '@rango-dev/queue-manager-core';
+import { v4 as uuid } from 'uuid';
+import { PendingSwap } from './shared';
+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((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/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/httpService.ts

@@ -0,0 +1,7 @@
+import { RangoClient } from 'rango-sdk';
+import { RANGO_DAPP_API_KEY, RANGO_DAPP_API_BASE_URL } from '../constants';
+
+export const httpService = new RangoClient(
+  RANGO_DAPP_API_KEY || '',
+  RANGO_DAPP_API_BASE_URL
+);

package/src/services/index.ts

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

package/src/shared-errors.ts

@@ -0,0 +1,160 @@
+import {
+  APIErrorCode,
+  SignerError,
+  SignerErrorCode,
+  isAPIErrorCode,
+  isSignerErrorCode,
+} from 'rango-types';
+
+export type ErrorDetail = {
+  extraMessage: string;
+  extraMessageDetail?: string | null | undefined;
+  extraMessageErrorCode: SignerErrorCode | APIErrorCode | null;
+};
+
+const ERROR_ASSERTION_FAILED = 'Assertion failed (Unexpected behaviour)';
+const ERROR_CREATE_TRANSACTION = 'Create transaction failed in Rango Server';
+const ERROR_INPUT_WALLET_NOT_FOUND = 'Input wallet not found';
+
+type ErrorRoot = string | Record<string, string> | null;
+
+export class PrettyError extends Error {
+  private readonly detail?: string;
+  private readonly root?: ErrorRoot;
+  private readonly code?: APIErrorCode;
+  public _isPrettyError = true;
+
+  constructor(
+    code: APIErrorCode,
+    m: string,
+    root?: ErrorRoot,
+    detail?: string
+  ) {
+    super(m);
+    Object.setPrototypeOf(this, PrettyError.prototype);
+    PrettyError.prototype._isPrettyError = true;
+    this.code = code;
+    this.detail = detail;
+    this.root = root;
+  }
+
+  static isPrettyError(obj: unknown): obj is PrettyError {
+    return (
+      obj instanceof PrettyError ||
+      Object.prototype.hasOwnProperty('_isPrettyError')
+    );
+  }
+
+  getErrorDetail(): ErrorDetail {
+    const rawMessage =
+      typeof this.root === 'object' && this.root && this.root.error
+        ? this.root.error
+        : JSON.stringify(this.root);
+    const rootStr =
+      typeof this.root === 'string'
+        ? this.root
+        : this.root instanceof Error
+        ? this.root.message
+        : rawMessage;
+    return {
+      extraMessage: this.message,
+      extraMessageDetail: this.detail || rootStr,
+      extraMessageErrorCode: this.code || null,
+    };
+  }
+
+  static AssertionFailed(m: string): PrettyError {
+    return new PrettyError(
+      'CLIENT_UNEXPECTED_BEHAVIOUR',
+      ERROR_ASSERTION_FAILED,
+      m
+    );
+  }
+
+  static BadStatusCode(
+    message: string,
+    statusCode: number | string
+  ): PrettyError {
+    return new PrettyError(
+      'TX_FAIL',
+      message,
+      null,
+      `status code = ${statusCode}`
+    );
+  }
+
+  static CreateTransaction(detail: string): PrettyError {
+    return new PrettyError(
+      'FETCH_TX_FAILED',
+      ERROR_CREATE_TRANSACTION,
+      null,
+      detail
+    );
+  }
+
+  static WalletMissing(): PrettyError {
+    return new PrettyError(
+      'CLIENT_UNEXPECTED_BEHAVIOUR',
+      ERROR_INPUT_WALLET_NOT_FOUND,
+      null,
+      'Server requested for a blockchain or address not selected by user'
+    );
+  }
+
+  static BlockchainMissing(): PrettyError {
+    return new PrettyError(
+      'CLIENT_UNEXPECTED_BEHAVIOUR',
+      ERROR_INPUT_WALLET_NOT_FOUND,
+      null,
+      'Server requested for a blockchain or address not selected by user'
+    );
+  }
+}
+
+export function mapAppErrorCodesToAPIErrorCode(
+  errorCode: string | null
+): APIErrorCode {
+  const defaultErrorCode = 'CLIENT_UNEXPECTED_BEHAVIOUR';
+  try {
+    if (!errorCode) return defaultErrorCode;
+    if (isAPIErrorCode(errorCode)) return errorCode;
+    if (isSignerErrorCode(errorCode)) {
+      const t: { [key in SignerErrorCode]: APIErrorCode } = {
+        [SignerErrorCode.REJECTED_BY_USER]: 'USER_REJECT',
+        [SignerErrorCode.SIGN_TX_ERROR]: 'CALL_WALLET_FAILED',
+        [SignerErrorCode.SEND_TX_ERROR]: 'SEND_TX_FAILED',
+        [SignerErrorCode.NOT_IMPLEMENTED]: defaultErrorCode,
+        [SignerErrorCode.OPERATION_UNSUPPORTED]: defaultErrorCode,
+        [SignerErrorCode.UNEXPECTED_BEHAVIOUR]: defaultErrorCode,
+      };
+      return t[errorCode];
+    }
+    return defaultErrorCode;
+  } catch (err) {
+    return defaultErrorCode;
+  }
+}
+
+export const prettifyErrorMessage = (obj: unknown): ErrorDetail => {
+  if (!obj) return { extraMessage: '', extraMessageErrorCode: null };
+  if (PrettyError.isPrettyError(obj)) return obj.getErrorDetail();
+  if (SignerError.isSignerError(obj)) {
+    const t = obj.getErrorDetail();
+    return {
+      extraMessage: t.message,
+      extraMessageDetail: t.detail,
+      extraMessageErrorCode: t.code,
+    };
+  }
+  if (obj instanceof Error)
+    return {
+      extraMessage: obj.toString(),
+      extraMessageErrorCode: null,
+    };
+  if (typeof obj !== 'string')
+    return {
+      extraMessage: JSON.stringify(obj),
+      extraMessageErrorCode: null,
+    };
+  return { extraMessage: obj, extraMessageErrorCode: null };
+};

package/src/shared-sentry.ts

@@ -0,0 +1,24 @@
+import { WalletType } from '@rango-dev/wallets-shared';
+import * as Sentry from '@sentry/browser';
+import { PendingSwap, PendingSwapStep } from './shared';
+
+export function logRPCError(
+  error: unknown,
+  swap: PendingSwap,
+  currentStep: PendingSwapStep | undefined,
+  walletType: WalletType | undefined
+): void {
+  try {
+    Sentry.captureException(error, {
+      tags: {
+        requestId: swap.requestId,
+        rpc: true,
+        swapper: currentStep?.swapperId || '',
+        walletType: walletType || '',
+      },
+      level: 'warning' as any,
+    });
+  } catch (e) {
+    console.log({ e });
+  }
+}