@xswap-link/sdk 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -30,140 +30,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  // src/index.ts
31
31
  var src_exports = {};
32
32
  __export(src_exports, {
33
- ADDRESSES: () => ADDRESSES,
34
- Alert: () => Alert,
35
- BALANCES_CHUNK_SIZE: () => BALANCES_CHUNK_SIZE,
36
- BatchQueryAbi: () => BatchQueryAbi,
37
- CCIP_EXPLORER: () => CCIP_EXPLORER,
38
33
  ContractName: () => ContractName,
39
- DEFAULT_ECOSYSTEM: () => DEFAULT_ECOSYSTEM,
40
- DEFAULT_SOURCE_CHAIN_ID: () => DEFAULT_SOURCE_CHAIN_ID,
41
- DELIVERY_TIME: () => DELIVERY_TIME,
42
- ERC20Abi: () => ERC20Abi,
43
- EXPRESS_DELIVERY_TIME: () => EXPRESS_DELIVERY_TIME,
44
34
  Ecosystem: () => Ecosystem,
45
35
  Environment: () => Environment,
46
- IERC20: () => IERC20,
47
- MINIMUM_DISPLAYED_TOKEN_AMOUNT: () => MINIMUM_DISPLAYED_TOKEN_AMOUNT,
48
- MSG_RECEIVED_EVENT_ABI: () => MSG_RECEIVED_EVENT_ABI,
49
- MSG_RECEIVED_EVENT_SIG: () => MSG_RECEIVED_EVENT_SIG,
50
- MSG_SENT_EVENT_ABI: () => MSG_SENT_EVENT_ABI,
51
- MSG_SENT_EVENT_SIG: () => MSG_SENT_EVENT_SIG,
52
- NUMBER_INPUT_REGEX: () => NUMBER_INPUT_REGEX,
53
- ROUTE_TIMEOUT_MS: () => ROUTE_TIMEOUT_MS,
54
- SLIPPAGE_PRESETS: () => SLIPPAGE_PRESETS,
55
- Skeleton: () => Skeleton,
56
- TX_RECEIPT_STATUS_LIFETIME: () => TX_RECEIPT_STATUS_LIFETIME,
57
- TxHistoryButton: () => TxHistoryButton,
58
36
  Web3Environment: () => Web3Environment,
59
37
  XSwapCallType: () => XSwapCallType,
60
- addTransactionToRenderedTransactions: () => addTransactionToRenderedTransactions,
61
- chunkArray: () => chunkArray,
62
- deepMergeObjects: () => deepMergeObjects,
63
- findPlaceholderIndex: () => findPlaceholderIndex,
64
- generateApproveTxData: () => generateApproveTxData,
65
- generateRandomBigNumber: () => generateRandomBigNumber,
66
- generateStakingCalls: () => generateStakingCalls,
67
- generateUniqueRandomBigNumber: () => generateUniqueRandomBigNumber,
68
- getBalanceOf: () => getBalanceOf,
69
- getBalances: () => getBalances,
70
- getBridgeTokens: () => getBridgeTokens,
71
- getChainData: () => getChainData,
72
- getChains: () => getChains,
73
- getDate: () => getDate,
74
- getHistory: () => getHistory,
75
- getPrices: () => getPrices,
76
- getRoute: () => getRoute,
77
38
  getSwapTx: () => getSwapTx,
78
- getTokens: () => getTokens,
79
- monitorTransactionStatus: () => monitorTransactionStatus,
80
- openTxConfigForm: () => openTxConfigForm,
81
- removeTransactionFromRenderedTransactions: () => removeTransactionFromRenderedTransactions,
82
- renderTxHistoryButtons: () => renderTxHistoryButtons,
83
- replaceNull: () => replaceNull,
84
- safeBigNumberFrom: () => safeBigNumberFrom,
85
- shortAddress: () => shortAddress,
86
- updateTransactionDoneInRenderedTransactions: () => updateTransactionDoneInRenderedTransactions,
87
- weiToHumanReadable: () => weiToHumanReadable
39
+ monitorTransactionStatus: () => monitorTransactionStatus
88
40
  });
89
41
  module.exports = __toCommonJS(src_exports);
90
42
 
91
- // src/components/Alert/index.tsx
92
- var import_jsx_runtime = require("react/jsx-runtime");
93
- var Alert = ({ desc }) => {
94
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2", children: [
95
- "\u26A0\uFE0F ",
96
- desc
97
- ] });
98
- };
99
-
100
- // src/components/TxConfigForm/index.tsx
101
- var import_react11 = require("react");
43
+ // src/config/init.ts
102
44
  var import_client = require("react-dom/client");
103
- var import_react_query = require("@tanstack/react-query");
104
- var import_wagmi3 = require("wagmi");
105
-
106
- // src/config/wagmiConfig.ts
107
- var import_wagmi = require("wagmi");
108
- var import_connectors = require("wagmi/connectors");
109
- var WagmiChains = __toESM(require("viem/chains"));
110
- var import_chains = require("viem/chains");
111
- var getWagmiConfig = (supportedChains) => {
112
- const chains = mapChains(supportedChains);
113
- const transports = mapTransports(chains);
114
- return (0, import_wagmi.createConfig)({
115
- chains,
116
- transports,
117
- connectors: [
118
- (0, import_connectors.injected)(),
119
- (0, import_connectors.metaMask)(),
120
- (0, import_connectors.safe)(),
121
- (0, import_connectors.walletConnect)({ projectId: "c392898b45ac587a280b5eb33e92aeb0" })
122
- ]
123
- });
124
- };
125
- var mapChains = (supportedChains) => {
126
- const result = [import_chains.mainnet];
127
- result.push(
128
- ...Object.values(WagmiChains).filter(
129
- (chain) => chain.id !== import_chains.mainnet.id && supportedChains.some(({ chainId }) => chainId === chain.id.toString())
130
- )
131
- );
132
- return result;
133
- };
134
- var mapTransports = (chains) => {
135
- const transports = {};
136
- chains.forEach((chain) => {
137
- transports[chain.id] = (0, import_wagmi.http)();
138
- });
139
- return transports;
140
- };
141
-
142
- // src/components/icons/CloseIcon.tsx
143
- var import_jsx_runtime2 = require("react/jsx-runtime");
144
- var CloseIcon = () => {
145
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
146
- "svg",
147
- {
148
- height: "18",
149
- width: "18",
150
- xmlns: "http://www.w3.org/2000/svg",
151
- viewBox: "0 0 10.312 8.319",
152
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
153
- "path",
154
- {
155
- fill: "white",
156
- d: "M6.073 4.078 10.151 0H9.093A1.87 1.87 0 0 0 7.77.548L5.157 3.162 2.543.548A1.87 1.87 0 0 0 1.22 0H.161L4.24 4.078 0 8.318h1.058a1.87 1.87 0 0 0 1.322-.547l2.777-2.777 2.776 2.777a1.869 1.869 0 0 0 1.322.548h1.058Z"
157
- }
158
- )
159
- }
160
- );
161
- };
162
-
163
- // src/components/TxConfigForm/Form.tsx
164
- var import_react10 = require("react");
165
- var import_ethers5 = require("ethers");
166
- var import_wagmi2 = require("wagmi");
167
45
 
168
46
  // xswap.config.ts
169
47
  var xSwapConfig = {
@@ -179,6 +57,73 @@ var xswap_config_default = {
179
57
  ...xSwapConfigLocal
180
58
  };
181
59
 
60
+ // package.json
61
+ var version = "0.2.2";
62
+
63
+ // src/config/init.ts
64
+ var xswapRoot;
65
+ var txStatusRoot;
66
+ var initDocument = () => {
67
+ if (typeof document === "undefined") {
68
+ throw new Error("Can't render XPay components from server side.");
69
+ }
70
+ fetch(`${xswap_config_default.apiUrl}/sdk/css?data={"version": "${version}"}`).then(
71
+ async (css) => {
72
+ const style = document.createElement("style");
73
+ style.textContent = await css.text();
74
+ document.body.appendChild(style);
75
+ }
76
+ );
77
+ const xswapElement = document.createElement("div");
78
+ xswapElement.setAttribute("id", "xswap-modal");
79
+ document.body.appendChild(xswapElement);
80
+ xswapRoot = (0, import_client.createRoot)(xswapElement);
81
+ const txStatusElement = document.createElement("div");
82
+ txStatusElement.setAttribute("id", "xswap-tx-status");
83
+ txStatusElement.setAttribute("class", "xswap-tx-status");
84
+ document.body.appendChild(txStatusElement);
85
+ txStatusRoot = (0, import_client.createRoot)(txStatusElement);
86
+ };
87
+
88
+ // src/models/Addresses.ts
89
+ var ContractName = /* @__PURE__ */ ((ContractName2) => {
90
+ ContractName2["BatchQuery"] = "BatchQuery";
91
+ ContractName2["FeeCollector"] = "FeeCollector";
92
+ ContractName2["XSwapRouter"] = "XSwapRouter";
93
+ return ContractName2;
94
+ })(ContractName || {});
95
+
96
+ // src/models/Ecosystem.ts
97
+ var Ecosystem = /* @__PURE__ */ ((Ecosystem2) => {
98
+ Ecosystem2["EVM"] = "evm";
99
+ return Ecosystem2;
100
+ })(Ecosystem || {});
101
+
102
+ // src/models/Environment.ts
103
+ var Environment = /* @__PURE__ */ ((Environment2) => {
104
+ Environment2["PROD"] = "production";
105
+ Environment2["DEV"] = "develop";
106
+ Environment2["LOCAL"] = "local";
107
+ return Environment2;
108
+ })(Environment || {});
109
+
110
+ // src/models/Web3Environment.ts
111
+ var Web3Environment = /* @__PURE__ */ ((Web3Environment2) => {
112
+ Web3Environment2["DEVNET"] = "devnet";
113
+ Web3Environment2["TESTNET"] = "testnet";
114
+ Web3Environment2["MAINNET"] = "mainnet";
115
+ return Web3Environment2;
116
+ })(Web3Environment || {});
117
+
118
+ // src/models/XSwapCallType.ts
119
+ var XSwapCallType = /* @__PURE__ */ ((XSwapCallType2) => {
120
+ XSwapCallType2[XSwapCallType2["DEFAULT"] = 0] = "DEFAULT";
121
+ XSwapCallType2[XSwapCallType2["FULL_TOKEN_BALANCE"] = 1] = "FULL_TOKEN_BALANCE";
122
+ XSwapCallType2[XSwapCallType2["FULL_NATIVE_BALANCE"] = 2] = "FULL_NATIVE_BALANCE";
123
+ XSwapCallType2[XSwapCallType2["COLLECT_TOKEN_BALANCE"] = 3] = "COLLECT_TOKEN_BALANCE";
124
+ return XSwapCallType2;
125
+ })(XSwapCallType || {});
126
+
182
127
  // src/services/api.ts
183
128
  async function _sendRequest(urlPath, options) {
184
129
  const response = await fetch(`${xswap_config_default.apiUrl}${urlPath}`, {
@@ -207,26 +152,6 @@ async function getChains(ecosystem) {
207
152
  return _sendRequest(`/chains?data=${JSON.stringify({ ecosystem })}
208
153
  `);
209
154
  }
210
- async function getChainData(chainId, ecosystem) {
211
- return _sendRequest(
212
- `/chains?data=${JSON.stringify({
213
- chainId,
214
- ecosystem
215
- })}`
216
- );
217
- }
218
- async function getTokens(chainId, address, ecosystem) {
219
- return _sendRequest(
220
- `/tokens?data=${JSON.stringify({
221
- chainId,
222
- address,
223
- ecosystem
224
- })}`
225
- );
226
- }
227
- async function getBridgeTokens() {
228
- return _sendRequest(`/bridgeTokens`);
229
- }
230
155
  async function getHistory(payload) {
231
156
  return await _sendRequest(
232
157
  `/history?${new URLSearchParams({
@@ -245,45 +170,6 @@ async function getPrices(payload) {
245
170
  // src/services/integrations/customCalls/staking.ts
246
171
  var import_ethers3 = require("ethers");
247
172
 
248
- // src/models/Addresses.ts
249
- var ContractName = /* @__PURE__ */ ((ContractName2) => {
250
- ContractName2["BatchQuery"] = "BatchQuery";
251
- ContractName2["FeeCollector"] = "FeeCollector";
252
- ContractName2["XSwapRouter"] = "XSwapRouter";
253
- return ContractName2;
254
- })(ContractName || {});
255
-
256
- // src/models/Ecosystem.ts
257
- var Ecosystem = /* @__PURE__ */ ((Ecosystem2) => {
258
- Ecosystem2["EVM"] = "evm";
259
- return Ecosystem2;
260
- })(Ecosystem || {});
261
-
262
- // src/models/Environment.ts
263
- var Environment = /* @__PURE__ */ ((Environment2) => {
264
- Environment2["PROD"] = "production";
265
- Environment2["DEV"] = "develop";
266
- Environment2["LOCAL"] = "local";
267
- return Environment2;
268
- })(Environment || {});
269
-
270
- // src/models/Web3Environment.ts
271
- var Web3Environment = /* @__PURE__ */ ((Web3Environment2) => {
272
- Web3Environment2["DEVNET"] = "devnet";
273
- Web3Environment2["TESTNET"] = "testnet";
274
- Web3Environment2["MAINNET"] = "mainnet";
275
- return Web3Environment2;
276
- })(Web3Environment || {});
277
-
278
- // src/models/XSwapCallType.ts
279
- var XSwapCallType = /* @__PURE__ */ ((XSwapCallType2) => {
280
- XSwapCallType2[XSwapCallType2["DEFAULT"] = 0] = "DEFAULT";
281
- XSwapCallType2[XSwapCallType2["FULL_TOKEN_BALANCE"] = 1] = "FULL_TOKEN_BALANCE";
282
- XSwapCallType2[XSwapCallType2["FULL_NATIVE_BALANCE"] = 2] = "FULL_NATIVE_BALANCE";
283
- XSwapCallType2[XSwapCallType2["COLLECT_TOKEN_BALANCE"] = 3] = "COLLECT_TOKEN_BALANCE";
284
- return XSwapCallType2;
285
- })(XSwapCallType || {});
286
-
287
173
  // src/utils/contracts.ts
288
174
  var import_ethers2 = require("ethers");
289
175
 
@@ -310,16 +196,6 @@ var weiToHumanReadable = ({
310
196
  }
311
197
  return res;
312
198
  };
313
- var generateRandomBigNumber = (length) => {
314
- return import_ethers.BigNumber.from(import_ethers.utils.randomBytes(length));
315
- };
316
- var generateUniqueRandomBigNumber = (length, existingValues) => {
317
- let result;
318
- while (result === void 0 || existingValues.includes(result)) {
319
- result = generateRandomBigNumber(length);
320
- }
321
- return result;
322
- };
323
199
 
324
200
  // src/contracts/abi/BatchQuery.json
325
201
  var BatchQuery_default = [
@@ -666,17 +542,6 @@ var MSG_RECEIVED_EVENT_ABI = [
666
542
 
667
543
  // src/utils/contracts.ts
668
544
  var IERC20 = new import_ethers2.ethers.utils.Interface(ERC20Abi);
669
- var getBalanceOf = async (wallet, token, rpcUrl) => {
670
- const provider = import_ethers2.ethers.getDefaultProvider(rpcUrl);
671
- if (token === import_ethers2.ethers.constants.AddressZero) {
672
- return import_ethers2.ethers.utils.formatEther(await provider.getBalance(wallet));
673
- }
674
- const contract = new import_ethers2.ethers.Contract(token, ERC20Abi, provider);
675
- return import_ethers2.ethers.utils.formatUnits(
676
- await contract.balanceOf(wallet),
677
- await contract.decimals()
678
- );
679
- };
680
545
  var getBalances = async (chain, wallet) => {
681
546
  return {
682
547
  ...await getNativeBalance(chain, wallet),
@@ -727,35 +592,6 @@ var getErc20Balances = async (chain, wallet) => {
727
592
  });
728
593
  return balances;
729
594
  };
730
- var generateApproveTxData = (tokenAddress, spender, amount) => {
731
- return tokenAddress !== import_ethers2.ethers.constants.AddressZero ? {
732
- to: tokenAddress,
733
- value: safeBigNumberFrom("0"),
734
- data: IERC20.encodeFunctionData("approve", [spender, amount])
735
- } : void 0;
736
- };
737
- var findPlaceholderIndex = (abi, funName, funParams, placeholderValue) => {
738
- if (funParams.flat(Infinity).filter((param) => param === placeholderValue).length !== 1) {
739
- throw new Error("Random placeholder value must be provided and unique.");
740
- }
741
- const iface = new import_ethers2.ethers.utils.Interface(abi);
742
- const functionFragment = iface.getFunction(funName);
743
- if (!functionFragment) {
744
- throw new Error(`Can't find function "${funName}" in provided ABI.`);
745
- }
746
- const encodedFunData = iface.encodeFunctionData(functionFragment, funParams);
747
- const paramData = encodedFunData.slice(10);
748
- const chunks = [];
749
- for (let i = 0; i < paramData.length; i += 64) {
750
- chunks.push(paramData.slice(i, i + 64));
751
- }
752
- const searchValue = placeholderValue.toHexString().slice(2).padStart(64, "0");
753
- const result = chunks.findIndex((chunk) => chunk === searchValue);
754
- if (result === -1) {
755
- throw new Error("Randomized parameter not found in the encoded data.");
756
- }
757
- return result;
758
- };
759
595
 
760
596
  // src/utils/strings.ts
761
597
  var shortAddress = (address) => {
@@ -767,19 +603,6 @@ var shortAddress = (address) => {
767
603
 
768
604
  // src/utils/index.ts
769
605
  var import_date_fns = require("date-fns");
770
- var replaceNull = (values, newValue) => {
771
- const modifiedValues = [...values];
772
- for (let i = 0; i < modifiedValues.length; i++) {
773
- if (Array.isArray(modifiedValues[i])) {
774
- modifiedValues[i] = replaceNull(modifiedValues[i], newValue);
775
- } else {
776
- if (modifiedValues[i] === null) {
777
- modifiedValues[i] = newValue;
778
- }
779
- }
780
- }
781
- return modifiedValues;
782
- };
783
606
  var deepMergeObjects = (obj1, obj2) => {
784
607
  for (const key in obj2) {
785
608
  if (obj2.hasOwnProperty(key)) {
@@ -804,229 +627,79 @@ var getDate = (blockTimestamp) => {
804
627
  return (0, import_date_fns.format)(date, "d MMM yyyy HH:mm:ss");
805
628
  };
806
629
 
807
- // src/services/integrations/customCalls/staking.ts
808
- var generateStakingCalls = ({
809
- token,
810
- staking,
811
- stakingAbi,
812
- stakingFunName,
813
- stakingFunParams
814
- }) => {
815
- const flatStakingFunParams = stakingFunParams.flat(Infinity);
816
- if (flatStakingFunParams.filter((param) => param === null).length !== 1) {
817
- throw new Error(
818
- "Exactly 1 'null' value should be provided in 'funParams' in order to override token balance"
819
- );
820
- }
821
- const randomBigNumber = generateUniqueRandomBigNumber(
822
- 32,
823
- flatStakingFunParams
824
- );
825
- const modifiedStakingFunParams = replaceNull(
826
- stakingFunParams,
827
- randomBigNumber
828
- );
829
- const approveFunParams = [staking, randomBigNumber];
830
- const stakingApproveCall = {
831
- callType: 1 /* FULL_TOKEN_BALANCE */,
832
- target: token,
833
- callData: IERC20.encodeFunctionData("approve", approveFunParams),
834
- payload: import_ethers3.ethers.utils.defaultAbiCoder.encode(
835
- ["address", "uint256"],
836
- [
837
- token,
838
- findPlaceholderIndex(
839
- JSON.stringify(ERC20Abi),
840
- "approve",
841
- approveFunParams,
842
- randomBigNumber
843
- )
844
- ]
845
- ),
846
- value: "0"
847
- };
848
- const stakingCall = {
849
- callType: 1 /* FULL_TOKEN_BALANCE */,
850
- target: staking,
851
- callData: new import_ethers3.ethers.utils.Interface(stakingAbi).encodeFunctionData(
852
- stakingFunName,
853
- modifiedStakingFunParams
854
- ),
855
- payload: import_ethers3.ethers.utils.defaultAbiCoder.encode(
856
- ["address", "uint256"],
857
- [
858
- token,
859
- findPlaceholderIndex(
860
- stakingAbi,
861
- stakingFunName,
862
- modifiedStakingFunParams,
863
- randomBigNumber
864
- )
865
- ]
866
- ),
867
- value: "0"
868
- };
869
- return [stakingApproveCall, stakingCall];
870
- };
871
-
872
630
  // src/services/integrations/monitoring.ts
873
- var import_ethers4 = require("ethers");
874
- var import_async_retry = __toESM(require("async-retry"));
875
- var monitorTransactionStatus = async (txChainId, txHash) => {
876
- const txReceipt = await getTxReceipt(txChainId, txHash);
877
- const supportedChains = (await getChains()).filter(
878
- ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
879
- );
880
- const messageSentEvent = txReceipt.logs?.find((log) => {
881
- return log.topics[0] === import_ethers4.ethers.utils.id(MSG_SENT_EVENT_SIG);
882
- });
883
- if (!messageSentEvent) {
884
- throw new Error(
885
- `No transaction event found for chain ${txChainId} tx ${txHash}`
886
- );
887
- }
888
- const messageId = messageSentEvent?.topics[1];
889
- const iface = new import_ethers4.ethers.utils.Interface(MSG_SENT_EVENT_ABI);
890
- const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
891
- if (!decodedMessageSentEvent) {
892
- throw new Error(
893
- `No transaction event arguments found for chain ${txChainId} tx ${txHash}`
894
- );
895
- }
896
- const srcChain = supportedChains.find(
897
- (chain) => chain.chainId === txChainId.toString()
898
- );
899
- const srcToken = srcChain?.tokens.find(
900
- (token) => token.address === decodedMessageSentEvent.args?.token.toString()
901
- );
902
- const dstChain = supportedChains.find(
903
- (chain) => chain.ccipChainId === decodedMessageSentEvent.args?.destinationChainSelector?.toString()
904
- );
905
- const dstChainId = dstChain?.chainId;
906
- if (!dstChainId) {
907
- throw new Error(`Unknown destination chain!`);
908
- }
909
- const transaction = {
910
- txHash,
911
- fromChain: srcChain?.displayName,
912
- fromChainImage: srcChain?.image,
913
- toChain: dstChain.displayName,
914
- toChainImage: dstChain.image,
915
- fromToken: srcToken?.symbol,
916
- fromTokenImage: srcToken?.image,
917
- fromAmount: weiToHumanReadable({
918
- amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
919
- decimals: srcToken?.decimals || 18,
920
- precisionFractionalPlaces: 4
921
- }),
922
- isDone: false,
923
- explorer: `${CCIP_EXPLORER}/tx/${txHash}`
924
- };
925
- addTransactionToRenderedTransactions(transaction);
926
- renderTxHistoryButtons();
927
- const xSwapRouterOnDestinationAddress = ADDRESSES[dstChainId]?.XSwapRouter;
928
- if (!xSwapRouterOnDestinationAddress) {
929
- throw new Error(`Unknown destination XSwapRouter!`);
930
- }
931
- const xSwapRouterOnDestination = new import_ethers4.ethers.Contract(
932
- xSwapRouterOnDestinationAddress,
933
- MSG_RECEIVED_EVENT_ABI,
934
- import_ethers4.ethers.getDefaultProvider(
935
- supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
936
- )
937
- );
938
- const msgReceivedEventFilter = {
939
- address: xSwapRouterOnDestinationAddress,
940
- topics: [import_ethers4.ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
941
- };
942
- const onSuccess = async () => {
943
- updateTransactionDoneInRenderedTransactions(txHash);
944
- renderTxHistoryButtons();
945
- await new Promise(
946
- (resolve) => setTimeout(() => resolve(true), TX_RECEIPT_STATUS_LIFETIME)
947
- );
948
- removeTransactionFromRenderedTransactions(txHash);
949
- renderTxHistoryButtons();
950
- };
951
- xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
952
- };
953
- var getTxReceipt = async (txChainId, txHash) => {
954
- try {
955
- const chain = (await getChains()).find(
956
- (chain2) => chain2.chainId === txChainId
957
- );
958
- const provider = new import_ethers4.ethers.providers.JsonRpcProvider(
959
- chain?.publicRpcUrls[0]
960
- );
961
- return await (0, import_async_retry.default)(async () => {
962
- const txReceipt = await provider.getTransactionReceipt(txHash);
963
- if (!txReceipt) {
964
- throw new Error(`Couldn't fetch tx receipt`);
965
- }
966
- return txReceipt;
967
- });
968
- } catch (e) {
969
- throw new Error(
970
- `Couldn't fetch tx ${txHash} receipt on chain ${txChainId}`
971
- );
972
- }
631
+ var import_ethers5 = require("ethers");
632
+
633
+ // src/components/Alert/index.tsx
634
+ var import_jsx_runtime = require("react/jsx-runtime");
635
+ var Alert = ({ desc }) => {
636
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2", children: [
637
+ "\u26A0\uFE0F ",
638
+ desc
639
+ ] });
973
640
  };
974
641
 
975
- // src/services/integrations/transactions.ts
976
- var getSwapTx = async ({
977
- dstChain,
978
- dstToken,
979
- customContractCalls = [],
980
- desc
981
- }) => {
982
- const supportedChains = (await getChains()).filter(
983
- ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
984
- );
985
- validateSwapTxData(supportedChains, dstChain, dstToken);
986
- const route = await openTxConfigForm({
987
- dstChainId: dstChain,
988
- dstTokenAddr: dstToken,
989
- customContractCalls,
990
- desc,
991
- supportedChains
642
+ // src/components/TxConfigForm/index.tsx
643
+ var import_react11 = require("react");
644
+ var import_react_query = require("@tanstack/react-query");
645
+ var import_wagmi3 = require("wagmi");
646
+
647
+ // src/config/wagmiConfig.ts
648
+ var import_wagmi = require("wagmi");
649
+ var import_connectors = require("wagmi/connectors");
650
+ var WagmiChains = __toESM(require("viem/chains"));
651
+ var import_chains = require("viem/chains");
652
+ var getWagmiConfig = (supportedChains) => {
653
+ const chains = mapChains(supportedChains);
654
+ const transports = mapTransports(chains);
655
+ return (0, import_wagmi.createConfig)({
656
+ chains,
657
+ transports,
658
+ connectors: [
659
+ (0, import_connectors.injected)(),
660
+ (0, import_connectors.metaMask)(),
661
+ (0, import_connectors.safe)(),
662
+ (0, import_connectors.walletConnect)({ projectId: "c392898b45ac587a280b5eb33e92aeb0" })
663
+ ]
992
664
  });
993
- return route.transactions;
994
665
  };
995
- var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
996
- const supportedDstChain = supportedChains.find(
997
- ({ chainId }) => chainId === dstChain
998
- );
999
- if (!supportedDstChain) {
1000
- throw new Error(`Provided chain '${dstChain}' is not supported`);
1001
- }
1002
- if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
1003
- throw new Error(`Provided token '${dstToken}' is not supported`);
1004
- }
666
+ var mapChains = (supportedChains) => {
667
+ const result = [import_chains.mainnet];
668
+ result.push(
669
+ ...Object.values(WagmiChains).filter(
670
+ (chain) => chain.id !== import_chains.mainnet.id && supportedChains.some(({ chainId }) => chainId === chain.id.toString())
671
+ )
672
+ );
673
+ return result;
1005
674
  };
1006
-
1007
- // src/hooks/useDebounce.tsx
1008
- var import_react = require("react");
1009
- var useDebounce = (value, delay) => {
1010
- const timeoutRef = (0, import_react.useRef)(null);
1011
- (0, import_react.useEffect)(() => {
1012
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
1013
- timeoutRef.current = setTimeout(() => {
1014
- setValue(value);
1015
- }, delay);
1016
- return () => {
1017
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
1018
- };
1019
- }, [value, delay]);
1020
- const [debouncedValue, setValue] = (0, import_react.useState)(value);
1021
- return debouncedValue;
675
+ var mapTransports = (chains) => {
676
+ const transports = {};
677
+ chains.forEach((chain) => {
678
+ transports[chain.id] = (0, import_wagmi.http)();
679
+ });
680
+ return transports;
1022
681
  };
1023
682
 
1024
- // src/components/TxConfigForm/History.tsx
1025
- var import_react3 = require("react");
1026
- var import_bignumber2 = __toESM(require("bignumber.js"));
1027
-
1028
- // src/components/TxConfigForm/HistoryCard.tsx
1029
- var import_react2 = require("react");
683
+ // src/components/icons/CloseIcon.tsx
684
+ var import_jsx_runtime2 = require("react/jsx-runtime");
685
+ var CloseIcon = () => {
686
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
687
+ "svg",
688
+ {
689
+ height: "18",
690
+ width: "18",
691
+ xmlns: "http://www.w3.org/2000/svg",
692
+ viewBox: "0 0 10.312 8.319",
693
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
694
+ "path",
695
+ {
696
+ fill: "white",
697
+ d: "M6.073 4.078 10.151 0H9.093A1.87 1.87 0 0 0 7.77.548L5.157 3.162 2.543.548A1.87 1.87 0 0 0 1.22 0H.161L4.24 4.078 0 8.318h1.058a1.87 1.87 0 0 0 1.322-.547l2.777-2.777 2.776 2.777a1.869 1.869 0 0 0 1.322.548h1.058Z"
698
+ }
699
+ )
700
+ }
701
+ );
702
+ };
1030
703
 
1031
704
  // src/components/icons/ArrowRightIcon.tsx
1032
705
  var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -1444,8 +1117,46 @@ var XSwapLogo = () => {
1444
1117
  );
1445
1118
  };
1446
1119
 
1447
- // src/components/TxConfigForm/HistoryCard.tsx
1120
+ // src/components/TxConfigForm/PoweredBy.tsx
1448
1121
  var import_jsx_runtime24 = require("react/jsx-runtime");
1122
+ var PoweredBy = () => {
1123
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-center items-center gap-2 my-3", children: [
1124
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-x_grey", children: "Powered by" }),
1125
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(XSwapBadgeIcon, {}),
1126
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "\u2715" }),
1127
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChainlinkCCIPIcon, {})
1128
+ ] });
1129
+ };
1130
+
1131
+ // src/components/TxConfigForm/Form.tsx
1132
+ var import_react10 = require("react");
1133
+ var import_ethers4 = require("ethers");
1134
+ var import_wagmi2 = require("wagmi");
1135
+
1136
+ // src/hooks/useDebounce.tsx
1137
+ var import_react = require("react");
1138
+ var useDebounce = (value, delay) => {
1139
+ const timeoutRef = (0, import_react.useRef)(null);
1140
+ (0, import_react.useEffect)(() => {
1141
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
1142
+ timeoutRef.current = setTimeout(() => {
1143
+ setValue(value);
1144
+ }, delay);
1145
+ return () => {
1146
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
1147
+ };
1148
+ }, [value, delay]);
1149
+ const [debouncedValue, setValue] = (0, import_react.useState)(value);
1150
+ return debouncedValue;
1151
+ };
1152
+
1153
+ // src/components/TxConfigForm/History.tsx
1154
+ var import_react3 = require("react");
1155
+ var import_bignumber2 = __toESM(require("bignumber.js"));
1156
+
1157
+ // src/components/TxConfigForm/HistoryCard.tsx
1158
+ var import_react2 = require("react");
1159
+ var import_jsx_runtime25 = require("react/jsx-runtime");
1449
1160
  var HistoryCard = ({ transaction, supportedChains }) => {
1450
1161
  const date = getDate(transaction.timestamp);
1451
1162
  const supportedTokens = (0, import_react2.useMemo)(() => {
@@ -1491,14 +1202,14 @@ var HistoryCard = ({ transaction, supportedChains }) => {
1491
1202
  const targetChainData = supportedChains.find(
1492
1203
  (chain) => chain.chainId === transaction.targetChainId
1493
1204
  );
1494
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col globalBorder rounded-xl bg-[rgb(15,15,15)] text-white text-xs sm:text-sm p-4 gap-3 mb-2", children: [
1495
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
1496
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm sm:text-base", children: date }),
1497
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
1498
- transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
1499
- transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
1500
- transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
1501
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1205
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col globalBorder rounded-xl bg-[rgb(15,15,15)] text-white text-xs sm:text-sm p-4 gap-3 mb-2", children: [
1206
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
1207
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm sm:text-base", children: date }),
1208
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1209
+ transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
1210
+ transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
1211
+ transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
1212
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1502
1213
  "a",
1503
1214
  {
1504
1215
  href: `${supportedChains.find(
@@ -1508,15 +1219,15 @@ var HistoryCard = ({ transaction, supportedChains }) => {
1508
1219
  rel: "noreferrer",
1509
1220
  className: "ml-2 no-underline",
1510
1221
  "aria-label": "Show the transaction in the chain explorer",
1511
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowUpRightIcon, {}) })
1222
+ children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUpRightIcon, {}) })
1512
1223
  }
1513
1224
  )
1514
1225
  ] })
1515
1226
  ] }),
1516
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between flex-wrap gap-2", children: [
1517
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
1518
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
1519
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1227
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between flex-wrap gap-2", children: [
1228
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1229
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1230
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1520
1231
  "img",
1521
1232
  {
1522
1233
  src: sourceChainData?.image,
@@ -1524,11 +1235,11 @@ var HistoryCard = ({ transaction, supportedChains }) => {
1524
1235
  className: "w-5 h-5 mr-1"
1525
1236
  }
1526
1237
  ),
1527
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: sourceChainData?.displayName })
1238
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: sourceChainData?.displayName })
1528
1239
  ] }),
1529
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRightIcon, {}) }),
1530
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
1531
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1240
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowRightIcon, {}) }),
1241
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1242
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1532
1243
  "img",
1533
1244
  {
1534
1245
  src: targetChainData?.image,
@@ -1536,35 +1247,35 @@ var HistoryCard = ({ transaction, supportedChains }) => {
1536
1247
  className: "w-5 h-5 mr-1"
1537
1248
  }
1538
1249
  ),
1539
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: targetChainData?.displayName })
1250
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: targetChainData?.displayName })
1540
1251
  ] })
1541
1252
  ] }),
1542
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center flex-wrap", children: [
1543
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
1253
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center flex-wrap", children: [
1254
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1544
1255
  Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}` : transferredAmount,
1545
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ml-1", children: tokenData?.symbol }),
1546
- tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1256
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ml-1", children: tokenData?.symbol }),
1257
+ tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1547
1258
  "img",
1548
1259
  {
1549
1260
  src: tokenData?.image,
1550
1261
  alt: tokenData?.name || "",
1551
1262
  className: "w-5 h-5 ml-1"
1552
1263
  }
1553
- ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
1264
+ ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
1554
1265
  ] }),
1555
- transaction.tokenOutAddress && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
1556
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRightIcon, {}) }),
1557
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
1266
+ transaction.tokenOutAddress && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
1267
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowRightIcon, {}) }),
1268
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1558
1269
  Number(receivedAmount) < 1e-4 ? "<0.0001" : receivedAmount,
1559
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ml-1", children: tokenOutData?.symbol }),
1560
- tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1270
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ml-1", children: tokenOutData?.symbol }),
1271
+ tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1561
1272
  "img",
1562
1273
  {
1563
1274
  src: tokenOutData?.image,
1564
1275
  alt: tokenOutData?.name || "",
1565
1276
  className: "w-5 h-5 ml-1"
1566
1277
  }
1567
- ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
1278
+ ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
1568
1279
  ] })
1569
1280
  ] })
1570
1281
  ] }) })
@@ -1573,7 +1284,7 @@ var HistoryCard = ({ transaction, supportedChains }) => {
1573
1284
  };
1574
1285
 
1575
1286
  // src/components/TxConfigForm/History.tsx
1576
- var import_jsx_runtime25 = require("react/jsx-runtime");
1287
+ var import_jsx_runtime26 = require("react/jsx-runtime");
1577
1288
  var History = ({ signer, supportedChains }) => {
1578
1289
  const [fetchedHistory, setFetchedHistory] = (0, import_react3.useState)();
1579
1290
  const [historyLoadedOnce, setHistoryLoadedOnce] = (0, import_react3.useState)(false);
@@ -1625,11 +1336,11 @@ var History = ({ signer, supportedChains }) => {
1625
1336
  return () => clearInterval(timer);
1626
1337
  }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
1627
1338
  if (!signer)
1628
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
1629
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
1630
- fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
1631
- !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CircularProgressIcon, {}) }),
1632
- fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1339
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
1340
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
1341
+ fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
1342
+ !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CircularProgressIcon, {}) }),
1343
+ fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1633
1344
  HistoryCard,
1634
1345
  {
1635
1346
  transaction,
@@ -1641,30 +1352,30 @@ var History = ({ signer, supportedChains }) => {
1641
1352
  };
1642
1353
 
1643
1354
  // src/components/TxConfigForm/TopBar.tsx
1644
- var import_jsx_runtime26 = require("react/jsx-runtime");
1355
+ var import_jsx_runtime27 = require("react/jsx-runtime");
1645
1356
  var TopBar = ({
1646
1357
  signer,
1647
1358
  setSettingsShown,
1648
1359
  setHistoryTabShown,
1649
1360
  historyTabShown
1650
1361
  }) => {
1651
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full justify-between items-center mx-auto sm:pl-4 pr-8 pt-2", children: [
1652
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
1653
- /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex gap-2", children: [
1654
- !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1362
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full justify-between items-center mx-auto sm:pl-4 pr-8 pt-2", children: [
1363
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
1364
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2", children: [
1365
+ !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1655
1366
  "div",
1656
1367
  {
1657
1368
  onClick: () => setSettingsShown(true),
1658
1369
  className: "flex items-center text-xs gap-1 cursor-pointer",
1659
- children: /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.jsx)(SettingsIcon, {}) })
1370
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)(SettingsIcon, {}) })
1660
1371
  }
1661
1372
  ),
1662
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1373
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1663
1374
  "div",
1664
1375
  {
1665
1376
  onClick: () => setHistoryTabShown((x) => !x),
1666
1377
  className: "flex items-center text-sm gap-1 cursor-pointer",
1667
- children: !historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: "Back" })
1378
+ children: !historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: "Back" })
1668
1379
  }
1669
1380
  )
1670
1381
  ] })
@@ -1673,7 +1384,7 @@ var TopBar = ({
1673
1384
 
1674
1385
  // src/components/TxConfigForm/Settings.tsx
1675
1386
  var import_react4 = require("react");
1676
- var import_jsx_runtime27 = require("react/jsx-runtime");
1387
+ var import_jsx_runtime28 = require("react/jsx-runtime");
1677
1388
  var Settings = ({
1678
1389
  setSlippage,
1679
1390
  setSettingsShown,
@@ -1690,22 +1401,22 @@ var Settings = ({
1690
1401
  );
1691
1402
  }
1692
1403
  }, [slippageActivePresetIndex, usingSlippageInput]);
1693
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute w-[310px] right-0 top-[46px] z-10 bg-black border border-solid border-[rgba(54,129,198,1)] p-4 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-4 justify-between", children: [
1694
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between", children: [
1695
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-base", children: "Settings" }),
1696
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1404
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute w-[310px] right-0 top-[46px] z-10 bg-black border border-solid border-[rgba(54,129,198,1)] p-4 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-4 justify-between", children: [
1405
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex justify-between", children: [
1406
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-base", children: "Settings" }),
1407
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1697
1408
  "div",
1698
1409
  {
1699
1410
  className: "cursor-pointer",
1700
1411
  onClick: () => setSettingsShown(false),
1701
- children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseIcon, {})
1412
+ children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {})
1702
1413
  }
1703
1414
  )
1704
1415
  ] }),
1705
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
1706
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2 items-center", children: [
1707
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
1708
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
1416
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
1417
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-2 items-center", children: [
1418
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
1419
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
1709
1420
  "span",
1710
1421
  {
1711
1422
  className: "inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer",
@@ -1713,8 +1424,8 @@ var Settings = ({
1713
1424
  setExpressChecked((x) => !x);
1714
1425
  },
1715
1426
  children: [
1716
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
1717
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1427
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
1428
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1718
1429
  "span",
1719
1430
  {
1720
1431
  className: `transition-all w-5 h-5 rounded-full absolute translate-y-[-4px]
@@ -1725,15 +1436,15 @@ var Settings = ({
1725
1436
  }
1726
1437
  ) })
1727
1438
  ] }),
1728
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-4", children: [
1729
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoIcon, {}) }),
1730
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-xs text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
1439
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-4", children: [
1440
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoIcon, {}) }),
1441
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-xs text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
1731
1442
  ] })
1732
1443
  ] }),
1733
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-2 ", children: [
1734
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
1735
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2", children: [
1736
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1444
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-2 ", children: [
1445
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
1446
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-2", children: [
1447
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1737
1448
  "div",
1738
1449
  {
1739
1450
  className: `transition-all cursor-pointer block rounded-lg p-2 border-none text-sm leading-[10px] ${index === slippageActivePresetIndex && !usingSlippageInput ? "text-white" : "text-[rgba(255,255,255,0.2)]"} ${index === slippageActivePresetIndex && !usingSlippageInput ? "bg-gradient-to-r from-[#3681c6] to-[#2b4a9d]" : ""}`,
@@ -1745,8 +1456,8 @@ var Settings = ({
1745
1456
  },
1746
1457
  index
1747
1458
  )) }),
1748
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center", children: [
1749
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1459
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center", children: [
1460
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1750
1461
  "input",
1751
1462
  {
1752
1463
  className: "text-white border-none bg-[rgba(39,39,39,1)] w-10 placeholder:text-[rgba(255,255,255,0.2)] focus:outline-none text-sm leading-none",
@@ -1765,16 +1476,16 @@ var Settings = ({
1765
1476
  }
1766
1477
  }
1767
1478
  ),
1768
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PercentageIcon, {})
1479
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PercentageIcon, {})
1769
1480
  ] })
1770
1481
  ] }),
1771
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-4", children: [
1772
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoIcon, {}) }),
1773
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-xs text-left", children: [
1482
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-4", children: [
1483
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoIcon, {}) }),
1484
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-xs text-left", children: [
1774
1485
  "Slippage is the price variation you are willing to accept in the event that the price of the trade changes while it is processing.",
1775
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("br", {}),
1486
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("br", {}),
1776
1487
  " ",
1777
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("br", {}),
1488
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("br", {}),
1778
1489
  "If the trade fails due to too-low slippage, you will receive USDC on the destination chain."
1779
1490
  ] })
1780
1491
  ] })
@@ -1783,7 +1494,7 @@ var Settings = ({
1783
1494
  };
1784
1495
 
1785
1496
  // src/components/TxConfigForm/FeesDetails.tsx
1786
- var import_jsx_runtime28 = require("react/jsx-runtime");
1497
+ var import_jsx_runtime29 = require("react/jsx-runtime");
1787
1498
  var FeesDetails = ({
1788
1499
  isGettingRoute,
1789
1500
  route,
@@ -1794,12 +1505,12 @@ var FeesDetails = ({
1794
1505
  feesDetailsShown,
1795
1506
  setFeesDetailsShown
1796
1507
  }) => {
1797
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1", children: [
1798
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm ", children: [
1799
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
1800
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CoinsIcon, {}),
1801
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mr-1", children: "Fees:" }),
1802
- isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "bg-current rounded animate-pulse w-20 h-4" }) : ` ${weiToHumanReadable({
1508
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1", children: [
1509
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm ", children: [
1510
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
1511
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CoinsIcon, {}),
1512
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mr-1", children: "Fees:" }),
1513
+ isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "bg-current rounded animate-pulse w-20 h-4" }) : ` ${weiToHumanReadable({
1803
1514
  amount: safeBigNumberFrom(
1804
1515
  route?.xSwapFees.xSwapFee.nativeFee || "0"
1805
1516
  ).add(safeBigNumberFrom(route?.xSwapFees.ccipFee || "0")).add(
@@ -1809,30 +1520,30 @@ var FeesDetails = ({
1809
1520
  precisionFractionalPlaces: 5
1810
1521
  })} ${paymentToken?.symbol}`
1811
1522
  ] }),
1812
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-1 items-center", children: [
1813
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
1523
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-1 items-center", children: [
1524
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
1814
1525
  "div",
1815
1526
  {
1816
1527
  className: `flex gap-1 items-center font-medium ${expressChecked ? "text-x_green" : "text-white opacity-60"}`,
1817
1528
  children: [
1818
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimerIcon, {}),
1529
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TimerIcon, {}),
1819
1530
  expressChecked ? "Fast ~ 30sec " : "Normal ~ 30min"
1820
1531
  ]
1821
1532
  }
1822
1533
  ),
1823
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1534
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
1824
1535
  "div",
1825
1536
  {
1826
1537
  onClick: () => setFeesDetailsShown((x) => !x),
1827
1538
  className: "font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]",
1828
- children: feesDetailsShown ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronDownIcon, {})
1539
+ children: feesDetailsShown ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronDownIcon, {})
1829
1540
  }
1830
1541
  )
1831
1542
  ] })
1832
1543
  ] }),
1833
- feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center justify-between ", children: [
1834
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
1835
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1544
+ feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center justify-between ", children: [
1545
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
1546
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1836
1547
  "CCIP Fee:",
1837
1548
  ` ${weiToHumanReadable({
1838
1549
  amount: route?.xSwapFees.ccipFee || "0",
@@ -1840,7 +1551,7 @@ var FeesDetails = ({
1840
1551
  precisionFractionalPlaces: 5
1841
1552
  })} ${paymentToken?.symbol}`
1842
1553
  ] }),
1843
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1554
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1844
1555
  "Native Fee:",
1845
1556
  ` ${weiToHumanReadable({
1846
1557
  amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
@@ -1849,12 +1560,12 @@ var FeesDetails = ({
1849
1560
  })} ${paymentToken?.symbol}`
1850
1561
  ] })
1851
1562
  ] }),
1852
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
1853
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1563
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
1564
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1854
1565
  "Slippage: ",
1855
1566
  `${slippage}%`
1856
1567
  ] }),
1857
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1568
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1858
1569
  "Min amount out:",
1859
1570
  " ",
1860
1571
  weiToHumanReadable({
@@ -1875,7 +1586,7 @@ var import_react6 = require("react");
1875
1586
 
1876
1587
  // src/components/TxConfigForm/UsdPrice.tsx
1877
1588
  var import_react5 = require("react");
1878
- var import_jsx_runtime29 = require("react/jsx-runtime");
1589
+ var import_jsx_runtime30 = require("react/jsx-runtime");
1879
1590
  var UsdPrice = ({
1880
1591
  prices,
1881
1592
  token,
@@ -1888,11 +1599,11 @@ var UsdPrice = ({
1888
1599
  setUsdPrice((Number(amount) * Number(prices[token.address])).toFixed(2));
1889
1600
  }
1890
1601
  }, [token, prices, amount]);
1891
- return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: "$0.00" }) });
1602
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: "$0.00" }) });
1892
1603
  };
1893
1604
 
1894
1605
  // src/components/TxConfigForm/Summary.tsx
1895
- var import_jsx_runtime30 = require("react/jsx-runtime");
1606
+ var import_jsx_runtime31 = require("react/jsx-runtime");
1896
1607
  var Summary = ({
1897
1608
  isGettingRoute,
1898
1609
  route,
@@ -1915,32 +1626,32 @@ var Summary = ({
1915
1626
  );
1916
1627
  }
1917
1628
  }, [dstChain]);
1918
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
1919
- /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex justify-between", children: [
1920
- /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1", children: [
1921
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
1922
- isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
1629
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
1630
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between", children: [
1631
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-1", children: [
1632
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
1633
+ isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1923
1634
  Skeleton,
1924
1635
  {
1925
1636
  width: "w-[100px]",
1926
1637
  height: "h-[36px]",
1927
1638
  other: "sm:w-[190px]"
1928
1639
  }
1929
- ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: [
1640
+ ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: [
1930
1641
  amountReadable,
1931
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-4 sm:w-6 h-4 sm:h-6", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: dstToken?.image, alt: dstToken?.name }) }),
1932
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
1642
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-4 sm:w-6 h-4 sm:h-6", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: dstToken?.image, alt: dstToken?.name }) }),
1643
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
1933
1644
  ] })
1934
1645
  ] }),
1935
- /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1 text-sm", children: [
1936
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on chain:" }),
1937
- /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-1 text-white", children: [
1938
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-4 h-4", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
1939
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: dstChain?.displayName })
1646
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-1 text-sm", children: [
1647
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on chain:" }),
1648
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1 text-white", children: [
1649
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-4 h-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
1650
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: dstChain?.displayName })
1940
1651
  ] })
1941
1652
  ] })
1942
1653
  ] }),
1943
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
1654
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1944
1655
  UsdPrice,
1945
1656
  {
1946
1657
  prices,
@@ -1949,7 +1660,7 @@ var Summary = ({
1949
1660
  loading: isGettingRoute
1950
1661
  }
1951
1662
  ),
1952
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute right-[50%] top-0 translate-x-1/2 translate-y-[-60%] globalBorder rounded-xl p-[5px] bg-[rgba(15,15,15,1)]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: " flex items-center justify-center rounded-lg w-8 h-8 bg-gradient-to-l from-[rgba(54,129,198,1)] to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArrowDownIcon, {}) }) })
1663
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute right-[50%] top-0 translate-x-1/2 translate-y-[-60%] globalBorder rounded-xl p-[5px] bg-[rgba(15,15,15,1)]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: " flex items-center justify-center rounded-lg w-8 h-8 bg-gradient-to-l from-[rgba(54,129,198,1)] to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowDownIcon, {}) }) })
1953
1664
  ] });
1954
1665
  };
1955
1666
 
@@ -1959,7 +1670,7 @@ var import_react9 = require("react");
1959
1670
  // src/components/TxConfigForm/TokenPicker.tsx
1960
1671
  var import_react7 = require("react");
1961
1672
  var import_react_dom = require("react-dom");
1962
- var import_jsx_runtime31 = require("react/jsx-runtime");
1673
+ var import_jsx_runtime32 = require("react/jsx-runtime");
1963
1674
  var TokenPicker = ({
1964
1675
  onCloseClick,
1965
1676
  tokens,
@@ -1986,24 +1697,24 @@ var TokenPicker = ({
1986
1697
  );
1987
1698
  }, [searchValue, tokens]);
1988
1699
  return modalRoot ? (0, import_react_dom.createPortal)(
1989
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1700
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
1990
1701
  "div",
1991
1702
  {
1992
1703
  onClick: onBackdropClick,
1993
1704
  className: "box-border fixed h-full w-full z-[999] top-0 left-0 bg-[rgba(0,0,0,0.8)] flex items-center justify-center p-5",
1994
- children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative bg-black rounded-3xl p-6 max-h-[70%] flex flex-col text-base text-white w-[452px] h-[70%] border border-solid border-[rgba(255,255,255,0.2)]", children: [
1995
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1705
+ children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative bg-black rounded-3xl p-6 max-h-[70%] flex flex-col text-base text-white w-[452px] h-[70%] border border-solid border-[rgba(255,255,255,0.2)]", children: [
1706
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
1996
1707
  "div",
1997
1708
  {
1998
1709
  onClick: onCloseClick,
1999
1710
  className: "absolute top-4 right-4 cursor-pointer",
2000
- children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseIcon, {})
1711
+ children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CloseIcon, {})
2001
1712
  }
2002
1713
  ),
2003
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-base mb-4", children: "Pick a token" }),
2004
- /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center border border-solid border-[rgba(255,255,255,0.1)] rounded-lg py-0 px-3 gap-2 bg-[rgba(15,15,15,1)]", children: [
2005
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SearchIcon, {}) }),
2006
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1714
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-base mb-4", children: "Pick a token" }),
1715
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center border border-solid border-[rgba(255,255,255,0.1)] rounded-lg py-0 px-3 gap-2 bg-[rgba(15,15,15,1)]", children: [
1716
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SearchIcon, {}) }),
1717
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
2007
1718
  "input",
2008
1719
  {
2009
1720
  placeholder: "Search name or paste address",
@@ -2013,7 +1724,7 @@ var TokenPicker = ({
2013
1724
  }
2014
1725
  )
2015
1726
  ] }),
2016
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
1727
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
2017
1728
  "div",
2018
1729
  {
2019
1730
  className: `flex gap-2 py-1 px-2 items-center bg-[rgb(15,15,15)] rounded-2xl border border-solid border-[rgba(255,255,255,0.1)] hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35, 35, 35)]" : ""}`,
@@ -2022,14 +1733,14 @@ var TokenPicker = ({
2022
1733
  onCloseClick();
2023
1734
  },
2024
1735
  children: [
2025
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: token.image, alt: token.name, className: "w-5" }),
2026
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-sm", children: token.symbol })
1736
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: token.image, alt: token.name, className: "w-5" }),
1737
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-sm", children: token.symbol })
2027
1738
  ]
2028
1739
  },
2029
1740
  token.address
2030
1741
  )) }),
2031
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
2032
- /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsxs)(
1742
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
1743
+ /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsxs)(
2033
1744
  "div",
2034
1745
  {
2035
1746
  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)]" : ""}`,
@@ -2038,29 +1749,29 @@ var TokenPicker = ({
2038
1749
  onCloseClick();
2039
1750
  },
2040
1751
  children: [
2041
- token.image ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1752
+ token.image ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
2042
1753
  "img",
2043
1754
  {
2044
1755
  src: token.image,
2045
1756
  alt: token.name,
2046
1757
  className: "token-picker__all__logo"
2047
1758
  }
2048
- ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
2049
- /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
2050
- /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col leading-[16px]", children: [
2051
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
2052
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-[#888] text-[11px]", children: token.symbol })
1759
+ ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
1760
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
1761
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col leading-[16px]", children: [
1762
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
1763
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-[#888] text-[11px]", children: token.symbol })
2053
1764
  ] }),
2054
- signer && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs", children: weiToHumanReadable({
1765
+ signer && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-xs", children: weiToHumanReadable({
2055
1766
  amount: balances[token.address]?.toString() || "0",
2056
1767
  decimals: token.decimals,
2057
1768
  precisionFractionalPlaces: 4
2058
- }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { width: "w-12", height: "h-3" }) })
1769
+ }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { width: "w-12", height: "h-3" }) })
2059
1770
  ] })
2060
1771
  ]
2061
1772
  },
2062
1773
  `${index}_${token.address}`
2063
- )) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
1774
+ )) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
2064
1775
  ] })
2065
1776
  }
2066
1777
  ),
@@ -2069,7 +1780,7 @@ var TokenPicker = ({
2069
1780
  };
2070
1781
 
2071
1782
  // src/components/TxConfigForm/ChainListElement.tsx
2072
- var import_jsx_runtime32 = require("react/jsx-runtime");
1783
+ var import_jsx_runtime33 = require("react/jsx-runtime");
2073
1784
  var ChainListElement = ({
2074
1785
  chain,
2075
1786
  setSrcChain,
@@ -2077,8 +1788,8 @@ var ChainListElement = ({
2077
1788
  index,
2078
1789
  length
2079
1790
  }) => {
2080
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
2081
- /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
1791
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
1792
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
2082
1793
  "li",
2083
1794
  {
2084
1795
  className: "bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full",
@@ -2087,19 +1798,19 @@ var ChainListElement = ({
2087
1798
  setChainListShown(false);
2088
1799
  },
2089
1800
  children: [
2090
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
1801
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
2091
1802
  chain.displayName
2092
1803
  ]
2093
1804
  }
2094
1805
  ),
2095
- index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
1806
+ index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
2096
1807
  ] }, `${chain.ecosystem}-${chain.chainId}`);
2097
1808
  };
2098
1809
 
2099
1810
  // src/components/TxConfigForm/BalanceComponent.tsx
2100
1811
  var import_react8 = require("react");
2101
1812
  var import_bignumber3 = __toESM(require("bignumber.js"));
2102
- var import_jsx_runtime33 = require("react/jsx-runtime");
1813
+ var import_jsx_runtime34 = require("react/jsx-runtime");
2103
1814
  var BalanceComponent = ({ srcToken, balances }) => {
2104
1815
  const balanceText = (0, import_react8.useMemo)(() => {
2105
1816
  if (!balances || !srcToken) return "0";
@@ -2119,7 +1830,7 @@ var BalanceComponent = ({ srcToken, balances }) => {
2119
1830
  precisionFractionalPlaces: 5
2120
1831
  });
2121
1832
  }, [srcToken, balances]);
2122
- return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
1833
+ return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
2123
1834
  "Balance:",
2124
1835
  " ",
2125
1836
  srcToken && balances ? weiToHumanReadable({
@@ -2127,12 +1838,12 @@ var BalanceComponent = ({ srcToken, balances }) => {
2127
1838
  decimals: srcToken.decimals,
2128
1839
  precisionFractionalPlaces: 4
2129
1840
  }) : 0,
2130
- /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
1841
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
2131
1842
  ] });
2132
1843
  };
2133
1844
 
2134
1845
  // src/components/TxConfigForm/SwapPanel.tsx
2135
- var import_jsx_runtime34 = require("react/jsx-runtime");
1846
+ var import_jsx_runtime35 = require("react/jsx-runtime");
2136
1847
  var SwapPanel = ({
2137
1848
  amount,
2138
1849
  setAmount,
@@ -2177,11 +1888,11 @@ var SwapPanel = ({
2177
1888
  () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
2178
1889
  [supportedChains, srcChain]
2179
1890
  );
2180
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
2181
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
2182
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-1", children: [
2183
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
2184
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1891
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
1892
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
1893
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-1", children: [
1894
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
1895
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2185
1896
  "input",
2186
1897
  {
2187
1898
  className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
@@ -2200,7 +1911,7 @@ var SwapPanel = ({
2200
1911
  }
2201
1912
  )
2202
1913
  ] }),
2203
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1914
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2204
1915
  UsdPrice,
2205
1916
  {
2206
1917
  prices,
@@ -2210,8 +1921,8 @@ var SwapPanel = ({
2210
1921
  }
2211
1922
  ) })
2212
1923
  ] }),
2213
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
2214
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
1924
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
1925
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
2215
1926
  "div",
2216
1927
  {
2217
1928
  className: "flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap",
@@ -2219,7 +1930,7 @@ var SwapPanel = ({
2219
1930
  setTokenListShown((state) => !state);
2220
1931
  },
2221
1932
  children: [
2222
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1933
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2223
1934
  "img",
2224
1935
  {
2225
1936
  height: 16,
@@ -2228,12 +1939,12 @@ var SwapPanel = ({
2228
1939
  alt: srcToken?.name
2229
1940
  }
2230
1941
  ),
2231
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: srcToken?.symbol }),
2232
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DownArrowIcon, {})
1942
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: srcToken?.symbol }),
1943
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownArrowIcon, {})
2233
1944
  ]
2234
1945
  }
2235
1946
  ),
2236
- tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1947
+ tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2237
1948
  TokenPicker,
2238
1949
  {
2239
1950
  onCloseClick: () => setTokenListShown(false),
@@ -2244,22 +1955,22 @@ var SwapPanel = ({
2244
1955
  balances
2245
1956
  }
2246
1957
  ),
2247
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1958
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2248
1959
  "div",
2249
1960
  {
2250
1961
  onClick: handleMaxClick,
2251
1962
  className: "flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer",
2252
- children: signer && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(BalanceComponent, { balances, srcToken })
1963
+ children: signer && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BalanceComponent, { balances, srcToken })
2253
1964
  }
2254
1965
  ),
2255
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
1966
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
2256
1967
  "div",
2257
1968
  {
2258
1969
  ref: buttonRef,
2259
1970
  className: "bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2",
2260
1971
  onClick: () => setChainListShown((prev) => !prev),
2261
1972
  children: [
2262
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1973
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2263
1974
  "img",
2264
1975
  {
2265
1976
  width: "16",
@@ -2268,17 +1979,17 @@ var SwapPanel = ({
2268
1979
  alt: srcChain?.name
2269
1980
  }
2270
1981
  ),
2271
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: srcChain?.displayName }),
2272
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DownArrowIcon, {})
1982
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: srcChain?.displayName }),
1983
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownArrowIcon, {})
2273
1984
  ]
2274
1985
  }
2275
1986
  ),
2276
- chainListShown && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1987
+ chainListShown && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2277
1988
  "ul",
2278
1989
  {
2279
1990
  ref: listRef,
2280
1991
  className: "bg-black globalBorder rounded-lg whitespace-nowrap z-1 right-0 top-10 px-2 max-w-full max-h-[40vh] overflow-auto absolute text-sm z-20",
2281
- children: chainListOptions.map((chain, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1992
+ children: chainListOptions.map((chain, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2282
1993
  ChainListElement,
2283
1994
  {
2284
1995
  index,
@@ -2295,9 +2006,9 @@ var SwapPanel = ({
2295
2006
  };
2296
2007
 
2297
2008
  // src/components/TxConfigForm/ErrorField.tsx
2298
- var import_jsx_runtime35 = require("react/jsx-runtime");
2009
+ var import_jsx_runtime36 = require("react/jsx-runtime");
2299
2010
  var ErrorField = ({ error }) => {
2300
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2011
+ return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
2301
2012
  "div",
2302
2013
  {
2303
2014
  className: `flex justify-center mb-1 items-center w-full rounded-2xl bg-x_error_background border border-solid ${error.length > 0 ? "border-x_error_border" : "border-transparent"}`,
@@ -2307,15 +2018,15 @@ var ErrorField = ({ error }) => {
2307
2018
  };
2308
2019
 
2309
2020
  // src/components/TxConfigForm/Description.tsx
2310
- var import_jsx_runtime36 = require("react/jsx-runtime");
2021
+ var import_jsx_runtime37 = require("react/jsx-runtime");
2311
2022
  var Description = ({ description }) => {
2312
- return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
2023
+ return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
2313
2024
  };
2314
2025
 
2315
2026
  // src/components/TxConfigForm/Button.tsx
2316
- var import_jsx_runtime37 = require("react/jsx-runtime");
2027
+ var import_jsx_runtime38 = require("react/jsx-runtime");
2317
2028
  var Button = ({ children, onClick, type, disabled }) => {
2318
- return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
2029
+ return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2319
2030
  "button",
2320
2031
  {
2321
2032
  className: "text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25",
@@ -2328,7 +2039,7 @@ var Button = ({ children, onClick, type, disabled }) => {
2328
2039
  };
2329
2040
 
2330
2041
  // src/components/TxConfigForm/Form.tsx
2331
- var import_jsx_runtime38 = require("react/jsx-runtime");
2042
+ var import_jsx_runtime39 = require("react/jsx-runtime");
2332
2043
  var Form = ({
2333
2044
  dstChainId,
2334
2045
  dstTokenAddr,
@@ -2393,7 +2104,7 @@ var Form = ({
2393
2104
  `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`
2394
2105
  );
2395
2106
  getRoute({
2396
- fromAmount: import_ethers5.ethers.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
2107
+ fromAmount: import_ethers4.ethers.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
2397
2108
  fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
2398
2109
  fromChain: srcChain.chainId,
2399
2110
  fromToken: srcToken.address,
@@ -2427,7 +2138,7 @@ var Form = ({
2427
2138
  if (srcChain) {
2428
2139
  setPaymentToken(
2429
2140
  srcChain.tokens.find(
2430
- (token) => token.address.toLowerCase() === import_ethers5.ethers.constants.AddressZero.toLowerCase()
2141
+ (token) => token.address.toLowerCase() === import_ethers4.ethers.constants.AddressZero.toLowerCase()
2431
2142
  )
2432
2143
  );
2433
2144
  }
@@ -2458,13 +2169,13 @@ var Form = ({
2458
2169
  const handleSwitchChain = async () => {
2459
2170
  await switchChainAsync({ chainId: Number(srcChain?.chainId) });
2460
2171
  };
2461
- return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
2172
+ return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
2462
2173
  "form",
2463
2174
  {
2464
2175
  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",
2465
2176
  onSubmit: handleSubmit,
2466
2177
  children: [
2467
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2178
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2468
2179
  TopBar,
2469
2180
  {
2470
2181
  signer,
@@ -2473,7 +2184,7 @@ var Form = ({
2473
2184
  setSettingsShown
2474
2185
  }
2475
2186
  ),
2476
- settingsShown && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2187
+ settingsShown && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2477
2188
  Settings,
2478
2189
  {
2479
2190
  expressChecked,
@@ -2483,9 +2194,9 @@ var Form = ({
2483
2194
  setSlippage
2484
2195
  }
2485
2196
  ),
2486
- historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-2", children: [
2487
- desc && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Description, { description: desc }),
2488
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2197
+ historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-2", children: [
2198
+ desc && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Description, { description: desc }),
2199
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2489
2200
  SwapPanel,
2490
2201
  {
2491
2202
  amount,
@@ -2500,7 +2211,7 @@ var Form = ({
2500
2211
  setSrcChain
2501
2212
  }
2502
2213
  ),
2503
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2214
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2504
2215
  Summary,
2505
2216
  {
2506
2217
  isGettingRoute,
@@ -2509,7 +2220,7 @@ var Form = ({
2509
2220
  dstChain
2510
2221
  }
2511
2222
  ),
2512
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2223
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2513
2224
  FeesDetails,
2514
2225
  {
2515
2226
  route,
@@ -2522,8 +2233,8 @@ var Form = ({
2522
2233
  setFeesDetailsShown
2523
2234
  }
2524
2235
  ),
2525
- formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ErrorField, { error: formError }),
2526
- signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2236
+ formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ErrorField, { error: formError }),
2237
+ signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2527
2238
  Button,
2528
2239
  {
2529
2240
  type: "submit",
@@ -2537,11 +2248,8 @@ var Form = ({
2537
2248
  );
2538
2249
  };
2539
2250
 
2540
- // package.json
2541
- var version = "0.2.1";
2542
-
2543
2251
  // src/components/TxConfigForm/index.tsx
2544
- var import_jsx_runtime39 = require("react/jsx-runtime");
2252
+ var import_jsx_runtime40 = require("react/jsx-runtime");
2545
2253
  var TxConfigForm = ({
2546
2254
  dstChainId,
2547
2255
  dstTokenAddr,
@@ -2563,13 +2271,13 @@ var TxConfigForm = ({
2563
2271
  () => getWagmiConfig(supportedChains),
2564
2272
  supportedChains
2565
2273
  );
2566
- return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2274
+ return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2567
2275
  "div",
2568
2276
  {
2569
2277
  className: "top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex items-center justify-center z-10",
2570
2278
  onClick: onBackdropClick,
2571
- children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
2572
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2279
+ children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
2280
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2573
2281
  Form,
2574
2282
  {
2575
2283
  dstChainId,
@@ -2580,20 +2288,15 @@ var TxConfigForm = ({
2580
2288
  onSubmit
2581
2289
  }
2582
2290
  ),
2583
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2291
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2584
2292
  "div",
2585
2293
  {
2586
2294
  className: "absolute top-7 right-4 cursor-pointer text-white",
2587
2295
  onClick: onClose,
2588
- children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CloseIcon, {})
2296
+ children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CloseIcon, {})
2589
2297
  }
2590
2298
  ),
2591
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "swappage__poweredby", children: [
2592
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Powered by" }),
2593
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(XSwapBadgeIcon, {}),
2594
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "\u2715" }),
2595
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChainlinkCCIPIcon, {})
2596
- ] })
2299
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PoweredBy, {})
2597
2300
  ] })
2598
2301
  }
2599
2302
  ) }) });
@@ -2608,7 +2311,7 @@ var openTxConfigForm = async ({
2608
2311
  try {
2609
2312
  return await new Promise((resolve) => {
2610
2313
  xswapRoot.render(
2611
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2314
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2612
2315
  TxConfigForm,
2613
2316
  {
2614
2317
  dstChainId,
@@ -2631,24 +2334,11 @@ var openTxConfigForm = async ({
2631
2334
  throw new Error(`XSwap component error, ${err}`);
2632
2335
  }
2633
2336
  };
2634
- var xswapRoot;
2635
- if (typeof document !== "undefined") {
2636
- const xswapStyleElement = document.createElement("link");
2637
- xswapStyleElement.rel = "stylesheet";
2638
- xswapStyleElement.type = "text/css";
2639
- xswapStyleElement.href = `${xswap_config_default.apiUrl}/sdk/css?data={"version": "${version}"}`;
2640
- document.head.appendChild(xswapStyleElement);
2641
- const xswapModalElement = document.createElement("div");
2642
- xswapModalElement.setAttribute("id", "xswap-modal");
2643
- document.body.appendChild(xswapModalElement);
2644
- xswapRoot = (0, import_client.createRoot)(xswapModalElement);
2645
- }
2646
2337
 
2647
- // src/components/TxHistoryButton/index.tsx
2338
+ // src/components/TxStatusButton/index.tsx
2648
2339
  var import_react12 = require("react");
2649
- var import_client2 = require("react-dom/client");
2650
- var import_jsx_runtime40 = require("react/jsx-runtime");
2651
- var TxHistoryButton = ({ transaction }) => {
2340
+ var import_jsx_runtime41 = require("react/jsx-runtime");
2341
+ var TxStatusButton = ({ transaction }) => {
2652
2342
  const {
2653
2343
  fromChain,
2654
2344
  fromChainImage,
@@ -2670,15 +2360,15 @@ var TxHistoryButton = ({ transaction }) => {
2670
2360
  () => isDone ? "border border-solid border-x_green_dark" : "border border-solid border-x_blue_dark",
2671
2361
  [isDone]
2672
2362
  );
2673
- return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
2674
- isWide && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
2363
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
2364
+ isWide && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
2675
2365
  "div",
2676
2366
  {
2677
2367
  className: `flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl ${background} ${border}`,
2678
2368
  children: [
2679
- /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
2680
- /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
2681
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2369
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
2370
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
2371
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2682
2372
  "img",
2683
2373
  {
2684
2374
  className: "w-5 h-5",
@@ -2686,16 +2376,16 @@ var TxHistoryButton = ({ transaction }) => {
2686
2376
  alt: "source chain"
2687
2377
  }
2688
2378
  ),
2689
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromChain }),
2690
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowRightIcon, {}) }),
2691
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
2692
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: toChain })
2379
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: fromChain }),
2380
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowRightIcon, {}) }),
2381
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
2382
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: toChain })
2693
2383
  ] }),
2694
- /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
2695
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: "Sent" }),
2696
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromAmount }),
2697
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromToken }),
2698
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2384
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
2385
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: "Sent" }),
2386
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: fromAmount }),
2387
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: fromToken }),
2388
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2699
2389
  "img",
2700
2390
  {
2701
2391
  className: "w-5 h-5",
@@ -2705,7 +2395,7 @@ var TxHistoryButton = ({ transaction }) => {
2705
2395
  )
2706
2396
  ] })
2707
2397
  ] }),
2708
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2398
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2709
2399
  "a",
2710
2400
  {
2711
2401
  href: explorer,
@@ -2713,21 +2403,21 @@ var TxHistoryButton = ({ transaction }) => {
2713
2403
  rel: "noreferrer",
2714
2404
  className: "no-underline cursor-pointer",
2715
2405
  "aria-label": "Show the transaction in the chain explorer",
2716
- children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowUpRightIcon, {}) })
2406
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowUpRightIcon, {}) })
2717
2407
  }
2718
2408
  )
2719
2409
  ]
2720
2410
  }
2721
2411
  ),
2722
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2412
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2723
2413
  "div",
2724
2414
  {
2725
2415
  className: `text-white rounded-xl cursor-pointer ${background} ${border}`,
2726
- children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
2727
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowLeftIcon, {}),
2728
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
2729
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(XSwapLogo, {}) }),
2730
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CircularProgressIcon, {}) })
2416
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
2417
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowLeftIcon, {}),
2418
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
2419
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(XSwapLogo, {}) }),
2420
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CircularProgressIcon, {}) })
2731
2421
  ] }) })
2732
2422
  ] })
2733
2423
  }
@@ -2753,79 +2443,160 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
2753
2443
  transaction.isDone = true;
2754
2444
  }
2755
2445
  };
2756
- var historyElement = document.createElement("div");
2757
- historyElement.setAttribute("id", "xswap-history");
2758
- historyElement.setAttribute(
2759
- "class",
2760
- "absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50"
2761
- );
2762
- document.body.appendChild(historyElement);
2763
- var txHistoryButtonRoot = (0, import_client2.createRoot)(historyElement);
2764
- var renderTxHistoryButtons = () => {
2765
- const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TxHistoryButton, { transaction: item }, item.txHash));
2766
- txHistoryButtonRoot.render(buttons);
2446
+ var renderTxStatusButtons = () => {
2447
+ const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TxStatusButton, { transaction: item }, item.txHash));
2448
+ txStatusRoot.render(buttons);
2767
2449
  };
2768
2450
 
2769
2451
  // src/components/Skeleton/index.tsx
2770
- var import_jsx_runtime41 = require("react/jsx-runtime");
2452
+ var import_jsx_runtime42 = require("react/jsx-runtime");
2771
2453
  var Skeleton = ({ width, height }) => {
2772
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
2454
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
2455
+ };
2456
+
2457
+ // src/services/integrations/monitoring.ts
2458
+ var import_async_retry = __toESM(require("async-retry"));
2459
+ var monitorTransactionStatus = async (txChainId, txHash) => {
2460
+ const txReceipt = await getTxReceipt(txChainId, txHash);
2461
+ const supportedChains = (await getChains()).filter(
2462
+ ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
2463
+ );
2464
+ const messageSentEvent = txReceipt.logs?.find((log) => {
2465
+ return log.topics[0] === import_ethers5.ethers.utils.id(MSG_SENT_EVENT_SIG);
2466
+ });
2467
+ if (!messageSentEvent) {
2468
+ throw new Error(
2469
+ `No transaction event found for chain ${txChainId} tx ${txHash}`
2470
+ );
2471
+ }
2472
+ const messageId = messageSentEvent?.topics[1];
2473
+ const iface = new import_ethers5.ethers.utils.Interface(MSG_SENT_EVENT_ABI);
2474
+ const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
2475
+ if (!decodedMessageSentEvent) {
2476
+ throw new Error(
2477
+ `No transaction event arguments found for chain ${txChainId} tx ${txHash}`
2478
+ );
2479
+ }
2480
+ const srcChain = supportedChains.find(
2481
+ (chain) => chain.chainId === txChainId.toString()
2482
+ );
2483
+ const srcToken = srcChain?.tokens.find(
2484
+ (token) => token.address === decodedMessageSentEvent.args?.token.toString()
2485
+ );
2486
+ const dstChain = supportedChains.find(
2487
+ (chain) => chain.ccipChainId === decodedMessageSentEvent.args?.destinationChainSelector?.toString()
2488
+ );
2489
+ const dstChainId = dstChain?.chainId;
2490
+ if (!dstChainId) {
2491
+ throw new Error(`Unknown destination chain!`);
2492
+ }
2493
+ const transaction = {
2494
+ txHash,
2495
+ fromChain: srcChain?.displayName,
2496
+ fromChainImage: srcChain?.image,
2497
+ toChain: dstChain.displayName,
2498
+ toChainImage: dstChain.image,
2499
+ fromToken: srcToken?.symbol,
2500
+ fromTokenImage: srcToken?.image,
2501
+ fromAmount: weiToHumanReadable({
2502
+ amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
2503
+ decimals: srcToken?.decimals || 18,
2504
+ precisionFractionalPlaces: 4
2505
+ }),
2506
+ isDone: false,
2507
+ explorer: `${CCIP_EXPLORER}/tx/${txHash}`
2508
+ };
2509
+ addTransactionToRenderedTransactions(transaction);
2510
+ renderTxStatusButtons();
2511
+ const xSwapRouterOnDestinationAddress = ADDRESSES[dstChainId]?.XSwapRouter;
2512
+ if (!xSwapRouterOnDestinationAddress) {
2513
+ throw new Error(`Unknown destination XSwapRouter!`);
2514
+ }
2515
+ const xSwapRouterOnDestination = new import_ethers5.ethers.Contract(
2516
+ xSwapRouterOnDestinationAddress,
2517
+ MSG_RECEIVED_EVENT_ABI,
2518
+ import_ethers5.ethers.getDefaultProvider(
2519
+ supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
2520
+ )
2521
+ );
2522
+ const msgReceivedEventFilter = {
2523
+ address: xSwapRouterOnDestinationAddress,
2524
+ topics: [import_ethers5.ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
2525
+ };
2526
+ const onSuccess = async () => {
2527
+ updateTransactionDoneInRenderedTransactions(txHash);
2528
+ renderTxStatusButtons();
2529
+ await new Promise(
2530
+ (resolve) => setTimeout(() => resolve(true), TX_RECEIPT_STATUS_LIFETIME)
2531
+ );
2532
+ removeTransactionFromRenderedTransactions(txHash);
2533
+ renderTxStatusButtons();
2534
+ };
2535
+ xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
2536
+ };
2537
+ var getTxReceipt = async (txChainId, txHash) => {
2538
+ try {
2539
+ const chain = (await getChains()).find(
2540
+ (chain2) => chain2.chainId === txChainId
2541
+ );
2542
+ const provider = new import_ethers5.ethers.providers.JsonRpcProvider(
2543
+ chain?.publicRpcUrls[0]
2544
+ );
2545
+ return await (0, import_async_retry.default)(async () => {
2546
+ const txReceipt = await provider.getTransactionReceipt(txHash);
2547
+ if (!txReceipt) {
2548
+ throw new Error(`Couldn't fetch tx receipt`);
2549
+ }
2550
+ return txReceipt;
2551
+ });
2552
+ } catch (e) {
2553
+ throw new Error(
2554
+ `Couldn't fetch tx ${txHash} receipt on chain ${txChainId}`
2555
+ );
2556
+ }
2557
+ };
2558
+
2559
+ // src/services/integrations/transactions.ts
2560
+ var getSwapTx = async ({
2561
+ dstChain,
2562
+ dstToken,
2563
+ customContractCalls = [],
2564
+ desc
2565
+ }) => {
2566
+ const supportedChains = (await getChains()).filter(
2567
+ ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
2568
+ );
2569
+ validateSwapTxData(supportedChains, dstChain, dstToken);
2570
+ const route = await openTxConfigForm({
2571
+ dstChainId: dstChain,
2572
+ dstTokenAddr: dstToken,
2573
+ customContractCalls,
2574
+ desc,
2575
+ supportedChains
2576
+ });
2577
+ return route.transactions;
2578
+ };
2579
+ var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
2580
+ const supportedDstChain = supportedChains.find(
2581
+ ({ chainId }) => chainId === dstChain
2582
+ );
2583
+ if (!supportedDstChain) {
2584
+ throw new Error(`Provided chain '${dstChain}' is not supported`);
2585
+ }
2586
+ if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
2587
+ throw new Error(`Provided token '${dstToken}' is not supported`);
2588
+ }
2773
2589
  };
2590
+
2591
+ // src/index.ts
2592
+ initDocument();
2774
2593
  // Annotate the CommonJS export names for ESM import in node:
2775
2594
  0 && (module.exports = {
2776
- ADDRESSES,
2777
- Alert,
2778
- BALANCES_CHUNK_SIZE,
2779
- BatchQueryAbi,
2780
- CCIP_EXPLORER,
2781
2595
  ContractName,
2782
- DEFAULT_ECOSYSTEM,
2783
- DEFAULT_SOURCE_CHAIN_ID,
2784
- DELIVERY_TIME,
2785
- ERC20Abi,
2786
- EXPRESS_DELIVERY_TIME,
2787
2596
  Ecosystem,
2788
2597
  Environment,
2789
- IERC20,
2790
- MINIMUM_DISPLAYED_TOKEN_AMOUNT,
2791
- MSG_RECEIVED_EVENT_ABI,
2792
- MSG_RECEIVED_EVENT_SIG,
2793
- MSG_SENT_EVENT_ABI,
2794
- MSG_SENT_EVENT_SIG,
2795
- NUMBER_INPUT_REGEX,
2796
- ROUTE_TIMEOUT_MS,
2797
- SLIPPAGE_PRESETS,
2798
- Skeleton,
2799
- TX_RECEIPT_STATUS_LIFETIME,
2800
- TxHistoryButton,
2801
2598
  Web3Environment,
2802
2599
  XSwapCallType,
2803
- addTransactionToRenderedTransactions,
2804
- chunkArray,
2805
- deepMergeObjects,
2806
- findPlaceholderIndex,
2807
- generateApproveTxData,
2808
- generateRandomBigNumber,
2809
- generateStakingCalls,
2810
- generateUniqueRandomBigNumber,
2811
- getBalanceOf,
2812
- getBalances,
2813
- getBridgeTokens,
2814
- getChainData,
2815
- getChains,
2816
- getDate,
2817
- getHistory,
2818
- getPrices,
2819
- getRoute,
2820
2600
  getSwapTx,
2821
- getTokens,
2822
- monitorTransactionStatus,
2823
- openTxConfigForm,
2824
- removeTransactionFromRenderedTransactions,
2825
- renderTxHistoryButtons,
2826
- replaceNull,
2827
- safeBigNumberFrom,
2828
- shortAddress,
2829
- updateTransactionDoneInRenderedTransactions,
2830
- weiToHumanReadable
2601
+ monitorTransactionStatus
2831
2602
  });