@layerswap/widget 1.0.5 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/esm/Models/Theme.js +0 -8
  2. package/dist/esm/components/Buttons/copyButton.js +5 -3
  3. package/dist/esm/components/ColorSchema.js +3 -10
  4. package/dist/esm/components/Common/CountDownTimer.js +0 -14
  5. package/dist/esm/components/Input/Amount/Balance.js +7 -1
  6. package/dist/esm/components/Input/NumericInput.js +7 -4
  7. package/dist/esm/components/Input/RoutePicker/Content.js +17 -1
  8. package/dist/esm/components/Input/RoutePicker/Rows/index.js +1 -1
  9. package/dist/esm/components/Input/SourceWalletPicker.js +1 -1
  10. package/dist/esm/components/Menu/index.js +1 -1
  11. package/dist/esm/components/Modal/vaulModal.js +11 -16
  12. package/dist/esm/components/Pages/Swap/Form/ExchangeForm.js +1 -1
  13. package/dist/esm/components/Pages/Swap/Form/FeeDetails/Refuel.js +7 -5
  14. package/dist/esm/components/Pages/Swap/Form/FeeDetails/Slippage.js +6 -1
  15. package/dist/esm/components/Pages/Swap/Form/FeeDetails/SwapQuote/SummaryRow.js +1 -1
  16. package/dist/esm/components/Pages/Swap/Form/FeeDetails/SwapQuote/index.js +1 -1
  17. package/dist/esm/components/Pages/Swap/Form/FormWrapper.js +3 -7
  18. package/dist/esm/components/Pages/Swap/Form/NetworkForm.js +8 -0
  19. package/dist/esm/components/Pages/Swap/Form/SecondaryComponents/validationError/ErrorDisplay.js +1 -1
  20. package/dist/esm/components/Pages/Swap/Withdraw/ManualWithdraw.js +2 -2
  21. package/dist/esm/components/Pages/Swap/Withdraw/Summary/Summary.js +3 -3
  22. package/dist/esm/components/Pages/Swap/Withdraw/Summary/index.js +1 -1
  23. package/dist/esm/components/Pages/Swap/Withdraw/Wallet/Common/buttons.js +1 -1
  24. package/dist/esm/components/Pages/SwapHistory/History.js +1 -1
  25. package/dist/esm/components/Pages/SwapHistory/SwapDetailsComponent.js +4 -1
  26. package/dist/esm/components/Pages/SwapHistory/index.js +3 -3
  27. package/dist/esm/components/Wallet/WalletComponents/ConnectedWallets.js +1 -1
  28. package/dist/esm/components/Wallet/WalletComponents/WalletsList.js +3 -2
  29. package/dist/esm/components/Wallet/WalletModal/ConnectorsList.js +44 -23
  30. package/dist/esm/components/Widget/Index.js +2 -3
  31. package/dist/esm/components/utils/RoundDecimals.js +4 -2
  32. package/dist/esm/context/asyncModal.js +1 -1
  33. package/dist/esm/context/callbackProvider.js +0 -8
  34. package/dist/esm/context/swap.js +3 -5
  35. package/dist/esm/context/walletProviders.js +1 -1
  36. package/dist/esm/hooks/useFormValidation.js +7 -3
  37. package/dist/esm/lib/AppSettings.js +1 -1
  38. package/dist/esm/lib/NetworkSettings.js +0 -16
  39. package/dist/esm/lib/axiosInterceptor.js +2 -2
  40. package/dist/esm/stores/balanceStore.js +1 -1
  41. package/dist/index.css +2 -2
  42. package/dist/tsconfig.tsbuildinfo +1 -1
  43. package/dist/types/Models/Theme.d.ts +0 -3
  44. package/dist/types/Models/Theme.d.ts.map +1 -1
  45. package/dist/types/components/Buttons/copyButton.d.ts +3 -1
  46. package/dist/types/components/Buttons/copyButton.d.ts.map +1 -1
  47. package/dist/types/components/ColorSchema.d.ts.map +1 -1
  48. package/dist/types/components/Common/CountDownTimer.d.ts.map +1 -1
  49. package/dist/types/components/Input/Amount/Balance.d.ts.map +1 -1
  50. package/dist/types/components/Input/NumericInput.d.ts.map +1 -1
  51. package/dist/types/components/Input/RoutePicker/Content.d.ts.map +1 -1
  52. package/dist/types/components/Input/SourceWalletPicker.d.ts.map +1 -1
  53. package/dist/types/components/Modal/vaulModal.d.ts.map +1 -1
  54. package/dist/types/components/Pages/Swap/Form/FeeDetails/Refuel.d.ts.map +1 -1
  55. package/dist/types/components/Pages/Swap/Form/NetworkForm.d.ts.map +1 -1
  56. package/dist/types/components/Pages/SwapHistory/SwapDetailsComponent.d.ts.map +1 -1
  57. package/dist/types/components/Pages/SwapHistory/index.d.ts.map +1 -1
  58. package/dist/types/components/Wallet/WalletComponents/WalletsList.d.ts.map +1 -1
  59. package/dist/types/components/Wallet/WalletModal/ConnectorsList.d.ts.map +1 -1
  60. package/dist/types/components/Widget/Index.d.ts.map +1 -1
  61. package/dist/types/components/utils/RoundDecimals.d.ts.map +1 -1
  62. package/dist/types/context/callbackProvider.d.ts +0 -2
  63. package/dist/types/context/callbackProvider.d.ts.map +1 -1
  64. package/dist/types/context/swap.d.ts.map +1 -1
  65. package/dist/types/context/validationContext.d.ts +1 -0
  66. package/dist/types/context/validationContext.d.ts.map +1 -1
  67. package/dist/types/hooks/useFormValidation.d.ts +8 -0
  68. package/dist/types/hooks/useFormValidation.d.ts.map +1 -1
  69. package/dist/types/hooks/useWallet.d.ts.map +1 -1
  70. package/dist/types/lib/NetworkSettings.d.ts +0 -1
  71. package/dist/types/lib/NetworkSettings.d.ts.map +1 -1
  72. package/dist/types/lib/apiClients/layerSwapApiClient.d.ts +1 -1
  73. package/dist/types/types/wallet.d.ts +2 -1
  74. package/dist/types/types/wallet.d.ts.map +1 -1
  75. package/package.json +1 -1
@@ -3,7 +3,6 @@ export const THEME_COLORS = {
3
3
  buttonTextColor: '255, 255, 255',
4
4
  tertiary: '140, 152, 192',
5
5
  logo: '255, 255, 255',
6
- footerLogo: 'none',
7
6
  primary: {
8
7
  DEFAULT: '46, 236, 255',
9
8
  '100': '209, 251, 255',
@@ -35,7 +34,6 @@ export const THEME_COLORS = {
35
34
  tertiary: '134, 134, 134',
36
35
  buttonTextColor: '17, 17, 17',
37
36
  logo: '255, 0, 147',
38
- footerLogo: 'none',
39
37
  primary: {
40
38
  DEFAULT: '228, 37, 117',
41
39
  '100': '246, 182, 209',
@@ -67,7 +65,6 @@ export const THEME_COLORS = {
67
65
  tertiary: '118, 128, 147',
68
66
  buttonTextColor: '228, 229, 240',
69
67
  logo: '255, 0, 147',
70
- footerLogo: 'none',
71
68
  borderRadius: 'medium',
72
69
  warning: {
73
70
  Foreground: '255, 201, 74',
@@ -112,7 +109,6 @@ export const THEME_COLORS = {
112
109
  tertiary: "110, 80, 140",
113
110
  buttonTextColor: "255, 240, 200",
114
111
  logo: '255, 0, 147',
115
- footerLogo: "none",
116
112
  warning: {
117
113
  Foreground: "255, 180, 70",
118
114
  Background: "45, 30, 10",
@@ -156,7 +152,6 @@ export const THEME_COLORS = {
156
152
  tertiary: '134, 134, 134',
157
153
  buttonTextColor: '15, 15, 15',
158
154
  logo: '15, 15, 15',
159
- footerLogo: 'none',
160
155
  primary: {
161
156
  DEFAULT: '51, 144, 236',
162
157
  '100': '246, 182, 209',
@@ -188,9 +183,6 @@ export const THEME_COLORS = {
188
183
  tertiary: '182, 182, 182',
189
184
  buttonTextColor: '19, 19, 19',
190
185
  logo: '187, 187, 187',
191
- headerLogo: 'none',
192
- footerLogo: 'block',
193
- footerLogoHeight: '20px',
194
186
  primary: {
195
187
  DEFAULT: '243, 243, 243',
196
188
  '100': '255, 255, 255',
@@ -1,18 +1,20 @@
1
1
  "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { Check } from 'lucide-react';
4
4
  import { classNames } from '../utils/classNames';
5
5
  import useCopyClipboard from '../../hooks/useCopyClipboard';
6
6
  import { useState } from 'react';
7
7
  import { Tooltip, TooltipContent, TooltipTrigger } from '../shadcn/tooltip';
8
8
  import CopyIcon from '../Icons/CopyIcon';
9
- const CopyButton = ({ className, toCopy, children, iconSize, iconClassName }) => {
9
+ const CopyButton = ({ className, toCopy, children, iconSize, iconClassName, disabled = false, }) => {
10
10
  const [isCopied, setCopied] = useCopyClipboard();
11
11
  const [isTooltipOpen, setTooltipOpen] = useState(false);
12
12
  const handleCopyClick = () => {
13
+ if (disabled)
14
+ return;
13
15
  setCopied(toCopy);
14
16
  setTooltipOpen(true);
15
17
  };
16
- return (_jsxs(Tooltip, { open: isTooltipOpen, onOpenChange: setTooltipOpen, children: [_jsx(TooltipTrigger, { children: _jsx("div", { className: classNames(className), onClick: handleCopyClick, children: isCopied ? (_jsxs("div", { className: "flex items-center gap-1 cursor-pointer", children: [_jsx(Check, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) : (_jsxs("div", { className: "flex items-center gap-1 cursor-pointer", children: [_jsx(CopyIcon, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: isCopied ? "Copied" : "Copy" }) })] }));
18
+ return (_jsxs(Tooltip, { open: isTooltipOpen, onOpenChange: setTooltipOpen, children: [_jsx(TooltipTrigger, { children: _jsx("div", { className: classNames(className, "flex items-center gap-1", "cursor-pointer", disabled && "opacity-50 cursor-not-allowed pointer-events-none"), onClick: handleCopyClick, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, children: isCopied ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) : (_jsxs(_Fragment, { children: [_jsx(CopyIcon, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: isCopied ? "Copied" : "Copy" }) })] }));
17
19
  };
18
20
  export default CopyButton;
@@ -85,20 +85,13 @@ const ColorSchema = ({ themeData }) => {
85
85
  --ls-colors-secondary-900: ${mergedTheme.secondary?.[900]};
86
86
  --ls-colors-secondary-text: ${mergedTheme.secondary?.text};
87
87
 
88
- --ls-color-warning-foreground: ${mergedTheme.warning?.Foreground};
88
+ --ls-colors-warning-foreground: ${mergedTheme.warning?.Foreground};
89
89
  --ls-colors-warning-background: ${mergedTheme.warning?.Background};
90
- --ls-color-error-foreground: ${mergedTheme.error?.Foreground};
90
+ --ls-colors-error-foreground: ${mergedTheme.error?.Foreground};
91
91
  --ls-colors-error-background: ${mergedTheme.error?.Background};
92
- --ls-color-success-foreground: ${mergedTheme.success?.Foreground};
92
+ --ls-colors-success-foreground: ${mergedTheme.success?.Foreground};
93
93
  --ls-colors-success-background: ${mergedTheme.success?.Background};
94
94
  }
95
- .headerLogo {
96
- display: ${mergedTheme.headerLogo};
97
- }
98
- .footerLogo {
99
- display: ${mergedTheme.footerLogo};
100
- height: ${mergedTheme.footerLogoHeight};
101
- }
102
95
  ` }) }));
103
96
  };
104
97
  export default ColorSchema;
@@ -33,20 +33,6 @@ const CountdownTimer = ({ initialTime, swapDetails, onThresholdChange }) => {
33
33
  return `${formattedHours}${formattedMinutes}:${formattedSeconds}`;
34
34
  };
35
35
  const formatted = formatTime(elapsedTimer);
36
- if (thresholdElapsed && swapDetails.status !== SwapStatus.Completed) {
37
- const renderingError = new Error("Transaction is taking longer than expected");
38
- renderingError.name = `LongTransactionError`;
39
- renderingError.cause = renderingError;
40
- // posthog.capture('$exception', {
41
- // name: renderingError.name,
42
- // message: renderingError.message,
43
- // $layerswap_exception_type: "Long Transaction Error",
44
- // stack: renderingError.stack,
45
- // cause: renderingError.cause,
46
- // where: 'longTransactionError',
47
- // severity: 'error',
48
- // });
49
- }
50
36
  return (_jsx("div", { className: 'flex items-center justify-center space-x-1', children: swapDetails.status === SwapStatus.Completed ? ("") : (_jsxs("div", { className: 'text-secondary-text flex items-center', children: [_jsx("span", { children: "Elapsed time:" }), _jsx("span", { className: 'text-primary-text ml-0.5', children: formatted })] })) }));
51
37
  };
52
38
  export default CountdownTimer;
@@ -18,7 +18,7 @@ const Balance = ({ values, direction }) => {
18
18
  return _jsx("div", { className: "min-w-4/5 p-1 mx-2 relative rounded-b-lg text-center bg-secondary-400 py-0.5 text-xs text-secondary-text leading-[18px] font-normal", children: isLoading ?
19
19
  _jsx("div", { className: 'h-[10px] w-fit px-4 inline-flex bg-gray-500 rounded-xs animate-pulse' })
20
20
  : !truncatedBalance ?
21
- _jsxs("div", { className: "flex items-center justify-center gap-1 text-orange-400", children: [_jsx(InfoIcon, { className: 'w-3 h-3' }), _jsx("span", { children: "Network issue" })] })
21
+ _jsx(NetworkIssue, { network: network })
22
22
  : (network && token && truncatedBalance) ?
23
23
  ((Number(tokenBalance?.amount) >= 0 && Number(tokenBalance?.amount) < Number(values.amount) && values.depositMethod === 'wallet' && direction == 'from') ?
24
24
  _jsx(InsufficientBalance, { balance: truncatedBalance })
@@ -26,6 +26,12 @@ const Balance = ({ values, direction }) => {
26
26
  _jsx("span", { children: truncatedBalance }))
27
27
  : null });
28
28
  };
29
+ const NetworkIssue = ({ network }) => {
30
+ return _jsxs(Tooltip, { openOnClick: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-1 text-warning-foreground justify-center", children: [_jsx(InfoIcon, { className: 'w-3 h-3' }), _jsx("p", { children: "Network issue" })] }) }), _jsx(TooltipContent, { className: "!bg-secondary-400 !border-0 !p-3 !rounded-xl", children: _jsxs("div", { className: "flex items-center gap-2 justify-center max-w-[300px]", children: [_jsx("div", { className: "w-4 h-4", children: _jsx(InfoIcon, { className: 'w-4 h-4 text-warning-foreground' }) }), _jsx("p", { className: "text-sm", children: _jsxs("span", { children: [_jsx("span", { children: "We are currently unable to retrieve balance information for " }), _jsx("span", { children: network?.display_name ?
31
+ _jsx("span", { children: network?.display_name })
32
+ :
33
+ _jsx("span", { children: "the network" }) })] }) })] }) })] });
34
+ };
29
35
  const InsufficientBalance = ({ balance }) => {
30
36
  return _jsxs(Tooltip, { openOnClick: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-1 text-warning-foreground justify-center", children: [_jsx(InfoIcon, { className: 'w-3 h-3' }), _jsx("p", { children: balance })] }) }), _jsx(TooltipContent, { className: "!bg-secondary-400 !border-0 !p-3 !rounded-xl", children: _jsxs("div", { className: "flex items-center gap-2 justify-center", children: [_jsx(InfoIcon, { className: 'w-4 h-4 text-warning-foreground' }), _jsx("p", { className: "text-sm", children: "Insufficient balance" })] }) })] });
31
37
  };
@@ -4,12 +4,15 @@ import { forwardRef } from "react";
4
4
  import { classNames } from '../utils/classNames';
5
5
  import { isScientific } from "../utils/RoundDecimals";
6
6
  // Use with Formik
7
- const NumericInput = forwardRef(function NumericInput({ label, tempValue, disabled, placeholder, minLength, maxLength, precision, step, name, className, children, onChange, onFocus, onBlur }, ref) {
7
+ const NumericInput = forwardRef(function NumericInput({ label, disabled, tempValue, placeholder, minLength, maxLength, precision, step, name, className, children, onChange, onFocus, onBlur }, ref) {
8
8
  const { handleChange } = useFormikContext();
9
9
  const [field] = useField(name);
10
- const formattedTempValue = isScientific(tempValue)
11
- ? tempValue?.toFixed(precision ?? 0).replace(/\.?0+$/, '')
12
- : tempValue?.toString();
10
+ const formattedTempValue = tempValue ? isScientific(tempValue)
11
+ ? (!isNaN(Number(tempValue))
12
+ ? Number(tempValue).toFixed(precision ?? 0).replace(/\.?0+$/, '')
13
+ : '')
14
+ : tempValue?.toString()
15
+ : '';
13
16
  return _jsxs("div", { children: [label &&
14
17
  _jsx("label", { htmlFor: name, className: "block font-semibold text-secondary-text text-sm mb-1.5 w-full", children: label }), _jsxs("div", { className: "flex relative w-full", children: [Number(tempValue) > 0 &&
15
18
  _jsx("span", { className: classNames('py-2 flex text-secondary-text/45 items-center h-12 leading-4 bg-secondary-700 min-w-0 rounded-lg font-semibold border-0 ', className), ref: ref, children: _jsx("span", { children: formattedTempValue }) }), !tempValue &&
@@ -18,10 +18,26 @@ export const Content = ({ searchQuery, setSearchQuery, rowElements, selectedToke
18
18
  };
19
19
  const virtualizer = useVirtualizer({
20
20
  count: rowElements.length,
21
- estimateSize: () => 50,
21
+ estimateSize: (index) => {
22
+ const item = rowElements[index];
23
+ const key = item?.route?.name || item?.symbol;
24
+ const isOpen = openValues.includes(key);
25
+ // Better size estimation based on open state
26
+ if (isOpen && (item.type === 'network' || item.type === 'grouped_token')) {
27
+ const tokenCount = item.type === 'network'
28
+ ? item.route.tokens.length
29
+ : item.items.length;
30
+ // Base header (52) + tokens (each ~52px) + padding
31
+ return 52 + (tokenCount * 52) + 20;
32
+ }
33
+ return 52;
34
+ },
22
35
  getScrollElement: () => parentRef.current,
23
36
  overscan: 15
24
37
  });
38
+ useEffect(() => {
39
+ virtualizer.measure();
40
+ }, [openValues]);
25
41
  const items = virtualizer.getVirtualItems();
26
42
  useEffect(() => {
27
43
  return () => setSearchQuery('');
@@ -20,7 +20,7 @@ export default function Row({ item, direction, selectedRoute, selectedToken, sea
20
20
  return (_jsxs("div", { className: "text-primary-text-tertiary text-base font-normal leading-5 pl-1 sticky top-0 z-50 flex items-baseline", style: { position: "sticky", top: 0, transform: "none" }, children: [_jsx("p", { children: item.text }), item.text.toLowerCase().includes("all") &&
21
21
  _jsx("div", { className: "relative ml-auto", children: _jsx(RouteTokenSwitch, {}) })] }));
22
22
  case "sceleton_token":
23
- return (_jsxs(SelectItem, { className: "animate-pulse", children: [_jsx(SelectItem.Logo, { altText: `sceleton logo `, className: "rounded-full bg-secondary-500" }), _jsxs(SelectItem.Title, { className: "py-0.5", children: [_jsxs("div", { className: "grid gap-0 leading-5 align-middle space-y-0.5 font-medium", children: [_jsx("span", { className: "align-middle h-3.5 my-1 w-12 bg-secondary-500 rounded-sm" }), _jsxs("div", { className: "flex items-center space-x-1 align-middle", children: [_jsx("div", { className: "w-2 h-2 my-1 bg-secondary-500 rounded-[4px]" }), _jsx("span", { className: "bg-secondary-500 text-xs whitespace-nowrap h-2 my-1 w-20 rounded-sm" })] })] }), _jsxs("span", { className: "text-sm text-secondary-text text-right my-auto leading-4 font-medium", children: [_jsx("div", { className: "text-primary-text text-lg leading-[22px] bg-secondary-500 h-3 my-1 w-16 ml-auto rounded-sm" }), _jsx("div", { className: "text-xs leading-4 bg-secondary-500 h-2 my-1 w-10 ml-auto rounded-sm" })] })] })] }));
23
+ return (_jsxs(SelectItem, { className: "animate-pulse", children: [_jsx(SelectItem.Logo, { altText: `sceleton logo `, className: "rounded-full bg-secondary-500" }), _jsxs(SelectItem.Title, { className: "py-0.5", children: [_jsxs("div", { className: "grid gap-0 leading-5 align-middle space-y-0.5 font-medium", children: [_jsx("span", { className: "align-middle h-3.5 my-1 w-12 bg-secondary-500 rounded-sm" }), _jsxs("div", { className: "flex items-center space-x-1 align-middle", children: [_jsx("div", { className: "w-2 h-2 my-1 bg-secondary-500 rounded-sm" }), _jsx("span", { className: "bg-secondary-500 text-xs whitespace-nowrap h-2 my-1 w-20 rounded-sm" })] })] }), _jsxs("span", { className: "text-sm text-secondary-text text-right my-auto leading-4 font-medium", children: [_jsx("div", { className: "text-primary-text text-lg leading-[22px] bg-secondary-500 h-3 my-1 w-16 ml-auto rounded-sm" }), _jsx("div", { className: "text-xs leading-4 bg-secondary-500 h-2 my-1 w-10 ml-auto rounded-sm" })] })] })] }));
24
24
  default:
25
25
  return null;
26
26
  }
@@ -115,6 +115,6 @@ const Connect = ({ connectFn, setMountWalletPortal }) => {
115
115
  };
116
116
  const ContinueWithoutWallet = ({ onClick }) => {
117
117
  //TODO: bg-secondary-700 is a hotfix, should refactor and fix sticky footer for VaulDrawer
118
- return (_jsxs("div", { className: "inline-flex items-center gap-1.5 justify-center w-full pt-2 bg-secondary-700", children: [_jsx("button", { type: "button", onClick: onClick, className: "underline hover:no-underline text-base text-center text-secondary-text cursor-pointer ", children: "Continue without a wallet" }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: _jsx("div", { className: "text-xs text-secondary-text hover:text-primary-text rounded-full transition-colors duration-200 ", children: _jsx(CircleHelp, { className: "h-5 w-5" }) }) }), _jsx(PopoverContent, { side: "top", className: "max-w-[250px] text-xs", children: _jsx("p", { children: "Get a deposit address, send your crypto from any external wallet or exchange, and we'll handle the rest." }) })] })] }));
118
+ return (_jsxs("div", { className: "inline-flex items-center max-sm:pb-2 gap-1.5 justify-center w-full pt-2 bg-secondary-700", children: [_jsx("button", { type: "button", onClick: onClick, className: "underline hover:no-underline text-base text-center text-secondary-text cursor-pointer ", children: "Continue without a wallet" }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: _jsx("div", { className: "text-xs text-secondary-text hover:text-primary-text rounded-full transition-colors duration-200 ", children: _jsx(CircleHelp, { className: "h-5 w-5" }) }) }), _jsx(PopoverContent, { side: "top", className: "max-w-[250px] text-xs", children: _jsx("p", { children: "Get a deposit address, send your crypto from any external wallet or exchange, and we'll handle the rest." }) })] })] }));
119
119
  };
120
120
  export default SourceWalletPicker;
@@ -27,7 +27,7 @@ const Comp = () => {
27
27
  goToStep(step);
28
28
  };
29
29
  return _jsx(_Fragment, { children: _jsxs("div", { className: "text-secondary-text cursor-pointer relative", children: [_jsx("div", { className: "sm:-mr-2 -mr-0", children: _jsx(IconButton, { className: "inline-flex active:animate-press-down", onClick: () => setOpenTopModal(true), icon: _jsx(MenuIcon, { strokeWidth: "2" }) }) }), _jsx(VaulDrawer, { modalId: "menuModal", show: openTopModal, setShow: handleModalOpenStateChange, header: _jsxs("div", { className: "inline-flex items-center", children: [goBack &&
30
- _jsx(IconButton, { className: "inline-flex", onClick: goBack, icon: _jsx(ChevronLeft, { strokeWidth: "2" }) }), _jsx("h2", { children: currentStepName })] }), children: _jsx(VaulDrawer.Snap, { openFullHeight: true, id: "item-1", children: _jsxs(Wizard, { wizardId: 'menuWizard', children: [_jsx(WizardItem, { StepName: MenuStep.Menu, inModal: true, children: _jsx(MenuList, { goToStep: handleGoToStep }) }), _jsx(WizardItem, { StepName: MenuStep.Transactions, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(HistoryList, { onNewTransferClick: () => handleModalOpenStateChange(false) }) }), _jsx(WizardItem, { StepName: MenuStep.Campaigns, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(CampaignsComponent, { onCampaignSelect: (campaign) => { handleGoToStep(MenuStep.CampaignDetails); setSelectedCampaign(campaign.name); } }) }), _jsx(WizardItem, { StepName: MenuStep.CampaignDetails, GoBack: () => goToStep(MenuStep.Campaigns, "back"), className: "h-full", inModal: true, children: _jsx(CampaignDetailsComponent, { campaignName: selectedCampaign }) })] }) }) })] }) });
30
+ _jsx(IconButton, { className: "inline-flex", onClick: goBack, icon: _jsx(ChevronLeft, { strokeWidth: "2" }) }), _jsx("h2", { children: currentStepName })] }), children: _jsx(VaulDrawer.Snap, { openFullHeight: true, className: "h-full pb-0!", id: "item-1", children: _jsxs(Wizard, { wizardId: 'menuWizard', children: [_jsx(WizardItem, { StepName: MenuStep.Menu, inModal: true, children: _jsx(MenuList, { goToStep: handleGoToStep }) }), _jsx(WizardItem, { StepName: MenuStep.Transactions, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(HistoryList, { onNewTransferClick: () => handleModalOpenStateChange(false) }) }), _jsx(WizardItem, { StepName: MenuStep.Campaigns, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(CampaignsComponent, { onCampaignSelect: (campaign) => { handleGoToStep(MenuStep.CampaignDetails); setSelectedCampaign(campaign.name); } }) }), _jsx(WizardItem, { StepName: MenuStep.CampaignDetails, GoBack: () => goToStep(MenuStep.Campaigns, "back"), className: "h-full", inModal: true, children: _jsx(CampaignDetailsComponent, { campaignName: selectedCampaign }) })] }) }) })] }) });
31
31
  };
32
32
  const LayerswapMenu = () => {
33
33
  return (_jsx(FormWizardProvider, { noToolBar: true, hideMenu: true, initialStep: MenuStep.Menu, children: _jsx(Comp, {}) }));
@@ -10,7 +10,7 @@ import { SnapPointsProvider, useSnapPoints } from '../../context/snapPointsConte
10
10
  import { AnimatePresence, motion } from 'framer-motion';
11
11
  import { Drawer } from './vaul';
12
12
  import AppSettings from '../../lib/AppSettings';
13
- const Comp = ({ children, show, setShow, header, description, onClose, onAnimationEnd, className }) => {
13
+ const Comp = ({ children, show, setShow, header, description, onClose, onAnimationEnd, className, modalId }) => {
14
14
  const { isMobileWithPortal: isMobile, isMobile: isMobileWithoutPortal } = useWindowDimensions();
15
15
  let [headerRef, { height }] = useMeasure();
16
16
  const { setHeaderHeight } = useSnapPoints();
@@ -81,18 +81,13 @@ const Comp = ({ children, show, setShow, header, description, onClose, onAnimati
81
81
  return (_jsx(Drawer.Root, { open: show, onOpenChange: handleOpenChange, container: container, snapPoints: snapPointsHeight, activeSnapPoint: snap, setActiveSnapPoint: setSnap, fadeFromIndex: 0, onDrag: (e) => {
82
82
  if (e.movementY < 0 && !expandRef.current?.classList.contains('hidden'))
83
83
  expandRef.current?.classList.add('hidden');
84
- }, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: (e) => { onAnimationEnd && onAnimationEnd(e); }, handleOnly: isMobileWithoutPortal, children: _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Close, { asChild: true, children: isMobile
85
- ? _jsx(Drawer.Overlay, { className: 'fixed inset-0 z-50 bg-black/50 block' })
86
- : _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block', initial: { opacity: 0.5 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, "backdrop") }), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('absolute flex flex-col bg-secondary-700 rounded-t-3xl bottom-0 left-0 right-0 h-full z-50 pb-4 text-primary-text ring-0! outline-hidden! ', className, {
84
+ }, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: (e) => { onAnimationEnd && onAnimationEnd(e); }, handleOnly: isMobileWithoutPortal, children: _jsxs(Drawer.Portal, { children: [isMobile ? (_jsx(Drawer.Close, { asChild: true, children: _jsx(Drawer.Overlay, { className: 'fixed inset-0 z-50 bg-black/50 block' }) })) : (_jsx(AnimatePresence, { children: show && (_jsx(Drawer.Close, { asChild: true, children: _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block pointer-events-auto', initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 } }) }, `backdrop-${modalId}`)) })), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('absolute flex flex-col bg-secondary-700 rounded-t-3xl bottom-0 left-0 right-0 h-full z-50 pb-4 text-primary-text ring-0! outline-hidden! ', className, {
87
85
  'border-none! rounded-none!': snap === 1,
88
- '!fixed sm:!absolute': AppSettings.ThemeData?.enablePortal == true,
86
+ 'fixed! sm:absolute!': AppSettings.ThemeData?.enablePortal == true,
89
87
  }), children: [_jsxs("div", { ref: headerRef, className: 'w-full relative', children: [isMobileWithoutPortal &&
90
88
  _jsx("div", { className: "flex justify-center w-full mt-2 mb-[6px]", children: _jsx(Drawer.Handle, { className: '!w-12 !bg-primary-text-tertiary' }) }), _jsxs("div", { className: 'flex items-center w-full text-left justify-between px-4 sm:pt-2 pb-2', children: [_jsx(Drawer.Title, { className: "text-lg text-secondary-text font-semibold w-full", children: header }), _jsx(Drawer.Close, { asChild: true, children: _jsx("div", { children: _jsx(IconButton, { className: 'inline-flex active:animate-press-down', icon: _jsx(X, { strokeWidth: 2 }) }) }) })] }), description &&
91
- _jsx(Drawer.Description, { className: "text-sm mt-2 text-secondary-text px-4", children: description })] }), _jsxs("div", { className: clsx('flex flex-col w-full h-fit max-h-[90dvh] px-4 styled-scroll overflow-x-hidden relative', {
92
- 'overflow-y-auto h-full': snap === 1,
93
- 'overflow-hidden': snap !== 1,
94
- }), id: "virtualListContainer", children: [children, _jsx(AnimatePresence, { children: !isLastSnap && snapElement &&
95
- _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ref: expandRef, style: { top: `${Number(snapElement.height?.toString().replace('px', '')) - 88}px` }, className: 'w-full fixed left-0 z-50', children: _jsxs("button", { type: 'button', onClick: goToNextSnap, className: "w-full px-4 pt-10 pb-4 justify-center from-secondary-700 bg-gradient-to-t items-center gap-2 inline-flex text-secondary-text", children: [_jsx(ChevronUp, { className: "w-6 h-6 relative" }), _jsx("div", { className: "text-sm font-medium", children: "Expand" })] }) }) }), _jsx(VaulFooter, { snapElement: snapElement })] })] })] }) }));
89
+ _jsx(Drawer.Description, { className: "text-sm mt-2 text-secondary-text px-4", children: description })] }), _jsxs("div", { className: 'flex flex-col w-full h-full max-h-[90dvh] px-4 styled-scroll overflow-x-hidden relative', id: "virtualListContainer", children: [children, _jsx(AnimatePresence, { children: !isLastSnap && snapElement &&
90
+ _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ref: expandRef, style: { top: `${Number(snapElement.height?.toString().replace('px', '')) - 88}px` }, className: 'w-full fixed left-0 z-50', children: _jsxs("button", { type: 'button', onClick: goToNextSnap, className: "w-full px-4 pt-10 pb-4 justify-center from-secondary-700 bg-gradient-to-t items-center gap-2 inline-flex text-secondary-text", children: [_jsx(ChevronUp, { className: "w-6 h-6 relative" }), _jsx("div", { className: "text-sm font-medium", children: "Expand" })] }) }) }), isMobile && _jsx(VaulFooter, { snapElement: snapElement })] }), !isMobile && _jsx(VaulFooter, { snapElement: snapElement })] })] }) }));
96
91
  };
97
92
  const VaulFooter = ({ snapElement }) => {
98
93
  let [ref, { height }] = useMeasure();
@@ -100,10 +95,10 @@ const VaulFooter = ({ snapElement }) => {
100
95
  useEffect(() => {
101
96
  setFooterHeight(height || 0);
102
97
  }, [height]);
103
- return (_jsx("div", { ref: ref, id: 'walletModalFooter', style: {
98
+ return _jsx("div", { ref: ref, id: 'walletModalFooter', style: {
104
99
  top: snapElement?.height !== 1 ? `${Number(snapElement?.height?.toString().replace('px', '')) - 50}px` : undefined,
105
100
  bottom: snapElement?.height === 1 ? '12px' : undefined
106
- }, className: 'w-full fixed left-0 z-50' }));
101
+ }, className: 'w-full left-0 z-50 max-sm:absolute' });
107
102
  };
108
103
  const VaulDrawerSnap = (props) => {
109
104
  const { openFullHeight, ...domProps } = props;
@@ -141,8 +136,8 @@ const vaulStyles = `
141
136
  [data-vaul-drawer] {
142
137
  touch-action: none;
143
138
  will-change: transform;
144
- transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
145
- animation-duration: 0.5s;
139
+ transition: transform 0.1s cubic-bezier(0.32, 0.72, 0, 1);
140
+ animation-duration: 0.1s;
146
141
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
147
142
  }
148
143
  [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='open'] {
@@ -158,7 +153,7 @@ const vaulStyles = `
158
153
  transform: translate3d(0, var(--snap-point-height, 0), 0);
159
154
  }
160
155
  [data-vaul-overlay][data-vaul-snap-points='false'] {
161
- animation-duration: 0.5s;
156
+ animation-duration: 0.1s;
162
157
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
163
158
  }
164
159
  [data-vaul-overlay][data-vaul-snap-points='false'][data-state='open'] {
@@ -169,7 +164,7 @@ const vaulStyles = `
169
164
  }
170
165
  [data-vaul-overlay][data-vaul-snap-points='true'] {
171
166
  opacity: 0;
172
- transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
167
+ transition: opacity 0.1s cubic-bezier(0.32, 0.72, 0, 1);
173
168
  }
174
169
  [data-vaul-overlay][data-vaul-snap-points='true'] {
175
170
  opacity: 1;
@@ -44,7 +44,7 @@ const ExchangeForm = ({ partner }) => {
44
44
  const handleActionHover = (value) => {
45
45
  setActionTempValue(value);
46
46
  };
47
- return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "flex flex-col w-full space-y-3 relative", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send from" }), _jsx("div", { className: "relative", children: _jsx(CexPicker, {}) })] }), _jsxs("div", { className: "space-y-2 leading-4", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send to" }), _jsx("div", { className: "relative group exchange-picker", children: _jsx(RoutePicker, { direction: "to", isExchange: true }) }), _jsx("div", { className: "hover:bg-secondary-300 bg-secondary-500 rounded-2xl p-3", children: _jsx(Address, { partner: partner, children: ({ addressItem }) => {
47
+ return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "flex flex-col w-full space-y-3 relative", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send from" }), _jsx("div", { className: "relative", children: _jsx(CexPicker, {}) })] }), _jsxs("div", { className: "space-y-2 leading-4", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send to" }), _jsx("div", { className: "relative group exchange-picker", children: _jsx(RoutePicker, { direction: "to", isExchange: true }) }), _jsx("div", { className: "hover:bg-secondary-300 bg-secondary-500 rounded-2xl p-3 h-[52px]", children: _jsx(Address, { partner: partner, children: ({ addressItem }) => {
48
48
  const addressProviderIcon = (partner?.is_wallet && addressItem?.group === AddressGroup.FromQuery && partner?.logo) ? partner.logo : undefined;
49
49
  return _jsx(_Fragment, { children: addressItem ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: addressItem.address, network: destination, wallet: wallet, addressProviderIcon: addressProviderIcon }) })
50
50
  : destination_address ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: destination_address }) })
@@ -6,6 +6,8 @@ import clsx from "clsx";
6
6
  import { useBalance } from "../../../../../lib/balances/useBalance";
7
7
  import { isValidAddress } from "../../../../../lib/address/validator";
8
8
  import ToggleButton from "../../../../../components/Buttons/toggleButton";
9
+ import { useValidationContext } from "../../../../../context/validationContext";
10
+ import { FORM_VALIDATION_ERROR_CODES } from "../../../../../hooks/useFormValidation";
9
11
  const RefuelToggle = ({ onButtonClick, quote, minAllowedAmount }) => {
10
12
  const { values, setFieldValue } = useFormikContext();
11
13
  const { toAsset: toCurrency, to, destination_address, refuel, amount } = values;
@@ -13,6 +15,7 @@ const RefuelToggle = ({ onButtonClick, quote, minAllowedAmount }) => {
13
15
  const destinationNativeBalance = destination_address && balances?.find(b => (b.token === to?.token?.symbol) && (b.network === to.name));
14
16
  const needRefuel = toCurrency && toCurrency.refuel && to && to.token && isValidAddress(destination_address, to) && destinationNativeBalance && destinationNativeBalance?.amount == 0;
15
17
  const previouslySelectedDestination = useRef(to);
18
+ const { formValidation } = useValidationContext();
16
19
  useEffect(() => {
17
20
  if (to && previouslySelectedDestination.current !== to && !!refuel) {
18
21
  setFieldValue('refuel', false);
@@ -22,14 +25,13 @@ const RefuelToggle = ({ onButtonClick, quote, minAllowedAmount }) => {
22
25
  const handleConfirmToggleChange = (value) => {
23
26
  setFieldValue('refuel', value);
24
27
  };
25
- const showRefuel = needRefuel && (quote || Number(amount) === Number(minAllowedAmount) || refuel);
26
- return (showRefuel ?
28
+ const showRefuel = needRefuel && (quote && (Number(amount) === Number(minAllowedAmount) || refuel) || (refuel && formValidation.code === FORM_VALIDATION_ERROR_CODES.MIN_AMOUNT_ERROR));
29
+ return (showRefuel &&
27
30
  _jsx("div", { className: clsx("gap-4 flex relative items-center outline-hidden w-full text-primary-text px-4 py-3 bg-secondary-500 border border-transparent transition-colors duration-200 rounded-2xl mt-auto", {
28
- "!border-primary": needRefuel && !refuel
31
+ "border-primary!": needRefuel && !refuel
29
32
  }), children: _jsxs("div", { className: "flex justify-between w-full text-secondary-text ", children: [_jsxs("button", { className: "space-y-1 mt-1 mb-0.5", type: "button", onClick: () => onButtonClick(), children: [_jsxs("div", { className: "flex items-center text-base space-x-1", children: [_jsx("p", { className: "leading-4", children: "Refuel" }), _jsx("div", { className: "p-0.5", children: _jsx(Info, { className: "h-3 w-3 text-secondary-text hover:text-primary-text", "aria-hidden": "true", strokeWidth: 2.5 }) })] }), needRefuel && !refuel &&
30
33
  _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You need gas on" }), " ", _jsx("span", { children: to.display_name })] }), refuel && quote &&
31
34
  _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You'll get " }), quote?.refuel ? _jsxs("span", { children: ["~$", quote.refuel.amount_in_usd] }) : _jsx("span", { className: "w-5 h-3 rounded animate-pulse bg-secondary-200 text-transparent", children: "token" }), " ", _jsx("span", { children: "in" }), " ", _jsx("span", { children: to?.display_name }), " ", _jsx("span", { children: "for gas fees" })] }), refuel && !quote &&
32
- _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You'll get" }), " ", _jsx("span", { children: toCurrency.refuel?.token.symbol }), " ", _jsx("span", { children: "for gas fees" })] })] }), _jsx(ToggleButton, { value: !!refuel, onChange: handleConfirmToggleChange })] }) })
33
- : null);
35
+ _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You'll get" }), " ", _jsx("span", { children: toCurrency.refuel?.token.symbol }), " ", _jsx("span", { children: "for gas fees" })] })] }), _jsx(ToggleButton, { value: !!refuel, onChange: handleConfirmToggleChange })] }) }));
34
36
  };
35
37
  export default RefuelToggle;
@@ -65,11 +65,16 @@ const SlippageInput = forwardRef(function SlippageInput({ valueDecimal, onDeboun
65
65
  }, 300);
66
66
  return () => clearTimeout(t);
67
67
  }, [localPercent, invalid]);
68
- return (_jsxs(Popover, { open: invalid, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: clsx("flex items-center gap-1 text-secondary-text text-sm px-2 py-2 -my-1 border rounded-lg font-normal leading-4 focus-within:outline-none focus-within:ring-0 border-secondary-300", invalid ? "animate-shake" : ""), children: [_jsx("input", { type: "number", ref: ref, autoComplete: "off", autoFocus: false, className: clsx("w-10 bg-transparent border-none outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0 focus:border-transparent focus:shadow-none text-primary-text text-base leading-3.5 p-0 text-right"), value: localPercent, onChange: (e) => {
68
+ return (_jsxs(Popover, { open: invalid, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: clsx("flex items-center gap-1 text-secondary-text text-sm px-2 py-2 -my-1 border rounded-lg font-normal leading-4 focus-within:outline-none focus-within:ring-0 border-secondary-300", invalid ? "animate-shake" : ""), children: [_jsx("input", { type: "number", ref: ref, autoComplete: "off", autoFocus: false, title: "", className: clsx("w-10 bg-transparent border-none outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0 focus:border-transparent focus:shadow-none text-primary-text text-base leading-3.5 p-0 text-right"), value: localPercent, onChange: (e) => {
69
69
  const next = e.target.value === "" ? undefined : Number(e.target.value);
70
70
  if (!Number.isNaN(next)) {
71
71
  onEditing?.();
72
72
  setLocalPercent(next);
73
73
  }
74
+ }, onKeyDown: (e) => {
75
+ if (e.key == "Enter") {
76
+ e.preventDefault();
77
+ return false;
78
+ }
74
79
  } }), _jsx("span", { children: "%" })] }) }), _jsx(PopoverContent, { side: "top", align: "center", className: "text-xs", children: "Slippage can not be out of 0.1% - 5% range." })] }));
75
80
  });
@@ -15,7 +15,7 @@ import { useInitialSettings } from '../../../../../../context/settings';
15
15
  export const SummaryRow = ({ quoteData, isQuoteLoading, values, wallet, onOpen, sourceAddress, isOpen, destination, destinationAddress, partner }) => {
16
16
  const { destination_address: destinationAddressFromQuery } = useInitialSettings();
17
17
  const addressProviderIcon = destinationAddressFromQuery && partner?.is_wallet && addressFormat(destinationAddressFromQuery, values?.to) === addressFormat(values?.destination_address, values?.to) && partner?.logo;
18
- return (_jsxs("div", { className: clsx("flex flex-col w-full p-2", { "!pb-0 !-mb-1": isOpen }), children: [values.destination_address && sourceAddress?.toLowerCase() !== values.destination_address?.toLowerCase() && (_jsxs("div", { className: `flex items-center w-full justify-between gap-1 text-sm px-2 py-3`, children: [_jsx("div", { className: "inline-flex items-center text-left text-secondary-text gap-1 pr-4", children: _jsx("label", { children: "Send to" }) }), _jsx("div", { className: "text-right text-primary-text", children: _jsxs("span", { className: "cursor-pointer hover:underline flex items-center gap-2", children: [wallet?.icon ? (_jsx(wallet.icon, { className: "w-4 h-4 p-0.5 bg-white rounded-sm" })) : addressProviderIcon ? (_jsx(ImageWithFallback, { alt: "Partner logo", className: "rounded-md object-contain h-4 w-4", src: addressProviderIcon, width: "36", height: "36" })) : (_jsx(AddressIcon, { className: "h-4 w-4", address: values.destination_address, size: 36, rounded: "4px" })), ((isValidAddress(values?.destination_address, values?.to) && values?.to) ?
18
+ return (_jsxs("div", { className: clsx("flex flex-col w-full p-2", { "!pb-0 !-mb-1": isOpen }), children: [values.destination_address && sourceAddress?.toLowerCase() !== values.destination_address?.toLowerCase() && (_jsxs("div", { className: `flex items-center w-full justify-between gap-1 text-sm px-2 py-3`, children: [_jsx("div", { className: "inline-flex items-center text-left text-secondary-text gap-1 pr-4", children: _jsx("label", { children: "Send to" }) }), _jsx("div", { className: "text-right text-primary-text", children: _jsxs("span", { className: "cursor-pointer hover:underline flex items-center gap-2", children: [wallet?.icon ? (_jsx(wallet.icon, { className: "w-4 h-4 bg-secondary-700 rounded-sm" })) : addressProviderIcon ? (_jsx(ImageWithFallback, { alt: "Partner logo", className: "rounded-md object-contain h-4 w-4", src: addressProviderIcon, width: "36", height: "36" })) : (_jsx(AddressIcon, { className: "h-4 w-4", address: values.destination_address, size: 36, rounded: "4px" })), ((isValidAddress(values?.destination_address, values?.to) && values?.to) ?
19
19
  _jsx("div", { className: "text-sm group/addressItem text-secondary-text", children: _jsx(ExtendedAddress, { address: addressFormat(values?.destination_address, values?.to), network: values?.to, showDetails: wallet ? true : false, title: wallet?.displayName?.split("-")[0], description: wallet?.providerName, logo: wallet?.icon, shouldShowChevron: false }) })
20
20
  :
21
21
  _jsx("p", { className: "text-sm text-secondary-text", children: shortenAddress(values?.destination_address) }))] }) })] })), _jsxs("div", { className: "flex items-center w-full justify-between gap-1 text-sm px-2 py-3", children: [_jsx("div", { className: "inline-flex items-center text-left text-secondary-text", children: _jsx("label", { children: "Receive at least" }) }), _jsx("div", { className: "text-right text-primary-text h-5", children: quoteData?.quote?.min_receive_amount !== undefined && !isNaN(quoteData?.quote?.min_receive_amount) && (_jsx(NumberFlow, { value: quoteData?.quote?.min_receive_amount, trend: 0, format: { maximumFractionDigits: quoteData?.quote.destination_token?.decimals || 2 }, suffix: ` ${values?.toAsset?.symbol}` })) })] }), _jsx(Slippage, { quoteData: quoteData.quote, values: values }), isOpen &&
@@ -10,7 +10,7 @@ import { useSelectedAccount } from '../../../../../../context/balanceAccounts';
10
10
  const SwapQuoteComp = ({ swapValues: values, quote: quoteData, isQuoteLoading, partner }) => {
11
11
  const [isOpen, setIsOpen] = useState(false);
12
12
  const { wallets: destWallets } = useWallet(values.to, 'autofil');
13
- const wallet = (values?.to && values?.destination_address) ? destWallets?.find(w => addressFormat(w.address, values?.to) === addressFormat(values?.destination_address, values?.to)) : undefined;
13
+ const wallet = (values?.to && values?.destination_address) ? destWallets?.find(w => w.addresses?.some(a => addressFormat(a, values.to) === addressFormat(values.destination_address, values.to))) : undefined;
14
14
  const selectedSourceAccount = useSelectedAccount("from", values?.from?.name);
15
15
  return (_jsx(Accordion, { type: "single", collapsible: true, className: "w-full", value: isOpen ? 'quote' : '', onValueChange: (v) => setIsOpen(v === 'quote'), children: _jsxs(AccordionItem, { value: "quote", className: "bg-secondary-500 rounded-2xl", children: [_jsx(AccordionTrigger, { onClick: (e) => e.preventDefault(), className: "w-full rounded-2xl flex items-center justify-between cursor-auto", children: _jsx(SummaryRow, { isQuoteLoading: isQuoteLoading, values: values, wallet: wallet, quoteData: quoteData, destination: values.to, destinationAddress: values.destination_address, onOpen: () => setIsOpen(true), isOpen: isOpen, sourceAddress: selectedSourceAccount?.address, partner: partner }) }), _jsx(AccordionContent, { className: "rounded-2xl", children: _jsx(DetailedEstimates, { swapValues: values, quote: quoteData, variant: 'base' }) }), isOpen && (_jsx("div", { className: "px-3.5 pb-3", children: _jsxs("button", { type: "button", onClick: () => setIsOpen(false), className: "mx-auto flex items-center justify-center gap-1 text-sm text-secondary-text hover:text-primary-text", children: [_jsx("span", { children: "Close details" }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 rotate-180 transition-transform" })] }) }))] }) }));
16
16
  };
@@ -100,7 +100,7 @@ export default function FormWrapper({ children, type, partner }) {
100
100
  setWalletWihdrawDone(true);
101
101
  }, []);
102
102
  return _jsx(_Fragment, { children: _jsx(Formik, { innerRef: formikRef, initialValues: initialValues, validateOnMount: true, onSubmit: handleSubmit, children: _jsxs(_Fragment, { children: [_jsx(VaulDrawer, { show: showConnectNetworkModal, setShow: setShowConnectNetworkModal, header: `${networkToConnect?.DisplayName} connect`, modalId: "showNetwork", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: networkToConnect &&
103
- _jsx(ConnectNetwork, { NetworkDisplayName: networkToConnect?.DisplayName, AppURL: networkToConnect?.AppURL }) }) }), _jsx(VaulDrawer, { show: swapModalOpen, setShow: handleShowSwapModal, header: `Complete the swap`, modalId: "showSwap", className: !swapBasicData?.use_deposit_address ? "openwithdrawalmodal" : "", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(SwapDetails, { type: "contained", onWalletWithdrawalSuccess: handleWalletWithdrawalSuccess, partner: partner }) }) }), children] }) }) });
103
+ _jsx(ConnectNetwork, { NetworkDisplayName: networkToConnect?.DisplayName, AppURL: networkToConnect?.AppURL }) }) }), _jsx(VaulDrawer, { show: swapModalOpen, setShow: handleShowSwapModal, header: `Complete the swap`, modalId: "showSwap", className: !swapBasicData?.use_deposit_address ? "expandContainerHeight" : "", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(SwapDetails, { type: "contained", onWalletWithdrawalSuccess: handleWalletWithdrawalSuccess, partner: partner }) }) }), children] }) }) });
104
104
  }
105
105
  const handleCreateSwap = async ({ query, values, partner, setShowSwapModal, createSwap, setNetworkToConnect, setShowConnectNetworkModal, setSwapId, setSubmitedFormValues }) => {
106
106
  setSubmitedFormValues(values);
@@ -130,15 +130,11 @@ const handleCreateSwap = async ({ query, values, partner, setShowSwapModal, crea
130
130
  setShowConnectNetworkModal(true);
131
131
  }
132
132
  else if (data?.code === LSAPIKnownErrorCode.NETWORK_CURRENCY_DAILY_LIMIT_REACHED) {
133
- const time = data.metadata.RemainingLimitPeriod?.split(':');
134
- const hours = Number(time[0]);
135
- const minutes = Number(time[1]);
136
- const remainingTime = `${hours > 0 ? `${hours.toFixed()} ${(hours > 1 ? 'hours' : 'hour')}` : ''} ${minutes > 0 ? `${minutes.toFixed()} ${(minutes > 1 ? 'minutes' : 'minute')}` : ''}`;
137
133
  if (data.metadata.AvailableTransactionAmount) {
138
- throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached. Please try sending up to ${data.metadata.AvailableTransactionAmount} ${values.fromAsset?.symbol} or retry in ${remainingTime}.`);
134
+ throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached. Please try sending up to ${data.metadata.AvailableTransactionAmount} ${values.fromAsset?.symbol}.`);
139
135
  }
140
136
  else {
141
- throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached. Please retry in ${remainingTime}.`);
137
+ throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached.`);
142
138
  }
143
139
  }
144
140
  else {
@@ -54,6 +54,14 @@ const NetworkForm = ({ partner }) => {
54
54
  setFieldValue('amount', (nativeTokenBalance?.amount - networkGas).toString(), true);
55
55
  }, [setFieldValue]);
56
56
  const shouldConnectWallet = (source && source?.deposit_methods?.includes('wallet') && depositMethod !== 'deposit_address' && !selectedSourceAccount) || (!source && !wallets.length && depositMethod !== 'deposit_address');
57
+ // useEffect(() => {
58
+ // if (wallets?.length) {
59
+ // const allWalletAddresses = wallets.flatMap(w => w.addresses).filter(Boolean);
60
+ // posthog.setPersonProperties({
61
+ // accounts: allWalletAddresses,
62
+ // });
63
+ // }
64
+ // }, [wallets]);
57
65
  return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "w-full flex flex-col justify-between flex-1 gap-3", children: [_jsxs("div", { className: 'flex-col relative flex justify-between gap-2 w-full leading-4', children: [!(initialSettings?.hideFrom && values?.from) && _jsx(SourcePicker, { minAllowedAmount: minAllowedAmount, maxAllowedAmount: maxAllowedAmount, fee: quote }), !initialSettings?.hideFrom && !initialSettings?.hideTo &&
58
66
  _jsx(ValueSwapperButton, { values: values, setValues: setValues, providers: providers, query: initialSettings }), !(initialSettings?.hideTo && values?.to) && _jsx(DestinationPicker, { isFeeLoading: isQuoteLoading, fee: quote, partner: partner })] }), Number(values.amount) > 0 ?
59
67
  _jsx(ReserveGasNote, { maxAllowedAmount: minAllowedAmount, minAllowedAmount: maxAllowedAmount, onSubmit: handleReserveGas })
@@ -13,5 +13,5 @@ export const defaultErrors = {
13
13
  };
14
14
  export const ErrorDisplay = (props) => {
15
15
  const { message, details } = { ...defaultErrors[props?.errorName || ''], ...props };
16
- return (_jsx("div", { className: "px-2 py-3 rounded-2xl bg-secondary-400", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "shrink-0", children: details?.icon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-primary-text font-medium leading-4 text-base mt-0.5", children: details?.title }), message ? _jsx("p", { className: "text-secondary-text text-sm leading-[18px]", children: message }) : null] })] }) }));
16
+ return (_jsx("div", { className: "px-2 py-3 rounded-2xl bg-secondary-400", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "shrink-0 p-0.5", children: details?.icon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-primary-text font-medium leading-4 text-base mt-0.5", children: details?.title }), message ? _jsx("p", { className: "text-secondary-text text-sm leading-[18px]", children: message }) : null] })] }) }));
17
17
  };
@@ -84,12 +84,12 @@ const ManualWithdraw = ({ swapBasicData, quote, depositActions, refuel, partner,
84
84
  toAsset: swapBasicData?.destination_token?.symbol
85
85
  }), [swapBasicData]);
86
86
  const { networks: withdrawalNetworks, isLoading: exchangeSourceNetworksLoading } = useExchangeNetworks(exchangeNetworkParams);
87
- const requestAmount = (_jsxs("span", { className: 'inline-flex items-center gap-1 px-1.5 mx-1 bg-secondary-300 rounded-lg', children: [_jsx("span", { children: truncateDecimals(swapBasicData?.requested_amount, swapBasicData?.source_token?.precision) }), " ", _jsx("span", { children: swapBasicData?.source_token?.symbol }), _jsx(CopyButton, { toCopy: swapBasicData?.requested_amount, iconClassName: 'text-secondary-text' })] }));
87
+ const requestAmount = (_jsxs("span", { className: 'inline-flex items-center gap-1 px-1.5 mx-1 bg-secondary-300 rounded-lg', children: [_jsx("span", { children: truncateDecimals(Number(swapBasicData?.requested_amount), swapBasicData?.source_token?.precision) }), " ", _jsx("span", { children: swapBasicData?.source_token?.symbol }), _jsx(CopyButton, { toCopy: swapBasicData?.requested_amount, iconClassName: 'text-secondary-text' })] }));
88
88
  const destinationNetwork = (_jsxs("span", { className: 'flex items-center gap-1', children: [destinationLogo && _jsx(ImageWithFallback, { src: destinationLogo, alt: "Project Logo", height: "16", width: "16", loading: "eager", className: "rounded-md object-contain" }), swapBasicData?.destination_network?.display_name] }));
89
89
  const sourceNetworkPopover = (_jsxs(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: "inline-flex items-center gap-1 px-1.5 mx-1 bg-secondary-300 rounded-lg", children: [_jsx(ImageWithFallback, { src: newNetwork?.logo || swapBasicData?.source_network?.logo, alt: "Project Logo", height: "16", width: "16", loading: "eager", className: "rounded-sm object-contain" }), _jsx("span", { children: newNetwork?.display_name || swapBasicData?.source_network?.display_name }), _jsx("span", { className: "pointer-events-none text-shadow-primary-text-tertiary", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-secondary-text", "aria-hidden": "true" }) })] }) }), _jsx(PopoverContent, { side: 'top', className: "bg-secondary-300! space-y-1 p-1! rounded-lg!", children: _jsx(CommandWrapper, { children: _jsx(CommandList, { children: withdrawalNetworks?.map((item) => {
90
90
  return (_jsx(CommandItem, { className: 'hover:bg-secondary-100 rounded-md p-1! cursor-pointer', value: item.network.name, onSelect: () => handleClick(item.network, item.token), children: _jsx("div", { className: `flex items-center justify-between w-full overflow-hidden`, children: _jsxs("div", { className: `gap-2 relative flex items-center w-full space-y-1`, children: [_jsx("div", { className: `h-6 w-6 shrink-0 mb-0!`, children: item.network.logo && (_jsx(ImageWithFallback, { src: item.network.logo, alt: "Project Logo", height: "24", width: "24", loading: "eager", className: "rounded-md object-contain" })) }), _jsx("div", { className: "flex justify-between w-full items-center", children: _jsx("span", { className: "flex items-center pb-0.5 text-sm font-medium text-primary-text pr-20", children: item.network.display_name }) })] }) }) }, item.network.name));
91
91
  }) }) }) })] }));
92
- return (_jsxs(_Fragment, { children: [_jsx(Widget.Content, { children: _jsx("div", { className: 'flex flex-col flex-1 h-full min-h-0 w-full space-y-3', children: (loading || exchangeSourceNetworksLoading) ? (_jsxs(_Fragment, { children: [_jsx(SkeletonStep, { number: 1 }), _jsx(SkeletonStep, { number: 2 }), _jsx(SkeletonStep, { number: 3 })] })) : (_jsxs(_Fragment, { children: [_jsx(Step, { number: 1, label: _jsxs("div", { className: "flex items-center justify-between gap-2 relative", children: [_jsx("span", { children: "Copy the deposit address" }), _jsx("div", { className: "relative", children: _jsxs(Popover, { open: showQR, onOpenChange: setShowQR, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "relative", children: _jsx(QRIcon, { className: "bg-secondary-300 p-1 rounded-lg cursor-pointer hover:opacity-80 fill-primary-text text-primary-text" }) }) }), _jsx(PopoverContent, { side: "left", align: "start", className: "bg-secondary-300 p-2 rounded-xl z-50", children: _jsx("div", { className: "bg-white p-2 rounded-xl shadow-lg", children: _jsx(QRCodeSVG, { className: "rounded-lg", value: depositAddress || '', includeMargin: true, size: 160, level: "H" }) }) })] }) })] }), value: _jsx("span", { className: "cursor-pointer hover:underline min-h-[20px] block", children: depositAddress ? (_jsxs("span", { className: 'flex items-center gap-1', children: [shortenAddress(depositAddress), _jsx(CopyButton, { toCopy: depositAddress || '', className: 'flex' })] })) : (_jsx("span", { className: "inline-block w-28 bg-secondary-400 h-[20px] rounded animate-pulse" })) }) }), _jsx(Step, { number: 2, label: _jsxs("span", { children: [_jsxs("span", { className: 'inline-flex items-center', children: [_jsx("span", { children: "Send" }), requestAmount] }), _jsx("span", { children: "via" }), swapBasicData?.source_exchange ? (_jsx("span", { className: "inline-flex items-center align-bottom", children: sourceNetworkPopover })) : (_jsxs("span", { className: "inline-flex items-center gap-1 mx-1 h-6 align-bottom", children: [_jsx(ImageWithFallback, { src: swapBasicData?.source_network?.logo, alt: "Project Logo", height: "16", width: "16", loading: "eager", className: "rounded-sm object-contain" }), _jsx("span", { children: swapBasicData?.source_network?.display_name })] })), _jsx("span", { children: "to the deposit address" })] }) }), _jsx(Step, { number: 3, label: _jsxs("span", { className: 'flex items-center gap-1', children: [_jsx("span", { children: "Receive" }), " ", _jsx("span", { children: truncateDecimals(quote?.receive_amount ?? 0, swapBasicData?.destination_token?.precision) }), " ", _jsx("span", { children: swapBasicData?.destination_token?.symbol }), " ", _jsx("span", { children: "at" }), " ", _jsx("span", { children: destinationNetwork })] }), value: _jsxs("span", { className: "cursor-pointer hover:underline flex items-center gap-1", children: [WalletIcon ? (_jsx(WalletIcon, { className: "w-4 h-4 p-0.5 bg-white rounded-sm" })) : addressProviderIcon ? (_jsx(ImageWithFallback, { alt: "Partner logo", className: "h-4 w-4 rounded-md object-contain", src: partner.logo, width: "36", height: "36" })) : (_jsx(AddressIcon, { className: "h-4 w-4", address: swapBasicData.destination_address, size: 36, rounded: "4px" })), ((swapBasicData?.destination_network && isValidAddress(swapBasicData?.destination_address, swapBasicData?.destination_network)) ?
92
+ return (_jsxs(_Fragment, { children: [_jsx(Widget.Content, { children: _jsx("div", { className: 'flex flex-col flex-1 h-full min-h-0 w-full space-y-3', children: (loading || exchangeSourceNetworksLoading) ? (_jsxs(_Fragment, { children: [_jsx(SkeletonStep, { number: 1 }), _jsx(SkeletonStep, { number: 2 }), _jsx(SkeletonStep, { number: 3 })] })) : (_jsxs(_Fragment, { children: [_jsx(Step, { number: 1, label: _jsxs("div", { className: "flex items-center justify-between gap-2 relative", children: [_jsx("span", { children: "Copy the deposit address" }), _jsx("div", { className: "relative", children: _jsxs(Popover, { open: showQR, onOpenChange: setShowQR, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "relative", children: _jsx(QRIcon, { className: "bg-secondary-300 p-1 rounded-lg cursor-pointer hover:opacity-80 fill-primary-text text-primary-text" }) }) }), _jsx(PopoverContent, { side: "left", align: "start", className: "bg-secondary-300 p-2 rounded-xl z-50", children: _jsx("div", { className: "bg-white p-2 rounded-xl shadow-lg", children: _jsx(QRCodeSVG, { className: "rounded-lg", value: depositAddress || '', includeMargin: true, size: 160, level: "H" }) }) })] }) })] }), value: _jsx("span", { className: "cursor-pointer hover:underline min-h-5 block", children: depositAddress ? (_jsxs("span", { className: 'flex items-center gap-1', children: [shortenAddress(depositAddress), _jsx(CopyButton, { toCopy: depositAddress || '', className: 'flex' })] })) : (_jsx("span", { className: "inline-block w-28 bg-secondary-400 h-5 rounded animate-pulse" })) }) }), _jsx(Step, { number: 2, label: _jsxs("span", { children: [_jsxs("span", { className: 'inline-flex items-center', children: [_jsx("span", { children: "Send" }), requestAmount] }), _jsx("span", { children: "via" }), swapBasicData?.source_exchange ? (_jsx("span", { className: "inline-flex items-center align-bottom", children: sourceNetworkPopover })) : (_jsxs("span", { className: "inline-flex items-center gap-1 mx-1 h-6 align-bottom", children: [_jsx(ImageWithFallback, { src: swapBasicData?.source_network?.logo, alt: "Project Logo", height: "16", width: "16", loading: "eager", className: "rounded-sm object-contain" }), _jsx("span", { children: swapBasicData?.source_network?.display_name })] })), _jsx("span", { children: "to the deposit address" })] }) }), _jsx(Step, { number: 3, label: _jsxs("span", { className: 'flex items-center gap-1', children: [_jsx("span", { children: "Receive" }), " ", _jsx("span", { children: truncateDecimals(quote?.receive_amount ?? 0, swapBasicData?.destination_token?.precision) }), " ", _jsx("span", { children: swapBasicData?.destination_token?.symbol }), " ", _jsx("span", { children: "at" }), " ", _jsx("span", { children: destinationNetwork })] }), value: _jsxs("span", { className: "cursor-pointer hover:underline flex items-center gap-1", children: [WalletIcon ? (_jsx(WalletIcon, { className: "w-4 h-4 bg-secondary-700 rounded-sm" })) : addressProviderIcon ? (_jsx(ImageWithFallback, { alt: "Partner logo", className: "h-4 w-4 rounded-md object-contain", src: partner.logo, width: "36", height: "36" })) : (_jsx(AddressIcon, { className: "h-4 w-4", address: swapBasicData.destination_address, size: 36, rounded: "4px" })), ((swapBasicData?.destination_network && isValidAddress(swapBasicData?.destination_address, swapBasicData?.destination_network)) ?
93
93
  _jsx("div", { className: "text-sm group/addressItem text-secondary-text", children: _jsx(ExtendedAddress, { address: addressFormat(swapBasicData?.destination_address, swapBasicData?.destination_network), network: swapBasicData?.destination_network, shouldShowChevron: false }) })
94
94
  :
95
95
  _jsx("p", { className: "text-sm text-secondary-text", children: shortenAddress(swapBasicData?.destination_address) }))] }) })] })) }) }), _jsx(Widget.Footer, { sticky: type == 'widget', children: _jsx(SubmitButton, { onClick: handleCopy, children: copied ? 'Copied!' : 'Copy deposit address' }) })] }));
@@ -10,7 +10,7 @@ import NumberFlow from "@number-flow/react";
10
10
  import clsx from "clsx";
11
11
  import { PriceImpact } from "../../../../../components/Input/Amount/PriceImpact";
12
12
  const Summary = (props) => {
13
- const { swap, quote, receiveAmount, quoteIsLoading } = props;
13
+ const { swap, quote, receiveAmount } = props;
14
14
  const { refuel, quote: swapQuote } = quote;
15
15
  const { source_token: sourceCurrency, destination_token: destinationCurrency, source_network: from, destination_network: to, requested_amount: requestedAmount, destination_address: destinationAddress, source_exchange: sourceExchange } = swap;
16
16
  const { hideFrom, hideTo, account, appName, } = useInitialSettings();
@@ -19,14 +19,14 @@ const Summary = (props) => {
19
19
  const partner = partnerData?.data;
20
20
  const source = (hideFrom && partner && account) ? partner : from;
21
21
  const destination = (hideTo && partner && account) ? partner : to;
22
- const requestedAmountInUsd = requestedAmount && (sourceCurrency?.price_in_usd * requestedAmount).toFixed(2);
22
+ const requestedAmountInUsd = requestedAmount && (sourceCurrency?.price_in_usd * Number(requestedAmount)).toFixed(2);
23
23
  const receiveAmountInUsd = receiveAmount ? (destinationCurrency?.price_in_usd * receiveAmount).toFixed(2) : undefined;
24
24
  const nativeCurrency = refuel?.token;
25
25
  const truncatedRefuelAmount = nativeCurrency && !!refuel ?
26
26
  truncateDecimals(refuel.amount, nativeCurrency?.precision) : null;
27
27
  const refuelAmountInUsd = nativeCurrency && ((nativeCurrency?.price_in_usd || 1) * (Number(truncatedRefuelAmount) || 0)).toFixed(2);
28
28
  return (_jsx("div", { className: "bg-secondary-500 rounded-2xl px-3 py-4 w-full relative z-10 space-y-4", children: _jsxs("div", { className: "font-normal flex flex-col w-full relative z-10 space-y-3", children: [_jsxs("div", { className: "w-full grid grid-cols-10", children: [_jsx(RouteTokenPair, { route: sourceExchange || source, token: sourceCurrency }), _jsxs("div", { className: "flex flex-col col-start-7 col-span-4 items-end", children: [requestedAmount &&
29
- _jsxs("p", { className: "text-primary-text text-sm", children: [truncateDecimals(requestedAmount, sourceCurrency.precision), " ", sourceCurrency.symbol] }), _jsx("p", { className: "text-secondary-text text-sm flex justify-end", children: _jsx(NumberFlow, { value: Number(requestedAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 }) })] })] }), _jsxs("div", { className: "relative text-secondary-text", children: [_jsx("hr", { className: "border border-secondary-400 w-full rounded-full" }), _jsx(ArrowDown, { className: "absolute left-1/2 -translate-x-1/2 top-[-10px] h-6 w-6 p-1 bg-secondary-400 rounded-md text-secondary-text" })] }), _jsxs("div", { className: "w-full grid grid-cols-10", children: [_jsx(RouteTokenPair, { route: destination, token: destinationCurrency }), receiveAmount && (_jsxs("div", { className: "flex flex-col justify-end items-end w-full col-start-7 col-span-4", children: [_jsx("p", { className: clsx("text-primary-text text-sm text-end"), children: _jsx(NumberFlow, { value: receiveAmount, suffix: ` ${destinationCurrency.symbol}`, trend: 0, format: { maximumFractionDigits: quote.quote.destination_token?.decimals || 2 } }) }), _jsxs("p", { className: "text-secondary-text text-sm flex items-center gap-1", children: [_jsx(PriceImpact, { className: "text-sm", bridgeFee: swapQuote?.blockchain_fee, destinationTokenPriceUsd: swapQuote?.destination_token?.price_in_usd, receiveAmount: swapQuote?.receive_amount, requestedAmount: swapQuote?.requested_amount, serviceFee: swapQuote?.service_fee, sourceTokenPriceUsd: swapQuote?.source_token?.price_in_usd }), _jsx(NumberFlow, { value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 })] })] }))] }), (!!refuel != undefined && nativeCurrency) ?
29
+ _jsxs("p", { className: "text-primary-text text-sm whitespace-nowrap", children: [truncateDecimals(Number(requestedAmount), sourceCurrency.precision), " ", sourceCurrency.symbol] }), _jsx("p", { className: "text-secondary-text text-sm flex justify-end", children: _jsx(NumberFlow, { value: Number(requestedAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 }) })] })] }), _jsxs("div", { className: "relative text-secondary-text", children: [_jsx("hr", { className: "border border-secondary-400 w-full rounded-full" }), _jsx(ArrowDown, { className: "absolute left-1/2 -translate-x-1/2 top-[-10px] h-6 w-6 p-1 bg-secondary-400 rounded-md text-secondary-text" })] }), _jsxs("div", { className: "w-full grid grid-cols-10", children: [_jsx(RouteTokenPair, { route: destination, token: destinationCurrency }), receiveAmount && (_jsxs("div", { className: "flex flex-col justify-end items-end w-full col-start-7 col-span-4", children: [_jsx("p", { className: clsx("text-primary-text text-sm text-end"), children: _jsx(NumberFlow, { value: receiveAmount, suffix: ` ${destinationCurrency.symbol}`, trend: 0, format: { maximumFractionDigits: quote.quote.destination_token?.decimals || 2 } }) }), _jsxs("p", { className: "text-secondary-text text-sm flex items-center gap-1", children: [_jsx(PriceImpact, { className: "text-sm", bridgeFee: swapQuote?.blockchain_fee, destinationTokenPriceUsd: swapQuote?.destination_token?.price_in_usd, receiveAmount: swapQuote?.receive_amount, requestedAmount: swapQuote?.requested_amount, serviceFee: swapQuote?.service_fee, sourceTokenPriceUsd: swapQuote?.source_token?.price_in_usd }), _jsx(NumberFlow, { value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 })] })] }))] }), (!!refuel != undefined && nativeCurrency) ?
30
30
  _jsxs("div", { className: "flex items-center justify-between w-full ", children: [_jsxs("div", { className: 'flex items-center gap-3 text-sm', children: [_jsx("span", { className: "relative z-10 flex h-8 w-8 items-center justify-center rounded-lg p-2 bg-primary/20", children: _jsx(Fuel, { className: "h-5 w-5 text-primary", "aria-hidden": "true" }) }), _jsx("p", { children: "Refuel" })] }), _jsxs("div", { className: "flex flex-col items-end", children: [_jsxs("p", { className: "text-primary-text text-sm", children: [truncatedRefuelAmount, " ", nativeCurrency?.symbol] }), _jsxs("p", { className: "text-secondary-text text-sm flex justify-end", children: ["$", refuelAmountInUsd] })] })] })
31
31
  :
32
32
  _jsx(_Fragment, {})] }) }));
@@ -41,7 +41,7 @@ const SwapSummary = () => {
41
41
  const swapData = {
42
42
  swap: {
43
43
  ...swapBasicData,
44
- requested_amount: requested_amount
44
+ requested_amount: requested_amount?.toString()
45
45
  },
46
46
  quote: {
47
47
  quote: quote,
@@ -107,7 +107,7 @@ export const SendTransactionButton = ({ error, onClick, swapData, refuel, ...pro
107
107
  setActionStateText("Preparing");
108
108
  setSwapId(undefined);
109
109
  const swapValues = {
110
- amount: swapData.requested_amount.toString(),
110
+ amount: swapData.requested_amount,
111
111
  from: swapData.source_network,
112
112
  to: swapData.destination_network,
113
113
  fromAsset: swapData.source_token,