@xswap-link/sdk 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @xswap-link/xswap-sdk
 
+## 0.1.2
+
+### Patch Changes
+
+- e7dae6e: remove local storage usage from history
+- 9a72993: define fallback source chain
+- 8cf2f51: fix: show empty history with message instead of circular progress
+- bef4486: fix custom width in tailwind config and form component
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/index.css

@@ -477,12 +477,12 @@ video {
 .h-\[2px\] {
   height: 2px;
 }
+.h-\[30vh\] {
+  height: 30vh;
+}
 .h-\[41px\] {
   height: 41px;
 }
-.h-\[50vh\] {
-  height: 50vh;
-}
 .h-\[70\%\] {
   height: 70%;
 }
@@ -549,15 +549,15 @@ video {
 .w-\[310px\] {
   width: 310px;
 }
-.w-\[360px\] {
-  width: 360px;
-}
 .w-\[452px\] {
   width: 452px;
 }
 .w-full {
   width: 100%;
 }
+.w-x_mobile {
+  width: 356px;
+}
 .min-w-\[26px\] {
   min-width: 26px;
 }
@@ -1102,7 +1102,7 @@ video {
   outline-offset: 2px;
 }
 @media (min-width: 640px) {
-  .sm\:w-\[600px\] {
+  .sm\:w-x_desktop {
     width: 600px;
   }
 }

package/dist/index.d.mts

@@ -262,9 +262,9 @@ declare const SLIPPAGE_PRESETS: number[];
 declare const DELIVERY_TIME: number;
 declare const EXPRESS_DELIVERY_TIME: number;
 declare const BALANCES_CHUNK_SIZE = 500;
-declare const BALANCE_DISPLAY_MIN_LIMIT = 0.0001;
 declare const ROUTE_TIMEOUT_MS = 5000;
-declare const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.00001;
+declare const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
+declare const DEFAULT_SOURCE_CHAIN_ID = "1";
 
 declare const BatchQueryAbi: ({
     inputs: {
@@ -519,4 +519,4 @@ declare const deepMergeObjects: (obj1: Record<string, any>, obj2: Record<string,
 };
 declare const chunkArray: (array: any[], chunkSize: number) => any[][];
 
-export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BALANCE_DISPLAY_MIN_LIMIT, BatchQueryAbi, type BridgeToken, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, DELIVERY_TIME, ERC20Abi, EXPRESS_DELIVERY_TIME, Ecosystem, Environment, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, IERC20, MINIMUM_DISPLAYED_TOKEN_AMOUNT, NUMBER_INPUT_REGEX, type Prices, type Protocol, ROUTE_TIMEOUT_MS, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, type TxConfigFormProps, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, XSwapRouterAbi, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getHistory, getPrices, getRoute, getSwapTx, getTokens, openTxConfigForm, replaceNull, safeBigNumberFrom, shortAddress, weiToHumanReadable };
+export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BatchQueryAbi, type BridgeToken, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, DEFAULT_SOURCE_CHAIN_ID, DELIVERY_TIME, ERC20Abi, EXPRESS_DELIVERY_TIME, Ecosystem, Environment, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, IERC20, MINIMUM_DISPLAYED_TOKEN_AMOUNT, NUMBER_INPUT_REGEX, type Prices, type Protocol, ROUTE_TIMEOUT_MS, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, type TxConfigFormProps, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, XSwapRouterAbi, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getHistory, getPrices, getRoute, getSwapTx, getTokens, openTxConfigForm, replaceNull, safeBigNumberFrom, shortAddress, weiToHumanReadable };

package/dist/index.d.ts

@@ -262,9 +262,9 @@ declare const SLIPPAGE_PRESETS: number[];
 declare const DELIVERY_TIME: number;
 declare const EXPRESS_DELIVERY_TIME: number;
 declare const BALANCES_CHUNK_SIZE = 500;
-declare const BALANCE_DISPLAY_MIN_LIMIT = 0.0001;
 declare const ROUTE_TIMEOUT_MS = 5000;
-declare const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.00001;
+declare const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
+declare const DEFAULT_SOURCE_CHAIN_ID = "1";
 
 declare const BatchQueryAbi: ({
     inputs: {
@@ -519,4 +519,4 @@ declare const deepMergeObjects: (obj1: Record<string, any>, obj2: Record<string,
 };
 declare const chunkArray: (array: any[], chunkSize: number) => any[][];
 
-export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BALANCE_DISPLAY_MIN_LIMIT, BatchQueryAbi, type BridgeToken, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, DELIVERY_TIME, ERC20Abi, EXPRESS_DELIVERY_TIME, Ecosystem, Environment, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, IERC20, MINIMUM_DISPLAYED_TOKEN_AMOUNT, NUMBER_INPUT_REGEX, type Prices, type Protocol, ROUTE_TIMEOUT_MS, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, type TxConfigFormProps, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, XSwapRouterAbi, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getHistory, getPrices, getRoute, getSwapTx, getTokens, openTxConfigForm, replaceNull, safeBigNumberFrom, shortAddress, weiToHumanReadable };
+export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BatchQueryAbi, type BridgeToken, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, DEFAULT_SOURCE_CHAIN_ID, DELIVERY_TIME, ERC20Abi, EXPRESS_DELIVERY_TIME, Ecosystem, Environment, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, IERC20, MINIMUM_DISPLAYED_TOKEN_AMOUNT, NUMBER_INPUT_REGEX, type Prices, type Protocol, ROUTE_TIMEOUT_MS, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, type TxConfigFormProps, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, XSwapRouterAbi, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getHistory, getPrices, getRoute, getSwapTx, getTokens, openTxConfigForm, replaceNull, safeBigNumberFrom, shortAddress, weiToHumanReadable };

package/dist/index.js

@@ -33,10 +33,10 @@ __export(src_exports, {
   ADDRESSES: () => ADDRESSES,
   Alert: () => Alert,
   BALANCES_CHUNK_SIZE: () => BALANCES_CHUNK_SIZE,
-  BALANCE_DISPLAY_MIN_LIMIT: () => BALANCE_DISPLAY_MIN_LIMIT,
   BatchQueryAbi: () => BatchQueryAbi,
   ContractName: () => ContractName,
   DEFAULT_ECOSYSTEM: () => DEFAULT_ECOSYSTEM,
+  DEFAULT_SOURCE_CHAIN_ID: () => DEFAULT_SOURCE_CHAIN_ID,
   DELIVERY_TIME: () => DELIVERY_TIME,
   ERC20Abi: () => ERC20Abi,
   EXPRESS_DELIVERY_TIME: () => EXPRESS_DELIVERY_TIME,
@@ -1876,9 +1876,9 @@ var SLIPPAGE_PRESETS = [0.5, 1.5, 3];
 var DELIVERY_TIME = 30 * 1e3 * 60;
 var EXPRESS_DELIVERY_TIME = 30 * 1e3;
 var BALANCES_CHUNK_SIZE = 500;
-var BALANCE_DISPLAY_MIN_LIMIT = 1e-4;
 var ROUTE_TIMEOUT_MS = 5e3;
-var MINIMUM_DISPLAYED_TOKEN_AMOUNT = 1e-5;
+var MINIMUM_DISPLAYED_TOKEN_AMOUNT = 1e-4;
+var DEFAULT_SOURCE_CHAIN_ID = "1";
 
 // src/utils/contracts.ts
 var IERC20 = new import_ethers2.ethers.utils.Interface(ERC20Abi);
@@ -2641,7 +2641,7 @@ var HistoryCard = ({ transaction, supportedChains }) => {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-1 items-center flex-wrap text-xs text-[rgba(255,255,255,0.6)]", children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", children: [
-          Number(transferredAmount) < 1e-4 ? "<0.0001" : transferredAmount,
+          Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}` : transferredAmount,
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-xs ml-1 text-rgba(255,255,255,0.6)", children: tokenData?.symbol }),
           tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "img",
@@ -2674,84 +2674,48 @@ var HistoryCard = ({ transaction, supportedChains }) => {
 
 // src/components/TxConfigForm/History.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var PENDING_TXS_LOCAL_STORAGE_KEY = "pending_transactions";
 var History = ({ signer, supportedChains }) => {
-  const [mappedHistory, setMappedHistory] = (0, import_react3.useState)();
+  const [fetchedHistory, setFetchedHistory] = (0, import_react3.useState)();
   const [historyLoadedOnce, setHistoryLoadedOnce] = (0, import_react3.useState)(false);
-  const getLocalHistory = () => {
-    return JSON.parse(
-      localStorage.getItem(PENDING_TXS_LOCAL_STORAGE_KEY) || "{}"
-    );
-  };
-  const setLocalHistory = (data) => {
-    localStorage.setItem(PENDING_TXS_LOCAL_STORAGE_KEY, JSON.stringify(data));
-  };
   const fetchHistory = (0, import_react3.useCallback)(async () => {
-    const downloadedHistory = await getHistory({ walletAddress: signer });
-    const fetchedTransactions = [];
-    if (downloadedHistory) {
-      for (const entry of downloadedHistory.history) {
-        if (!entry.source) {
-          continue;
-        }
-        let status;
-        if (entry.failed)
-          status = "REVERTED";
-        if (!!entry.target) {
-          status = "DONE";
-        } else {
-          status = "IN_PROGRESS";
-        }
-        const blockTimestampMs = new Date(entry.source.blockTime).getTime();
-        const estimatedDeliveryTimestamp = new import_bignumber2.default(
-          entry.source.valueForInstantCcipRecieve
-        ).gt(0) ? blockTimestampMs + EXPRESS_DELIVERY_TIME : blockTimestampMs + DELIVERY_TIME;
-        fetchedTransactions.push({
-          hash: entry.source.transactionHash,
-          timestamp: blockTimestampMs / 1e3,
-          sourceChainId: entry.source.blockchainId,
-          targetChainId: entry.source.targetBlockchainId,
-          amountWei: entry.source.tokenAmount,
-          tokenAddress: entry.source.tokenAddress,
-          tokenOutAddress: entry.target?.tokenAddress || entry.source.tokenOutAddress,
-          tokenOutAmount: entry.target?.tokenAmount || entry.source.estimatedAmountOut,
-          estimatedDeliveryTimestamp,
-          status
-        });
-      }
-      const txHashToTxFromAPI = {};
-      for (const transaction of fetchedTransactions) {
-        txHashToTxFromAPI[transaction.hash] = transaction;
-      }
-      const localHistory = getLocalHistory();
-      const newLocalHistory = {};
-      for (const [walletAddress, transactions] of Object.entries(
-        localHistory
-      )) {
-        if (walletAddress.toLowerCase() !== signer.toLowerCase()) {
-          continue;
-        }
-        const newLocalHistoryForWallet = [];
-        for (const transaction of transactions) {
-          if (!txHashToTxFromAPI[transaction.hash]) {
-            fetchedTransactions.push(transaction);
-            newLocalHistoryForWallet.push(transaction);
+    if (signer) {
+      const downloadedHistory = await getHistory({ walletAddress: signer });
+      const fetchedTransactions = [];
+      if (downloadedHistory) {
+        for (const entry of downloadedHistory.history) {
+          if (!entry.source) {
             continue;
           }
-          if (txHashToTxFromAPI[transaction.hash] && transaction.status === "DONE" && txHashToTxFromAPI[transaction.hash]?.status === "IN_PROGRESS") {
-            txHashToTxFromAPI[transaction.hash].status = "DONE";
-          }
-          if (txHashToTxFromAPI[transaction.hash]?.status === "DONE" || txHashToTxFromAPI[transaction.hash]?.status === "REVERTED") {
-            continue;
+          let status;
+          if (entry.failed)
+            status = "REVERTED";
+          if (!!entry.target) {
+            status = "DONE";
+          } else {
+            status = "IN_PROGRESS";
           }
+          const blockTimestampMs = new Date(entry.source.blockTime).getTime();
+          const estimatedDeliveryTimestamp = new import_bignumber2.default(
+            entry.source.valueForInstantCcipRecieve
+          ).gt(0) ? blockTimestampMs + EXPRESS_DELIVERY_TIME : blockTimestampMs + DELIVERY_TIME;
+          fetchedTransactions.push({
+            hash: entry.source.transactionHash,
+            timestamp: blockTimestampMs / 1e3,
+            sourceChainId: entry.source.blockchainId,
+            targetChainId: entry.source.targetBlockchainId,
+            amountWei: entry.source.tokenAmount,
+            tokenAddress: entry.source.tokenAddress,
+            tokenOutAddress: entry.target?.tokenAddress || entry.source.tokenOutAddress,
+            tokenOutAmount: entry.target?.tokenAmount || entry.source.estimatedAmountOut,
+            estimatedDeliveryTimestamp,
+            status
+          });
         }
-        newLocalHistory[walletAddress.toLowerCase()] = newLocalHistoryForWallet;
+        setFetchedHistory(
+          fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp)
+        );
+        setHistoryLoadedOnce(true);
       }
-      setLocalHistory(newLocalHistory);
-      setMappedHistory(
-        fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp)
-      );
-      setHistoryLoadedOnce(true);
     }
   }, [signer, getHistory]);
   (0, import_react3.useEffect)(() => {
@@ -2762,10 +2726,12 @@ var History = ({ signer, supportedChains }) => {
     }, 6e4);
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "w-full h-[50vh] overflow-scroll overflow-x-hidden", children: [
-    mappedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
-    !mappedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CircularProgressIcon, {}) }),
-    mappedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  if (!signer)
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "w-full h-[30vh] overflow-scroll overflow-x-hidden", children: [
+    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
+    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CircularProgressIcon, {}) }),
+    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       HistoryCard,
       {
         transaction,
@@ -2785,7 +2751,7 @@ var TopBar = ({
   historyTabShown
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full justify-between mx-auto pl-4 pr-8 pt-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Disconnected` }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex gap-2", children: [
       !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
@@ -2795,7 +2761,7 @@ var TopBar = ({
           children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SettingsIcon, {}) })
         }
       ),
-      signer && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           onClick: () => setHistoryTabShown((x) => !x),
@@ -3067,6 +3033,8 @@ var TokenPicker = ({
     const isMatch = (value, searchValue2) => value.toLowerCase().indexOf(searchValue2.toLowerCase()) > -1;
     return tokens?.filter(
       (token) => isMatch(token.symbol, searchValue) || isMatch(token.name, searchValue) || token.address === searchValue.toLowerCase()
+    ).sort(
+      (a, b) => a.priority < b.priority ? 1 : balances && balances[a.address] && balances[b.address] && balances[a.address]?.lte(balances[b.address] || "0") ? 1 : -1
     );
   }, [searchValue, tokens]);
   return modalRoot ? (0, import_react_dom.createPortal)(
@@ -3113,9 +3081,7 @@ var TokenPicker = ({
             token.address
           )) }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.sort(
-            (a, b) => balances && balances[a.address] && balances[b.address] && balances[a.address]?.lte(balances[b.address] || "0") ? 1 : -1
-          ).map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             "div",
             {
               className: `flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35,35,35)]" : ""}`,
@@ -3431,15 +3397,14 @@ var Form = ({
     setSigner(account.address);
   }, [account.address]);
   (0, import_react8.useEffect)(() => {
-    if (supportedChains.some(
+    const defaultChain = supportedChains.find(
       ({ chainId }) => chainId === account.chainId?.toString()
-    )) {
-      setSrcChain(
-        supportedChains.find(
-          ({ chainId }) => chainId === account.chainId?.toString()
-        )
-      );
-    }
+    );
+    setSrcChain(
+      defaultChain ?? supportedChains.find(
+        ({ chainId }) => chainId === DEFAULT_SOURCE_CHAIN_ID
+      )
+    );
   }, [account.chainId]);
   (0, import_react8.useEffect)(() => {
     setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
@@ -3529,7 +3494,7 @@ var Form = ({
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "form",
     {
-      className: "flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-[360px] sm:w-[600px]",
+      className: "flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop",
       onSubmit: handleSubmit,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -3551,7 +3516,7 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? signer && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-2", children: [
           desc && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Description, { description: desc }),
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             SwapPanel,
@@ -3716,10 +3681,10 @@ var Skeleton = ({ w, h }) => {
   ADDRESSES,
   Alert,
   BALANCES_CHUNK_SIZE,
-  BALANCE_DISPLAY_MIN_LIMIT,
   BatchQueryAbi,
   ContractName,
   DEFAULT_ECOSYSTEM,
+  DEFAULT_SOURCE_CHAIN_ID,
   DELIVERY_TIME,
   ERC20Abi,
   EXPRESS_DELIVERY_TIME,

package/dist/index.mjs

@@ -1806,9 +1806,9 @@ var SLIPPAGE_PRESETS = [0.5, 1.5, 3];
 var DELIVERY_TIME = 30 * 1e3 * 60;
 var EXPRESS_DELIVERY_TIME = 30 * 1e3;
 var BALANCES_CHUNK_SIZE = 500;
-var BALANCE_DISPLAY_MIN_LIMIT = 1e-4;
 var ROUTE_TIMEOUT_MS = 5e3;
-var MINIMUM_DISPLAYED_TOKEN_AMOUNT = 1e-5;
+var MINIMUM_DISPLAYED_TOKEN_AMOUNT = 1e-4;
+var DEFAULT_SOURCE_CHAIN_ID = "1";
 
 // src/utils/contracts.ts
 var IERC20 = new ethers.utils.Interface(ERC20Abi);
@@ -2571,7 +2571,7 @@ var HistoryCard = ({ transaction, supportedChains }) => {
       ] }),
       /* @__PURE__ */ jsx21("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-1 items-center flex-wrap text-xs text-[rgba(255,255,255,0.6)]", children: [
         /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
-          Number(transferredAmount) < 1e-4 ? "<0.0001" : transferredAmount,
+          Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}` : transferredAmount,
           /* @__PURE__ */ jsx21("div", { className: "text-xs ml-1 text-rgba(255,255,255,0.6)", children: tokenData?.symbol }),
           tokenData?.image ? /* @__PURE__ */ jsx21(
             "img",
@@ -2604,84 +2604,48 @@ var HistoryCard = ({ transaction, supportedChains }) => {
 
 // src/components/TxConfigForm/History.tsx
 import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
-var PENDING_TXS_LOCAL_STORAGE_KEY = "pending_transactions";
 var History = ({ signer, supportedChains }) => {
-  const [mappedHistory, setMappedHistory] = useState2();
+  const [fetchedHistory, setFetchedHistory] = useState2();
   const [historyLoadedOnce, setHistoryLoadedOnce] = useState2(false);
-  const getLocalHistory = () => {
-    return JSON.parse(
-      localStorage.getItem(PENDING_TXS_LOCAL_STORAGE_KEY) || "{}"
-    );
-  };
-  const setLocalHistory = (data) => {
-    localStorage.setItem(PENDING_TXS_LOCAL_STORAGE_KEY, JSON.stringify(data));
-  };
   const fetchHistory = useCallback2(async () => {
-    const downloadedHistory = await getHistory({ walletAddress: signer });
-    const fetchedTransactions = [];
-    if (downloadedHistory) {
-      for (const entry of downloadedHistory.history) {
-        if (!entry.source) {
-          continue;
-        }
-        let status;
-        if (entry.failed)
-          status = "REVERTED";
-        if (!!entry.target) {
-          status = "DONE";
-        } else {
-          status = "IN_PROGRESS";
-        }
-        const blockTimestampMs = new Date(entry.source.blockTime).getTime();
-        const estimatedDeliveryTimestamp = new BigNumberJS2(
-          entry.source.valueForInstantCcipRecieve
-        ).gt(0) ? blockTimestampMs + EXPRESS_DELIVERY_TIME : blockTimestampMs + DELIVERY_TIME;
-        fetchedTransactions.push({
-          hash: entry.source.transactionHash,
-          timestamp: blockTimestampMs / 1e3,
-          sourceChainId: entry.source.blockchainId,
-          targetChainId: entry.source.targetBlockchainId,
-          amountWei: entry.source.tokenAmount,
-          tokenAddress: entry.source.tokenAddress,
-          tokenOutAddress: entry.target?.tokenAddress || entry.source.tokenOutAddress,
-          tokenOutAmount: entry.target?.tokenAmount || entry.source.estimatedAmountOut,
-          estimatedDeliveryTimestamp,
-          status
-        });
-      }
-      const txHashToTxFromAPI = {};
-      for (const transaction of fetchedTransactions) {
-        txHashToTxFromAPI[transaction.hash] = transaction;
-      }
-      const localHistory = getLocalHistory();
-      const newLocalHistory = {};
-      for (const [walletAddress, transactions] of Object.entries(
-        localHistory
-      )) {
-        if (walletAddress.toLowerCase() !== signer.toLowerCase()) {
-          continue;
-        }
-        const newLocalHistoryForWallet = [];
-        for (const transaction of transactions) {
-          if (!txHashToTxFromAPI[transaction.hash]) {
-            fetchedTransactions.push(transaction);
-            newLocalHistoryForWallet.push(transaction);
+    if (signer) {
+      const downloadedHistory = await getHistory({ walletAddress: signer });
+      const fetchedTransactions = [];
+      if (downloadedHistory) {
+        for (const entry of downloadedHistory.history) {
+          if (!entry.source) {
             continue;
           }
-          if (txHashToTxFromAPI[transaction.hash] && transaction.status === "DONE" && txHashToTxFromAPI[transaction.hash]?.status === "IN_PROGRESS") {
-            txHashToTxFromAPI[transaction.hash].status = "DONE";
-          }
-          if (txHashToTxFromAPI[transaction.hash]?.status === "DONE" || txHashToTxFromAPI[transaction.hash]?.status === "REVERTED") {
-            continue;
+          let status;
+          if (entry.failed)
+            status = "REVERTED";
+          if (!!entry.target) {
+            status = "DONE";
+          } else {
+            status = "IN_PROGRESS";
           }
+          const blockTimestampMs = new Date(entry.source.blockTime).getTime();
+          const estimatedDeliveryTimestamp = new BigNumberJS2(
+            entry.source.valueForInstantCcipRecieve
+          ).gt(0) ? blockTimestampMs + EXPRESS_DELIVERY_TIME : blockTimestampMs + DELIVERY_TIME;
+          fetchedTransactions.push({
+            hash: entry.source.transactionHash,
+            timestamp: blockTimestampMs / 1e3,
+            sourceChainId: entry.source.blockchainId,
+            targetChainId: entry.source.targetBlockchainId,
+            amountWei: entry.source.tokenAmount,
+            tokenAddress: entry.source.tokenAddress,
+            tokenOutAddress: entry.target?.tokenAddress || entry.source.tokenOutAddress,
+            tokenOutAmount: entry.target?.tokenAmount || entry.source.estimatedAmountOut,
+            estimatedDeliveryTimestamp,
+            status
+          });
         }
-        newLocalHistory[walletAddress.toLowerCase()] = newLocalHistoryForWallet;
+        setFetchedHistory(
+          fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp)
+        );
+        setHistoryLoadedOnce(true);
       }
-      setLocalHistory(newLocalHistory);
-      setMappedHistory(
-        fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp)
-      );
-      setHistoryLoadedOnce(true);
     }
   }, [signer, getHistory]);
   useEffect2(() => {
@@ -2692,10 +2656,12 @@ var History = ({ signer, supportedChains }) => {
     }, 6e4);
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
-  return /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ jsxs7("div", { className: "w-full h-[50vh] overflow-scroll overflow-x-hidden", children: [
-    mappedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ jsx22("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
-    !mappedHistory && !historyLoadedOnce && /* @__PURE__ */ jsx22("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ jsx22(CircularProgressIcon, {}) }),
-    mappedHistory?.map((transaction, index) => /* @__PURE__ */ jsx22(
+  if (!signer)
+    return /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
+  return /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ jsxs7("div", { className: "w-full h-[30vh] overflow-scroll overflow-x-hidden", children: [
+    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ jsx22("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
+    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ jsx22("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ jsx22(CircularProgressIcon, {}) }),
+    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ jsx22(
       HistoryCard,
       {
         transaction,
@@ -2715,7 +2681,7 @@ var TopBar = ({
   historyTabShown
 }) => {
   return /* @__PURE__ */ jsxs8("div", { className: "flex w-full justify-between mx-auto pl-4 pr-8 pt-2", children: [
-    /* @__PURE__ */ jsx23("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Disconnected` }),
+    /* @__PURE__ */ jsx23("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
     /* @__PURE__ */ jsxs8("div", { className: "flex gap-2", children: [
       !historyTabShown && /* @__PURE__ */ jsx23(
         "div",
@@ -2725,7 +2691,7 @@ var TopBar = ({
           children: /* @__PURE__ */ jsx23("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ jsx23(SettingsIcon, {}) })
         }
       ),
-      signer && /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx23(
         "div",
         {
           onClick: () => setHistoryTabShown((x) => !x),
@@ -2997,6 +2963,8 @@ var TokenPicker = ({
     const isMatch = (value, searchValue2) => value.toLowerCase().indexOf(searchValue2.toLowerCase()) > -1;
     return tokens?.filter(
       (token) => isMatch(token.symbol, searchValue) || isMatch(token.name, searchValue) || token.address === searchValue.toLowerCase()
+    ).sort(
+      (a, b) => a.priority < b.priority ? 1 : balances && balances[a.address] && balances[b.address] && balances[a.address]?.lte(balances[b.address] || "0") ? 1 : -1
     );
   }, [searchValue, tokens]);
   return modalRoot ? createPortal(
@@ -3043,9 +3011,7 @@ var TokenPicker = ({
             token.address
           )) }),
           /* @__PURE__ */ jsx27("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
-          /* @__PURE__ */ jsx27("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.sort(
-            (a, b) => balances && balances[a.address] && balances[b.address] && balances[a.address]?.lte(balances[b.address] || "0") ? 1 : -1
-          ).map((token, index) => /* @__PURE__ */ jsxs12(
+          /* @__PURE__ */ jsx27("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ jsxs12(
             "div",
             {
               className: `flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35,35,35)]" : ""}`,
@@ -3361,15 +3327,14 @@ var Form = ({
     setSigner(account.address);
   }, [account.address]);
   useEffect5(() => {
-    if (supportedChains.some(
+    const defaultChain = supportedChains.find(
       ({ chainId }) => chainId === account.chainId?.toString()
-    )) {
-      setSrcChain(
-        supportedChains.find(
-          ({ chainId }) => chainId === account.chainId?.toString()
-        )
-      );
-    }
+    );
+    setSrcChain(
+      defaultChain ?? supportedChains.find(
+        ({ chainId }) => chainId === DEFAULT_SOURCE_CHAIN_ID
+      )
+    );
   }, [account.chainId]);
   useEffect5(() => {
     setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
@@ -3459,7 +3424,7 @@ var Form = ({
   return /* @__PURE__ */ jsxs16(
     "form",
     {
-      className: "flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-[360px] sm:w-[600px]",
+      className: "flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop",
       onSubmit: handleSubmit,
       children: [
         /* @__PURE__ */ jsx33(
@@ -3481,7 +3446,7 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? signer && /* @__PURE__ */ jsx33(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
+        historyTabShown ? /* @__PURE__ */ jsx33(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
           desc && /* @__PURE__ */ jsx33(Description, { description: desc }),
           /* @__PURE__ */ jsx33(
             SwapPanel,
@@ -3645,10 +3610,10 @@ export {
   ADDRESSES,
   Alert,
   BALANCES_CHUNK_SIZE,
-  BALANCE_DISPLAY_MIN_LIMIT,
   BatchQueryAbi,
   ContractName,
   DEFAULT_ECOSYSTEM,
+  DEFAULT_SOURCE_CHAIN_ID,
   DELIVERY_TIME,
   ERC20Abi,
   EXPRESS_DELIVERY_TIME,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

package/src/components/TxConfigForm/Form.tsx

@@ -17,6 +17,7 @@ import { Summary } from "./Summary";
 import { SwapPanel } from "./SwapPanel";
 import { ErrorField } from "./ErrorField";
 import { Description } from "./Description";
+import { DEFAULT_SOURCE_CHAIN_ID } from "@src/constants";
 
 export const Form = ({
   dstChainId,
@@ -55,17 +56,15 @@ export const Form = ({
   }, [account.address]);
 
   useEffect(() => {
-    if (
-      supportedChains.some(
-        ({ chainId }) => chainId === account.chainId?.toString(),
-      )
-    ) {
-      setSrcChain(
+    const defaultChain = supportedChains.find(
+      ({ chainId }) => chainId === account.chainId?.toString(),
+    );
+    setSrcChain(
+      defaultChain ??
         supportedChains.find(
-          ({ chainId }) => chainId === account.chainId?.toString(),
+          ({ chainId }) => chainId === DEFAULT_SOURCE_CHAIN_ID,
         ),
-      );
-    }
+    );
   }, [account.chainId]);
 
   useEffect(() => {
@@ -178,7 +177,7 @@ export const Form = ({
 
   return (
     <form
-      className="flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-[360px] sm:w-[600px]"
+      className="flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop"
       onSubmit={handleSubmit}
     >
       <TopBar
@@ -197,7 +196,7 @@ export const Form = ({
         />
       )}
       {historyTabShown ? (
-        signer && <History signer={signer} supportedChains={supportedChains} />
+        <History signer={signer} supportedChains={supportedChains} />
       ) : (
         <div className="flex flex-col gap-2">
           {desc && <Description description={desc} />}

package/src/components/TxConfigForm/History.tsx

@@ -6,118 +6,60 @@ import BigNumberJS from "bignumber.js";
 import { HistoryCard } from "./HistoryCard";
 import { CircularProgressIcon } from "../icons";
 
-const PENDING_TXS_LOCAL_STORAGE_KEY = "pending_transactions";
-
-type LocalHistory = { [walletAddress: string]: Transaction[] };
-
 interface Props {
-  signer: string;
+  signer: string | undefined;
   supportedChains: Chain[];
 }
 
 export const History: FC<Props> = ({ signer, supportedChains }) => {
-  const [mappedHistory, setMappedHistory] = useState<Transaction[]>();
-  // const [latestHistory, setLatestHistory] = useState<Transaction[]>();
+  const [fetchedHistory, setFetchedHistory] = useState<Transaction[]>();
   const [historyLoadedOnce, setHistoryLoadedOnce] = useState(false);
 
-  const getLocalHistory = () => {
-    return JSON.parse(
-      localStorage.getItem(PENDING_TXS_LOCAL_STORAGE_KEY) || "{}",
-    ) as LocalHistory;
-  };
-
-  const setLocalHistory = (data: LocalHistory) => {
-    localStorage.setItem(PENDING_TXS_LOCAL_STORAGE_KEY, JSON.stringify(data));
-  };
-
   const fetchHistory = useCallback(async () => {
-    const downloadedHistory = await getHistory({ walletAddress: signer });
-    const fetchedTransactions: Transaction[] = [];
-    if (downloadedHistory) {
-      for (const entry of downloadedHistory.history) {
-        if (!entry.source) {
-          continue;
-        }
-        let status: TransactionStatus;
-        if (entry.failed) status = "REVERTED";
-        if (!!entry.target) {
-          status = "DONE";
-        } else {
-          status = "IN_PROGRESS";
-        }
-
-        const blockTimestampMs = new Date(entry.source.blockTime).getTime();
-        const estimatedDeliveryTimestamp = new BigNumberJS(
-          entry.source.valueForInstantCcipRecieve,
-        ).gt(0)
-          ? blockTimestampMs + EXPRESS_DELIVERY_TIME
-          : blockTimestampMs + DELIVERY_TIME;
-
-        fetchedTransactions.push({
-          hash: entry.source.transactionHash,
-          timestamp: blockTimestampMs / 1000,
-          sourceChainId: entry.source.blockchainId,
-          targetChainId: entry.source.targetBlockchainId,
-          amountWei: entry.source.tokenAmount,
-          tokenAddress: entry.source.tokenAddress,
-          tokenOutAddress:
-            entry.target?.tokenAddress || entry.source.tokenOutAddress,
-          tokenOutAmount:
-            entry.target?.tokenAmount || entry.source.estimatedAmountOut,
-          estimatedDeliveryTimestamp,
-          status,
-        });
-      }
-
-      const txHashToTxFromAPI: Record<string, Transaction> = {};
-      for (const transaction of fetchedTransactions) {
-        txHashToTxFromAPI[transaction.hash] = transaction;
-      }
-
-      const localHistory = getLocalHistory();
-      const newLocalHistory: Record<string, Transaction[]> = {};
-
-      for (const [walletAddress, transactions] of Object.entries(
-        localHistory,
-      )) {
-        if (walletAddress.toLowerCase() !== signer.toLowerCase()) {
-          continue;
-        }
-        const newLocalHistoryForWallet: Transaction[] = [];
-
-        for (const transaction of transactions) {
-          if (!txHashToTxFromAPI[transaction.hash]) {
-            // localStorage has fresher data.
-            fetchedTransactions.push(transaction);
-            newLocalHistoryForWallet.push(transaction);
+    if (signer) {
+      const downloadedHistory = await getHistory({ walletAddress: signer });
+      const fetchedTransactions: Transaction[] = [];
+      if (downloadedHistory) {
+        for (const entry of downloadedHistory.history) {
+          if (!entry.source) {
             continue;
           }
-
-          if (
-            txHashToTxFromAPI[transaction.hash] &&
-            transaction.status === "DONE" &&
-            txHashToTxFromAPI[transaction.hash]?.status === "IN_PROGRESS"
-          ) {
-            // If we know on the frontend that the tx is done we should update backend result
-            txHashToTxFromAPI[transaction.hash]!.status = "DONE";
+          let status: TransactionStatus;
+          if (entry.failed) status = "REVERTED";
+          if (!!entry.target) {
+            status = "DONE";
+          } else {
+            status = "IN_PROGRESS";
           }
 
-          if (
-            txHashToTxFromAPI[transaction.hash]?.status === "DONE" ||
-            txHashToTxFromAPI[transaction.hash]?.status === "REVERTED"
-          ) {
-            // API has the same or fresher data.
-            continue;
-          }
+          const blockTimestampMs = new Date(entry.source.blockTime).getTime();
+          const estimatedDeliveryTimestamp = new BigNumberJS(
+            entry.source.valueForInstantCcipRecieve,
+          ).gt(0)
+            ? blockTimestampMs + EXPRESS_DELIVERY_TIME
+            : blockTimestampMs + DELIVERY_TIME;
+
+          fetchedTransactions.push({
+            hash: entry.source.transactionHash,
+            timestamp: blockTimestampMs / 1000,
+            sourceChainId: entry.source.blockchainId,
+            targetChainId: entry.source.targetBlockchainId,
+            amountWei: entry.source.tokenAmount,
+            tokenAddress: entry.source.tokenAddress,
+            tokenOutAddress:
+              entry.target?.tokenAddress || entry.source.tokenOutAddress,
+            tokenOutAmount:
+              entry.target?.tokenAmount || entry.source.estimatedAmountOut,
+            estimatedDeliveryTimestamp,
+            status,
+          });
         }
 
-        newLocalHistory[walletAddress.toLowerCase()] = newLocalHistoryForWallet;
+        setFetchedHistory(
+          fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp),
+        );
+        setHistoryLoadedOnce(true);
       }
-      setLocalHistory(newLocalHistory);
-      setMappedHistory(
-        fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp),
-      );
-      setHistoryLoadedOnce(true);
     }
   }, [signer, getHistory]);
 
@@ -129,20 +71,27 @@ export const History: FC<Props> = ({ signer, supportedChains }) => {
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
 
+  if (!signer)
+    return (
+      <div className="flex items-center justify-center w-full h-[30vh]">
+        Connect a wallet to browse history
+      </div>
+    );
+
   return (
     <div className="flex items-center justify-center w-full">
-      <div className="w-full h-[50vh] overflow-scroll overflow-x-hidden">
-        {mappedHistory?.length === 0 && historyLoadedOnce && (
+      <div className="w-full h-[30vh] overflow-scroll overflow-x-hidden">
+        {fetchedHistory?.length === 0 && historyLoadedOnce && (
           <div className="w-full text-center py-4 px-0 text-[rgb(158,158,158)]">
             Your history is empty...
           </div>
         )}
-        {!mappedHistory && !historyLoadedOnce && (
+        {!fetchedHistory && !historyLoadedOnce && (
           <div className="flex w-full h-full items-center justify-center">
             <CircularProgressIcon />
           </div>
         )}
-        {mappedHistory?.map((transaction, index) => (
+        {fetchedHistory?.map((transaction, index) => (
           <HistoryCard
             key={index}
             transaction={transaction}

package/src/components/TxConfigForm/HistoryCard.tsx

@@ -9,6 +9,7 @@ import {
   HourGlassIcon,
   XMarkIcon,
 } from "@src/components/icons";
+import { MINIMUM_DISPLAYED_TOKEN_AMOUNT } from "@src/constants";
 
 interface Props {
   transaction: Transaction;
@@ -158,8 +159,8 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
         <div className="flex items-center mb-2 last:mb-0">
           <div className="flex flex-1 items-center flex-wrap text-xs text-[rgba(255,255,255,0.6)]">
             <div className="flex items-center">
-              {Number(transferredAmount) < 0.0001
-                ? "<0.0001"
+              {Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT
+                ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}`
                 : transferredAmount}
               <div className="text-xs ml-1 text-rgba(255,255,255,0.6)">
                 {tokenData?.symbol}

package/src/components/TxConfigForm/TokenPicker.tsx

@@ -37,12 +37,24 @@ export const TokenPicker: FC<Props> = ({
   const filteredTokens = useMemo(() => {
     const isMatch = (value: string, searchValue: string) =>
       value.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
-    return tokens?.filter(
-      (token) =>
-        isMatch(token.symbol, searchValue) ||
-        isMatch(token.name, searchValue) ||
-        token.address === searchValue.toLowerCase(),
-    );
+
+    return tokens
+      ?.filter(
+        (token) =>
+          isMatch(token.symbol, searchValue) ||
+          isMatch(token.name, searchValue) ||
+          token.address === searchValue.toLowerCase(),
+      )
+      .sort((a, b) =>
+        a.priority < b.priority
+          ? 1
+          : balances &&
+            balances[a.address] &&
+            balances[b.address] &&
+            balances[a.address]?.lte(balances[b.address] || "0")
+          ? 1
+          : -1,
+      );
   }, [searchValue, tokens]);
 
   return modalRoot
@@ -94,69 +106,60 @@ export const TokenPicker: FC<Props> = ({
             <div className="h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" />
             <div className="overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col">
               {filteredTokens && filteredTokens.length > 0 ? (
-                filteredTokens
-                  .sort((a, b) =>
-                    balances &&
-                    balances[a.address] &&
-                    balances[b.address] &&
-                    balances[a.address]?.lte(balances[b.address] || "0")
-                      ? 1
-                      : -1,
-                  )
-                  .map((token, index) => (
-                    <div
-                      key={`${index}_${token.address}`}
-                      className={`flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${
-                        token.address === selectedToken?.address
-                          ? "bg-[rgb(35,35,35)]"
-                          : ""
-                      }`}
-                      onClick={() => {
-                        setSelectedToken(token);
-                        onCloseClick();
-                      }}
-                    >
-                      {token.image ? (
-                        <img
-                          src={token.image}
-                          alt={token.name}
-                          className="token-picker__all__logo"
-                        />
-                      ) : (
-                        <div className="flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
-                          {token?.symbol.substring(0, 1)}
+                filteredTokens.map((token, index) => (
+                  <div
+                    key={`${index}_${token.address}`}
+                    className={`flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${
+                      token.address === selectedToken?.address
+                        ? "bg-[rgb(35,35,35)]"
+                        : ""
+                    }`}
+                    onClick={() => {
+                      setSelectedToken(token);
+                      onCloseClick();
+                    }}
+                  >
+                    {token.image ? (
+                      <img
+                        src={token.image}
+                        alt={token.name}
+                        className="token-picker__all__logo"
+                      />
+                    ) : (
+                      <div className="flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
+                        {token?.symbol.substring(0, 1)}
+                      </div>
+                    )}
+                    <div className="flex justify-between items-center gap-1 overflow-hidden grow">
+                      <div className="flex flex-col leading-[16px]">
+                        <div className="overflow-hidden whitespace-nowrap text-ellipsis text-[15px]">
+                          {token.name}
                         </div>
-                      )}
-                      <div className="flex justify-between items-center gap-1 overflow-hidden grow">
-                        <div className="flex flex-col leading-[16px]">
-                          <div className="overflow-hidden whitespace-nowrap text-ellipsis text-[15px]">
-                            {token.name}
-                          </div>
-                          <div className="text-[#888] text-[11px]">
-                            {token.symbol}
-                          </div>
+                        <div className="text-[#888] text-[11px]">
+                          {token.symbol}
                         </div>
-                        {signer && (
-                          <>
-                            {balances &&
-                            balances[token.address] &&
-                            token.decimals ? (
-                              <div className="text-xs">
-                                {weiToHumanReadable({
-                                  amount:
-                                    balances[token.address]?.toString() || "0",
-                                  decimals: token.decimals,
-                                  precisionFractionalPlaces: 4,
-                                })}
-                              </div>
-                            ) : (
-                              <Skeleton w="w-12" h="h-3" />
-                            )}
-                          </>
-                        )}
                       </div>
+                      {signer && (
+                        <>
+                          {balances &&
+                          balances[token.address] &&
+                          token.decimals ? (
+                            <div className="text-xs">
+                              {weiToHumanReadable({
+                                amount:
+                                  balances[token.address]?.toString() || "0",
+                                decimals: token.decimals,
+                                precisionFractionalPlaces: 4,
+                              })}
+                            </div>
+                          ) : (
+                            <Skeleton w="w-12" h="h-3" />
+                          )}
+                        </>
+                      )}
                     </div>
-                  ))
+                  </div>
+                ))
               ) : (
                 <div className="mt-4 flex justify-center">
                   <p className="text-sm text-white">No tokens found.</p>

package/src/components/TxConfigForm/TopBar.tsx

@@ -18,7 +18,9 @@ export const TopBar: FC<Props> = ({
   return (
     <div className="flex w-full justify-between mx-auto pl-4 pr-8 pt-2">
       <div className="rounded-lg text-[rgba(255,255,255,0.6)] text-base whitespace-nowrap">
-        {signer ? `Connected wallet: ${shortAddress(signer)}` : `Disconnected`}
+        {signer
+          ? `Connected wallet: ${shortAddress(signer)}`
+          : `Wallet disconnected`}
       </div>
       <div className="flex gap-2">
         {!historyTabShown && (
@@ -31,22 +33,20 @@ export const TopBar: FC<Props> = ({
             </div>
           </div>
         )}
-        {signer && (
-          <div
-            onClick={() => setHistoryTabShown((x) => !x)}
-            className="flex items-center text-sm gap-1 cursor-pointer"
-          >
-            {!historyTabShown ? (
-              <>
-                <div className="w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center">
-                  <HistoryIcon />
-                </div>
-              </>
-            ) : (
-              <div>Back</div>
-            )}
-          </div>
-        )}
+        <div
+          onClick={() => setHistoryTabShown((x) => !x)}
+          className="flex items-center text-sm gap-1 cursor-pointer"
+        >
+          {!historyTabShown ? (
+            <>
+              <div className="w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center">
+                <HistoryIcon />
+              </div>
+            </>
+          ) : (
+            <div>Back</div>
+          )}
+        </div>
       </div>
     </div>
   );

package/src/constants/index.ts

@@ -6,6 +6,6 @@ export const SLIPPAGE_PRESETS: number[] = [0.5, 1.5, 3.0];
 export const DELIVERY_TIME = 30 * 1000 * 60;
 export const EXPRESS_DELIVERY_TIME = 30 * 1000;
 export const BALANCES_CHUNK_SIZE = 500;
-export const BALANCE_DISPLAY_MIN_LIMIT = 0.0001;
 export const ROUTE_TIMEOUT_MS = 5000;
-export const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.00001;
+export const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
+export const DEFAULT_SOURCE_CHAIN_ID = "1";

package/tailwind.config.js

@@ -13,6 +13,10 @@ module.exports = {
         x_blue_light: "rgba(54,129,198,1)",
         x_blue_dark: "rgba(43,74,157,1)",
       },
+      width: {
+        x_desktop: "600px",
+        x_mobile: "356px",
+      },
     },
   },
   plugins: [],