@xswap-link/sdk 0.3.5 → 0.4.0

package/src/hooks/usePortal.ts

@@ -0,0 +1,79 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Creates DOM element to be used as React root.
+ */
+function createRootElement(id: string): HTMLElement {
+  const rootContainer = document.createElement("div");
+  rootContainer.setAttribute("id", id);
+  return rootContainer;
+}
+
+/**
+ * Appends element as last child of body.
+ */
+function addRootElement(rootElem: Element): void {
+  document.body.insertBefore(
+    rootElem,
+    document.body.lastElementChild!.nextElementSibling,
+  );
+}
+
+/**
+ * Hook to create a React Portal.
+ * Automatically handles creating and tearing-down the root elements (no SRR
+ * makes this trivial), so there is no need to ensure the parent target already
+ * exists.
+ * @example
+ * const target = usePortal(id, [id]);
+ * return createPortal(children, target);
+ * @param {string} id The id of the target container, e.g 'modal' or 'spotlight'
+ * @returns {HTMLElement} The DOM node to use as the Portal target.
+ */
+export function usePortal(id: string): HTMLElement {
+  const rootElemRef = useRef<HTMLElement | null>(null);
+
+  useEffect(
+    function setupElement() {
+      // Look for existing target dom element to append to
+      const existingParent = document.querySelector(`#${id}`);
+      // Parent is either a new root or the existing dom element
+      const parentElem = existingParent || createRootElement(id);
+
+      // If there is no existing DOM element, add a new one.
+      if (!existingParent) {
+        addRootElement(parentElem);
+      }
+
+      // Add the detached element to the parent
+      parentElem.appendChild(rootElemRef.current!);
+
+      return function removeElement() {
+        rootElemRef.current!.remove();
+        if (!parentElem.childElementCount) {
+          parentElem.remove();
+        }
+      };
+    },
+    [id],
+  );
+
+  /**
+   * It's important we evaluate this lazily:
+   * - We need first render to contain the DOM element, so it shouldn't happen
+   *   in useEffect. We would normally put this in the constructor().
+   * - We can't do 'const rootElemRef = useRef(document.createElement('div))',
+   *   since this will run every single render (that's a lot).
+   * - We want the ref to consistently point to the same DOM element and only
+   *   ever run once.
+   * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
+   */
+  function getRootElem(): HTMLElement {
+    if (!rootElemRef.current) {
+      rootElemRef.current = document.createElement("div");
+    }
+    return rootElemRef.current;
+  }
+
+  return getRootElem();
+}

package/src/hooks/useXPower.ts

@@ -0,0 +1,58 @@
+import { ADDRESSES, StakingStableAPRAbi } from "@src/contracts";
+import { useBatchQuery } from "./useBatchQuery";
+import { BigNumber, ethers } from "ethers";
+import { useCallback } from "react";
+
+const iface = new ethers.utils.Interface(StakingStableAPRAbi);
+
+export const useXPower = (chainId: string) => {
+  const { batchQuery } = useBatchQuery();
+
+  return {
+    getXPower: useCallback(
+      async (address: string) => {
+        if (
+          !ADDRESSES[chainId]?.StakingCosmicCadets ||
+          !ADDRESSES[chainId]?.StakingSolarDivision ||
+          !ADDRESSES[chainId]?.StakingIntergalacticCommand
+        ) {
+          return "0";
+        }
+
+        const stakingAddresses: string[] = [
+          ADDRESSES[chainId]?.StakingCosmicCadets,
+          ADDRESSES[chainId]?.StakingSolarDivision,
+          ADDRESSES[chainId]?.StakingIntergalacticCommand,
+        ];
+
+        const calldata = iface.encodeFunctionData("getStaker", [address]);
+        const responses = await batchQuery(
+          chainId,
+          stakingAddresses,
+          stakingAddresses.map(() => calldata),
+        );
+        if (responses) {
+          return responses
+            .map(
+              (stakerResponse) =>
+                ethers.utils.defaultAbiCoder.decode(
+                  [
+                    "address",
+                    "uint256",
+                    "uint256",
+                    "uint256",
+                    "uint256",
+                    "uint256",
+                  ],
+                  stakerResponse,
+                )[1],
+            )
+            .reduce((prev, curr) => prev.add(curr), BigNumber.from(0))
+            .toString();
+        }
+        return "0";
+      },
+      [batchQuery, chainId],
+    ),
+  };
+};

package/src/models/Addresses.ts

@@ -2,12 +2,18 @@ export type Addresses = {
   [chainId: string]: Contracts;
 };
 
-export type Contracts = {
+export type Contracts = Partial<{
   [contractName in ContractName]: string;
-};
+}>;
 
 export enum ContractName {
+  USDC = "USDC",
   BatchQuery = "BatchQuery",
+  CustomXSwapRouter = "CustomXSwapRouter",
   FeeCollector = "FeeCollector",
+  StakingCosmicCadets = "StakingCosmicCadets",
+  StakingSolarDivision = "StakingSolarDivision",
+  StakingIntergalacticCommand = "StakingIntergalacticCommand",
   XSwapRouter = "XSwapRouter",
+  XSwapToken = "XSwapToken",
 }

package/src/models/TokenData.ts

@@ -43,3 +43,16 @@ export type TokenPrices = {
 export type TokenBalances = {
   [tokenAddress: string]: BigNumber | undefined;
 };
+
+export type TokenOption = Token & {
+  chainId: string;
+  disabled?: boolean;
+  balance?: BigNumber;
+};
+
+export type ImportedTokenData = {
+  address: string;
+  symbol: string;
+  name: string;
+  decimals: number;
+};

package/src/models/TransactionHistory.ts

@@ -8,6 +8,7 @@ export type HistoryTransaction = {
   transferId: string;
   transferType: TransferType;
   walletAddress: string;
+  messageId: string;
   // ExecutorRunFailed
   failed: boolean;
   // MessageSent
@@ -41,6 +42,7 @@ export type TransactionStatus =
   | "NOT_FOUND";
 
 export type Transaction = {
+  messageId?: string;
   hash: string;
   timestamp: number;
   sourceChainId: string;

package/src/models/TxUIWrapper.ts

@@ -0,0 +1,51 @@
+import { TransactionResponse } from "@ethersproject/providers";
+import { EvmHandlers } from "@src/context";
+import { Ecosystem } from "@src/models";
+import { Dispatch, SetStateAction } from "react";
+
+export type EnqueueTxProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  executeTransaction: () => Promise<TransactionResponse> | undefined;
+  txStatus: TxStatus;
+  txMsg?: string;
+  handlers?: EvmHandlers;
+  network?: Ecosystem;
+  showDefaultSuccessMessage?: boolean;
+};
+
+export type TxUIWrapperState = {
+  enqueueTransaction: (props: EnqueueTxProps) => number;
+  closeTransactionModal: (nonce: number) => void;
+  isTxModalOpen: boolean;
+  setTxModalOpen: Dispatch<SetStateAction<boolean>>;
+  loading: boolean;
+  txStatus: TxStatus;
+  setTxStatus: Dispatch<SetStateAction<TxStatus>>;
+  txExplorerUrl: string;
+  txHash: string;
+  txError: string;
+  txMsg: string;
+  setTxMsg: Dispatch<SetStateAction<string>>;
+  setTxError: Dispatch<SetStateAction<string>>;
+  txNeedsApproval: boolean;
+  setTxNeedsApproval: Dispatch<SetStateAction<boolean>>;
+};
+
+/**
+ * make sure there's always appropriate CONFIRMATION status following the SIGNING one
+ * see setTxStatus((prevStatus) => prevStatus + 1) at TxUIWrapper.tsx -> addUILogicToHandlersEVM
+ */
+export enum TxStatus {
+  SWAP_INIT,
+  SIGNING_APPROVAL,
+  CONFIRMING_APPROVAL,
+  SIGNING_TX,
+  CONFIRMING_TX,
+  COMPLETED,
+}
+
+export type TxStats = {
+  points?: string;
+  rank?: string;
+  cashback?: string;
+};

package/src/models/XSwapConfig.ts

@@ -1,3 +1,4 @@
 export type XSwapConfig = {
   apiUrl: string;
+  localCss: boolean;
 };

package/src/models/index.ts

@@ -16,3 +16,4 @@ export * from "./Web3Environment";
 export * from "./XSwapCallType";
 export * from "./Referral";
 export * from "./TransactionHistory";
+export * from "./TxUIWrapper";

package/src/models/payloads/GetBalancesPayload.ts

@@ -0,0 +1,3 @@
+export type GetTokenBalancesPayload = {
+  walletAddress: string;
+};

package/src/models/payloads/GetFinishedLeaderboardQuestsPayload.ts

@@ -0,0 +1,3 @@
+export type GetFinishedLeaderboardQuestsPayload = {
+  walletAddress: string;
+};

package/src/models/payloads/GetLeaderboardChangePayload.ts

@@ -0,0 +1,4 @@
+export type GetLeaderboardChangePayload = {
+  walletAddress: string;
+  additionalPoints: number;
+};

package/src/models/payloads/{GetSwapTxPayload.ts → ModalIntegrationPayload.ts}

@@ -1,9 +1,11 @@
 import { ContractCall } from "@src/models";
 
-export type GetSwapTxPayload = {
+export type ModalIntegrationPayload = {
   integratorId: string;
   dstChain: string;
   dstToken: string;
+  srcChain?: string;
+  srcToken?: string;
   customContractCalls?: ContractCall[];
   desc?: string;
   returnTransactions?: boolean;

package/src/models/payloads/index.ts

@@ -1,4 +1,7 @@
-export * from "./GetRoutePayload";
 export * from "./AddReferralPayload";
-export * from "./GetSwapTxPayload";
+export * from "./GetBalancesPayload";
+export * from "./GetFinishedLeaderboardQuestsPayload";
+export * from "./GetLeaderboardChangePayload";
 export * from "./GetPricesPayload";
+export * from "./GetRoutePayload";
+export * from "./ModalIntegrationPayload";

package/src/services/api.ts

@@ -1,10 +1,12 @@
 import xSwapConfig from "../../xswap.config";
 import {
-  BridgeToken,
   Chain,
   Ecosystem,
+  GetFinishedLeaderboardQuestsPayload,
+  GetLeaderboardChangePayload,
   GetPricesPayload,
   GetRoutePayload,
+  GetTokenBalancesPayload,
   Route,
   Token,
   TokenPrices,
@@ -97,10 +99,6 @@ export async function getTokens(
   );
 }
 
-export async function getBridgeTokens(): Promise<BridgeToken[]> {
-  return _sendRequest<BridgeToken[]>(`/bridgeTokens`);
-}
-
 export async function getHistory(payload: { walletAddress: string }) {
   return await _sendRequest<TransactionHistory>(
     `/history?${new URLSearchParams({
@@ -117,6 +115,15 @@ export async function getPrices(payload: GetPricesPayload) {
   );
 }
 
+export async function getBalances(payload: GetTokenBalancesPayload) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return _sendRequest<any>(
+    `/tokenBalances?${new URLSearchParams({
+      data: JSON.stringify(payload),
+    })}`,
+  );
+}
+
 export async function getTxStatus(payload: { transferId: string }) {
   return await _sendRequest<{ status: TransactionStatus }>(
     `/getTxStatus?${new URLSearchParams({
@@ -124,3 +131,25 @@ export async function getTxStatus(payload: { transferId: string }) {
     })}`,
   );
 }
+
+export async function getLeaderboardChange(
+  payload: GetLeaderboardChangePayload,
+) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return _sendRequest<any>(
+    `/leaderboardChange?${new URLSearchParams({
+      data: JSON.stringify(payload),
+    })}`,
+  );
+}
+
+export async function getFinishedLeaderboardQuests(
+  payload: GetFinishedLeaderboardQuestsPayload,
+) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return _sendRequest<any>(
+    `/getFinishedLeaderboardQuests?${new URLSearchParams({
+      data: JSON.stringify(payload),
+    })}`,
+  );
+}

package/src/services/integrations/monitoring.ts

@@ -1,9 +1,7 @@
-import { Chain, MonitoredTransaction, Web3Environment } from "@src/models";
+import { Chain, Token, Transaction, Web3Environment } from "@src/models";
 import { getChains, getTxStatus } from "@src/services";
 import { ethers } from "ethers";
-import { weiToHumanReadable } from "@src/utils";
 import {
-  CCIP_EXPLORER,
   MSG_RECEIVED_EVENT_ABI,
   MSG_RECEIVED_EVENT_SIG,
   MSG_SENT_EVENT_ABI,
@@ -23,9 +21,10 @@ import { getCustomTokenData } from "../blockchain";
 export const renderTxStatus = async (
   txChainId: string,
   txHash: string,
+  dstTokenAddress?: string,
+  dstTokenAmount?: string,
 ): Promise<void> => {
   const txReceipt = await getTxReceipt(txChainId, txHash);
-
   const supportedChains: Chain[] = (await getChains()).filter(
     ({ web3Environment, swapSupported }) =>
       web3Environment === Web3Environment.MAINNET && swapSupported,
@@ -50,6 +49,9 @@ export const renderTxStatus = async (
       `No transaction event arguments found for chain ${txChainId} tx ${txHash}`,
     );
   }
+
+  const MessageSentEventArgs = decodedMessageSentEvent.args;
+
   const srcChain = supportedChains.find(
     (chain) => chain.chainId === txChainId.toString(),
   );
@@ -57,20 +59,20 @@ export const renderTxStatus = async (
     throw new Error(`Unknown src chain ${txChainId}`);
   }
 
-  const tokenAddress = decodedMessageSentEvent.args?.token.toString();
+  const srcTokenAddress = MessageSentEventArgs?.token.toString().toLowerCase();
 
   let srcToken = srcChain.tokens.find(
-    (token) => token.address === decodedMessageSentEvent.args?.token.toString(),
+    (token) => token.address === srcTokenAddress,
   );
 
   if (!srcToken) {
-    srcToken = await getCustomTokenData(srcChain, tokenAddress);
+    srcToken = await getCustomTokenData(srcChain, srcTokenAddress);
   }
 
   const dstChain = supportedChains.find(
     (chain) =>
       chain.ccipChainId ===
-      decodedMessageSentEvent.args?.destinationChainSelector?.toString(),
+      MessageSentEventArgs?.destinationChainSelector?.toString(),
   );
 
   const dstChainId = dstChain?.chainId;
@@ -79,26 +81,36 @@ export const renderTxStatus = async (
     throw new Error(`Unknown destination chain!`);
   }
 
-  const tokenAmount = weiToHumanReadable({
-    amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
-    decimals: srcToken?.decimals || 18,
-    precisionFractionalPlaces: 4,
-  });
+  let dstToken: Token | undefined = undefined;
+  if (dstTokenAddress) {
+    dstToken = dstChain.tokens.find(
+      (token) => token.address === dstTokenAddress.toLowerCase(),
+    );
+  }
 
-  const transaction: MonitoredTransaction = {
-    txHash: txHash,
-    srcChain: srcChain.displayName,
-    srcChainImage: srcChain.image,
-    dstChain: dstChain.displayName,
-    dstChainImage: dstChain.image,
-    srcToken: srcToken?.symbol,
-    srcTokenImage: srcToken?.image,
-    srcAmount: tokenAmount === "0" ? "<0.0001" : tokenAmount,
-    isDone: false,
-    explorer: `${CCIP_EXPLORER}/tx/${txHash}`,
+  const timestamp = Date.now() / 1000;
+  const transaction: Transaction = {
+    hash: txReceipt.transactionHash,
+    timestamp,
+    sourceChainId: srcChain.chainId,
+    targetChainId: dstChain.chainId,
+    amountWei: MessageSentEventArgs?.tokenAmount.toString(),
+    tokenAddress: srcToken.address,
+    tokenOutAddress: dstToken?.address,
+    tokenOutAmount: dstTokenAmount,
+    estimatedDeliveryTimestamp:
+      MessageSentEventArgs?.valueForInstantCcipRecieve.toString() !== "0"
+        ? timestamp * 1000 + 30 * 1000
+        : timestamp * 1000 + 30 * 60 * 1000,
+    status: "IN_PROGRESS",
   };
 
-  addTransactionToRenderedTransactions(transaction);
+  addTransactionToRenderedTransactions({
+    transaction,
+    supportedChains,
+    dstToken,
+    srcToken,
+  });
   renderTxStatusButtons();
 
   const xSwapRouterOnDestinationAddress = ADDRESSES[dstChainId]?.XSwapRouter;
@@ -134,20 +146,20 @@ export const renderTxStatus = async (
   getTxStatus({ transferId: messageId }).then((response) => {
     if (response.status === "DONE") {
       onSuccess();
+    } else {
+      setTimeout(
+        () =>
+          getTxStatus({ transferId: messageId }).then((response) => {
+            if (response.status === "DONE") {
+              onSuccess();
+            }
+          }),
+        30 * 60 * 1000,
+      ); // additional check after 30 min
+
+      xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
     }
   });
-
-  setTimeout(
-    () =>
-      getTxStatus({ transferId: messageId }).then((response) => {
-        if (response.status === "DONE") {
-          onSuccess();
-        }
-      }),
-    30 * 60 * 1000,
-  ); // additional check after 30 min
-
-  xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
 };
 
 const getTxReceipt = async (txChainId: string, txHash: string) => {

package/src/services/integrations/transactions.ts

@@ -1,6 +1,6 @@
 import {
   Chain,
-  GetSwapTxPayload,
+  ModalIntegrationPayload,
   Transactions,
   Web3Environment,
 } from "@src/models";
@@ -12,27 +12,38 @@ export const openTransactionModal = async ({
   integratorId,
   dstChain,
   dstToken,
+  srcChain,
+  srcToken,
   customContractCalls = [],
   desc,
   returnTransactions,
   dstDisplayToken,
-}: GetSwapTxPayload): Promise<Transactions | undefined> => {
+}: ModalIntegrationPayload): Promise<Transactions | undefined> => {
   const supportedChains: Chain[] = (await getChains()).filter(
     ({ web3Environment, swapSupported }) =>
       web3Environment === Web3Environment.MAINNET && swapSupported,
   );
 
-  validateSwapTxData(supportedChains, dstChain, dstToken);
+  validateSwapTxData(
+    integratorId,
+    supportedChains,
+    dstChain,
+    dstToken,
+    srcChain,
+    srcToken,
+  );
 
   const route = await openTxConfigForm({
     integratorId,
     dstChainId: dstChain,
     dstTokenAddr: dstToken,
+    srcChainId: srcChain,
+    srcTokenAddr: srcToken,
     customContractCalls,
     desc,
-    supportedChains,
     returnTransactions,
     dstDisplayTokenAddr: dstDisplayToken,
+    supportedChains,
   });
 
   if (returnTransactions) {
@@ -41,20 +52,53 @@ export const openTransactionModal = async ({
 };
 
 const validateSwapTxData = (
+  integratorId: string,
   supportedChains: Chain[],
   dstChain: string,
   dstToken: string,
+  srcChain?: string,
+  srcToken?: string,
 ) => {
+  if (!integratorId) {
+    throw new Error(
+      "Provide integratorId or contact the team to generate one.",
+    );
+  }
+
   const supportedDstChain = supportedChains.find(
     ({ chainId }) => chainId === dstChain,
   );
   if (!supportedDstChain) {
     throw new Error(`Provided chain '${dstChain}' is not supported`);
   }
-
-  if (!isETHAddressValid(dstToken)) {
+  if (
+    !isETHAddressValid(dstToken) ||
+    supportedDstChain.tokens.findIndex(
+      ({ address }) => address === dstToken,
+    ) === -1
+  ) {
     throw new Error(
       `Provided token address ${dstToken} on chain ${dstChain} is invalid`,
     );
   }
+
+  if (srcChain) {
+    const supportedSrcChain = supportedChains.find(
+      ({ chainId }) => chainId === srcChain,
+    );
+    if (!supportedSrcChain) {
+      throw new Error(`Provided chain '${srcChain}' is not supported`);
+    }
+    if (
+      srcToken &&
+      (!isETHAddressValid(dstToken) ||
+        supportedSrcChain.tokens.findIndex(
+          ({ address }) => address === srcToken,
+        ) === -1)
+    ) {
+      throw new Error(
+        `Provided token address ${srcToken} on chain ${srcChain} is invalid`,
+      );
+    }
+  }
 };

package/src/utils/contracts.ts

@@ -175,3 +175,32 @@ export const findPlaceholderIndex = (
 
   return result;
 };
+
+export const getEventsFromReceipt = async (
+  receipt: ethers.providers.TransactionReceipt,
+  abi: ethers.ContractInterface,
+  rpcUrl: string,
+  eventName: string,
+) => {
+  const contract = new ethers.Contract(
+    receipt.to,
+    abi,
+    ethers.getDefaultProvider(rpcUrl),
+  );
+
+  const eventSignature = contract.interface.getEvent(eventName).format();
+
+  return receipt.logs
+    .filter((log) => log.topics[0] === ethers.utils.id(eventSignature))
+    .map((log) => contract.interface.parseLog(log));
+};
+
+export const trimTxHash = (hash: string, beginAndEndCharacters: number = 5) => {
+  if (!hash) {
+    return "";
+  }
+  return `${hash?.substring(0, beginAndEndCharacters)}...${hash.substring(
+    hash.length - beginAndEndCharacters,
+    hash.length,
+  )}`;
+};

package/src/utils/index.ts

@@ -1,7 +1,7 @@
 export * from "./contracts";
 export * from "./numbers";
-export * from "./strings";
 export * from "./parseWeb3Error";
+export * from "./strings";
 
 import { format } from "date-fns";
 
@@ -27,9 +27,9 @@ export const deepMergeObjects = (
   obj2: Record<string, any>,
 ) => {
   for (const key in obj2) {
-    if (obj2.hasOwnProperty(key)) {
+    if (Object.prototype.hasOwnProperty.call(obj2, key)) {
       if (
-        obj1.hasOwnProperty(key) &&
+        Object.prototype.hasOwnProperty.call(obj1, key) &&
         typeof obj1[key] === "object" &&
         typeof obj2[key] === "object"
       ) {

package/src/utils/numbers.ts

@@ -30,6 +30,20 @@ export const weiToHumanReadable = ({
   return res;
 };
 
+export const humanReadableToWei = ({
+  amount,
+  decimals,
+}: {
+  amount: string;
+  decimals: number;
+}): string => {
+  const decimalsFactor = Math.pow(10, decimals);
+  const parsedAmount = new BigNumberJS(amount || "0");
+  return safeBigNumberFrom(
+    parsedAmount.mul(decimalsFactor).toFixed(),
+  ).toString();
+};
+
 export const generateRandomBigNumber = (length: number) => {
   return BigNumber.from(utils.randomBytes(length));
 };