@deframe-sdk/components 0.1.33 → 0.1.35

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.mjs CHANGED
@@ -4879,7 +4879,7 @@ var SwapProcessingViewSimple = () => {
4879
4879
  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
4880
4880
  "rounded-[inherit]",
4881
4881
  "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
4882
- "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
4882
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
4883
4883
  ),
4884
4884
  children: [
4885
4885
  /* @__PURE__ */ jsx(LoadingIcon, {}),
@@ -5231,7 +5231,7 @@ var SwapSignatureWarningViewSimple = ({
5231
5231
  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
5232
5232
  "rounded-[inherit]",
5233
5233
  "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
5234
- "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
5234
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
5235
5235
  ),
5236
5236
  children: [
5237
5237
  /* @__PURE__ */ jsx(WarningIcon, {}),
@@ -5421,7 +5421,7 @@ var SwapSuccessViewSimple = () => {
5421
5421
  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
5422
5422
  "rounded-[inherit]",
5423
5423
  "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
5424
- "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
5424
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
5425
5425
  ),
5426
5426
  children: [
5427
5427
  /* @__PURE__ */ jsx(SuccessIcon, {}),
@@ -5624,7 +5624,7 @@ var SwapTransactionFailedViewSimple = ({
5624
5624
  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
5625
5625
  "rounded-[inherit]",
5626
5626
  "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
5627
- "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
5627
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
5628
5628
  ),
5629
5629
  children: [
5630
5630
  /* @__PURE__ */ jsx(ErrorIcon, {}),
@@ -6321,6 +6321,35 @@ var SwapFormView = ({
6321
6321
  )
6322
6322
  ] });
6323
6323
  };
6324
+ var FONT_SIZE_CLASSES = [
6325
+ "text-[36px]",
6326
+ // 0–7 chars
6327
+ "text-[34px]",
6328
+ // 8 chars
6329
+ "text-[32px]",
6330
+ // 9 chars
6331
+ "text-[30px]",
6332
+ // 10 chars
6333
+ "text-[28px]",
6334
+ // 11 chars
6335
+ "text-[26px]",
6336
+ // 12 chars
6337
+ "text-[24px]",
6338
+ // 13 chars
6339
+ "text-[22px]",
6340
+ // 14 chars
6341
+ "text-[20px]"
6342
+ // 15+ chars
6343
+ ];
6344
+ function getResponsiveFontSizeClass(value) {
6345
+ const len = value.length;
6346
+ if (len <= 7) return FONT_SIZE_CLASSES[0];
6347
+ const index = Math.min(len - 7, FONT_SIZE_CLASSES.length - 1);
6348
+ return FONT_SIZE_CLASSES[index];
6349
+ }
6350
+ function useResponsiveFontSize(value) {
6351
+ return useMemo(() => getResponsiveFontSizeClass(value), [value]);
6352
+ }
6324
6353
  var SwapFromCardViewSimple = ({
6325
6354
  labels,
6326
6355
  selectedToken,
@@ -6344,6 +6373,7 @@ var SwapFromCardViewSimple = ({
6344
6373
  errorActionLabel = "Adicionar via PIX",
6345
6374
  onErrorAction
6346
6375
  }) => {
6376
+ const fontSizeClass = useResponsiveFontSize(amountValue || "");
6347
6377
  const [isHovered, setIsHovered] = useState(false);
6348
6378
  const hideTimeout = useRef(null);
6349
6379
  const handleMouseEnter = useCallback(() => {
@@ -6415,9 +6445,11 @@ var SwapFromCardViewSimple = ({
6415
6445
  className: twMerge(
6416
6446
  "bg-transparent border-none outline-none",
6417
6447
  "text-right",
6418
- "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
6448
+ fontSizeClass,
6449
+ "[font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
6419
6450
  "w-full px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
6420
6451
  "font-[var(--deframe-widget-font-family)]",
6452
+ "overflow-hidden text-ellipsis",
6421
6453
  "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]",
6422
6454
  isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
6423
6455
  )
@@ -6906,6 +6938,7 @@ var SwapToCardViewSimple = ({
6906
6938
  }) => {
6907
6939
  const handleTokenClick = onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick;
6908
6940
  const isEmpty = !outputAmount || Number(outputAmount) === 0;
6941
+ const fontSizeClass = useResponsiveFontSize(outputAmount || "");
6909
6942
  const wrapperClasses = twMerge(
6910
6943
  "rounded-[var(--deframe-widget-size-radius-sm)]",
6911
6944
  "border",
@@ -7071,9 +7104,10 @@ var SwapToCardViewSimple = ({
7071
7104
  {
7072
7105
  "data-test-id": "swap-to-simple-output-amount",
7073
7106
  className: twMerge(
7074
- "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
7107
+ fontSizeClass,
7108
+ "[font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
7075
7109
  "font-[var(--deframe-widget-font-family)]",
7076
- "text-right w-full",
7110
+ "text-right w-full overflow-hidden text-ellipsis",
7077
7111
  isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
7078
7112
  ),
7079
7113
  children: isEmpty ? "0" : outputAmount
@@ -10891,7 +10925,8 @@ var EarnTokenSelectorSimpleView = ({
10891
10925
  isLoading,
10892
10926
  selectTokenLabel,
10893
10927
  chainLabel,
10894
- chainImage
10928
+ chainImage,
10929
+ className
10895
10930
  }) => {
10896
10931
  const hasToken = selectedToken != null;
10897
10932
  const isInteractive = !!onNetworkAndAssetClick;
@@ -10910,7 +10945,8 @@ var EarnTokenSelectorSimpleView = ({
10910
10945
  };
10911
10946
  const selectorClasses = twMerge(
10912
10947
  baseClasses,
10913
- stateClasses[isInteractive ? "interactive" : "static"]
10948
+ stateClasses[isInteractive ? "interactive" : "static"],
10949
+ className
10914
10950
  );
10915
10951
  return /* @__PURE__ */ jsx(
10916
10952
  "button",
@@ -11037,9 +11073,10 @@ var EarnAmountInputSimpleView = ({
11037
11073
  dollarAmountFormatted
11038
11074
  }) => {
11039
11075
  const isEmpty = !value || value === "0";
11076
+ const fontSizeClass = useResponsiveFontSize(value || "");
11040
11077
  const inputBaseClasses = [
11041
11078
  "bg-transparent border-none outline-none text-right",
11042
- "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
11079
+ `${fontSizeClass} [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]`,
11043
11080
  "w-full",
11044
11081
  "px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
11045
11082
  "font-[var(--deframe-widget-font-family)]",
@@ -12063,7 +12100,18 @@ var EarnDepositProcessingView = ({
12063
12100
  }
12064
12101
  );
12065
12102
  };
12066
- function EarnFormSkeleton() {
12103
+ function EarnFormSkeleton({
12104
+ headerTitle = "Deposit",
12105
+ tokenSymbol = "USDC",
12106
+ tokenLogoURI,
12107
+ chainLabel = "Arbitrum",
12108
+ chainImage,
12109
+ amount = "500",
12110
+ dollarAmount = "\u2248 $499.87",
12111
+ availableBalance = "Available: 1,250.00 USDC",
12112
+ cancelLabel = "Cancel",
12113
+ submitLabel = "Deposit"
12114
+ } = {}) {
12067
12115
  const headerClasses = [
12068
12116
  "flex items-center",
12069
12117
  "px-[var(--deframe-widget-size-padding-x-md)]",
@@ -12099,7 +12147,7 @@ function EarnFormSkeleton() {
12099
12147
  "data-test-id": "earn-form-skeleton",
12100
12148
  className: "flex flex-col font-[var(--deframe-widget-font-family)]",
12101
12149
  children: [
12102
- /* @__PURE__ */ jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsx("span", { className: titleClasses2, children: "Deposit" }) }),
12150
+ /* @__PURE__ */ jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsx("span", { className: titleClasses2, children: headerTitle }) }),
12103
12151
  /* @__PURE__ */ jsx("div", { "data-test-id": "earn-form-skeleton-divider", className: dividerClasses }),
12104
12152
  /* @__PURE__ */ jsx("div", { "data-test-id": "earn-form-skeleton-body", className: bodyClasses, children: /* @__PURE__ */ jsxs("div", { "data-test-id": "earn-form-skeleton-input-card", className: inputCardClasses, children: [
12105
12153
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
@@ -12115,29 +12163,43 @@ function EarnFormSkeleton() {
12115
12163
  ),
12116
12164
  children: [
12117
12165
  /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0 w-[38px] h-[38px]", children: [
12118
- /* @__PURE__ */ jsx(
12166
+ tokenLogoURI ? /* @__PURE__ */ jsx(
12167
+ "img",
12168
+ {
12169
+ src: tokenLogoURI,
12170
+ alt: tokenSymbol,
12171
+ className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] object-cover"
12172
+ }
12173
+ ) : /* @__PURE__ */ jsx(
12119
12174
  "div",
12120
12175
  {
12121
12176
  className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center text-[12px] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary)]",
12122
- children: "US"
12177
+ children: tokenSymbol.slice(0, 2).toUpperCase()
12123
12178
  }
12124
12179
  ),
12125
- /* @__PURE__ */ jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]" })
12180
+ chainImage ? /* @__PURE__ */ jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[var(--deframe-widget-size-radius-full)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]", children: /* @__PURE__ */ jsx(
12181
+ "img",
12182
+ {
12183
+ src: chainImage,
12184
+ alt: chainLabel,
12185
+ className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] object-cover"
12186
+ }
12187
+ ) }) : /* @__PURE__ */ jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]" })
12126
12188
  ] }),
12127
12189
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start min-w-0", children: [
12128
- /* @__PURE__ */ jsx("span", { className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: "USDC" }),
12129
- /* @__PURE__ */ jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]", children: "Arbitrum" })
12190
+ /* @__PURE__ */ jsx("span", { className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: tokenSymbol }),
12191
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]", children: chainLabel })
12130
12192
  ] })
12131
12193
  ]
12132
12194
  }
12133
12195
  ),
12134
12196
  /* @__PURE__ */ jsx("div", { className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0" }),
12135
12197
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end flex-1 min-w-0", children: [
12136
- /* @__PURE__ */ jsx("span", { className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1] text-[color:var(--deframe-widget-color-text-primary)] text-right w-full font-[var(--deframe-widget-font-family)]", children: "500" }),
12137
- /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: "\u2248 $499.87" })
12198
+ /* @__PURE__ */ jsx("span", { className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1] text-[color:var(--deframe-widget-color-text-primary)] text-right w-full font-[var(--deframe-widget-font-family)]", children: amount }),
12199
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: dollarAmount })
12138
12200
  ] })
12139
12201
  ] }),
12140
- /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "Available: 1,250.00 USDC" }) })
12202
+ /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: availableBalance }) })
12141
12203
  ] }) }),
12142
12204
  /* @__PURE__ */ jsxs("div", { "data-test-id": "earn-form-skeleton-footer", className: footerClasses, children: [
12143
12205
  /* @__PURE__ */ jsx(
@@ -12152,7 +12214,7 @@ function EarnFormSkeleton() {
12152
12214
  "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
12153
12215
  "text-[color:var(--deframe-widget-color-text-secondary)]"
12154
12216
  ),
12155
- children: "Cancel"
12217
+ children: cancelLabel
12156
12218
  }
12157
12219
  ),
12158
12220
  /* @__PURE__ */ jsx(
@@ -12167,7 +12229,7 @@ function EarnFormSkeleton() {
12167
12229
  "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
12168
12230
  "text-[color:var(--deframe-widget-color-text-primary-dark)]"
12169
12231
  ),
12170
- children: "Deposit"
12232
+ children: submitLabel
12171
12233
  }
12172
12234
  )
12173
12235
  ] })
@@ -12178,7 +12240,8 @@ function EarnFormSkeleton() {
12178
12240
  function EarnFeedbackOverlaySimpleView({
12179
12241
  variant,
12180
12242
  title,
12181
- subtitle
12243
+ subtitle,
12244
+ formData
12182
12245
  }) {
12183
12246
  const isLoading = variant === "loading";
12184
12247
  const wrapperClasses = twMerge(
@@ -12194,7 +12257,7 @@ function EarnFeedbackOverlaySimpleView({
12194
12257
  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
12195
12258
  "rounded-[inherit]",
12196
12259
  "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
12197
- "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
12260
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
12198
12261
  );
12199
12262
  const textSectionClasses = twMerge(
12200
12263
  "flex flex-col items-center",
@@ -12217,7 +12280,7 @@ function EarnFeedbackOverlaySimpleView({
12217
12280
  "data-slot": "earn-feedback-overlay-wrapper",
12218
12281
  className: wrapperClasses,
12219
12282
  children: [
12220
- /* @__PURE__ */ jsx("div", { "data-test-id": "earn-feedback-overlay-skeleton", children: /* @__PURE__ */ jsx(EarnFormSkeleton, {}) }),
12283
+ /* @__PURE__ */ jsx("div", { "data-test-id": "earn-feedback-overlay-skeleton", children: /* @__PURE__ */ jsx(EarnFormSkeleton, __spreadValues({}, formData)) }),
12221
12284
  /* @__PURE__ */ jsxs(
12222
12285
  motion.div,
12223
12286
  {
@@ -12502,15 +12565,24 @@ function WarningIcon2() {
12502
12565
  );
12503
12566
  }
12504
12567
  var EarnDepositProcessingSimpleView = ({
12505
- title,
12506
- descriptionPrefix
12568
+ amountToken,
12569
+ amountUSD,
12570
+ iconSrc,
12571
+ strategyName
12507
12572
  }) => {
12508
12573
  return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-deposit-processing-simple-view", children: /* @__PURE__ */ jsx(
12509
12574
  EarnFeedbackOverlaySimpleView,
12510
12575
  {
12511
12576
  variant: "loading",
12512
- title,
12513
- subtitle: descriptionPrefix
12577
+ title: "Processando Dep\xF3sito...",
12578
+ subtitle: "Aguarde enquanto seu dep\xF3sito \xE9 confirmado.",
12579
+ formData: {
12580
+ headerTitle: "Dep\xF3sito",
12581
+ tokenSymbol: strategyName,
12582
+ tokenLogoURI: iconSrc,
12583
+ amount: amountToken,
12584
+ dollarAmount: amountUSD
12585
+ }
12514
12586
  }
12515
12587
  ) });
12516
12588
  };
@@ -12588,9 +12660,12 @@ var EarnDepositSuccessView = ({
12588
12660
  );
12589
12661
  };
12590
12662
  var EarnDepositSuccessSimpleView = ({
12591
- title,
12592
- descriptionSuffix,
12593
- onClose
12663
+ onClose,
12664
+ tokenSymbol,
12665
+ amountToken,
12666
+ amountUSD,
12667
+ iconSrc,
12668
+ strategyName
12594
12669
  }) => {
12595
12670
  React6__default.useEffect(() => {
12596
12671
  if (!onClose) return;
@@ -12601,8 +12676,15 @@ var EarnDepositSuccessSimpleView = ({
12601
12676
  EarnFeedbackOverlaySimpleView,
12602
12677
  {
12603
12678
  variant: "success",
12604
- title,
12605
- subtitle: descriptionSuffix
12679
+ title: "Dep\xF3sito Confirmado!",
12680
+ subtitle: "Seu saldo foi atualizado.",
12681
+ formData: {
12682
+ headerTitle: "Dep\xF3sito",
12683
+ tokenSymbol: tokenSymbol || strategyName,
12684
+ tokenLogoURI: iconSrc,
12685
+ amount: amountToken,
12686
+ dollarAmount: amountUSD
12687
+ }
12606
12688
  }
12607
12689
  ) });
12608
12690
  };
@@ -12666,9 +12748,11 @@ var EarnDepositWarningView = ({
12666
12748
  );
12667
12749
  };
12668
12750
  var EarnDepositWarningSimpleView = ({
12669
- title,
12670
- description,
12671
- onBack
12751
+ onBack,
12752
+ amountToken,
12753
+ amountUSD,
12754
+ iconSrc,
12755
+ strategyName
12672
12756
  }) => {
12673
12757
  React6__default.useEffect(() => {
12674
12758
  if (!onBack) return;
@@ -12679,8 +12763,15 @@ var EarnDepositWarningSimpleView = ({
12679
12763
  EarnFeedbackOverlaySimpleView,
12680
12764
  {
12681
12765
  variant: "warning",
12682
- title,
12683
- subtitle: description
12766
+ title: "Assinatura Recusada",
12767
+ subtitle: "A assinatura da transa\xE7\xE3o foi cancelada.",
12768
+ formData: {
12769
+ headerTitle: "Dep\xF3sito",
12770
+ tokenSymbol: strategyName,
12771
+ tokenLogoURI: iconSrc,
12772
+ amount: amountToken,
12773
+ dollarAmount: amountUSD
12774
+ }
12684
12775
  }
12685
12776
  ) });
12686
12777
  };
@@ -12747,9 +12838,11 @@ var EarnDepositFailedView = ({
12747
12838
  );
12748
12839
  };
12749
12840
  var EarnDepositFailedSimpleView = ({
12750
- title,
12751
- description,
12752
- onBack
12841
+ onBack,
12842
+ amountToken,
12843
+ amountUSD,
12844
+ iconSrc,
12845
+ strategyName
12753
12846
  }) => {
12754
12847
  React6__default.useEffect(() => {
12755
12848
  if (!onBack) return;
@@ -12760,8 +12853,15 @@ var EarnDepositFailedSimpleView = ({
12760
12853
  EarnFeedbackOverlaySimpleView,
12761
12854
  {
12762
12855
  variant: "error",
12763
- title,
12764
- subtitle: description
12856
+ title: "Dep\xF3sito Falhou",
12857
+ subtitle: "A transa\xE7\xE3o foi revertida.",
12858
+ formData: {
12859
+ headerTitle: "Dep\xF3sito",
12860
+ tokenSymbol: strategyName,
12861
+ tokenLogoURI: iconSrc,
12862
+ amount: amountToken,
12863
+ dollarAmount: amountUSD
12864
+ }
12765
12865
  }
12766
12866
  ) });
12767
12867
  };
@@ -12831,15 +12931,24 @@ var EarnWithdrawProcessingView = ({
12831
12931
  );
12832
12932
  };
12833
12933
  var EarnWithdrawProcessingSimpleView = ({
12834
- title,
12835
- descriptionPrefix
12934
+ amountToken,
12935
+ amountUSD,
12936
+ iconSrc,
12937
+ strategyName
12836
12938
  }) => {
12837
12939
  return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-withdraw-processing-simple-view", children: /* @__PURE__ */ jsx(
12838
12940
  EarnFeedbackOverlaySimpleView,
12839
12941
  {
12840
12942
  variant: "loading",
12841
- title,
12842
- subtitle: descriptionPrefix
12943
+ title: "Processando Saque...",
12944
+ subtitle: "Aguarde enquanto seu saque \xE9 confirmado.",
12945
+ formData: {
12946
+ headerTitle: "Saque",
12947
+ tokenSymbol: strategyName,
12948
+ tokenLogoURI: iconSrc,
12949
+ amount: amountToken,
12950
+ dollarAmount: amountUSD
12951
+ }
12843
12952
  }
12844
12953
  ) });
12845
12954
  };
@@ -12910,9 +13019,12 @@ var EarnWithdrawSuccessView = ({
12910
13019
  );
12911
13020
  };
12912
13021
  var EarnWithdrawSuccessSimpleView = ({
12913
- title,
12914
- descriptionSuffix,
12915
- onClose
13022
+ onClose,
13023
+ tokenSymbol,
13024
+ amountToken,
13025
+ amountUSD,
13026
+ iconSrc,
13027
+ strategyName
12916
13028
  }) => {
12917
13029
  React6__default.useEffect(() => {
12918
13030
  if (!onClose) return;
@@ -12923,8 +13035,15 @@ var EarnWithdrawSuccessSimpleView = ({
12923
13035
  EarnFeedbackOverlaySimpleView,
12924
13036
  {
12925
13037
  variant: "success",
12926
- title,
12927
- subtitle: descriptionSuffix
13038
+ title: "Saque Confirmado!",
13039
+ subtitle: "Seu saldo foi atualizado.",
13040
+ formData: {
13041
+ headerTitle: "Saque",
13042
+ tokenSymbol: tokenSymbol || strategyName,
13043
+ tokenLogoURI: iconSrc,
13044
+ amount: amountToken,
13045
+ dollarAmount: amountUSD
13046
+ }
12928
13047
  }
12929
13048
  ) });
12930
13049
  };
@@ -12988,9 +13107,11 @@ var EarnWithdrawWarningView = ({
12988
13107
  );
12989
13108
  };
12990
13109
  var EarnWithdrawWarningSimpleView = ({
12991
- title,
12992
- description,
12993
- onBack
13110
+ onBack,
13111
+ amountToken,
13112
+ amountUSD,
13113
+ iconSrc,
13114
+ strategyName
12994
13115
  }) => {
12995
13116
  React6__default.useEffect(() => {
12996
13117
  if (!onBack) return;
@@ -13001,8 +13122,15 @@ var EarnWithdrawWarningSimpleView = ({
13001
13122
  EarnFeedbackOverlaySimpleView,
13002
13123
  {
13003
13124
  variant: "warning",
13004
- title,
13005
- subtitle: description
13125
+ title: "Assinatura Recusada",
13126
+ subtitle: "A assinatura da transa\xE7\xE3o foi cancelada.",
13127
+ formData: {
13128
+ headerTitle: "Saque",
13129
+ tokenSymbol: strategyName,
13130
+ tokenLogoURI: iconSrc,
13131
+ amount: amountToken,
13132
+ dollarAmount: amountUSD
13133
+ }
13006
13134
  }
13007
13135
  ) });
13008
13136
  };
@@ -13069,9 +13197,11 @@ var EarnWithdrawFailedView = ({
13069
13197
  );
13070
13198
  };
13071
13199
  var EarnWithdrawFailedSimpleView = ({
13072
- title,
13073
- description,
13074
- onBack
13200
+ onBack,
13201
+ amountToken,
13202
+ amountUSD,
13203
+ iconSrc,
13204
+ strategyName
13075
13205
  }) => {
13076
13206
  React6__default.useEffect(() => {
13077
13207
  if (!onBack) return;
@@ -13082,8 +13212,15 @@ var EarnWithdrawFailedSimpleView = ({
13082
13212
  EarnFeedbackOverlaySimpleView,
13083
13213
  {
13084
13214
  variant: "error",
13085
- title,
13086
- subtitle: description
13215
+ title: "Saque Falhou",
13216
+ subtitle: "A transa\xE7\xE3o foi revertida.",
13217
+ formData: {
13218
+ headerTitle: "Saque",
13219
+ tokenSymbol: strategyName,
13220
+ tokenLogoURI: iconSrc,
13221
+ amount: amountToken,
13222
+ dollarAmount: amountUSD
13223
+ }
13087
13224
  }
13088
13225
  ) });
13089
13226
  };
@@ -13277,6 +13414,82 @@ function OnchainDepositFormView({
13277
13414
  }
13278
13415
  );
13279
13416
  }
13417
+ var tabBaseClasses = [
13418
+ "inline-flex flex-1 items-center justify-center",
13419
+ "gap-[var(--deframe-widget-size-gap-xs)]",
13420
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
13421
+ "border-[length:var(--deframe-widget-size-border-sm)] border-solid border-transparent",
13422
+ "outline-none whitespace-nowrap transition-[background,color,border-color] duration-150",
13423
+ "font-[var(--deframe-widget-font-family)] [font-weight:var(--deframe-widget-font-weight-medium)]",
13424
+ "py-[5px] px-[var(--deframe-widget-size-padding-x-lg)]",
13425
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]"
13426
+ ].join(" ");
13427
+ var activeTabClasses = "text-[color:var(--deframe-widget-color-brand-primary)]";
13428
+ var inactiveTabClasses = "text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-tertiary)]";
13429
+ var FlowTabHeader = ({
13430
+ activeTab,
13431
+ cryptoHref,
13432
+ pixHref,
13433
+ cryptoLabel = "Cripto",
13434
+ pixLabel = "PIX",
13435
+ className
13436
+ }) => {
13437
+ return /* @__PURE__ */ jsx(
13438
+ "nav",
13439
+ {
13440
+ "data-slot": "flow-tab-header",
13441
+ "data-test-id": "flow-tab-header",
13442
+ className: twMerge("px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]", className),
13443
+ children: /* @__PURE__ */ jsxs(
13444
+ "div",
13445
+ {
13446
+ role: "tablist",
13447
+ "data-test-id": "flow-tab-header-tablist",
13448
+ className: twMerge(
13449
+ "inline-flex w-full rounded-[var(--deframe-widget-size-radius-md)]",
13450
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
13451
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
13452
+ "p-[3px] gap-[2px]"
13453
+ ),
13454
+ children: [
13455
+ /* @__PURE__ */ jsx(
13456
+ "a",
13457
+ {
13458
+ href: cryptoHref,
13459
+ role: "tab",
13460
+ "aria-selected": activeTab === "crypto",
13461
+ "aria-current": activeTab === "crypto" ? "page" : void 0,
13462
+ "aria-label": cryptoLabel,
13463
+ "data-test-id": "flow-tab-header-tab-crypto",
13464
+ className: twMerge(
13465
+ tabBaseClasses,
13466
+ activeTab === "crypto" ? activeTabClasses : inactiveTabClasses
13467
+ ),
13468
+ children: cryptoLabel
13469
+ }
13470
+ ),
13471
+ /* @__PURE__ */ jsx(
13472
+ "a",
13473
+ {
13474
+ href: pixHref,
13475
+ role: "tab",
13476
+ "aria-selected": activeTab === "pix",
13477
+ "aria-current": activeTab === "pix" ? "page" : void 0,
13478
+ "aria-label": pixLabel,
13479
+ "data-test-id": "flow-tab-header-tab-pix",
13480
+ className: twMerge(
13481
+ tabBaseClasses,
13482
+ activeTab === "pix" ? activeTabClasses : inactiveTabClasses
13483
+ ),
13484
+ children: pixLabel
13485
+ }
13486
+ )
13487
+ ]
13488
+ }
13489
+ )
13490
+ }
13491
+ );
13492
+ };
13280
13493
  var OnchainDepositFormSimpleView = ({
13281
13494
  // Token selector
13282
13495
  selectedToken,
@@ -13365,72 +13578,11 @@ var OnchainDepositFormSimpleView = ({
13365
13578
  }
13366
13579
  ),
13367
13580
  /* @__PURE__ */ jsx(
13368
- "nav",
13581
+ FlowTabHeader,
13369
13582
  {
13370
- "data-slot": "onchain-deposit-simple-tabs",
13371
- "data-test-id": "onchain-deposit-form-simple-view-tabs",
13372
- className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
13373
- children: /* @__PURE__ */ jsxs(
13374
- "div",
13375
- {
13376
- role: "tablist",
13377
- "data-test-id": "onchain-deposit-form-simple-view-tablist",
13378
- className: twMerge(
13379
- "inline-flex w-full rounded-[var(--deframe-widget-size-radius-md)]",
13380
- "bg-[var(--deframe-widget-color-bg-secondary)]",
13381
- "border border-[color:var(--deframe-widget-color-border-secondary)]",
13382
- "p-[3px] gap-[2px]"
13383
- ),
13384
- children: [
13385
- /* @__PURE__ */ jsx(
13386
- "a",
13387
- {
13388
- href: cryptoHref != null ? cryptoHref : "/dashboard/deposit/onchain",
13389
- role: "tab",
13390
- "aria-selected": activeTab === "crypto",
13391
- "aria-current": activeTab === "crypto" ? "page" : void 0,
13392
- "aria-label": "Cripto",
13393
- "data-test-id": "onchain-deposit-form-simple-view-tab-crypto",
13394
- className: twMerge(
13395
- "inline-flex flex-1 items-center justify-center",
13396
- "gap-[var(--deframe-widget-size-gap-xs)]",
13397
- "rounded-[var(--deframe-widget-size-radius-sm)]",
13398
- "border-[length:var(--deframe-widget-size-border-sm)] border-solid border-transparent",
13399
- "outline-none whitespace-nowrap transition-[background,color,border-color] duration-150",
13400
- "font-[var(--deframe-widget-font-family)] [font-weight:var(--deframe-widget-font-weight-medium)]",
13401
- "py-[5px] px-[var(--deframe-widget-size-padding-x-lg)]",
13402
- "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
13403
- activeTab === "crypto" ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-tertiary)]"
13404
- ),
13405
- children: "Cripto"
13406
- }
13407
- ),
13408
- /* @__PURE__ */ jsx(
13409
- "a",
13410
- {
13411
- href: pixHref != null ? pixHref : "/dashboard/deposit/onramp",
13412
- role: "tab",
13413
- "aria-selected": activeTab === "pix",
13414
- "aria-current": activeTab === "pix" ? "page" : void 0,
13415
- "aria-label": "PIX",
13416
- "data-test-id": "onchain-deposit-form-simple-view-tab-pix",
13417
- className: twMerge(
13418
- "inline-flex flex-1 items-center justify-center",
13419
- "gap-[var(--deframe-widget-size-gap-xs)]",
13420
- "rounded-[var(--deframe-widget-size-radius-sm)]",
13421
- "border-[length:var(--deframe-widget-size-border-sm)] border-solid border-transparent",
13422
- "outline-none whitespace-nowrap transition-[background,color,border-color] duration-150",
13423
- "font-[var(--deframe-widget-font-family)] [font-weight:var(--deframe-widget-font-weight-medium)]",
13424
- "py-[5px] px-[var(--deframe-widget-size-padding-x-lg)]",
13425
- "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
13426
- activeTab === "pix" ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-tertiary)]"
13427
- ),
13428
- children: "PIX"
13429
- }
13430
- )
13431
- ]
13432
- }
13433
- )
13583
+ activeTab: activeTab != null ? activeTab : "crypto",
13584
+ cryptoHref: cryptoHref != null ? cryptoHref : "/dashboard/deposit/onchain",
13585
+ pixHref: pixHref != null ? pixHref : "/dashboard/deposit/onramp"
13434
13586
  }
13435
13587
  ),
13436
13588
  /* @__PURE__ */ jsx(
@@ -13469,7 +13621,8 @@ var OnchainDepositFormSimpleView = ({
13469
13621
  isLoading: false,
13470
13622
  selectTokenLabel: "SELECIONE AQUI",
13471
13623
  chainLabel: (_a = selectedChain == null ? void 0 : selectedChain.name) != null ? _a : "",
13472
- chainImage: selectedChain == null ? void 0 : selectedChain.iconUrl
13624
+ chainImage: selectedChain == null ? void 0 : selectedChain.iconUrl,
13625
+ className: "w-full justify-between"
13473
13626
  }
13474
13627
  ),
13475
13628
  !hasToken && /* @__PURE__ */ jsx(
@@ -13766,7 +13919,12 @@ function OnchainDepositSuccessView({
13766
13919
  );
13767
13920
  }
13768
13921
  var OnchainDepositSuccessSimpleView = ({
13769
- onClose
13922
+ onClose,
13923
+ tokenSymbol,
13924
+ tokenLogoURI,
13925
+ chainName,
13926
+ chainIconUrl,
13927
+ formattedAmount
13770
13928
  }) => {
13771
13929
  React6.useEffect(() => {
13772
13930
  if (!onClose) return;
@@ -13778,7 +13936,15 @@ var OnchainDepositSuccessSimpleView = ({
13778
13936
  {
13779
13937
  variant: "success",
13780
13938
  title: "Dep\xF3sito Confirmado!",
13781
- subtitle: "Seu saldo foi atualizado."
13939
+ subtitle: "Seu saldo foi atualizado.",
13940
+ formData: {
13941
+ headerTitle: "Dep\xF3sito",
13942
+ tokenSymbol,
13943
+ tokenLogoURI,
13944
+ chainLabel: chainName,
13945
+ chainImage: chainIconUrl,
13946
+ amount: formattedAmount
13947
+ }
13782
13948
  }
13783
13949
  ) });
13784
13950
  };
@@ -14049,6 +14215,10 @@ function OnchainWithdrawFormView({
14049
14215
  );
14050
14216
  }
14051
14217
  var OnchainWithdrawFormSimpleView = ({
14218
+ // Tab switcher
14219
+ activeTab,
14220
+ cryptoHref,
14221
+ pixHref,
14052
14222
  // Token selector
14053
14223
  selectedToken,
14054
14224
  onTokenClick,
@@ -14197,6 +14367,24 @@ var OnchainWithdrawFormSimpleView = ({
14197
14367
  className: dividerClasses
14198
14368
  }
14199
14369
  ),
14370
+ activeTab && /* @__PURE__ */ jsxs(Fragment, { children: [
14371
+ /* @__PURE__ */ jsx(
14372
+ FlowTabHeader,
14373
+ {
14374
+ activeTab,
14375
+ cryptoHref: cryptoHref != null ? cryptoHref : "/dashboard/withdraw/onchain",
14376
+ pixHref: pixHref != null ? pixHref : "/dashboard/withdraw/offramp"
14377
+ }
14378
+ ),
14379
+ /* @__PURE__ */ jsx(
14380
+ "div",
14381
+ {
14382
+ "data-slot": "onchain-withdraw-simple-divider-tabs",
14383
+ "data-test-id": "onchain-withdraw-form-simple-view-divider-tabs",
14384
+ className: dividerClasses
14385
+ }
14386
+ )
14387
+ ] }),
14200
14388
  /* @__PURE__ */ jsxs(
14201
14389
  "div",
14202
14390
  {
@@ -14786,14 +14974,16 @@ function OnchainWithdrawFailedView({
14786
14974
  );
14787
14975
  }
14788
14976
  var OnchainWithdrawProcessingSimpleView = ({
14789
- onClose: _onClose
14977
+ onClose: _onClose,
14978
+ formData
14790
14979
  }) => {
14791
14980
  return /* @__PURE__ */ jsx("div", { "data-test-id": "onchain-withdraw-processing-simple-view", children: /* @__PURE__ */ jsx(
14792
14981
  EarnFeedbackOverlaySimpleView,
14793
14982
  {
14794
14983
  variant: "loading",
14795
14984
  title: "PROCESSANDO SAQUE...",
14796
- subtitle: "Aguarde enquanto sua transa\xE7\xE3o \xE9 confirmada."
14985
+ subtitle: "Aguarde enquanto sua transa\xE7\xE3o \xE9 confirmada.",
14986
+ formData
14797
14987
  }
14798
14988
  ) });
14799
14989
  };
@@ -15060,7 +15250,12 @@ function OnchainWithdrawSignatureWarningView({
15060
15250
  );
15061
15251
  }
15062
15252
  var OnchainWithdrawSignatureWarningSimpleView = ({
15063
- onCancel
15253
+ onCancel,
15254
+ tokenSymbol,
15255
+ tokenLogoURI,
15256
+ chainName,
15257
+ chainIconUrl,
15258
+ formattedAmount
15064
15259
  }) => {
15065
15260
  React6.useEffect(() => {
15066
15261
  if (!onCancel) return;
@@ -15072,7 +15267,1941 @@ var OnchainWithdrawSignatureWarningSimpleView = ({
15072
15267
  {
15073
15268
  variant: "warning",
15074
15269
  title: "Saque n\xE3o assinado",
15075
- subtitle: "A assinatura da transa\xE7\xE3o foi cancelada."
15270
+ subtitle: "A assinatura da transa\xE7\xE3o foi cancelada.",
15271
+ formData: {
15272
+ headerTitle: "Saque",
15273
+ tokenSymbol,
15274
+ tokenLogoURI,
15275
+ chainLabel: chainName,
15276
+ chainImage: chainIconUrl,
15277
+ amount: formattedAmount
15278
+ }
15279
+ }
15280
+ ) });
15281
+ };
15282
+ function KycLoadingView({ message = "Carregando" }) {
15283
+ return /* @__PURE__ */ jsx(
15284
+ "div",
15285
+ {
15286
+ "data-test-id": "kyc-loading-view",
15287
+ className: "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto mt-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 min-h-[80vh] flex items-center justify-center",
15288
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6", children: [
15289
+ /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-[#F6A700] rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-10 h-10", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z" }) }) }),
15290
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
15291
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: message }),
15292
+ /* @__PURE__ */ jsx(LoadingDots, {})
15293
+ ] })
15294
+ ] })
15295
+ }
15296
+ );
15297
+ }
15298
+ function KycRequiredView({ title, description, buttonLabel, onAction }) {
15299
+ return /* @__PURE__ */ jsx(
15300
+ "div",
15301
+ {
15302
+ "data-test-id": "kyc-required-view",
15303
+ className: "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto mt-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 min-h-[80vh] flex flex-col",
15304
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-6 h-[400px]", children: [
15305
+ /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-brand-primary)]/20 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-10 h-10 text-[color:var(--deframe-widget-color-brand-primary)]", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" }) }) }),
15306
+ /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
15307
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: title }),
15308
+ /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: description })
15309
+ ] }),
15310
+ /* @__PURE__ */ jsx(
15311
+ PrimaryButton,
15312
+ {
15313
+ onClick: onAction,
15314
+ className: "w-full max-w-xs h-12",
15315
+ "aria-label": buttonLabel,
15316
+ children: buttonLabel
15317
+ }
15318
+ )
15319
+ ] })
15320
+ }
15321
+ );
15322
+ }
15323
+ var DefaultArrowIcon = /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) });
15324
+ function OffchainMethodSelectionView({
15325
+ title,
15326
+ options,
15327
+ bannerMessage,
15328
+ arrowIcon = DefaultArrowIcon
15329
+ }) {
15330
+ return /* @__PURE__ */ jsx(
15331
+ "div",
15332
+ {
15333
+ "data-test-id": "offchain-method-selection-view",
15334
+ className: "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto lg:my-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 lg:p-12 min-h-[80vh] flex flex-col",
15335
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full flex-1", children: [
15336
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h2", className: "mb-3", children: title }),
15337
+ bannerMessage && /* @__PURE__ */ jsx(
15338
+ BannerNotification,
15339
+ {
15340
+ variant: "info",
15341
+ message: bannerMessage
15342
+ }
15343
+ ),
15344
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 mt-2", children: options.map((option, index) => /* @__PURE__ */ jsxs(
15345
+ ListItem,
15346
+ {
15347
+ onClick: () => option.onClick(),
15348
+ containerClassName: "p-2 cursor-pointer transition-all",
15349
+ children: [
15350
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
15351
+ "div",
15352
+ {
15353
+ "data-test-id": `method-option-icon-${index}`,
15354
+ className: "w-12 h-12 rounded-full flex items-center justify-center",
15355
+ style: { backgroundColor: option.iconBgColor },
15356
+ children: option.icon
15357
+ }
15358
+ ) }),
15359
+ /* @__PURE__ */ jsx(ListItemContent, { className: "ml-4", children: /* @__PURE__ */ jsx(TextHeading, { variant: "h4", className: "mb-1", children: option.label }) }),
15360
+ /* @__PURE__ */ jsx(ListItemRightSide, { className: "ml-auto", children: /* @__PURE__ */ jsx("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: arrowIcon }) })
15361
+ ]
15362
+ },
15363
+ index
15364
+ )) })
15365
+ ] })
15366
+ }
15367
+ );
15368
+ }
15369
+ var defaultBackIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) });
15370
+ var defaultFlagIcon = /* @__PURE__ */ jsx(
15371
+ "img",
15372
+ {
15373
+ src: "/brazil-flag-rounded.png",
15374
+ alt: "Brazil",
15375
+ className: "w-[24px] h-[24px] rounded-[var(--deframe-widget-size-radius-sm)]"
15376
+ }
15377
+ );
15378
+ function OnrampFormView({
15379
+ amount,
15380
+ onAmountChange,
15381
+ isLoadingQuote,
15382
+ summaryTitle,
15383
+ summaryItems,
15384
+ isBelowMinAmount,
15385
+ minAmountFormatted,
15386
+ hasNoAmount,
15387
+ isProcessing,
15388
+ onSubmit,
15389
+ onBack,
15390
+ submitLabel,
15391
+ flagIcon = defaultFlagIcon,
15392
+ backIcon = defaultBackIcon,
15393
+ className
15394
+ }) {
15395
+ return /* @__PURE__ */ jsxs(
15396
+ "div",
15397
+ {
15398
+ className: twMerge("w-full p-4 mx-auto space-y-6", className),
15399
+ "data-test-id": "onramp-form-view",
15400
+ children: [
15401
+ /* @__PURE__ */ jsx(
15402
+ SecondaryButton,
15403
+ {
15404
+ onClick: onBack,
15405
+ className: "mb-4 !border-0 max-w-[84px]",
15406
+ "aria-label": "Voltar",
15407
+ children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
15408
+ /* @__PURE__ */ jsx("span", { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary-dark)]", children: backIcon }),
15409
+ /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary-dark)]", children: "Voltar" })
15410
+ ] })
15411
+ }
15412
+ ),
15413
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
15414
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: "Quanto voc\xEA quer depositar?" }),
15415
+ /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: "Insira o valor gere o c\xF3digo PIX" })
15416
+ ] }),
15417
+ /* @__PURE__ */ jsx("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-lg)] shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "p-4 flex items-end justify-between", children: [
15418
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
15419
+ /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 mb-1", children: /* @__PURE__ */ jsx(
15420
+ TextBody,
15421
+ {
15422
+ variant: "text-small",
15423
+ className: "text-[color:var(--deframe-widget-color-text-secondary)]",
15424
+ children: "Voc\xEA paga com PIX"
15425
+ }
15426
+ ) }),
15427
+ /* @__PURE__ */ jsx("div", { className: "flex items-center", children: flagIcon })
15428
+ ] }),
15429
+ /* @__PURE__ */ jsx("div", { className: "flex-1 text-right", children: /* @__PURE__ */ jsx(
15430
+ "input",
15431
+ {
15432
+ type: "text",
15433
+ inputMode: "decimal",
15434
+ value: amount ? `R$ ${amount}` : "",
15435
+ onChange: (e) => {
15436
+ const value = e.target.value.replace(/[^0-9.]/g, "");
15437
+ onAmountChange(value || "");
15438
+ },
15439
+ onWheel: (event) => {
15440
+ event.currentTarget.blur();
15441
+ },
15442
+ placeholder: "R$0.00",
15443
+ className: "w-full bg-transparent text-right text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-secondary)] outline-none",
15444
+ "data-test-id": "onramp-form-amount-input",
15445
+ "aria-label": "Valor do dep\xF3sito"
15446
+ }
15447
+ ) })
15448
+ ] }) }),
15449
+ isLoadingQuote ? /* @__PURE__ */ jsxs("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] p-4 rounded-[var(--deframe-widget-size-radius-lg)] space-y-3", children: [
15450
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
15451
+ /* @__PURE__ */ jsx(Skeleton, { width: 96, height: 16, shimmer: true }),
15452
+ /* @__PURE__ */ jsx(Skeleton, { width: 80, height: 16, shimmer: true })
15453
+ ] }),
15454
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
15455
+ /* @__PURE__ */ jsx(Skeleton, { width: 80, height: 16, shimmer: true }),
15456
+ /* @__PURE__ */ jsx(Skeleton, { width: 64, height: 16, shimmer: true })
15457
+ ] })
15458
+ ] }) : /* @__PURE__ */ jsx(
15459
+ SummaryDetails,
15460
+ {
15461
+ title: summaryTitle,
15462
+ items: summaryItems,
15463
+ defaultOpen: true,
15464
+ showDividers: true,
15465
+ className: "bg-[var(--deframe-widget-color-bg-secondary)]"
15466
+ }
15467
+ ),
15468
+ /* @__PURE__ */ jsx(
15469
+ BannerNotification,
15470
+ {
15471
+ message: "Dep\xF3sitos via Pix s\xE3o convertidos automaticamente em BRLA.",
15472
+ variant: "info"
15473
+ }
15474
+ ),
15475
+ isBelowMinAmount && /* @__PURE__ */ jsx(
15476
+ BannerNotification,
15477
+ {
15478
+ message: `O valor m\xEDnimo para dep\xF3sito \xE9 R$ ${minAmountFormatted}.`,
15479
+ variant: "warning"
15480
+ }
15481
+ ),
15482
+ /* @__PURE__ */ jsx(
15483
+ PrimaryButton,
15484
+ {
15485
+ onClick: onSubmit,
15486
+ disabled: isBelowMinAmount || isProcessing || hasNoAmount,
15487
+ "aria-label": submitLabel,
15488
+ "data-test-id": "onramp-form-submit",
15489
+ children: isProcessing ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
15490
+ "Processando ",
15491
+ /* @__PURE__ */ jsx(LoadingDots, {})
15492
+ ] }) : submitLabel
15493
+ }
15494
+ )
15495
+ ]
15496
+ }
15497
+ );
15498
+ }
15499
+ var ClockIcon = ({ className }) => /* @__PURE__ */ jsxs(
15500
+ "svg",
15501
+ {
15502
+ xmlns: "http://www.w3.org/2000/svg",
15503
+ width: "16",
15504
+ height: "16",
15505
+ viewBox: "0 0 24 24",
15506
+ fill: "none",
15507
+ stroke: "currentColor",
15508
+ strokeWidth: "2",
15509
+ strokeLinecap: "round",
15510
+ strokeLinejoin: "round",
15511
+ className,
15512
+ "aria-hidden": "true",
15513
+ children: [
15514
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
15515
+ /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
15516
+ ]
15517
+ }
15518
+ );
15519
+ var CopyIcon = ({ className }) => /* @__PURE__ */ jsxs(
15520
+ "svg",
15521
+ {
15522
+ xmlns: "http://www.w3.org/2000/svg",
15523
+ width: "16",
15524
+ height: "16",
15525
+ viewBox: "0 0 24 24",
15526
+ fill: "none",
15527
+ stroke: "currentColor",
15528
+ strokeWidth: "2",
15529
+ strokeLinecap: "round",
15530
+ strokeLinejoin: "round",
15531
+ className,
15532
+ "aria-hidden": "true",
15533
+ children: [
15534
+ /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
15535
+ /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
15536
+ ]
15537
+ }
15538
+ );
15539
+ var OnrampFormSimpleView = ({
15540
+ // Base OnrampFormViewProps
15541
+ amount,
15542
+ onAmountChange,
15543
+ isLoadingQuote,
15544
+ summaryTitle,
15545
+ summaryItems,
15546
+ isBelowMinAmount,
15547
+ minAmountFormatted,
15548
+ hasNoAmount,
15549
+ isProcessing,
15550
+ onSubmit,
15551
+ onBack,
15552
+ submitLabel,
15553
+ // Simple-specific props
15554
+ activeTab,
15555
+ cryptoHref,
15556
+ pixHref,
15557
+ pixCode,
15558
+ qrCodeElement,
15559
+ remainingLabel,
15560
+ isExpired,
15561
+ copied,
15562
+ onCopy,
15563
+ onRegenerate,
15564
+ isRegenerating,
15565
+ onClose,
15566
+ error
15567
+ }) => {
15568
+ const hasPixCode = !!pixCode;
15569
+ const isSubmitDisabled = !amount || amount === "0" || amount === "" || isBelowMinAmount || hasNoAmount || isProcessing;
15570
+ const panelBaseClasses = [
15571
+ "relative flex flex-col overflow-hidden w-[420px]",
15572
+ "rounded-[var(--deframe-widget-size-radius-md)]",
15573
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
15574
+ "font-[var(--deframe-widget-font-family)]"
15575
+ ].join(" ");
15576
+ const headerBaseClasses = [
15577
+ "flex items-center",
15578
+ "px-[var(--deframe-widget-size-padding-x-md)]",
15579
+ "py-[var(--deframe-widget-size-padding-y-md)]"
15580
+ ].join(" ");
15581
+ const titleBaseClasses = [
15582
+ "flex-1",
15583
+ "text-[15px]",
15584
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
15585
+ "text-[color:var(--deframe-widget-color-text-primary)]"
15586
+ ].join(" ");
15587
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
15588
+ const bodyBaseClasses = [
15589
+ "flex flex-col",
15590
+ "gap-[var(--deframe-widget-size-gap-md)]",
15591
+ "px-[var(--deframe-widget-size-padding-x-md)]",
15592
+ "py-[var(--deframe-widget-size-padding-y-md)]"
15593
+ ].join(" ");
15594
+ const footerBaseClasses = [
15595
+ "flex gap-[var(--deframe-widget-size-gap-sm)]",
15596
+ "px-[var(--deframe-widget-size-padding-x-md)]",
15597
+ "pb-[var(--deframe-widget-size-padding-y-md)]"
15598
+ ].join(" ");
15599
+ const cardClasses2 = twMerge(
15600
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
15601
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
15602
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
15603
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
15604
+ );
15605
+ const secondaryButtonClasses = [
15606
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
15607
+ "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
15608
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
15609
+ "outline-none",
15610
+ "transition-[background,color,border-color] duration-150",
15611
+ "hover:opacity-100",
15612
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
15613
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
15614
+ ].join(" ");
15615
+ return /* @__PURE__ */ jsxs(
15616
+ "div",
15617
+ {
15618
+ "data-slot": "onramp-form-simple-panel",
15619
+ "data-test-id": "onramp-form-simple-view",
15620
+ className: panelBaseClasses,
15621
+ children: [
15622
+ /* @__PURE__ */ jsxs(
15623
+ "header",
15624
+ {
15625
+ "data-slot": "onramp-form-simple-header",
15626
+ "data-test-id": "onramp-form-simple-view-header",
15627
+ className: headerBaseClasses,
15628
+ children: [
15629
+ /* @__PURE__ */ jsx(
15630
+ "span",
15631
+ {
15632
+ "data-slot": "onramp-form-simple-title",
15633
+ "data-test-id": "onramp-form-simple-view-title",
15634
+ className: titleBaseClasses,
15635
+ children: "Depositar"
15636
+ }
15637
+ ),
15638
+ onClose && /* @__PURE__ */ jsx(
15639
+ CloseButton_default,
15640
+ {
15641
+ onClick: onClose,
15642
+ ariaLabel: "Fechar painel de dep\xF3sito",
15643
+ testId: "onramp-form-simple-view-close"
15644
+ }
15645
+ )
15646
+ ]
15647
+ }
15648
+ ),
15649
+ /* @__PURE__ */ jsx(
15650
+ "div",
15651
+ {
15652
+ "data-slot": "onramp-form-simple-divider",
15653
+ "data-test-id": "onramp-form-simple-view-divider",
15654
+ className: dividerClasses
15655
+ }
15656
+ ),
15657
+ /* @__PURE__ */ jsx(
15658
+ FlowTabHeader,
15659
+ {
15660
+ activeTab: activeTab != null ? activeTab : "pix",
15661
+ cryptoHref: cryptoHref != null ? cryptoHref : "/dashboard/deposit/onchain",
15662
+ pixHref: pixHref != null ? pixHref : "/dashboard/deposit/onramp"
15663
+ }
15664
+ ),
15665
+ /* @__PURE__ */ jsx(
15666
+ "div",
15667
+ {
15668
+ "data-slot": "onramp-form-simple-divider-tabs",
15669
+ "data-test-id": "onramp-form-simple-view-divider-tabs",
15670
+ className: dividerClasses
15671
+ }
15672
+ ),
15673
+ /* @__PURE__ */ jsx(
15674
+ "div",
15675
+ {
15676
+ "data-slot": "onramp-form-simple-body",
15677
+ "data-test-id": "onramp-form-simple-view-body",
15678
+ className: bodyBaseClasses,
15679
+ children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: !hasPixCode ? (
15680
+ /* ── Step 1: Amount input ─────────────────────────────────────── */
15681
+ /* @__PURE__ */ jsxs(
15682
+ motion.div,
15683
+ {
15684
+ "data-slot": "onramp-form-simple-step-1",
15685
+ "data-test-id": "onramp-form-simple-view-step-1",
15686
+ initial: { opacity: 0 },
15687
+ animate: { opacity: 1 },
15688
+ exit: { opacity: 0 },
15689
+ transition: { duration: 0.15 },
15690
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
15691
+ children: [
15692
+ /* @__PURE__ */ jsx(
15693
+ "div",
15694
+ {
15695
+ "data-slot": "onramp-form-simple-amount-card",
15696
+ "data-test-id": "onramp-form-simple-view-amount-card",
15697
+ className: cardClasses2,
15698
+ children: /* @__PURE__ */ jsxs(
15699
+ "div",
15700
+ {
15701
+ "data-slot": "onramp-form-simple-amount-row",
15702
+ "data-test-id": "onramp-form-simple-view-amount-row",
15703
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
15704
+ children: [
15705
+ /* @__PURE__ */ jsx(
15706
+ "span",
15707
+ {
15708
+ "data-slot": "onramp-form-simple-currency-label",
15709
+ "data-test-id": "onramp-form-simple-view-currency-label",
15710
+ className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[1] flex-shrink-0",
15711
+ children: "R$"
15712
+ }
15713
+ ),
15714
+ /* @__PURE__ */ jsx(
15715
+ "div",
15716
+ {
15717
+ "data-test-id": "onramp-form-simple-view-currency-divider",
15718
+ className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
15719
+ }
15720
+ ),
15721
+ /* @__PURE__ */ jsx(
15722
+ EarnAmountInputSimpleView,
15723
+ {
15724
+ value: amount,
15725
+ onChange: (e) => {
15726
+ const raw = e.target.value.replace(/[^0-9.,]/g, "");
15727
+ onAmountChange(raw);
15728
+ },
15729
+ ariaLabel: "Valor do dep\xF3sito PIX",
15730
+ dollarAmountFormatted: ""
15731
+ }
15732
+ )
15733
+ ]
15734
+ }
15735
+ )
15736
+ }
15737
+ ),
15738
+ isBelowMinAmount && /* @__PURE__ */ jsx(
15739
+ EarnInlineNotificationSimpleView,
15740
+ {
15741
+ variant: "warning",
15742
+ message: `O valor m\xEDnimo para dep\xF3sito \xE9 R$ ${minAmountFormatted}.`
15743
+ }
15744
+ ),
15745
+ error && /* @__PURE__ */ jsx(
15746
+ EarnInlineNotificationSimpleView,
15747
+ {
15748
+ variant: "error",
15749
+ message: error
15750
+ }
15751
+ ),
15752
+ isLoadingQuote ? /* @__PURE__ */ jsxs(
15753
+ "div",
15754
+ {
15755
+ "data-test-id": "onramp-form-simple-view-skeleton",
15756
+ className: twMerge(cardClasses2, "space-y-3"),
15757
+ children: [
15758
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
15759
+ /* @__PURE__ */ jsx(Skeleton, { width: 96, height: 16, shimmer: true }),
15760
+ /* @__PURE__ */ jsx(Skeleton, { width: 80, height: 16, shimmer: true })
15761
+ ] }),
15762
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
15763
+ /* @__PURE__ */ jsx(Skeleton, { width: 80, height: 16, shimmer: true }),
15764
+ /* @__PURE__ */ jsx(Skeleton, { width: 64, height: 16, shimmer: true })
15765
+ ] })
15766
+ ]
15767
+ }
15768
+ ) : summaryItems.length > 0 && /* @__PURE__ */ jsx(
15769
+ SummaryDetails,
15770
+ {
15771
+ title: summaryTitle,
15772
+ items: summaryItems,
15773
+ defaultOpen: true,
15774
+ showDividers: true,
15775
+ className: "bg-[var(--deframe-widget-color-bg-secondary)]"
15776
+ }
15777
+ )
15778
+ ]
15779
+ },
15780
+ "step-1"
15781
+ )
15782
+ ) : (
15783
+ /* ── Step 2: QR code + PIX code ───────────────────────────────── */
15784
+ /* @__PURE__ */ jsxs(
15785
+ motion.div,
15786
+ {
15787
+ "data-slot": "onramp-form-simple-step-2",
15788
+ "data-test-id": "onramp-form-simple-view-step-2",
15789
+ initial: { opacity: 0 },
15790
+ animate: { opacity: 1 },
15791
+ exit: { opacity: 0 },
15792
+ transition: { duration: 0.15 },
15793
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
15794
+ children: [
15795
+ /* @__PURE__ */ jsxs(
15796
+ "div",
15797
+ {
15798
+ "data-slot": "onramp-form-simple-qr-card",
15799
+ "data-test-id": "onramp-form-simple-view-qr-card",
15800
+ className: twMerge(
15801
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
15802
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
15803
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
15804
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
15805
+ "flex items-center justify-center",
15806
+ "relative overflow-hidden"
15807
+ ),
15808
+ children: [
15809
+ /* @__PURE__ */ jsx(
15810
+ "div",
15811
+ {
15812
+ "data-slot": "onramp-form-simple-qr-wrapper",
15813
+ "data-test-id": "onramp-form-simple-view-qr-wrapper",
15814
+ className: "bg-white p-3 rounded-lg leading-[0]",
15815
+ children: qrCodeElement
15816
+ }
15817
+ ),
15818
+ isExpired && /* @__PURE__ */ jsx(
15819
+ "div",
15820
+ {
15821
+ "data-slot": "onramp-form-simple-qr-expired-overlay",
15822
+ "data-test-id": "onramp-form-simple-view-qr-expired-overlay",
15823
+ className: twMerge(
15824
+ "absolute inset-0 flex items-center justify-center",
15825
+ "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_80%,transparent)]",
15826
+ "rounded-[var(--deframe-widget-size-radius-sm)]"
15827
+ ),
15828
+ children: /* @__PURE__ */ jsx(
15829
+ "span",
15830
+ {
15831
+ "data-test-id": "onramp-form-simple-view-qr-expired-text",
15832
+ className: "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-state-error)] font-[var(--deframe-widget-font-family)]",
15833
+ children: "C\xF3digo expirado"
15834
+ }
15835
+ )
15836
+ }
15837
+ )
15838
+ ]
15839
+ }
15840
+ ),
15841
+ /* @__PURE__ */ jsxs(
15842
+ "div",
15843
+ {
15844
+ "data-slot": "onramp-form-simple-pix-code",
15845
+ "data-test-id": "onramp-form-simple-view-pix-code",
15846
+ className: twMerge(
15847
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
15848
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
15849
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
15850
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]"
15851
+ ),
15852
+ children: [
15853
+ /* @__PURE__ */ jsx(
15854
+ "p",
15855
+ {
15856
+ "data-test-id": "onramp-form-simple-view-pix-code-label",
15857
+ className: "mb-[var(--deframe-widget-size-gap-xs)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
15858
+ children: "C\xF3digo PIX"
15859
+ }
15860
+ ),
15861
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
15862
+ /* @__PURE__ */ jsx(
15863
+ "span",
15864
+ {
15865
+ "data-test-id": "onramp-form-simple-view-pix-code-value",
15866
+ className: "flex-1 min-w-0 truncate font-mono text-[13px] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]",
15867
+ children: pixCode
15868
+ }
15869
+ ),
15870
+ /* @__PURE__ */ jsxs(
15871
+ "button",
15872
+ {
15873
+ type: "button",
15874
+ "data-test-id": "onramp-form-simple-view-pix-code-copy",
15875
+ "aria-label": copied ? "C\xF3digo copiado" : "Copiar c\xF3digo PIX",
15876
+ onClick: onCopy,
15877
+ className: twMerge(
15878
+ "flex items-center gap-1 flex-shrink-0 px-2 py-1",
15879
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
15880
+ "text-[12px] [font-weight:var(--deframe-widget-font-weight-medium)]",
15881
+ "font-[var(--deframe-widget-font-family)]",
15882
+ "cursor-pointer outline-none",
15883
+ "transition-[background,color] duration-150",
15884
+ copied ? "text-[color:var(--deframe-widget-color-state-success)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)]" : "text-[color:var(--deframe-widget-color-brand-primary)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]"
15885
+ ),
15886
+ children: [
15887
+ /* @__PURE__ */ jsx(CopyIcon, {}),
15888
+ /* @__PURE__ */ jsx("span", { children: copied ? "Copiado!" : "Copiar" })
15889
+ ]
15890
+ }
15891
+ )
15892
+ ] })
15893
+ ]
15894
+ }
15895
+ ),
15896
+ remainingLabel && /* @__PURE__ */ jsxs(
15897
+ "div",
15898
+ {
15899
+ "data-slot": "onramp-form-simple-timer",
15900
+ "data-test-id": "onramp-form-simple-view-timer",
15901
+ className: "flex items-center justify-center gap-[var(--deframe-widget-size-gap-xs)]",
15902
+ children: [
15903
+ /* @__PURE__ */ jsx(
15904
+ ClockIcon,
15905
+ {
15906
+ className: twMerge(
15907
+ "flex-shrink-0",
15908
+ isExpired ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)]"
15909
+ )
15910
+ }
15911
+ ),
15912
+ /* @__PURE__ */ jsx(
15913
+ "span",
15914
+ {
15915
+ "data-test-id": "onramp-form-simple-view-timer-label",
15916
+ className: twMerge(
15917
+ "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)]",
15918
+ isExpired ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)]"
15919
+ ),
15920
+ children: remainingLabel
15921
+ }
15922
+ )
15923
+ ]
15924
+ }
15925
+ ),
15926
+ isExpired && onRegenerate && /* @__PURE__ */ jsx(
15927
+ PrimaryButton,
15928
+ {
15929
+ type: "button",
15930
+ onClick: onRegenerate,
15931
+ disabled: isRegenerating,
15932
+ className: "w-full h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
15933
+ "aria-label": "Gerar novo c\xF3digo PIX",
15934
+ "data-test-id": "onramp-form-simple-view-regenerate",
15935
+ children: isRegenerating ? "Gerando..." : "Gerar novo c\xF3digo"
15936
+ }
15937
+ )
15938
+ ]
15939
+ },
15940
+ "step-2"
15941
+ )
15942
+ ) })
15943
+ }
15944
+ ),
15945
+ /* @__PURE__ */ jsx(
15946
+ "footer",
15947
+ {
15948
+ "data-slot": "onramp-form-simple-footer",
15949
+ "data-test-id": "onramp-form-simple-view-footer",
15950
+ className: footerBaseClasses,
15951
+ children: !hasPixCode ? /* @__PURE__ */ jsxs(Fragment, { children: [
15952
+ /* @__PURE__ */ jsx(
15953
+ SecondaryButton,
15954
+ {
15955
+ type: "button",
15956
+ className: secondaryButtonClasses,
15957
+ onClick: onBack,
15958
+ "aria-label": "Cancelar dep\xF3sito",
15959
+ "data-test-id": "onramp-form-simple-view-cancel",
15960
+ children: "Cancelar"
15961
+ }
15962
+ ),
15963
+ /* @__PURE__ */ jsx(
15964
+ PrimaryButton,
15965
+ {
15966
+ type: "button",
15967
+ className: "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
15968
+ onClick: onSubmit,
15969
+ disabled: isSubmitDisabled,
15970
+ "aria-label": submitLabel,
15971
+ "data-test-id": "onramp-form-simple-view-submit",
15972
+ children: isProcessing ? "Processando..." : submitLabel
15973
+ }
15974
+ )
15975
+ ] }) : /* @__PURE__ */ jsx(
15976
+ SecondaryButton,
15977
+ {
15978
+ type: "button",
15979
+ className: twMerge(secondaryButtonClasses, "w-full"),
15980
+ onClick: onBack,
15981
+ "aria-label": "Cancelar",
15982
+ "data-test-id": "onramp-form-simple-view-cancel",
15983
+ children: "Cancelar"
15984
+ }
15985
+ )
15986
+ }
15987
+ )
15988
+ ]
15989
+ }
15990
+ );
15991
+ };
15992
+ function OnrampPixcodeView({
15993
+ pixCode,
15994
+ summaryTitle,
15995
+ summaryItems,
15996
+ isLoadingQuote,
15997
+ remainingLabel,
15998
+ isExpired,
15999
+ copied,
16000
+ isRegenerating,
16001
+ onCopy,
16002
+ onRegenerate,
16003
+ qrCodeElement,
16004
+ className
16005
+ }) {
16006
+ return /* @__PURE__ */ jsxs(
16007
+ "div",
16008
+ {
16009
+ className: twMerge(
16010
+ "w-full p-4 mx-auto space-y-6 animate-fade-in flex flex-col flex-1",
16011
+ className
16012
+ ),
16013
+ "data-test-id": "onramp-pixcode-view",
16014
+ children: [
16015
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
16016
+ /* @__PURE__ */ jsx("h2", { className: "text-[21px] font-bold text-[color:var(--deframe-widget-color-text-secondary)] leading-tight", children: "Pague com Pix" }),
16017
+ /* @__PURE__ */ jsx("p", { className: "text-[14px] text-[color:var(--deframe-widget-color-text-secondary)]", children: "Aponte a sua c\xE2mera para o QR code ou copie e cole o c\xF3digo no app do seu banco" })
16018
+ ] }),
16019
+ /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "bg-[var(--deframe-widget-color-bg-primary)] p-4 rounded-[var(--deframe-widget-size-radius-lg)]", children: /* @__PURE__ */ jsxs("div", { className: "relative mx-auto w-fit", children: [
16020
+ /* @__PURE__ */ jsx("div", { className: isExpired ? "blur-sm opacity-60 transition" : "transition", children: qrCodeElement }),
16021
+ isExpired && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center px-4", children: /* @__PURE__ */ jsx("div", { className: "text-[12px] font-semibold text-[color:var(--deframe-widget-color-text-primary)] bg-[var(--deframe-widget-color-bg-primary)]/90 rounded-[var(--deframe-widget-size-radius-sm)] px-3 py-2 border border-[var(--deframe-widget-color-border-secondary)]", children: "C\xF3digo expirado" }) })
16022
+ ] }) }) }),
16023
+ /* @__PURE__ */ jsx("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-lg)] shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
16024
+ /* @__PURE__ */ jsxs("p", { className: "font-mono text-[12px] text-[color:var(--deframe-widget-color-text-primary)] truncate flex-1", children: [
16025
+ pixCode.substring(0, 50),
16026
+ "..."
16027
+ ] }),
16028
+ /* @__PURE__ */ jsx(
16029
+ "button",
16030
+ {
16031
+ onClick: onCopy,
16032
+ disabled: isExpired,
16033
+ className: twMerge(
16034
+ "text-[12px] font-semibold underline shrink-0",
16035
+ isExpired ? "text-[color:var(--deframe-widget-color-text-tertiary)] cursor-not-allowed" : "text-[color:var(--deframe-widget-color-brand-primary)]"
16036
+ ),
16037
+ "aria-label": copied ? "C\xF3digo copiado" : "Copiar c\xF3digo PIX",
16038
+ "data-test-id": "onramp-pixcode-copy-button",
16039
+ children: copied ? "Copiado!" : "Copiar"
16040
+ }
16041
+ )
16042
+ ] }) }) }),
16043
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
16044
+ /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 text-[color:var(--deframe-widget-color-text-secondary)]", viewBox: "0 0 16 16", fill: "none", children: [
16045
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "#1890FF", strokeWidth: "1" }),
16046
+ /* @__PURE__ */ jsx("path", { d: "M8 4V8L10.5 10.5", stroke: "#1890FF", strokeWidth: "1", strokeLinecap: "round" })
16047
+ ] }),
16048
+ /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: isExpired ? "C\xF3digo expirou. Gere um novo para pagar." : `Expira em ${remainingLabel}` })
16049
+ ] }),
16050
+ isExpired && /* @__PURE__ */ jsx(
16051
+ "button",
16052
+ {
16053
+ type: "button",
16054
+ onClick: onRegenerate,
16055
+ disabled: isRegenerating,
16056
+ className: "text-[12px] font-semibold text-[color:var(--deframe-widget-color-brand-primary)] underline self-center disabled:opacity-50 disabled:cursor-not-allowed",
16057
+ "aria-label": "Gerar novo c\xF3digo Pix",
16058
+ "data-test-id": "onramp-pixcode-regenerate-button",
16059
+ children: isRegenerating ? /* @__PURE__ */ jsxs(Fragment, { children: [
16060
+ "Gerando novo c\xF3digo ",
16061
+ /* @__PURE__ */ jsx(LoadingDots, {})
16062
+ ] }) : "Gerar novo c\xF3digo Pix"
16063
+ }
16064
+ ),
16065
+ isLoadingQuote ? /* @__PURE__ */ jsx("div", { className: "p-4 bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-lg)] border border-[var(--deframe-widget-color-border-secondary)] space-y-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
16066
+ /* @__PURE__ */ jsx("div", { className: "h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-sm)] animate-pulse w-20" }),
16067
+ /* @__PURE__ */ jsx("span", { className: "text-[14px] text-[color:var(--deframe-widget-color-text-secondary)]", children: "\u2248" }),
16068
+ /* @__PURE__ */ jsx("div", { className: "h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-sm)] animate-pulse w-16" })
16069
+ ] }) }) : /* @__PURE__ */ jsx(
16070
+ SummaryDetails,
16071
+ {
16072
+ title: summaryTitle,
16073
+ items: summaryItems,
16074
+ defaultOpen: true,
16075
+ className: "bg-[var(--deframe-widget-color-bg-secondary)]"
16076
+ }
16077
+ )
16078
+ ]
16079
+ }
16080
+ );
16081
+ }
16082
+ function SuccessIcon3() {
16083
+ return /* @__PURE__ */ jsxs("div", { className: "relative w-20 h-20", children: [
16084
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[#2ba176] rounded-full opacity-20" }),
16085
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-12 h-12 bg-[#2ba176] rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
16086
+ "path",
16087
+ {
16088
+ d: "M10 15V5M10 5L6 9M10 5L14 9",
16089
+ stroke: "#121212",
16090
+ strokeWidth: "2",
16091
+ strokeLinecap: "round",
16092
+ strokeLinejoin: "round"
16093
+ }
16094
+ ) }) }) })
16095
+ ] });
16096
+ }
16097
+ function SuccessHeader({ children }) {
16098
+ return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-4", children });
16099
+ }
16100
+ function SuccessTitle({ children }) {
16101
+ return /* @__PURE__ */ jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children });
16102
+ }
16103
+ function SuccessDescription({ children }) {
16104
+ return /* @__PURE__ */ jsx("p", { className: "text-[14px] text-[color:var(--deframe-widget-color-text-secondary)]", children });
16105
+ }
16106
+ function DepositCard({ children }) {
16107
+ return /* @__PURE__ */ jsx("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-lg)] shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "p-6", children }) });
16108
+ }
16109
+ function DepositRow({ children }) {
16110
+ return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children });
16111
+ }
16112
+ function DepositIcon() {
16113
+ return /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-[var(--deframe-widget-color-brand-primary)] rounded-full flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-lg", children: "R" }) });
16114
+ }
16115
+ function DepositInfo({ children }) {
16116
+ return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children });
16117
+ }
16118
+ function OnrampSuccessView({
16119
+ amount = "0",
16120
+ summaryTitle = "",
16121
+ summaryItems = [],
16122
+ onNewDeposit,
16123
+ onGoToDashboard,
16124
+ className
16125
+ }) {
16126
+ return /* @__PURE__ */ jsxs(
16127
+ "div",
16128
+ {
16129
+ className: twMerge(
16130
+ "w-full p-4 mx-auto space-y-6 animate-fade-in flex flex-col flex-1",
16131
+ className
16132
+ ),
16133
+ "data-test-id": "onramp-success-view",
16134
+ children: [
16135
+ /* @__PURE__ */ jsxs(SuccessHeader, { children: [
16136
+ /* @__PURE__ */ jsx(SuccessIcon3, {}),
16137
+ /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
16138
+ /* @__PURE__ */ jsx(SuccessTitle, { children: "Dep\xF3sito via PIX conclu\xEDdo" }),
16139
+ /* @__PURE__ */ jsxs(SuccessDescription, { children: [
16140
+ amount,
16141
+ " BRLA foram adicionados \xE0 sua carteira."
16142
+ ] })
16143
+ ] })
16144
+ ] }),
16145
+ /* @__PURE__ */ jsx(DepositCard, { children: /* @__PURE__ */ jsxs(DepositRow, { children: [
16146
+ /* @__PURE__ */ jsx(DepositIcon, {}),
16147
+ /* @__PURE__ */ jsxs(DepositInfo, { children: [
16148
+ /* @__PURE__ */ jsx("p", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: "Voc\xEA depositou via PIX" }),
16149
+ /* @__PURE__ */ jsxs("p", { className: "text-[14px] font-semibold text-[color:var(--deframe-widget-color-text-secondary)]", children: [
16150
+ amount,
16151
+ " BRLA"
16152
+ ] })
16153
+ ] })
16154
+ ] }) }),
16155
+ /* @__PURE__ */ jsx(
16156
+ SummaryDetails,
16157
+ {
16158
+ title: summaryTitle,
16159
+ items: summaryItems,
16160
+ defaultOpen: false,
16161
+ className: "bg-[var(--deframe-widget-color-bg-secondary)]"
16162
+ }
16163
+ ),
16164
+ /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center my-4 gap-2 mt-auto", children: [
16165
+ /* @__PURE__ */ jsx(
16166
+ SecondaryButton,
16167
+ {
16168
+ onClick: onNewDeposit,
16169
+ "aria-label": "Fazer novo dep\xF3sito",
16170
+ "data-test-id": "onramp-success-new-deposit",
16171
+ children: "Fazer novo dep\xF3sito"
16172
+ }
16173
+ ),
16174
+ /* @__PURE__ */ jsx(
16175
+ PrimaryButton,
16176
+ {
16177
+ onClick: onGoToDashboard,
16178
+ "aria-label": "Ir para carteira",
16179
+ "data-test-id": "onramp-success-go-dashboard",
16180
+ children: "Ir para carteira"
16181
+ }
16182
+ )
16183
+ ] })
16184
+ ]
16185
+ }
16186
+ );
16187
+ }
16188
+ var OnrampSuccessSimpleView = ({
16189
+ onGoToDashboard
16190
+ }) => {
16191
+ React6.useEffect(() => {
16192
+ if (!onGoToDashboard) return;
16193
+ const timer = setTimeout(onGoToDashboard, 5e3);
16194
+ return () => clearTimeout(timer);
16195
+ }, [onGoToDashboard]);
16196
+ return /* @__PURE__ */ jsx("div", { "data-test-id": "onramp-success-simple-view", children: /* @__PURE__ */ jsx(
16197
+ EarnFeedbackOverlaySimpleView,
16198
+ {
16199
+ variant: "success",
16200
+ title: "Dep\xF3sito via PIX Confirmado!",
16201
+ subtitle: "Seu saldo foi atualizado."
16202
+ }
16203
+ ) });
16204
+ };
16205
+ var defaultBackIcon2 = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) });
16206
+ function OfframpInputFormView({
16207
+ brlaBalance,
16208
+ amount,
16209
+ onAmountChange,
16210
+ pixKey,
16211
+ onPixKeyChange,
16212
+ onMaxClick,
16213
+ showMaxButton,
16214
+ summaryTitle,
16215
+ summaryItems,
16216
+ isLoadingQuote,
16217
+ amountWarningMessage,
16218
+ hasActiveWithdrawal,
16219
+ completedBanner,
16220
+ error,
16221
+ offrampError,
16222
+ submitLabel,
16223
+ submitDisabled,
16224
+ onSubmit,
16225
+ onBack,
16226
+ backIcon,
16227
+ tokenIconUrl = "/brladigital_32.webp",
16228
+ flagIconUrl = "/brazil-flag-rounded.png",
16229
+ className
16230
+ }) {
16231
+ return /* @__PURE__ */ jsxs(
16232
+ "div",
16233
+ {
16234
+ className: twMerge(
16235
+ "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto mt-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 min-h-[80vh] flex flex-col",
16236
+ className
16237
+ ),
16238
+ "data-test-id": "offramp-input-form-view",
16239
+ children: [
16240
+ /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
16241
+ /* @__PURE__ */ jsxs(
16242
+ "button",
16243
+ {
16244
+ onClick: onBack,
16245
+ className: "flex items-center gap-2 mb-4 cursor-pointer",
16246
+ "aria-label": "Voltar",
16247
+ "data-test-id": "offramp-input-form-back-button",
16248
+ children: [
16249
+ backIcon || defaultBackIcon2,
16250
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-medium", children: "Voltar" })
16251
+ ]
16252
+ }
16253
+ ),
16254
+ /* @__PURE__ */ jsx("div", { className: "w-full h-1 bg-[var(--deframe-widget-color-border-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full bg-[#1FC16B]", style: { width: "25%" } }) })
16255
+ ] }),
16256
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-start gap-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full space-y-6", children: [
16257
+ completedBanner && /* @__PURE__ */ jsx(
16258
+ BannerNotification,
16259
+ {
16260
+ message: completedBanner,
16261
+ variant: "success"
16262
+ }
16263
+ ),
16264
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
16265
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: "Saque via PIX" }),
16266
+ /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: "Insira o valor e a chave PIX para receber em sua conta banc\xE1ria." })
16267
+ ] }),
16268
+ /* @__PURE__ */ jsxs(ListItem, { children: [
16269
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
16270
+ "img",
16271
+ {
16272
+ src: tokenIconUrl,
16273
+ alt: "Token",
16274
+ className: "w-10 h-10 rounded-full"
16275
+ }
16276
+ ) }),
16277
+ /* @__PURE__ */ jsxs(ListItemContent, { className: "ml-4", children: [
16278
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] ml-2", children: "Saldo em BRLA dispon\xEDvel" }),
16279
+ /* @__PURE__ */ jsxs(TextHeading, { variant: "h5", className: "ml-2", children: [
16280
+ brlaBalance,
16281
+ " BRLA"
16282
+ ] })
16283
+ ] })
16284
+ ] }),
16285
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
16286
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] mb-2", children: "Quanto voc\xEA quer enviar via PIX?" }),
16287
+ /* @__PURE__ */ jsxs("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-sm)] p-4 flex items-center justify-between", children: [
16288
+ /* @__PURE__ */ jsx("img", { src: flagIconUrl, alt: "BRL", className: "w-6 h-6 rounded-full" }),
16289
+ /* @__PURE__ */ jsx(
16290
+ "input",
16291
+ {
16292
+ type: "text",
16293
+ inputMode: "decimal",
16294
+ value: amount ? `R$${amount}` : "",
16295
+ onChange: (e) => {
16296
+ const value = e.target.value.replace(/[^0-9.]/g, "");
16297
+ onAmountChange(value || "");
16298
+ },
16299
+ onWheel: (event) => {
16300
+ event.currentTarget.blur();
16301
+ },
16302
+ placeholder: "R$0.00",
16303
+ className: "w-full bg-transparent text-right text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] outline-none",
16304
+ "aria-label": "Valor do saque",
16305
+ "data-test-id": "offramp-input-form-amount"
16306
+ }
16307
+ )
16308
+ ] }),
16309
+ showMaxButton && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
16310
+ TertiaryButton,
16311
+ {
16312
+ onClick: onMaxClick,
16313
+ className: "text-[length:var(--deframe-widget-font-size-sm)]",
16314
+ "aria-label": "Usar valor m\xE1ximo",
16315
+ children: "Max"
16316
+ }
16317
+ ) }),
16318
+ hasActiveWithdrawal && /* @__PURE__ */ jsx(
16319
+ BannerNotification,
16320
+ {
16321
+ message: "Voc\xEA j\xE1 tem um saque em andamento. Aguarde a conclus\xE3o antes de iniciar outro.",
16322
+ variant: "warning"
16323
+ }
16324
+ ),
16325
+ amountWarningMessage && /* @__PURE__ */ jsx(
16326
+ BannerNotification,
16327
+ {
16328
+ message: amountWarningMessage,
16329
+ variant: "warning"
16330
+ }
16331
+ )
16332
+ ] }),
16333
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
16334
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] mb-2", children: "Qual \xE9 a sua chave PIX?" }),
16335
+ /* @__PURE__ */ jsx(
16336
+ Input2,
16337
+ {
16338
+ type: "text",
16339
+ value: pixKey,
16340
+ onChange: (e) => onPixKeyChange(e.target.value),
16341
+ placeholder: "(CPF, email, telefone ou aleat\xF3ria)",
16342
+ className: "w-full h-12 text-[length:var(--deframe-widget-font-size-md)] border border-[var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-sm)] bg-[var(--deframe-widget-color-bg-secondary)]",
16343
+ "aria-label": "Chave PIX",
16344
+ "data-test-id": "offramp-input-form-pix-key"
16345
+ }
16346
+ ),
16347
+ /* @__PURE__ */ jsx(
16348
+ BannerNotification,
16349
+ {
16350
+ variant: "info",
16351
+ message: "A chave PIX deve estar vinculada ao mesmo CPF do seu cadastro."
16352
+ }
16353
+ )
16354
+ ] }),
16355
+ isLoadingQuote ? /* @__PURE__ */ jsx("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] p-4 rounded-[var(--deframe-widget-size-radius-sm)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
16356
+ /* @__PURE__ */ jsx(Skeleton, { width: 128, height: 16, shimmer: true }),
16357
+ /* @__PURE__ */ jsx(Skeleton, { width: 64, height: 16, shimmer: true })
16358
+ ] }) }) : /* @__PURE__ */ jsx(
16359
+ SummaryDetails,
16360
+ {
16361
+ title: summaryTitle,
16362
+ items: summaryItems,
16363
+ className: "bg-[var(--deframe-widget-color-bg-secondary)]"
16364
+ }
16365
+ ),
16366
+ /* @__PURE__ */ jsx(
16367
+ BannerNotification,
16368
+ {
16369
+ message: "Depois de inserir o valor e confirmar o pix voc\xEA precisa assinar a transa\xE7\xE3o na sua wallet. Processamento pode levar alguns minutos.",
16370
+ variant: "info"
16371
+ }
16372
+ ),
16373
+ (error || offrampError) && /* @__PURE__ */ jsx(
16374
+ BannerNotification,
16375
+ {
16376
+ message: error || offrampError || "",
16377
+ variant: "error"
16378
+ }
16379
+ ),
16380
+ /* @__PURE__ */ jsx(
16381
+ PrimaryButton,
16382
+ {
16383
+ onClick: onSubmit,
16384
+ disabled: submitDisabled,
16385
+ "aria-label": "Confirmar saque",
16386
+ "data-test-id": "offramp-input-form-submit",
16387
+ children: submitLabel
16388
+ }
16389
+ )
16390
+ ] }) })
16391
+ ]
16392
+ }
16393
+ );
16394
+ }
16395
+
16396
+ // src/stories/offramp-input-form-view/constants.ts
16397
+ var PIX_KEY_OPTIONS = [
16398
+ { value: "cpf", label: "CPF" },
16399
+ { value: "email", label: "Email" },
16400
+ { value: "phone", label: "Celular" },
16401
+ { value: "random", label: "Aleat\xF3ria" }
16402
+ ];
16403
+ var tabBaseClasses2 = [
16404
+ "flex-1 py-[4px] px-[8px]",
16405
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
16406
+ "border-none outline-none cursor-pointer",
16407
+ "whitespace-nowrap text-center",
16408
+ "font-[var(--deframe-widget-font-family)]",
16409
+ "text-[13px] [line-height:1.4]",
16410
+ "transition-[background,color] duration-150",
16411
+ "bg-transparent"
16412
+ ].join(" ");
16413
+ var activeTabClasses2 = [
16414
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
16415
+ "text-[color:var(--deframe-widget-color-brand-primary)]"
16416
+ ].join(" ");
16417
+ var inactiveTabClasses2 = [
16418
+ "[font-weight:var(--deframe-widget-font-weight-regular)]",
16419
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
16420
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]",
16421
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]"
16422
+ ].join(" ");
16423
+ var PixKeySegmentedControl = ({
16424
+ value,
16425
+ onChange
16426
+ }) => {
16427
+ return /* @__PURE__ */ jsx(
16428
+ "div",
16429
+ {
16430
+ role: "tablist",
16431
+ "data-slot": "pix-key-segmented-control",
16432
+ "data-test-id": "pix-key-segmented-control",
16433
+ className: twMerge(
16434
+ "inline-flex w-full",
16435
+ "rounded-[var(--deframe-widget-size-radius-md)]",
16436
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
16437
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
16438
+ "p-[3px] gap-[2px]"
16439
+ ),
16440
+ children: PIX_KEY_OPTIONS.map(({ value: optionValue, label }) => {
16441
+ const isActive = optionValue === value;
16442
+ return /* @__PURE__ */ jsx(
16443
+ "button",
16444
+ {
16445
+ type: "button",
16446
+ role: "tab",
16447
+ "aria-selected": isActive,
16448
+ "aria-label": label,
16449
+ "data-test-id": `pix-key-tab-${optionValue}`,
16450
+ onClick: () => onChange(optionValue),
16451
+ className: twMerge(
16452
+ tabBaseClasses2,
16453
+ isActive ? activeTabClasses2 : inactiveTabClasses2
16454
+ ),
16455
+ children: label
16456
+ },
16457
+ optionValue
16458
+ );
16459
+ })
16460
+ }
16461
+ );
16462
+ };
16463
+ var STORAGE_KEY = "deframe-pix-key-type";
16464
+ var PIX_PLACEHOLDERS = {
16465
+ cpf: "000.000.000-00",
16466
+ email: "seu@email.com",
16467
+ phone: "+55 (11) 99999-9999",
16468
+ random: "Chave aleat\xF3ria"
16469
+ };
16470
+ var OfframpInputFormSimpleView = ({
16471
+ // Base props
16472
+ brlaBalance,
16473
+ amount,
16474
+ onAmountChange,
16475
+ pixKey,
16476
+ onPixKeyChange,
16477
+ amountWarningMessage,
16478
+ hasActiveWithdrawal,
16479
+ completedBanner,
16480
+ error,
16481
+ offrampError,
16482
+ submitLabel,
16483
+ submitDisabled,
16484
+ onSubmit,
16485
+ onBack,
16486
+ className,
16487
+ // Simple-specific props
16488
+ activeTab,
16489
+ cryptoHref,
16490
+ pixHref,
16491
+ onPercentageSelect,
16492
+ maxLabel,
16493
+ onClose
16494
+ }) => {
16495
+ const [pixKeyType, setPixKeyType] = React6__default.useState(() => {
16496
+ if (typeof window === "undefined") return "cpf";
16497
+ return localStorage.getItem(STORAGE_KEY) || "cpf";
16498
+ });
16499
+ function handlePixKeyTypeChange(type) {
16500
+ setPixKeyType(type);
16501
+ localStorage.setItem(STORAGE_KEY, type);
16502
+ }
16503
+ const [cardHovered, setCardHovered] = React6__default.useState(false);
16504
+ const hideTimerRef = React6__default.useRef(void 0);
16505
+ function handleHoverStart() {
16506
+ clearTimeout(hideTimerRef.current);
16507
+ setCardHovered(true);
16508
+ }
16509
+ function handleHoverEnd() {
16510
+ hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
16511
+ }
16512
+ React6__default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
16513
+ const hasAmountError = !!amountWarningMessage;
16514
+ const hasPixKeyError = !!error || !!offrampError;
16515
+ const isSubmitDisabledInternal = submitDisabled || !amount || amount === "0" || !pixKey.trim();
16516
+ const panelBaseClasses = [
16517
+ "relative flex flex-col overflow-hidden w-[420px]",
16518
+ "rounded-[var(--deframe-widget-size-radius-md)]",
16519
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
16520
+ "font-[var(--deframe-widget-font-family)]"
16521
+ ].join(" ");
16522
+ const headerBaseClasses = [
16523
+ "flex items-center",
16524
+ "px-[var(--deframe-widget-size-padding-x-md)]",
16525
+ "py-[var(--deframe-widget-size-padding-y-md)]"
16526
+ ].join(" ");
16527
+ const titleBaseClasses = [
16528
+ "flex-1",
16529
+ "text-[15px]",
16530
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
16531
+ "text-[color:var(--deframe-widget-color-text-primary)]"
16532
+ ].join(" ");
16533
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
16534
+ const bodyBaseClasses = [
16535
+ "flex flex-col",
16536
+ "gap-[var(--deframe-widget-size-gap-md)]",
16537
+ "px-[var(--deframe-widget-size-padding-x-md)]",
16538
+ "py-[var(--deframe-widget-size-padding-y-md)]"
16539
+ ].join(" ");
16540
+ const amountCardClasses = twMerge(
16541
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
16542
+ "border",
16543
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
16544
+ "transition-[border-color,background] duration-200",
16545
+ hasAmountError ? "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)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)]"
16546
+ );
16547
+ const pixKeyCardClasses = twMerge(
16548
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
16549
+ "border",
16550
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
16551
+ "transition-[border-color,background] duration-200",
16552
+ hasPixKeyError ? "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)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)]"
16553
+ );
16554
+ const footerBaseClasses = [
16555
+ "flex gap-[var(--deframe-widget-size-gap-sm)]",
16556
+ "px-[var(--deframe-widget-size-padding-x-md)]",
16557
+ "pb-[var(--deframe-widget-size-padding-y-md)]"
16558
+ ].join(" ");
16559
+ const cancelButtonClasses = [
16560
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
16561
+ "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
16562
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
16563
+ "outline-none",
16564
+ "transition-[background,color,border-color] duration-150",
16565
+ "hover:opacity-100",
16566
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
16567
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
16568
+ ].join(" ");
16569
+ const submitButtonClasses = [
16570
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
16571
+ "border-none",
16572
+ "text-[15px]",
16573
+ isSubmitDisabledInternal ? "text-[color:var(--deframe-widget-color-text-primary-disabled)]" : "text-[color:var(--deframe-widget-color-text-primary-dark)]",
16574
+ "outline-none",
16575
+ "transition-[background,color] duration-200"
16576
+ ].join(" ");
16577
+ return /* @__PURE__ */ jsxs(
16578
+ "div",
16579
+ {
16580
+ "data-slot": "offramp-input-form-simple-panel",
16581
+ "data-test-id": "offramp-input-form-simple-view",
16582
+ className: twMerge(panelBaseClasses, className),
16583
+ children: [
16584
+ /* @__PURE__ */ jsxs(
16585
+ "header",
16586
+ {
16587
+ "data-slot": "offramp-input-form-simple-header",
16588
+ "data-test-id": "offramp-input-form-simple-view-header",
16589
+ className: headerBaseClasses,
16590
+ children: [
16591
+ /* @__PURE__ */ jsx(
16592
+ "span",
16593
+ {
16594
+ "data-slot": "offramp-input-form-simple-title",
16595
+ "data-test-id": "offramp-input-form-simple-view-title",
16596
+ className: titleBaseClasses,
16597
+ children: "Sacar"
16598
+ }
16599
+ ),
16600
+ onClose && /* @__PURE__ */ jsx(
16601
+ CloseButton_default,
16602
+ {
16603
+ onClick: onClose,
16604
+ ariaLabel: "Close withdrawal panel",
16605
+ testId: "offramp-input-form-simple-view-close"
16606
+ }
16607
+ )
16608
+ ]
16609
+ }
16610
+ ),
16611
+ /* @__PURE__ */ jsx(
16612
+ "div",
16613
+ {
16614
+ "data-slot": "offramp-input-form-simple-divider",
16615
+ "data-test-id": "offramp-input-form-simple-view-divider",
16616
+ className: dividerClasses
16617
+ }
16618
+ ),
16619
+ /* @__PURE__ */ jsx(
16620
+ FlowTabHeader,
16621
+ {
16622
+ activeTab: activeTab != null ? activeTab : "pix",
16623
+ cryptoHref: cryptoHref != null ? cryptoHref : "/dashboard/withdraw/onchain",
16624
+ pixHref: pixHref != null ? pixHref : "/dashboard/withdraw/offramp"
16625
+ }
16626
+ ),
16627
+ /* @__PURE__ */ jsx(
16628
+ "div",
16629
+ {
16630
+ "data-slot": "offramp-input-form-simple-divider-tabs",
16631
+ "data-test-id": "offramp-input-form-simple-view-divider-tabs",
16632
+ className: dividerClasses
16633
+ }
16634
+ ),
16635
+ /* @__PURE__ */ jsxs(
16636
+ "div",
16637
+ {
16638
+ "data-slot": "offramp-input-form-simple-body",
16639
+ "data-test-id": "offramp-input-form-simple-view-body",
16640
+ className: bodyBaseClasses,
16641
+ children: [
16642
+ /* @__PURE__ */ jsxs(
16643
+ "div",
16644
+ {
16645
+ "data-slot": "offramp-input-form-simple-amount-card",
16646
+ "data-test-id": "offramp-input-form-simple-view-amount-card",
16647
+ onMouseEnter: handleHoverStart,
16648
+ onMouseLeave: handleHoverEnd,
16649
+ className: amountCardClasses,
16650
+ children: [
16651
+ /* @__PURE__ */ jsxs(
16652
+ "div",
16653
+ {
16654
+ "data-slot": "offramp-input-form-simple-amount-top-row",
16655
+ "data-test-id": "offramp-input-form-simple-view-amount-top-row",
16656
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
16657
+ children: [
16658
+ /* @__PURE__ */ jsx(
16659
+ "span",
16660
+ {
16661
+ "data-test-id": "offramp-input-form-simple-view-currency-prefix",
16662
+ className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
16663
+ children: "R$"
16664
+ }
16665
+ ),
16666
+ /* @__PURE__ */ jsx(
16667
+ "div",
16668
+ {
16669
+ "data-test-id": "offramp-input-form-simple-view-input-divider",
16670
+ className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
16671
+ }
16672
+ ),
16673
+ /* @__PURE__ */ jsx(
16674
+ EarnAmountInputSimpleView,
16675
+ {
16676
+ value: amount,
16677
+ onChange: (e) => onAmountChange(e.target.value),
16678
+ ariaLabel: "Valor do saque",
16679
+ dollarAmountFormatted: ""
16680
+ }
16681
+ )
16682
+ ]
16683
+ }
16684
+ ),
16685
+ /* @__PURE__ */ jsx(
16686
+ "div",
16687
+ {
16688
+ "data-slot": "offramp-input-form-simple-balance-row",
16689
+ "data-test-id": "offramp-input-form-simple-view-balance-row",
16690
+ className: "mt-[var(--deframe-widget-size-gap-sm)]",
16691
+ children: /* @__PURE__ */ jsxs(
16692
+ "span",
16693
+ {
16694
+ className: twMerge(
16695
+ "text-[13px] font-[var(--deframe-widget-font-family)]",
16696
+ hasAmountError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
16697
+ ),
16698
+ children: [
16699
+ "Saldo: ",
16700
+ brlaBalance,
16701
+ " BRLA"
16702
+ ]
16703
+ }
16704
+ )
16705
+ }
16706
+ ),
16707
+ /* @__PURE__ */ jsx(AnimatePresence, { children: onPercentageSelect && cardHovered && /* @__PURE__ */ jsx(
16708
+ motion.div,
16709
+ {
16710
+ "data-slot": "offramp-input-form-simple-chips-row",
16711
+ "data-test-id": "offramp-input-form-simple-view-chips-row",
16712
+ initial: { opacity: 0, height: 0, marginTop: 0 },
16713
+ animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
16714
+ exit: { opacity: 0, height: 0, marginTop: 0 },
16715
+ transition: { duration: 0.15, ease: "easeOut" },
16716
+ style: { overflow: "hidden" },
16717
+ onMouseEnter: handleHoverStart,
16718
+ onMouseLeave: handleHoverEnd,
16719
+ children: /* @__PURE__ */ jsx(
16720
+ EarnPercentageButtonsSimpleView,
16721
+ {
16722
+ onPercentageClick: onPercentageSelect,
16723
+ maxLabel: maxLabel != null ? maxLabel : "M\xE1x."
16724
+ }
16725
+ )
16726
+ }
16727
+ ) }),
16728
+ amountWarningMessage && /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(
16729
+ EarnInlineNotificationSimpleView,
16730
+ {
16731
+ variant: "error",
16732
+ message: amountWarningMessage
16733
+ }
16734
+ ) })
16735
+ ]
16736
+ }
16737
+ ),
16738
+ /* @__PURE__ */ jsxs(
16739
+ "div",
16740
+ {
16741
+ "data-slot": "offramp-input-form-simple-pix-key-card",
16742
+ "data-test-id": "offramp-input-form-simple-view-pix-key-card",
16743
+ className: pixKeyCardClasses,
16744
+ children: [
16745
+ /* @__PURE__ */ jsx(
16746
+ PixKeySegmentedControl,
16747
+ {
16748
+ value: pixKeyType,
16749
+ onChange: handlePixKeyTypeChange
16750
+ }
16751
+ ),
16752
+ /* @__PURE__ */ jsx(
16753
+ "div",
16754
+ {
16755
+ "data-slot": "offramp-input-form-simple-pix-divider",
16756
+ "data-test-id": "offramp-input-form-simple-view-pix-divider",
16757
+ className: "h-px bg-[var(--deframe-widget-color-border-secondary)] my-[var(--deframe-widget-size-gap-sm)]"
16758
+ }
16759
+ ),
16760
+ /* @__PURE__ */ jsx(
16761
+ "input",
16762
+ {
16763
+ "data-slot": "offramp-input-form-simple-pix-input",
16764
+ "data-test-id": "offramp-input-form-simple-view-pix-input",
16765
+ type: "text",
16766
+ value: pixKey,
16767
+ onChange: (e) => onPixKeyChange(e.target.value),
16768
+ placeholder: PIX_PLACEHOLDERS[pixKeyType],
16769
+ "aria-label": "Chave PIX",
16770
+ className: twMerge(
16771
+ "w-full bg-transparent outline-none",
16772
+ "text-[13px] [font-weight:var(--deframe-widget-font-weight-regular)]",
16773
+ "font-[var(--deframe-widget-font-family)]",
16774
+ "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]",
16775
+ "text-[color:var(--deframe-widget-color-text-primary)]",
16776
+ '[font-feature-settings:"tnum"]'
16777
+ ),
16778
+ spellCheck: false,
16779
+ autoComplete: "off"
16780
+ }
16781
+ ),
16782
+ (error || offrampError) && /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(
16783
+ EarnInlineNotificationSimpleView,
16784
+ {
16785
+ variant: "error",
16786
+ message: error || offrampError || ""
16787
+ }
16788
+ ) })
16789
+ ]
16790
+ }
16791
+ ),
16792
+ /* @__PURE__ */ jsx(
16793
+ EarnInlineNotificationSimpleView,
16794
+ {
16795
+ variant: "info",
16796
+ message: "A chave PIX deve estar vinculada ao mesmo CPF do seu cadastro."
16797
+ }
16798
+ ),
16799
+ hasActiveWithdrawal && /* @__PURE__ */ jsx(
16800
+ EarnInlineNotificationSimpleView,
16801
+ {
16802
+ variant: "warning",
16803
+ message: "Voc\xEA j\xE1 possui um saque em andamento."
16804
+ }
16805
+ ),
16806
+ completedBanner && /* @__PURE__ */ jsx(
16807
+ EarnInlineNotificationSimpleView,
16808
+ {
16809
+ variant: "success",
16810
+ message: completedBanner
16811
+ }
16812
+ )
16813
+ ]
16814
+ }
16815
+ ),
16816
+ /* @__PURE__ */ jsxs(
16817
+ "footer",
16818
+ {
16819
+ "data-slot": "offramp-input-form-simple-footer",
16820
+ "data-test-id": "offramp-input-form-simple-view-footer",
16821
+ className: footerBaseClasses,
16822
+ children: [
16823
+ /* @__PURE__ */ jsx(
16824
+ SecondaryButton,
16825
+ {
16826
+ type: "button",
16827
+ className: cancelButtonClasses,
16828
+ onClick: onBack,
16829
+ "aria-label": "Cancel withdrawal",
16830
+ "data-test-id": "offramp-input-form-simple-view-cancel",
16831
+ children: "Cancelar"
16832
+ }
16833
+ ),
16834
+ /* @__PURE__ */ jsx(
16835
+ PrimaryButton,
16836
+ {
16837
+ type: "button",
16838
+ className: submitButtonClasses,
16839
+ disabled: isSubmitDisabledInternal,
16840
+ onClick: onSubmit,
16841
+ "aria-label": "Confirmar saque",
16842
+ "data-test-id": "offramp-input-form-simple-view-submit",
16843
+ children: submitLabel
16844
+ }
16845
+ )
16846
+ ]
16847
+ }
16848
+ )
16849
+ ]
16850
+ }
16851
+ );
16852
+ };
16853
+ function ExplorerLink2({ href, label, className }) {
16854
+ return /* @__PURE__ */ jsx(
16855
+ "a",
16856
+ {
16857
+ "data-test-id": "explorer-link",
16858
+ href,
16859
+ target: "_blank",
16860
+ rel: "noopener noreferrer",
16861
+ "aria-label": label || "View on explorer",
16862
+ className: twMerge(
16863
+ "text-[color:var(--deframe-widget-color-brand-primary)] font-[var(--deframe-widget-font-weight-semibold)] hover:underline text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)]",
16864
+ className
16865
+ ),
16866
+ children: label || href
16867
+ }
16868
+ );
16869
+ }
16870
+ function StepStatusIcon2({ status = "completed" }) {
16871
+ switch (status) {
16872
+ case "completed":
16873
+ return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-[color:var(--deframe-widget-color-brand-primary)]", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) });
16874
+ case "pending":
16875
+ return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center", children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-yellow-400", children: [
16876
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
16877
+ /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
16878
+ ] }) });
16879
+ case "failed":
16880
+ return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center", children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-red-400", children: [
16881
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
16882
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
16883
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
16884
+ ] }) });
16885
+ }
16886
+ }
16887
+ function StepDisplay2({ step }) {
16888
+ return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
16889
+ /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)] flex-1", children: step.description }),
16890
+ step.explorerUrl && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(ExplorerLink2, { href: step.explorerUrl, label: "Ver no Explorer", className: "text-[length:var(--deframe-widget-font-size-xs)] whitespace-nowrap" }) })
16891
+ ] });
16892
+ }
16893
+ function PixOfframpProcessingDetails({ breakdown, estimatedTime, className }) {
16894
+ if (!breakdown || breakdown.length === 0) {
16895
+ return null;
16896
+ }
16897
+ const getProcessingSteps = () => {
16898
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
16899
+ estimatedTime && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-3 text-[length:var(--deframe-widget-font-size-sm)]", children: [
16900
+ /* @__PURE__ */ jsx("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: "Tempo estimado" }),
16901
+ /* @__PURE__ */ jsx("span", { className: "font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]", children: estimatedTime })
16902
+ ] }),
16903
+ breakdown.map((step, index) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
16904
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
16905
+ /* @__PURE__ */ jsx(StepStatusIcon2, { status: step.status }),
16906
+ index < breakdown.length - 1 && /* @__PURE__ */ jsx("div", { className: "w-px flex-1 min-h-[10px] bg-[var(--deframe-widget-color-bg-primary)] my-2" })
16907
+ ] }),
16908
+ /* @__PURE__ */ jsx("div", { className: "flex-1 pb-3", children: /* @__PURE__ */ jsx(StepDisplay2, { step }) })
16909
+ ] }, `step-${index}`))
16910
+ ] });
16911
+ };
16912
+ const items = [
16913
+ {
16914
+ label: "",
16915
+ value: getProcessingSteps(),
16916
+ valueClassName: "flex flex-col gap-3 w-full"
16917
+ }
16918
+ ];
16919
+ return /* @__PURE__ */ jsx("div", { "data-test-id": "pix-offramp-processing-details", children: /* @__PURE__ */ jsx(
16920
+ SummaryDetails,
16921
+ {
16922
+ title: "Detalhes",
16923
+ items,
16924
+ defaultOpen: true,
16925
+ className: `bg-[var(--deframe-widget-color-bg-secondary)] ${className || ""}`
16926
+ }
16927
+ ) });
16928
+ }
16929
+ var defaultCloseIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) });
16930
+ function OfframpProcessingView({
16931
+ step = "creating_ticket",
16932
+ amount = "0",
16933
+ summaryTitle = "",
16934
+ summaryItems = [],
16935
+ transferTxHash,
16936
+ onClose,
16937
+ closeIcon,
16938
+ tokenIconUrl = "/brladigital_32.webp",
16939
+ className
16940
+ }) {
16941
+ const progressPercent = step === "creating_ticket" ? 50 : step === "transferring" ? 75 : 85;
16942
+ const prepareStatus = step === "creating_ticket" ? "processing" : "done";
16943
+ const signatureStatus = step === "waiting_pix" ? "done" : step === "transferring" ? "processing" : "pending";
16944
+ const sendStatus = "pending";
16945
+ const mapStatus = (status) => {
16946
+ if (status === "done") return "completed";
16947
+ return "pending";
16948
+ };
16949
+ return /* @__PURE__ */ jsxs(
16950
+ "div",
16951
+ {
16952
+ className: twMerge(
16953
+ "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto mt-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 min-h-[80vh] flex flex-col",
16954
+ className
16955
+ ),
16956
+ "data-test-id": "offramp-processing-view",
16957
+ children: [
16958
+ /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
16959
+ /* @__PURE__ */ jsx(
16960
+ "button",
16961
+ {
16962
+ onClick: onClose,
16963
+ className: "flex items-center justify-center w-8 h-8 text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition mb-4",
16964
+ "aria-label": "Fechar",
16965
+ "data-test-id": "offramp-processing-close-button",
16966
+ children: closeIcon || defaultCloseIcon
16967
+ }
16968
+ ),
16969
+ /* @__PURE__ */ jsx("div", { className: "w-full h-1 bg-[var(--deframe-widget-color-border-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full bg-[#1FC16B] transition-all duration-300", style: { width: `${progressPercent}%` } }) })
16970
+ ] }),
16971
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-start gap-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full space-y-6", children: [
16972
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center space-y-4", children: [
16973
+ /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-[#F6A700] rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-10 h-10 animate-pulse", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z" }) }) }),
16974
+ /* @__PURE__ */ jsxs("div", { children: [
16975
+ /* @__PURE__ */ jsxs(TextHeading, { variant: "h3", className: "mb-2 flex items-center justify-center gap-1", children: [
16976
+ "Estamos enviando seu PIX",
16977
+ /* @__PURE__ */ jsxs("span", { className: "flex gap-0.5", children: [
16978
+ /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "0ms", animationDuration: "1.4s" }, children: "." }),
16979
+ /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "200ms", animationDuration: "1.4s" }, children: "." }),
16980
+ /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "400ms", animationDuration: "1.4s" }, children: "." })
16981
+ ] })
16982
+ ] }),
16983
+ /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: "Seu PIX est\xE1 sendo enviado. Na maioria das vezes, cai em segundos." })
16984
+ ] })
16985
+ ] }),
16986
+ /* @__PURE__ */ jsxs(ListItem, { children: [
16987
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
16988
+ "img",
16989
+ {
16990
+ src: tokenIconUrl,
16991
+ alt: "Token",
16992
+ className: "w-10 h-10 rounded-full"
16993
+ }
16994
+ ) }),
16995
+ /* @__PURE__ */ jsxs(ListItemContent, { className: "ml-4", children: [
16996
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] ml-2", children: "Voc\xEA sacou via PIX" }),
16997
+ /* @__PURE__ */ jsxs(TextHeading, { variant: "h5", className: "ml-2", children: [
16998
+ amount,
16999
+ " BRLA"
17000
+ ] })
17001
+ ] })
17002
+ ] }),
17003
+ /* @__PURE__ */ jsx(
17004
+ SummaryDetails,
17005
+ {
17006
+ title: summaryTitle,
17007
+ items: summaryItems,
17008
+ className: "bg-[var(--deframe-widget-color-bg-secondary)]"
17009
+ }
17010
+ ),
17011
+ /* @__PURE__ */ jsx(
17012
+ PixOfframpProcessingDetails,
17013
+ {
17014
+ estimatedTime: "~2-5 min",
17015
+ breakdown: [
17016
+ {
17017
+ type: "prepare_withdrawal",
17018
+ description: "Preparando seu saque",
17019
+ status: mapStatus(prepareStatus)
17020
+ },
17021
+ {
17022
+ type: "blockchain_signature",
17023
+ description: "Assinatura",
17024
+ status: mapStatus(signatureStatus),
17025
+ explorerUrl: transferTxHash ? `https://polygonscan.com/tx/${transferTxHash}` : void 0
17026
+ },
17027
+ {
17028
+ type: "pix_transfer",
17029
+ description: "Enviando PIX para sua conta",
17030
+ status: mapStatus(sendStatus)
17031
+ }
17032
+ ]
17033
+ }
17034
+ ),
17035
+ /* @__PURE__ */ jsx("div", { className: "w-full space-y-3", children: /* @__PURE__ */ jsxs(PrimaryButton, { disabled: true, "aria-label": "Aguarde processamento", children: [
17036
+ "Aguarde ",
17037
+ /* @__PURE__ */ jsx(LoadingDots, {})
17038
+ ] }) })
17039
+ ] }) })
17040
+ ]
17041
+ }
17042
+ );
17043
+ }
17044
+ var OfframpProcessingSimpleView = () => {
17045
+ return /* @__PURE__ */ jsx("div", { "data-test-id": "offramp-processing-simple-view", children: /* @__PURE__ */ jsx(
17046
+ EarnFeedbackOverlaySimpleView,
17047
+ {
17048
+ variant: "loading",
17049
+ title: "PROCESSANDO SAQUE...",
17050
+ subtitle: "Seu PIX est\xE1 sendo enviado. Aguarde alguns instantes."
17051
+ }
17052
+ ) });
17053
+ };
17054
+ function Card({ children, className }) {
17055
+ return /* @__PURE__ */ jsx(
17056
+ "div",
17057
+ {
17058
+ "data-test-id": "card",
17059
+ className: twMerge(
17060
+ "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)] shadow-sm",
17061
+ className
17062
+ ),
17063
+ children
17064
+ }
17065
+ );
17066
+ }
17067
+ var defaultCloseIcon2 = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) });
17068
+ var defaultArrowUpIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-10 h-10 text-[#1FC16B]", children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
17069
+ function TransactionIdDisplay({ transactionId }) {
17070
+ const truncated = transactionId.length > 16 ? `${transactionId.slice(0, 8)}...${transactionId.slice(-6)}` : transactionId;
17071
+ return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
17072
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "font-mono text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: truncated }),
17073
+ /* @__PURE__ */ jsx(
17074
+ AddressDisplay,
17075
+ {
17076
+ address: transactionId,
17077
+ className: "border-none bg-transparent p-0 gap-0",
17078
+ textClassName: "hidden"
17079
+ }
17080
+ )
17081
+ ] });
17082
+ }
17083
+ function OfframpSuccessView({
17084
+ amount = "0",
17085
+ feesFormatted = "0",
17086
+ transactionId,
17087
+ date = "",
17088
+ onClose,
17089
+ onConfirm,
17090
+ closeIcon,
17091
+ arrowUpIcon,
17092
+ tokenIconUrl = "/brladigital_32.webp",
17093
+ className
17094
+ }) {
17095
+ return /* @__PURE__ */ jsxs(
17096
+ "div",
17097
+ {
17098
+ className: twMerge(
17099
+ "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto mt-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 min-h-[80vh] flex flex-col",
17100
+ className
17101
+ ),
17102
+ "data-test-id": "offramp-success-view",
17103
+ children: [
17104
+ /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
17105
+ /* @__PURE__ */ jsx(
17106
+ "button",
17107
+ {
17108
+ onClick: onClose,
17109
+ className: "flex items-center justify-center w-8 h-8 text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition mb-4",
17110
+ "aria-label": "Fechar",
17111
+ "data-test-id": "offramp-success-close-button",
17112
+ children: closeIcon || defaultCloseIcon2
17113
+ }
17114
+ ),
17115
+ /* @__PURE__ */ jsx("div", { className: "w-full h-1 bg-[#1FC16B] rounded-full" })
17116
+ ] }),
17117
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-start gap-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full space-y-6", children: [
17118
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center space-y-4", children: [
17119
+ /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-[#1FC16B]/20 rounded-full flex items-center justify-center", children: arrowUpIcon || defaultArrowUpIcon }),
17120
+ /* @__PURE__ */ jsxs("div", { children: [
17121
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", className: "mb-2", children: "PIX enviado com sucesso!" }),
17122
+ /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: "Seu saque foi conclu\xEDdo e o valor j\xE1 est\xE1 na sua conta." })
17123
+ ] })
17124
+ ] }),
17125
+ /* @__PURE__ */ jsxs(ListItem, { children: [
17126
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: tokenIconUrl, alt: "Token", className: "w-10 h-10 rounded-full" }) }),
17127
+ /* @__PURE__ */ jsxs(ListItemContent, { className: "ml-4", children: [
17128
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] ml-2", children: "Voc\xEA sacou via PIX" }),
17129
+ /* @__PURE__ */ jsxs(TextHeading, { variant: "h5", className: "ml-2", children: [
17130
+ amount,
17131
+ " BRLA"
17132
+ ] })
17133
+ ] })
17134
+ ] }),
17135
+ /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("div", { className: "p-4 w-full inline-flex flex-col justify-start items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col justify-start items-start gap-2", children: [
17136
+ /* @__PURE__ */ jsxs("div", { className: "self-stretch h-6 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
17137
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "Valor do saque" }),
17138
+ /* @__PURE__ */ jsxs(TextBody, { variant: "text-small", className: "font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: [
17139
+ amount,
17140
+ " BRLA"
17141
+ ] })
17142
+ ] }),
17143
+ /* @__PURE__ */ jsxs("div", { className: "self-stretch h-6 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
17144
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "Taxa" }),
17145
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: feesFormatted })
17146
+ ] }),
17147
+ /* @__PURE__ */ jsxs("div", { className: "self-stretch h-6 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
17148
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "Metodo" }),
17149
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: "Transferencia banc\xE1ria (PIX)" })
17150
+ ] }),
17151
+ /* @__PURE__ */ jsxs("div", { className: "self-stretch h-8 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
17152
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "Status" }),
17153
+ /* @__PURE__ */ jsxs("div", { className: "px-2 py-0.5 bg-[#1FC16B]/10 rounded-3xl flex justify-end items-center gap-2", children: [
17154
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: "Sucesso" }),
17155
+ /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-teal-600 rounded-full" })
17156
+ ] })
17157
+ ] }),
17158
+ /* @__PURE__ */ jsxs("div", { className: "self-stretch h-6 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
17159
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "ID da Transa\xE7\xE3o" }),
17160
+ /* @__PURE__ */ jsx("div", { className: "flex justify-start items-center gap-2", children: transactionId ? /* @__PURE__ */ jsx(TransactionIdDisplay, { transactionId }) : /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: "-" }) })
17161
+ ] }),
17162
+ /* @__PURE__ */ jsxs("div", { className: "self-stretch h-6 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
17163
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "Data" }),
17164
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: date })
17165
+ ] })
17166
+ ] }) }) }),
17167
+ /* @__PURE__ */ jsx(
17168
+ PrimaryButton,
17169
+ {
17170
+ onClick: onConfirm,
17171
+ "aria-label": "Confirmar",
17172
+ "data-test-id": "offramp-success-confirm-button",
17173
+ children: "Ok, obrigado"
17174
+ }
17175
+ )
17176
+ ] }) })
17177
+ ]
17178
+ }
17179
+ );
17180
+ }
17181
+ var OfframpSuccessSimpleView = ({
17182
+ onClose
17183
+ }) => {
17184
+ React6.useEffect(() => {
17185
+ if (!onClose) return;
17186
+ const timer = setTimeout(onClose, 5e3);
17187
+ return () => clearTimeout(timer);
17188
+ }, [onClose]);
17189
+ return /* @__PURE__ */ jsx("div", { "data-test-id": "offramp-success-simple-view", children: /* @__PURE__ */ jsx(
17190
+ EarnFeedbackOverlaySimpleView,
17191
+ {
17192
+ variant: "success",
17193
+ title: "PIX Enviado com Sucesso!",
17194
+ subtitle: "Seu saque foi conclu\xEDdo e o valor j\xE1 est\xE1 na sua conta."
17195
+ }
17196
+ ) });
17197
+ };
17198
+ var OfframpFailedSimpleView = () => {
17199
+ return /* @__PURE__ */ jsx("div", { "data-test-id": "offramp-failed-simple-view", children: /* @__PURE__ */ jsx(
17200
+ EarnFeedbackOverlaySimpleView,
17201
+ {
17202
+ variant: "error",
17203
+ title: "Saque Falhou",
17204
+ subtitle: "Ocorreu um erro ao processar seu saque. Tente novamente."
15076
17205
  }
15077
17206
  ) });
15078
17207
  };
@@ -16361,6 +18490,6 @@ var DashboardViewSimple = ({
16361
18490
  );
16362
18491
  };
16363
18492
 
16364
- 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, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnDesktopViewSimple, EarnExploreGridView, EarnFlowSkeletonSimple, 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, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InputField, InputLabel, Input as InputRoot, InvestmentCrossChainProcessingView, KYCActionRow, KYCAddressPage, KYCBasicDataPage, KYCChecklistCard, KYCChecklistItem, KYCDataCard, KYCDocumentPage, KYCEditPage, KYCFieldMessage, KYCFormPage, KYCInfoRow, KYCIntroPage, KYCLoadingPage, KYCMessageBanner, KYCPageHeader, KYCPageSection, KYCPageShell, KYCReviewPage, KYCReviewPageSkeleton, KYCStatusItemCard, KYCStatusPage, KYCStatusPanel, KYCStepIndicator, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, OnchainDepositFormSimpleView, OnchainDepositFormView, OnchainDepositSuccessSimpleView, OnchainDepositSuccessView, OnchainWithdrawChainSelectorView, OnchainWithdrawFailedView, OnchainWithdrawFormSimpleView, OnchainWithdrawFormView, OnchainWithdrawProcessingSimpleView, OnchainWithdrawSignatureWarningSimpleView, OnchainWithdrawSignatureWarningView, OnchainWithdrawSuccessView, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, 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, isDustValue, truncateAddress };
18493
+ 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, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnDesktopViewSimple, EarnExploreGridView, EarnFlowSkeletonSimple, 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, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InputField, InputLabel, Input as InputRoot, 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, OnchainWithdrawFailedView, OnchainWithdrawFormSimpleView, OnchainWithdrawFormView, OnchainWithdrawProcessingSimpleView, OnchainWithdrawSignatureWarningSimpleView, OnchainWithdrawSignatureWarningView, OnchainWithdrawSuccessView, OnrampFormSimpleView, OnrampFormView, OnrampPixcodeView, OnrampSuccessSimpleView, OnrampSuccessView, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, 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, isDustValue, truncateAddress };
16365
18494
  //# sourceMappingURL=index.mjs.map
16366
18495
  //# sourceMappingURL=index.mjs.map