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

package/src/hooks.ts

@@ -0,0 +1,75 @@
+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,
+      });
+      retryOn(params.lastConnectedWallet, 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,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: any, meta: any) => {
+    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/migration.ts

@@ -0,0 +1,112 @@
+import {
+  PersistedQueue,
+  Persistor,
+  Status,
+} 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);
+}
+
+/**
+ *
+ * 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');
+
+  // For new users or already migrated.
+  if (!swapsFromStorage || migrated()) {
+    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: uuid(),
+        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: uuid(),
+        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/shared-api.ts

@@ -0,0 +1,175 @@
+import {
+  isWalletErrorCode,
+  WalletErrorCode,
+  WalletType,
+} from '@rango-dev/wallets-shared';
+import { getCookieId, SwapperStatusResponse } from './shared';
+import {
+  CheckApprovalResponse,
+  CheckTxStatusRequest,
+  CreateTransactionRequest,
+  CreateTransactionResponse,
+} from 'rango-sdk';
+import {
+  APIErrorCode,
+  ApiMethodName,
+  ERROR_COMMUNICATING_WITH_API,
+  PrettyError,
+} from './shared-errors';
+import { BigNumber } from 'bignumber.js';
+import {
+  BASE_URL,
+  RANGO_COOKIE_HEADER,
+  RANGO_DAPP_ID_QUERY,
+} from './constants';
+
+export async function checkSwapStatus(
+  requestId: string,
+  txId: string,
+  step: number
+): Promise<SwapperStatusResponse | null> {
+  const url = `${BASE_URL}/tx/check-status?${RANGO_DAPP_ID_QUERY}`;
+  const body: CheckTxStatusRequest = { step, txId, requestId };
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      [RANGO_COOKIE_HEADER]: getCookieId(),
+      'content-type': 'application/json;charset=UTF-8',
+    },
+    body: JSON.stringify(body),
+  });
+
+  if (
+    (!!response.status && (response.status < 200 || response.status >= 400)) ||
+    !response.ok
+  ) {
+    const apiError = ERROR_COMMUNICATING_WITH_API(
+      ApiMethodName.CheckingTransactionStatus
+    );
+    throw PrettyError.BadStatusCode(apiError, response.status);
+  }
+
+  const res = await response.json();
+  return {
+    ...res,
+    outputAmount: res.outputAmount ? new BigNumber(res.outputAmount) : null,
+  };
+}
+
+export async function createTransaction(
+  request: CreateTransactionRequest
+): Promise<CreateTransactionResponse> {
+  const url = `${BASE_URL}/tx/create?${RANGO_DAPP_ID_QUERY}`;
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json;charset=UTF-8',
+        [RANGO_COOKIE_HEADER]: getCookieId(),
+      },
+      body: JSON.stringify(request),
+    });
+
+    if (
+      (!!response.status &&
+        (response.status < 200 || response.status >= 400)) ||
+      !response.ok
+    ) {
+      throw PrettyError.CreateTransaction(
+        `Error creating the transaction, status code: ${response.status}`
+      );
+    }
+
+    const result: CreateTransactionResponse = await response.json();
+    if (!result.ok || !result.transaction)
+      throw PrettyError.CreateTransaction(
+        result.error || 'bad response from create tx endpoint'
+      );
+
+    return result;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (error) {
+    if (error instanceof Error) {
+      throw PrettyError.CreateTransaction(error.message);
+    }
+    throw error;
+  }
+}
+
+export async function checkApproved(
+  requestId: string
+): Promise<CheckApprovalResponse> {
+  const url = `${BASE_URL}/tx/${requestId}/check-approval?${RANGO_DAPP_ID_QUERY}`;
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'content-type': 'application/json;charset=UTF-8',
+      [RANGO_COOKIE_HEADER]: getCookieId(),
+    },
+  });
+
+  if (
+    (!!response.status && (response.status < 200 || response.status >= 400)) ||
+    !response.ok
+  ) {
+    const apiError = ERROR_COMMUNICATING_WITH_API(ApiMethodName.CheckApproval);
+    throw PrettyError.BadStatusCode(apiError, response.status);
+  }
+
+  return await response.json();
+}
+
+function isAPIErrorCode(value: string): value is APIErrorCode {
+  return (Object.values(APIErrorCode) as string[]).includes(value);
+}
+
+export function mapAppErrorCodesToAPIErrorCode(
+  errorCode: string | null
+): APIErrorCode {
+  const defaultErrorCode = APIErrorCode.CLIENT_UNEXPECTED_BEHAVIOUR;
+  try {
+    if (!errorCode) return defaultErrorCode;
+    if (isAPIErrorCode(errorCode)) return errorCode;
+    if (isWalletErrorCode(errorCode)) {
+      const t: { [key in WalletErrorCode]: APIErrorCode } = {
+        [WalletErrorCode.REJECTED_BY_USER]: APIErrorCode.USER_REJECT,
+        [WalletErrorCode.SIGN_TX_ERROR]: APIErrorCode.CALL_WALLET_FAILED,
+        [WalletErrorCode.SEND_TX_ERROR]: APIErrorCode.SEND_TX_FAILED,
+        [WalletErrorCode.NOT_IMPLEMENTED]: defaultErrorCode,
+        [WalletErrorCode.OPERATION_UNSUPPORTED]: defaultErrorCode,
+        [WalletErrorCode.UNEXPECTED_BEHAVIOUR]: defaultErrorCode,
+      };
+      return t[errorCode];
+    }
+    return defaultErrorCode;
+  } catch (err) {
+    return defaultErrorCode;
+  }
+}
+
+export async function reportFailed(
+  requestId: string,
+  step: number,
+  eventType: APIErrorCode,
+  reason: string,
+  walletType: WalletType | null
+): Promise<void> {
+  const url = `${BASE_URL}/tx/report-tx?${RANGO_DAPP_ID_QUERY}`;
+  await fetch(url, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json;charset=UTF-8',
+      [RANGO_COOKIE_HEADER]: getCookieId(),
+    },
+    body: JSON.stringify({
+      requestId,
+      step,
+      eventType,
+      reason,
+      tags: {
+        wallet: walletType,
+      },
+    }),
+  });
+}

package/src/shared-errors.ts

@@ -0,0 +1,156 @@
+import { WalletType } from '@rango-dev/wallets-shared';
+
+export type ErrorDetail = {
+  extraMessage: string;
+  extraMessageDetail?: string | null | undefined;
+  extraMessageErrorCode: string | null;
+};
+
+export enum APIErrorCode {
+  TX_FAIL = 'TX_FAIL',
+  FETCH_TX_FAILED = 'FETCH_TX_FAILED',
+  USER_REJECT = 'USER_REJECT',
+  CALL_WALLET_FAILED = 'CALL_WALLET_FAILED',
+  SEND_TX_FAILED = 'SEND_TX_FAILED',
+  CALL_OR_SEND_FAILED = 'CALL_OR_SEND_FAILED',
+  USER_CANCEL = 'USER_CANCEL',
+  CLIENT_UNEXPECTED_BEHAVIOUR = 'CLIENT_UNEXPECTED_BEHAVIOUR',
+}
+
+export enum ApiMethodName {
+  RequestingSwapTransaction = 'Requesting Swap Transaction',
+  CreatingSwap = 'Creating Swap',
+  CheckingTransactionStatus = 'Checking transaction status',
+  CreateTransaction = 'Create Transaction',
+  CheckApproval = 'Check TX Approval',
+  GettingSwapDetail = 'Getting Swap Detail',
+  GettingUserLimits = 'Getting user limits',
+}
+
+export enum TransactionName {
+  GenericTransaction = 'transaction',
+  SendingOneInchTransaction = '1inch transaction',
+  Approval = 'approve transaction',
+}
+
+export const ERROR_ASSERTION_FAILED = 'Assertion failed (Unexpected behaviour)';
+
+export const ERROR_COMMUNICATING_WITH_API = (
+  apiMethodName: ApiMethodName
+): string => `Unexpected response from API (${apiMethodName})`;
+
+export const ERROR_DESCRIPTION_UNSUPPORTED_TRANSACTION = (
+  method: string,
+  walletType: WalletType
+): string => `method: ${method} call is unsupported for wallet ${walletType}`;
+
+export const ERROR_SIGNING_TRANSACTION = (
+  transactionName: TransactionName
+): string => `Error sending ${transactionName}`;
+export const ERROR_REJECTING_TRANSACTION = 'User rejected the message signing';
+
+export const ERROR_CREATE_TRANSACTION =
+  'Create transaction failed in Rango Server';
+export const ERROR_INPUT_WALLET_NOT_FOUND = 'Input wallet not found';
+
+export const DEFAULT_WALLET_INJECTION_ERROR =
+  'Failed to connect to wallet, if you have turned injection off (disable default wallet for xDefi), turn it on and refresh the page';
+
+type ErrorRoot = string | Record<string, string> | null;
+
+export class PrettyError extends Error {
+  private readonly detail?: string;
+  private readonly root?: ErrorRoot;
+  private readonly code?: APIErrorCode;
+
+  constructor(
+    code: APIErrorCode,
+    m: string,
+    root?: ErrorRoot,
+    detail?: string
+  ) {
+    super(m);
+    Object.setPrototypeOf(this, PrettyError.prototype);
+    this.code = code;
+    this.detail = detail;
+    this.root = root;
+  }
+
+  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(
+      APIErrorCode.CLIENT_UNEXPECTED_BEHAVIOUR,
+      ERROR_ASSERTION_FAILED,
+      m
+    );
+  }
+
+  static BadStatusCode(
+    message: string,
+    statusCode: number | string
+  ): PrettyError {
+    return new PrettyError(
+      APIErrorCode.TX_FAIL,
+      message,
+      null,
+      `status code = ${statusCode}`
+    );
+  }
+
+  static CreateTransaction(detail: string): PrettyError {
+    return new PrettyError(
+      APIErrorCode.FETCH_TX_FAILED,
+      ERROR_CREATE_TRANSACTION,
+      null,
+      detail
+    );
+  }
+
+  static WalletMissing(): PrettyError {
+    return new PrettyError(
+      APIErrorCode.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(
+      APIErrorCode.CLIENT_UNEXPECTED_BEHAVIOUR,
+      ERROR_INPUT_WALLET_NOT_FOUND,
+      null,
+      'Server requested for a blockchain or address not selected by user'
+    );
+  }
+}
+
+export const ERROR_GETTING_BEST_ROUTE = (status: number | string): string =>
+  `Failed to get best route (status: ${status}), please try again.`;
+
+export const ERROR_CONFIRM_SWAP = (status?: number | string): string =>
+  `Failed to confirm swap (${!!status ? 'status' : 'route'}: ${
+    status || null
+  }), please try again.`;
+
+export const WARNING_STARKNET_FOUND =
+  'StarknNet blockchain is still an ALPHA version. As such, delays may occur, and catastrophic bugs may lurk.';
+
+  

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',
+    });
+  } catch (e) {
+    console.log({ e });
+  }
+}