@b3dotfun/sdk 0.0.44-alpha.0 → 0.0.44-alpha.2

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 (42) hide show
  1. package/dist/cjs/anyspend/react/components/AnySpend.js +12 -13
  2. package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +13 -14
  3. package/dist/cjs/anyspend/react/components/common/OrderDetails.js +1 -6
  4. package/dist/cjs/anyspend/react/components/common/OrderHistory.js +2 -2
  5. package/dist/cjs/anyspend/react/components/common/OrderHistoryItem.js +7 -9
  6. package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +1 -0
  7. package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +3 -3
  8. package/dist/cjs/anyspend/react/hooks/useAnyspendOrderAndTransactions.d.ts +2 -0
  9. package/dist/cjs/anyspend/react/hooks/useAnyspendOrderHistory.d.ts +36 -0
  10. package/dist/cjs/anyspend/types/api.d.ts +189 -10
  11. package/dist/cjs/anyspend/utils/orderPayload.js +0 -4
  12. package/dist/esm/anyspend/react/components/AnySpend.js +13 -14
  13. package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +14 -15
  14. package/dist/esm/anyspend/react/components/common/OrderDetails.js +1 -6
  15. package/dist/esm/anyspend/react/components/common/OrderHistory.js +2 -2
  16. package/dist/esm/anyspend/react/components/common/OrderHistoryItem.js +9 -11
  17. package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +1 -0
  18. package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +3 -3
  19. package/dist/esm/anyspend/react/hooks/useAnyspendOrderAndTransactions.d.ts +2 -0
  20. package/dist/esm/anyspend/react/hooks/useAnyspendOrderHistory.d.ts +36 -0
  21. package/dist/esm/anyspend/types/api.d.ts +189 -10
  22. package/dist/esm/anyspend/utils/orderPayload.js +0 -4
  23. package/dist/styles/index.css +1 -1
  24. package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +1 -0
  25. package/dist/types/anyspend/react/hooks/useAnyspendOrderAndTransactions.d.ts +2 -0
  26. package/dist/types/anyspend/react/hooks/useAnyspendOrderHistory.d.ts +36 -0
  27. package/dist/types/anyspend/types/api.d.ts +189 -10
  28. package/package.json +2 -1
  29. package/src/anyspend/react/components/AnySpend.tsx +20 -18
  30. package/src/anyspend/react/components/AnyspendDepositHype.tsx +21 -20
  31. package/src/anyspend/react/components/common/OrderDetails.tsx +1 -7
  32. package/src/anyspend/react/components/common/OrderHistory.tsx +11 -11
  33. package/src/anyspend/react/components/common/OrderHistoryItem.tsx +105 -137
  34. package/src/anyspend/react/hooks/useAnyspendFlow.ts +3 -3
  35. package/src/anyspend/types/api.ts +189 -10
  36. package/src/anyspend/utils/orderPayload.ts +0 -4
  37. package/dist/cjs/anyspend/react/components/common/ErrorSection.d.ts +0 -6
  38. package/dist/cjs/anyspend/react/components/common/ErrorSection.js +0 -12
  39. package/dist/esm/anyspend/react/components/common/ErrorSection.d.ts +0 -6
  40. package/dist/esm/anyspend/react/components/common/ErrorSection.js +0 -9
  41. package/dist/types/anyspend/react/components/common/ErrorSection.d.ts +0 -6
  42. package/src/anyspend/react/components/common/ErrorSection.tsx +0 -21
@@ -4,6 +4,12 @@
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
+ };
7
13
  /**
8
14
  * Get tokens for a chain
9
15
  * @description Retrieves available tokens for a specific blockchain
@@ -19,6 +25,7 @@ export interface paths {
19
25
  /** @description Maximum number of tokens to return */
20
26
  limit?: number;
21
27
  };
28
+ header?: never;
22
29
  path: {
23
30
  /**
24
31
  * @description Blockchain chain ID
@@ -26,10 +33,15 @@ export interface paths {
26
33
  */
27
34
  chainId: number;
28
35
  };
36
+ cookie?: never;
29
37
  };
38
+ requestBody?: never;
30
39
  responses: {
31
40
  /** @description Tokens retrieved successfully */
32
41
  200: {
42
+ headers: {
43
+ [name: string]: unknown;
44
+ };
33
45
  content: {
34
46
  "application/json": {
35
47
  /** @example true */
@@ -60,6 +72,9 @@ export interface paths {
60
72
  };
61
73
  /** @description Bad request */
62
74
  400: {
75
+ headers: {
76
+ [name: string]: unknown;
77
+ };
63
78
  content: {
64
79
  "application/json": {
65
80
  /** @example false */
@@ -73,8 +88,21 @@ export interface paths {
73
88
  };
74
89
  };
75
90
  };
91
+ put?: never;
92
+ post?: never;
93
+ delete?: never;
94
+ options?: never;
95
+ head?: never;
96
+ patch?: never;
97
+ trace?: never;
76
98
  };
77
99
  "/onramp/coinbase/options": {
100
+ parameters: {
101
+ query?: never;
102
+ header?: never;
103
+ path?: never;
104
+ cookie?: never;
105
+ };
78
106
  /**
79
107
  * Get Coinbase onramp options
80
108
  * @description Retrieves available Coinbase onramp configuration options.
@@ -107,10 +135,17 @@ export interface paths {
107
135
  */
108
136
  chainIds?: string[];
109
137
  };
138
+ header?: never;
139
+ path?: never;
140
+ cookie?: never;
110
141
  };
142
+ requestBody?: never;
111
143
  responses: {
112
144
  /** @description Coinbase options retrieved successfully */
113
145
  200: {
146
+ headers: {
147
+ [name: string]: unknown;
148
+ };
114
149
  content: {
115
150
  "application/json": {
116
151
  /** @example true */
@@ -213,6 +248,9 @@ export interface paths {
213
248
  };
214
249
  /** @description Bad request */
215
250
  400: {
251
+ headers: {
252
+ [name: string]: unknown;
253
+ };
216
254
  content: {
217
255
  "application/json": {
218
256
  /** @example false */
@@ -226,8 +264,21 @@ export interface paths {
226
264
  };
227
265
  };
228
266
  };
267
+ put?: never;
268
+ post?: never;
269
+ delete?: never;
270
+ options?: never;
271
+ head?: never;
272
+ patch?: never;
273
+ trace?: never;
229
274
  };
230
275
  "/onramp/stripe/supported": {
276
+ parameters: {
277
+ query?: never;
278
+ header?: never;
279
+ path?: never;
280
+ cookie?: never;
281
+ };
231
282
  /**
232
283
  * Check Stripe support
233
284
  * @description Checks if Stripe onramp and Stripe Web2 are supported based on IP address location and optional transaction amount
@@ -241,10 +292,17 @@ export interface paths {
241
292
  */
242
293
  usdAmount?: string;
243
294
  };
295
+ header?: never;
296
+ path?: never;
297
+ cookie?: never;
244
298
  };
299
+ requestBody?: never;
245
300
  responses: {
246
301
  /** @description Stripe support status retrieved successfully */
247
302
  200: {
303
+ headers: {
304
+ [name: string]: unknown;
305
+ };
248
306
  content: {
249
307
  "application/json": {
250
308
  /** @example true */
@@ -267,6 +325,9 @@ export interface paths {
267
325
  };
268
326
  /** @description Bad request */
269
327
  400: {
328
+ headers: {
329
+ [name: string]: unknown;
330
+ };
270
331
  content: {
271
332
  "application/json": {
272
333
  /** @example false */
@@ -280,8 +341,21 @@ export interface paths {
280
341
  };
281
342
  };
282
343
  };
344
+ put?: never;
345
+ post?: never;
346
+ delete?: never;
347
+ options?: never;
348
+ head?: never;
349
+ patch?: never;
350
+ trace?: never;
283
351
  };
284
352
  "/orders": {
353
+ parameters: {
354
+ query?: never;
355
+ header?: never;
356
+ path?: never;
357
+ cookie?: never;
358
+ };
285
359
  /**
286
360
  * Get orders by creator
287
361
  * @description Retrieves all orders created by a specific address
@@ -305,10 +379,17 @@ export interface paths {
305
379
  */
306
380
  offset?: string;
307
381
  };
382
+ header?: never;
383
+ path?: never;
384
+ cookie?: never;
308
385
  };
386
+ requestBody?: never;
309
387
  responses: {
310
388
  /** @description Orders retrieved successfully */
311
389
  200: {
390
+ headers: {
391
+ [name: string]: unknown;
392
+ };
312
393
  content: {
313
394
  "application/json": {
314
395
  /** @example true */
@@ -324,6 +405,9 @@ export interface paths {
324
405
  };
325
406
  /** @description Bad request */
326
407
  400: {
408
+ headers: {
409
+ [name: string]: unknown;
410
+ };
327
411
  content: {
328
412
  "application/json": {
329
413
  /** @example false */
@@ -337,11 +421,18 @@ export interface paths {
337
421
  };
338
422
  };
339
423
  };
424
+ put?: never;
340
425
  /**
341
426
  * Create a new order
342
427
  * @description Creates a new order for token transactions across chains
343
428
  */
344
429
  post: {
430
+ parameters: {
431
+ query?: never;
432
+ header?: never;
433
+ path?: never;
434
+ cookie?: never;
435
+ };
345
436
  requestBody: {
346
437
  content: {
347
438
  "application/json": components["schemas"]["OrderRequest"];
@@ -350,6 +441,9 @@ export interface paths {
350
441
  responses: {
351
442
  /** @description Order created successfully */
352
443
  200: {
444
+ headers: {
445
+ [name: string]: unknown;
446
+ };
353
447
  content: {
354
448
  "application/json": {
355
449
  /** @example true */
@@ -364,6 +458,9 @@ export interface paths {
364
458
  };
365
459
  /** @description Bad request */
366
460
  400: {
461
+ headers: {
462
+ [name: string]: unknown;
463
+ };
367
464
  content: {
368
465
  "application/json": {
369
466
  /** @example false */
@@ -377,14 +474,27 @@ export interface paths {
377
474
  };
378
475
  };
379
476
  };
477
+ delete?: never;
478
+ options?: never;
479
+ head?: never;
480
+ patch?: never;
481
+ trace?: never;
380
482
  };
381
483
  "/orders/{orderId}": {
484
+ parameters: {
485
+ query?: never;
486
+ header?: never;
487
+ path?: never;
488
+ cookie?: never;
489
+ };
382
490
  /**
383
491
  * Get order and transactions
384
492
  * @description Retrieves order details along with associated transactions
385
493
  */
386
494
  get: {
387
495
  parameters: {
496
+ query?: never;
497
+ header?: never;
388
498
  path: {
389
499
  /**
390
500
  * @description Unique order identifier
@@ -392,10 +502,15 @@ export interface paths {
392
502
  */
393
503
  orderId: string;
394
504
  };
505
+ cookie?: never;
395
506
  };
507
+ requestBody?: never;
396
508
  responses: {
397
509
  /** @description Order and transactions retrieved successfully */
398
510
  200: {
511
+ headers: {
512
+ [name: string]: unknown;
513
+ };
399
514
  content: {
400
515
  "application/json": {
401
516
  /** @example true */
@@ -434,6 +549,11 @@ export interface paths {
434
549
  executeTx: components["schemas"]["ExecuteTx"] | null;
435
550
  /** @description Refund transactions if order failed */
436
551
  refundTxs: components["schemas"]["RefundTx"][];
552
+ /**
553
+ * @description Points awarded for this order (only present when order status is executed)
554
+ * @example 100
555
+ */
556
+ points: number | null;
437
557
  };
438
558
  /** @example 200 */
439
559
  statusCode: number;
@@ -442,6 +562,9 @@ export interface paths {
442
562
  };
443
563
  /** @description Bad request */
444
564
  400: {
565
+ headers: {
566
+ [name: string]: unknown;
567
+ };
445
568
  content: {
446
569
  "application/json": {
447
570
  /** @example false */
@@ -455,6 +578,9 @@ export interface paths {
455
578
  };
456
579
  /** @description Order not found */
457
580
  404: {
581
+ headers: {
582
+ [name: string]: unknown;
583
+ };
458
584
  content: {
459
585
  "application/json": {
460
586
  /** @example false */
@@ -468,13 +594,34 @@ export interface paths {
468
594
  };
469
595
  };
470
596
  };
597
+ put?: never;
598
+ post?: never;
599
+ delete?: never;
600
+ options?: never;
601
+ head?: never;
602
+ patch?: never;
603
+ trace?: never;
471
604
  };
472
605
  "/orders/quote": {
606
+ parameters: {
607
+ query?: never;
608
+ header?: never;
609
+ path?: never;
610
+ cookie?: never;
611
+ };
612
+ get?: never;
613
+ put?: never;
473
614
  /**
474
615
  * Get anyspend quote
475
616
  * @description Retrieves a quote to swap, execute contract, or participate in HypeDuel
476
617
  */
477
618
  post: {
619
+ parameters: {
620
+ query?: never;
621
+ header?: never;
622
+ path?: never;
623
+ cookie?: never;
624
+ };
478
625
  requestBody: {
479
626
  content: {
480
627
  "application/json": {
@@ -668,6 +815,9 @@ export interface paths {
668
815
  responses: {
669
816
  /** @description Quote retrieved successfully */
670
817
  200: {
818
+ headers: {
819
+ [name: string]: unknown;
820
+ };
671
821
  content: {
672
822
  "application/json": {
673
823
  /** @example true */
@@ -846,6 +996,9 @@ export interface paths {
846
996
  };
847
997
  /** @description Bad request */
848
998
  400: {
999
+ headers: {
1000
+ [name: string]: unknown;
1001
+ };
849
1002
  content: {
850
1003
  "application/json": {
851
1004
  /** @example false */
@@ -859,8 +1012,19 @@ export interface paths {
859
1012
  };
860
1013
  };
861
1014
  };
1015
+ delete?: never;
1016
+ options?: never;
1017
+ head?: never;
1018
+ patch?: never;
1019
+ trace?: never;
862
1020
  };
863
1021
  "/stripe/clientSecret": {
1022
+ parameters: {
1023
+ query?: never;
1024
+ header?: never;
1025
+ path?: never;
1026
+ cookie?: never;
1027
+ };
864
1028
  /**
865
1029
  * Get Stripe client secret
866
1030
  * @description Retrieves a Stripe client secret for payment processing using a payment intent ID
@@ -874,10 +1038,17 @@ export interface paths {
874
1038
  */
875
1039
  paymentIntentId: string;
876
1040
  };
1041
+ header?: never;
1042
+ path?: never;
1043
+ cookie?: never;
877
1044
  };
1045
+ requestBody?: never;
878
1046
  responses: {
879
1047
  /** @description Client secret retrieved successfully */
880
1048
  200: {
1049
+ headers: {
1050
+ [name: string]: unknown;
1051
+ };
881
1052
  content: {
882
1053
  "application/json": {
883
1054
  /** @example true */
@@ -896,6 +1067,9 @@ export interface paths {
896
1067
  };
897
1068
  /** @description Bad request - PaymentIntentId is required or invalid */
898
1069
  400: {
1070
+ headers: {
1071
+ [name: string]: unknown;
1072
+ };
899
1073
  content: {
900
1074
  "application/json": {
901
1075
  /** @example false */
@@ -909,6 +1083,13 @@ export interface paths {
909
1083
  };
910
1084
  };
911
1085
  };
1086
+ put?: never;
1087
+ post?: never;
1088
+ delete?: never;
1089
+ options?: never;
1090
+ head?: never;
1091
+ patch?: never;
1092
+ trace?: never;
912
1093
  };
913
1094
  }
914
1095
  export type webhooks = Record<string, never>;
@@ -1112,11 +1293,6 @@ export interface components {
1112
1293
  * @example 990000
1113
1294
  */
1114
1295
  expectedDstAmount: string;
1115
- /**
1116
- * @description Actual received amount (null for new orders)
1117
- * @example 990000
1118
- */
1119
- actualDstAmount: string | null;
1120
1296
  };
1121
1297
  /** @description HypeDuel-specific payload */
1122
1298
  HypeDuelPayload: {
@@ -1125,11 +1301,6 @@ export interface components {
1125
1301
  * @example 990000
1126
1302
  */
1127
1303
  expectedDstAmount: string;
1128
- /**
1129
- * @description Actual received amount (null for new orders)
1130
- * @example 990000
1131
- */
1132
- actualDstAmount: string | null;
1133
1304
  };
1134
1305
  /** @description Custom execution payload */
1135
1306
  CustomPayload: {
@@ -1315,6 +1486,14 @@ export interface components {
1315
1486
  * @example pi_3Rko0sJnoDg53PsP0PDLsHkR
1316
1487
  */
1317
1488
  stripePaymentIntentId: string | null;
1489
+ /** @description Settlement information for executed orders */
1490
+ settlement: {
1491
+ /**
1492
+ * @description Actual received amount after execution
1493
+ * @example 990000
1494
+ */
1495
+ actualDstAmount: string | null;
1496
+ } | null;
1318
1497
  };
1319
1498
  SwapOrder: components["schemas"]["BaseOrder"] & {
1320
1499
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@b3dotfun/sdk",
3
- "version": "0.0.44-alpha.0",
3
+ "version": "0.0.44-alpha.2",
4
4
  "source": "src/index.ts",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "react-native": "./dist/cjs/index.native.js",
@@ -390,6 +390,7 @@
390
390
  "release:alpha": "pnpm version prerelease --preid alpha && git push --follow-tags && pnpm publish --tag alpha --no-git-checks",
391
391
  "typecheck": "tsc --noEmit",
392
392
  "generate:thirdweb": "npx @hey-api/openapi-ts --file src/thirdweb/openapi-ts.config.ts --input src/thirdweb/insight-service.json",
393
+ "generate:anyspend": "npx openapi-typescript https://mainnet.anyspend.com/openapi.json -o src/anyspend/types/api.ts",
393
394
  "lint": "eslint 'src/**/*.{ts,tsx}'",
394
395
  "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
395
396
  "test": "vitest run",
@@ -23,7 +23,7 @@ import {
23
23
  import { cn } from "@b3dotfun/sdk/shared/utils/cn";
24
24
  import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
25
25
  import invariant from "invariant";
26
- import { ArrowDown, HistoryIcon } from "lucide-react";
26
+ import { ArrowDown, HistoryIcon, Loader2 } from "lucide-react";
27
27
  import { motion } from "motion/react";
28
28
  import { useCallback, useEffect, useMemo, useRef, useState } from "react";
29
29
  import { toast } from "sonner";
@@ -34,7 +34,6 @@ import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFing
34
34
  import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
35
35
  import { CryptoPaySection } from "./common/CryptoPaySection";
36
36
  import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
37
- import { ErrorSection } from "./common/ErrorSection";
38
37
  import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
39
38
  import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
40
39
  import { OrderHistory } from "./common/OrderHistory";
@@ -609,40 +608,42 @@ function AnySpendInner({
609
608
  });
610
609
 
611
610
  // Determine button state and text
612
- const btnInfo: { text: string; disable: boolean; error: boolean } = useMemo(() => {
613
- if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false };
614
- if (isLoadingAnyspendQuote) return { text: "Loading...", disable: true, error: false };
615
- if (!recipientAddress) return { text: "Select recipient", disable: false, error: false };
616
- if (isCreatingOrder || isCreatingOnrampOrder) return { text: "Creating order...", disable: true, error: false };
617
- if (!anyspendQuote || !anyspendQuote.success) return { text: "Get rate error", disable: true, error: true };
611
+ const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
612
+ if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false, loading: false };
613
+ if (isLoadingAnyspendQuote) return { text: "Loading quote...", disable: true, error: false, loading: true };
614
+ if (!recipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
615
+ if (isCreatingOrder || isCreatingOnrampOrder)
616
+ return { text: "Creating order...", disable: true, error: false, loading: true };
617
+ if (!anyspendQuote || !anyspendQuote.success)
618
+ return { text: "No quote found", disable: true, error: false, loading: false };
618
619
 
619
620
  if (activeTab === "crypto") {
620
621
  // If no payment method selected, show "Choose payment method"
621
622
  if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
622
- return { text: "Choose payment method", disable: false, error: false };
623
+ return { text: "Choose payment method", disable: false, error: false, loading: false };
623
624
  }
624
625
  // If payment method selected, show appropriate action
625
626
  if (
626
627
  selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
627
628
  selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
628
629
  ) {
629
- return { text: "Swap", disable: false, error: false };
630
+ return { text: "Swap", disable: false, error: false, loading: false };
630
631
  }
631
632
  if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
632
- return { text: "Continue to payment", disable: false, error: false };
633
+ return { text: "Continue to payment", disable: false, error: false, loading: false };
633
634
  }
634
635
  }
635
636
 
636
637
  if (activeTab === "fiat") {
637
638
  // If no fiat payment method selected, show "Select payment method"
638
639
  if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
639
- return { text: "Select payment method", disable: false, error: false };
640
+ return { text: "Select payment method", disable: false, error: false, loading: false };
640
641
  }
641
642
  // If payment method is selected, show "Buy"
642
- return { text: "Buy", disable: false, error: false };
643
+ return { text: "Buy", disable: false, error: false, loading: false };
643
644
  }
644
645
 
645
- return { text: "Buy", disable: false, error: false };
646
+ return { text: "Buy", disable: false, error: false, loading: false };
646
647
  }, [
647
648
  activeInputAmountInWei,
648
649
  isLoadingAnyspendQuote,
@@ -1052,15 +1053,13 @@ function AnySpendInner({
1052
1053
  />
1053
1054
  )}
1054
1055
  </div>
1055
- {/* Error message section */}
1056
- <ErrorSection error={getAnyspendQuoteError} />
1057
1056
 
1058
1057
  {/* Main button section */}
1059
1058
  <motion.div
1060
1059
  initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
1061
1060
  animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
1062
1061
  transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
1063
- className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0")}
1062
+ className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2")}
1064
1063
  >
1065
1064
  <ShinyButton
1066
1065
  accentColor={"hsl(var(--as-brand))"}
@@ -1072,7 +1071,10 @@ function AnySpendInner({
1072
1071
  )}
1073
1072
  textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
1074
1073
  >
1075
- {btnInfo.text}
1074
+ <div className="flex items-center justify-center gap-2">
1075
+ {btnInfo.loading && <Loader2 className="h-4 w-4 animate-spin" />}
1076
+ {btnInfo.text}
1077
+ </div>
1076
1078
  </ShinyButton>
1077
1079
 
1078
1080
  {!hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (
@@ -12,13 +12,12 @@ import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFing
12
12
  import { CryptoPaySection } from "./common/CryptoPaySection";
13
13
  import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
14
14
  import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
15
- import { ErrorSection } from "./common/ErrorSection";
16
15
  import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
17
16
  import { OrderDetails } from "./common/OrderDetails";
18
17
  import { PointsDetailPanel } from "./common/PointsDetailPanel";
19
18
  import { RecipientSelection } from "./common/RecipientSelection";
20
19
 
21
- import { ArrowDown } from "lucide-react";
20
+ import { ArrowDown, Loader2 } from "lucide-react";
22
21
  import { PanelOnramp } from "./common/PanelOnramp";
23
22
 
24
23
  const SLIPPAGE_PERCENT = 3;
@@ -114,13 +113,15 @@ function AnySpendDepositHypeInner({
114
113
  });
115
114
 
116
115
  // Button state logic
117
- const btnInfo: { text: string; disable: boolean; error: boolean } = useMemo(() => {
118
- if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false };
119
- if (isLoadingAnyspendQuote) return { text: "Loading quote...", disable: true, error: false };
120
- if (isCreatingOrder || isCreatingOnrampOrder) return { text: "Creating order...", disable: true, error: false };
121
- if (!selectedRecipientAddress) return { text: "Select recipient", disable: false, error: false };
122
- if (!anyspendQuote || !anyspendQuote.success) return { text: "Get quote error", disable: true, error: true };
123
- if (!dstAmount) return { text: "No quote available", disable: true, error: true };
116
+ const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
117
+ if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false, loading: false };
118
+ if (isLoadingAnyspendQuote) return { text: "Loading quote...", disable: true, error: false, loading: true };
119
+ if (isCreatingOrder || isCreatingOnrampOrder)
120
+ return { text: "Creating order...", disable: true, error: false, loading: true };
121
+ if (!selectedRecipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
122
+ if (!anyspendQuote || !anyspendQuote.success)
123
+ return { text: "Get quote error", disable: true, error: true, loading: false };
124
+ if (!dstAmount) return { text: "No quote available", disable: true, error: true, loading: false };
124
125
 
125
126
  // Check minimum deposit amount (10 HYPE)
126
127
  // Use the raw amount from the quote instead of the formatted display string
@@ -130,25 +131,25 @@ function AnySpendDepositHypeInner({
130
131
  const actualAmount = parseFloat(rawAmountInWei) / Math.pow(10, decimals);
131
132
 
132
133
  if (actualAmount < 10) {
133
- return { text: "Minimum 10 HYPE deposit", disable: true, error: true };
134
+ return { text: "Minimum 10 HYPE deposit", disable: true, error: true, loading: false };
134
135
  }
135
136
  }
136
137
 
137
138
  if (paymentType === "crypto") {
138
139
  if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
139
- return { text: "Choose payment method", disable: false, error: false };
140
+ return { text: "Choose payment method", disable: false, error: false, loading: false };
140
141
  }
141
- return { text: "Continue to deposit", disable: false, error: false };
142
+ return { text: "Continue to deposit", disable: false, error: false, loading: false };
142
143
  }
143
144
 
144
145
  if (paymentType === "fiat") {
145
146
  if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
146
- return { text: "Select payment method", disable: false, error: false };
147
+ return { text: "Select payment method", disable: false, error: false, loading: false };
147
148
  }
148
- return { text: "Buy", disable: false, error: false };
149
+ return { text: "Buy", disable: false, error: false, loading: false };
149
150
  }
150
151
 
151
- return { text: "Continue to deposit", disable: false, error: false };
152
+ return { text: "Continue to deposit", disable: false, error: false, loading: false };
152
153
  }, [
153
154
  activeInputAmountInWei,
154
155
  isLoadingAnyspendQuote,
@@ -283,15 +284,12 @@ function AnySpendDepositHypeInner({
283
284
  </div>
284
285
  </div>
285
286
 
286
- {/* Error message section */}
287
- <ErrorSection error={getAnyspendQuoteError} />
288
-
289
287
  {/* Main button section */}
290
288
  <motion.div
291
289
  initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
292
290
  animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
293
291
  transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
294
- className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0")}
292
+ className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2")}
295
293
  >
296
294
  <ShinyButton
297
295
  accentColor={"hsl(var(--as-brand))"}
@@ -303,7 +301,10 @@ function AnySpendDepositHypeInner({
303
301
  )}
304
302
  textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
305
303
  >
306
- {btnInfo.text}
304
+ <div className="flex items-center justify-center gap-2">
305
+ {btnInfo.loading && <Loader2 className="h-4 w-4 animate-spin" />}
306
+ {btnInfo.text}
307
+ </div>
307
308
  </ShinyButton>
308
309
  </motion.div>
309
310
 
@@ -391,13 +391,7 @@ export const OrderDetails = memo(function OrderDetails({
391
391
  : order.payload.expectedDstAmount.toString();
392
392
  const formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
393
393
 
394
- const actualDstAmount =
395
- order.type === "mint_nft" ||
396
- order.type === "join_tournament" ||
397
- order.type === "fund_tournament" ||
398
- order.type === "custom"
399
- ? undefined
400
- : order.payload.actualDstAmount;
394
+ const actualDstAmount = order.settlement?.actualDstAmount;
401
395
  const formattedActualDstAmount = actualDstAmount
402
396
  ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
403
397
  : undefined;