@b3dotfun/sdk 0.0.49-alpha.0 → 0.0.49-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/dist/cjs/anyspend/react/components/AnySpend.d.ts +2 -1
  2. package/dist/cjs/anyspend/react/components/AnySpend.js +8 -4
  3. package/dist/cjs/anyspend/react/components/AnySpendCustom.js +12 -3
  4. package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +10 -3
  5. package/dist/cjs/anyspend/react/components/common/CryptoPaySection.d.ts +3 -1
  6. package/dist/cjs/anyspend/react/components/common/CryptoPaySection.js +2 -2
  7. package/dist/cjs/anyspend/react/components/common/CryptoReceiveSection.d.ts +3 -1
  8. package/dist/cjs/anyspend/react/components/common/CryptoReceiveSection.js +2 -2
  9. package/dist/cjs/anyspend/react/components/common/FeeBreakDown.d.ts +12 -0
  10. package/dist/cjs/anyspend/react/components/common/FeeBreakDown.js +19 -0
  11. package/dist/cjs/anyspend/react/components/common/FeeDetailPanel.d.ts +8 -0
  12. package/dist/cjs/anyspend/react/components/common/FeeDetailPanel.js +116 -0
  13. package/dist/cjs/anyspend/react/components/common/PanelOnramp.d.ts +2 -1
  14. package/dist/cjs/anyspend/react/components/common/PanelOnramp.js +36 -21
  15. package/dist/cjs/anyspend/react/components/common/PanelOnrampPayment.js +2 -1
  16. package/dist/cjs/anyspend/react/components/common/PointsDetailPanel.js +1 -2
  17. package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +3 -1
  18. package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +1 -0
  19. package/dist/cjs/anyspend/react/hooks/useAnyspendOrderHistory.d.ts +24 -0
  20. package/dist/cjs/anyspend/types/api.d.ts +119 -176
  21. package/dist/cjs/global-account/react/components/ui/tooltip.js +1 -1
  22. package/dist/esm/anyspend/react/components/AnySpend.d.ts +2 -1
  23. package/dist/esm/anyspend/react/components/AnySpend.js +8 -4
  24. package/dist/esm/anyspend/react/components/AnySpendCustom.js +14 -5
  25. package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +10 -3
  26. package/dist/esm/anyspend/react/components/common/CryptoPaySection.d.ts +3 -1
  27. package/dist/esm/anyspend/react/components/common/CryptoPaySection.js +4 -4
  28. package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.d.ts +3 -1
  29. package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.js +4 -4
  30. package/dist/esm/anyspend/react/components/common/FeeBreakDown.d.ts +12 -0
  31. package/dist/esm/anyspend/react/components/common/FeeBreakDown.js +16 -0
  32. package/dist/esm/anyspend/react/components/common/FeeDetailPanel.d.ts +8 -0
  33. package/dist/esm/anyspend/react/components/common/FeeDetailPanel.js +113 -0
  34. package/dist/esm/anyspend/react/components/common/PanelOnramp.d.ts +2 -1
  35. package/dist/esm/anyspend/react/components/common/PanelOnramp.js +38 -23
  36. package/dist/esm/anyspend/react/components/common/PanelOnrampPayment.js +2 -1
  37. package/dist/esm/anyspend/react/components/common/PointsDetailPanel.js +2 -3
  38. package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +3 -1
  39. package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +1 -0
  40. package/dist/esm/anyspend/react/hooks/useAnyspendOrderHistory.d.ts +24 -0
  41. package/dist/esm/anyspend/types/api.d.ts +119 -176
  42. package/dist/esm/global-account/react/components/ui/tooltip.js +1 -1
  43. package/dist/styles/index.css +1 -1
  44. package/dist/types/anyspend/react/components/AnySpend.d.ts +2 -1
  45. package/dist/types/anyspend/react/components/common/CryptoPaySection.d.ts +3 -1
  46. package/dist/types/anyspend/react/components/common/CryptoReceiveSection.d.ts +3 -1
  47. package/dist/types/anyspend/react/components/common/FeeBreakDown.d.ts +12 -0
  48. package/dist/types/anyspend/react/components/common/FeeDetailPanel.d.ts +8 -0
  49. package/dist/types/anyspend/react/components/common/PanelOnramp.d.ts +2 -1
  50. package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +3 -1
  51. package/dist/types/anyspend/react/hooks/useAnyspendOrderHistory.d.ts +24 -0
  52. package/dist/types/anyspend/types/api.d.ts +119 -176
  53. package/package.json +1 -1
  54. package/src/anyspend/react/components/AnySpend.tsx +20 -0
  55. package/src/anyspend/react/components/AnySpendCustom.tsx +69 -7
  56. package/src/anyspend/react/components/AnyspendDepositHype.tsx +23 -0
  57. package/src/anyspend/react/components/common/CryptoPaySection.tsx +14 -2
  58. package/src/anyspend/react/components/common/CryptoReceiveSection.tsx +14 -2
  59. package/src/anyspend/react/components/common/FeeBreakDown.tsx +105 -0
  60. package/src/anyspend/react/components/common/FeeDetailPanel.tsx +307 -0
  61. package/src/anyspend/react/components/common/PanelOnramp.tsx +58 -27
  62. package/src/anyspend/react/components/common/PanelOnrampPayment.tsx +18 -6
  63. package/src/anyspend/react/components/common/PointsDetailPanel.tsx +1 -13
  64. package/src/anyspend/react/hooks/useAnyspendFlow.ts +1 -0
  65. package/src/anyspend/types/api.ts +121 -176
  66. package/src/global-account/react/components/ui/tooltip.tsx +11 -9
@@ -4,12 +4,6 @@
4
4
  */
5
5
  export interface paths {
6
6
  "/chains/{chainId}/tokens": {
7
- parameters: {
8
- query?: never;
9
- header?: never;
10
- path?: never;
11
- cookie?: never;
12
- };
13
7
  /**
14
8
  * Get tokens for a chain
15
9
  * @description Retrieves available tokens for a specific blockchain
@@ -25,7 +19,6 @@ export interface paths {
25
19
  /** @description Maximum number of tokens to return */
26
20
  limit?: number;
27
21
  };
28
- header?: never;
29
22
  path: {
30
23
  /**
31
24
  * @description Blockchain chain ID
@@ -33,15 +26,10 @@ export interface paths {
33
26
  */
34
27
  chainId: number;
35
28
  };
36
- cookie?: never;
37
29
  };
38
- requestBody?: never;
39
30
  responses: {
40
31
  /** @description Tokens retrieved successfully */
41
32
  200: {
42
- headers: {
43
- [name: string]: unknown;
44
- };
45
33
  content: {
46
34
  "application/json": {
47
35
  /** @example true */
@@ -72,9 +60,6 @@ export interface paths {
72
60
  };
73
61
  /** @description Bad request */
74
62
  400: {
75
- headers: {
76
- [name: string]: unknown;
77
- };
78
63
  content: {
79
64
  "application/json": {
80
65
  /** @example false */
@@ -88,21 +73,8 @@ export interface paths {
88
73
  };
89
74
  };
90
75
  };
91
- put?: never;
92
- post?: never;
93
- delete?: never;
94
- options?: never;
95
- head?: never;
96
- patch?: never;
97
- trace?: never;
98
76
  };
99
77
  "/onramp/coinbase/options": {
100
- parameters: {
101
- query?: never;
102
- header?: never;
103
- path?: never;
104
- cookie?: never;
105
- };
106
78
  /**
107
79
  * Get Coinbase onramp options
108
80
  * @description Retrieves available Coinbase onramp configuration options.
@@ -135,17 +107,10 @@ export interface paths {
135
107
  */
136
108
  chainIds?: string[];
137
109
  };
138
- header?: never;
139
- path?: never;
140
- cookie?: never;
141
110
  };
142
- requestBody?: never;
143
111
  responses: {
144
112
  /** @description Coinbase options retrieved successfully */
145
113
  200: {
146
- headers: {
147
- [name: string]: unknown;
148
- };
149
114
  content: {
150
115
  "application/json": {
151
116
  /** @example true */
@@ -248,9 +213,6 @@ export interface paths {
248
213
  };
249
214
  /** @description Bad request */
250
215
  400: {
251
- headers: {
252
- [name: string]: unknown;
253
- };
254
216
  content: {
255
217
  "application/json": {
256
218
  /** @example false */
@@ -264,21 +226,8 @@ export interface paths {
264
226
  };
265
227
  };
266
228
  };
267
- put?: never;
268
- post?: never;
269
- delete?: never;
270
- options?: never;
271
- head?: never;
272
- patch?: never;
273
- trace?: never;
274
229
  };
275
230
  "/onramp/stripe/supported": {
276
- parameters: {
277
- query?: never;
278
- header?: never;
279
- path?: never;
280
- cookie?: never;
281
- };
282
231
  /**
283
232
  * Check Stripe support
284
233
  * @description Checks if Stripe onramp and Stripe Web2 are supported based on IP address location and optional transaction amount
@@ -292,17 +241,10 @@ export interface paths {
292
241
  */
293
242
  usdAmount?: string;
294
243
  };
295
- header?: never;
296
- path?: never;
297
- cookie?: never;
298
244
  };
299
- requestBody?: never;
300
245
  responses: {
301
246
  /** @description Stripe support status retrieved successfully */
302
247
  200: {
303
- headers: {
304
- [name: string]: unknown;
305
- };
306
248
  content: {
307
249
  "application/json": {
308
250
  /** @example true */
@@ -325,9 +267,6 @@ export interface paths {
325
267
  };
326
268
  /** @description Bad request */
327
269
  400: {
328
- headers: {
329
- [name: string]: unknown;
330
- };
331
270
  content: {
332
271
  "application/json": {
333
272
  /** @example false */
@@ -341,21 +280,8 @@ export interface paths {
341
280
  };
342
281
  };
343
282
  };
344
- put?: never;
345
- post?: never;
346
- delete?: never;
347
- options?: never;
348
- head?: never;
349
- patch?: never;
350
- trace?: never;
351
283
  };
352
284
  "/orders": {
353
- parameters: {
354
- query?: never;
355
- header?: never;
356
- path?: never;
357
- cookie?: never;
358
- };
359
285
  /**
360
286
  * Get orders by creator
361
287
  * @description Retrieves all orders created by a specific address
@@ -379,17 +305,10 @@ export interface paths {
379
305
  */
380
306
  offset?: string;
381
307
  };
382
- header?: never;
383
- path?: never;
384
- cookie?: never;
385
308
  };
386
- requestBody?: never;
387
309
  responses: {
388
310
  /** @description Orders retrieved successfully */
389
311
  200: {
390
- headers: {
391
- [name: string]: unknown;
392
- };
393
312
  content: {
394
313
  "application/json": {
395
314
  /** @example true */
@@ -405,9 +324,6 @@ export interface paths {
405
324
  };
406
325
  /** @description Bad request */
407
326
  400: {
408
- headers: {
409
- [name: string]: unknown;
410
- };
411
327
  content: {
412
328
  "application/json": {
413
329
  /** @example false */
@@ -421,18 +337,11 @@ export interface paths {
421
337
  };
422
338
  };
423
339
  };
424
- put?: never;
425
340
  /**
426
341
  * Create a new order
427
342
  * @description Creates a new order for token transactions across chains
428
343
  */
429
344
  post: {
430
- parameters: {
431
- query?: never;
432
- header?: never;
433
- path?: never;
434
- cookie?: never;
435
- };
436
345
  requestBody: {
437
346
  content: {
438
347
  "application/json": components["schemas"]["OrderRequest"];
@@ -441,9 +350,6 @@ export interface paths {
441
350
  responses: {
442
351
  /** @description Order created successfully */
443
352
  200: {
444
- headers: {
445
- [name: string]: unknown;
446
- };
447
353
  content: {
448
354
  "application/json": {
449
355
  /** @example true */
@@ -458,9 +364,6 @@ export interface paths {
458
364
  };
459
365
  /** @description Bad request */
460
366
  400: {
461
- headers: {
462
- [name: string]: unknown;
463
- };
464
367
  content: {
465
368
  "application/json": {
466
369
  /** @example false */
@@ -474,27 +377,14 @@ export interface paths {
474
377
  };
475
378
  };
476
379
  };
477
- delete?: never;
478
- options?: never;
479
- head?: never;
480
- patch?: never;
481
- trace?: never;
482
380
  };
483
381
  "/orders/{orderId}": {
484
- parameters: {
485
- query?: never;
486
- header?: never;
487
- path?: never;
488
- cookie?: never;
489
- };
490
382
  /**
491
383
  * Get order and transactions
492
384
  * @description Retrieves order details along with associated transactions
493
385
  */
494
386
  get: {
495
387
  parameters: {
496
- query?: never;
497
- header?: never;
498
388
  path: {
499
389
  /**
500
390
  * @description Unique order identifier
@@ -502,15 +392,10 @@ export interface paths {
502
392
  */
503
393
  orderId: string;
504
394
  };
505
- cookie?: never;
506
395
  };
507
- requestBody?: never;
508
396
  responses: {
509
397
  /** @description Order and transactions retrieved successfully */
510
398
  200: {
511
- headers: {
512
- [name: string]: unknown;
513
- };
514
399
  content: {
515
400
  "application/json": {
516
401
  /** @example true */
@@ -562,9 +447,6 @@ export interface paths {
562
447
  };
563
448
  /** @description Bad request */
564
449
  400: {
565
- headers: {
566
- [name: string]: unknown;
567
- };
568
450
  content: {
569
451
  "application/json": {
570
452
  /** @example false */
@@ -578,9 +460,6 @@ export interface paths {
578
460
  };
579
461
  /** @description Order not found */
580
462
  404: {
581
- headers: {
582
- [name: string]: unknown;
583
- };
584
463
  content: {
585
464
  "application/json": {
586
465
  /** @example false */
@@ -594,34 +473,13 @@ export interface paths {
594
473
  };
595
474
  };
596
475
  };
597
- put?: never;
598
- post?: never;
599
- delete?: never;
600
- options?: never;
601
- head?: never;
602
- patch?: never;
603
- trace?: never;
604
476
  };
605
477
  "/orders/quote": {
606
- parameters: {
607
- query?: never;
608
- header?: never;
609
- path?: never;
610
- cookie?: never;
611
- };
612
- get?: never;
613
- put?: never;
614
478
  /**
615
479
  * Get anyspend quote
616
480
  * @description Retrieves a quote to swap, execute contract, or participate in HypeDuel
617
481
  */
618
482
  post: {
619
- parameters: {
620
- query?: never;
621
- header?: never;
622
- path?: never;
623
- cookie?: never;
624
- };
625
483
  requestBody: {
626
484
  content: {
627
485
  "application/json": {
@@ -815,9 +673,6 @@ export interface paths {
815
673
  responses: {
816
674
  /** @description Quote retrieved successfully */
817
675
  200: {
818
- headers: {
819
- [name: string]: unknown;
820
- };
821
676
  content: {
822
677
  "application/json": {
823
678
  /** @example true */
@@ -988,6 +843,8 @@ export interface paths {
988
843
  * @example 1.5
989
844
  */
990
845
  pointsMultiplier?: number;
846
+ /** @description Fee structure including all applicable fees (Stripe and AnySpend) */
847
+ fee: components["schemas"]["Fee"];
991
848
  };
992
849
  /** @example 200 */
993
850
  statusCode: number;
@@ -996,9 +853,6 @@ export interface paths {
996
853
  };
997
854
  /** @description Bad request */
998
855
  400: {
999
- headers: {
1000
- [name: string]: unknown;
1001
- };
1002
856
  content: {
1003
857
  "application/json": {
1004
858
  /** @example false */
@@ -1012,19 +866,8 @@ export interface paths {
1012
866
  };
1013
867
  };
1014
868
  };
1015
- delete?: never;
1016
- options?: never;
1017
- head?: never;
1018
- patch?: never;
1019
- trace?: never;
1020
869
  };
1021
870
  "/stripe/clientSecret": {
1022
- parameters: {
1023
- query?: never;
1024
- header?: never;
1025
- path?: never;
1026
- cookie?: never;
1027
- };
1028
871
  /**
1029
872
  * Get Stripe client secret
1030
873
  * @description Retrieves a Stripe client secret for payment processing using a payment intent ID
@@ -1038,17 +881,10 @@ export interface paths {
1038
881
  */
1039
882
  paymentIntentId: string;
1040
883
  };
1041
- header?: never;
1042
- path?: never;
1043
- cookie?: never;
1044
884
  };
1045
- requestBody?: never;
1046
885
  responses: {
1047
886
  /** @description Client secret retrieved successfully */
1048
887
  200: {
1049
- headers: {
1050
- [name: string]: unknown;
1051
- };
1052
888
  content: {
1053
889
  "application/json": {
1054
890
  /** @example true */
@@ -1067,9 +903,6 @@ export interface paths {
1067
903
  };
1068
904
  /** @description Bad request - PaymentIntentId is required or invalid */
1069
905
  400: {
1070
- headers: {
1071
- [name: string]: unknown;
1072
- };
1073
906
  content: {
1074
907
  "application/json": {
1075
908
  /** @example false */
@@ -1083,13 +916,6 @@ export interface paths {
1083
916
  };
1084
917
  };
1085
918
  };
1086
- put?: never;
1087
- post?: never;
1088
- delete?: never;
1089
- options?: never;
1090
- head?: never;
1091
- patch?: never;
1092
- trace?: never;
1093
919
  };
1094
920
  }
1095
921
  export type webhooks = Record<string, never>;
@@ -1470,6 +1296,8 @@ export interface components {
1470
1296
  expiredAt: number;
1471
1297
  /** @description Timestamp when the order was filled/executed */
1472
1298
  filledAt: number | null;
1299
+ /** @description Timestamp when the deposit was received */
1300
+ receivedDepositAt: number | null;
1473
1301
  /**
1474
1302
  * @description Optional creator address
1475
1303
  * @example 0xb34facb90a200251318e8841c05102366f2158cf
@@ -1494,6 +1322,8 @@ export interface components {
1494
1322
  */
1495
1323
  actualDstAmount: string | null;
1496
1324
  } | null;
1325
+ /** @description Fee structure for the order including Stripe and AnySpend fees */
1326
+ fee?: Omit<components["schemas"]["Fee"], "type"> | null;
1497
1327
  };
1498
1328
  SwapOrder: components["schemas"]["BaseOrder"] & {
1499
1329
  /**
@@ -2041,6 +1871,119 @@ export interface components {
2041
1871
  */
2042
1872
  formattedFeeUsd: string;
2043
1873
  };
1874
+ Fee: {
1875
+ /**
1876
+ * @description Fee type identifier
1877
+ * @enum {string}
1878
+ */
1879
+ type: "standard_fee";
1880
+ /**
1881
+ * @description Fee version number
1882
+ * @example 1
1883
+ */
1884
+ feeVersion: number;
1885
+ /**
1886
+ * @description Token contract address used to check balance for whale discount (B3 token)
1887
+ * @example 0xb3b32f9f8827d4634fe7d973fa1034ec9fddb3b3
1888
+ */
1889
+ tokenToCheckBalance: string;
1890
+ /**
1891
+ * @description Recipient's B3 token balance
1892
+ * @example 302843673392800000000000
1893
+ */
1894
+ recipientBalance: string;
1895
+ /**
1896
+ * @description AnySpend base fee in basis points before discounts
1897
+ * @example 80
1898
+ */
1899
+ anyspendFeeBps: number;
1900
+ /**
1901
+ * @description Whale discount in basis points based on B3 balance
1902
+ * @example 5000
1903
+ */
1904
+ anyspendWhaleDiscountBps: number;
1905
+ /**
1906
+ * @description Partner discount in basis points
1907
+ * @example 0
1908
+ */
1909
+ anyspendPartnerDiscountBps: number;
1910
+ /**
1911
+ * @description Final fee in basis points after all discounts applied
1912
+ * @example 40
1913
+ */
1914
+ finalFeeBps: number;
1915
+ } | {
1916
+ /**
1917
+ * @description Fee type identifier
1918
+ * @enum {string}
1919
+ */
1920
+ type: "stripeweb2_fee";
1921
+ /**
1922
+ * @description Fee version number
1923
+ * @example 1
1924
+ */
1925
+ feeVersion: number;
1926
+ /**
1927
+ * @description Token contract address used to check balance for whale discount (B3 token)
1928
+ * @example 0xb3b32f9f8827d4634fe7d973fa1034ec9fddb3b3
1929
+ */
1930
+ tokenToCheckBalance: string;
1931
+ /**
1932
+ * @description Recipient's B3 token balance
1933
+ * @example 302843673392800000000000
1934
+ */
1935
+ recipientBalance: string;
1936
+ /**
1937
+ * @description Stripe fee percentage in basis points (5.4%)
1938
+ * @example 540
1939
+ */
1940
+ stripeFeeBps: number;
1941
+ /**
1942
+ * @description Stripe fixed fee in USD
1943
+ * @example 0.3
1944
+ */
1945
+ stripeFeeUsd: number;
1946
+ /**
1947
+ * @description AnySpend base fee in basis points before discounts
1948
+ * @example 80
1949
+ */
1950
+ anyspendFeeBps: number;
1951
+ /**
1952
+ * @description AnySpend fixed fee in USD before discounts
1953
+ * @example 0
1954
+ */
1955
+ anyspendFeeUsd: number;
1956
+ /**
1957
+ * @description Whale discount in basis points based on B3 balance
1958
+ * @example 5000
1959
+ */
1960
+ anyspendWhaleDiscountBps: number;
1961
+ /**
1962
+ * @description Partner discount in basis points
1963
+ * @example 0
1964
+ */
1965
+ anyspendPartnerDiscountBps: number;
1966
+ /**
1967
+ * @description Final combined fee percentage in basis points after all discounts
1968
+ * @example 580
1969
+ */
1970
+ finalFeeBps: number;
1971
+ /**
1972
+ * @description Final combined fixed fee in USD after all discounts
1973
+ * @example 0.3
1974
+ */
1975
+ finalFeeUsd: number;
1976
+ /**
1977
+ * @description Original amount before fees in USDC units (6 decimals)
1978
+ * @example 10000000
1979
+ */
1980
+ originalAmount: string;
1981
+ /**
1982
+ * @description Final amount after applying all fees in USDC units (6 decimals)
1983
+ * @example 9120000
1984
+ */
1985
+ finalAmount: string;
1986
+ };
2044
1987
  };
2045
1988
  responses: never;
2046
1989
  parameters: never;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@b3dotfun/sdk",
3
- "version": "0.0.49-alpha.0",
3
+ "version": "0.0.49-alpha.1",
4
4
  "source": "src/index.ts",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "react-native": "./dist/cjs/index.native.js",
@@ -40,6 +40,7 @@ import { OrderHistory } from "./common/OrderHistory";
40
40
  import { PanelOnramp } from "./common/PanelOnramp";
41
41
  import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
42
42
  import { PointsDetailPanel } from "./common/PointsDetailPanel";
43
+ import { FeeDetailPanel } from "./common/FeeDetailPanel";
43
44
  import { RecipientSelection } from "./common/RecipientSelection";
44
45
  import { TabSection } from "./common/TabSection";
45
46
 
@@ -60,6 +61,7 @@ export enum PanelView {
60
61
  CRYPTO_PAYMENT_METHOD,
61
62
  FIAT_PAYMENT_METHOD,
62
63
  POINTS_DETAIL,
64
+ FEE_DETAIL,
63
65
  }
64
66
 
65
67
  const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -953,11 +955,13 @@ function AnySpendInner({
953
955
  setSelectedSrcToken={setSelectedSrcToken}
954
956
  srcAmount={srcAmount}
955
957
  setSrcAmount={setSrcAmount}
958
+ isSrcInputDirty={isSrcInputDirty}
956
959
  setIsSrcInputDirty={setIsSrcInputDirty}
957
960
  selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
958
961
  onSelectCryptoPaymentMethod={() => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward")}
959
962
  anyspendQuote={anyspendQuote}
960
963
  onTokenSelect={onTokenSelect}
964
+ onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
961
965
  />
962
966
  ) : (
963
967
  <motion.div
@@ -989,6 +993,7 @@ function AnySpendInner({
989
993
  hideDstToken={isBuyMode}
990
994
  anyspendQuote={anyspendQuote}
991
995
  onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
996
+ onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
992
997
  customUsdInputValues={customUsdInputValues}
993
998
  />
994
999
  </motion.div>
@@ -1044,12 +1049,14 @@ function AnySpendInner({
1044
1049
  selectedDstChainId={selectedDstChainId}
1045
1050
  setSelectedDstChainId={setSelectedDstChainId}
1046
1051
  setSelectedDstToken={setSelectedDstToken}
1052
+ isSrcInputDirty={isSrcInputDirty}
1047
1053
  onChangeDstAmount={value => {
1048
1054
  setIsSrcInputDirty(false);
1049
1055
  setDstAmount(value);
1050
1056
  }}
1051
1057
  anyspendQuote={anyspendQuote}
1052
1058
  onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
1059
+ onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
1053
1060
  />
1054
1061
  )}
1055
1062
  </div>
@@ -1166,6 +1173,16 @@ function AnySpendInner({
1166
1173
  <PointsDetailPanel pointsAmount={anyspendQuote?.data?.pointsAmount || 0} onBack={navigateBack} />
1167
1174
  );
1168
1175
 
1176
+ const feeDetailView = anyspendQuote?.data?.fee ? (
1177
+ <FeeDetailPanel
1178
+ fee={anyspendQuote.data.fee}
1179
+ transactionAmountUsd={
1180
+ activeTab === "crypto" ? Number(anyspendQuote.data.currencyIn?.amountUsd) : parseFloat(srcAmountOnRamp)
1181
+ }
1182
+ onBack={navigateBack}
1183
+ />
1184
+ ) : null;
1185
+
1169
1186
  // Add tabs to the main component when no order is loaded
1170
1187
  return (
1171
1188
  <StyleRoot>
@@ -1231,6 +1248,9 @@ function AnySpendInner({
1231
1248
  <div key="points-detail-view" className={cn(mode === "page" && "p-6")}>
1232
1249
  {pointsDetailView}
1233
1250
  </div>,
1251
+ <div key="fee-detail-view" className={cn(mode === "page" && "p-6")}>
1252
+ {feeDetailView}
1253
+ </div>,
1234
1254
  ]}
1235
1255
  </TransitionPanel>
1236
1256
  </div>