@xswap-link/sdk 0.2.1 → 0.2.3

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.
Files changed (17) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.css +19 -12
  3. package/dist/index.d.mts +2 -177
  4. package/dist/index.d.ts +2 -177
  5. package/dist/index.js +530 -756
  6. package/dist/index.mjs +528 -706
  7. package/package.json +1 -1
  8. package/src/components/TxConfigForm/PoweredBy.tsx +12 -0
  9. package/src/components/TxConfigForm/index.tsx +3 -27
  10. package/src/components/{TxHistoryButton → TxStatusButton}/index.tsx +7 -15
  11. package/src/components/global.css +4 -0
  12. package/src/components/index.ts +1 -1
  13. package/src/config/index.ts +1 -0
  14. package/src/config/init.ts +35 -0
  15. package/src/index.ts +6 -6
  16. package/src/services/integrations/monitoring.ts +4 -4
  17. package/tailwind.config.js +1 -0
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,76 @@ var xswap_config_default = {
179
57
  ...xSwapConfigLocal
180
58
  };
181
59
 
60
+ // package.json
61
+ var version = "0.2.3";
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
+ const cssRequestParams = new URLSearchParams({
71
+ data: JSON.stringify({ version })
72
+ });
73
+ fetch(`${xswap_config_default.apiUrl}/sdk/css?${cssRequestParams}`).then(
74
+ async (css) => {
75
+ const style = document.createElement("style");
76
+ style.textContent = await css.text();
77
+ document.body.appendChild(style);
78
+ }
79
+ );
80
+ const xswapElement = document.createElement("div");
81
+ xswapElement.setAttribute("id", "xswap-modal");
82
+ document.body.appendChild(xswapElement);
83
+ xswapRoot = (0, import_client.createRoot)(xswapElement);
84
+ const txStatusElement = document.createElement("div");
85
+ txStatusElement.setAttribute("id", "xswap-tx-status");
86
+ txStatusElement.setAttribute("class", "xswap-tx-status");
87
+ document.body.appendChild(txStatusElement);
88
+ txStatusRoot = (0, import_client.createRoot)(txStatusElement);
89
+ };
90
+
91
+ // src/models/Addresses.ts
92
+ var ContractName = /* @__PURE__ */ ((ContractName2) => {
93
+ ContractName2["BatchQuery"] = "BatchQuery";
94
+ ContractName2["FeeCollector"] = "FeeCollector";
95
+ ContractName2["XSwapRouter"] = "XSwapRouter";
96
+ return ContractName2;
97
+ })(ContractName || {});
98
+
99
+ // src/models/Ecosystem.ts
100
+ var Ecosystem = /* @__PURE__ */ ((Ecosystem2) => {
101
+ Ecosystem2["EVM"] = "evm";
102
+ return Ecosystem2;
103
+ })(Ecosystem || {});
104
+
105
+ // src/models/Environment.ts
106
+ var Environment = /* @__PURE__ */ ((Environment2) => {
107
+ Environment2["PROD"] = "production";
108
+ Environment2["DEV"] = "develop";
109
+ Environment2["LOCAL"] = "local";
110
+ return Environment2;
111
+ })(Environment || {});
112
+
113
+ // src/models/Web3Environment.ts
114
+ var Web3Environment = /* @__PURE__ */ ((Web3Environment2) => {
115
+ Web3Environment2["DEVNET"] = "devnet";
116
+ Web3Environment2["TESTNET"] = "testnet";
117
+ Web3Environment2["MAINNET"] = "mainnet";
118
+ return Web3Environment2;
119
+ })(Web3Environment || {});
120
+
121
+ // src/models/XSwapCallType.ts
122
+ var XSwapCallType = /* @__PURE__ */ ((XSwapCallType2) => {
123
+ XSwapCallType2[XSwapCallType2["DEFAULT"] = 0] = "DEFAULT";
124
+ XSwapCallType2[XSwapCallType2["FULL_TOKEN_BALANCE"] = 1] = "FULL_TOKEN_BALANCE";
125
+ XSwapCallType2[XSwapCallType2["FULL_NATIVE_BALANCE"] = 2] = "FULL_NATIVE_BALANCE";
126
+ XSwapCallType2[XSwapCallType2["COLLECT_TOKEN_BALANCE"] = 3] = "COLLECT_TOKEN_BALANCE";
127
+ return XSwapCallType2;
128
+ })(XSwapCallType || {});
129
+
182
130
  // src/services/api.ts
183
131
  async function _sendRequest(urlPath, options) {
184
132
  const response = await fetch(`${xswap_config_default.apiUrl}${urlPath}`, {
@@ -207,26 +155,6 @@ async function getChains(ecosystem) {
207
155
  return _sendRequest(`/chains?data=${JSON.stringify({ ecosystem })}
208
156
  `);
209
157
  }
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
158
  async function getHistory(payload) {
231
159
  return await _sendRequest(
232
160
  `/history?${new URLSearchParams({
@@ -245,45 +173,6 @@ async function getPrices(payload) {
245
173
  // src/services/integrations/customCalls/staking.ts
246
174
  var import_ethers3 = require("ethers");
247
175
 
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
176
  // src/utils/contracts.ts
288
177
  var import_ethers2 = require("ethers");
289
178
 
@@ -310,16 +199,6 @@ var weiToHumanReadable = ({
310
199
  }
311
200
  return res;
312
201
  };
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
202
 
324
203
  // src/contracts/abi/BatchQuery.json
325
204
  var BatchQuery_default = [
@@ -666,17 +545,6 @@ var MSG_RECEIVED_EVENT_ABI = [
666
545
 
667
546
  // src/utils/contracts.ts
668
547
  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
548
  var getBalances = async (chain, wallet) => {
681
549
  return {
682
550
  ...await getNativeBalance(chain, wallet),
@@ -727,35 +595,6 @@ var getErc20Balances = async (chain, wallet) => {
727
595
  });
728
596
  return balances;
729
597
  };
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
598
 
760
599
  // src/utils/strings.ts
761
600
  var shortAddress = (address) => {
@@ -767,19 +606,6 @@ var shortAddress = (address) => {
767
606
 
768
607
  // src/utils/index.ts
769
608
  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
609
  var deepMergeObjects = (obj1, obj2) => {
784
610
  for (const key in obj2) {
785
611
  if (obj2.hasOwnProperty(key)) {
@@ -804,229 +630,79 @@ var getDate = (blockTimestamp) => {
804
630
  return (0, import_date_fns.format)(date, "d MMM yyyy HH:mm:ss");
805
631
  };
806
632
 
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
633
  // 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
- }
634
+ var import_ethers5 = require("ethers");
635
+
636
+ // src/components/Alert/index.tsx
637
+ var import_jsx_runtime = require("react/jsx-runtime");
638
+ var Alert = ({ desc }) => {
639
+ 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: [
640
+ "\u26A0\uFE0F ",
641
+ desc
642
+ ] });
973
643
  };
974
644
 
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
645
+ // src/components/TxConfigForm/index.tsx
646
+ var import_react11 = require("react");
647
+ var import_react_query = require("@tanstack/react-query");
648
+ var import_wagmi3 = require("wagmi");
649
+
650
+ // src/config/wagmiConfig.ts
651
+ var import_wagmi = require("wagmi");
652
+ var import_connectors = require("wagmi/connectors");
653
+ var WagmiChains = __toESM(require("viem/chains"));
654
+ var import_chains = require("viem/chains");
655
+ var getWagmiConfig = (supportedChains) => {
656
+ const chains = mapChains(supportedChains);
657
+ const transports = mapTransports(chains);
658
+ return (0, import_wagmi.createConfig)({
659
+ chains,
660
+ transports,
661
+ connectors: [
662
+ (0, import_connectors.injected)(),
663
+ (0, import_connectors.metaMask)(),
664
+ (0, import_connectors.safe)(),
665
+ (0, import_connectors.walletConnect)({ projectId: "c392898b45ac587a280b5eb33e92aeb0" })
666
+ ]
992
667
  });
993
- return route.transactions;
994
668
  };
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
- }
669
+ var mapChains = (supportedChains) => {
670
+ const result = [import_chains.mainnet];
671
+ result.push(
672
+ ...Object.values(WagmiChains).filter(
673
+ (chain) => chain.id !== import_chains.mainnet.id && supportedChains.some(({ chainId }) => chainId === chain.id.toString())
674
+ )
675
+ );
676
+ return result;
1005
677
  };
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;
678
+ var mapTransports = (chains) => {
679
+ const transports = {};
680
+ chains.forEach((chain) => {
681
+ transports[chain.id] = (0, import_wagmi.http)();
682
+ });
683
+ return transports;
1022
684
  };
1023
685
 
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");
686
+ // src/components/icons/CloseIcon.tsx
687
+ var import_jsx_runtime2 = require("react/jsx-runtime");
688
+ var CloseIcon = () => {
689
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
690
+ "svg",
691
+ {
692
+ height: "18",
693
+ width: "18",
694
+ xmlns: "http://www.w3.org/2000/svg",
695
+ viewBox: "0 0 10.312 8.319",
696
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
697
+ "path",
698
+ {
699
+ fill: "white",
700
+ 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"
701
+ }
702
+ )
703
+ }
704
+ );
705
+ };
1030
706
 
1031
707
  // src/components/icons/ArrowRightIcon.tsx
1032
708
  var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -1444,8 +1120,46 @@ var XSwapLogo = () => {
1444
1120
  );
1445
1121
  };
1446
1122
 
1447
- // src/components/TxConfigForm/HistoryCard.tsx
1123
+ // src/components/TxConfigForm/PoweredBy.tsx
1448
1124
  var import_jsx_runtime24 = require("react/jsx-runtime");
1125
+ var PoweredBy = () => {
1126
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-center items-center gap-2 my-3", children: [
1127
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-x_grey", children: "Powered by" }),
1128
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(XSwapBadgeIcon, {}),
1129
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "\u2715" }),
1130
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChainlinkCCIPIcon, {})
1131
+ ] });
1132
+ };
1133
+
1134
+ // src/components/TxConfigForm/Form.tsx
1135
+ var import_react10 = require("react");
1136
+ var import_ethers4 = require("ethers");
1137
+ var import_wagmi2 = require("wagmi");
1138
+
1139
+ // src/hooks/useDebounce.tsx
1140
+ var import_react = require("react");
1141
+ var useDebounce = (value, delay) => {
1142
+ const timeoutRef = (0, import_react.useRef)(null);
1143
+ (0, import_react.useEffect)(() => {
1144
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
1145
+ timeoutRef.current = setTimeout(() => {
1146
+ setValue(value);
1147
+ }, delay);
1148
+ return () => {
1149
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
1150
+ };
1151
+ }, [value, delay]);
1152
+ const [debouncedValue, setValue] = (0, import_react.useState)(value);
1153
+ return debouncedValue;
1154
+ };
1155
+
1156
+ // src/components/TxConfigForm/History.tsx
1157
+ var import_react3 = require("react");
1158
+ var import_bignumber2 = __toESM(require("bignumber.js"));
1159
+
1160
+ // src/components/TxConfigForm/HistoryCard.tsx
1161
+ var import_react2 = require("react");
1162
+ var import_jsx_runtime25 = require("react/jsx-runtime");
1449
1163
  var HistoryCard = ({ transaction, supportedChains }) => {
1450
1164
  const date = getDate(transaction.timestamp);
1451
1165
  const supportedTokens = (0, import_react2.useMemo)(() => {
@@ -1491,14 +1205,14 @@ var HistoryCard = ({ transaction, supportedChains }) => {
1491
1205
  const targetChainData = supportedChains.find(
1492
1206
  (chain) => chain.chainId === transaction.targetChainId
1493
1207
  );
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)(
1208
+ 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: [
1209
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
1210
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm sm:text-base", children: date }),
1211
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1212
+ 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" }) }),
1213
+ 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" }) }),
1214
+ 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" }) }),
1215
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1502
1216
  "a",
1503
1217
  {
1504
1218
  href: `${supportedChains.find(
@@ -1508,15 +1222,15 @@ var HistoryCard = ({ transaction, supportedChains }) => {
1508
1222
  rel: "noreferrer",
1509
1223
  className: "ml-2 no-underline",
1510
1224
  "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, {}) })
1225
+ children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUpRightIcon, {}) })
1512
1226
  }
1513
1227
  )
1514
1228
  ] })
1515
1229
  ] }),
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)(
1230
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between flex-wrap gap-2", children: [
1231
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1232
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1233
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1520
1234
  "img",
1521
1235
  {
1522
1236
  src: sourceChainData?.image,
@@ -1524,11 +1238,11 @@ var HistoryCard = ({ transaction, supportedChains }) => {
1524
1238
  className: "w-5 h-5 mr-1"
1525
1239
  }
1526
1240
  ),
1527
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: sourceChainData?.displayName })
1241
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: sourceChainData?.displayName })
1528
1242
  ] }),
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)(
1243
+ /* @__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, {}) }),
1244
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1245
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1532
1246
  "img",
1533
1247
  {
1534
1248
  src: targetChainData?.image,
@@ -1536,35 +1250,35 @@ var HistoryCard = ({ transaction, supportedChains }) => {
1536
1250
  className: "w-5 h-5 mr-1"
1537
1251
  }
1538
1252
  ),
1539
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: targetChainData?.displayName })
1253
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: targetChainData?.displayName })
1540
1254
  ] })
1541
1255
  ] }),
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: [
1256
+ /* @__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: [
1257
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1544
1258
  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)(
1259
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ml-1", children: tokenData?.symbol }),
1260
+ tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1547
1261
  "img",
1548
1262
  {
1549
1263
  src: tokenData?.image,
1550
1264
  alt: tokenData?.name || "",
1551
1265
  className: "w-5 h-5 ml-1"
1552
1266
  }
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) })
1267
+ ) : /* @__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
1268
  ] }),
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: [
1269
+ transaction.tokenOutAddress && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
1270
+ /* @__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, {}) }),
1271
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
1558
1272
  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)(
1273
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ml-1", children: tokenOutData?.symbol }),
1274
+ tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1561
1275
  "img",
1562
1276
  {
1563
1277
  src: tokenOutData?.image,
1564
1278
  alt: tokenOutData?.name || "",
1565
1279
  className: "w-5 h-5 ml-1"
1566
1280
  }
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) })
1281
+ ) : /* @__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
1282
  ] })
1569
1283
  ] })
1570
1284
  ] }) })
@@ -1573,7 +1287,7 @@ var HistoryCard = ({ transaction, supportedChains }) => {
1573
1287
  };
1574
1288
 
1575
1289
  // src/components/TxConfigForm/History.tsx
1576
- var import_jsx_runtime25 = require("react/jsx-runtime");
1290
+ var import_jsx_runtime26 = require("react/jsx-runtime");
1577
1291
  var History = ({ signer, supportedChains }) => {
1578
1292
  const [fetchedHistory, setFetchedHistory] = (0, import_react3.useState)();
1579
1293
  const [historyLoadedOnce, setHistoryLoadedOnce] = (0, import_react3.useState)(false);
@@ -1625,11 +1339,11 @@ var History = ({ signer, supportedChains }) => {
1625
1339
  return () => clearInterval(timer);
1626
1340
  }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
1627
1341
  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)(
1342
+ 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" });
1343
+ 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: [
1344
+ 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..." }),
1345
+ !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, {}) }),
1346
+ fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1633
1347
  HistoryCard,
1634
1348
  {
1635
1349
  transaction,
@@ -1641,30 +1355,30 @@ var History = ({ signer, supportedChains }) => {
1641
1355
  };
1642
1356
 
1643
1357
  // src/components/TxConfigForm/TopBar.tsx
1644
- var import_jsx_runtime26 = require("react/jsx-runtime");
1358
+ var import_jsx_runtime27 = require("react/jsx-runtime");
1645
1359
  var TopBar = ({
1646
1360
  signer,
1647
1361
  setSettingsShown,
1648
1362
  setHistoryTabShown,
1649
1363
  historyTabShown
1650
1364
  }) => {
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)(
1365
+ 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: [
1366
+ /* @__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` }),
1367
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2", children: [
1368
+ !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1655
1369
  "div",
1656
1370
  {
1657
1371
  onClick: () => setSettingsShown(true),
1658
1372
  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, {}) })
1373
+ 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
1374
  }
1661
1375
  ),
1662
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1376
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1663
1377
  "div",
1664
1378
  {
1665
1379
  onClick: () => setHistoryTabShown((x) => !x),
1666
1380
  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" })
1381
+ 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
1382
  }
1669
1383
  )
1670
1384
  ] })
@@ -1673,7 +1387,7 @@ var TopBar = ({
1673
1387
 
1674
1388
  // src/components/TxConfigForm/Settings.tsx
1675
1389
  var import_react4 = require("react");
1676
- var import_jsx_runtime27 = require("react/jsx-runtime");
1390
+ var import_jsx_runtime28 = require("react/jsx-runtime");
1677
1391
  var Settings = ({
1678
1392
  setSlippage,
1679
1393
  setSettingsShown,
@@ -1690,22 +1404,22 @@ var Settings = ({
1690
1404
  );
1691
1405
  }
1692
1406
  }, [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)(
1407
+ 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: [
1408
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex justify-between", children: [
1409
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-base", children: "Settings" }),
1410
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1697
1411
  "div",
1698
1412
  {
1699
1413
  className: "cursor-pointer",
1700
1414
  onClick: () => setSettingsShown(false),
1701
- children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseIcon, {})
1415
+ children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {})
1702
1416
  }
1703
1417
  )
1704
1418
  ] }),
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)(
1419
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
1420
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-2 items-center", children: [
1421
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
1422
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
1709
1423
  "span",
1710
1424
  {
1711
1425
  className: "inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer",
@@ -1713,8 +1427,8 @@ var Settings = ({
1713
1427
  setExpressChecked((x) => !x);
1714
1428
  },
1715
1429
  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)(
1430
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
1431
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1718
1432
  "span",
1719
1433
  {
1720
1434
  className: `transition-all w-5 h-5 rounded-full absolute translate-y-[-4px]
@@ -1725,15 +1439,15 @@ var Settings = ({
1725
1439
  }
1726
1440
  ) })
1727
1441
  ] }),
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." })
1442
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-4", children: [
1443
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoIcon, {}) }),
1444
+ /* @__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
1445
  ] })
1732
1446
  ] }),
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)(
1447
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-2 ", children: [
1448
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
1449
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-2", children: [
1450
+ /* @__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
1451
  "div",
1738
1452
  {
1739
1453
  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 +1459,8 @@ var Settings = ({
1745
1459
  },
1746
1460
  index
1747
1461
  )) }),
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)(
1462
+ /* @__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: [
1463
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1750
1464
  "input",
1751
1465
  {
1752
1466
  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 +1479,16 @@ var Settings = ({
1765
1479
  }
1766
1480
  }
1767
1481
  ),
1768
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PercentageIcon, {})
1482
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PercentageIcon, {})
1769
1483
  ] })
1770
1484
  ] }),
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: [
1485
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-4", children: [
1486
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoIcon, {}) }),
1487
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-xs text-left", children: [
1774
1488
  "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", {}),
1489
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("br", {}),
1776
1490
  " ",
1777
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("br", {}),
1491
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("br", {}),
1778
1492
  "If the trade fails due to too-low slippage, you will receive USDC on the destination chain."
1779
1493
  ] })
1780
1494
  ] })
@@ -1783,7 +1497,7 @@ var Settings = ({
1783
1497
  };
1784
1498
 
1785
1499
  // src/components/TxConfigForm/FeesDetails.tsx
1786
- var import_jsx_runtime28 = require("react/jsx-runtime");
1500
+ var import_jsx_runtime29 = require("react/jsx-runtime");
1787
1501
  var FeesDetails = ({
1788
1502
  isGettingRoute,
1789
1503
  route,
@@ -1794,12 +1508,12 @@ var FeesDetails = ({
1794
1508
  feesDetailsShown,
1795
1509
  setFeesDetailsShown
1796
1510
  }) => {
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({
1511
+ 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: [
1512
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm ", children: [
1513
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
1514
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CoinsIcon, {}),
1515
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mr-1", children: "Fees:" }),
1516
+ isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "bg-current rounded animate-pulse w-20 h-4" }) : ` ${weiToHumanReadable({
1803
1517
  amount: safeBigNumberFrom(
1804
1518
  route?.xSwapFees.xSwapFee.nativeFee || "0"
1805
1519
  ).add(safeBigNumberFrom(route?.xSwapFees.ccipFee || "0")).add(
@@ -1809,30 +1523,30 @@ var FeesDetails = ({
1809
1523
  precisionFractionalPlaces: 5
1810
1524
  })} ${paymentToken?.symbol}`
1811
1525
  ] }),
1812
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-1 items-center", children: [
1813
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
1526
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-1 items-center", children: [
1527
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
1814
1528
  "div",
1815
1529
  {
1816
1530
  className: `flex gap-1 items-center font-medium ${expressChecked ? "text-x_green" : "text-white opacity-60"}`,
1817
1531
  children: [
1818
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimerIcon, {}),
1532
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TimerIcon, {}),
1819
1533
  expressChecked ? "Fast ~ 30sec " : "Normal ~ 30min"
1820
1534
  ]
1821
1535
  }
1822
1536
  ),
1823
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1537
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
1824
1538
  "div",
1825
1539
  {
1826
1540
  onClick: () => setFeesDetailsShown((x) => !x),
1827
1541
  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, {})
1542
+ children: feesDetailsShown ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronDownIcon, {})
1829
1543
  }
1830
1544
  )
1831
1545
  ] })
1832
1546
  ] }),
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: [
1547
+ feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center justify-between ", children: [
1548
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
1549
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1836
1550
  "CCIP Fee:",
1837
1551
  ` ${weiToHumanReadable({
1838
1552
  amount: route?.xSwapFees.ccipFee || "0",
@@ -1840,7 +1554,7 @@ var FeesDetails = ({
1840
1554
  precisionFractionalPlaces: 5
1841
1555
  })} ${paymentToken?.symbol}`
1842
1556
  ] }),
1843
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1557
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1844
1558
  "Native Fee:",
1845
1559
  ` ${weiToHumanReadable({
1846
1560
  amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
@@ -1849,12 +1563,12 @@ var FeesDetails = ({
1849
1563
  })} ${paymentToken?.symbol}`
1850
1564
  ] })
1851
1565
  ] }),
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: [
1566
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
1567
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1854
1568
  "Slippage: ",
1855
1569
  `${slippage}%`
1856
1570
  ] }),
1857
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1571
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
1858
1572
  "Min amount out:",
1859
1573
  " ",
1860
1574
  weiToHumanReadable({
@@ -1875,7 +1589,7 @@ var import_react6 = require("react");
1875
1589
 
1876
1590
  // src/components/TxConfigForm/UsdPrice.tsx
1877
1591
  var import_react5 = require("react");
1878
- var import_jsx_runtime29 = require("react/jsx-runtime");
1592
+ var import_jsx_runtime30 = require("react/jsx-runtime");
1879
1593
  var UsdPrice = ({
1880
1594
  prices,
1881
1595
  token,
@@ -1888,11 +1602,11 @@ var UsdPrice = ({
1888
1602
  setUsdPrice((Number(amount) * Number(prices[token.address])).toFixed(2));
1889
1603
  }
1890
1604
  }, [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" }) });
1605
+ 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
1606
  };
1893
1607
 
1894
1608
  // src/components/TxConfigForm/Summary.tsx
1895
- var import_jsx_runtime30 = require("react/jsx-runtime");
1609
+ var import_jsx_runtime31 = require("react/jsx-runtime");
1896
1610
  var Summary = ({
1897
1611
  isGettingRoute,
1898
1612
  route,
@@ -1915,32 +1629,32 @@ var Summary = ({
1915
1629
  );
1916
1630
  }
1917
1631
  }, [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)(
1632
+ 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: [
1633
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between", children: [
1634
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-1", children: [
1635
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
1636
+ isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1923
1637
  Skeleton,
1924
1638
  {
1925
1639
  width: "w-[100px]",
1926
1640
  height: "h-[36px]",
1927
1641
  other: "sm:w-[190px]"
1928
1642
  }
1929
- ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: [
1643
+ ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: [
1930
1644
  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 })
1645
+ /* @__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 }) }),
1646
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
1933
1647
  ] })
1934
1648
  ] }),
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 })
1649
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-1 text-sm", children: [
1650
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on chain:" }),
1651
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1 text-white", children: [
1652
+ /* @__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 }) }),
1653
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: dstChain?.displayName })
1940
1654
  ] })
1941
1655
  ] })
1942
1656
  ] }),
1943
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
1657
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1944
1658
  UsdPrice,
1945
1659
  {
1946
1660
  prices,
@@ -1949,7 +1663,7 @@ var Summary = ({
1949
1663
  loading: isGettingRoute
1950
1664
  }
1951
1665
  ),
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, {}) }) })
1666
+ /* @__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
1667
  ] });
1954
1668
  };
1955
1669
 
@@ -1959,7 +1673,7 @@ var import_react9 = require("react");
1959
1673
  // src/components/TxConfigForm/TokenPicker.tsx
1960
1674
  var import_react7 = require("react");
1961
1675
  var import_react_dom = require("react-dom");
1962
- var import_jsx_runtime31 = require("react/jsx-runtime");
1676
+ var import_jsx_runtime32 = require("react/jsx-runtime");
1963
1677
  var TokenPicker = ({
1964
1678
  onCloseClick,
1965
1679
  tokens,
@@ -1986,24 +1700,24 @@ var TokenPicker = ({
1986
1700
  );
1987
1701
  }, [searchValue, tokens]);
1988
1702
  return modalRoot ? (0, import_react_dom.createPortal)(
1989
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1703
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
1990
1704
  "div",
1991
1705
  {
1992
1706
  onClick: onBackdropClick,
1993
1707
  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)(
1708
+ 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: [
1709
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
1996
1710
  "div",
1997
1711
  {
1998
1712
  onClick: onCloseClick,
1999
1713
  className: "absolute top-4 right-4 cursor-pointer",
2000
- children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseIcon, {})
1714
+ children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CloseIcon, {})
2001
1715
  }
2002
1716
  ),
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)(
1717
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-base mb-4", children: "Pick a token" }),
1718
+ /* @__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: [
1719
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SearchIcon, {}) }),
1720
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
2007
1721
  "input",
2008
1722
  {
2009
1723
  placeholder: "Search name or paste address",
@@ -2013,7 +1727,7 @@ var TokenPicker = ({
2013
1727
  }
2014
1728
  )
2015
1729
  ] }),
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)(
1730
+ /* @__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
1731
  "div",
2018
1732
  {
2019
1733
  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 +1736,14 @@ var TokenPicker = ({
2022
1736
  onCloseClick();
2023
1737
  },
2024
1738
  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 })
1739
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: token.image, alt: token.name, className: "w-5" }),
1740
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-sm", children: token.symbol })
2027
1741
  ]
2028
1742
  },
2029
1743
  token.address
2030
1744
  )) }),
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)(
1745
+ /* @__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)]" }),
1746
+ /* @__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
1747
  "div",
2034
1748
  {
2035
1749
  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 +1752,29 @@ var TokenPicker = ({
2038
1752
  onCloseClick();
2039
1753
  },
2040
1754
  children: [
2041
- token.image ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1755
+ token.image ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
2042
1756
  "img",
2043
1757
  {
2044
1758
  src: token.image,
2045
1759
  alt: token.name,
2046
1760
  className: "token-picker__all__logo"
2047
1761
  }
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 })
1762
+ ) : /* @__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) }),
1763
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
1764
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col leading-[16px]", children: [
1765
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
1766
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-[#888] text-[11px]", children: token.symbol })
2053
1767
  ] }),
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({
1768
+ 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
1769
  amount: balances[token.address]?.toString() || "0",
2056
1770
  decimals: token.decimals,
2057
1771
  precisionFractionalPlaces: 4
2058
- }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { width: "w-12", height: "h-3" }) })
1772
+ }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { width: "w-12", height: "h-3" }) })
2059
1773
  ] })
2060
1774
  ]
2061
1775
  },
2062
1776
  `${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." }) }) })
1777
+ )) : /* @__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
1778
  ] })
2065
1779
  }
2066
1780
  ),
@@ -2069,7 +1783,7 @@ var TokenPicker = ({
2069
1783
  };
2070
1784
 
2071
1785
  // src/components/TxConfigForm/ChainListElement.tsx
2072
- var import_jsx_runtime32 = require("react/jsx-runtime");
1786
+ var import_jsx_runtime33 = require("react/jsx-runtime");
2073
1787
  var ChainListElement = ({
2074
1788
  chain,
2075
1789
  setSrcChain,
@@ -2077,8 +1791,8 @@ var ChainListElement = ({
2077
1791
  index,
2078
1792
  length
2079
1793
  }) => {
2080
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
2081
- /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
1794
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
1795
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
2082
1796
  "li",
2083
1797
  {
2084
1798
  className: "bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full",
@@ -2087,19 +1801,19 @@ var ChainListElement = ({
2087
1801
  setChainListShown(false);
2088
1802
  },
2089
1803
  children: [
2090
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
1804
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
2091
1805
  chain.displayName
2092
1806
  ]
2093
1807
  }
2094
1808
  ),
2095
- index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
1809
+ index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
2096
1810
  ] }, `${chain.ecosystem}-${chain.chainId}`);
2097
1811
  };
2098
1812
 
2099
1813
  // src/components/TxConfigForm/BalanceComponent.tsx
2100
1814
  var import_react8 = require("react");
2101
1815
  var import_bignumber3 = __toESM(require("bignumber.js"));
2102
- var import_jsx_runtime33 = require("react/jsx-runtime");
1816
+ var import_jsx_runtime34 = require("react/jsx-runtime");
2103
1817
  var BalanceComponent = ({ srcToken, balances }) => {
2104
1818
  const balanceText = (0, import_react8.useMemo)(() => {
2105
1819
  if (!balances || !srcToken) return "0";
@@ -2119,7 +1833,7 @@ var BalanceComponent = ({ srcToken, balances }) => {
2119
1833
  precisionFractionalPlaces: 5
2120
1834
  });
2121
1835
  }, [srcToken, balances]);
2122
- return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
1836
+ return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
2123
1837
  "Balance:",
2124
1838
  " ",
2125
1839
  srcToken && balances ? weiToHumanReadable({
@@ -2127,12 +1841,12 @@ var BalanceComponent = ({ srcToken, balances }) => {
2127
1841
  decimals: srcToken.decimals,
2128
1842
  precisionFractionalPlaces: 4
2129
1843
  }) : 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" })
1844
+ /* @__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
1845
  ] });
2132
1846
  };
2133
1847
 
2134
1848
  // src/components/TxConfigForm/SwapPanel.tsx
2135
- var import_jsx_runtime34 = require("react/jsx-runtime");
1849
+ var import_jsx_runtime35 = require("react/jsx-runtime");
2136
1850
  var SwapPanel = ({
2137
1851
  amount,
2138
1852
  setAmount,
@@ -2177,11 +1891,11 @@ var SwapPanel = ({
2177
1891
  () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
2178
1892
  [supportedChains, srcChain]
2179
1893
  );
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)(
1894
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
1895
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
1896
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-1", children: [
1897
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
1898
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2185
1899
  "input",
2186
1900
  {
2187
1901
  className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
@@ -2200,7 +1914,7 @@ var SwapPanel = ({
2200
1914
  }
2201
1915
  )
2202
1916
  ] }),
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)(
1917
+ /* @__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
1918
  UsdPrice,
2205
1919
  {
2206
1920
  prices,
@@ -2210,8 +1924,8 @@ var SwapPanel = ({
2210
1924
  }
2211
1925
  ) })
2212
1926
  ] }),
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)(
1927
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
1928
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
2215
1929
  "div",
2216
1930
  {
2217
1931
  className: "flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap",
@@ -2219,7 +1933,7 @@ var SwapPanel = ({
2219
1933
  setTokenListShown((state) => !state);
2220
1934
  },
2221
1935
  children: [
2222
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1936
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2223
1937
  "img",
2224
1938
  {
2225
1939
  height: 16,
@@ -2228,12 +1942,12 @@ var SwapPanel = ({
2228
1942
  alt: srcToken?.name
2229
1943
  }
2230
1944
  ),
2231
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: srcToken?.symbol }),
2232
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DownArrowIcon, {})
1945
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: srcToken?.symbol }),
1946
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownArrowIcon, {})
2233
1947
  ]
2234
1948
  }
2235
1949
  ),
2236
- tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1950
+ tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2237
1951
  TokenPicker,
2238
1952
  {
2239
1953
  onCloseClick: () => setTokenListShown(false),
@@ -2244,22 +1958,22 @@ var SwapPanel = ({
2244
1958
  balances
2245
1959
  }
2246
1960
  ),
2247
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1961
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2248
1962
  "div",
2249
1963
  {
2250
1964
  onClick: handleMaxClick,
2251
1965
  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 })
1966
+ children: signer && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BalanceComponent, { balances, srcToken })
2253
1967
  }
2254
1968
  ),
2255
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
1969
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
2256
1970
  "div",
2257
1971
  {
2258
1972
  ref: buttonRef,
2259
1973
  className: "bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2",
2260
1974
  onClick: () => setChainListShown((prev) => !prev),
2261
1975
  children: [
2262
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1976
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2263
1977
  "img",
2264
1978
  {
2265
1979
  width: "16",
@@ -2268,17 +1982,17 @@ var SwapPanel = ({
2268
1982
  alt: srcChain?.name
2269
1983
  }
2270
1984
  ),
2271
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: srcChain?.displayName }),
2272
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DownArrowIcon, {})
1985
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: srcChain?.displayName }),
1986
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownArrowIcon, {})
2273
1987
  ]
2274
1988
  }
2275
1989
  ),
2276
- chainListShown && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1990
+ chainListShown && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2277
1991
  "ul",
2278
1992
  {
2279
1993
  ref: listRef,
2280
1994
  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)(
1995
+ children: chainListOptions.map((chain, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2282
1996
  ChainListElement,
2283
1997
  {
2284
1998
  index,
@@ -2295,9 +2009,9 @@ var SwapPanel = ({
2295
2009
  };
2296
2010
 
2297
2011
  // src/components/TxConfigForm/ErrorField.tsx
2298
- var import_jsx_runtime35 = require("react/jsx-runtime");
2012
+ var import_jsx_runtime36 = require("react/jsx-runtime");
2299
2013
  var ErrorField = ({ error }) => {
2300
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2014
+ return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
2301
2015
  "div",
2302
2016
  {
2303
2017
  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 +2021,15 @@ var ErrorField = ({ error }) => {
2307
2021
  };
2308
2022
 
2309
2023
  // src/components/TxConfigForm/Description.tsx
2310
- var import_jsx_runtime36 = require("react/jsx-runtime");
2024
+ var import_jsx_runtime37 = require("react/jsx-runtime");
2311
2025
  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 }) });
2026
+ 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
2027
  };
2314
2028
 
2315
2029
  // src/components/TxConfigForm/Button.tsx
2316
- var import_jsx_runtime37 = require("react/jsx-runtime");
2030
+ var import_jsx_runtime38 = require("react/jsx-runtime");
2317
2031
  var Button = ({ children, onClick, type, disabled }) => {
2318
- return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
2032
+ return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2319
2033
  "button",
2320
2034
  {
2321
2035
  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 +2042,7 @@ var Button = ({ children, onClick, type, disabled }) => {
2328
2042
  };
2329
2043
 
2330
2044
  // src/components/TxConfigForm/Form.tsx
2331
- var import_jsx_runtime38 = require("react/jsx-runtime");
2045
+ var import_jsx_runtime39 = require("react/jsx-runtime");
2332
2046
  var Form = ({
2333
2047
  dstChainId,
2334
2048
  dstTokenAddr,
@@ -2393,7 +2107,7 @@ var Form = ({
2393
2107
  `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`
2394
2108
  );
2395
2109
  getRoute({
2396
- fromAmount: import_ethers5.ethers.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
2110
+ fromAmount: import_ethers4.ethers.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
2397
2111
  fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
2398
2112
  fromChain: srcChain.chainId,
2399
2113
  fromToken: srcToken.address,
@@ -2427,7 +2141,7 @@ var Form = ({
2427
2141
  if (srcChain) {
2428
2142
  setPaymentToken(
2429
2143
  srcChain.tokens.find(
2430
- (token) => token.address.toLowerCase() === import_ethers5.ethers.constants.AddressZero.toLowerCase()
2144
+ (token) => token.address.toLowerCase() === import_ethers4.ethers.constants.AddressZero.toLowerCase()
2431
2145
  )
2432
2146
  );
2433
2147
  }
@@ -2458,13 +2172,13 @@ var Form = ({
2458
2172
  const handleSwitchChain = async () => {
2459
2173
  await switchChainAsync({ chainId: Number(srcChain?.chainId) });
2460
2174
  };
2461
- return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
2175
+ return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
2462
2176
  "form",
2463
2177
  {
2464
2178
  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
2179
  onSubmit: handleSubmit,
2466
2180
  children: [
2467
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2181
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2468
2182
  TopBar,
2469
2183
  {
2470
2184
  signer,
@@ -2473,7 +2187,7 @@ var Form = ({
2473
2187
  setSettingsShown
2474
2188
  }
2475
2189
  ),
2476
- settingsShown && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2190
+ settingsShown && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2477
2191
  Settings,
2478
2192
  {
2479
2193
  expressChecked,
@@ -2483,9 +2197,9 @@ var Form = ({
2483
2197
  setSlippage
2484
2198
  }
2485
2199
  ),
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)(
2200
+ historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-2", children: [
2201
+ desc && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Description, { description: desc }),
2202
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2489
2203
  SwapPanel,
2490
2204
  {
2491
2205
  amount,
@@ -2500,7 +2214,7 @@ var Form = ({
2500
2214
  setSrcChain
2501
2215
  }
2502
2216
  ),
2503
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2217
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2504
2218
  Summary,
2505
2219
  {
2506
2220
  isGettingRoute,
@@ -2509,7 +2223,7 @@ var Form = ({
2509
2223
  dstChain
2510
2224
  }
2511
2225
  ),
2512
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2226
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2513
2227
  FeesDetails,
2514
2228
  {
2515
2229
  route,
@@ -2522,8 +2236,8 @@ var Form = ({
2522
2236
  setFeesDetailsShown
2523
2237
  }
2524
2238
  ),
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)(
2239
+ formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ErrorField, { error: formError }),
2240
+ 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
2241
  Button,
2528
2242
  {
2529
2243
  type: "submit",
@@ -2537,11 +2251,8 @@ var Form = ({
2537
2251
  );
2538
2252
  };
2539
2253
 
2540
- // package.json
2541
- var version = "0.2.1";
2542
-
2543
2254
  // src/components/TxConfigForm/index.tsx
2544
- var import_jsx_runtime39 = require("react/jsx-runtime");
2255
+ var import_jsx_runtime40 = require("react/jsx-runtime");
2545
2256
  var TxConfigForm = ({
2546
2257
  dstChainId,
2547
2258
  dstTokenAddr,
@@ -2563,13 +2274,13 @@ var TxConfigForm = ({
2563
2274
  () => getWagmiConfig(supportedChains),
2564
2275
  supportedChains
2565
2276
  );
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)(
2277
+ 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
2278
  "div",
2568
2279
  {
2569
2280
  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
2281
  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)(
2282
+ 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: [
2283
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2573
2284
  Form,
2574
2285
  {
2575
2286
  dstChainId,
@@ -2580,20 +2291,15 @@ var TxConfigForm = ({
2580
2291
  onSubmit
2581
2292
  }
2582
2293
  ),
2583
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2294
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2584
2295
  "div",
2585
2296
  {
2586
2297
  className: "absolute top-7 right-4 cursor-pointer text-white",
2587
2298
  onClick: onClose,
2588
- children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CloseIcon, {})
2299
+ children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CloseIcon, {})
2589
2300
  }
2590
2301
  ),
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
- ] })
2302
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PoweredBy, {})
2597
2303
  ] })
2598
2304
  }
2599
2305
  ) }) });
@@ -2608,7 +2314,7 @@ var openTxConfigForm = async ({
2608
2314
  try {
2609
2315
  return await new Promise((resolve) => {
2610
2316
  xswapRoot.render(
2611
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2317
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2612
2318
  TxConfigForm,
2613
2319
  {
2614
2320
  dstChainId,
@@ -2631,24 +2337,11 @@ var openTxConfigForm = async ({
2631
2337
  throw new Error(`XSwap component error, ${err}`);
2632
2338
  }
2633
2339
  };
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
2340
 
2647
- // src/components/TxHistoryButton/index.tsx
2341
+ // src/components/TxStatusButton/index.tsx
2648
2342
  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 }) => {
2343
+ var import_jsx_runtime41 = require("react/jsx-runtime");
2344
+ var TxStatusButton = ({ transaction }) => {
2652
2345
  const {
2653
2346
  fromChain,
2654
2347
  fromChainImage,
@@ -2670,15 +2363,15 @@ var TxHistoryButton = ({ transaction }) => {
2670
2363
  () => isDone ? "border border-solid border-x_green_dark" : "border border-solid border-x_blue_dark",
2671
2364
  [isDone]
2672
2365
  );
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)(
2366
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
2367
+ isWide && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
2675
2368
  "div",
2676
2369
  {
2677
2370
  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
2371
  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)(
2372
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
2373
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
2374
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2682
2375
  "img",
2683
2376
  {
2684
2377
  className: "w-5 h-5",
@@ -2686,16 +2379,16 @@ var TxHistoryButton = ({ transaction }) => {
2686
2379
  alt: "source chain"
2687
2380
  }
2688
2381
  ),
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 })
2382
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: fromChain }),
2383
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowRightIcon, {}) }),
2384
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
2385
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: toChain })
2693
2386
  ] }),
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)(
2387
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
2388
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: "Sent" }),
2389
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: fromAmount }),
2390
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: fromToken }),
2391
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2699
2392
  "img",
2700
2393
  {
2701
2394
  className: "w-5 h-5",
@@ -2705,7 +2398,7 @@ var TxHistoryButton = ({ transaction }) => {
2705
2398
  )
2706
2399
  ] })
2707
2400
  ] }),
2708
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2401
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2709
2402
  "a",
2710
2403
  {
2711
2404
  href: explorer,
@@ -2713,21 +2406,21 @@ var TxHistoryButton = ({ transaction }) => {
2713
2406
  rel: "noreferrer",
2714
2407
  className: "no-underline cursor-pointer",
2715
2408
  "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, {}) })
2409
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowUpRightIcon, {}) })
2717
2410
  }
2718
2411
  )
2719
2412
  ]
2720
2413
  }
2721
2414
  ),
2722
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2415
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2723
2416
  "div",
2724
2417
  {
2725
2418
  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, {}) })
2419
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
2420
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowLeftIcon, {}),
2421
+ /* @__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: [
2422
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(XSwapLogo, {}) }),
2423
+ /* @__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
2424
  ] }) })
2732
2425
  ] })
2733
2426
  }
@@ -2753,79 +2446,160 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
2753
2446
  transaction.isDone = true;
2754
2447
  }
2755
2448
  };
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);
2449
+ var renderTxStatusButtons = () => {
2450
+ const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TxStatusButton, { transaction: item }, item.txHash));
2451
+ txStatusRoot.render(buttons);
2767
2452
  };
2768
2453
 
2769
2454
  // src/components/Skeleton/index.tsx
2770
- var import_jsx_runtime41 = require("react/jsx-runtime");
2455
+ var import_jsx_runtime42 = require("react/jsx-runtime");
2771
2456
  var Skeleton = ({ width, height }) => {
2772
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
2457
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
2458
+ };
2459
+
2460
+ // src/services/integrations/monitoring.ts
2461
+ var import_async_retry = __toESM(require("async-retry"));
2462
+ var monitorTransactionStatus = async (txChainId, txHash) => {
2463
+ const txReceipt = await getTxReceipt(txChainId, txHash);
2464
+ const supportedChains = (await getChains()).filter(
2465
+ ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
2466
+ );
2467
+ const messageSentEvent = txReceipt.logs?.find((log) => {
2468
+ return log.topics[0] === import_ethers5.ethers.utils.id(MSG_SENT_EVENT_SIG);
2469
+ });
2470
+ if (!messageSentEvent) {
2471
+ throw new Error(
2472
+ `No transaction event found for chain ${txChainId} tx ${txHash}`
2473
+ );
2474
+ }
2475
+ const messageId = messageSentEvent?.topics[1];
2476
+ const iface = new import_ethers5.ethers.utils.Interface(MSG_SENT_EVENT_ABI);
2477
+ const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
2478
+ if (!decodedMessageSentEvent) {
2479
+ throw new Error(
2480
+ `No transaction event arguments found for chain ${txChainId} tx ${txHash}`
2481
+ );
2482
+ }
2483
+ const srcChain = supportedChains.find(
2484
+ (chain) => chain.chainId === txChainId.toString()
2485
+ );
2486
+ const srcToken = srcChain?.tokens.find(
2487
+ (token) => token.address === decodedMessageSentEvent.args?.token.toString()
2488
+ );
2489
+ const dstChain = supportedChains.find(
2490
+ (chain) => chain.ccipChainId === decodedMessageSentEvent.args?.destinationChainSelector?.toString()
2491
+ );
2492
+ const dstChainId = dstChain?.chainId;
2493
+ if (!dstChainId) {
2494
+ throw new Error(`Unknown destination chain!`);
2495
+ }
2496
+ const transaction = {
2497
+ txHash,
2498
+ fromChain: srcChain?.displayName,
2499
+ fromChainImage: srcChain?.image,
2500
+ toChain: dstChain.displayName,
2501
+ toChainImage: dstChain.image,
2502
+ fromToken: srcToken?.symbol,
2503
+ fromTokenImage: srcToken?.image,
2504
+ fromAmount: weiToHumanReadable({
2505
+ amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
2506
+ decimals: srcToken?.decimals || 18,
2507
+ precisionFractionalPlaces: 4
2508
+ }),
2509
+ isDone: false,
2510
+ explorer: `${CCIP_EXPLORER}/tx/${txHash}`
2511
+ };
2512
+ addTransactionToRenderedTransactions(transaction);
2513
+ renderTxStatusButtons();
2514
+ const xSwapRouterOnDestinationAddress = ADDRESSES[dstChainId]?.XSwapRouter;
2515
+ if (!xSwapRouterOnDestinationAddress) {
2516
+ throw new Error(`Unknown destination XSwapRouter!`);
2517
+ }
2518
+ const xSwapRouterOnDestination = new import_ethers5.ethers.Contract(
2519
+ xSwapRouterOnDestinationAddress,
2520
+ MSG_RECEIVED_EVENT_ABI,
2521
+ import_ethers5.ethers.getDefaultProvider(
2522
+ supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
2523
+ )
2524
+ );
2525
+ const msgReceivedEventFilter = {
2526
+ address: xSwapRouterOnDestinationAddress,
2527
+ topics: [import_ethers5.ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
2528
+ };
2529
+ const onSuccess = async () => {
2530
+ updateTransactionDoneInRenderedTransactions(txHash);
2531
+ renderTxStatusButtons();
2532
+ await new Promise(
2533
+ (resolve) => setTimeout(() => resolve(true), TX_RECEIPT_STATUS_LIFETIME)
2534
+ );
2535
+ removeTransactionFromRenderedTransactions(txHash);
2536
+ renderTxStatusButtons();
2537
+ };
2538
+ xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
2539
+ };
2540
+ var getTxReceipt = async (txChainId, txHash) => {
2541
+ try {
2542
+ const chain = (await getChains()).find(
2543
+ (chain2) => chain2.chainId === txChainId
2544
+ );
2545
+ const provider = new import_ethers5.ethers.providers.JsonRpcProvider(
2546
+ chain?.publicRpcUrls[0]
2547
+ );
2548
+ return await (0, import_async_retry.default)(async () => {
2549
+ const txReceipt = await provider.getTransactionReceipt(txHash);
2550
+ if (!txReceipt) {
2551
+ throw new Error(`Couldn't fetch tx receipt`);
2552
+ }
2553
+ return txReceipt;
2554
+ });
2555
+ } catch (e) {
2556
+ throw new Error(
2557
+ `Couldn't fetch tx ${txHash} receipt on chain ${txChainId}`
2558
+ );
2559
+ }
2560
+ };
2561
+
2562
+ // src/services/integrations/transactions.ts
2563
+ var getSwapTx = async ({
2564
+ dstChain,
2565
+ dstToken,
2566
+ customContractCalls = [],
2567
+ desc
2568
+ }) => {
2569
+ const supportedChains = (await getChains()).filter(
2570
+ ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
2571
+ );
2572
+ validateSwapTxData(supportedChains, dstChain, dstToken);
2573
+ const route = await openTxConfigForm({
2574
+ dstChainId: dstChain,
2575
+ dstTokenAddr: dstToken,
2576
+ customContractCalls,
2577
+ desc,
2578
+ supportedChains
2579
+ });
2580
+ return route.transactions;
2581
+ };
2582
+ var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
2583
+ const supportedDstChain = supportedChains.find(
2584
+ ({ chainId }) => chainId === dstChain
2585
+ );
2586
+ if (!supportedDstChain) {
2587
+ throw new Error(`Provided chain '${dstChain}' is not supported`);
2588
+ }
2589
+ if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
2590
+ throw new Error(`Provided token '${dstToken}' is not supported`);
2591
+ }
2773
2592
  };
2593
+
2594
+ // src/index.ts
2595
+ initDocument();
2774
2596
  // Annotate the CommonJS export names for ESM import in node:
2775
2597
  0 && (module.exports = {
2776
- ADDRESSES,
2777
- Alert,
2778
- BALANCES_CHUNK_SIZE,
2779
- BatchQueryAbi,
2780
- CCIP_EXPLORER,
2781
2598
  ContractName,
2782
- DEFAULT_ECOSYSTEM,
2783
- DEFAULT_SOURCE_CHAIN_ID,
2784
- DELIVERY_TIME,
2785
- ERC20Abi,
2786
- EXPRESS_DELIVERY_TIME,
2787
2599
  Ecosystem,
2788
2600
  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
2601
  Web3Environment,
2802
2602
  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
2603
  getSwapTx,
2821
- getTokens,
2822
- monitorTransactionStatus,
2823
- openTxConfigForm,
2824
- removeTransactionFromRenderedTransactions,
2825
- renderTxHistoryButtons,
2826
- replaceNull,
2827
- safeBigNumberFrom,
2828
- shortAddress,
2829
- updateTransactionDoneInRenderedTransactions,
2830
- weiToHumanReadable
2604
+ monitorTransactionStatus
2831
2605
  });