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