@embarkai/ui-kit 0.4.24 → 0.4.26

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.
@@ -1,930 +0,0 @@
1
- import {
2
- Badge,
3
- BnbIcon,
4
- Button,
5
- EthereumIcon,
6
- Highlight,
7
- Input,
8
- LumiaIcon,
9
- TOKENS_ICONS,
10
- cn,
11
- formatPrice,
12
- sendUserOperation,
13
- useBridgeStore,
14
- useFlowSelectorStore,
15
- useSession,
16
- useT
17
- } from "./chunk-47XANJVP.js";
18
- import "./chunk-6QTXBMNL.js";
19
- import "./chunk-PIZB3BDS.js";
20
- import "./chunk-DBFKMKYT.js";
21
-
22
- // src/internal/components/SendMenu/hyperbridge/HyperlaneBridge.tsx
23
- import { useEffect as useEffect4 } from "react";
24
-
25
- // src/internal/components/SendMenu/hyperbridge/components/TokenSelector.tsx
26
- import { toPairs } from "lodash-es";
27
- import { ArrowLeftRightIcon } from "lucide-react";
28
- import { Fragment, useCallback } from "react";
29
-
30
- // src/internal/components/SendMenu/hyperbridge/lib/chains.ts
31
- import { lumiaMainnetChain as lumiaprism } from "@embarkai/core/read";
32
- import { bsc, mainnet as ethereum } from "wagmi/chains";
33
- var CHAINS_META = {
34
- lumiaprism: {
35
- chainID: lumiaprism.id,
36
- chainLabel: lumiaprism.name,
37
- chainName: "lumiaprism",
38
- // exact hyperlane registry chain name
39
- Icon: LumiaIcon
40
- },
41
- bsc: {
42
- chainID: bsc.id,
43
- chainLabel: bsc.name,
44
- chainName: "bsc",
45
- // exact hyperlane registry chain name
46
- Icon: BnbIcon
47
- },
48
- ethereum: {
49
- chainID: ethereum.id,
50
- chainLabel: ethereum.name,
51
- chainName: "ethereum",
52
- // exact hyperlane registry chain name
53
- Icon: EthereumIcon
54
- }
55
- // base: {
56
- // chainID: base.id,
57
- // chainLabel: base.name,
58
- // chainName: 'ethereum', // exact hyperlane registry chain name
59
- // Icon: EthereumIcon
60
- // },
61
- };
62
-
63
- // src/internal/components/SendMenu/hyperbridge/lib/warp.ts
64
- import { lumiaMainnetChain as lumiaprism2 } from "@embarkai/core/read";
65
- import { chainMetadata, warpRouteConfigs } from "@hyperlane-xyz/registry";
66
- import {
67
- MultiProtocolProvider,
68
- WarpCore
69
- } from "@hyperlane-xyz/sdk";
70
- import { bsc as bsc2, base as ethereum2 } from "wagmi/chains";
71
- var WARP_ROUTES = [
72
- {
73
- symbol: "LUMIA",
74
- icon: TOKENS_ICONS.LUMIA,
75
- id: "LUMIA/arbitrum-avalanche-base-bsc-ethereum-lumiaprism-optimism-polygon",
76
- // Canonical LUMIA warp route (includes BSC + Lumia Prism).
77
- name: "bsc-lumiaprism",
78
- chainPair: [
79
- {
80
- chainID: bsc2.id,
81
- chainLabel: bsc2.name,
82
- chainName: "bsc",
83
- Icon: BnbIcon
84
- },
85
- {
86
- chainID: lumiaprism2.id,
87
- chainLabel: lumiaprism2.name,
88
- chainName: "lumiaprism",
89
- Icon: LumiaIcon
90
- }
91
- ]
92
- },
93
- {
94
- symbol: "USDT",
95
- icon: TOKENS_ICONS.USDT,
96
- id: "USDT/ethereum-lumiaprism",
97
- name: "ethereum-lumiaprism",
98
- chainPair: [
99
- {
100
- chainID: ethereum2.id,
101
- chainLabel: ethereum2.name,
102
- chainName: "ethereum",
103
- Icon: EthereumIcon
104
- },
105
- {
106
- chainID: lumiaprism2.id,
107
- chainLabel: lumiaprism2.name,
108
- chainName: "lumiaprism",
109
- Icon: LumiaIcon
110
- }
111
- ]
112
- },
113
- {
114
- symbol: "USDC",
115
- icon: TOKENS_ICONS.USDC,
116
- id: "USDC/lumia",
117
- name: "ethereum-lumiaprism",
118
- chainPair: [
119
- {
120
- chainID: ethereum2.id,
121
- chainLabel: ethereum2.name,
122
- chainName: "ethereum",
123
- Icon: EthereumIcon
124
- },
125
- {
126
- chainID: lumiaprism2.id,
127
- chainLabel: lumiaprism2.name,
128
- chainName: "lumiaprism",
129
- Icon: LumiaIcon
130
- }
131
- ]
132
- }
133
- ];
134
- function buildLumiaWarpConfig(warpRouteId) {
135
- const config = warpRouteConfigs[warpRouteId];
136
- if (!config) {
137
- console.warn(`[HYPERLANE SDK] Warp route ${warpRouteId} not found in @hyperlane-xyz/registry`);
138
- return null;
139
- }
140
- return config;
141
- }
142
- function tokenConnectionId(chainName, addressOrDenom) {
143
- return `ethereum|${chainName}|${addressOrDenom}`.toLowerCase();
144
- }
145
- function filterWarpConfigForChains(config, chains) {
146
- const chainSet = new Set(chains);
147
- const tokens = config.tokens.filter((t) => chainSet.has(t.chainName) && t.addressOrDenom);
148
- const allowedConnectionIds = new Set(tokens.map((t) => tokenConnectionId(t.chainName, t.addressOrDenom)));
149
- const prunedTokens = tokens.map((token) => ({
150
- ...token,
151
- connections: (token.connections ?? []).filter((c) => allowedConnectionIds.has(c.token.toLowerCase()))
152
- }));
153
- return { ...config, tokens: prunedTokens };
154
- }
155
- function isDirectRouteAvailable(config, originChain, destinationChain) {
156
- const originTokens = config.tokens.find((t) => t.chainName === originChain);
157
- const destinationTokens = config.tokens.find((t) => t.chainName === destinationChain);
158
- if (!originTokens || !destinationTokens) return false;
159
- const destinationTokensId = `ethereum|${destinationChain}|${destinationTokens.addressOrDenom}`.toLowerCase();
160
- return (originTokens.connections ?? []).some((c) => c.token.toLowerCase() === destinationTokensId);
161
- }
162
- function createMultiProtocolProvider(chainNames) {
163
- const metadata = {};
164
- for (const name of chainNames) {
165
- const meta = chainMetadata[name];
166
- if (meta) metadata[name] = meta;
167
- }
168
- return new MultiProtocolProvider(metadata);
169
- }
170
- function createWarpCore(config, chainNames) {
171
- const multiProvider = createMultiProtocolProvider(chainNames);
172
- return WarpCore.FromConfig(multiProvider, config);
173
- }
174
-
175
- // src/internal/components/SendMenu/hyperbridge/components/TokenSelector.tsx
176
- import { jsx, jsxs } from "react/jsx-runtime";
177
- var BRIDGE_CHAINS_LIST = toPairs(CHAINS_META).map(([chainName]) => chainName);
178
- function RouteItem(props) {
179
- const { id, icon: Icon, chainPair, symbol } = props;
180
- const hyperRouteID = useBridgeStore((st) => st.hyperRoute);
181
- const selectRoute = useCallback((routeId) => {
182
- const {
183
- //
184
- setHyperRoute,
185
- setBridgeStep,
186
- setWarpCore,
187
- setWarpCoreConfig,
188
- setOriginChain,
189
- setDestinationChain
190
- } = useBridgeStore.getState();
191
- setHyperRoute(routeId);
192
- const warpConfig = buildLumiaWarpConfig(routeId);
193
- if (!warpConfig) {
194
- useFlowSelectorStore.getState().setError(`Warp route ${routeId} not found in @hyperlane-xyz/registry`);
195
- setBridgeStep("select");
196
- return;
197
- }
198
- console.log("[HYPERLANE SDK] Selecting route", routeId);
199
- const filteredConfig = filterWarpConfigForChains(warpConfig, BRIDGE_CHAINS_LIST);
200
- const warpCore = createWarpCore(filteredConfig, BRIDGE_CHAINS_LIST);
201
- setWarpCore(warpCore);
202
- setWarpCoreConfig(filteredConfig);
203
- setOriginChain(chainPair[0].chainName);
204
- setDestinationChain(chainPair[1].chainName);
205
- setBridgeStep("select");
206
- }, []);
207
- return /* @__PURE__ */ jsxs(
208
- Button,
209
- {
210
- size: "large",
211
- variant: hyperRouteID === id ? "default" : "outline",
212
- className: "justify-between",
213
- onClick: () => selectRoute(id),
214
- children: [
215
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--ui-kit-gap)]", children: [
216
- /* @__PURE__ */ jsx(Icon, { className: "w-6 h-6" }),
217
- /* @__PURE__ */ jsx("span", { children: symbol.toUpperCase() })
218
- ] }),
219
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--ui-kit-gap)]", children: chainPair.map((chain, chIdx) => /* @__PURE__ */ jsxs(Fragment, { children: [
220
- chIdx > 0 && /* @__PURE__ */ jsx(ArrowLeftRightIcon, { className: "w-4 h-4" }),
221
- /* @__PURE__ */ jsx(chain.Icon, { className: "w-4 h-4" })
222
- ] }, `${id}-icon-${chain.chainID}-${chIdx}`)) })
223
- ]
224
- }
225
- );
226
- }
227
- function TokenSelector() {
228
- return /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-[var(--ui-kit-gap)]", children: WARP_ROUTES.map((hyperRoute) => /* @__PURE__ */ jsx(RouteItem, { ...hyperRoute }, hyperRoute.id)) });
229
- }
230
-
231
- // src/internal/components/SendMenu/hyperbridge/hooks/useBridge.ts
232
- import { toWei } from "@hyperlane-xyz/utils";
233
- import { useMutation } from "@tanstack/react-query";
234
- import { debounce } from "lodash-es";
235
- import { useCallback as useCallback2, useEffect as useEffect2 } from "react";
236
-
237
- // src/internal/components/SendMenu/hyperbridge/lib/executeWarpTxs.ts
238
- import { ProviderType, WarpTxCategory } from "@hyperlane-xyz/sdk";
239
- async function executeWarpTransactions(txs) {
240
- const { publicClient, session } = useSession.getState();
241
- if (!session) {
242
- throw new Error("No active session");
243
- }
244
- if (!publicClient) {
245
- throw new Error("No public client available");
246
- }
247
- const hashes = [];
248
- for (const tx of txs) {
249
- if (tx.type !== ProviderType.EthersV5) {
250
- throw new Error(`Unsupported transaction provider: ${tx.type}`);
251
- }
252
- const populated = tx.transaction;
253
- if (!populated.to) {
254
- throw new Error("Transaction missing `to` address");
255
- }
256
- const hash = await sendUserOperation(session, {
257
- to: populated.to,
258
- data: populated.data ?? "0x",
259
- value: (populated.value ? BigInt(populated.value.toString()) : 0n).toString(),
260
- chainId: publicClient.chain.id
261
- });
262
- await publicClient.waitForTransactionReceipt({ hash });
263
- hashes.push(hash);
264
- }
265
- return hashes;
266
- }
267
-
268
- // src/internal/components/SendMenu/hyperbridge/hooks/useWarpCore.ts
269
- import { toPairs as toPairs2 } from "lodash-es";
270
- import { useEffect } from "react";
271
- var BRIDGE_CHAINS_LIST2 = toPairs2(CHAINS_META).map(([chainName]) => chainName);
272
- var DEFAULT_WARP_ROUTE_ID = "USDT/ethereum-lumiaprism";
273
- function useWarpCore() {
274
- useEffect(() => {
275
- const existingWarpCore = useBridgeStore.getState().warpCore;
276
- if (!!existingWarpCore) return;
277
- const {
278
- hyperRoute,
279
- originChain,
280
- destinationChain,
281
- setWarpCore,
282
- setWarpCoreConfig,
283
- setBridgeStep,
284
- setHyperRoute,
285
- setOriginChain,
286
- setDestinationChain
287
- } = useBridgeStore.getState();
288
- const hyperRouteID = hyperRoute || DEFAULT_WARP_ROUTE_ID;
289
- console.debug("[HYPERLANE SDK] Initializing WarpCore...", hyperRouteID);
290
- const fullConfig = buildLumiaWarpConfig(hyperRouteID);
291
- if (!fullConfig) {
292
- useFlowSelectorStore.getState().setError(`Warp route ${hyperRouteID} not found in @hyperlane-xyz/registry`);
293
- setBridgeStep("select");
294
- return;
295
- }
296
- const filteredConfig = filterWarpConfigForChains(fullConfig, BRIDGE_CHAINS_LIST2);
297
- const warpCore = createWarpCore(filteredConfig, BRIDGE_CHAINS_LIST2);
298
- setWarpCore(warpCore);
299
- setWarpCoreConfig(filteredConfig);
300
- if (hyperRoute !== hyperRouteID) setHyperRoute(hyperRouteID);
301
- const chainsPair = WARP_ROUTES.find((warpRoute) => warpRoute.id === hyperRouteID)?.chainPair;
302
- if (!!chainsPair) {
303
- console.debug(`[HYPERLANE SDK] chain pair ${chainsPair.map((c) => c.chainName).join(" - ")}`);
304
- const persistedOrigin = originChain && chainsPair.find((c) => c.chainName === originChain);
305
- const persistedDestination = destinationChain && chainsPair.find((c) => c.chainName === destinationChain);
306
- setOriginChain(persistedOrigin?.chainName || chainsPair[0].chainName);
307
- setDestinationChain(persistedDestination?.chainName || chainsPair[1].chainName);
308
- }
309
- return () => {
310
- setWarpCore(null);
311
- setWarpCoreConfig(null);
312
- };
313
- }, []);
314
- }
315
-
316
- // src/internal/components/SendMenu/hyperbridge/hooks/useBridge.ts
317
- function findToken(warpCore, chain) {
318
- return warpCore.tokens.find((t) => t.chainName === chain);
319
- }
320
- function findDestinationToken(warpCore, origin, destination) {
321
- if (!origin.getConnectionForChain(destination)) return void 0;
322
- return warpCore.tokens.find((t) => t.chainName === destination);
323
- }
324
- function useBridge() {
325
- const { t } = useT();
326
- useWarpCore();
327
- const address = useSession((st) => st.address);
328
- const currentChainId = useSession((st) => st.activeChainId);
329
- const warpCore = useBridgeStore((st) => st.warpCore);
330
- const amountToBridge = useBridgeStore((st) => st.amount);
331
- const swapDirection = useCallback2(() => {
332
- const {
333
- bridgeStep,
334
- originChain,
335
- destinationChain,
336
- amount,
337
- //
338
- setOriginChain,
339
- setDestinationChain,
340
- setAmount,
341
- setQuote
342
- } = useBridgeStore.getState();
343
- useFlowSelectorStore.getState().setError(null);
344
- useFlowSelectorStore.getState().setRenderKey(`${bridgeStep}-swaped-${Date.now()}`);
345
- setOriginChain(destinationChain);
346
- setDestinationChain(originChain);
347
- const cacheAmount = amount;
348
- setAmount("0");
349
- setQuote(null);
350
- setTimeout(() => setAmount(cacheAmount), 500);
351
- }, []);
352
- const { mutate: estimateQuote } = useMutation({
353
- mutationFn: async (amountToBridge2) => {
354
- useFlowSelectorStore.getState().setError(null);
355
- const {
356
- //
357
- bridgeStep,
358
- originChain,
359
- destinationChain,
360
- recipient,
361
- // setQuote,
362
- setIsQuoteEstimating
363
- } = useBridgeStore.getState();
364
- useFlowSelectorStore.getState().setRenderKey(`${bridgeStep}-quoted-${Date.now()}`);
365
- setIsQuoteEstimating(true);
366
- const originToken = findToken(warpCore, originChain);
367
- const destToken = originToken ? findDestinationToken(warpCore, originToken, destinationChain) : void 0;
368
- if (!originToken || !destToken) {
369
- throw new Error(
370
- // @ts-expect-error i18n typing
371
- t("passport:bridgeMenu.errors.noConnections", { originChain, destinationChain })
372
- );
373
- }
374
- const wei = toWei(amountToBridge2, originToken.decimals);
375
- const originTokenAmount = originToken.amount(wei);
376
- const { igpQuote, tokenFeeQuote } = await warpCore.getInterchainTransferFee({
377
- originTokenAmount,
378
- destination: destinationChain,
379
- sender: address,
380
- recipient: recipient || address,
381
- destinationToken: destToken
382
- });
383
- const localQuote = await warpCore.getLocalTransferFeeAmount({
384
- originToken,
385
- destination: destinationChain,
386
- sender: address,
387
- interchainFee: igpQuote,
388
- tokenFeeQuote,
389
- amount: BigInt(wei.toString()),
390
- destinationToken: destToken
391
- });
392
- return {
393
- amount: amountToBridge2,
394
- igpFee: String(igpQuote.getDecimalFormattedAmount()),
395
- localFee: String(localQuote.getDecimalFormattedAmount()),
396
- tokenFee: tokenFeeQuote ? String(tokenFeeQuote.getDecimalFormattedAmount()) : void 0,
397
- igpSymbol: igpQuote.token.symbol,
398
- localSymbol: localQuote.token.symbol
399
- };
400
- },
401
- onSuccess: (quote) => {
402
- const { bridgeStep, setQuote, setIsQuoteEstimating } = useBridgeStore.getState();
403
- setQuote(quote);
404
- setIsQuoteEstimating(false);
405
- useFlowSelectorStore.getState().setRenderKey(`${bridgeStep}-quoted-${Date.now()}`);
406
- },
407
- onError: (error) => {
408
- const { setQuote, setIsQuoteEstimating } = useBridgeStore.getState();
409
- console.error("[HYPERLANE SDK] Quote estimation error", error);
410
- setQuote(null);
411
- setIsQuoteEstimating(false);
412
- useFlowSelectorStore.getState().setError(error instanceof Error ? error.message : String(error));
413
- }
414
- });
415
- const defferedQuoteEstimation = useCallback2(
416
- debounce((amountToBridge2) => {
417
- estimateQuote(amountToBridge2);
418
- }, 600),
419
- []
420
- );
421
- useEffect2(() => {
422
- if (!amountToBridge || !Number(amountToBridge)) return;
423
- const { originChain, destinationChain } = useBridgeStore.getState();
424
- if (!originChain || !destinationChain) return;
425
- const warpCoreConfig = useBridgeStore.getState().warpCoreConfig;
426
- const routeReady = isDirectRouteAvailable(warpCoreConfig, originChain, destinationChain);
427
- if (!routeReady) {
428
- console.warn("[HYPERLANE SDK] route not ready");
429
- useFlowSelectorStore.getState().setError(
430
- // @ts-expect-error i18n typing
431
- t("passport:bridgeMenu.errors.routeUnavailable", { originChain, destinationChain })
432
- );
433
- return;
434
- }
435
- defferedQuoteEstimation(amountToBridge);
436
- }, [amountToBridge]);
437
- const { mutate: bridgeAsset, isPending: isAssetBridging } = useMutation({
438
- mutationFn: async () => {
439
- const {
440
- //
441
- originChain,
442
- destinationChain,
443
- amount,
444
- recipient,
445
- setBridgeTxStatus,
446
- setLastTxHashes
447
- } = useBridgeStore.getState();
448
- useFlowSelectorStore.getState().setError(null);
449
- setBridgeTxStatus(null);
450
- setLastTxHashes([]);
451
- const expectedChainId = warpCore.multiProvider.getChainId(originChain);
452
- console.warn("[HYPERLANE SDK] expectedChainId", expectedChainId, "currentChainId", currentChainId);
453
- if (currentChainId !== expectedChainId) {
454
- throw new Error(t("passport:bridgeMenu.errors.wrongNetwork"));
455
- }
456
- const originToken = findToken(warpCore, originChain);
457
- const destToken = originToken ? findDestinationToken(warpCore, originToken, destinationChain) : void 0;
458
- if (!originToken || !destToken) {
459
- throw new Error(
460
- // @ts-expect-error i18n typing
461
- t("passport:bridgeMenu.errors.noConnections", { originChain, destinationChain })
462
- );
463
- }
464
- setBridgeTxStatus(t("passport:bridgeMenu.statuses.txPrepare"));
465
- const wei = toWei(amount, originToken.decimals);
466
- const originTokenAmount = originToken.amount(wei);
467
- const to = recipient || address;
468
- console.log("[HYPERLANE SDK] tokens:\n", originToken, "->", destToken);
469
- const { igpQuote, tokenFeeQuote } = await warpCore.getInterchainTransferFee({
470
- originTokenAmount,
471
- destination: destinationChain,
472
- sender: address,
473
- recipient: to,
474
- destinationToken: destToken
475
- });
476
- const txs = await warpCore.getTransferRemoteTxs({
477
- originTokenAmount,
478
- destination: destinationChain,
479
- sender: address,
480
- recipient: to,
481
- interchainFee: igpQuote,
482
- tokenFeeQuote,
483
- destinationToken: destToken
484
- });
485
- setBridgeTxStatus(
486
- // @ts-expect-error i18n typing
487
- t("passport:bridgeMenu.statuses.txSending", { txCount: txs.length })
488
- );
489
- return await executeWarpTransactions(txs);
490
- },
491
- onSuccess: (hashes) => {
492
- const { setBridgeStep, setBridgeTxStatus, setLastTxHashes, destinationChain } = useBridgeStore.getState();
493
- setLastTxHashes(hashes);
494
- setBridgeTxStatus(
495
- // @ts-expect-error i18n typing
496
- t("passport:bridgeMenu.statuses.txSent", { destination: destinationChain })
497
- );
498
- setBridgeStep("success");
499
- },
500
- onError: (error) => {
501
- console.error("[HYPERLANE SDK] Bridge execution error", error);
502
- const { setBridgeTxStatus } = useBridgeStore.getState();
503
- setBridgeTxStatus(null);
504
- useFlowSelectorStore.getState().setError(error instanceof Error ? error.message : String(error));
505
- }
506
- });
507
- return {
508
- swapDirection,
509
- bridgeAsset,
510
- isAssetBridging
511
- };
512
- }
513
-
514
- // src/internal/components/SendMenu/hyperbridge/hooks/useMenuTitle.ts
515
- import { useEffect as useEffect3 } from "react";
516
- function useMenuTitle() {
517
- const { t } = useT();
518
- const bridgeStep = useBridgeStore((st) => st.bridgeStep);
519
- const hyperRouteMeta = useBridgeStore((st) => WARP_ROUTES.find((route) => route.id === st.hyperRoute));
520
- useEffect3(() => {
521
- const updateMenuTitle = useFlowSelectorStore.getState().setMenuTitle;
522
- switch (true) {
523
- case bridgeStep === "select-token":
524
- updateMenuTitle(t("passport:bridgeMenu.labels.selectToken"));
525
- break;
526
- case bridgeStep === "confirm":
527
- updateMenuTitle(t("passport:bridgeMenu.labels.confirm"));
528
- break;
529
- default:
530
- updateMenuTitle(
531
- // @ts-expect-error i18n typings
532
- t("passport:bridgeMenu.labels.bridgeAsset", {
533
- asset: hyperRouteMeta?.symbol || "Asset"
534
- })
535
- );
536
- break;
537
- }
538
- }, [bridgeStep, hyperRouteMeta, t]);
539
- }
540
-
541
- // src/internal/components/SendMenu/hyperbridge/steps/SelectStep.tsx
542
- import { ArrowLeftRightIcon as ArrowLeftRightIcon2, ArrowRightLeftIcon, LoaderIcon, Wallet2Icon, XIcon } from "lucide-react";
543
- import { Fragment as Fragment2 } from "react";
544
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
545
- function SelectStep({ swapChains }) {
546
- const { t } = useT();
547
- const {
548
- // warpCore,
549
- originChain,
550
- destinationChain,
551
- hyperRoute,
552
- amount,
553
- isQuoteEstimating,
554
- quote,
555
- recipient,
556
- setBridgeStep,
557
- setAmount,
558
- setRecipient
559
- } = useBridgeStore();
560
- const isError = useFlowSelectorStore((st) => !!st.error);
561
- const selectedWarpRoute = WARP_ROUTES.find((route) => route.id === hyperRoute);
562
- const OriginChainIcon = originChain ? CHAINS_META[originChain]?.Icon : null;
563
- const DestinationChainIcon = destinationChain ? CHAINS_META[destinationChain]?.Icon : null;
564
- return /* @__PURE__ */ jsxs2("div", { className: "w-full flex flex-col gap-[var(--ui-kit-gap)] items-center", children: [
565
- /* @__PURE__ */ jsxs2("div", { className: "w-full flex flex-col gap-[var(--ui-kit-gap)]", children: [
566
- /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-[var(--ui-kit-gap)] text-[10px]", children: [
567
- /* @__PURE__ */ jsx2("span", { className: "text-[var(--ui-kit-fg-muted)]", children: t("passport:bridgeMenu.labels.selectToken") }),
568
- /* @__PURE__ */ jsx2("span", { className: "w-4 h-4" }),
569
- /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-[var(--ui-kit-gap)]", children: [
570
- /* @__PURE__ */ jsxs2("span", { className: "text-[var(--ui-kit-fg-muted)]", children: [
571
- t("passport:common.balance"),
572
- ": "
573
- ] }),
574
- /* @__PURE__ */ jsx2("span", { children: "xx.xxx" })
575
- ] })
576
- ] }),
577
- /* @__PURE__ */ jsxs2(
578
- Button,
579
- {
580
- disabled: isQuoteEstimating,
581
- variant: "outline",
582
- className: "w-full justify-between",
583
- onClick: () => {
584
- useFlowSelectorStore.getState().setError(null);
585
- setBridgeStep("select-token");
586
- },
587
- children: [
588
- selectedWarpRoute && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-[var(--ui-kit-gap)]", children: [
589
- /* @__PURE__ */ jsx2(selectedWarpRoute.icon, { className: "w-6 h-6" }),
590
- /* @__PURE__ */ jsx2("span", { children: selectedWarpRoute.symbol })
591
- ] }),
592
- /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-[var(--ui-kit-gap)]", children: selectedWarpRoute?.chainPair?.map((chain, chIdx) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
593
- chIdx > 0 && /* @__PURE__ */ jsx2(ArrowLeftRightIcon2, { className: "w-4 h-4 opacity-50" }),
594
- /* @__PURE__ */ jsx2(chain.Icon, { className: "w-4 h-4 opacity-50" })
595
- ] }, `${selectedWarpRoute.id}-icon-${chain.chainID}-${chIdx}`)) })
596
- ]
597
- }
598
- ),
599
- /* @__PURE__ */ jsxs2(
600
- "div",
601
- {
602
- className: cn(
603
- "flex items-center justify-between gap-[var(--ui-kit-gap)]",
604
- "text-[10px] text-[var(--ui-kit-fg-muted)]"
605
- ),
606
- children: [
607
- /* @__PURE__ */ jsx2("span", { className: "block text-[10px] text-[var(--ui-kit-fg-muted)]", children: t("passport:bridgeMenu.labels.fromChain") }),
608
- /* @__PURE__ */ jsx2("span", { className: "block text-[10px] text-[var(--ui-kit-fg-muted)]", children: t("passport:bridgeMenu.labels.toChain") })
609
- ]
610
- }
611
- ),
612
- /* @__PURE__ */ jsxs2("div", { className: "w-full flex items-center justify-center", children: [
613
- /* @__PURE__ */ jsxs2(
614
- Badge,
615
- {
616
- variant: "outline",
617
- size: "large",
618
- className: "block flex-1 flex gap-[var(--ui-kit-gap)] justify-center",
619
- children: [
620
- OriginChainIcon && /* @__PURE__ */ jsx2(OriginChainIcon, { className: "w-6 h-6" }),
621
- originChain && /* @__PURE__ */ jsx2("span", { className: "block max-w-[100px] truncate", children: CHAINS_META[originChain]?.chainLabel })
622
- ]
623
- }
624
- ),
625
- /* @__PURE__ */ jsx2(Button, { size: "icon", variant: "ghost", onClick: swapChains, children: /* @__PURE__ */ jsx2(ArrowRightLeftIcon, { className: "w-4 h-4 " }) }),
626
- /* @__PURE__ */ jsxs2(
627
- Badge,
628
- {
629
- variant: "outline",
630
- size: "large",
631
- className: "block flex-1 flex gap-[var(--ui-kit-gap)] justify-center",
632
- children: [
633
- DestinationChainIcon && /* @__PURE__ */ jsx2(DestinationChainIcon, { className: "w-6 h-6" }),
634
- destinationChain && /* @__PURE__ */ jsx2("span", { className: "block max-w-[100px] truncate", children: CHAINS_META[destinationChain]?.chainLabel })
635
- ]
636
- }
637
- )
638
- ] }),
639
- /* @__PURE__ */ jsxs2(
640
- "div",
641
- {
642
- className: cn(
643
- //
644
- "w-full flex flex-col",
645
- "text-[10px]",
646
- "gap-[var(--ui-kit-gap)]"
647
- ),
648
- children: [
649
- /* @__PURE__ */ jsx2("span", { className: "text-[var(--ui-kit-fg-muted)]", children: t("passport:common.amount") }),
650
- /* @__PURE__ */ jsx2(
651
- Input,
652
- {
653
- type: "text",
654
- disabled: isQuoteEstimating || !originChain || !destinationChain || !hyperRoute,
655
- placeholder: t("passport:common.amount"),
656
- onChange: (e) => {
657
- useFlowSelectorStore.getState().setError(null);
658
- let { value } = e.target;
659
- const regex = /^(0|[1-9]\d*)(\.\d{0,5})?$/;
660
- if (value.length > 1 && value.startsWith("0") && !value.startsWith("0.")) {
661
- value = value.slice(1);
662
- }
663
- if (regex.test(value) || value === "") {
664
- if (value === "") {
665
- setAmount("0");
666
- } else {
667
- setAmount(value);
668
- }
669
- }
670
- },
671
- value: amount
672
- }
673
- )
674
- ]
675
- }
676
- ),
677
- /* @__PURE__ */ jsxs2(
678
- "div",
679
- {
680
- className: cn(
681
- //
682
- "w-full flex flex-col",
683
- "text-[10px]",
684
- "gap-[var(--ui-kit-gap)] pb-[var(--ui-kit-pd)]"
685
- ),
686
- children: [
687
- /* @__PURE__ */ jsx2("span", { className: "text-[var(--ui-kit-fg-muted)]", children: t("passport:bridgeMenu.labels.recipient") + " (optional)" }),
688
- /* @__PURE__ */ jsx2(
689
- Input,
690
- {
691
- type: "text",
692
- disabled: isQuoteEstimating || !originChain || !destinationChain || !hyperRoute,
693
- placeholder: t("passport:bridgeMenu.labels.recipient") + " (ex: 0x...)",
694
- value: recipient || "",
695
- Icon: Wallet2Icon,
696
- onChange: (e) => {
697
- useFlowSelectorStore.getState().setError(null);
698
- setRecipient(e.target.value);
699
- },
700
- element: /* @__PURE__ */ jsx2(
701
- Button,
702
- {
703
- size: "icon",
704
- variant: "ghost",
705
- onClick: (e) => {
706
- e.stopPropagation();
707
- setRecipient(null);
708
- },
709
- children: /* @__PURE__ */ jsx2(XIcon, { className: "w-4 h-4" })
710
- }
711
- )
712
- }
713
- )
714
- ]
715
- }
716
- )
717
- ] }),
718
- quote && /* @__PURE__ */ jsxs2(Highlight, { type: "info", className: "flex flex-col gap-[var(--ui-kit-gap)] w-full", children: [
719
- /* @__PURE__ */ jsxs2("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
720
- /* @__PURE__ */ jsx2("span", { children: t("passport:bridgeMenu.quote.amount") }),
721
- /* @__PURE__ */ jsx2("strong", { children: formatPrice(Number(quote.amount)) })
722
- ] }),
723
- /* @__PURE__ */ jsxs2("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
724
- /* @__PURE__ */ jsx2("span", { children: t("passport:bridgeMenu.quote.igpFee") }),
725
- /* @__PURE__ */ jsxs2("strong", { children: [
726
- /* @__PURE__ */ jsx2("span", { children: formatPrice(Number(quote.igpFee)) }),
727
- /* @__PURE__ */ jsxs2("span", { children: [
728
- " ",
729
- quote.igpSymbol
730
- ] })
731
- ] })
732
- ] }),
733
- /* @__PURE__ */ jsxs2("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
734
- /* @__PURE__ */ jsx2("span", { children: t("passport:bridgeMenu.quote.localFee") }),
735
- /* @__PURE__ */ jsxs2("strong", { children: [
736
- /* @__PURE__ */ jsx2("span", { children: formatPrice(Number(quote.localFee)) }),
737
- /* @__PURE__ */ jsxs2("span", { children: [
738
- " ",
739
- quote.localSymbol
740
- ] })
741
- ] })
742
- ] }),
743
- quote.tokenFee && /* @__PURE__ */ jsxs2("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
744
- /* @__PURE__ */ jsx2("span", { children: t("passport:bridgeMenu.quote.tokenFee") }),
745
- /* @__PURE__ */ jsx2("strong", { children: formatPrice(Number(quote.tokenFee)) })
746
- ] })
747
- ] }),
748
- /* @__PURE__ */ jsxs2(
749
- Button,
750
- {
751
- size: "large",
752
- variant: "default",
753
- className: "w-full",
754
- disabled: isQuoteEstimating || isError || !quote,
755
- onClick: () => useBridgeStore.getState().setBridgeStep("confirm"),
756
- children: [
757
- isQuoteEstimating && /* @__PURE__ */ jsx2(LoaderIcon, { className: "h-4 w-4 animate-spin" }),
758
- /* @__PURE__ */ jsx2("span", { children: t(
759
- (() => {
760
- switch (true) {
761
- // case isWalletChainConnecting:
762
- // return 'passport:bridgeMenu.statuses.switchingWalletChain'
763
- case isQuoteEstimating:
764
- return "passport:bridgeMenu.statuses.qouteEstimating";
765
- default:
766
- return "passport:bridgeMenu.actions.confirmBridge";
767
- }
768
- })()
769
- ).toUpperCase() })
770
- ]
771
- }
772
- )
773
- ] });
774
- }
775
-
776
- // src/internal/components/SendMenu/hyperbridge/steps/ConfirmStep.tsx
777
- import { LoaderIcon as LoaderIcon2 } from "lucide-react";
778
- import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
779
- var P_CN = "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]";
780
- function ConfirmStep(props) {
781
- const { isAssetBridging, bridgeAsset } = props;
782
- const { t } = useT();
783
- const address = useSession((st) => st.address);
784
- const isError = useFlowSelectorStore((st) => !!st.error);
785
- const quote = useBridgeStore((st) => st.quote);
786
- const originChain = useBridgeStore((st) => st.originChain);
787
- const destinationChain = useBridgeStore((st) => st.destinationChain);
788
- const recipient = useBridgeStore((st) => st.recipient);
789
- const bridgeTxStatus = useBridgeStore((st) => st.bridgeTxStatus);
790
- const recipientAddress = (recipient || address).slice(0, 6) + "..." + (recipient || address).slice(-4);
791
- return /* @__PURE__ */ jsxs3(Fragment3, { children: [
792
- /* @__PURE__ */ jsxs3(Highlight, { type: "info", className: "flex flex-col gap-[var(--ui-kit-gap)] w-full", children: [
793
- /* @__PURE__ */ jsxs3("p", { className: P_CN, children: [
794
- /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.quote.recipient") }),
795
- /* @__PURE__ */ jsx3("strong", { children: recipientAddress })
796
- ] }),
797
- /* @__PURE__ */ jsxs3("p", { className: P_CN, children: [
798
- /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.labels.fromChain") }),
799
- /* @__PURE__ */ jsx3("strong", { children: CHAINS_META[originChain].chainLabel })
800
- ] }),
801
- /* @__PURE__ */ jsxs3("p", { className: P_CN, children: [
802
- /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.labels.toChain") }),
803
- /* @__PURE__ */ jsx3("strong", { children: CHAINS_META[destinationChain].chainLabel })
804
- ] }),
805
- /* @__PURE__ */ jsxs3("p", { className: P_CN, children: [
806
- /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.quote.amount") }),
807
- /* @__PURE__ */ jsx3("strong", { children: formatPrice(Number(quote.amount)) })
808
- ] }),
809
- /* @__PURE__ */ jsxs3("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
810
- /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.quote.igpFee") }),
811
- /* @__PURE__ */ jsxs3("strong", { children: [
812
- /* @__PURE__ */ jsx3("span", { children: formatPrice(Number(quote.igpFee)) }),
813
- /* @__PURE__ */ jsxs3("span", { children: [
814
- " ",
815
- quote.igpSymbol
816
- ] })
817
- ] })
818
- ] }),
819
- /* @__PURE__ */ jsxs3("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
820
- /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.quote.localFee") }),
821
- /* @__PURE__ */ jsxs3("strong", { children: [
822
- /* @__PURE__ */ jsx3("span", { children: formatPrice(Number(quote.localFee)) }),
823
- /* @__PURE__ */ jsxs3("span", { children: [
824
- " ",
825
- quote.localSymbol
826
- ] })
827
- ] })
828
- ] }),
829
- quote.tokenFee && /* @__PURE__ */ jsxs3("p", { className: P_CN, children: [
830
- /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.quote.tokenFee") }),
831
- /* @__PURE__ */ jsx3("strong", { children: formatPrice(Number(quote.tokenFee)) })
832
- ] })
833
- ] }),
834
- !isError && /* @__PURE__ */ jsxs3(
835
- Button,
836
- {
837
- size: "large",
838
- variant: "default",
839
- disabled: isAssetBridging,
840
- onClick: () => bridgeAsset(),
841
- className: "w-full",
842
- children: [
843
- isAssetBridging && /* @__PURE__ */ jsx3(LoaderIcon2, { className: "h-4 w-4 animate-spin" }),
844
- /* @__PURE__ */ jsx3("span", { children: (bridgeTxStatus || t("passport:common.continue")).toUpperCase() })
845
- ]
846
- }
847
- )
848
- ] });
849
- }
850
-
851
- // src/internal/components/SendMenu/hyperbridge/steps/SuccessStep.tsx
852
- import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
853
- var P_CN2 = "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]";
854
- function SuccessStep() {
855
- const { t } = useT();
856
- const address = useSession((st) => st.address);
857
- const amount = useBridgeStore((st) => st.amount);
858
- const originChain = useBridgeStore((st) => st.originChain);
859
- const destinationChain = useBridgeStore((st) => st.destinationChain);
860
- const recipient = useBridgeStore((st) => st.recipient);
861
- const lastTxHashes = useBridgeStore((st) => st.lastTxHashes);
862
- const bridgeTxStatus = useBridgeStore((st) => st.bridgeTxStatus);
863
- const recipientAddress = (recipient || address).slice(0, 6) + "..." + (recipient || address).slice(-4);
864
- return /* @__PURE__ */ jsxs4(Fragment4, { children: [
865
- /* @__PURE__ */ jsxs4(Highlight, { type: "info", className: "flex flex-col gap-[var(--ui-kit-gap)] w-full", children: [
866
- /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
867
- /* @__PURE__ */ jsx4("span", { children: t("passport:bridgeMenu.quote.status") }),
868
- /* @__PURE__ */ jsx4("strong", { children: bridgeTxStatus })
869
- ] }),
870
- /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
871
- /* @__PURE__ */ jsx4("span", { children: t("passport:bridgeMenu.quote.recipient") }),
872
- /* @__PURE__ */ jsx4("strong", { children: recipientAddress })
873
- ] }),
874
- /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
875
- /* @__PURE__ */ jsx4("span", { children: t("passport:bridgeMenu.labels.fromChain") }),
876
- /* @__PURE__ */ jsx4("strong", { children: CHAINS_META[originChain].chainLabel })
877
- ] }),
878
- /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
879
- /* @__PURE__ */ jsx4("span", { children: t("passport:bridgeMenu.labels.toChain") }),
880
- /* @__PURE__ */ jsx4("strong", { children: CHAINS_META[destinationChain].chainLabel })
881
- ] }),
882
- /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
883
- /* @__PURE__ */ jsx4("span", { children: t("passport:bridgeMenu.quote.amount") }),
884
- /* @__PURE__ */ jsx4("strong", { children: formatPrice(Number(amount)) })
885
- ] }),
886
- lastTxHashes.map((hash) => /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
887
- /* @__PURE__ */ jsx4("span", { children: "TX" }),
888
- /* @__PURE__ */ jsx4("strong", { children: hash })
889
- ] }))
890
- ] }),
891
- /* @__PURE__ */ jsx4(
892
- Button,
893
- {
894
- size: "large",
895
- variant: "default",
896
- className: "w-full",
897
- onClick: () => {
898
- useFlowSelectorStore.getState().setError(null);
899
- useBridgeStore.getState().setBridgeTxStatus(null);
900
- useBridgeStore.getState().setLastTxHashes([]);
901
- useBridgeStore.getState().setBridgeStep("select");
902
- },
903
- children: /* @__PURE__ */ jsx4("span", { children: `${t("passport:common.continue")}`.toUpperCase() })
904
- }
905
- )
906
- ] });
907
- }
908
-
909
- // src/internal/components/SendMenu/hyperbridge/HyperlaneBridge.tsx
910
- import { Fragment as Fragment5, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
911
- function HyperlaneBridge() {
912
- const { swapDirection, bridgeAsset, isAssetBridging } = useBridge();
913
- useMenuTitle();
914
- const bridgeStep = useBridgeStore((st) => st.bridgeStep);
915
- useEffect4(() => () => useBridgeStore.getState().resetSelections(), []);
916
- return /* @__PURE__ */ jsxs5(Fragment5, { children: [
917
- bridgeStep === "select-token" && /* @__PURE__ */ jsx5(TokenSelector, {}),
918
- bridgeStep === "select" && /* @__PURE__ */ jsx5(SelectStep, { swapChains: swapDirection }),
919
- bridgeStep === "confirm" && /* @__PURE__ */ jsx5(ConfirmStep, { isAssetBridging, bridgeAsset }),
920
- bridgeStep === "success" && /* @__PURE__ */ jsx5(SuccessStep, {})
921
- ] });
922
- }
923
-
924
- // src/internal/components/SendMenu/hyperbridge/index.ts
925
- var hyperbridge_default = HyperlaneBridge;
926
- export {
927
- hyperbridge_default as default,
928
- useBridgeStore
929
- };
930
- //# sourceMappingURL=hyperbridge-6CO7NULG.js.map