@xswap-link/sdk 0.8.6 → 0.9.0

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/index.tsx

@@ -19,10 +19,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GroupedVirtuoso } from "react-virtuoso";
 import { QuickPickTokenItem } from "./QuickPickTokenItem";
 import { TokenItem } from "./TokenItem";
+import { useAccount } from "wagmi";
 
 type Props = {
   type: SwapPanelType;
-  chain: Chain;
+  chain?: Chain;
   tokens: TokenOption[];
   otherTokens: TokenOption[];
   selectedTokenAddress?: string;
@@ -46,11 +47,13 @@ export const TokenPicker = ({
   const [loadingCustomTokenData, setLoadingCustomTokenData] = useState(false);
   const [customTokenData, setCustomTokenData] =
     useState<ImportedTokenData | null>(null);
+  const [showQuickPicks, setShowQuickPicks] = useState(true);
   const currentRouteRequestNonce = useRef<number>(0);
   const tokenSearchRef = useRef<HTMLInputElement | null>(null);
 
   const { bridgeUI, supportedChains, findTokenDataByAddressAndChain } =
     useSwapContext();
+  const { address } = useAccount();
   const evmContractApi = useEvmContractApi();
 
   useEffect(() => {
@@ -59,7 +62,7 @@ export const TokenPicker = ({
   }, [isOpen]);
 
   const importCustomToken = useCallback(() => {
-    if (customTokenData && isETHAddressValid(searchValue)) {
+    if (chain && customTokenData && isETHAddressValid(searchValue)) {
       let customTokens = {};
       if (!isServer) {
         customTokens = JSON.parse(
@@ -97,7 +100,7 @@ export const TokenPicker = ({
     currentRouteRequestNonce.current = nonce;
     const rpcUrl = supportedChains.find(
       ({ ecosystem, chainId }) =>
-        ecosystem === Ecosystem.EVM && chainId === chain.chainId,
+        ecosystem === Ecosystem.EVM && chainId === chain?.chainId,
     )?.publicRpcUrls[0];
     const customTokenContract = new ethers.Contract(
       searchValue.toLowerCase(),
@@ -134,6 +137,7 @@ export const TokenPicker = ({
     if (
       !bridgeUI &&
       isETHAddressValid(searchValue) &&
+      chain &&
       !findTokenDataByAddressAndChain(searchValue.toLowerCase(), chain.chainId)
     ) {
       getCustomTokenData();
@@ -187,35 +191,63 @@ export const TokenPicker = ({
   }, [isOpen]);
 
   const allTokens = useMemo(() => {
-    const filteredTokensSorted = [
-      ...filteredTokens
-        .filter((token) => BigNumber.from(token?.balance || "0").gt(0))
-        .sort((tokenDataA, tokenDataB) => {
-          return tokenDataB.priority - tokenDataA.priority;
-        }),
-      ...filteredTokens
-        .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
-        .sort((tokenDataA, tokenDataB) => {
-          return tokenDataB.priority - tokenDataA.priority;
-        }),
-    ];
-    const otherFilteredTokensSorted = [
-      ...otherFilteredTokens
-        .filter((token) => BigNumber.from(token?.balance || "0").gt(0))
-        .sort((tokenDataA, tokenDataB) => {
-          return tokenDataB.priority - tokenDataA.priority;
-        }),
-      ...otherFilteredTokens
-        .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
-        .sort((tokenDataA, tokenDataB) => {
-          return tokenDataB.priority - tokenDataA.priority;
-        }),
-    ];
+    const ownedFilteredTokens = [
+      ...filteredTokens.filter((token) =>
+        BigNumber.from(token?.balance || "0").gt(0),
+      ),
+      ...otherFilteredTokens.filter((token) =>
+        BigNumber.from(token?.balance || "0").gt(0),
+      ),
+    ].sort(
+      (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+    );
+
+    const currentChainTokens = filteredTokens
+      .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
+      .sort(
+        (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+      );
+
+    const otherChainTokens = otherFilteredTokens
+      .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
+      .sort(
+        (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+      );
 
-    return [...filteredTokensSorted, ...otherFilteredTokensSorted];
-  }, [filteredTokens, otherFilteredTokens]);
+    // Create groups based on chain and wallet connection status
+    const groups = chain
+      ? [
+          ...(!!address && ownedFilteredTokens.length
+            ? [ownedFilteredTokens]
+            : []),
+          currentChainTokens,
+          otherChainTokens,
+        ]
+      : [
+          ...(!!address && ownedFilteredTokens.length
+            ? [ownedFilteredTokens]
+            : []),
+          [...currentChainTokens, ...otherChainTokens],
+        ];
 
-  const tokenGroups = [filteredTokens, otherFilteredTokens];
+    return groups.flat();
+  }, [filteredTokens, otherFilteredTokens, chain, address]);
+
+  const ownedTokens = useMemo(
+    () => allTokens.filter((token) => token.balance?.gt(0)),
+    [allTokens],
+  );
+
+  const tokenGroups = chain
+    ? [
+        ...(!!address && ownedTokens.length ? [ownedTokens] : []),
+        filteredTokens,
+        otherFilteredTokens,
+      ]
+    : [
+        ...(!!address && ownedTokens.length ? [ownedTokens] : []),
+        otherFilteredTokens,
+      ];
 
   return showImportWarning ? (
     <>
@@ -312,6 +344,7 @@ export const TokenPicker = ({
           <CloseIcon />
         </div>
       </div>
+
       <TextInput
         ref={tokenSearchRef}
         inputIcon={
@@ -323,7 +356,13 @@ export const TokenPicker = ({
         value={searchValue}
         handleChange={setSearchValue}
       />
-      <div className="flex flex-wrap gap-1 my-4 mx-0">
+      <div
+        className={`flex flex-wrap gap-1 my-4 mx-0 transition-all duration-300 ${
+          showQuickPicks
+            ? "opacity-100 max-h-[200px]"
+            : "opacity-0 max-h-0 overflow-hidden"
+        }`}
+      >
         {tokens
           .filter((token) => token?.quickPick)
           .map((token) => (
@@ -382,12 +421,62 @@ export const TokenPicker = ({
                 <GroupedVirtuoso
                   style={{ maxHeight: "400px", height: "100%" }}
                   groupCounts={tokenGroups.map((group) => group?.length)}
+                  scrollerRef={(ref) => {
+                    if (ref) {
+                      ref.addEventListener("scroll", (e) => {
+                        const target = e.target as HTMLDivElement;
+                        setShowQuickPicks(target.scrollTop < 10);
+                      });
+                    }
+                  }}
                   groupContent={(index) => (
                     <div className="py-1 bg-t_bg_primary text-t_text_primary">
                       <div className="px-4 text-left">
-                        {index === 0
-                          ? `${chain.displayName} network`
-                          : "Other networks"}
+                        {(() => {
+                          if (chain) {
+                            // chain is selected
+                            switch (index) {
+                              case 0: {
+                                if (!address) {
+                                  return `${chain.displayName} network`;
+                                }
+                                return ownedTokens.length
+                                  ? "My tokens"
+                                  : `${chain.displayName} network`;
+                              }
+                              case 1: {
+                                if (!address) {
+                                  return "Other networks";
+                                }
+                                return `${chain.displayName} network`;
+                              }
+                              case 2: {
+                                return "Other networks";
+                              }
+                              default: {
+                                return "Undefined group";
+                              }
+                            }
+                          } else {
+                            // chain is not selected
+                            switch (index) {
+                              case 0: {
+                                if (!address) {
+                                  return "All networks";
+                                }
+                                return ownedTokens.length
+                                  ? "My tokens"
+                                  : "All networks";
+                              }
+                              case 1: {
+                                return "All networks";
+                              }
+                              default: {
+                                return "Undefined group";
+                              }
+                            }
+                          }
+                        })()}
                       </div>
                       <div className="horizontal-separator" />
                       {!tokenGroups[index]?.length && (
@@ -400,6 +489,7 @@ export const TokenPicker = ({
                       allTokens[index] && (
                         <TokenItem
                           token={allTokens[index]}
+                          selectedChainId={chain?.chainId}
                           selectedTokenAddress={selectedTokenAddress}
                           onClick={() => {
                             onSelect(allTokens[index]!);

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/index.tsx

@@ -77,7 +77,7 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
   return (
     <>
       {tokenPickerModalOpen && (
-        <Modal onClose={() => setTokenPickerModalOpen(false)}>
+        <Modal onClose={() => setTokenPickerModalOpen(false)} className="z-50">
           <TokenPicker
             type={type}
             chain={chain!}

package/src/components/Swap/SwapView/index.tsx

@@ -8,7 +8,7 @@ export type SwapPanelType = "source" | "destination";
 export const SwapView = () => {
   return (
     <div className="flex flex-col gap-2 fill-t_text_primary">
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-[10px]">
         <SwapPanel type="source" />
         <ReorderButton />
         <SwapPanel type="destination" />

package/src/constants/index.ts

@@ -12,7 +12,7 @@ export const ROUTE_TIMEOUT_MS = 10000;
 export const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
 export const DEFAULT_SOURCE_CHAIN_ID = "1";
 export const DEFAULT_SOURCE_TOKEN_ADDR = constants.AddressZero;
-export const DEFAULT_DESTINATION_CHAIN_ID = "8453";
+export const DEFAULT_DESTINATION_CHAIN_ID = "1";
 export const DEFAULT_DESTINATION_TOKEN_ADDR =
   "0x8fe815417913a93ea99049fc0718ee1647a2a07c"; // XSWAP token
 export const CCIP_EXPLORER = "https://ccip.chain.link/";

package/src/context/HistoryProvider.tsx

@@ -10,7 +10,7 @@ import { Transaction, TransactionStatus } from "@src/models";
 import { getHistory } from "@src/services";
 import { isServer } from "@src/utils";
 import BigNumberJS from "bignumber.js";
-import { closeSnackbar, useSnackbar } from "notistack";
+import { useSnackbar } from "notistack";
 import {
   Context,
   ReactNode,
@@ -69,7 +69,7 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
   const [history, setHistory] = useState<Transaction[]>([]);
   const [historyLoadedOnce, setHistoryLoadedOnce] = useState(false);
 
-  const { enqueueSnackbar } = useSnackbar();
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const { debounce: getHistoryDebounce } = useDebounce({
     delayMs: 600,
   });

package/src/context/SwapProvider.tsx

@@ -1,10 +1,8 @@
 import { TxConfigFormPayload } from "@src/components";
 import {
   DEFAULT_DESTINATION_CHAIN_ID,
-  DEFAULT_DESTINATION_TOKEN_ADDR,
   DEFAULT_REQUEST_ABORT_MSG,
   DEFAULT_SOURCE_CHAIN_ID,
-  DEFAULT_SOURCE_TOKEN_ADDR,
 } from "@src/constants";
 import { ADDRESSES } from "@src/contracts";
 import {
@@ -32,9 +30,8 @@ import {
   safeBigNumberFrom,
   weiToHumanReadable,
 } from "@src/utils";
-import { mapToValidPath } from "@src/utils/validation";
 import BigNumberJS from "bignumber.js";
-import { BigNumber, constants } from "ethers";
+import { BigNumber, constants, ethers } from "ethers";
 import {
   createContext,
   Dispatch,
@@ -49,6 +46,7 @@ import {
 } from "react";
 import { Config, useAccount } from "wagmi";
 import { useHistory } from "./HistoryProvider";
+import { mapToValidPath } from "@src/utils/validation";
 
 type Tab = "Swap" | "History" | "Settings";
 type SwapContext = {
@@ -150,7 +148,7 @@ const init: SwapContext = {
   dstValueMin: "",
   lastTx: undefined,
   expressDelivery: true,
-  infiniteApproval: false,
+  infiniteApproval: true,
   slippage: "1.5",
   route: undefined,
   isAsyncDataLoaded: false,
@@ -194,7 +192,7 @@ export const SwapProvider = ({
   wagmiConfig,
   overlay,
 }: Props) => {
-  const { address } = useAccount();
+  const { address, chainId: walletChainId } = useAccount();
   const [tab, setTab] = useState(init.tab);
   const [error, setError] = useState(init.error);
   const [expressDelivery, setExpressDelivery] = useState(init.expressDelivery);
@@ -344,8 +342,8 @@ export const SwapProvider = ({
   }, [bridgeTokens]);
 
   const getTokenOptions = useCallback(
-    (chainId: string | undefined, oppositeChainId: string | undefined) => {
-      if (!chainId || !oppositeChainId) {
+    (chainId: string | undefined) => {
+      if (!chainId) {
         return [];
       }
 
@@ -560,16 +558,12 @@ export const SwapProvider = ({
   }, [quoteRoute]);
 
   useEffect(() => {
-    if (!srcChain || !dstChain) {
-      return;
-    }
     (async () => {
       // source chain
       const srcTokenOptions: TokenOption[] = getTokenOptions(
-        srcChain.chainId,
-        dstChain.chainId,
+        srcChain?.chainId,
       ).filter(({ symbol }) =>
-        dstChain.chainId === srcChain.chainId
+        dstChain?.chainId === srcChain?.chainId
           ? symbol !== dstToken?.symbol
           : true,
       );
@@ -577,10 +571,9 @@ export const SwapProvider = ({
 
       // destination chain
       const dstTokenOptions: TokenOption[] = getTokenOptions(
-        dstChain.chainId,
-        srcChain.chainId,
+        dstChain?.chainId,
       ).filter(({ symbol }) =>
-        dstChain.chainId === srcChain.chainId
+        dstChain?.chainId === srcChain?.chainId
           ? symbol !== srcToken?.symbol
           : true,
       );
@@ -591,7 +584,7 @@ export const SwapProvider = ({
       const srcOtherChains = supportedChains.filter(
         ({ chainId, web3Environment, swapSupported, bridgeSupported }) => {
           if (
-            chainId === srcChain.chainId ||
+            chainId === srcChain?.chainId ||
             web3Environment !== Web3Environment.MAINNET
           ) {
             return false;
@@ -606,8 +599,8 @@ export const SwapProvider = ({
       );
       for (const { chainId } of srcOtherChains) {
         srcOtherTokenOptions.push(
-          ...getTokenOptions(chainId, dstChain.chainId).filter(({ symbol }) =>
-            chainId === dstChain.chainId ? symbol !== dstToken?.symbol : true,
+          ...getTokenOptions(chainId).filter(({ symbol }) =>
+            chainId === dstChain?.chainId ? symbol !== dstToken?.symbol : true,
           ),
         );
       }
@@ -617,14 +610,14 @@ export const SwapProvider = ({
       const dstOtherTokenOptions: TokenOption[] = [];
       const dstOtherChains = supportedChains.filter(
         ({ chainId, web3Environment, swapSupported }) =>
-          chainId !== dstChain.chainId &&
+          chainId !== dstChain?.chainId &&
           web3Environment === Web3Environment.MAINNET &&
           swapSupported,
       );
       for (const { chainId } of dstOtherChains) {
         dstOtherTokenOptions.push(
-          ...getTokenOptions(chainId, srcChain.chainId).filter(({ symbol }) =>
-            chainId === srcChain.chainId ? symbol !== srcToken?.symbol : true,
+          ...getTokenOptions(chainId).filter(({ symbol }) =>
+            chainId === srcChain?.chainId ? symbol !== srcToken?.symbol : true,
           ),
         );
       }
@@ -657,6 +650,7 @@ export const SwapProvider = ({
       }
     })();
   }, [
+    bridgeUI,
     srcChain,
     dstChain,
     address,
@@ -716,37 +710,149 @@ export const SwapProvider = ({
     );
   }, [srcChain]);
 
+  // Add new state to track initial setup
+  const [isInitialStateSet, setIsInitialStateSet] = useState(false);
+
   useEffect(() => {
+    // apply wallet chain only after initial state is set
+    if (!walletChainId || !isInitialStateSet || integrationConfig?.srcChainId) {
+      return;
+    }
     const initSrcChain = supportedChains.find(
-      ({ chainId }) =>
-        chainId === (integrationConfig?.srcChainId || DEFAULT_SOURCE_CHAIN_ID),
-    );
-    const initSrcToken = initSrcChain?.tokens.find(
-      ({ address }) =>
-        address.toLowerCase() ===
-        (integrationConfig?.srcTokenAddr?.toLowerCase() ||
-          DEFAULT_SOURCE_TOKEN_ADDR.toLocaleLowerCase()),
+      ({ chainId }) => chainId === `${walletChainId}`,
     );
-    const initDstChain = supportedChains.find(
-      ({ chainId }) =>
-        chainId ===
-        (integrationConfig.dstChainId || DEFAULT_DESTINATION_CHAIN_ID),
-    );
-    const initDstToken = initDstChain?.tokens.find(
-      ({ address }) =>
-        address.toLowerCase() ===
-        (integrationConfig.dstTokenAddr?.toLowerCase() ||
-          DEFAULT_DESTINATION_TOKEN_ADDR.toLowerCase()),
+
+    if (initSrcChain) {
+      setSrcChain(initSrcChain);
+    }
+  }, [
+    walletChainId,
+    isInitialStateSet,
+    supportedChains,
+    integrationConfig?.srcChainId,
+  ]);
+
+  useEffect(() => {
+    if (isInitialStateSet) {
+      return;
+    }
+    setSrcToken(undefined);
+    setDstToken(undefined);
+    setSrcChain(undefined);
+    setDstChain(undefined);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bridgeUI]);
+
+  useEffect(() => {
+    // Skip if initial state was already set or wait if supported chains are not loaded yet
+
+    if (
+      isInitialStateSet ||
+      !supportedChains ||
+      supportedChains.length === 0 ||
+      !bridgeTokensDictionary
+    ) {
+      return;
+    }
+
+    let srcTokenAddress = integrationConfig.srcTokenAddr;
+    let dstTokenAddress = integrationConfig.dstTokenAddr;
+    // is it a valid eth address? if not try to find it by symbol / tokenId
+    if (srcTokenAddress && !ethers.utils.isAddress(srcTokenAddress)) {
+      srcTokenAddress = supportedChains
+        .find((chain) => chain.chainId === integrationConfig?.srcChainId)
+        ?.tokens.find(
+          (token) => token.tokenId === integrationConfig?.srcTokenAddr,
+        )
+        ?.address?.toLowerCase();
+    }
+
+    if (dstTokenAddress && !ethers.utils.isAddress(dstTokenAddress)) {
+      dstTokenAddress = supportedChains
+        .find((chain) => chain.chainId === integrationConfig?.dstChainId)
+        ?.tokens.find(
+          (token) => token.tokenId === integrationConfig?.dstTokenAddr,
+        )
+        ?.address?.toLowerCase();
+    }
+
+    const searchedChainId =
+      // currently set chain
+      srcChain ||
+      // chain set by the integrator
+      integrationConfig?.srcChainId ||
+      // wallet chain
+      (walletChainId ? `${walletChainId}` : undefined) ||
+      // default chain
+      (bridgeUI ? undefined : DEFAULT_SOURCE_CHAIN_ID);
+
+    const initSrcChain = supportedChains.find(
+      ({ chainId }) => chainId === searchedChainId,
     );
 
-    setSrcChain(initSrcChain);
-    setSrcToken(initSrcToken);
-    setDstChain(initDstChain);
-    setDstToken(initDstToken);
-  }, [integrationConfig, supportedChains]);
+    let initSrcToken: Token | undefined;
+    if (initSrcChain) {
+      initSrcToken = initSrcChain.tokens.find(
+        ({ address }) =>
+          address.toLowerCase() === srcTokenAddress?.toLowerCase(),
+      );
+    }
+
+    let initDstChain: Chain | undefined = bridgeUI
+      ? undefined
+      : supportedChains.find(
+          ({ chainId }) => chainId === DEFAULT_DESTINATION_CHAIN_ID,
+        );
+
+    // if integrator set it, use it
+    if (integrationConfig.dstChainId) {
+      initDstChain = supportedChains.find(
+        ({ chainId }) => chainId === integrationConfig.dstChainId,
+      );
+    }
+
+    let initDstToken: Token | undefined;
+    if (initDstChain) {
+      initDstToken = initDstChain.tokens.find(
+        ({ address }) => address.toLowerCase() === dstTokenAddress,
+      );
+    }
+
+    // the values here should not be from state but from the code above
+    const { source, target } = mapToValidPath({
+      source: { chain: initSrcChain, token: initSrcToken },
+      target: { chain: initDstChain, token: initDstToken },
+      type: bridgeUI ? "BRIDGE" : "SWAP",
+      supportedChains,
+      bridgeTokensDictionary,
+    });
+
+    setSrcChain(source.chain);
+    setDstChain(target.chain);
+    setSrcToken(source.token);
+    setDstToken(target.token);
+    // Mark initial state as set
+    setIsInitialStateSet(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    integrationConfig?.srcChainId,
+    integrationConfig?.srcTokenAddr,
+    integrationConfig?.dstChainId,
+    integrationConfig?.dstTokenAddr,
+    supportedChains,
+    bridgeUI,
+    walletChainId,
+    isInitialStateSet,
+    bridgeTokensDictionary,
+  ]);
 
   useEffect(() => {
-    if (!bridgeTokensDictionary) {
+    if (
+      !bridgeTokensDictionary ||
+      supportedChains.length === 0 ||
+      !isInitialStateSet
+    ) {
       return;
     }
 
@@ -789,11 +895,12 @@ export const SwapProvider = ({
     } else if (window.xPayOnDstChainChange) {
       window.xPayOnDstChainChange(dstChain?.chainId);
     }
-  }, [integrationConfig, dstChain]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [integrationConfig.onDstChainChange, dstChain]);
 
   useEffect(() => {
     const token = dstToken
-      ? { address: dstToken.address.toLowerCase(), symbol: dstToken.symbol }
+      ? { address: dstToken.address.toLowerCase(), symbol: dstToken.tokenId }
       : undefined;
 
     if (integrationConfig.onDstTokenChange) {
@@ -801,7 +908,8 @@ export const SwapProvider = ({
     } else if (window.xPayOnDstTokenChange) {
       window.xPayOnDstTokenChange(token);
     }
-  }, [integrationConfig, dstToken]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [integrationConfig.onDstTokenChange, dstToken]);
 
   useEffect(() => {
     if (integrationConfig.onSrcChainChange) {
@@ -809,11 +917,12 @@ export const SwapProvider = ({
     } else if (window.xPayOnSrcChainChange) {
       window.xPayOnSrcChainChange(srcChain?.chainId);
     }
-  }, [integrationConfig, srcChain]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [integrationConfig.onSrcChainChange, srcChain]);
 
   useEffect(() => {
     const token = srcToken
-      ? { address: srcToken.address.toLowerCase(), symbol: srcToken.symbol }
+      ? { address: srcToken.address.toLowerCase(), symbol: srcToken.tokenId }
       : undefined;
 
     if (integrationConfig.onSrcTokenChange) {
@@ -821,7 +930,8 @@ export const SwapProvider = ({
     } else if (window.xPayOnSrcTokenChange) {
       window.xPayOnSrcTokenChange(token);
     }
-  }, [integrationConfig, srcToken]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [integrationConfig.onSrcTokenChange, srcToken]);
 
   return (
     <swapContext.Provider

package/src/context/TransactionProvider.tsx

@@ -1,4 +1,4 @@
-import { Ecosystem, EnqueueTxProps, TxStatus } from "@src/models";
+import { Ecosystem, EnqueueTxProps } from "@src/models";
 import { ContractReceipt, ContractTransaction } from "ethers";
 import {
   Context,