@funkit/connect 5.5.7 → 5.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/components/Dialog/Dialog.d.ts +5 -3
- package/dist/components/Dialog/DialogContent.css.d.ts +2 -1
- package/dist/hooks/queries/useMeldLimits.d.ts +158 -2
- package/dist/hooks/useCheckoutDirectExecution.d.ts +3 -1
- package/dist/index.css +19 -17
- package/dist/index.js +386 -352
- package/dist/modals/CheckoutModal/InputAmount/QuickOptions.d.ts +6 -3
- package/dist/modals/CheckoutModal/InputAmount/state.d.ts +19 -17
- package/dist/modals/CheckoutModal/InputAmount/useAmountInput.d.ts +2 -2
- package/dist/modals/CheckoutModal/InputAmount/utils.d.ts +1 -0
- package/dist/modals/CheckoutModal/MeldCurrencySelect/MeldCurrencySelect.d.ts +0 -2
- package/dist/utils/flags/config.d.ts +4 -0
- package/dist/wallets/walletConnectors/index.js +39 -39
- package/package.json +13 -17
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
lightTheme
|
|
4
|
-
} from "./chunk-RN4I4Y57.js";
|
|
5
2
|
import {
|
|
6
3
|
darkTheme
|
|
7
4
|
} from "./chunk-ICCAQZHZ.js";
|
|
5
|
+
import {
|
|
6
|
+
lightTheme
|
|
7
|
+
} from "./chunk-RN4I4Y57.js";
|
|
8
8
|
import {
|
|
9
9
|
systemFontStack
|
|
10
10
|
} from "./chunk-R2UFCJL7.js";
|
|
@@ -12,18 +12,19 @@ import {
|
|
|
12
12
|
// src/components/Dialog/DialogContent.css.ts
|
|
13
13
|
var BASE_DIALOG_PADDING = "6";
|
|
14
14
|
var SCROLL_BAR_WIDTH = 6;
|
|
15
|
-
var contentCollapsed = "
|
|
16
|
-
var contentExpanded = "
|
|
15
|
+
var contentCollapsed = "_1pzt423f";
|
|
16
|
+
var contentExpanded = "_1pzt423e";
|
|
17
17
|
var dialog = "_1pzt4231 _1rsrm2fjf _1rsrm2fzx _1rsrm2fw _1rsrm2f1b _1rsrm2f1f _1rsrm2f1cx _1rsrm2fa _1rsrm2f1p _1rsrm2fbs _1rsrm2fev _1rsrm2fca _1rsrm2fdh _1rsrm2fcq";
|
|
18
18
|
var dialogCompact = "_1pzt4232 _1pzt4231 _1rsrm2fjf _1rsrm2fzx _1rsrm2fw _1rsrm2f1b _1rsrm2f1f _1rsrm2f1cx _1rsrm2fa _1rsrm2f1p _1rsrm2fbs _1rsrm2fev _1rsrm2fca _1rsrm2fdh _1rsrm2fcq";
|
|
19
19
|
var dialogMedium = "_1pzt4233 _1pzt4231 _1rsrm2fjf _1rsrm2fzx _1rsrm2fw _1rsrm2f1b _1rsrm2f1f _1rsrm2f1cx _1rsrm2fa _1rsrm2f1p _1rsrm2fbs _1rsrm2fev _1rsrm2fca _1rsrm2fdh _1rsrm2fcq";
|
|
20
|
-
var dialogMobile = "
|
|
21
|
-
var
|
|
22
|
-
var
|
|
23
|
-
var
|
|
24
|
-
var
|
|
25
|
-
var
|
|
26
|
-
var
|
|
20
|
+
var dialogMobile = "_1pzt4237 _1rsrm2fx _1rsrm2f1f";
|
|
21
|
+
var dividerTransition = "_1pzt423d";
|
|
22
|
+
var fullHeightContent = "_1pzt423b";
|
|
23
|
+
var noPaddingContent = "_1pzt423c";
|
|
24
|
+
var scrollContent = "_1pzt4239 _1rsrm2fg0";
|
|
25
|
+
var scrollbarHidden = "_1pzt423a";
|
|
26
|
+
var withoutBottomPadding = "_1pzt4235";
|
|
27
|
+
var withoutSidePadding = "_1pzt4234";
|
|
27
28
|
|
|
28
29
|
// src/modals/DevTest/DevEmbed.tsx
|
|
29
30
|
import React2 from "react";
|
|
@@ -509,7 +510,7 @@ import React256, {
|
|
|
509
510
|
useCallback as useCallback47,
|
|
510
511
|
useContext as useContext18,
|
|
511
512
|
useEffect as useEffect48,
|
|
512
|
-
useMemo as
|
|
513
|
+
useMemo as useMemo43,
|
|
513
514
|
useState as useState67
|
|
514
515
|
} from "react";
|
|
515
516
|
import { useConfig as useConfig5, useConnect as useConnect2, useDisconnect as useDisconnect2 } from "wagmi";
|
|
@@ -1031,7 +1032,7 @@ import React255, {
|
|
|
1031
1032
|
useCallback as useCallback46,
|
|
1032
1033
|
useContext as useContext17,
|
|
1033
1034
|
useEffect as useEffect47,
|
|
1034
|
-
useMemo as
|
|
1035
|
+
useMemo as useMemo42,
|
|
1035
1036
|
useState as useState66
|
|
1036
1037
|
} from "react";
|
|
1037
1038
|
import { useAccount as useAccount9, useAccountEffect as useAccountEffect2, useConfig as useConfig4 } from "wagmi";
|
|
@@ -3237,7 +3238,7 @@ var flagConfig = {
|
|
|
3237
3238
|
{
|
|
3238
3239
|
key: "userId",
|
|
3239
3240
|
type: "pctRollout",
|
|
3240
|
-
pct:
|
|
3241
|
+
pct: 50
|
|
3241
3242
|
},
|
|
3242
3243
|
{
|
|
3243
3244
|
key: "apiKey",
|
|
@@ -3605,8 +3606,10 @@ var flagConfig = {
|
|
|
3605
3606
|
"0x0D6e43CA32545B3dc2FE6f93AafBD7e640F548d4",
|
|
3606
3607
|
"0x236c60C57a8B9ca563Fb0dA5199FDdCB686d91E8",
|
|
3607
3608
|
// greg
|
|
3608
|
-
"0x4a1457fa2845bAfE8D3909cA3C5ac6107be312Dd"
|
|
3609
|
+
"0x4a1457fa2845bAfE8D3909cA3C5ac6107be312Dd",
|
|
3609
3610
|
// william PM
|
|
3611
|
+
"0xfCB8B2d294eD7373B3B590dd7C0CBC430d41a9a0"
|
|
3612
|
+
// Arun from Meld
|
|
3610
3613
|
]
|
|
3611
3614
|
}
|
|
3612
3615
|
],
|
|
@@ -3665,6 +3668,14 @@ var flagConfig = {
|
|
|
3665
3668
|
PLN: [370, 1860, 3715],
|
|
3666
3669
|
SGD: [130, 645, 1285]
|
|
3667
3670
|
})
|
|
3671
|
+
},
|
|
3672
|
+
[FlagKey.MinTokenTransferValue]: {
|
|
3673
|
+
type: "string",
|
|
3674
|
+
default_value: JSON.stringify({
|
|
3675
|
+
CA: { mainnet: 80, nonMainnet: 15 },
|
|
3676
|
+
AU: { mainnet: 90, nonMainnet: 20 },
|
|
3677
|
+
DEFAULT: { mainnet: 50, nonMainnet: 10 }
|
|
3678
|
+
})
|
|
3668
3679
|
}
|
|
3669
3680
|
};
|
|
3670
3681
|
|
|
@@ -3930,7 +3941,7 @@ import {
|
|
|
3930
3941
|
isTokenEquivalent as isTokenEquivalent2,
|
|
3931
3942
|
round
|
|
3932
3943
|
} from "@funkit/utils";
|
|
3933
|
-
import { polygon as polygon2 } from "viem/chains";
|
|
3944
|
+
import { arbitrum as arbitrum2, polygon as polygon2 } from "viem/chains";
|
|
3934
3945
|
|
|
3935
3946
|
// src/hooks/useCheckoutDirectExecution.ts
|
|
3936
3947
|
import { DirectExecutionType } from "@funkit/api-base";
|
|
@@ -4050,13 +4061,17 @@ function isVertexDirectExecution({
|
|
|
4050
4061
|
config,
|
|
4051
4062
|
paymentMethod,
|
|
4052
4063
|
sourceAsset,
|
|
4053
|
-
sourceChain
|
|
4064
|
+
sourceChain,
|
|
4065
|
+
targetAsset,
|
|
4066
|
+
targetChain
|
|
4054
4067
|
}) {
|
|
4055
4068
|
return isVertexCustomer(apiKey) && isCheckoutPostActionRequired(config) && paymentMethod === "balance" /* ACCOUNT_BALANCE */ && isTokenEquivalent({
|
|
4056
4069
|
firstTokenAddress: sourceAsset,
|
|
4057
4070
|
firstTokenChainId: sourceChain,
|
|
4058
|
-
|
|
4059
|
-
|
|
4071
|
+
// consider the current target asset and chain first before the config values, reasoning is the real values get updated after submitting the Select Asset step, not when the Receive token dropdown changes value
|
|
4072
|
+
// if needed, we can still provide config values as current target asset and chain
|
|
4073
|
+
secondTokenAddress: targetAsset ?? config.targetAsset,
|
|
4074
|
+
secondTokenChainId: targetChain ?? config.targetChain
|
|
4060
4075
|
});
|
|
4061
4076
|
}
|
|
4062
4077
|
function useCheckoutDirectExecution() {
|
|
@@ -4231,6 +4246,9 @@ var DEFAULT_CHECKOUT_HISTORY_DETAIL_TITLE = "Your Purchase";
|
|
|
4231
4246
|
var ASSET_DECIMALS = 5;
|
|
4232
4247
|
var USD_DECIMALS = 2;
|
|
4233
4248
|
var USD_INITIAL_AMOUNT = 100;
|
|
4249
|
+
function getDefaultAmountFromQuickOptions(quickOptions) {
|
|
4250
|
+
return quickOptions?.[Math.floor((quickOptions.length - 1) / 2)];
|
|
4251
|
+
}
|
|
4234
4252
|
function getUsdMaxAmount(maxUsd) {
|
|
4235
4253
|
if (maxUsd < Number.MAX_VALUE) return maxUsd;
|
|
4236
4254
|
return null;
|
|
@@ -4353,6 +4371,10 @@ function isDefaultToken(asset, checkoutConfig) {
|
|
|
4353
4371
|
);
|
|
4354
4372
|
}
|
|
4355
4373
|
var isPolygonEcosystemToken = (chainId, tokenAddress) => chainId === polygon2.id.toString() && tokenAddress === "0x0000000000000000000000000000000000001010";
|
|
4374
|
+
var isVertexTokenOnArbitrum = (chainId, tokenAddress) => chainId === arbitrum2.id.toString() && isTokenAddressEquivalent2({
|
|
4375
|
+
firstTokenAddress: tokenAddress,
|
|
4376
|
+
secondTokenAddress: "0x95146881b86b3ee99e63705ec87afe29fcc044d9"
|
|
4377
|
+
});
|
|
4356
4378
|
var isAssetUsableToPayForCheckout = ({
|
|
4357
4379
|
apiKey,
|
|
4358
4380
|
config,
|
|
@@ -4380,24 +4402,28 @@ var isAssetUsableToPayForCheckout = ({
|
|
|
4380
4402
|
if (isSameAsPurchasingToken) {
|
|
4381
4403
|
return { isUsable: false, reason: "Not Applicable" };
|
|
4382
4404
|
}
|
|
4405
|
+
const isVertexDirectExecutionCase = isVertexDirectExecution({
|
|
4406
|
+
apiKey,
|
|
4407
|
+
config,
|
|
4408
|
+
paymentMethod,
|
|
4409
|
+
targetAsset: targetTokenAddress,
|
|
4410
|
+
targetChain: targetChainId,
|
|
4411
|
+
sourceAsset: assetTokenAddress,
|
|
4412
|
+
sourceChain: assetChainId
|
|
4413
|
+
});
|
|
4383
4414
|
const usableAmountEstimation = getUsdAvailableAmount(
|
|
4384
4415
|
targetChainId,
|
|
4385
4416
|
assetChainId,
|
|
4386
4417
|
assetUsdAmount,
|
|
4387
4418
|
paymentMethod,
|
|
4388
|
-
|
|
4389
|
-
apiKey,
|
|
4390
|
-
config,
|
|
4391
|
-
paymentMethod,
|
|
4392
|
-
sourceAsset: assetTokenAddress,
|
|
4393
|
-
sourceChain: assetChainId
|
|
4394
|
-
})
|
|
4419
|
+
isVertexDirectExecutionCase
|
|
4395
4420
|
);
|
|
4396
4421
|
if (usableAmountEstimation !== null && usableAmountEstimation < getUsdMinAmount(paymentMethod)) {
|
|
4397
4422
|
return { isUsable: false, reason: LOW_BALANCE };
|
|
4398
4423
|
}
|
|
4424
|
+
const isVertexTokenDisabledOnArbitrum = isVertexTokenOnArbitrum(assetChainId, assetTokenAddress) && !isVertexDirectExecutionCase;
|
|
4399
4425
|
const isConnectedAccountSupported = loginType !== "web2" /* Web2 */ || FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO[assetChainId]?.isFunWalletSupported;
|
|
4400
|
-
const isSupported = isAllowedForCheckout && isConnectedAccountSupported && FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO[assetChainId]?.isCheckoutSupported;
|
|
4426
|
+
const isSupported = isAllowedForCheckout && isConnectedAccountSupported && FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO[assetChainId]?.isCheckoutSupported && !isVertexTokenDisabledOnArbitrum;
|
|
4401
4427
|
return {
|
|
4402
4428
|
isUsable: !!isSupported,
|
|
4403
4429
|
reason: !isSupported ? "Unsupported" : ""
|
|
@@ -6070,7 +6096,7 @@ var HelpIcon = () => {
|
|
|
6070
6096
|
fill: "none",
|
|
6071
6097
|
xmlns: "http://www.w3.org/2000/svg"
|
|
6072
6098
|
},
|
|
6073
|
-
/* @__PURE__ */ React57.createElement("g", {
|
|
6099
|
+
/* @__PURE__ */ React57.createElement("g", { clipPath: "url(#clip0_29018_24767)" }, /* @__PURE__ */ React57.createElement(
|
|
6074
6100
|
"path",
|
|
6075
6101
|
{
|
|
6076
6102
|
d: "M6.09825 6.50016C6.25498 6.05461 6.56435 5.6789 6.97155 5.43958C7.37875 5.20027 7.85751 5.11279 8.32303 5.19264C8.78855 5.27249 9.21079 5.51451 9.51497 5.87585C9.81914 6.23718 9.98562 6.69451 9.98491 7.16683C9.98491 8.50016 7.98492 9.16683 7.98492 9.16683M8.03825 11.8335H8.04492M14.7049 8.50016C14.7049 12.1821 11.7201 15.1668 8.03825 15.1668C4.35635 15.1668 1.37158 12.1821 1.37158 8.50016C1.37158 4.81826 4.35635 1.8335 8.03825 1.8335C11.7201 1.8335 14.7049 4.81826 14.7049 8.50016Z",
|
|
@@ -6191,7 +6217,8 @@ function Dialog({
|
|
|
6191
6217
|
titleId,
|
|
6192
6218
|
isHidden = false,
|
|
6193
6219
|
isSmartCloseable = false,
|
|
6194
|
-
|
|
6220
|
+
withoutSidePadding: withoutSidePadding2 = false,
|
|
6221
|
+
withoutBottomPadding: withoutBottomPadding2 = false,
|
|
6195
6222
|
withTransition = true
|
|
6196
6223
|
}) {
|
|
6197
6224
|
const { allowBackgroundScroll } = useFunkitConfig();
|
|
@@ -6277,7 +6304,8 @@ function Dialog({
|
|
|
6277
6304
|
/* @__PURE__ */ React59.createElement(FocusTrap, { className: content }, /* @__PURE__ */ React59.createElement(
|
|
6278
6305
|
DialogWrapper,
|
|
6279
6306
|
{
|
|
6280
|
-
|
|
6307
|
+
withoutSidePadding: withoutSidePadding2,
|
|
6308
|
+
withoutBottomPadding: withoutBottomPadding2
|
|
6281
6309
|
},
|
|
6282
6310
|
children
|
|
6283
6311
|
))
|
|
@@ -6289,7 +6317,8 @@ function Dialog({
|
|
|
6289
6317
|
}
|
|
6290
6318
|
var DialogWrapper = ({
|
|
6291
6319
|
children,
|
|
6292
|
-
|
|
6320
|
+
withoutSidePadding: withoutSidePadding2 = false,
|
|
6321
|
+
withoutBottomPadding: withoutBottomPadding2 = false
|
|
6293
6322
|
}) => {
|
|
6294
6323
|
const mobile = isMobile2();
|
|
6295
6324
|
const modalSize = useContext9(ModalSizeContext);
|
|
@@ -6304,7 +6333,8 @@ var DialogWrapper = ({
|
|
|
6304
6333
|
className: clsx6(
|
|
6305
6334
|
mapModalSizeToClassName[modalSize],
|
|
6306
6335
|
mobile && dialogMobile,
|
|
6307
|
-
|
|
6336
|
+
withoutSidePadding2 && withoutSidePadding,
|
|
6337
|
+
withoutBottomPadding2 && withoutBottomPadding
|
|
6308
6338
|
)
|
|
6309
6339
|
},
|
|
6310
6340
|
children
|
|
@@ -7030,7 +7060,7 @@ function getCheckoutCompletionTime(checkout) {
|
|
|
7030
7060
|
}
|
|
7031
7061
|
|
|
7032
7062
|
// src/components/FunCheckoutHistory/FunCheckoutHistoryDetail.tsx
|
|
7033
|
-
import React221, { useCallback as useCallback40, useMemo as
|
|
7063
|
+
import React221, { useCallback as useCallback40, useMemo as useMemo36, useState as useState57 } from "react";
|
|
7034
7064
|
import { createPortal as createPortal14 } from "react-dom";
|
|
7035
7065
|
|
|
7036
7066
|
// src/components/HelpAlert/HelpAlert.tsx
|
|
@@ -7785,7 +7815,7 @@ import {
|
|
|
7785
7815
|
getAllWalletTokens
|
|
7786
7816
|
} from "@funkit/api-base";
|
|
7787
7817
|
import { keepPreviousData, useQuery as useQuery5 } from "@tanstack/react-query";
|
|
7788
|
-
import { arbitrum as
|
|
7818
|
+
import { arbitrum as arbitrum3, polygon as polygon3 } from "viem/chains";
|
|
7789
7819
|
import { useAccount as useAccount3 } from "wagmi";
|
|
7790
7820
|
|
|
7791
7821
|
// src/utils/assets.ts
|
|
@@ -7820,7 +7850,7 @@ function normalizeAssetSymbol(asset) {
|
|
|
7820
7850
|
if (isTokenEquivalent3({
|
|
7821
7851
|
firstTokenChainId: asset.chainId,
|
|
7822
7852
|
firstTokenAddress: asset.contractAddress,
|
|
7823
|
-
secondTokenChainId:
|
|
7853
|
+
secondTokenChainId: arbitrum3.id.toString(),
|
|
7824
7854
|
secondTokenAddress: ARBITRUM_USDCE_TOKEN
|
|
7825
7855
|
})) {
|
|
7826
7856
|
return { ...asset, symbol: "USDC.e" };
|
|
@@ -10705,7 +10735,7 @@ var BankIconActive = ({ size = 20 }) => {
|
|
|
10705
10735
|
|
|
10706
10736
|
// src/components/FunConnectOptions/FunSignInStep.tsx
|
|
10707
10737
|
import { groupBy, isMobile as isMobile8, isSafari as isSafari3, redirectInMobile as redirectInMobile2 } from "@funkit/utils";
|
|
10708
|
-
import React214, { Fragment as Fragment3, useCallback as useCallback39, useMemo as
|
|
10738
|
+
import React214, { Fragment as Fragment3, useCallback as useCallback39, useMemo as useMemo34, useState as useState55 } from "react";
|
|
10709
10739
|
|
|
10710
10740
|
// src/providers/walletConnectDeepLink.ts
|
|
10711
10741
|
var storageKey2 = "WALLETCONNECT_DEEPLINK_CHOICE";
|
|
@@ -11302,7 +11332,7 @@ var SocialsIcon = () => {
|
|
|
11302
11332
|
};
|
|
11303
11333
|
|
|
11304
11334
|
// src/components/FunConnectOptions/FunConnectOptions.tsx
|
|
11305
|
-
import React213, { useCallback as useCallback38, useMemo as
|
|
11335
|
+
import React213, { useCallback as useCallback38, useMemo as useMemo33, useState as useState54 } from "react";
|
|
11306
11336
|
|
|
11307
11337
|
// src/hooks/useAnimatedNavigation.ts
|
|
11308
11338
|
import { useCallback as useCallback16, useState as useState17 } from "react";
|
|
@@ -14223,6 +14253,7 @@ import {
|
|
|
14223
14253
|
noop as noop4
|
|
14224
14254
|
} from "@funkit/utils";
|
|
14225
14255
|
import React124, { useMemo as useMemo17, useState as useState23 } from "react";
|
|
14256
|
+
import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO14 } from "@funkit/chains";
|
|
14226
14257
|
import clsx13 from "clsx";
|
|
14227
14258
|
import { motion as motion4, useAnimationControls } from "motion/react";
|
|
14228
14259
|
|
|
@@ -14262,6 +14293,8 @@ var NO_DATA = {
|
|
|
14262
14293
|
function renderRelayFee(relayQuote) {
|
|
14263
14294
|
const { details, fees } = relayQuote;
|
|
14264
14295
|
const gasUsd = Number.parseFloat(fees?.gas?.amountUsd || "0");
|
|
14296
|
+
const destinationChainId = details?.currencyOut?.currency?.chainId || "";
|
|
14297
|
+
const chainName = FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO14[destinationChainId]?.name;
|
|
14265
14298
|
const totalImpactStr = (details?.totalImpact?.percent || "0").replace("-", "");
|
|
14266
14299
|
const totalImpact = Number.parseFloat(totalImpactStr);
|
|
14267
14300
|
const swapImpactStr = (details?.swapImpact?.percent || "0").replace("-", "");
|
|
@@ -14288,13 +14321,7 @@ function renderRelayFee(relayQuote) {
|
|
|
14288
14321
|
label: "Network cost",
|
|
14289
14322
|
valueIcon: /* @__PURE__ */ React124.createElement(GasIcon, null),
|
|
14290
14323
|
value: formatCurrencyAndStringify4(gasUsd),
|
|
14291
|
-
tooltipText: /* @__PURE__ */ React124.createElement(React124.Fragment, null, "Estimated gas cost for completing your transaction, including the network fee and routing gas fees. The final cost may vary based on network conditions."
|
|
14292
|
-
FunLinkButton,
|
|
14293
|
-
{
|
|
14294
|
-
href: "https://docs.polymarket.com/docs/price-impact",
|
|
14295
|
-
text: "Learn more"
|
|
14296
|
-
}
|
|
14297
|
-
))
|
|
14324
|
+
tooltipText: /* @__PURE__ */ React124.createElement(React124.Fragment, null, "Estimated gas cost for completing your transaction, including the network fee and routing gas fees. The final cost may vary based on network conditions.")
|
|
14298
14325
|
},
|
|
14299
14326
|
{
|
|
14300
14327
|
label: "Price impact",
|
|
@@ -14324,7 +14351,7 @@ function renderRelayFee(relayQuote) {
|
|
|
14324
14351
|
display: "flex",
|
|
14325
14352
|
justifyContent: "space-between"
|
|
14326
14353
|
},
|
|
14327
|
-
/* @__PURE__ */ React124.createElement(Text, { size: "10" }, "Fill gas (
|
|
14354
|
+
/* @__PURE__ */ React124.createElement(Text, { size: "10" }, "Fill gas ", chainName ? `(${chainName})` : ""),
|
|
14328
14355
|
/* @__PURE__ */ React124.createElement(Text, { size: "10", weight: "medium" }, formatCurrencyAndStringify4(relayGas))
|
|
14329
14356
|
), /* @__PURE__ */ React124.createElement(
|
|
14330
14357
|
Box,
|
|
@@ -14335,26 +14362,12 @@ function renderRelayFee(relayQuote) {
|
|
|
14335
14362
|
},
|
|
14336
14363
|
/* @__PURE__ */ React124.createElement(Text, { size: "10" }, "Fun.xyz fee"),
|
|
14337
14364
|
/* @__PURE__ */ React124.createElement(Text, { size: "10", weight: "medium" }, formatPercent(appFeePercent))
|
|
14338
|
-
)), /* @__PURE__ */ React124.createElement(FunDivider, null), /* @__PURE__ */ React124.createElement(Box, null, "Price impact is the difference between the expected and executed price.", /* @__PURE__ */ React124.createElement("br", null), /* @__PURE__ */ React124.createElement("br", null), "Final cost may vary based on network conditions."
|
|
14339
|
-
FunLinkButton,
|
|
14340
|
-
{
|
|
14341
|
-
inline: true,
|
|
14342
|
-
href: "https://docs.polymarket.com/docs/price-impact",
|
|
14343
|
-
text: "Learn more"
|
|
14344
|
-
}
|
|
14345
|
-
)))
|
|
14365
|
+
)), /* @__PURE__ */ React124.createElement(FunDivider, null), /* @__PURE__ */ React124.createElement(Box, null, "Price impact is the difference between the expected and executed price.", /* @__PURE__ */ React124.createElement("br", null), /* @__PURE__ */ React124.createElement("br", null), "Final cost may vary based on network conditions."))
|
|
14346
14366
|
},
|
|
14347
14367
|
{
|
|
14348
14368
|
label: "Max slippage",
|
|
14349
14369
|
value: formatPercent(maxSlippage),
|
|
14350
|
-
tooltipText: /* @__PURE__ */ React124.createElement(React124.Fragment, null, "Slippage occurs due to price changes during trade execution. Slippage limits are adjusted based on your asset to ensure a reliable, timely execution.", /* @__PURE__ */ React124.createElement("br", null), /* @__PURE__ */ React124.createElement("br", null), "The slippage is set as low as possible. If it is required to be higher than 1.50% during execution, Fun.xyz will cover the difference."
|
|
14351
|
-
FunLinkButton,
|
|
14352
|
-
{
|
|
14353
|
-
inline: true,
|
|
14354
|
-
href: "https://docs.polymarket.com/docs/price-impact",
|
|
14355
|
-
text: "Learn more"
|
|
14356
|
-
}
|
|
14357
|
-
))
|
|
14370
|
+
tooltipText: /* @__PURE__ */ React124.createElement(React124.Fragment, null, "Slippage occurs due to price changes during trade execution. Slippage limits are adjusted based on your asset to ensure a reliable, timely execution.", /* @__PURE__ */ React124.createElement("br", null), /* @__PURE__ */ React124.createElement("br", null), "The slippage is set as low as possible. If it is required to be higher than 1.50% during execution, Fun.xyz will cover the difference.")
|
|
14358
14371
|
}
|
|
14359
14372
|
]
|
|
14360
14373
|
};
|
|
@@ -16475,7 +16488,7 @@ var useMeldDefaultCurrency = (paymentMethod) => {
|
|
|
16475
16488
|
const { userIpInfo } = useFunkitUserIp();
|
|
16476
16489
|
const enableMeld = useFlag(FlagKey18.EnableMeldPayment);
|
|
16477
16490
|
const query = useQuery12({
|
|
16478
|
-
queryKey: ["meld", "defaultCurrency"],
|
|
16491
|
+
queryKey: ["meld", "defaultCurrency", paymentMethod],
|
|
16479
16492
|
queryFn: async () => {
|
|
16480
16493
|
if (!apiKey) return "";
|
|
16481
16494
|
const response = await getMeldDefaultFiat({
|
|
@@ -16494,6 +16507,92 @@ var useMeldDefaultCurrency = (paymentMethod) => {
|
|
|
16494
16507
|
return query;
|
|
16495
16508
|
};
|
|
16496
16509
|
|
|
16510
|
+
// src/hooks/queries/useMeldLimits.ts
|
|
16511
|
+
import { getMeldFiatLimits } from "@funkit/api-base";
|
|
16512
|
+
import { formatCurrencyAndStringify as formatCurrencyAndStringify5 } from "@funkit/utils";
|
|
16513
|
+
import { useQuery as useQuery13 } from "@tanstack/react-query";
|
|
16514
|
+
|
|
16515
|
+
// src/hooks/queries/useMeldCryptoCurrencyCode.ts
|
|
16516
|
+
function useMeldCryptoCurrencyCode() {
|
|
16517
|
+
const { checkoutItem } = useCheckoutContext();
|
|
16518
|
+
const _targetChain = checkoutItem?.initSettings.config.targetChain;
|
|
16519
|
+
const _targetAsset = checkoutItem?.initSettings.config.targetAsset;
|
|
16520
|
+
return "USDC_POLYGON";
|
|
16521
|
+
}
|
|
16522
|
+
|
|
16523
|
+
// src/hooks/queries/useMeldLimits.ts
|
|
16524
|
+
var useMeldLimits = (isEnabled = true) => {
|
|
16525
|
+
const { apiKey } = useFunkitConfig();
|
|
16526
|
+
const { userIpInfo } = useFunkitUserIp();
|
|
16527
|
+
const cryptoCurrency = useMeldCryptoCurrencyCode();
|
|
16528
|
+
const countryCode = userIpInfo?.alpha2;
|
|
16529
|
+
const query = useQuery13({
|
|
16530
|
+
queryKey: ["meld", "limits", countryCode, cryptoCurrency],
|
|
16531
|
+
queryFn: async () => {
|
|
16532
|
+
if (!apiKey || !countryCode) return void 0;
|
|
16533
|
+
const response = await getMeldFiatLimits({
|
|
16534
|
+
params: {
|
|
16535
|
+
countries: [countryCode],
|
|
16536
|
+
cryptoCurrencies: cryptoCurrency ? [cryptoCurrency] : [],
|
|
16537
|
+
// left out intentionally to preload other currency limits
|
|
16538
|
+
fiatCurrencies: []
|
|
16539
|
+
},
|
|
16540
|
+
apiKey
|
|
16541
|
+
});
|
|
16542
|
+
return response?.limits;
|
|
16543
|
+
},
|
|
16544
|
+
enabled: isEnabled && !!apiKey && !!countryCode && !!cryptoCurrency,
|
|
16545
|
+
refetchOnMount: false,
|
|
16546
|
+
refetchOnReconnect: false,
|
|
16547
|
+
refetchOnWindowFocus: false,
|
|
16548
|
+
staleTime: 1e3 * 60 * 60
|
|
16549
|
+
// 1 hour
|
|
16550
|
+
});
|
|
16551
|
+
return query;
|
|
16552
|
+
};
|
|
16553
|
+
var useMeldLimit = (fiatCurrency) => {
|
|
16554
|
+
const query = useMeldLimits();
|
|
16555
|
+
return {
|
|
16556
|
+
...query,
|
|
16557
|
+
data: query.data?.find((limit) => limit.currencyCode === fiatCurrency)
|
|
16558
|
+
};
|
|
16559
|
+
};
|
|
16560
|
+
var useMeldLimitError = (amount, fiatCurrency) => {
|
|
16561
|
+
const { data: meldLimit } = useMeldLimit(fiatCurrency);
|
|
16562
|
+
if (!meldLimit) return void 0;
|
|
16563
|
+
if (amount < meldLimit.minimumAmount) {
|
|
16564
|
+
const limit = formatCurrencyAndStringify5(
|
|
16565
|
+
meldLimit.minimumAmount ?? 0,
|
|
16566
|
+
{},
|
|
16567
|
+
{
|
|
16568
|
+
currency: fiatCurrency,
|
|
16569
|
+
currencyDisplay: "narrowSymbol",
|
|
16570
|
+
minimumFractionDigits: 0
|
|
16571
|
+
}
|
|
16572
|
+
);
|
|
16573
|
+
return {
|
|
16574
|
+
issue: "Amount below minimum",
|
|
16575
|
+
suggestion: `Input an amount greater than ${limit}.`
|
|
16576
|
+
};
|
|
16577
|
+
}
|
|
16578
|
+
if (amount > meldLimit.maximumAmount) {
|
|
16579
|
+
const limit = formatCurrencyAndStringify5(
|
|
16580
|
+
meldLimit.maximumAmount ?? 0,
|
|
16581
|
+
{},
|
|
16582
|
+
{
|
|
16583
|
+
currency: fiatCurrency,
|
|
16584
|
+
currencyDisplay: "narrowSymbol",
|
|
16585
|
+
minimumFractionDigits: 0
|
|
16586
|
+
}
|
|
16587
|
+
);
|
|
16588
|
+
return {
|
|
16589
|
+
issue: "Amount above maximum",
|
|
16590
|
+
suggestion: `Input an amount lower than ${limit}.`
|
|
16591
|
+
};
|
|
16592
|
+
}
|
|
16593
|
+
return void 0;
|
|
16594
|
+
};
|
|
16595
|
+
|
|
16497
16596
|
// src/modals/CheckoutModal/InputAmount/InputAmountLoaded.tsx
|
|
16498
16597
|
import {
|
|
16499
16598
|
FlagKey as FlagKey21,
|
|
@@ -16502,7 +16601,7 @@ import {
|
|
|
16502
16601
|
isTokenEquivalent as isTokenEquivalent6,
|
|
16503
16602
|
round as round3
|
|
16504
16603
|
} from "@funkit/utils";
|
|
16505
|
-
import React150, { useMemo as
|
|
16604
|
+
import React150, { useMemo as useMemo22 } from "react";
|
|
16506
16605
|
|
|
16507
16606
|
// src/components/CurrencySelector/CurrencySelector.tsx
|
|
16508
16607
|
import React139 from "react";
|
|
@@ -16579,7 +16678,7 @@ import React142 from "react";
|
|
|
16579
16678
|
// src/components/MeldQuoteItem/MeldQuoteItem.tsx
|
|
16580
16679
|
import {
|
|
16581
16680
|
formatCryptoAndStringify as formatCryptoAndStringify2,
|
|
16582
|
-
formatCurrencyAndStringify as
|
|
16681
|
+
formatCurrencyAndStringify as formatCurrencyAndStringify6
|
|
16583
16682
|
} from "@funkit/utils";
|
|
16584
16683
|
import React141 from "react";
|
|
16585
16684
|
|
|
@@ -16649,7 +16748,7 @@ var MeldQuoteItem = ({
|
|
|
16649
16748
|
}
|
|
16650
16749
|
}
|
|
16651
16750
|
);
|
|
16652
|
-
const fiatAmount =
|
|
16751
|
+
const fiatAmount = formatCurrencyAndStringify6(
|
|
16653
16752
|
quote.sourceAmount,
|
|
16654
16753
|
{},
|
|
16655
16754
|
{ currency: quote.sourceCurrencyCode }
|
|
@@ -16668,8 +16767,8 @@ var MeldQuoteItem = ({
|
|
|
16668
16767
|
/* @__PURE__ */ React141.createElement(Box, { display: "flex", alignItems: "center", gap: "8" }, /* @__PURE__ */ React141.createElement(Box, { justifyContent: "center", display: "flex", alignItems: "center" }, /* @__PURE__ */ React141.createElement(
|
|
16669
16768
|
AsyncImage,
|
|
16670
16769
|
{
|
|
16671
|
-
width: "
|
|
16672
|
-
height: "
|
|
16770
|
+
width: "28",
|
|
16771
|
+
height: "28",
|
|
16673
16772
|
src: getMeldProviderIconUrl(quote.serviceProvider),
|
|
16674
16773
|
fallbackSrc: FALLBACK_ASSET,
|
|
16675
16774
|
alt: quote.serviceProvider,
|
|
@@ -17550,90 +17649,6 @@ var YouPayYouReceiveBottomBarLayoutWrapper = ({
|
|
|
17550
17649
|
);
|
|
17551
17650
|
};
|
|
17552
17651
|
|
|
17553
|
-
// src/hooks/queries/useMeldLimits.ts
|
|
17554
|
-
import { getMeldFiatLimits } from "@funkit/api-base";
|
|
17555
|
-
import { formatCurrencyAndStringify as formatCurrencyAndStringify6 } from "@funkit/utils";
|
|
17556
|
-
import { useQuery as useQuery13 } from "@tanstack/react-query";
|
|
17557
|
-
import { useMemo as useMemo22 } from "react";
|
|
17558
|
-
|
|
17559
|
-
// src/hooks/queries/useMeldCryptoCurrencyCode.ts
|
|
17560
|
-
function useMeldCryptoCurrencyCode() {
|
|
17561
|
-
const { checkoutItem } = useCheckoutContext();
|
|
17562
|
-
const _targetChain = checkoutItem?.initSettings.config.targetChain;
|
|
17563
|
-
const _targetAsset = checkoutItem?.initSettings.config.targetAsset;
|
|
17564
|
-
return "USDC_POLYGON";
|
|
17565
|
-
}
|
|
17566
|
-
|
|
17567
|
-
// src/hooks/queries/useMeldLimits.ts
|
|
17568
|
-
var useMeldLimits = (fiatCurrency) => {
|
|
17569
|
-
const { apiKey } = useFunkitConfig();
|
|
17570
|
-
const { userIpInfo } = useFunkitUserIp();
|
|
17571
|
-
const cryptoCurrency = useMeldCryptoCurrencyCode();
|
|
17572
|
-
const query = useQuery13({
|
|
17573
|
-
queryKey: ["meld", "limits", userIpInfo?.alpha2, cryptoCurrency],
|
|
17574
|
-
queryFn: async () => {
|
|
17575
|
-
if (!apiKey || !userIpInfo) return void 0;
|
|
17576
|
-
const { alpha2: countryCode } = userIpInfo;
|
|
17577
|
-
const response = await getMeldFiatLimits({
|
|
17578
|
-
params: {
|
|
17579
|
-
countries: [countryCode],
|
|
17580
|
-
cryptoCurrencies: cryptoCurrency ? [cryptoCurrency] : [],
|
|
17581
|
-
// left out intentionally to preload other currency limits
|
|
17582
|
-
fiatCurrencies: []
|
|
17583
|
-
},
|
|
17584
|
-
apiKey
|
|
17585
|
-
});
|
|
17586
|
-
return response?.limits;
|
|
17587
|
-
},
|
|
17588
|
-
enabled: !!apiKey && !!userIpInfo && !!fiatCurrency && !!cryptoCurrency,
|
|
17589
|
-
refetchOnMount: false,
|
|
17590
|
-
refetchOnReconnect: false,
|
|
17591
|
-
refetchOnWindowFocus: false,
|
|
17592
|
-
staleTime: 1e3 * 60 * 60
|
|
17593
|
-
// 1 hour
|
|
17594
|
-
});
|
|
17595
|
-
return query;
|
|
17596
|
-
};
|
|
17597
|
-
var useMeldLimitError = (amount, fiatCurrency) => {
|
|
17598
|
-
const { data } = useMeldLimits(fiatCurrency);
|
|
17599
|
-
const meldLimit = useMemo22(
|
|
17600
|
-
() => data?.find((lim) => lim.currencyCode === fiatCurrency),
|
|
17601
|
-
[data, fiatCurrency]
|
|
17602
|
-
);
|
|
17603
|
-
if (!meldLimit) return void 0;
|
|
17604
|
-
if (amount < meldLimit.minimumAmount) {
|
|
17605
|
-
const limit = formatCurrencyAndStringify6(
|
|
17606
|
-
meldLimit.minimumAmount ?? 0,
|
|
17607
|
-
{},
|
|
17608
|
-
{
|
|
17609
|
-
currency: fiatCurrency,
|
|
17610
|
-
currencyDisplay: "narrowSymbol",
|
|
17611
|
-
minimumFractionDigits: 0
|
|
17612
|
-
}
|
|
17613
|
-
);
|
|
17614
|
-
return {
|
|
17615
|
-
issue: "Amount below minimum",
|
|
17616
|
-
suggestion: `Input an amount greater than ${limit}.`
|
|
17617
|
-
};
|
|
17618
|
-
}
|
|
17619
|
-
if (amount > meldLimit.maximumAmount) {
|
|
17620
|
-
const limit = formatCurrencyAndStringify6(
|
|
17621
|
-
meldLimit.maximumAmount ?? 0,
|
|
17622
|
-
{},
|
|
17623
|
-
{
|
|
17624
|
-
currency: fiatCurrency,
|
|
17625
|
-
currencyDisplay: "narrowSymbol",
|
|
17626
|
-
minimumFractionDigits: 0
|
|
17627
|
-
}
|
|
17628
|
-
);
|
|
17629
|
-
return {
|
|
17630
|
-
issue: "Amount above maximum",
|
|
17631
|
-
suggestion: `Input an amount lower than ${limit}.`
|
|
17632
|
-
};
|
|
17633
|
-
}
|
|
17634
|
-
return void 0;
|
|
17635
|
-
};
|
|
17636
|
-
|
|
17637
17652
|
// src/components/Icons/SwitchIcon.tsx
|
|
17638
17653
|
import React147 from "react";
|
|
17639
17654
|
var SwitchIcon = () => {
|
|
@@ -17886,35 +17901,22 @@ function InputAmountLayout({
|
|
|
17886
17901
|
|
|
17887
17902
|
// src/modals/CheckoutModal/InputAmount/QuickOptions.tsx
|
|
17888
17903
|
import { FlagKey as FlagKey20, clamp, formatCurrencyAndStringify as formatCurrencyAndStringify7 } from "@funkit/utils";
|
|
17889
|
-
import React149
|
|
17904
|
+
import React149 from "react";
|
|
17890
17905
|
var USD_AMOUNT_OPTIONS_PCT = [25, 50, 75, 100];
|
|
17891
|
-
var USD_AMOUNT_OPTIONS = [100, 500, 1e3];
|
|
17892
17906
|
function deduplicateArray(arr) {
|
|
17893
17907
|
return Array.from(new Set(arr));
|
|
17894
17908
|
}
|
|
17895
|
-
function useFiatAmountOptions(
|
|
17909
|
+
function useFiatAmountOptions(currency) {
|
|
17896
17910
|
const currencyQuickOptionStr = useFlag(FlagKey20.MeldQuickOptions);
|
|
17897
17911
|
const currencyQuickOption = safeJSONParse(
|
|
17898
17912
|
currencyQuickOptionStr
|
|
17899
17913
|
);
|
|
17900
|
-
const { data:
|
|
17901
|
-
const meldLimit = useMemo23(
|
|
17902
|
-
() => limits?.find((lim) => lim.currencyCode === currency),
|
|
17903
|
-
[limits, currency]
|
|
17904
|
-
);
|
|
17905
|
-
if (percentMode) {
|
|
17906
|
-
return USD_AMOUNT_OPTIONS_PCT;
|
|
17907
|
-
}
|
|
17914
|
+
const { data: meldLimit, isPending } = useMeldLimit(currency);
|
|
17908
17915
|
if (isPending || !meldLimit) {
|
|
17909
17916
|
return [];
|
|
17910
17917
|
}
|
|
17911
17918
|
const minimumAmount = meldLimit.minimumAmount;
|
|
17912
17919
|
const maximumAmount = meldLimit.maximumAmount;
|
|
17913
|
-
if (currency === "USD") {
|
|
17914
|
-
return deduplicateArray(
|
|
17915
|
-
USD_AMOUNT_OPTIONS.map((val) => clamp(val, minimumAmount, maximumAmount))
|
|
17916
|
-
);
|
|
17917
|
-
}
|
|
17918
17920
|
return deduplicateArray(
|
|
17919
17921
|
currencyQuickOption?.[currency]?.map(
|
|
17920
17922
|
(val) => clamp(val, minimumAmount, maximumAmount)
|
|
@@ -17922,42 +17924,44 @@ function useFiatAmountOptions(percentMode, currency) {
|
|
|
17922
17924
|
);
|
|
17923
17925
|
}
|
|
17924
17926
|
var QuickOptions = ({
|
|
17925
|
-
|
|
17926
|
-
percentMode = true,
|
|
17927
|
+
currency = "USD",
|
|
17927
17928
|
disabled = false,
|
|
17928
|
-
|
|
17929
|
+
onSelect,
|
|
17930
|
+
options,
|
|
17931
|
+
percentMode = true
|
|
17929
17932
|
}) => {
|
|
17930
|
-
|
|
17931
|
-
|
|
17932
|
-
|
|
17933
|
-
{
|
|
17934
|
-
borderRadius: "actionButton",
|
|
17935
|
-
fontSize: "14",
|
|
17936
|
-
fontWeight: "medium",
|
|
17937
|
-
color: "primaryText",
|
|
17938
|
-
icon: null,
|
|
17939
|
-
isDisabled: disabled,
|
|
17940
|
-
key: `${option}-${index}`,
|
|
17941
|
-
onClick: () => onSelect?.(option),
|
|
17942
|
-
paddingX: "12",
|
|
17943
|
-
size: "36",
|
|
17944
|
-
variant: "filled",
|
|
17945
|
-
colorOverrides: {
|
|
17946
|
-
baseBackground: "inputAmountQuickOptionBaseBackground",
|
|
17947
|
-
hoverBackground: "inputAmountQuickOptionHoverBackground",
|
|
17948
|
-
activeBackground: "inputAmountQuickOptionActiveBackground"
|
|
17949
|
-
}
|
|
17950
|
-
},
|
|
17951
|
-
!percentMode ? formatCurrencyAndStringify7(
|
|
17952
|
-
option,
|
|
17953
|
-
{},
|
|
17933
|
+
return (percentMode ? USD_AMOUNT_OPTIONS_PCT : options)?.map(
|
|
17934
|
+
(option, index) => /* @__PURE__ */ React149.createElement(
|
|
17935
|
+
FunIconButton,
|
|
17954
17936
|
{
|
|
17955
|
-
|
|
17956
|
-
|
|
17957
|
-
|
|
17958
|
-
|
|
17959
|
-
|
|
17960
|
-
|
|
17937
|
+
borderRadius: "actionButton",
|
|
17938
|
+
fontSize: "14",
|
|
17939
|
+
fontWeight: "medium",
|
|
17940
|
+
color: "primaryText",
|
|
17941
|
+
icon: null,
|
|
17942
|
+
isDisabled: disabled,
|
|
17943
|
+
key: `${option}-${index}`,
|
|
17944
|
+
onClick: () => onSelect?.(option),
|
|
17945
|
+
paddingX: "12",
|
|
17946
|
+
size: "36",
|
|
17947
|
+
variant: "filled",
|
|
17948
|
+
colorOverrides: {
|
|
17949
|
+
baseBackground: "inputAmountQuickOptionBaseBackground",
|
|
17950
|
+
hoverBackground: "inputAmountQuickOptionHoverBackground",
|
|
17951
|
+
activeBackground: "inputAmountQuickOptionActiveBackground"
|
|
17952
|
+
}
|
|
17953
|
+
},
|
|
17954
|
+
!percentMode ? formatCurrencyAndStringify7(
|
|
17955
|
+
option,
|
|
17956
|
+
{},
|
|
17957
|
+
{
|
|
17958
|
+
minimumFractionDigits: 0,
|
|
17959
|
+
currency,
|
|
17960
|
+
currencyDisplay: "narrowSymbol"
|
|
17961
|
+
}
|
|
17962
|
+
) : option === 100 ? "Max" : `${option}%`
|
|
17963
|
+
)
|
|
17964
|
+
);
|
|
17961
17965
|
};
|
|
17962
17966
|
|
|
17963
17967
|
// src/modals/CheckoutModal/InputAmount/useAmountInput.ts
|
|
@@ -17970,12 +17974,12 @@ import {
|
|
|
17970
17974
|
// src/modals/CheckoutModal/InputAmount/state.ts
|
|
17971
17975
|
import { round as round2 } from "@funkit/utils";
|
|
17972
17976
|
function getInputValueFromAmount(params) {
|
|
17973
|
-
const amount = params.
|
|
17977
|
+
const amount = params.isInputInFiat ? params.fiatAmount : params.assetAmount;
|
|
17974
17978
|
if (!amount) return "";
|
|
17975
17979
|
const formattedAmount = amount.toFixed(
|
|
17976
|
-
params.
|
|
17980
|
+
params.isInputInFiat ? USD_DECIMALS : ASSET_DECIMALS
|
|
17977
17981
|
);
|
|
17978
|
-
return params.
|
|
17982
|
+
return params.isInputInFiat ? params.currencySymbol + formattedAmount : formattedAmount;
|
|
17979
17983
|
}
|
|
17980
17984
|
function initializeState({
|
|
17981
17985
|
apiKey,
|
|
@@ -17986,10 +17990,12 @@ function initializeState({
|
|
|
17986
17990
|
sourceHolding,
|
|
17987
17991
|
unitPrice,
|
|
17988
17992
|
defaultAmount,
|
|
17989
|
-
fiatCurrency = "USD"
|
|
17993
|
+
fiatCurrency = "USD",
|
|
17994
|
+
quickOptions
|
|
17990
17995
|
}) {
|
|
17991
17996
|
const { targetAssetAmount, targetChain } = checkoutConfig;
|
|
17992
|
-
const
|
|
17997
|
+
const isCardCheckout = paymentMethod === "card" /* CARD */;
|
|
17998
|
+
const isInputInFiat = true;
|
|
17993
17999
|
const usdAvailableAmount = getUsdAvailableAmount(
|
|
17994
18000
|
targetChain,
|
|
17995
18001
|
sourceHolding?.pickedChainId,
|
|
@@ -18005,26 +18011,27 @@ function initializeState({
|
|
|
18005
18011
|
);
|
|
18006
18012
|
const usdMaxAmount = getUsdMaxAmount(maxUsd);
|
|
18007
18013
|
const usdMinAmount = getUsdMinAmount(paymentMethod, minUsd);
|
|
18008
|
-
const
|
|
18009
|
-
const
|
|
18010
|
-
Math.max(
|
|
18014
|
+
const initialFiatAmount = defaultAmount ?? (isCardCheckout ? getDefaultAmountFromQuickOptions(quickOptions) : targetAssetAmount === void 0 ? USD_INITIAL_AMOUNT : targetAssetAmount * unitPrice);
|
|
18015
|
+
const finalFiatAmount = initialFiatAmount === void 0 ? void 0 : Math.min(
|
|
18016
|
+
Math.max(initialFiatAmount, usdMinAmount, 0),
|
|
18011
18017
|
usdAvailableAmount ?? Number.MAX_VALUE,
|
|
18012
18018
|
usdMaxAmount ?? Number.MAX_VALUE
|
|
18013
18019
|
);
|
|
18014
|
-
const rounding =
|
|
18015
|
-
const assetAmount =
|
|
18016
|
-
const
|
|
18020
|
+
const rounding = finalFiatAmount === initialFiatAmount ? "round" : finalFiatAmount === usdMinAmount ? "ceil" : "floor";
|
|
18021
|
+
const assetAmount = finalFiatAmount ? targetAssetAmount && finalFiatAmount === targetAssetAmount * unitPrice ? targetAssetAmount : finalFiatAmount / unitPrice || 0 : 0;
|
|
18022
|
+
const fiatAmount = finalFiatAmount ? round2(finalFiatAmount, USD_DECIMALS, rounding) : 0;
|
|
18017
18023
|
const inputValue = getInputValueFromAmount({
|
|
18018
18024
|
assetAmount,
|
|
18019
|
-
|
|
18020
|
-
|
|
18021
|
-
|
|
18025
|
+
currencySymbol: getCurrencySymbol(fiatCurrency),
|
|
18026
|
+
isInputInFiat,
|
|
18027
|
+
fiatAmount
|
|
18022
18028
|
});
|
|
18023
18029
|
return {
|
|
18024
18030
|
assetAmount,
|
|
18031
|
+
fiatAmount,
|
|
18032
|
+
fiatCurrency,
|
|
18025
18033
|
inputValue,
|
|
18026
|
-
|
|
18027
|
-
usdAmount,
|
|
18034
|
+
isInputInFiat,
|
|
18028
18035
|
usdAvailableAmount,
|
|
18029
18036
|
usdMaxAmount,
|
|
18030
18037
|
usdMinAmount
|
|
@@ -18032,10 +18039,10 @@ function initializeState({
|
|
|
18032
18039
|
}
|
|
18033
18040
|
function reduceState(state, action) {
|
|
18034
18041
|
switch (action.type) {
|
|
18035
|
-
case "
|
|
18042
|
+
case "toggleInputInFiat": {
|
|
18036
18043
|
const newState = {
|
|
18037
18044
|
...state,
|
|
18038
|
-
|
|
18045
|
+
isInputInFiat: !state.isInputInFiat
|
|
18039
18046
|
};
|
|
18040
18047
|
const inputValue = getInputValueFromAmount({
|
|
18041
18048
|
...newState,
|
|
@@ -18044,83 +18051,84 @@ function reduceState(state, action) {
|
|
|
18044
18051
|
return { ...newState, inputValue };
|
|
18045
18052
|
}
|
|
18046
18053
|
case "setInputValue": {
|
|
18047
|
-
const { inputValue: rawInputValue, unitPrice
|
|
18048
|
-
const currencySymbol = getCurrencySymbol(fiatCurrency);
|
|
18049
|
-
const regex = state.
|
|
18054
|
+
const { inputValue: rawInputValue, unitPrice } = action;
|
|
18055
|
+
const currencySymbol = getCurrencySymbol(state.fiatCurrency);
|
|
18056
|
+
const regex = state.isInputInFiat ? /\d+(\.\d{0,2})?/ : /\d+(\.\d{0,5})?/;
|
|
18050
18057
|
const match = regex.exec(rawInputValue);
|
|
18051
18058
|
const numericInputValue = match?.[0] || "";
|
|
18052
|
-
const newInputValue = numericInputValue && state.
|
|
18059
|
+
const newInputValue = numericInputValue && state.isInputInFiat ? `${currencySymbol}${numericInputValue}` : numericInputValue;
|
|
18053
18060
|
if (newInputValue === state.inputValue) return state;
|
|
18054
18061
|
const newInputAmount = Number.parseFloat(numericInputValue) || 0;
|
|
18055
|
-
if (state.
|
|
18062
|
+
if (state.isInputInFiat) {
|
|
18056
18063
|
return {
|
|
18057
18064
|
...state,
|
|
18058
18065
|
assetAmount: newInputAmount / unitPrice || 0,
|
|
18059
18066
|
inputValue: newInputValue,
|
|
18060
|
-
|
|
18067
|
+
fiatAmount: newInputAmount
|
|
18061
18068
|
};
|
|
18062
18069
|
}
|
|
18063
18070
|
return {
|
|
18064
18071
|
...state,
|
|
18065
18072
|
assetAmount: newInputAmount,
|
|
18066
18073
|
inputValue: newInputValue,
|
|
18067
|
-
|
|
18074
|
+
fiatAmount: round2(newInputAmount * unitPrice, USD_DECIMALS)
|
|
18068
18075
|
};
|
|
18069
18076
|
}
|
|
18070
|
-
case "
|
|
18077
|
+
case "setFiatCurrency": {
|
|
18071
18078
|
const inputValue = getInputValueFromAmount({
|
|
18072
18079
|
...state,
|
|
18073
18080
|
currencySymbol: getCurrencySymbol(action.fiatCurrency)
|
|
18074
18081
|
});
|
|
18075
18082
|
return {
|
|
18076
18083
|
...state,
|
|
18084
|
+
fiatCurrency: action.fiatCurrency,
|
|
18077
18085
|
inputValue
|
|
18078
18086
|
};
|
|
18079
18087
|
}
|
|
18080
|
-
case "
|
|
18081
|
-
const { unitPrice,
|
|
18082
|
-
const assetAmount =
|
|
18088
|
+
case "setFiatAmount": {
|
|
18089
|
+
const { unitPrice, fiatAmount } = action;
|
|
18090
|
+
const assetAmount = fiatAmount / unitPrice || 0;
|
|
18083
18091
|
const inputValue = getInputValueFromAmount({
|
|
18084
|
-
isInputInUsd: state.isInputInUsd,
|
|
18085
18092
|
assetAmount,
|
|
18086
|
-
|
|
18087
|
-
|
|
18093
|
+
currencySymbol: getCurrencySymbol(state.fiatCurrency),
|
|
18094
|
+
fiatAmount,
|
|
18095
|
+
isInputInFiat: state.isInputInFiat
|
|
18088
18096
|
});
|
|
18089
18097
|
return {
|
|
18090
18098
|
...state,
|
|
18091
18099
|
assetAmount,
|
|
18092
|
-
|
|
18100
|
+
fiatAmount,
|
|
18093
18101
|
inputValue
|
|
18094
18102
|
};
|
|
18095
18103
|
}
|
|
18096
18104
|
}
|
|
18097
18105
|
}
|
|
18098
18106
|
function getAmountInputError(state) {
|
|
18099
|
-
const {
|
|
18107
|
+
const { fiatAmount, usdAvailableAmount, usdMaxAmount, usdMinAmount } = state;
|
|
18100
18108
|
if (usdAvailableAmount === 0) {
|
|
18101
18109
|
return {
|
|
18102
18110
|
type: "noAvailableBalance"
|
|
18103
18111
|
};
|
|
18104
18112
|
}
|
|
18105
|
-
if (usdAvailableAmount &&
|
|
18113
|
+
if (usdAvailableAmount && fiatAmount > usdAvailableAmount) {
|
|
18106
18114
|
return {
|
|
18107
18115
|
type: "aboveAvailable",
|
|
18108
18116
|
usdAvailableAmount
|
|
18109
18117
|
};
|
|
18110
18118
|
}
|
|
18111
|
-
if (usdMaxAmount &&
|
|
18119
|
+
if (usdMaxAmount && fiatAmount > usdMaxAmount) {
|
|
18112
18120
|
return {
|
|
18113
18121
|
type: "aboveMax",
|
|
18114
18122
|
usdMaxAmount
|
|
18115
18123
|
};
|
|
18116
18124
|
}
|
|
18117
|
-
if (usdMinAmount &&
|
|
18125
|
+
if (usdMinAmount && fiatAmount < usdMinAmount) {
|
|
18118
18126
|
return {
|
|
18119
18127
|
type: "belowMin",
|
|
18120
18128
|
usdMinAmount
|
|
18121
18129
|
};
|
|
18122
18130
|
}
|
|
18123
|
-
if (
|
|
18131
|
+
if (fiatAmount === 0) {
|
|
18124
18132
|
return {
|
|
18125
18133
|
type: "noInput"
|
|
18126
18134
|
};
|
|
@@ -18138,10 +18146,12 @@ function getDerivedState(state) {
|
|
|
18138
18146
|
// src/modals/CheckoutModal/InputAmount/useAmountInput.ts
|
|
18139
18147
|
function useAmountInput(options) {
|
|
18140
18148
|
const [state, dispatch] = useReducer3(reduceState, options, initializeState);
|
|
18149
|
+
const isCardCheckout = options.paymentMethod === "card" /* CARD */;
|
|
18141
18150
|
const {
|
|
18142
18151
|
unitPrice: realUnitPrice,
|
|
18143
18152
|
checkoutConfig,
|
|
18144
|
-
fiatCurrency = "USD"
|
|
18153
|
+
fiatCurrency = "USD",
|
|
18154
|
+
quickOptions
|
|
18145
18155
|
} = options;
|
|
18146
18156
|
const unitPrice = isStablecoin(checkoutConfig.targetAssetTicker) ? 1 : realUnitPrice;
|
|
18147
18157
|
const dispatchAndGetNewState = useCallback28(
|
|
@@ -18156,41 +18166,60 @@ function useAmountInput(options) {
|
|
|
18156
18166
|
dispatch({
|
|
18157
18167
|
type: "setInputValue",
|
|
18158
18168
|
inputValue: event.target.value,
|
|
18159
|
-
unitPrice
|
|
18160
|
-
fiatCurrency
|
|
18169
|
+
unitPrice
|
|
18161
18170
|
});
|
|
18162
18171
|
},
|
|
18163
|
-
[unitPrice
|
|
18172
|
+
[unitPrice]
|
|
18164
18173
|
);
|
|
18165
|
-
|
|
18166
|
-
|
|
18167
|
-
|
|
18168
|
-
|
|
18169
|
-
|
|
18170
|
-
|
|
18171
|
-
|
|
18172
|
-
|
|
18173
|
-
|
|
18174
|
-
|
|
18174
|
+
const defaultAmount = isCardCheckout ? getDefaultAmountFromQuickOptions(quickOptions) : void 0;
|
|
18175
|
+
useEffect27(() => {
|
|
18176
|
+
if (state.fiatCurrency !== fiatCurrency) {
|
|
18177
|
+
dispatch({
|
|
18178
|
+
type: "setFiatCurrency",
|
|
18179
|
+
fiatCurrency
|
|
18180
|
+
});
|
|
18181
|
+
if (state.isInputInFiat) {
|
|
18182
|
+
dispatch({
|
|
18183
|
+
type: "setFiatAmount",
|
|
18184
|
+
fiatAmount: defaultAmount ?? 0,
|
|
18185
|
+
unitPrice
|
|
18186
|
+
});
|
|
18187
|
+
}
|
|
18188
|
+
}
|
|
18189
|
+
}, [fiatCurrency]);
|
|
18190
|
+
useEffect27(() => {
|
|
18191
|
+
if (defaultAmount && state.inputValue === "") {
|
|
18192
|
+
dispatch({
|
|
18193
|
+
type: "setFiatAmount",
|
|
18194
|
+
fiatAmount: defaultAmount,
|
|
18195
|
+
unitPrice
|
|
18196
|
+
});
|
|
18197
|
+
}
|
|
18198
|
+
}, [defaultAmount]);
|
|
18199
|
+
const setFiatAmount = useCallback28(
|
|
18200
|
+
(fiatAmount) => dispatchAndGetNewState({
|
|
18201
|
+
type: "setFiatAmount",
|
|
18202
|
+
fiatAmount,
|
|
18203
|
+
unitPrice
|
|
18175
18204
|
}),
|
|
18176
|
-
[dispatchAndGetNewState, unitPrice
|
|
18205
|
+
[dispatchAndGetNewState, unitPrice]
|
|
18177
18206
|
);
|
|
18178
18207
|
const derivedState = getDerivedState(state);
|
|
18179
|
-
const
|
|
18180
|
-
() => dispatch({ type: "
|
|
18208
|
+
const toggleInputInFiat = useCallback28(
|
|
18209
|
+
() => dispatch({ type: "toggleInputInFiat" }),
|
|
18181
18210
|
[]
|
|
18182
18211
|
);
|
|
18183
18212
|
return {
|
|
18184
18213
|
...derivedState,
|
|
18185
18214
|
onChange,
|
|
18186
|
-
|
|
18187
|
-
setUsdAmount,
|
|
18188
|
-
placeholder: state.isInputInUsd ? formatCurrencyAndStringify8(
|
|
18215
|
+
placeholder: state.isInputInFiat ? formatCurrencyAndStringify8(
|
|
18189
18216
|
0,
|
|
18190
18217
|
{},
|
|
18191
18218
|
{ currency: fiatCurrency, currencyDisplay: "narrowSymbol" }
|
|
18192
18219
|
) : formatCryptoAndStringify3(0),
|
|
18193
|
-
|
|
18220
|
+
setFiatAmount,
|
|
18221
|
+
suggestion: getInputAmountSuggestion(derivedState.inputError),
|
|
18222
|
+
toggleInputInFiat
|
|
18194
18223
|
};
|
|
18195
18224
|
}
|
|
18196
18225
|
|
|
@@ -18223,7 +18252,7 @@ function InputAmountLoaded({
|
|
|
18223
18252
|
onNext,
|
|
18224
18253
|
sourceHolding,
|
|
18225
18254
|
unitPrice,
|
|
18226
|
-
defaultFiatCurrency,
|
|
18255
|
+
defaultFiatCurrency = "USD",
|
|
18227
18256
|
textCustomizations
|
|
18228
18257
|
}) {
|
|
18229
18258
|
const maxCheckoutUsdString = useFlag(FlagKey21.MaxCheckoutUsd);
|
|
@@ -18236,16 +18265,17 @@ function InputAmountLoaded({
|
|
|
18236
18265
|
const { updateTargetAssetAmount } = useCheckoutContext();
|
|
18237
18266
|
const minUsd = targetAssetMinAmount && unitPrice ? Math.ceil(targetAssetMinAmount * unitPrice * 100) / 100 : void 0;
|
|
18238
18267
|
const fiatCurrency = modalState.fiatCurrency ?? defaultFiatCurrency;
|
|
18268
|
+
const quickOptions = useFiatAmountOptions(fiatCurrency);
|
|
18239
18269
|
const {
|
|
18240
18270
|
assetAmount,
|
|
18241
18271
|
inputError,
|
|
18242
18272
|
inputValue,
|
|
18243
|
-
|
|
18273
|
+
isInputInFiat,
|
|
18244
18274
|
isValid,
|
|
18245
18275
|
onChange,
|
|
18246
|
-
|
|
18247
|
-
|
|
18248
|
-
|
|
18276
|
+
toggleInputInFiat,
|
|
18277
|
+
setFiatAmount,
|
|
18278
|
+
fiatAmount,
|
|
18249
18279
|
usdAvailableAmount,
|
|
18250
18280
|
placeholder,
|
|
18251
18281
|
suggestion
|
|
@@ -18258,6 +18288,7 @@ function InputAmountLoaded({
|
|
|
18258
18288
|
unitPrice,
|
|
18259
18289
|
maxUsd: Number.parseFloat(maxCheckoutUsdString),
|
|
18260
18290
|
minUsd,
|
|
18291
|
+
quickOptions,
|
|
18261
18292
|
fiatCurrency
|
|
18262
18293
|
});
|
|
18263
18294
|
const {
|
|
@@ -18268,8 +18299,8 @@ function InputAmountLoaded({
|
|
|
18268
18299
|
bestRateQuote,
|
|
18269
18300
|
selectedQuote,
|
|
18270
18301
|
isSelectedQuoteUnavailable
|
|
18271
|
-
} = useMeld(manuallySelectedQuote,
|
|
18272
|
-
const error =
|
|
18302
|
+
} = useMeld(manuallySelectedQuote, fiatAmount, fiatCurrency);
|
|
18303
|
+
const error = useMemo22(() => {
|
|
18273
18304
|
if (isCardCheckout) {
|
|
18274
18305
|
if (isSelectedQuoteUnavailable) {
|
|
18275
18306
|
return {
|
|
@@ -18307,7 +18338,7 @@ function InputAmountLoaded({
|
|
|
18307
18338
|
]);
|
|
18308
18339
|
const { ref, fontSize, resetText } = useDynamicFont(inputValue || placeholder);
|
|
18309
18340
|
const handleIsAmountInAbsoluteToggle = () => {
|
|
18310
|
-
|
|
18341
|
+
toggleInputInFiat();
|
|
18311
18342
|
resetText();
|
|
18312
18343
|
};
|
|
18313
18344
|
const handleContinue = async (assetAmount2) => {
|
|
@@ -18320,7 +18351,7 @@ function InputAmountLoaded({
|
|
|
18320
18351
|
};
|
|
18321
18352
|
const handleSubmit = () => {
|
|
18322
18353
|
if (!suggestion) return handleContinue(assetAmount);
|
|
18323
|
-
const newState =
|
|
18354
|
+
const newState = setFiatAmount(suggestion.usdAmount);
|
|
18324
18355
|
if (suggestion.autoConfirm && newState.isValid) {
|
|
18325
18356
|
handleContinue(newState.assetAmount);
|
|
18326
18357
|
}
|
|
@@ -18331,10 +18362,10 @@ function InputAmountLoaded({
|
|
|
18331
18362
|
handleSubmit();
|
|
18332
18363
|
};
|
|
18333
18364
|
const displayAssetAmount = round3(
|
|
18334
|
-
isStablecoin(targetAssetTicker) ?
|
|
18365
|
+
isStablecoin(targetAssetTicker) ? fiatAmount : assetAmount,
|
|
18335
18366
|
ASSET_DECIMALS
|
|
18336
18367
|
);
|
|
18337
|
-
const isConvertedAmountShown = targetAssetTicker && (!
|
|
18368
|
+
const isConvertedAmountShown = targetAssetTicker && (!isInputInFiat || isCardCheckout && fiatCurrency === "USD" || !isCardCheckout);
|
|
18338
18369
|
const isMeldContinueDisabled = meldEnabled && (!!meldLimitError || isMeldLinkPending || !!meldQuotesQuery.error || meldQuotesQuery.isFetching || isSelectedQuoteUnavailable);
|
|
18339
18370
|
return /* @__PURE__ */ React150.createElement(
|
|
18340
18371
|
InputAmountLayout,
|
|
@@ -18350,7 +18381,7 @@ function InputAmountLoaded({
|
|
|
18350
18381
|
{
|
|
18351
18382
|
selectedCurrency: fiatCurrency,
|
|
18352
18383
|
onClick: (fiatCurrency2) => onNext({
|
|
18353
|
-
fiatAmount
|
|
18384
|
+
fiatAmount,
|
|
18354
18385
|
fiatCurrency: fiatCurrency2,
|
|
18355
18386
|
nextStep: "meld_currency_select" /* MELD_CURRENCY_SELECT */
|
|
18356
18387
|
})
|
|
@@ -18364,8 +18395,7 @@ function InputAmountLoaded({
|
|
|
18364
18395
|
keyIcon: /* @__PURE__ */ React150.createElement(CreditCardIcon, { size: 16 }),
|
|
18365
18396
|
onClick: () => onNext({
|
|
18366
18397
|
nextStep: "source_change" /* SOURCE_CHANGE */,
|
|
18367
|
-
fiatAmount
|
|
18368
|
-
navigateToHistoryStep: true
|
|
18398
|
+
fiatAmount
|
|
18369
18399
|
})
|
|
18370
18400
|
}
|
|
18371
18401
|
)),
|
|
@@ -18387,7 +18417,7 @@ function InputAmountLoaded({
|
|
|
18387
18417
|
onChange,
|
|
18388
18418
|
onKeyDown: handleKeyDown,
|
|
18389
18419
|
inputProps: {
|
|
18390
|
-
type:
|
|
18420
|
+
type: isInputInFiat ? "text" : "number",
|
|
18391
18421
|
autoFocus: true,
|
|
18392
18422
|
spellCheck: false,
|
|
18393
18423
|
// get ios to use numpad key with period
|
|
@@ -18423,28 +18453,29 @@ function InputAmountLoaded({
|
|
|
18423
18453
|
borderRadius: "inputAmountSwitcher",
|
|
18424
18454
|
isDisabled: isCardCheckout
|
|
18425
18455
|
},
|
|
18426
|
-
/* @__PURE__ */ React150.createElement(Text, { color: "secondaryText", size: "14" },
|
|
18456
|
+
/* @__PURE__ */ React150.createElement(Text, { color: "secondaryText", size: "14" }, isInputInFiat ? formatCryptoAndStringify4(
|
|
18427
18457
|
displayAssetAmount,
|
|
18428
18458
|
targetAssetTicker
|
|
18429
|
-
) : formatCurrencyAndStringify9(
|
|
18459
|
+
) : formatCurrencyAndStringify9(fiatAmount))
|
|
18430
18460
|
)
|
|
18431
18461
|
),
|
|
18432
18462
|
amountOptions: (!!usdAvailableAmount || isCardCheckout) && /* @__PURE__ */ React150.createElement(
|
|
18433
18463
|
QuickOptions,
|
|
18434
18464
|
{
|
|
18435
|
-
percentMode: !isCardCheckout,
|
|
18436
18465
|
currency: fiatCurrency,
|
|
18437
18466
|
onSelect: (option) => {
|
|
18438
18467
|
const selectedOption = usdAvailableAmount && !isCardCheckout ? usdAvailableAmount * (option / 100) : option;
|
|
18439
|
-
|
|
18440
|
-
}
|
|
18468
|
+
setFiatAmount(selectedOption);
|
|
18469
|
+
},
|
|
18470
|
+
options: quickOptions,
|
|
18471
|
+
percentMode: !isCardCheckout
|
|
18441
18472
|
}
|
|
18442
18473
|
),
|
|
18443
18474
|
footer: meldEnabled ? /* @__PURE__ */ React150.createElement(Box, { paddingX: "6" }, /* @__PURE__ */ React150.createElement(
|
|
18444
18475
|
SourceMeldQuoteItem,
|
|
18445
18476
|
{
|
|
18446
18477
|
onClick: () => onNext({
|
|
18447
|
-
fiatAmount
|
|
18478
|
+
fiatAmount,
|
|
18448
18479
|
fiatCurrency,
|
|
18449
18480
|
provider: selectedQuote?.serviceProvider,
|
|
18450
18481
|
nextStep: "meld_quotes" /* MELD_QUOTES */
|
|
@@ -18513,7 +18544,7 @@ function YouPayYouReceiveWrapper({
|
|
|
18513
18544
|
|
|
18514
18545
|
// src/modals/CheckoutModal/InputAmount/InputAmountLoading.tsx
|
|
18515
18546
|
import { FlagKey as FlagKey22, formatCryptoAndStringify as formatCryptoAndStringify5 } from "@funkit/utils";
|
|
18516
|
-
import React151, { useMemo as
|
|
18547
|
+
import React151, { useMemo as useMemo23 } from "react";
|
|
18517
18548
|
function InputAmountLoading({
|
|
18518
18549
|
modalState,
|
|
18519
18550
|
onBack,
|
|
@@ -18526,7 +18557,7 @@ function InputAmountLoading({
|
|
|
18526
18557
|
const meldEnabled = useFlag(FlagKey22.EnableMeldPayment);
|
|
18527
18558
|
const targetAssetAmount = checkoutItem?.initSettings.config.targetAssetAmount;
|
|
18528
18559
|
const targetAssetTicker = checkoutItem?.initSettings.config.targetAssetTicker;
|
|
18529
|
-
const error =
|
|
18560
|
+
const error = useMemo23(() => {
|
|
18530
18561
|
if (sourceHoldingError) {
|
|
18531
18562
|
return {
|
|
18532
18563
|
message: /* @__PURE__ */ React151.createElement("div", null, "Unable to retrieve your account balance. Please try re-linking your account.", " ", paymentMethodInfo.paymentMethod === "brokerage" /* BROKERAGE */ && /* @__PURE__ */ React151.createElement(
|
|
@@ -18605,7 +18636,7 @@ function InputAmountLoading({
|
|
|
18605
18636
|
)
|
|
18606
18637
|
)
|
|
18607
18638
|
),
|
|
18608
|
-
amountOptions: /* @__PURE__ */ React151.createElement(QuickOptions, { disabled: true, percentMode:
|
|
18639
|
+
amountOptions: !isCardCheckout && /* @__PURE__ */ React151.createElement(QuickOptions, { disabled: true, options: USD_AMOUNT_OPTIONS_PCT, percentMode: true }),
|
|
18609
18640
|
footer: isMeldCheckout ? /* @__PURE__ */ React151.createElement(Box, { paddingX: "6" }, /* @__PURE__ */ React151.createElement(SourceMeldQuoteItem, { isLoading: true })) : /* @__PURE__ */ React151.createElement(YouPayYouReceiveBottomBarLayoutWrapper, null, /* @__PURE__ */ React151.createElement(
|
|
18610
18641
|
FunSkeletonBlock,
|
|
18611
18642
|
{
|
|
@@ -18694,7 +18725,7 @@ function useAssetPrice({
|
|
|
18694
18725
|
}
|
|
18695
18726
|
|
|
18696
18727
|
// src/modals/CheckoutModal/InputAmount/useAvailableBalanceForCheckout.ts
|
|
18697
|
-
import { useMemo as
|
|
18728
|
+
import { useMemo as useMemo24 } from "react";
|
|
18698
18729
|
function useAvailableBalanceForCheckout(paymentMethodInfo, targetChainId, assetChainId, assetSymbol) {
|
|
18699
18730
|
const {
|
|
18700
18731
|
data: meshAssetHoldings,
|
|
@@ -18712,7 +18743,7 @@ function useAvailableBalanceForCheckout(paymentMethodInfo, targetChainId, assetC
|
|
|
18712
18743
|
["token_transfer" /* TOKEN_TRANSFER */]: null,
|
|
18713
18744
|
["virtual_bank" /* VIRTUAL_BANK */]: null
|
|
18714
18745
|
}[paymentMethodInfo.paymentMethod];
|
|
18715
|
-
const holdingItem =
|
|
18746
|
+
const holdingItem = useMemo24(() => {
|
|
18716
18747
|
if (!assetSymbol || !holdings) {
|
|
18717
18748
|
return;
|
|
18718
18749
|
}
|
|
@@ -18788,7 +18819,9 @@ function InputAmount(props) {
|
|
|
18788
18819
|
checkoutItem?.selectedSourceAssetInfo.symbol ?? null
|
|
18789
18820
|
);
|
|
18790
18821
|
const { data: defaultCurrency, isLoading: isMeldDefaultCurrencyLoading } = useMeldDefaultCurrency(paymentMethodInfo.paymentMethod);
|
|
18791
|
-
|
|
18822
|
+
const isMeld = paymentMethodInfo.paymentMethod === "card" /* CARD */;
|
|
18823
|
+
useMeldCurrencies(isMeld);
|
|
18824
|
+
useMeldLimits(isMeld);
|
|
18792
18825
|
const { error: unitPriceError, unitPrice } = useAssetPrice({
|
|
18793
18826
|
chainId: checkoutItem?.initSettings.config.targetChain,
|
|
18794
18827
|
assetTokenAddress: checkoutItem?.initSettings.config.targetAsset
|
|
@@ -19211,9 +19244,8 @@ function LoadingAccount({
|
|
|
19211
19244
|
}
|
|
19212
19245
|
|
|
19213
19246
|
// src/modals/CheckoutModal/MeldCurrencySelect/MeldCurrencySelect.tsx
|
|
19214
|
-
import { clamp as clamp2 } from "@funkit/utils";
|
|
19215
19247
|
import clsx15 from "clsx";
|
|
19216
|
-
import React159, { useMemo as
|
|
19248
|
+
import React159, { useMemo as useMemo25, useState as useState35 } from "react";
|
|
19217
19249
|
|
|
19218
19250
|
// src/components/FunNoResults/FunNoResults.tsx
|
|
19219
19251
|
import React158 from "react";
|
|
@@ -19369,14 +19401,13 @@ var selectWrapperStyle = "_163ehmk1";
|
|
|
19369
19401
|
// src/modals/CheckoutModal/MeldCurrencySelect/MeldCurrencySelect.tsx
|
|
19370
19402
|
var MeldCurrencySelectInfo = {
|
|
19371
19403
|
Component: MeldCurrencySelect,
|
|
19372
|
-
//TODO: improve needless inflating of history if changing currency multiple times
|
|
19373
19404
|
onNext: (state, payload) => {
|
|
19374
19405
|
const common = extractCommonState(state);
|
|
19375
19406
|
return {
|
|
19376
19407
|
...common,
|
|
19377
19408
|
step: "input_amount" /* INPUT_AMOUNT */,
|
|
19409
|
+
// fiatAmount: payload.fiatAmount,
|
|
19378
19410
|
fiatCurrency: payload.currency,
|
|
19379
|
-
fiatAmount: payload.fiatAmount,
|
|
19380
19411
|
paymentMethodInfo: state.paymentMethodInfo
|
|
19381
19412
|
};
|
|
19382
19413
|
},
|
|
@@ -19386,7 +19417,7 @@ var MeldCurrencySelectInfo = {
|
|
|
19386
19417
|
return {
|
|
19387
19418
|
...common,
|
|
19388
19419
|
step: "input_amount" /* INPUT_AMOUNT */,
|
|
19389
|
-
fiatAmount: state.fiatAmount,
|
|
19420
|
+
// fiatAmount: state.fiatAmount,
|
|
19390
19421
|
fiatCurrency: state.defaultCurrency,
|
|
19391
19422
|
paymentMethodInfo: state.paymentMethodInfo
|
|
19392
19423
|
};
|
|
@@ -19396,14 +19427,13 @@ function MeldCurrencySelect({
|
|
|
19396
19427
|
modalState,
|
|
19397
19428
|
onNext
|
|
19398
19429
|
}) {
|
|
19399
|
-
const { defaultCurrency
|
|
19430
|
+
const { defaultCurrency } = modalState;
|
|
19400
19431
|
const { data, isPending } = useMeldCurrencies();
|
|
19401
|
-
const { data: meldLimits } = useMeldLimits();
|
|
19402
19432
|
const [query, setQuery] = useState35("");
|
|
19403
19433
|
const [selectedCurrency, setSelectedCurrency] = useState35(
|
|
19404
19434
|
defaultCurrency
|
|
19405
19435
|
);
|
|
19406
|
-
const filteredOptions =
|
|
19436
|
+
const filteredOptions = useMemo25(() => {
|
|
19407
19437
|
const newOptions = data?.filter(
|
|
19408
19438
|
({ name, currencyCode }) => currencyCode.toLowerCase().includes(query.toLowerCase()) || name.toLowerCase().includes(query.toLowerCase())
|
|
19409
19439
|
) ?? [];
|
|
@@ -19416,13 +19446,9 @@ function MeldCurrencySelect({
|
|
|
19416
19446
|
};
|
|
19417
19447
|
const handleSelect = (value) => {
|
|
19418
19448
|
setSelectedCurrency(value.currencyCode);
|
|
19419
|
-
const newLimit = meldLimits?.find(
|
|
19420
|
-
(limit) => limit.currencyCode === value.currencyCode
|
|
19421
|
-
);
|
|
19422
|
-
const newFiatAmount = newLimit ? clamp2(fiatAmount, newLimit.minimumAmount, newLimit.maximumAmount) : fiatAmount;
|
|
19423
19449
|
onNext({
|
|
19424
19450
|
currency: value.currencyCode,
|
|
19425
|
-
fiatAmount: newFiatAmount,
|
|
19451
|
+
// fiatAmount: newFiatAmount,
|
|
19426
19452
|
navigateToHistoryStep: true
|
|
19427
19453
|
});
|
|
19428
19454
|
};
|
|
@@ -19524,7 +19550,7 @@ import {
|
|
|
19524
19550
|
meshExecuteTransferProxy
|
|
19525
19551
|
} from "@funkit/api-base";
|
|
19526
19552
|
import { ClientError as ClientError4, FlagKey as FlagKey24, formatAddress as formatAddress4 } from "@funkit/utils";
|
|
19527
|
-
import React172, { useMemo as
|
|
19553
|
+
import React172, { useMemo as useMemo26, useState as useState38 } from "react";
|
|
19528
19554
|
import { createPortal as createPortal9 } from "react-dom";
|
|
19529
19555
|
|
|
19530
19556
|
// src/components/CopyAddress/CopyAddressButton.tsx
|
|
@@ -20104,7 +20130,7 @@ function MeshVerification({
|
|
|
20104
20130
|
return () => setScreen(0 /* INITIAL */);
|
|
20105
20131
|
});
|
|
20106
20132
|
const brokerName = getExchangeName(brokerType);
|
|
20107
|
-
const verificationTitle =
|
|
20133
|
+
const verificationTitle = useMemo26(() => {
|
|
20108
20134
|
switch (executionStatus) {
|
|
20109
20135
|
case MeshExecuteTransferStatus.secondMfaRequired:
|
|
20110
20136
|
return `Additional ${brokerName} 2FA required`;
|
|
@@ -20131,7 +20157,7 @@ function MeshVerification({
|
|
|
20131
20157
|
executionContent?.verificationSteps?.length,
|
|
20132
20158
|
isSecond2fa
|
|
20133
20159
|
]);
|
|
20134
|
-
const verificationDescription =
|
|
20160
|
+
const verificationDescription = useMemo26(() => {
|
|
20135
20161
|
switch (executionStatus) {
|
|
20136
20162
|
case MeshExecuteTransferStatus.secondMfaRequired:
|
|
20137
20163
|
return `Please enable at least two 2FA methods on your ${brokerName} account. Once enabled, you will have to reconnect your account.`;
|
|
@@ -20276,7 +20302,7 @@ var VerificationPopup = ({
|
|
|
20276
20302
|
};
|
|
20277
20303
|
|
|
20278
20304
|
// src/modals/CheckoutModal/MoonpaySetup.tsx
|
|
20279
|
-
import React174, { useCallback as useCallback31, useMemo as
|
|
20305
|
+
import React174, { useCallback as useCallback31, useMemo as useMemo28, useState as useState40 } from "react";
|
|
20280
20306
|
|
|
20281
20307
|
// src/components/FunPayments/FunPaymentMoonpayType.css.ts
|
|
20282
20308
|
var mpClass = "_1kmpeyf0";
|
|
@@ -20285,7 +20311,7 @@ var stretchStyle = "_1kmpeyf1";
|
|
|
20285
20311
|
// src/components/FunPayments/FunPaymentMoonpayType.tsx
|
|
20286
20312
|
import { getMoonpayUrlSignature } from "@funkit/api-base";
|
|
20287
20313
|
import { colorToHex } from "@funkit/utils";
|
|
20288
|
-
import React173, { Fragment as Fragment2, useEffect as useEffect33, useMemo as
|
|
20314
|
+
import React173, { Fragment as Fragment2, useEffect as useEffect33, useMemo as useMemo27, useState as useState39 } from "react";
|
|
20289
20315
|
var LazyMoonPayBuyWidget = (props) => {
|
|
20290
20316
|
const [MoonPayBuyWidget, setMoonPayBuyWidget] = useState39(null);
|
|
20291
20317
|
useEffect33(() => {
|
|
@@ -20316,7 +20342,7 @@ function FunPaymentMoonpayType({
|
|
|
20316
20342
|
const isSandboxMode = useIsFunkitSandboxMode();
|
|
20317
20343
|
const funkitConfig = useFunkitConfig();
|
|
20318
20344
|
const { userInfo } = useGeneralWallet();
|
|
20319
|
-
const currencyCode =
|
|
20345
|
+
const currencyCode = useMemo27(() => {
|
|
20320
20346
|
return generateMoonpayCurrencyCode(depositToken, depositTokenChainId);
|
|
20321
20347
|
}, [depositToken, depositTokenChainId]);
|
|
20322
20348
|
const depositTokenAmountStringFormatted = formatTokenAmountForMoonpay(
|
|
@@ -20339,7 +20365,7 @@ function FunPaymentMoonpayType({
|
|
|
20339
20365
|
});
|
|
20340
20366
|
return signature || "";
|
|
20341
20367
|
};
|
|
20342
|
-
const moonpayButtonColor =
|
|
20368
|
+
const moonpayButtonColor = useMemo27(() => {
|
|
20343
20369
|
const primaryButtonHex = colorToHex(activeTheme.colors.buttonPrimary);
|
|
20344
20370
|
if (["#FFF", "#FFFF", "#FFFFFF", "#FFFFFFFF"].includes(primaryButtonHex)) {
|
|
20345
20371
|
return void 0;
|
|
@@ -20394,7 +20420,7 @@ function MoonpaySetup({
|
|
|
20394
20420
|
depositAddress: paymentAddress
|
|
20395
20421
|
});
|
|
20396
20422
|
}, [onNext, paymentAddress]);
|
|
20397
|
-
const MoonpayWidget =
|
|
20423
|
+
const MoonpayWidget = useMemo28(() => {
|
|
20398
20424
|
return /* @__PURE__ */ React174.createElement(
|
|
20399
20425
|
FunPaymentMoonpayType,
|
|
20400
20426
|
{
|
|
@@ -20425,7 +20451,7 @@ function MoonpaySetup({
|
|
|
20425
20451
|
// src/modals/CheckoutModal/SelectAsset.tsx
|
|
20426
20452
|
import { FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST as FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST2 } from "@funkit/chains";
|
|
20427
20453
|
import { formatCurrencyAndStringify as formatCurrencyAndStringify11, isTokenEquivalent as isTokenEquivalent7 } from "@funkit/utils";
|
|
20428
|
-
import React183, { useEffect as useEffect35, useMemo as
|
|
20454
|
+
import React183, { useEffect as useEffect35, useMemo as useMemo30, useState as useState42 } from "react";
|
|
20429
20455
|
import { createPortal as createPortal10 } from "react-dom";
|
|
20430
20456
|
|
|
20431
20457
|
// src/components/Dropdown/ChainDropdown.tsx
|
|
@@ -20434,7 +20460,7 @@ import React180 from "react";
|
|
|
20434
20460
|
// src/components/Dropdown/BaseDropdown.tsx
|
|
20435
20461
|
import { isMobile as isMobile6, noop as noop6 } from "@funkit/utils";
|
|
20436
20462
|
import { AnimatePresence as AnimatePresence4, motion as motion6 } from "motion/react";
|
|
20437
|
-
import React178, { useCallback as useCallback32, useMemo as
|
|
20463
|
+
import React178, { useCallback as useCallback32, useMemo as useMemo29, useState as useState41 } from "react";
|
|
20438
20464
|
|
|
20439
20465
|
// src/components/FunSelect/FunClickOutside.tsx
|
|
20440
20466
|
import React175 from "react";
|
|
@@ -20640,7 +20666,7 @@ function BaseDropdown({
|
|
|
20640
20666
|
const handleSearch = (event) => {
|
|
20641
20667
|
setSearchInput(event.target.value);
|
|
20642
20668
|
};
|
|
20643
|
-
const filteredOptions =
|
|
20669
|
+
const filteredOptions = useMemo29(
|
|
20644
20670
|
() => options.filter(
|
|
20645
20671
|
(singleOption) => singleOption.label.toLowerCase().includes(searchInput?.toLowerCase())
|
|
20646
20672
|
),
|
|
@@ -21123,7 +21149,7 @@ function useEnrichedAccountHoldings({
|
|
|
21123
21149
|
const { apiKey } = useFunkitConfig();
|
|
21124
21150
|
const { isAllowed, isLoading } = useAllowedAssets();
|
|
21125
21151
|
const { loginType, walletAddress } = useGeneralWallet();
|
|
21126
|
-
const enrichedAccountHoldings =
|
|
21152
|
+
const enrichedAccountHoldings = useMemo30(() => {
|
|
21127
21153
|
if (!checkoutConfig) return [];
|
|
21128
21154
|
return Object.values(accountHoldings).map((asset) => {
|
|
21129
21155
|
const usableForCheckout = isAssetUsableToPayForCheckout({
|
|
@@ -21165,7 +21191,7 @@ function useAssetOptions({
|
|
|
21165
21191
|
userSelectedTargetAsset,
|
|
21166
21192
|
chainId
|
|
21167
21193
|
}) {
|
|
21168
|
-
const assetOptions =
|
|
21194
|
+
const assetOptions = useMemo30(() => {
|
|
21169
21195
|
return enrichedAccountHoldings.filter(
|
|
21170
21196
|
({ asset }) => chainId !== void 0 ? asset.pickedChainId === chainId.toString() : true
|
|
21171
21197
|
).map(({ asset, usableForCheckout }) => {
|
|
@@ -21236,7 +21262,7 @@ function MeshOrAccountSelectAsset({
|
|
|
21236
21262
|
targetAssetMinAmount: 0
|
|
21237
21263
|
};
|
|
21238
21264
|
const [selectedTargetAsset, setSelectedTargetAsset] = useState42(defaultTargetAsset);
|
|
21239
|
-
const defaultTokenSymbols =
|
|
21265
|
+
const defaultTokenSymbols = useMemo30(() => {
|
|
21240
21266
|
if (!checkoutConfig) {
|
|
21241
21267
|
return [];
|
|
21242
21268
|
}
|
|
@@ -21300,7 +21326,7 @@ function MeshOrAccountSelectAsset({
|
|
|
21300
21326
|
handleTargetAssetUpdate(tokenItem);
|
|
21301
21327
|
onFinish();
|
|
21302
21328
|
});
|
|
21303
|
-
const selectedChainTokenSymbol =
|
|
21329
|
+
const selectedChainTokenSymbol = useMemo30(() => {
|
|
21304
21330
|
if (explicitlySelectedChainTokenSymbol) {
|
|
21305
21331
|
const assetExists = assetOptions.find(
|
|
21306
21332
|
({ asset }) => asset.chainSymbolKey === explicitlySelectedChainTokenSymbol
|
|
@@ -21718,7 +21744,7 @@ import { createPortal as createPortal12 } from "react-dom";
|
|
|
21718
21744
|
|
|
21719
21745
|
// src/modals/CheckoutModal/SourceChange/useUpdateSourceAssetForCard.ts
|
|
21720
21746
|
import {
|
|
21721
|
-
FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as
|
|
21747
|
+
FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO15,
|
|
21722
21748
|
dydxChain as dydxChain3,
|
|
21723
21749
|
katanaChain
|
|
21724
21750
|
} from "@funkit/chains";
|
|
@@ -21744,7 +21770,7 @@ var pickSourceAssetForCard = async (checkoutItem, userIpInfo) => {
|
|
|
21744
21770
|
const wethAddrOnTargetChain = (await getTokenAddressBySymbolAndChainId2("weth", moonpayChainId)).toLowerCase();
|
|
21745
21771
|
const isTargetAssetEthOrWeth = [NATIVE_TOKEN, wethAddrOnTargetChain].includes(
|
|
21746
21772
|
checkoutItem.initSettings.config.targetAsset
|
|
21747
|
-
) &&
|
|
21773
|
+
) && FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO15[moonpayChainId]?.nativeCurrency.symbol === "ETH" /* ETH */;
|
|
21748
21774
|
let sourceTokenAddress;
|
|
21749
21775
|
let sourceTokenTicker;
|
|
21750
21776
|
let sourceTokenChainId;
|
|
@@ -21996,6 +22022,7 @@ function SourceChange({
|
|
|
21996
22022
|
if (!enableMeldPayment) await onSelectCard();
|
|
21997
22023
|
onNext({
|
|
21998
22024
|
connectNew: true,
|
|
22025
|
+
reverseAnimation: true,
|
|
21999
22026
|
paymentMethod: newSource2,
|
|
22000
22027
|
paymentMethodInfo: paymentMethodInfo2,
|
|
22001
22028
|
brokerageFailed: false
|
|
@@ -22284,7 +22311,7 @@ var LightningBoltIcon = ({ size = 16 }) => /* @__PURE__ */ React190.createElemen
|
|
|
22284
22311
|
|
|
22285
22312
|
// src/components/QRCode/QRCode.tsx
|
|
22286
22313
|
import QRCodeUtil from "qrcode";
|
|
22287
|
-
import React191, { useMemo as
|
|
22314
|
+
import React191, { useMemo as useMemo31 } from "react";
|
|
22288
22315
|
var generateMatrix = (value, errorCorrectionLevel) => {
|
|
22289
22316
|
const { data } = QRCodeUtil.create(value, { errorCorrectionLevel }).modules;
|
|
22290
22317
|
const sqrt = Math.sqrt(data.length);
|
|
@@ -22312,7 +22339,7 @@ function QRCode({
|
|
|
22312
22339
|
}) {
|
|
22313
22340
|
const { activeTheme } = useActiveTheme();
|
|
22314
22341
|
const size = sizeProp - Number.parseInt(outsidePadding, 10) * 2;
|
|
22315
|
-
const dots =
|
|
22342
|
+
const dots = useMemo31(() => {
|
|
22316
22343
|
const dots2 = [];
|
|
22317
22344
|
const matrix = generateMatrix(uri, ecl);
|
|
22318
22345
|
const cellSize = size / matrix.length;
|
|
@@ -22895,11 +22922,16 @@ var useTokenTransfer = (selectedChainId, selectedToken) => {
|
|
|
22895
22922
|
};
|
|
22896
22923
|
};
|
|
22897
22924
|
var useMinTransferValue = (selectedChainId) => {
|
|
22925
|
+
const minTransferValueJsonString = useFlag(FlagKey28.MinTokenTransferValue);
|
|
22926
|
+
const minTransferValue = safeJSONParse(
|
|
22927
|
+
minTransferValueJsonString
|
|
22928
|
+
);
|
|
22898
22929
|
const { userIpInfo } = useFunkitUserIp();
|
|
22899
22930
|
const isMainnet = selectedChainId === mainnet8.id;
|
|
22900
|
-
if (
|
|
22901
|
-
|
|
22902
|
-
|
|
22931
|
+
if (!minTransferValue) return 0;
|
|
22932
|
+
const transferLimitKey = userIpInfo?.alpha2 || "DEFAULT";
|
|
22933
|
+
const minTransferLimit = minTransferValue[transferLimitKey] ?? minTransferValue.DEFAULT;
|
|
22934
|
+
return isMainnet ? minTransferLimit.mainnet : minTransferLimit.nonMainnet;
|
|
22903
22935
|
};
|
|
22904
22936
|
var usePriceImpactEstimation = (selectedToken) => {
|
|
22905
22937
|
const { apiKey } = useFunkitConfig();
|
|
@@ -23483,7 +23515,7 @@ var FiatAccountDetail = {
|
|
|
23483
23515
|
|
|
23484
23516
|
// src/modals/CheckoutModal/VirtualFiatAccount/KycIframe.tsx
|
|
23485
23517
|
import { BridgeCustomerStatus as BridgeCustomerStatus7 } from "@funkit/api-base";
|
|
23486
|
-
import React205, { useCallback as useCallback34, useEffect as useEffect38, useMemo as
|
|
23518
|
+
import React205, { useCallback as useCallback34, useEffect as useEffect38, useMemo as useMemo32, useState as useState50 } from "react";
|
|
23487
23519
|
function useIframeListener(listeners) {
|
|
23488
23520
|
const handleMessage = useCallback34(
|
|
23489
23521
|
(event) => {
|
|
@@ -23536,7 +23568,7 @@ function KycIframe({
|
|
|
23536
23568
|
const { clearVirtualFiatAccounts } = useClearFrogAccountsCache();
|
|
23537
23569
|
const { data: kycLink, isLoading: isLinkLoading } = useLoadKycLink(modalState);
|
|
23538
23570
|
const [iframeLoading, setIframeLoading] = useState50(true);
|
|
23539
|
-
const listeners =
|
|
23571
|
+
const listeners = useMemo32(
|
|
23540
23572
|
() => ({
|
|
23541
23573
|
load: () => {
|
|
23542
23574
|
logger.info("KYC iframe loaded");
|
|
@@ -23565,7 +23597,8 @@ function KycIframe({
|
|
|
23565
23597
|
onClose: onBack,
|
|
23566
23598
|
open: true,
|
|
23567
23599
|
titleId: "rk_kyc_title",
|
|
23568
|
-
|
|
23600
|
+
withoutSidePadding: !loading,
|
|
23601
|
+
withoutBottomPadding: !loading,
|
|
23569
23602
|
withTransition: false
|
|
23570
23603
|
},
|
|
23571
23604
|
loading && /* @__PURE__ */ React205.createElement(React205.Fragment, null, /* @__PURE__ */ React205.createElement(
|
|
@@ -24256,7 +24289,7 @@ function FunConnectOptions({
|
|
|
24256
24289
|
}
|
|
24257
24290
|
}
|
|
24258
24291
|
};
|
|
24259
|
-
const stepComponent =
|
|
24292
|
+
const stepComponent = useMemo33(() => {
|
|
24260
24293
|
switch (step) {
|
|
24261
24294
|
case 0 /* SIGNIN_PRIMARY */:
|
|
24262
24295
|
case 1 /* SIGNIN_SECONDARY */:
|
|
@@ -24365,7 +24398,7 @@ var FULL_SOCIAL_LOGIN_OPTIONS = [
|
|
|
24365
24398
|
function useEnabledSocialLogins() {
|
|
24366
24399
|
const funkitConfig = useFunkitConfig();
|
|
24367
24400
|
const { web2SocialLogins } = funkitConfig.loginConfig;
|
|
24368
|
-
const enabledSocialItems =
|
|
24401
|
+
const enabledSocialItems = useMemo34(() => {
|
|
24369
24402
|
return FULL_SOCIAL_LOGIN_OPTIONS.filter(
|
|
24370
24403
|
(oAuthItem) => !!web2SocialLogins[oAuthItem.funkitKey]
|
|
24371
24404
|
);
|
|
@@ -24394,7 +24427,7 @@ function FunSignInStep({
|
|
|
24394
24427
|
handleOauthRedirect,
|
|
24395
24428
|
handleGenerateFcUri
|
|
24396
24429
|
} = useFunkitWeb2Login();
|
|
24397
|
-
const isEmailInputValid =
|
|
24430
|
+
const isEmailInputValid = useMemo34(() => {
|
|
24398
24431
|
return validateEmailString(emailInput);
|
|
24399
24432
|
}, [emailInput]);
|
|
24400
24433
|
const [emailError, setEmailError] = useState55();
|
|
@@ -24933,7 +24966,7 @@ var getTimestamp = (timestampMs) => formatTimestamp(new Date(timestampMs), {
|
|
|
24933
24966
|
// src/components/FunCheckoutHistory/FunCheckoutStatus.tsx
|
|
24934
24967
|
import { formatSecondsToCountdownForm } from "@funkit/utils";
|
|
24935
24968
|
import { motion as motion11 } from "motion/react";
|
|
24936
|
-
import React220, { useMemo as
|
|
24969
|
+
import React220, { useMemo as useMemo35 } from "react";
|
|
24937
24970
|
|
|
24938
24971
|
// src/components/FunCheckoutHistory/FunCheckoutStatus.css.ts
|
|
24939
24972
|
var GradientLoadingBox = "_101aujm0";
|
|
@@ -24994,7 +25027,7 @@ function PendingCheckoutStatus({
|
|
|
24994
25027
|
checkoutItem.latestQuote?.finalTimeEstimationMs,
|
|
24995
25028
|
checkoutItem.selectedPaymentMethodInfo?.paymentMethod
|
|
24996
25029
|
);
|
|
24997
|
-
const estimatedRemainingSeconds =
|
|
25030
|
+
const estimatedRemainingSeconds = useMemo35(() => {
|
|
24998
25031
|
const startTimeMs = extractStartTimeMs(
|
|
24999
25032
|
checkoutItem.id,
|
|
25000
25033
|
activeCheckoutItem,
|
|
@@ -25120,7 +25153,7 @@ function FunCheckoutHistoryDetail({
|
|
|
25120
25153
|
includeGenerateActionsParams
|
|
25121
25154
|
]
|
|
25122
25155
|
);
|
|
25123
|
-
const buttonProps =
|
|
25156
|
+
const buttonProps = useMemo36(() => {
|
|
25124
25157
|
if (!isCheckoutLoaded) {
|
|
25125
25158
|
return { title: "", isDisabled: true, isLoading: true };
|
|
25126
25159
|
}
|
|
@@ -25202,7 +25235,7 @@ var CheckoutAlert = ({ state, refundState, onHelp }) => {
|
|
|
25202
25235
|
|
|
25203
25236
|
// src/components/FunCheckoutHistory/FunCheckoutHistoryHelp.tsx
|
|
25204
25237
|
import { sendSupportMessage } from "@funkit/api-base";
|
|
25205
|
-
import React224, { useEffect as useEffect43, useMemo as
|
|
25238
|
+
import React224, { useEffect as useEffect43, useMemo as useMemo37, useRef as useRef19, useState as useState58 } from "react";
|
|
25206
25239
|
import { createPortal as createPortal15 } from "react-dom";
|
|
25207
25240
|
|
|
25208
25241
|
// src/components/FunInput/FunTextAreaInput.tsx
|
|
@@ -25349,7 +25382,7 @@ function FunCheckoutHistoryHelp({
|
|
|
25349
25382
|
);
|
|
25350
25383
|
const [descriptionInput, setDescriptionInput] = useState58("");
|
|
25351
25384
|
const [errorMessage, setErrorMessage] = useState58();
|
|
25352
|
-
const isEmailInputValid =
|
|
25385
|
+
const isEmailInputValid = useMemo37(() => {
|
|
25353
25386
|
return validateEmailString(emailInput);
|
|
25354
25387
|
}, [emailInput]);
|
|
25355
25388
|
const [processStage, setProcessStage] = useState58(
|
|
@@ -25538,11 +25571,11 @@ import {
|
|
|
25538
25571
|
formatTimestamp as formatTimestamp2,
|
|
25539
25572
|
isTokenEquivalent as isTokenEquivalent8
|
|
25540
25573
|
} from "@funkit/utils";
|
|
25541
|
-
import React226, { useCallback as useCallback41, useMemo as
|
|
25574
|
+
import React226, { useCallback as useCallback41, useMemo as useMemo39, useRef as useRef20, useState as useState59 } from "react";
|
|
25542
25575
|
import { createPortal as createPortal16 } from "react-dom";
|
|
25543
25576
|
|
|
25544
25577
|
// src/components/FunCheckoutHistory/FunDirectExecutionStatus.tsx
|
|
25545
|
-
import React225, { useMemo as
|
|
25578
|
+
import React225, { useMemo as useMemo38 } from "react";
|
|
25546
25579
|
function FunDirectExecutionStatus({
|
|
25547
25580
|
directExecution
|
|
25548
25581
|
}) {
|
|
@@ -25564,11 +25597,11 @@ function FunDirectExecutionStatus({
|
|
|
25564
25597
|
function PendingDirectExecutionStatus({
|
|
25565
25598
|
directExecution
|
|
25566
25599
|
}) {
|
|
25567
|
-
const totalSeconds =
|
|
25600
|
+
const totalSeconds = useMemo38(() => {
|
|
25568
25601
|
const timeEstimation = directExecution.clientMetadata.latestQuote?.finalTimeEstimationMs || 0;
|
|
25569
25602
|
return Math.ceil(timeEstimation / 1e3);
|
|
25570
25603
|
}, [directExecution]);
|
|
25571
|
-
const estimatedRemainingSeconds =
|
|
25604
|
+
const estimatedRemainingSeconds = useMemo38(() => {
|
|
25572
25605
|
const startTimeMs = directExecution.createdTimeMs;
|
|
25573
25606
|
return getTimeFromNowSeconds(startTimeMs, totalSeconds * 1e3);
|
|
25574
25607
|
}, [totalSeconds, directExecution]);
|
|
@@ -25620,7 +25653,7 @@ function FunDirectExecutionHistoryDetail({
|
|
|
25620
25653
|
includeGenerateActionsParams
|
|
25621
25654
|
]
|
|
25622
25655
|
);
|
|
25623
|
-
const buttonProps =
|
|
25656
|
+
const buttonProps = useMemo39(() => {
|
|
25624
25657
|
if (!isLoaded) {
|
|
25625
25658
|
return void 0;
|
|
25626
25659
|
}
|
|
@@ -25832,7 +25865,7 @@ function FunCheckoutHistoryContent({
|
|
|
25832
25865
|
}
|
|
25833
25866
|
|
|
25834
25867
|
// src/components/FunCheckoutHistory/useCustomStatusAnimationAboveTopbar.tsx
|
|
25835
|
-
import { clamp as
|
|
25868
|
+
import { clamp as clamp2 } from "@funkit/utils";
|
|
25836
25869
|
import React228, { useRef as useRef21, useState as useState60 } from "react";
|
|
25837
25870
|
var TOPBAR_HEIGHT = 56;
|
|
25838
25871
|
var DURATION_MS = 200;
|
|
@@ -25890,7 +25923,7 @@ function useCustomStatusAnimationAboveTopbar({
|
|
|
25890
25923
|
style: {
|
|
25891
25924
|
// Apply a position-based opacity to the icon if it gets too far into the topbar, so it fades out faster
|
|
25892
25925
|
// This helps (slightly) when scrolling much faster than the normal background fade animation
|
|
25893
|
-
opacity:
|
|
25926
|
+
opacity: clamp2(
|
|
25894
25927
|
1 - (scrollPos - startFadePos - statusIconSize) / TOPBAR_HEIGHT,
|
|
25895
25928
|
0,
|
|
25896
25929
|
1
|
|
@@ -25916,7 +25949,7 @@ function useCheckoutModalTitle(depositAddress, defaultTitle) {
|
|
|
25916
25949
|
import { IN_PROGRESS_CHECKOUT_STATES as IN_PROGRESS_CHECKOUT_STATES2 } from "@funkit/api-base";
|
|
25917
25950
|
import { formatTimestampToDate, fullMonthNames } from "@funkit/utils";
|
|
25918
25951
|
import clsx20 from "clsx";
|
|
25919
|
-
import React237, { useEffect as useEffect44, useMemo as
|
|
25952
|
+
import React237, { useEffect as useEffect44, useMemo as useMemo40, useRef as useRef22, useState as useState62 } from "react";
|
|
25920
25953
|
import { Virtuoso } from "react-virtuoso";
|
|
25921
25954
|
import { useAccount as useAccount6 } from "wagmi";
|
|
25922
25955
|
|
|
@@ -26464,7 +26497,7 @@ function Home({
|
|
|
26464
26497
|
const virtuosoDiv = virtuosoParentRef.current?.firstChild;
|
|
26465
26498
|
virtuosoDiv?.classList.add(animateVirtuosoInClass);
|
|
26466
26499
|
}, []);
|
|
26467
|
-
const AssetsList =
|
|
26500
|
+
const AssetsList = useMemo40(() => {
|
|
26468
26501
|
if (walletAssets && !Object.keys(walletAssets).length) {
|
|
26469
26502
|
return /* @__PURE__ */ React237.createElement(EmptyTabAlert, null);
|
|
26470
26503
|
}
|
|
@@ -26491,7 +26524,7 @@ function Home({
|
|
|
26491
26524
|
}
|
|
26492
26525
|
));
|
|
26493
26526
|
}, [walletAssets]);
|
|
26494
|
-
const CheckoutsList =
|
|
26527
|
+
const CheckoutsList = useMemo40(() => {
|
|
26495
26528
|
if (checkoutHistoryList.length === 0 && isCheckoutHistoryInited) {
|
|
26496
26529
|
return /* @__PURE__ */ React237.createElement(EmptyTabAlert, null);
|
|
26497
26530
|
}
|
|
@@ -27244,7 +27277,7 @@ var FunCheckoutBlocked = ({ reason }) => {
|
|
|
27244
27277
|
|
|
27245
27278
|
// src/modals/CheckoutModal/TransferToken/CheckoutNotifications.tsx
|
|
27246
27279
|
import clsx23 from "clsx";
|
|
27247
|
-
import React252, { useEffect as useEffect46, useMemo as
|
|
27280
|
+
import React252, { useEffect as useEffect46, useMemo as useMemo41, useState as useState65 } from "react";
|
|
27248
27281
|
|
|
27249
27282
|
// src/components/FunNotificationBanner/FunNotificationShowMoreButton.tsx
|
|
27250
27283
|
import React247 from "react";
|
|
@@ -28285,15 +28318,15 @@ var CheckoutNotifications = ({
|
|
|
28285
28318
|
if (initialDirectExecutions || !directExecutions) return;
|
|
28286
28319
|
setInitialDirectExecutions(directExecutions);
|
|
28287
28320
|
}, [initialDirectExecutions, directExecutions]);
|
|
28288
|
-
const displayedDirectExecutions =
|
|
28321
|
+
const displayedDirectExecutions = useMemo41(() => {
|
|
28289
28322
|
if (!directExecutions) return [];
|
|
28290
28323
|
return getUpdatedDirectExecutions(directExecutions, initialDirectExecutions).filter(({ txHash }) => !closedNotifications.includes(txHash)).slice(0, MAX_COUNT);
|
|
28291
28324
|
}, [initialDirectExecutions, directExecutions, closedNotifications]);
|
|
28292
|
-
const displayedCheckouts =
|
|
28325
|
+
const displayedCheckouts = useMemo41(() => {
|
|
28293
28326
|
if (!checkouts) return [];
|
|
28294
28327
|
return getUpdatedCheckouts(checkouts, initialCheckouts).filter(({ depositAddr }) => !closedNotifications.includes(depositAddr)).slice(0, MAX_COUNT);
|
|
28295
28328
|
}, [initialCheckouts, checkouts, closedNotifications]);
|
|
28296
|
-
const combinedNotifications =
|
|
28329
|
+
const combinedNotifications = useMemo41(() => {
|
|
28297
28330
|
return [
|
|
28298
28331
|
...displayedDirectExecutions.map(
|
|
28299
28332
|
(item) => ({ ...item, isDirectExecution: true })
|
|
@@ -28303,7 +28336,7 @@ var CheckoutNotifications = ({
|
|
|
28303
28336
|
)
|
|
28304
28337
|
].sort((a, b) => b.createdTimeMs - a.createdTimeMs);
|
|
28305
28338
|
}, [displayedDirectExecutions, displayedCheckouts]);
|
|
28306
|
-
const displayedNotifications =
|
|
28339
|
+
const displayedNotifications = useMemo41(() => {
|
|
28307
28340
|
return isExpanded ? combinedNotifications : combinedNotifications.slice(0, COLLAPSED_COUNT);
|
|
28308
28341
|
}, [isExpanded, combinedNotifications]);
|
|
28309
28342
|
const handleNotificationClose = (id) => setClosedNotifications((prev) => [...prev, id]);
|
|
@@ -28457,7 +28490,8 @@ function FunCheckoutModalInner({
|
|
|
28457
28490
|
onClose: onCloseWrapper,
|
|
28458
28491
|
onAnimationComplete: handleAnimationComplete,
|
|
28459
28492
|
titleId: "fun-checkout-modal",
|
|
28460
|
-
isHidden: modalState.isSoftHidden
|
|
28493
|
+
isHidden: modalState.isSoftHidden,
|
|
28494
|
+
withoutBottomPadding: modalState.step === "meld_currency_select" /* MELD_CURRENCY_SELECT */
|
|
28461
28495
|
},
|
|
28462
28496
|
/* @__PURE__ */ React253.createElement(FunCheckoutModalHeightAnimationWrapper, { checkoutStep: modalState.step }, topbar, /* @__PURE__ */ React253.createElement(
|
|
28463
28497
|
Dialog.Content,
|
|
@@ -28628,7 +28662,7 @@ function ModalProvider({ children }) {
|
|
|
28628
28662
|
return /* @__PURE__ */ React255.createElement(
|
|
28629
28663
|
ModalContext.Provider,
|
|
28630
28664
|
{
|
|
28631
|
-
value:
|
|
28665
|
+
value: useMemo42(
|
|
28632
28666
|
() => ({
|
|
28633
28667
|
accountModalOpen,
|
|
28634
28668
|
accountModalTab,
|
|
@@ -29354,7 +29388,7 @@ var FunkitWeb2Provider = ({
|
|
|
29354
29388
|
},
|
|
29355
29389
|
[privy]
|
|
29356
29390
|
);
|
|
29357
|
-
const web2UserInfo =
|
|
29391
|
+
const web2UserInfo = useMemo43(() => {
|
|
29358
29392
|
if (!loggedInUser || !loggedInUser?.linked_accounts || !loggedInUser?.linked_accounts?.length) {
|
|
29359
29393
|
return PLACEHOLDER_FUNKIT_USER_INFO;
|
|
29360
29394
|
}
|
|
@@ -30369,7 +30403,7 @@ function setFunkitConnectVersion({ version }) {
|
|
|
30369
30403
|
localStorage.setItem(storageKey5, version);
|
|
30370
30404
|
}
|
|
30371
30405
|
function getCurrentSdkVersion() {
|
|
30372
|
-
return "5.5.
|
|
30406
|
+
return "5.5.9";
|
|
30373
30407
|
}
|
|
30374
30408
|
function useFingerprint() {
|
|
30375
30409
|
const fingerprint = useCallback49(() => {
|