@deframe-sdk/components 0.1.78 → 0.1.79
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/dist/index.d.mts +121 -1
- package/dist/index.d.ts +121 -1
- package/dist/index.js +391 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +389 -3
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +69 -0
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -12316,6 +12316,7 @@ var EarnAmountInputView = ({
|
|
|
12316
12316
|
onChange,
|
|
12317
12317
|
ariaLabel,
|
|
12318
12318
|
dollarAmountFormatted,
|
|
12319
|
+
disabled,
|
|
12319
12320
|
availableBalanceFormatted
|
|
12320
12321
|
}) => {
|
|
12321
12322
|
return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
|
|
@@ -12329,6 +12330,7 @@ var EarnAmountInputView = ({
|
|
|
12329
12330
|
autoComplete: "off",
|
|
12330
12331
|
"aria-label": ariaLabel,
|
|
12331
12332
|
value,
|
|
12333
|
+
disabled,
|
|
12332
12334
|
min: "0",
|
|
12333
12335
|
step: "any",
|
|
12334
12336
|
className: "[font-size:var(--deframe-widget-font-size-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] bg-transparent outline-none text-right w-full min-w-[105px] placeholder:text-[color:var(--deframe-widget-color-text-primary-disabled)] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
|
|
@@ -12985,7 +12987,8 @@ var EarnAmountInputSimpleView = ({
|
|
|
12985
12987
|
value,
|
|
12986
12988
|
onChange,
|
|
12987
12989
|
ariaLabel,
|
|
12988
|
-
dollarAmountFormatted
|
|
12990
|
+
dollarAmountFormatted,
|
|
12991
|
+
disabled
|
|
12989
12992
|
}) => {
|
|
12990
12993
|
const isEmpty = !value || value === "0";
|
|
12991
12994
|
const fontSizeClass = useResponsiveFontSize(value || "");
|
|
@@ -13026,9 +13029,10 @@ var EarnAmountInputSimpleView = ({
|
|
|
13026
13029
|
placeholder: "0",
|
|
13027
13030
|
"aria-label": ariaLabel,
|
|
13028
13031
|
value,
|
|
13032
|
+
disabled,
|
|
13029
13033
|
onChange,
|
|
13030
13034
|
onWheel: (e) => e.currentTarget.blur(),
|
|
13031
|
-
className: inputClasses
|
|
13035
|
+
className: twMerge(inputClasses, "disabled:cursor-not-allowed disabled:opacity-50")
|
|
13032
13036
|
}
|
|
13033
13037
|
),
|
|
13034
13038
|
dollarAmountFormatted && /* @__PURE__ */ jsx(
|
|
@@ -18913,6 +18917,388 @@ var OfframpFailedSimpleView = () => {
|
|
|
18913
18917
|
}
|
|
18914
18918
|
) });
|
|
18915
18919
|
};
|
|
18920
|
+
|
|
18921
|
+
// src/stories/wallet-transfer-flow-view/layoutClasses.ts
|
|
18922
|
+
var walletTransferFrameClasses = [
|
|
18923
|
+
"relative mx-auto mt-[40px] flex w-[620px] max-w-[calc(100vw-32px)] flex-col overflow-hidden",
|
|
18924
|
+
"rounded-[var(--deframe-widget-size-radius-xs)]",
|
|
18925
|
+
"bg-[var(--deframe-widget-color-bg-subtle)]",
|
|
18926
|
+
"px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)]",
|
|
18927
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
18928
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
18929
|
+
].join(" ");
|
|
18930
|
+
var walletTransferHeaderClasses = [
|
|
18931
|
+
"flex items-start gap-[var(--deframe-widget-size-gap-sm)]",
|
|
18932
|
+
"px-[var(--deframe-widget-size-padding-x-sm)]"
|
|
18933
|
+
].join(" ");
|
|
18934
|
+
var walletTransferTitleClasses = [
|
|
18935
|
+
"text-[21px]",
|
|
18936
|
+
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
18937
|
+
"leading-[1.2]",
|
|
18938
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
18939
|
+
].join(" ");
|
|
18940
|
+
var walletTransferSubtitleClasses = [
|
|
18941
|
+
"mt-[var(--deframe-widget-size-gap-xs)]",
|
|
18942
|
+
"text-[14px]",
|
|
18943
|
+
"leading-[1.35]",
|
|
18944
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
18945
|
+
].join(" ");
|
|
18946
|
+
var walletTransferBodyClasses = [
|
|
18947
|
+
"flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
|
|
18948
|
+
"px-[var(--deframe-widget-size-padding-x-sm)]",
|
|
18949
|
+
"py-[var(--deframe-widget-size-padding-y-md)]"
|
|
18950
|
+
].join(" ");
|
|
18951
|
+
var walletTransferInputCardClasses = [
|
|
18952
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
18953
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
18954
|
+
"bg-[var(--deframe-widget-color-bg-subtle)]",
|
|
18955
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
|
|
18956
|
+
].join(" ");
|
|
18957
|
+
var walletTransferTokenSelectorClasses = [
|
|
18958
|
+
"bg-[var(--deframe-widget-color-bg-raised)]",
|
|
18959
|
+
"hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-raised)_92%,transparent)]"
|
|
18960
|
+
].join(" ");
|
|
18961
|
+
var walletTransferFooterClasses = [
|
|
18962
|
+
"px-[var(--deframe-widget-size-padding-x-sm)]",
|
|
18963
|
+
"pt-[var(--deframe-widget-size-padding-y-md)]"
|
|
18964
|
+
].join(" ");
|
|
18965
|
+
function WalletOnchainDepositView({
|
|
18966
|
+
token,
|
|
18967
|
+
network,
|
|
18968
|
+
depositAddress,
|
|
18969
|
+
warningMessage,
|
|
18970
|
+
isPreparing,
|
|
18971
|
+
isReady,
|
|
18972
|
+
qrCode,
|
|
18973
|
+
onTokenClick,
|
|
18974
|
+
onAddressCopy,
|
|
18975
|
+
onSubmit,
|
|
18976
|
+
labels,
|
|
18977
|
+
className
|
|
18978
|
+
}) {
|
|
18979
|
+
var _a;
|
|
18980
|
+
const selectedToken = token ? { symbol: token.symbol, logoURI: token.logoURI } : null;
|
|
18981
|
+
const hasSelection = Boolean(token && network);
|
|
18982
|
+
const canSubmit = hasSelection && isReady;
|
|
18983
|
+
const submitLabel = canSubmit ? labels.submitReady : labels.submitIdle;
|
|
18984
|
+
const showAddress = canSubmit && depositAddress;
|
|
18985
|
+
const showIdle = !isPreparing && !showAddress;
|
|
18986
|
+
const addressCopyHandler = React6.useCallback(() => {
|
|
18987
|
+
if (!depositAddress) return;
|
|
18988
|
+
onAddressCopy == null ? void 0 : onAddressCopy(depositAddress);
|
|
18989
|
+
}, [depositAddress, onAddressCopy]);
|
|
18990
|
+
return /* @__PURE__ */ jsxs(
|
|
18991
|
+
"div",
|
|
18992
|
+
{
|
|
18993
|
+
"data-test-id": "wallet-onchain-deposit-view",
|
|
18994
|
+
className: twMerge(
|
|
18995
|
+
walletTransferFrameClasses,
|
|
18996
|
+
className
|
|
18997
|
+
),
|
|
18998
|
+
children: [
|
|
18999
|
+
/* @__PURE__ */ jsx("header", { className: walletTransferHeaderClasses, children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
19000
|
+
/* @__PURE__ */ jsx("h2", { className: walletTransferTitleClasses, children: labels.title }),
|
|
19001
|
+
/* @__PURE__ */ jsx("p", { className: walletTransferSubtitleClasses, children: labels.subtitle })
|
|
19002
|
+
] }) }),
|
|
19003
|
+
/* @__PURE__ */ jsxs("div", { className: walletTransferBodyClasses, children: [
|
|
19004
|
+
/* @__PURE__ */ jsx(
|
|
19005
|
+
"section",
|
|
19006
|
+
{
|
|
19007
|
+
"data-test-id": "wallet-onchain-deposit-view-asset-card",
|
|
19008
|
+
className: walletTransferInputCardClasses,
|
|
19009
|
+
children: /* @__PURE__ */ jsx(
|
|
19010
|
+
EarnTokenSelectorSimpleView,
|
|
19011
|
+
{
|
|
19012
|
+
selectedToken,
|
|
19013
|
+
onTokenClick,
|
|
19014
|
+
onNetworkAndAssetClick: onTokenClick,
|
|
19015
|
+
isLoading: false,
|
|
19016
|
+
selectTokenLabel: labels.tokenPlaceholder,
|
|
19017
|
+
chainLabel: (_a = network == null ? void 0 : network.name) != null ? _a : labels.networkPlaceholder,
|
|
19018
|
+
chainImage: network == null ? void 0 : network.iconUrl,
|
|
19019
|
+
className: twMerge(walletTransferTokenSelectorClasses, "w-full")
|
|
19020
|
+
}
|
|
19021
|
+
)
|
|
19022
|
+
}
|
|
19023
|
+
),
|
|
19024
|
+
/* @__PURE__ */ jsx(
|
|
19025
|
+
EarnInlineNotificationSimpleView,
|
|
19026
|
+
{
|
|
19027
|
+
variant: "warning",
|
|
19028
|
+
message: warningMessage
|
|
19029
|
+
}
|
|
19030
|
+
),
|
|
19031
|
+
/* @__PURE__ */ jsxs(
|
|
19032
|
+
"section",
|
|
19033
|
+
{
|
|
19034
|
+
"data-test-id": "wallet-onchain-deposit-view-address-card",
|
|
19035
|
+
className: walletTransferInputCardClasses,
|
|
19036
|
+
children: [
|
|
19037
|
+
isPreparing && /* @__PURE__ */ jsx(DepositSkeleton, {}),
|
|
19038
|
+
showAddress && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
19039
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
19040
|
+
/* @__PURE__ */ jsx("p", { className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.addressTitle }),
|
|
19041
|
+
/* @__PURE__ */ jsx("p", { className: "mt-1 text-[12px] leading-[1.35] text-[color:var(--deframe-widget-color-text-tertiary)]", children: labels.addressSubtitle })
|
|
19042
|
+
] }),
|
|
19043
|
+
/* @__PURE__ */ jsx(AddressDisplay, { address: depositAddress, onCopy: addressCopyHandler }),
|
|
19044
|
+
qrCode && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "rounded-[var(--deframe-widget-size-radius-sm)] bg-white p-3", children: qrCode }) })
|
|
19045
|
+
] }),
|
|
19046
|
+
showIdle && /* @__PURE__ */ jsxs("div", { className: "flex min-h-[180px] flex-col items-center justify-center gap-[var(--deframe-widget-size-gap-xs)] text-center", children: [
|
|
19047
|
+
/* @__PURE__ */ jsx("p", { className: "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.idleTitle }),
|
|
19048
|
+
/* @__PURE__ */ jsx("p", { className: "max-w-[280px] text-[13px] leading-[1.4] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.idleSubtitle })
|
|
19049
|
+
] })
|
|
19050
|
+
]
|
|
19051
|
+
}
|
|
19052
|
+
)
|
|
19053
|
+
] }),
|
|
19054
|
+
/* @__PURE__ */ jsx("footer", { className: walletTransferFooterClasses, children: /* @__PURE__ */ jsx(
|
|
19055
|
+
PrimaryButton,
|
|
19056
|
+
{
|
|
19057
|
+
type: "button",
|
|
19058
|
+
disabled: !canSubmit,
|
|
19059
|
+
onClick: onSubmit,
|
|
19060
|
+
className: "h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
|
|
19061
|
+
children: submitLabel
|
|
19062
|
+
}
|
|
19063
|
+
) })
|
|
19064
|
+
]
|
|
19065
|
+
}
|
|
19066
|
+
);
|
|
19067
|
+
}
|
|
19068
|
+
function DepositSkeleton() {
|
|
19069
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[180px] flex-col items-center justify-center gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
19070
|
+
/* @__PURE__ */ jsx(Skeleton, { width: "70%", height: "1rem", variant: "text", shimmer: true }),
|
|
19071
|
+
/* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "2rem", variant: "text", shimmer: true }),
|
|
19072
|
+
/* @__PURE__ */ jsx(Skeleton, { width: "8rem", height: "8rem", variant: "rect", className: "rounded-[var(--deframe-widget-size-radius-sm)]", shimmer: true })
|
|
19073
|
+
] });
|
|
19074
|
+
}
|
|
19075
|
+
function WalletOnchainWithdrawView({
|
|
19076
|
+
token,
|
|
19077
|
+
network,
|
|
19078
|
+
formattedBalance,
|
|
19079
|
+
amount,
|
|
19080
|
+
formattedAmountValue,
|
|
19081
|
+
destinationAddress,
|
|
19082
|
+
destinationNetwork,
|
|
19083
|
+
details,
|
|
19084
|
+
isProcessing,
|
|
19085
|
+
isAmountDisabled,
|
|
19086
|
+
showMaxButton,
|
|
19087
|
+
minAmountWarning,
|
|
19088
|
+
walletError,
|
|
19089
|
+
transferError,
|
|
19090
|
+
finalWarning,
|
|
19091
|
+
submitDisabled,
|
|
19092
|
+
submitLabel,
|
|
19093
|
+
onTokenClick,
|
|
19094
|
+
onAmountChange,
|
|
19095
|
+
onMaxClick,
|
|
19096
|
+
onDestinationAddressChange,
|
|
19097
|
+
onSubmit,
|
|
19098
|
+
labels,
|
|
19099
|
+
className
|
|
19100
|
+
}) {
|
|
19101
|
+
var _a;
|
|
19102
|
+
const [isDetailsOpen, setIsDetailsOpen] = React6.useState(false);
|
|
19103
|
+
const selectedToken = token ? { symbol: token.symbol, logoURI: token.logoURI } : null;
|
|
19104
|
+
const hasToken = Boolean(token && network);
|
|
19105
|
+
const hasAmountAlert = Boolean(minAmountWarning || walletError);
|
|
19106
|
+
const hasAddressAlert = Boolean(transferError);
|
|
19107
|
+
const tokenSelectorClick = isProcessing ? void 0 : onTokenClick;
|
|
19108
|
+
const destinationNetworkText = destinationNetwork ? `${labels.destinationNetworkHint}: ${destinationNetwork.name}` : labels.destinationNetworkEmpty;
|
|
19109
|
+
React6.useEffect(() => {
|
|
19110
|
+
setIsDetailsOpen(Boolean(details));
|
|
19111
|
+
}, [details]);
|
|
19112
|
+
const amountCardClasses = twMerge(
|
|
19113
|
+
walletTransferInputCardClasses,
|
|
19114
|
+
"transition-[border-color,background] duration-200",
|
|
19115
|
+
hasAmountAlert ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]" : ""
|
|
19116
|
+
);
|
|
19117
|
+
const addressCardClasses = twMerge(
|
|
19118
|
+
walletTransferInputCardClasses,
|
|
19119
|
+
"transition-[border-color,background] duration-200",
|
|
19120
|
+
hasAddressAlert ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]" : ""
|
|
19121
|
+
);
|
|
19122
|
+
const addressInputWrapperClasses = twMerge(
|
|
19123
|
+
"flex min-h-[34px] items-center border-0 bg-transparent transition-[color] duration-150",
|
|
19124
|
+
hasAddressAlert ? "text-[color:var(--deframe-widget-color-state-error)]" : "focus-within:text-[color:var(--deframe-widget-color-text-primary)]"
|
|
19125
|
+
);
|
|
19126
|
+
return /* @__PURE__ */ jsxs(
|
|
19127
|
+
"div",
|
|
19128
|
+
{
|
|
19129
|
+
"data-test-id": "wallet-onchain-withdraw-view",
|
|
19130
|
+
className: twMerge(
|
|
19131
|
+
walletTransferFrameClasses,
|
|
19132
|
+
className
|
|
19133
|
+
),
|
|
19134
|
+
children: [
|
|
19135
|
+
/* @__PURE__ */ jsx("header", { className: walletTransferHeaderClasses, children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
19136
|
+
/* @__PURE__ */ jsx("h2", { className: walletTransferTitleClasses, children: labels.title }),
|
|
19137
|
+
/* @__PURE__ */ jsx("p", { className: walletTransferSubtitleClasses, children: labels.subtitle })
|
|
19138
|
+
] }) }),
|
|
19139
|
+
/* @__PURE__ */ jsxs("div", { className: walletTransferBodyClasses, children: [
|
|
19140
|
+
/* @__PURE__ */ jsxs("section", { "data-test-id": "wallet-onchain-withdraw-view-amount-card", className: amountCardClasses, children: [
|
|
19141
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
19142
|
+
/* @__PURE__ */ jsx(
|
|
19143
|
+
EarnTokenSelectorSimpleView,
|
|
19144
|
+
{
|
|
19145
|
+
selectedToken,
|
|
19146
|
+
onTokenClick,
|
|
19147
|
+
onNetworkAndAssetClick: tokenSelectorClick,
|
|
19148
|
+
isLoading: false,
|
|
19149
|
+
selectTokenLabel: labels.tokenPlaceholder,
|
|
19150
|
+
chainLabel: (_a = network == null ? void 0 : network.name) != null ? _a : labels.sourceNetworkPlaceholder,
|
|
19151
|
+
chainImage: network == null ? void 0 : network.iconUrl,
|
|
19152
|
+
className: walletTransferTokenSelectorClasses
|
|
19153
|
+
}
|
|
19154
|
+
),
|
|
19155
|
+
/* @__PURE__ */ jsx("div", { className: "h-10 w-px shrink-0 bg-[var(--deframe-widget-color-border-secondary)]" }),
|
|
19156
|
+
/* @__PURE__ */ jsx(
|
|
19157
|
+
EarnAmountInputSimpleView,
|
|
19158
|
+
{
|
|
19159
|
+
value: amount,
|
|
19160
|
+
onChange: (event) => onAmountChange(event.target.value),
|
|
19161
|
+
ariaLabel: "Amount to withdraw",
|
|
19162
|
+
dollarAmountFormatted: formattedAmountValue,
|
|
19163
|
+
disabled: isAmountDisabled || isProcessing
|
|
19164
|
+
}
|
|
19165
|
+
)
|
|
19166
|
+
] }),
|
|
19167
|
+
hasToken && /* @__PURE__ */ jsxs("div", { className: "mt-[var(--deframe-widget-size-gap-sm)] flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
19168
|
+
/* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate text-[13px] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
|
|
19169
|
+
labels.balanceLabel,
|
|
19170
|
+
": ",
|
|
19171
|
+
formattedBalance
|
|
19172
|
+
] }),
|
|
19173
|
+
showMaxButton && /* @__PURE__ */ jsx(
|
|
19174
|
+
"button",
|
|
19175
|
+
{
|
|
19176
|
+
type: "button",
|
|
19177
|
+
onClick: onMaxClick,
|
|
19178
|
+
disabled: isAmountDisabled || isProcessing,
|
|
19179
|
+
className: "shrink-0 cursor-pointer text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)] transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
|
|
19180
|
+
children: labels.maxLabel
|
|
19181
|
+
}
|
|
19182
|
+
)
|
|
19183
|
+
] }),
|
|
19184
|
+
minAmountWarning && /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(EarnInlineNotificationSimpleView, { variant: "warning", message: minAmountWarning }) }),
|
|
19185
|
+
walletError && /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(EarnInlineNotificationSimpleView, { variant: "error", message: walletError }) })
|
|
19186
|
+
] }),
|
|
19187
|
+
/* @__PURE__ */ jsxs("section", { "data-test-id": "wallet-onchain-withdraw-view-address-card", className: addressCardClasses, children: [
|
|
19188
|
+
/* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
19189
|
+
/* @__PURE__ */ jsx("span", { className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationAddressLabel }),
|
|
19190
|
+
/* @__PURE__ */ jsx("span", { className: addressInputWrapperClasses, children: /* @__PURE__ */ jsx(
|
|
19191
|
+
"input",
|
|
19192
|
+
{
|
|
19193
|
+
type: "text",
|
|
19194
|
+
value: destinationAddress,
|
|
19195
|
+
onChange: (event) => onDestinationAddressChange(event.target.value),
|
|
19196
|
+
placeholder: labels.destinationAddressPlaceholder,
|
|
19197
|
+
disabled: isProcessing,
|
|
19198
|
+
"aria-label": labels.destinationAddressLabel,
|
|
19199
|
+
spellCheck: false,
|
|
19200
|
+
autoComplete: "off",
|
|
19201
|
+
className: "w-full bg-transparent text-[14px] leading-[1.35] text-[color:var(--deframe-widget-color-text-primary)] outline-none placeholder:text-[color:var(--deframe-widget-color-text-secondary)] disabled:cursor-not-allowed disabled:opacity-50"
|
|
19202
|
+
}
|
|
19203
|
+
) })
|
|
19204
|
+
] }),
|
|
19205
|
+
/* @__PURE__ */ jsxs("div", { className: "mt-[var(--deframe-widget-size-gap-sm)] flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)] border-t border-[color:var(--deframe-widget-color-border-secondary)] pt-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
19206
|
+
/* @__PURE__ */ jsx("span", { className: "shrink-0 text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: labels.destinationNetworkLabel }),
|
|
19207
|
+
/* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-right text-[12px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-secondary)]", children: destinationNetworkText })
|
|
19208
|
+
] }),
|
|
19209
|
+
transferError && /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(EarnInlineNotificationSimpleView, { variant: "error", message: transferError }) })
|
|
19210
|
+
] }),
|
|
19211
|
+
/* @__PURE__ */ jsx(EarnInlineNotificationSimpleView, { variant: "info", message: labels.infoMessage }),
|
|
19212
|
+
finalWarning && /* @__PURE__ */ jsx(EarnInlineNotificationSimpleView, { variant: "warning", message: finalWarning }),
|
|
19213
|
+
details && /* @__PURE__ */ jsxs("section", { className: walletTransferInputCardClasses, children: [
|
|
19214
|
+
/* @__PURE__ */ jsxs(
|
|
19215
|
+
"button",
|
|
19216
|
+
{
|
|
19217
|
+
type: "button",
|
|
19218
|
+
onClick: () => setIsDetailsOpen((value) => !value),
|
|
19219
|
+
className: "flex w-full items-center justify-between gap-[var(--deframe-widget-size-gap-md)] text-left",
|
|
19220
|
+
children: [
|
|
19221
|
+
/* @__PURE__ */ jsx("span", { className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.detailsTitle }),
|
|
19222
|
+
/* @__PURE__ */ jsx(
|
|
19223
|
+
MdOutlineExpandMore,
|
|
19224
|
+
{
|
|
19225
|
+
className: twMerge("h-5 w-5 shrink-0 text-[color:var(--deframe-widget-color-text-secondary)] transition-transform", isDetailsOpen && "rotate-180"),
|
|
19226
|
+
"aria-hidden": "true"
|
|
19227
|
+
}
|
|
19228
|
+
)
|
|
19229
|
+
]
|
|
19230
|
+
}
|
|
19231
|
+
),
|
|
19232
|
+
isDetailsOpen && /* @__PURE__ */ jsxs("div", { className: "mt-[var(--deframe-widget-size-gap-md)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
19233
|
+
/* @__PURE__ */ jsx(DetailRow2, { label: labels.detailsAmountLabel, value: details.amount }),
|
|
19234
|
+
/* @__PURE__ */ jsx(DetailRow2, { label: labels.detailsFeeLabel, value: details.fee }),
|
|
19235
|
+
/* @__PURE__ */ jsx("div", { className: "border-t border-[color:var(--deframe-widget-color-border-secondary)] pt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(DetailRow2, { label: labels.detailsReceiveLabel, value: details.receive, strong: true }) })
|
|
19236
|
+
] })
|
|
19237
|
+
] })
|
|
19238
|
+
] }),
|
|
19239
|
+
/* @__PURE__ */ jsx("footer", { className: walletTransferFooterClasses, children: /* @__PURE__ */ jsx(
|
|
19240
|
+
PrimaryButton,
|
|
19241
|
+
{
|
|
19242
|
+
type: "button",
|
|
19243
|
+
disabled: submitDisabled,
|
|
19244
|
+
onClick: onSubmit,
|
|
19245
|
+
className: "h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
|
|
19246
|
+
children: submitLabel
|
|
19247
|
+
}
|
|
19248
|
+
) })
|
|
19249
|
+
]
|
|
19250
|
+
}
|
|
19251
|
+
);
|
|
19252
|
+
}
|
|
19253
|
+
function DetailRow2({ label, value, strong = false }) {
|
|
19254
|
+
const valueClasses = strong ? "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]" : "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)]";
|
|
19255
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
19256
|
+
/* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)]", children: label }),
|
|
19257
|
+
/* @__PURE__ */ jsx("span", { className: valueClasses, children: value })
|
|
19258
|
+
] });
|
|
19259
|
+
}
|
|
19260
|
+
function WalletTransferAssetNetworkPicker({
|
|
19261
|
+
isOpen,
|
|
19262
|
+
onClose,
|
|
19263
|
+
networks,
|
|
19264
|
+
selectedNetwork,
|
|
19265
|
+
onNetworkSelect,
|
|
19266
|
+
displayedTokens,
|
|
19267
|
+
findBalance,
|
|
19268
|
+
formatTokenAmount,
|
|
19269
|
+
formatCurrencyValue,
|
|
19270
|
+
onAssetClick,
|
|
19271
|
+
onSearch,
|
|
19272
|
+
autoFocus,
|
|
19273
|
+
hasMore = false,
|
|
19274
|
+
onLoadMore,
|
|
19275
|
+
isFetching = false,
|
|
19276
|
+
labels
|
|
19277
|
+
}) {
|
|
19278
|
+
const handleLoadMore = onLoadMore != null ? onLoadMore : (() => void 0);
|
|
19279
|
+
return /* @__PURE__ */ jsx(
|
|
19280
|
+
ChooseNetworkAndAssetViewSimple,
|
|
19281
|
+
{
|
|
19282
|
+
isOpen,
|
|
19283
|
+
onClose,
|
|
19284
|
+
networks,
|
|
19285
|
+
selectedNetwork,
|
|
19286
|
+
onNetworkSelect,
|
|
19287
|
+
displayedTokens,
|
|
19288
|
+
findBalance,
|
|
19289
|
+
formatTokenAmount,
|
|
19290
|
+
formatCurrencyValue,
|
|
19291
|
+
onAssetClick,
|
|
19292
|
+
onSearch,
|
|
19293
|
+
autoFocus,
|
|
19294
|
+
closeOnBackdropClick: true,
|
|
19295
|
+
hasMore,
|
|
19296
|
+
onLoadMore: handleLoadMore,
|
|
19297
|
+
isFetching,
|
|
19298
|
+
labels
|
|
19299
|
+
}
|
|
19300
|
+
);
|
|
19301
|
+
}
|
|
18916
19302
|
var DashboardCard = ({ children, className }) => {
|
|
18917
19303
|
return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-card", className: twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
|
|
18918
19304
|
};
|
|
@@ -20104,6 +20490,6 @@ var DashboardViewSimple = ({
|
|
|
20104
20490
|
);
|
|
20105
20491
|
};
|
|
20106
20492
|
|
|
20107
|
-
export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChoiceCard, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DepositSuccessIcon, DetailsHeader, EARN_CATEGORY_DEFINITIONS, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnDesktopViewSimple, EarnExploreGridView, EarnFlowSkeletonSimple, EarnHistoryView, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedSimpleView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawFormViewSimple, EarnWithdrawProcessingSimpleView, EarnWithdrawProcessingView, EarnWithdrawSuccessSimpleView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningSimpleView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListItem, HistoryListItemSimple, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InputField, InputLabel, Input as InputRoot, InvestmentCrossChainProcessingSimpleView, InvestmentCrossChainProcessingView, KYCActionRow, KYCAddressPage, KYCBasicDataPage, KYCChecklistCard, KYCChecklistItem, KYCDataCard, KYCDocumentPage, KYCEditPage, KYCFieldMessage, KYCFormPage, KYCInfoRow, KYCIntroPage, KYCLoadingPage, KYCMessageBanner, KYCPageHeader, KYCPageSection, KYCPageShell, KYCReviewPage, KYCReviewPageSkeleton, KYCStatusItemCard, KYCStatusPage, KYCStatusPanel, KYCStepIndicator, KycLoadingView, KycRequiredView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, OffchainMethodSelectionView, OfframpFailedSimpleView, OfframpInputFormSimpleView, OfframpInputFormView, OfframpProcessingSimpleView, OfframpProcessingView, OfframpSuccessSimpleView, OfframpSuccessView, OnchainDepositFormSimpleView, OnchainDepositFormView, OnchainDepositSuccessSimpleView, OnchainDepositSuccessView, OnchainWithdrawChainSelectorView, OnchainWithdrawFailedSimpleView, OnchainWithdrawFailedView, OnchainWithdrawFormSimpleView, OnchainWithdrawFormView, OnchainWithdrawProcessingSimpleView, OnchainWithdrawSignatureWarningSimpleView, OnchainWithdrawSignatureWarningView, OnchainWithdrawSuccessSimpleView, OnchainWithdrawSuccessView, OnrampFormSimpleView, OnrampFormView, OnrampPixcodeView, OnrampSuccessSimpleView, OnrampSuccessView, PercentageButton, PodsSwapFormView, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapCrossChainProcessingViewSimple, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapHistoryViewSimple, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, WithdrawFailedIcon, WithdrawSuccessIcon, isBrlPeggedToken, isDustValue, isUsdPeggedToken, isWellKnownToken, truncateAddress };
|
|
20493
|
+
export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChoiceCard, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DepositSuccessIcon, DetailsHeader, EARN_CATEGORY_DEFINITIONS, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnDesktopViewSimple, EarnExploreGridView, EarnFlowSkeletonSimple, EarnHistoryView, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedSimpleView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawFormViewSimple, EarnWithdrawProcessingSimpleView, EarnWithdrawProcessingView, EarnWithdrawSuccessSimpleView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningSimpleView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListItem, HistoryListItemSimple, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InputField, InputLabel, Input as InputRoot, InvestmentCrossChainProcessingSimpleView, InvestmentCrossChainProcessingView, KYCActionRow, KYCAddressPage, KYCBasicDataPage, KYCChecklistCard, KYCChecklistItem, KYCDataCard, KYCDocumentPage, KYCEditPage, KYCFieldMessage, KYCFormPage, KYCInfoRow, KYCIntroPage, KYCLoadingPage, KYCMessageBanner, KYCPageHeader, KYCPageSection, KYCPageShell, KYCReviewPage, KYCReviewPageSkeleton, KYCStatusItemCard, KYCStatusPage, KYCStatusPanel, KYCStepIndicator, KycLoadingView, KycRequiredView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, OffchainMethodSelectionView, OfframpFailedSimpleView, OfframpInputFormSimpleView, OfframpInputFormView, OfframpProcessingSimpleView, OfframpProcessingView, OfframpSuccessSimpleView, OfframpSuccessView, OnchainDepositFormSimpleView, OnchainDepositFormView, OnchainDepositSuccessSimpleView, OnchainDepositSuccessView, OnchainWithdrawChainSelectorView, OnchainWithdrawFailedSimpleView, OnchainWithdrawFailedView, OnchainWithdrawFormSimpleView, OnchainWithdrawFormView, OnchainWithdrawProcessingSimpleView, OnchainWithdrawSignatureWarningSimpleView, OnchainWithdrawSignatureWarningView, OnchainWithdrawSuccessSimpleView, OnchainWithdrawSuccessView, OnrampFormSimpleView, OnrampFormView, OnrampPixcodeView, OnrampSuccessSimpleView, OnrampSuccessView, PercentageButton, PodsSwapFormView, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapCrossChainProcessingViewSimple, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapHistoryViewSimple, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, WalletOnchainDepositView, WalletOnchainWithdrawView, WalletTransferAssetNetworkPicker, WithdrawFailedIcon, WithdrawSuccessIcon, isBrlPeggedToken, isDustValue, isUsdPeggedToken, isWellKnownToken, truncateAddress };
|
|
20108
20494
|
//# sourceMappingURL=index.mjs.map
|
|
20109
20495
|
//# sourceMappingURL=index.mjs.map
|