@varity-labs/ui-kit 2.0.0-beta.5 → 2.0.0-beta.6

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 (84) hide show
  1. package/LICENSE +3 -3
  2. package/README.md +61 -28
  3. package/dist/components/Analytics/__tests__/DataTable.test.d.ts +2 -0
  4. package/dist/components/Analytics/__tests__/DataTable.test.d.ts.map +1 -0
  5. package/dist/components/Analytics/__tests__/DataTable.test.js +113 -0
  6. package/dist/components/Analytics/__tests__/DataTable.test.js.map +1 -0
  7. package/dist/components/Dashboard/__tests__/EmptyState.test.d.ts +2 -0
  8. package/dist/components/Dashboard/__tests__/EmptyState.test.d.ts.map +1 -0
  9. package/dist/components/Dashboard/__tests__/EmptyState.test.js +81 -0
  10. package/dist/components/Dashboard/__tests__/EmptyState.test.js.map +1 -0
  11. package/dist/components/Dashboard/__tests__/KPICard.test.d.ts +2 -0
  12. package/dist/components/Dashboard/__tests__/KPICard.test.d.ts.map +1 -0
  13. package/dist/components/Dashboard/__tests__/KPICard.test.js +78 -0
  14. package/dist/components/Dashboard/__tests__/KPICard.test.js.map +1 -0
  15. package/dist/components/Onramp/BuyUSDCButton.d.ts +4 -4
  16. package/dist/components/Onramp/BuyUSDCButton.d.ts.map +1 -1
  17. package/dist/components/Onramp/BuyUSDCButton.js +5 -5
  18. package/dist/components/Onramp/BuyUSDCButton.js.map +1 -1
  19. package/dist/components/Onramp/OnrampWidget.d.ts +4 -4
  20. package/dist/components/Onramp/OnrampWidget.d.ts.map +1 -1
  21. package/dist/components/Onramp/OnrampWidget.js +10 -11
  22. package/dist/components/Onramp/OnrampWidget.js.map +1 -1
  23. package/dist/components/Onramp/index.d.ts +3 -4
  24. package/dist/components/Onramp/index.d.ts.map +1 -1
  25. package/dist/components/Onramp/index.js +3 -4
  26. package/dist/components/Onramp/index.js.map +1 -1
  27. package/dist/components/PaymentWidget/PaymentWidget.d.ts +15 -6
  28. package/dist/components/PaymentWidget/PaymentWidget.d.ts.map +1 -1
  29. package/dist/components/PaymentWidget/PaymentWidget.js +79 -47
  30. package/dist/components/PaymentWidget/PaymentWidget.js.map +1 -1
  31. package/dist/components/PaymentWidget/useSeamlessPayment.d.ts +51 -0
  32. package/dist/components/PaymentWidget/useSeamlessPayment.d.ts.map +1 -0
  33. package/dist/components/PaymentWidget/useSeamlessPayment.js +167 -0
  34. package/dist/components/PaymentWidget/useSeamlessPayment.js.map +1 -0
  35. package/dist/components/PaymentWidget/useVarityPayment.js +1 -1
  36. package/dist/components/PaymentWidget/useVarityPayment.js.map +1 -1
  37. package/dist/components/Payments/CheckoutModal.d.ts.map +1 -1
  38. package/dist/components/Payments/CheckoutModal.js +16 -5
  39. package/dist/components/Payments/CheckoutModal.js.map +1 -1
  40. package/dist/components/Payments/constants.d.ts +1 -1
  41. package/dist/components/Payments/constants.d.ts.map +1 -1
  42. package/dist/components/Payments/constants.js +1 -1
  43. package/dist/components/Payments/constants.js.map +1 -1
  44. package/dist/components/Privy/PrivyProtectedRoute.d.ts +6 -8
  45. package/dist/components/Privy/PrivyProtectedRoute.d.ts.map +1 -1
  46. package/dist/components/Privy/PrivyProtectedRoute.js +5 -7
  47. package/dist/components/Privy/PrivyProtectedRoute.js.map +1 -1
  48. package/dist/components/Privy/__tests__/InitScreens.test.d.ts +2 -0
  49. package/dist/components/Privy/__tests__/InitScreens.test.d.ts.map +1 -0
  50. package/dist/components/Privy/__tests__/InitScreens.test.js +74 -0
  51. package/dist/components/Privy/__tests__/InitScreens.test.js.map +1 -0
  52. package/dist/components/Privy/index.d.ts +2 -1
  53. package/dist/components/Privy/index.d.ts.map +1 -1
  54. package/dist/components/Privy/index.js +1 -1
  55. package/dist/components/Privy/index.js.map +1 -1
  56. package/dist/index.d.ts +3 -7
  57. package/dist/index.d.ts.map +1 -1
  58. package/dist/index.js +6 -16
  59. package/dist/index.js.map +1 -1
  60. package/dist/modules/cache/CacheClient.d.ts +48 -0
  61. package/dist/modules/cache/CacheClient.d.ts.map +1 -0
  62. package/dist/modules/cache/CacheClient.js +59 -0
  63. package/dist/modules/cache/CacheClient.js.map +1 -0
  64. package/dist/providers/PrivyStack.d.ts +21 -23
  65. package/dist/providers/PrivyStack.d.ts.map +1 -1
  66. package/dist/providers/PrivyStack.js +20 -22
  67. package/dist/providers/PrivyStack.js.map +1 -1
  68. package/dist/providers/VarityDashboardProvider.js.map +1 -1
  69. package/dist/providers/index.d.ts +2 -2
  70. package/dist/providers/index.d.ts.map +1 -1
  71. package/dist/providers/index.js +4 -4
  72. package/dist/providers/index.js.map +1 -1
  73. package/dist/wallets/SmartWalletProvider.d.ts +10 -10
  74. package/dist/wallets/SmartWalletProvider.js +6 -6
  75. package/dist/wallets/SmartWalletProvider.js.map +1 -1
  76. package/dist/wallets/config.d.ts +30 -7
  77. package/dist/wallets/config.d.ts.map +1 -1
  78. package/dist/wallets/config.js +29 -6
  79. package/dist/wallets/config.js.map +1 -1
  80. package/dist/wallets/index.d.ts +1 -1
  81. package/dist/wallets/index.d.ts.map +1 -1
  82. package/dist/wallets/index.js +1 -1
  83. package/dist/wallets/index.js.map +1 -1
  84. package/package.json +7 -7
@@ -1,9 +1,9 @@
1
1
  /**
2
- * OnrampWidget - Full embedded fiat onramp widget
2
+ * OnrampWidget - Add funds to your account
3
3
  *
4
- * Complete payment widget with purchase tracking and status display
5
- * Uses Privy's useFundWallet for credit card purchases on Arbitrum One
6
- * Supports credit card, debit card, Apple Pay, Google Pay
4
+ * Seamless credit card payment widget for adding funds.
5
+ * Users see a familiar checkout experience no crypto terminology.
6
+ * Supports credit card, debit card, Apple Pay, Google Pay.
7
7
  *
8
8
  * @example
9
9
  * ```tsx
@@ -79,8 +79,8 @@ export function OnrampWidget({ walletAddress, defaultAmount = 100, onComplete, o
79
79
  React.createElement("div", { className: `rounded-2xl overflow-hidden ${theme === 'dark' ? 'bg-gray-900' : 'bg-white'}` },
80
80
  React.createElement("div", { className: "p-6 space-y-4" },
81
81
  React.createElement("div", { className: "flex items-center justify-between" },
82
- React.createElement("h3", { className: `text-xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}` }, "Buy USDC"),
83
- React.createElement("div", { className: `px-3 py-1 rounded-full text-xs font-medium ${theme === 'dark' ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-600'}` }, "Arbitrum One")),
82
+ React.createElement("h3", { className: `text-xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}` }, "Add Funds"),
83
+ React.createElement("div", { className: `px-3 py-1 rounded-full text-xs font-medium ${theme === 'dark' ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-600'}` }, "Secure Checkout")),
84
84
  React.createElement("div", { className: `p-4 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-gradient-to-br from-blue-50 to-indigo-50'}` },
85
85
  React.createElement("div", { className: "flex items-center gap-3" },
86
86
  React.createElement("svg", { className: "w-8 h-8 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
@@ -97,9 +97,9 @@ export function OnrampWidget({ walletAddress, defaultAmount = 100, onComplete, o
97
97
  "Opening...")) : (React.createElement(React.Fragment, null,
98
98
  React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
99
99
  React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" })),
100
- "Buy $",
100
+ "Add $",
101
101
  defaultAmount,
102
- " USDC"))))),
102
+ " USD"))))),
103
103
  showHistory && purchases.length > 0 && (React.createElement("div", { className: `rounded-2xl p-6 ${theme === 'dark' ? 'bg-gray-900' : 'bg-white'}` },
104
104
  React.createElement("h4", { className: `font-semibold mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}` }, "Recent Purchases"),
105
105
  React.createElement("div", { className: "space-y-3" }, purchases.map((purchase) => (React.createElement("div", { key: purchase.id, className: `p-4 rounded-xl border ${theme === 'dark' ? 'border-gray-800 bg-gray-800/50' : 'border-gray-200 bg-gray-50'}` },
@@ -109,11 +109,10 @@ export function OnrampWidget({ walletAddress, defaultAmount = 100, onComplete, o
109
109
  React.createElement("p", { className: `font-medium ${theme === 'dark' ? 'text-white' : 'text-gray-900'}` },
110
110
  "$",
111
111
  purchase.amount,
112
- " ",
113
- purchase.currency),
112
+ " USD"),
114
113
  React.createElement("span", { className: `px-2 py-0.5 rounded-full text-xs font-medium ${getStatusColor(purchase.status)}` }, purchase.status)),
115
114
  React.createElement("p", { className: `text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}` }, formatDate(purchase.timestamp))),
116
- purchase.txHash && (React.createElement("a", { href: `https://arbiscan.io/tx/${purchase.txHash}`, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:text-blue-700" },
115
+ purchase.txHash && (React.createElement("a", { href: `https://arbiscan.io/tx/${purchase.txHash}`, title: "View receipt", target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:text-blue-700" },
117
116
  React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
118
117
  React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }))))))))))),
119
118
  React.createElement("div", { className: `p-4 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-blue-50'}` },
@@ -1 +1 @@
1
- {"version":3,"file":"OnrampWidget.js","sourceRoot":"","sources":["../../../src/components/Onramp/OnrampWidget.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"OnrampWidget.js","sourceRoot":"","sources":["../../../src/components/Onramp/OnrampWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAwBvC,MAAM,UAAU,YAAY,CAAC,EAC3B,aAAa,EACb,aAAa,GAAG,GAAG,EACnB,UAAU,EACV,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,KAAK,GAAG,OAAO,EACG;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IAEvC,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,EAAE;QAChC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;YACtC,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,SAAS;SAClB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,MAA0B,EAAE,EAAE;QACpD,QAAQ,MAAM,EAAE,CAAC;YACf,KAAK,WAAW;gBACd,OAAO,6BAA6B,CAAC;YACvC,KAAK,YAAY;gBACf,OAAO,2BAA2B,CAAC;YACrC,KAAK,SAAS;gBACZ,OAAO,+BAA+B,CAAC;YACzC,KAAK,QAAQ;gBACX,OAAO,yBAAyB,CAAC;YACnC;gBACE,OAAO,2BAA2B,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACvC,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,MAAM,QAAQ,GAAa;YACzB,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE;YACvB,MAAM,EAAE,aAAa;YACrB,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,IAAI,IAAI,EAAE;SACtB,CAAC;QAEF,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;QAE1C,IAAI,CAAC;YACH,MAAM,UAAU,CAAC,aAAa,EAAE;gBAC9B,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,aAAa,CAAC,QAAQ,EAAE;aACjC,CAAC,CAAC;YAEH,MAAM,iBAAiB,GAAG,EAAE,GAAG,QAAQ,EAAE,MAAM,EAAE,WAAoB,EAAE,CAAC;YACxE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAClF,UAAU,EAAE,CAAC,iBAAiB,CAAC,CAAC;QAClC,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,MAAM,cAAc,GAAG,EAAE,GAAG,QAAQ,EAAE,MAAM,EAAE,QAAiB,EAAE,CAAC;YAClE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/E,MAAM,KAAK,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;YACvE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpE,OAAO,CACL,6BAAK,SAAS,EAAC,WAAW;QAExB,6BAAK,SAAS,EAAE,+BAA+B,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,EAAE;YAC5F,6BAAK,SAAS,EAAC,eAAe;gBAC5B,6BAAK,SAAS,EAAC,mCAAmC;oBAChD,4BAAI,SAAS,EAAE,qBAAqB,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,EAAE,gBAElF;oBACL,6BAAK,SAAS,EAAE,8CAA8C,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,2BAA2B,EAAE,sBAEtI,CACF;gBAEN,6BAAK,SAAS,EAAE,kBAAkB,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,6CAA6C,EAAE;oBAClH,6BAAK,SAAS,EAAC,yBAAyB;wBACtC,6BAAK,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW;4BAC1F,8BAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,wFAAwF,GAAG,CAC5J;wBACN;4BACE,2BAAG,SAAS,EAAE,iBAAiB,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,EAAE,gCAE9E;4BACJ,2BAAG,SAAS,EAAE,WAAW,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,EAAE,2DAE3E,CACA,CACF,CACF;gBAEN,gCACE,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,CAAC,aAAa,IAAI,SAAS,EACrC,SAAS,EAAE,gHACT,KAAK,KAAK,MAAM;wBACd,CAAC,CAAC,sFAAsF;wBACxF,CAAC,CAAC,qHACN,8BAA8B,IAE7B,SAAS,CAAC,CAAC,CAAC,CACX;oBACE,6BAAK,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW;wBACnE,gCAAQ,SAAS,EAAC,YAAY,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,GAAG;wBAC9F,8BAAM,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,6CAA6C,GAAG,CAC/F;iCAEL,CACJ,CAAC,CAAC,CAAC,CACF;oBACE,6BAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW;wBAC5E,8BAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,wFAAwF,GAAG,CAC5J;;oBACA,aAAa;2BAClB,CACJ,CACM,CACL,CACF;QAGL,WAAW,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACtC,6BAAK,SAAS,EAAE,mBAAmB,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,EAAE;YAChF,4BAAI,SAAS,EAAE,sBAAsB,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,EAAE,uBAEnF;YAEL,6BAAK,SAAS,EAAC,WAAW,IACvB,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3B,6BACE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,SAAS,EAAE,yBAAyB,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,4BAA4B,EAAE;gBAExH,6BAAK,SAAS,EAAC,mCAAmC;oBAChD,6BAAK,SAAS,EAAC,QAAQ;wBACrB,6BAAK,SAAS,EAAC,yBAAyB;4BACtC,2BAAG,SAAS,EAAE,eAAe,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,EAAE;;gCAC5E,QAAQ,CAAC,MAAM;uCACf;4BACJ,8BAAM,SAAS,EAAE,gDAAgD,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAC/F,QAAQ,CAAC,MAAM,CACX,CACH;wBACN,2BAAG,SAAS,EAAE,WAAW,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,EAAE,IAC5E,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,CAC7B,CACA;oBAEL,QAAQ,CAAC,MAAM,IAAI,CAClB,2BACE,IAAI,EAAE,0BAA0B,QAAQ,CAAC,MAAM,EAAE,EACjD,KAAK,EAAC,cAAc,EACpB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,mCAAmC;wBAE7C,6BAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW;4BAC5E,8BAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,8EAA8E,GAAG,CAClJ,CACJ,CACL,CACG,CACF,CACP,CAAC,CACE,CACF,CACP;QAGD,6BAAK,SAAS,EAAE,kBAAkB,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EAAE;YACjF,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,6BAAK,SAAS,EAAE,gCAAgC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW;oBAC3J,8BAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,2DAA2D,GAAG,CAC/H;gBACN;oBACE,2BAAG,SAAS,EAAE,uBAAuB,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,EAAE,yBAEvF;oBACJ,2BAAG,SAAS,EAAE,WAAW,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,EAAE,4FAE3E,CACA,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC"}
@@ -1,10 +1,9 @@
1
1
  /**
2
- * Onramp Components Export
2
+ * Payment Components Export
3
3
  *
4
- * Fiat onramp via Privy (useFundWallet) on Arbitrum One
5
- * - Credit/Debit card payments
4
+ * Seamless credit card payments for adding funds.
5
+ * - Credit/Debit card
6
6
  * - Apple Pay & Google Pay
7
- * - Powered by MoonPay / Coinbase providers
8
7
  */
9
8
  export { BuyUSDCButton } from './BuyUSDCButton';
10
9
  export { OnrampWidget } from './OnrampWidget';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Onramp/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Onramp/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}
@@ -1,10 +1,9 @@
1
1
  /**
2
- * Onramp Components Export
2
+ * Payment Components Export
3
3
  *
4
- * Fiat onramp via Privy (useFundWallet) on Arbitrum One
5
- * - Credit/Debit card payments
4
+ * Seamless credit card payments for adding funds.
5
+ * - Credit/Debit card
6
6
  * - Apple Pay & Google Pay
7
- * - Powered by MoonPay / Coinbase providers
8
7
  */
9
8
  export { BuyUSDCButton } from './BuyUSDCButton';
10
9
  export { OnrampWidget } from './OnrampWidget';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Onramp/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Onramp/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
@@ -1,17 +1,25 @@
1
1
  /**
2
2
  * PaymentWidget Component
3
3
  *
4
- * Mandatory component for developer apps to charge end-users.
4
+ * REQUIRED in every Varity app that charges users.
5
5
  * All payments go through the VarityPayments contract with 90/10 revenue split:
6
6
  * - 90% to developer
7
7
  * - 10% to Varity treasury
8
8
  *
9
- * Uses ERC-20 USDC approve + purchaseApp on Arbitrum One (mainnet).
10
- * thirdweb TransactionButton + payModal handles credit card payments.
9
+ * Zero-crypto checkout: Users pay with credit card via thirdweb Pay.
10
+ * No wallets, no tokens, no blockchain terminology visible.
11
+ * The experience is identical to Stripe checkout.
12
+ *
13
+ * Flow:
14
+ * 1. User clicks purchase button
15
+ * 2. Credit card form appears (thirdweb Pay modal)
16
+ * 3. thirdweb converts USD → USDC on Arbitrum One
17
+ * 4. USDC approve + purchaseApp() execute automatically
18
+ * 5. User sees "Purchase complete" — never sees crypto
11
19
  *
12
20
  * @example
13
21
  * ```tsx
14
- * import { PaymentWidget } from '@varity/ui-kit';
22
+ * import { PaymentWidget } from '@varity-labs/ui-kit';
15
23
  *
16
24
  * <PaymentWidget appId={123} price={9900}>
17
25
  * <button>Buy Premium - $99</button>
@@ -21,10 +29,11 @@
21
29
  import React from 'react';
22
30
  import { PaymentWidgetProps } from './types';
23
31
  /**
24
- * PaymentWidget - Mandatory component for app monetization
32
+ * PaymentWidget - Required component for app monetization
25
33
  *
26
- * Wraps a trigger element and handles the purchase flow.
34
+ * Wraps a trigger element and handles the full purchase flow.
27
35
  * Automatically checks USDC allowance — skips authorize step if sufficient.
36
+ * Credit card payments handled seamlessly via thirdweb Pay.
28
37
  */
29
38
  export declare const PaymentWidget: React.FC<PaymentWidgetProps>;
30
39
  export default PaymentWidget;
@@ -1 +1 @@
1
- {"version":3,"file":"PaymentWidget.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAM7C;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwLtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"PaymentWidget.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA6C7C;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4KtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1,17 +1,25 @@
1
1
  /**
2
2
  * PaymentWidget Component
3
3
  *
4
- * Mandatory component for developer apps to charge end-users.
4
+ * REQUIRED in every Varity app that charges users.
5
5
  * All payments go through the VarityPayments contract with 90/10 revenue split:
6
6
  * - 90% to developer
7
7
  * - 10% to Varity treasury
8
8
  *
9
- * Uses ERC-20 USDC approve + purchaseApp on Arbitrum One (mainnet).
10
- * thirdweb TransactionButton + payModal handles credit card payments.
9
+ * Zero-crypto checkout: Users pay with credit card via thirdweb Pay.
10
+ * No wallets, no tokens, no blockchain terminology visible.
11
+ * The experience is identical to Stripe checkout.
12
+ *
13
+ * Flow:
14
+ * 1. User clicks purchase button
15
+ * 2. Credit card form appears (thirdweb Pay modal)
16
+ * 3. thirdweb converts USD → USDC on Arbitrum One
17
+ * 4. USDC approve + purchaseApp() execute automatically
18
+ * 5. User sees "Purchase complete" — never sees crypto
11
19
  *
12
20
  * @example
13
21
  * ```tsx
14
- * import { PaymentWidget } from '@varity/ui-kit';
22
+ * import { PaymentWidget } from '@varity-labs/ui-kit';
15
23
  *
16
24
  * <PaymentWidget appId={123} price={9900}>
17
25
  * <button>Buy Premium - $99</button>
@@ -20,16 +28,51 @@
20
28
  */
21
29
  import React, { useState, useEffect } from 'react';
22
30
  import { TransactionButton, useActiveAccount } from 'thirdweb/react';
23
- import { prepareContractCall, getContract, readContract } from 'thirdweb';
31
+ import { prepareContractCall, getContract, readContract, defineChain } from 'thirdweb';
24
32
  import { approve } from 'thirdweb/extensions/erc20';
25
33
  import { useVarityPayment } from './useVarityPayment';
26
34
  /** Arbitrum One USDC contract address */
27
35
  const USDC_ADDRESS = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831';
36
+ /** Arbitrum One chain config for thirdweb */
37
+ const ARBITRUM_ONE = defineChain(42161);
38
+ /**
39
+ * Build the payModal config that hides all crypto complexity.
40
+ * Users see a clean credit card checkout — no wallets, tokens, or chains.
41
+ *
42
+ * The payModal auto-detects that the transaction needs USDC on Arbitrum One
43
+ * and shows the credit card on-ramp when the user has insufficient balance.
44
+ */
45
+ function buildPayModalConfig(opts) {
46
+ return {
47
+ theme: opts.theme,
48
+ metadata: {
49
+ name: opts.title,
50
+ image: '/logo/varity-logo-color.svg',
51
+ },
52
+ // Credit card only — hide crypto swap/transfer options
53
+ buyWithCrypto: false,
54
+ // Prefer Stripe for the cleanest credit card experience
55
+ buyWithFiat: {
56
+ preferredProvider: 'stripe',
57
+ },
58
+ // Only show USDC on Arbitrum One, labeled as "USD" to hide crypto
59
+ supportedTokens: {
60
+ 42161: [{
61
+ address: USDC_ADDRESS,
62
+ name: 'USD',
63
+ symbol: 'USD',
64
+ icon: 'https://assets.coingecko.com/coins/images/6319/standard/usdc.png',
65
+ }],
66
+ },
67
+ showThirdwebBranding: false,
68
+ };
69
+ }
28
70
  /**
29
- * PaymentWidget - Mandatory component for app monetization
71
+ * PaymentWidget - Required component for app monetization
30
72
  *
31
- * Wraps a trigger element and handles the purchase flow.
73
+ * Wraps a trigger element and handles the full purchase flow.
32
74
  * Automatically checks USDC allowance — skips authorize step if sufficient.
75
+ * Credit card payments handled seamlessly via thirdweb Pay.
33
76
  */
34
77
  export const PaymentWidget = ({ appId, price, type = 'one-time', intervalDays = 30, onSuccess, onCancel, onError, theme = 'dark', className = '', children, disabled = false, }) => {
35
78
  const { hasPurchased, isLoading, pricing, } = useVarityPayment({ appId });
@@ -54,12 +97,11 @@ export const PaymentWidget = ({ appId, price, type = 'one-time', intervalDays =
54
97
  }
55
98
  const checkAllowance = async () => {
56
99
  try {
57
- const { createThirdwebClient, defineChain } = await import('thirdweb');
100
+ const { createThirdwebClient } = await import('thirdweb');
58
101
  const client = createThirdwebClient({
59
102
  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || '',
60
103
  });
61
- const chain = defineChain(42161);
62
- const usdcContract = getContract({ client, chain, address: USDC_ADDRESS });
104
+ const usdcContract = getContract({ client, chain: ARBITRUM_ONE, address: USDC_ADDRESS });
63
105
  const currentAllowance = await readContract({
64
106
  contract: usdcContract,
65
107
  method: 'function allowance(address owner, address spender) view returns (uint256)',
@@ -73,15 +115,13 @@ export const PaymentWidget = ({ appId, price, type = 'one-time', intervalDays =
73
115
  };
74
116
  checkAllowance();
75
117
  }, [account?.address, amountNeeded, paymentsAddress]);
76
- // Format price for display
77
- const formatPrice = (cents) => {
78
- return `$${(cents / 100).toFixed(2)}`;
79
- };
80
- const displayPrice = price
81
- ? formatPrice(price)
82
- : pricing?.priceUsdc
83
- ? `$${(Number(pricing.priceUsdc) / 1_000_000).toFixed(2)}`
84
- : null;
118
+ // Calculate price in USD for display and payModal
119
+ const priceUsd = pricing?.priceUsdc
120
+ ? Number(pricing.priceUsdc) / 1_000_000
121
+ : price
122
+ ? price / 100
123
+ : 0;
124
+ const displayPrice = priceUsd > 0 ? `$${priceUsd.toFixed(2)}` : null;
85
125
  // Already purchased
86
126
  if (hasPurchased && !isLoading) {
87
127
  return (React.createElement("div", { className: `inline-flex items-center gap-2 text-green-500 ${className}` },
@@ -97,45 +137,38 @@ export const PaymentWidget = ({ appId, price, type = 'one-time', intervalDays =
97
137
  if (!pricing?.isActive) {
98
138
  return null;
99
139
  }
100
- // Helper to get thirdweb client and chain
101
- const getClientAndChain = async () => {
102
- const { createThirdwebClient, defineChain } = await import('thirdweb');
103
- const client = createThirdwebClient({
140
+ // Helper to get thirdweb client
141
+ const getClient = async () => {
142
+ const { createThirdwebClient } = await import('thirdweb');
143
+ return createThirdwebClient({
104
144
  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || '',
105
145
  });
106
- const chain = defineChain(42161); // Arbitrum One
107
- return { client, chain };
108
146
  };
109
- const approveAmount = pricing?.priceUsdc
110
- ? Number(pricing.priceUsdc) / 1_000_000 // raw units → dollars
111
- : (price || 0) / 100; // cents → dollars
112
147
  const needsAuthorization = hasAllowance === false && !isAuthorized;
113
148
  if (needsAuthorization) {
114
149
  // Step 1: Authorize payment (sets USDC allowance)
150
+ // payModal handles credit card on-ramp if user has no USDC
115
151
  return (React.createElement(TransactionButton, { transaction: async () => {
116
- const { client, chain } = await getClientAndChain();
117
- const usdcContract = getContract({ client, chain, address: USDC_ADDRESS });
152
+ const client = await getClient();
153
+ const usdcContract = getContract({ client, chain: ARBITRUM_ONE, address: USDC_ADDRESS });
118
154
  return approve({
119
155
  contract: usdcContract,
120
156
  spender: paymentsAddress,
121
- amount: approveAmount, // dollars — thirdweb handles decimals
157
+ amount: priceUsd,
122
158
  });
123
159
  }, onTransactionConfirmed: () => {
124
160
  setIsAuthorized(true);
125
161
  }, onError: (error) => {
126
162
  onError?.(error);
127
- }, payModal: {
128
- theme: theme === 'dark' ? 'dark' : 'light',
129
- metadata: {
130
- name: `Authorize ${displayPrice} Payment`,
131
- image: '/logo/varity-logo-color.svg',
132
- },
133
- }, className: className, disabled: disabled }, children));
163
+ }, payModal: buildPayModalConfig({
164
+ theme,
165
+ title: `Payment — ${displayPrice}`,
166
+ }), className: className, disabled: disabled }, children));
134
167
  }
135
168
  // Step 2 (or only step if allowance exists): Complete purchase
136
169
  return (React.createElement(TransactionButton, { transaction: async () => {
137
- const { client, chain } = await getClientAndChain();
138
- const contract = getContract({ client, chain, address: paymentsAddress });
170
+ const client = await getClient();
171
+ const contract = getContract({ client, chain: ARBITRUM_ONE, address: paymentsAddress });
139
172
  return prepareContractCall({
140
173
  contract,
141
174
  method: {
@@ -151,13 +184,12 @@ export const PaymentWidget = ({ appId, price, type = 'one-time', intervalDays =
151
184
  onSuccess?.(receipt.transactionHash);
152
185
  }, onError: (error) => {
153
186
  onError?.(error);
154
- }, payModal: {
155
- theme: theme === 'dark' ? 'dark' : 'light',
156
- metadata: {
157
- name: type === 'subscription' ? `Subscribe — ${displayPrice}/mo` : `Purchase — ${displayPrice}`,
158
- image: '/logo/varity-logo-color.svg',
159
- },
160
- }, className: className, disabled: disabled }, children));
187
+ }, payModal: buildPayModalConfig({
188
+ theme,
189
+ title: type === 'subscription'
190
+ ? `Subscribe — ${displayPrice}/mo`
191
+ : `Purchase — ${displayPrice}`,
192
+ }), className: className, disabled: disabled }, children));
161
193
  };
162
194
  export default PaymentWidget;
163
195
  //# sourceMappingURL=PaymentWidget.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PaymentWidget.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,yCAAyC;AACzC,MAAM,YAAY,GAAG,4CAA4C,CAAC;AAElE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,KAAK,EACL,KAAK,EACL,IAAI,GAAG,UAAU,EACjB,YAAY,GAAG,EAAE,EACjB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,GAAG,MAAM,EACd,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,QAAQ,GAAG,KAAK,GACjB,EAAE,EAAE;IACH,MAAM,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,GACR,GAAG,gBAAgB,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAEhC,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IACnC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAEvE,+BAA+B;IAC/B,MAAM,eAAe,GAAG,CACtB,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,GAAG,EAAE,mCAAmC;QAChF,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,mCAAmC;QACjD,CAAC,CAAC,4CAA4C,CACjD,CAAC;IAEF,kCAAkC;IAClC,MAAM,YAAY,GAAG,OAAO,EAAE,SAAS;QACrC,CAAC,CAAC,OAAO,CAAC,SAAS;QACnB,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,0CAA0C;YAClE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAEd,oEAAoE;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,OAAO,IAAI,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACpD,eAAe,CAAC,KAAK,CAAC,CAAC;YACvB,OAAO;QACT,CAAC;QACD,MAAM,cAAc,GAAG,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC;gBACH,MAAM,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC;gBACvE,MAAM,MAAM,GAAG,oBAAoB,CAAC;oBAClC,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC,8BAA8B,IAAI,EAAE;iBAC3D,CAAC,CAAC;gBACH,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;gBACjC,MAAM,YAAY,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC;gBAC3E,MAAM,gBAAgB,GAAG,MAAM,YAAY,CAAC;oBAC1C,QAAQ,EAAE,YAAY;oBACtB,MAAM,EAAE,2EAA2E;oBACnF,MAAM,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,eAAe,CAAC;iBAC3C,CAAC,CAAC;gBACH,eAAe,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,IAAI,YAAY,CAAC,CAAC;YACvE,CAAC;YAAC,MAAM,CAAC;gBACP,eAAe,CAAC,KAAK,CAAC,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QACF,cAAc,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAEtD,2BAA2B;IAC3B,MAAM,WAAW,GAAG,CAAC,KAAa,EAAU,EAAE;QAC5C,OAAO,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK;QACxB,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;QACpB,CAAC,CAAC,OAAO,EAAE,SAAS;YACpB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAC1D,CAAC,CAAC,IAAI,CAAC;IAET,oBAAoB;IACpB,IAAI,YAAY,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/B,OAAO,CACL,6BAAK,SAAS,EAAE,iDAAiD,SAAS,EAAE;YAC1E,6BAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW;gBAC5E,8BAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,gBAAgB,GAAG,CACpF;YACN,8CAAsB,CAClB,CACP,CAAC;IACJ,CAAC;IAED,UAAU;IACV,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,6BAAK,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAO,CAAC;IACrD,CAAC;IAED,iBAAiB;IACjB,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,0CAA0C;IAC1C,MAAM,iBAAiB,GAAG,KAAK,IAAI,EAAE;QACnC,MAAM,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC;QACvE,MAAM,MAAM,GAAG,oBAAoB,CAAC;YAClC,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC,8BAA8B,IAAI,EAAE;SAC3D,CAAC,CAAC;QACH,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe;QACjD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,EAAE,SAAS;QACtC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC,sBAAsB;QAC9D,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,kBAAkB;IAE1C,MAAM,kBAAkB,GAAG,YAAY,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC;IAEnE,IAAI,kBAAkB,EAAE,CAAC;QACvB,kDAAkD;QAClD,OAAO,CACL,oBAAC,iBAAiB,IAChB,WAAW,EAAE,KAAK,IAAI,EAAE;gBACtB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,iBAAiB,EAAE,CAAC;gBACpD,MAAM,YAAY,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC;gBAC3E,OAAO,OAAO,CAAC;oBACb,QAAQ,EAAE,YAAY;oBACtB,OAAO,EAAE,eAAe;oBACxB,MAAM,EAAE,aAAa,EAAE,sCAAsC;iBAC9D,CAAC,CAAC;YACL,CAAC,EACD,sBAAsB,EAAE,GAAG,EAAE;gBAC3B,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,OAAO,EAAE,CAAC,KAAc,CAAC,CAAC;YAC5B,CAAC,EACD,QAAQ,EAAE;gBACR,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBAC1C,QAAQ,EAAE;oBACR,IAAI,EAAE,aAAa,YAAY,UAAU;oBACzC,KAAK,EAAE,6BAA6B;iBACrC;aACF,EACD,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACS,CACrB,CAAC;IACJ,CAAC;IAED,+DAA+D;IAC/D,OAAO,CACL,oBAAC,iBAAiB,IAChB,WAAW,EAAE,KAAK,IAAI,EAAE;YACtB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,iBAAiB,EAAE,CAAC;YACpD,MAAM,QAAQ,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,CAAC;YAC1E,OAAO,mBAAmB,CAAC;gBACzB,QAAQ;gBACR,MAAM,EAAE;oBACN,IAAI,EAAE,aAAa;oBACnB,IAAI,EAAE,UAAU;oBAChB,eAAe,EAAE,YAAY;oBAC7B,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;oBAC3C,OAAO,EAAE,EAAE;iBACZ;gBACD,MAAM,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACxB,CAAC,CAAC;QACL,CAAC,EACD,sBAAsB,EAAE,CAAC,OAAO,EAAE,EAAE;YAClC,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACvC,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,EAAE,CAAC,KAAc,CAAC,CAAC;QAC5B,CAAC,EACD,QAAQ,EAAE;YACR,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAC1C,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,eAAe,YAAY,KAAK,CAAC,CAAC,CAAC,cAAc,YAAY,EAAE;gBAC/F,KAAK,EAAE,6BAA6B;aACrC;SACF,EACD,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACS,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"PaymentWidget.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,51 @@
1
+ /**
2
+ * useSeamlessPayment - One-Click Payment with Auto On-Ramp
3
+ *
4
+ * Combines balance check + on-ramp + approval + purchase into a single flow.
5
+ * User just clicks "Pay" - everything happens automatically.
6
+ *
7
+ * Flow:
8
+ * 1. Check USDC balance
9
+ * 2. If insufficient → Auto-trigger Privy on-ramp (Bridge/MoonPay/Coinbase modal)
10
+ * 3. Auto-approve USDC allowance if needed
11
+ * 4. Execute purchase (90/10 split)
12
+ *
13
+ * Integration with Bridge:
14
+ * - Once Bridge is configured in PrivyProvider's fundingMethodConfig
15
+ * - useFundWallet automatically uses Bridge (Stripe UX)
16
+ * - Falls back to MoonPay/Coinbase if Bridge unavailable
17
+ *
18
+ * @example
19
+ * ```tsx
20
+ * const { seamlessPurchase } = useSeamlessPayment({ appId: 123 });
21
+ *
22
+ * <button onClick={() => seamlessPurchase()}>
23
+ * Pay $99
24
+ * </button>
25
+ * ```
26
+ */
27
+ /**
28
+ * Enhanced payment hook with seamless on-ramp integration
29
+ */
30
+ export declare function useSeamlessPayment({ appId }: {
31
+ appId: number;
32
+ }): {
33
+ seamlessPurchase: () => Promise<{
34
+ success: boolean;
35
+ txHash?: string;
36
+ error?: string;
37
+ needsApproval?: boolean;
38
+ needsFunding?: boolean;
39
+ }>;
40
+ onrampStatus: "idle" | "checking" | "funding" | "approving" | "purchasing";
41
+ checkBalance: (address: string) => Promise<bigint>;
42
+ checkAllowance: (address: string) => Promise<bigint>;
43
+ hasPurchased: boolean;
44
+ isLoading: boolean;
45
+ isPurchasing: boolean;
46
+ error: string | null;
47
+ pricing: import("./types").AppPricing | null;
48
+ purchase: () => Promise<string | null>;
49
+ refresh: () => Promise<void>;
50
+ };
51
+ //# sourceMappingURL=useSeamlessPayment.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSeamlessPayment.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/useSeamlessPayment.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAaH;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;4BAiEd,OAAO,CAAC;QACrD,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,YAAY,CAAC,EAAE,OAAO,CAAC;KACxB,CAAC;;4BA5D+C,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC;8BAmBtB,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC;;;;;;;;EA6H5E"}
@@ -0,0 +1,167 @@
1
+ /**
2
+ * useSeamlessPayment - One-Click Payment with Auto On-Ramp
3
+ *
4
+ * Combines balance check + on-ramp + approval + purchase into a single flow.
5
+ * User just clicks "Pay" - everything happens automatically.
6
+ *
7
+ * Flow:
8
+ * 1. Check USDC balance
9
+ * 2. If insufficient → Auto-trigger Privy on-ramp (Bridge/MoonPay/Coinbase modal)
10
+ * 3. Auto-approve USDC allowance if needed
11
+ * 4. Execute purchase (90/10 split)
12
+ *
13
+ * Integration with Bridge:
14
+ * - Once Bridge is configured in PrivyProvider's fundingMethodConfig
15
+ * - useFundWallet automatically uses Bridge (Stripe UX)
16
+ * - Falls back to MoonPay/Coinbase if Bridge unavailable
17
+ *
18
+ * @example
19
+ * ```tsx
20
+ * const { seamlessPurchase } = useSeamlessPayment({ appId: 123 });
21
+ *
22
+ * <button onClick={() => seamlessPurchase()}>
23
+ * Pay $99
24
+ * </button>
25
+ * ```
26
+ */
27
+ import { useCallback, useState } from 'react';
28
+ import { useFundWallet } from '@privy-io/react-auth';
29
+ import { useActiveAccount } from 'thirdweb/react';
30
+ import { readContract, getContract } from 'thirdweb';
31
+ import { createThirdwebClient, defineChain } from 'thirdweb';
32
+ import { useVarityPayment } from './useVarityPayment';
33
+ import { THIRDWEB_CLIENT_ID } from '../../config/chains';
34
+ const USDC_ADDRESS = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831'; // Arbitrum One USDC
35
+ const VARITY_PAYMENTS_ADDRESS = '0x0568cf3b5b9c94542aa8d32eb51ffa38912fc48c';
36
+ /**
37
+ * Enhanced payment hook with seamless on-ramp integration
38
+ */
39
+ export function useSeamlessPayment({ appId }) {
40
+ const basePayment = useVarityPayment({ appId });
41
+ const { fundWallet } = useFundWallet();
42
+ const account = useActiveAccount();
43
+ const [onrampStatus, setOnrampStatus] = useState('idle');
44
+ const client = createThirdwebClient({ clientId: THIRDWEB_CLIENT_ID });
45
+ /**
46
+ * Check USDC balance on Arbitrum One
47
+ */
48
+ const checkBalance = useCallback(async (address) => {
49
+ const usdcContract = getContract({
50
+ client,
51
+ chain: defineChain(42161), // Arbitrum One
52
+ address: USDC_ADDRESS,
53
+ });
54
+ const balance = await readContract({
55
+ contract: usdcContract,
56
+ method: 'function balanceOf(address) view returns (uint256)',
57
+ params: [address],
58
+ });
59
+ return BigInt(balance.toString());
60
+ }, [client]);
61
+ /**
62
+ * Check USDC allowance for VarityPayments contract
63
+ */
64
+ const checkAllowance = useCallback(async (address) => {
65
+ const usdcContract = getContract({
66
+ client,
67
+ chain: defineChain(42161), // Arbitrum One
68
+ address: USDC_ADDRESS,
69
+ });
70
+ const allowance = await readContract({
71
+ contract: usdcContract,
72
+ method: 'function allowance(address owner, address spender) view returns (uint256)',
73
+ params: [address, VARITY_PAYMENTS_ADDRESS],
74
+ });
75
+ return BigInt(allowance.toString());
76
+ }, [client]);
77
+ /**
78
+ * Seamless purchase flow - ONE CLICK handles everything
79
+ *
80
+ * Steps:
81
+ * 1. Check USDC balance
82
+ * 2. If insufficient → Open Bridge/MoonPay/Coinbase modal (via Privy)
83
+ * 3. Check USDC allowance
84
+ * 4. If insufficient → PaymentWidget's TransactionButton handles approval
85
+ * 5. Execute purchase
86
+ *
87
+ * User Experience:
88
+ * - Click "Pay $99"
89
+ * - If no USDC → Credit card modal opens (Bridge = Stripe UX)
90
+ * - Enter card details
91
+ * - "Processing..." (approval + purchase happen automatically)
92
+ * - "Payment successful!"
93
+ *
94
+ * User NEVER sees: USDC, blockchain, transactions, approvals
95
+ */
96
+ const seamlessPurchase = useCallback(async () => {
97
+ if (!account?.address) {
98
+ return { success: false, error: 'Please connect your wallet first' };
99
+ }
100
+ if (!basePayment.pricing || !basePayment.pricing.isActive) {
101
+ return { success: false, error: 'This app is not available for purchase' };
102
+ }
103
+ if (basePayment.hasPurchased) {
104
+ return { success: false, error: 'You have already purchased this app' };
105
+ }
106
+ const needed = basePayment.pricing.priceUsdc;
107
+ try {
108
+ // Step 1: Check USDC balance
109
+ setOnrampStatus('checking');
110
+ const balance = await checkBalance(account.address);
111
+ console.log(`[SeamlessPayment] Balance: ${balance}, Needed: ${needed}`);
112
+ // Step 2: If insufficient balance, trigger on-ramp
113
+ if (balance < needed) {
114
+ const amountToFund = Number(needed - balance) / 1_000_000; // USDC has 6 decimals
115
+ const amountRounded = Math.ceil(amountToFund); // Round up to nearest dollar
116
+ console.log(`[SeamlessPayment] Insufficient USDC. Funding $${amountRounded}...`);
117
+ setOnrampStatus('funding');
118
+ // This opens Privy's funding modal
119
+ // If Bridge is configured → Bridge (Stripe) modal
120
+ // Otherwise → MoonPay/Coinbase modal
121
+ await fundWallet(account.address, {
122
+ chain: defineChain(42161), // Arbitrum One
123
+ asset: 'USDC',
124
+ amount: amountRounded.toString(),
125
+ });
126
+ console.log('[SeamlessPayment] Funding complete!');
127
+ // Return status so PaymentWidget can show "Please click again to complete purchase"
128
+ return {
129
+ success: false,
130
+ needsFunding: true,
131
+ error: 'Funding complete! Please click the purchase button again to complete your purchase.'
132
+ };
133
+ }
134
+ // Step 3: Check allowance
135
+ const allowance = await checkAllowance(account.address);
136
+ if (allowance < needed) {
137
+ // Let PaymentWidget's TransactionButton handle approval
138
+ console.log('[SeamlessPayment] Allowance insufficient, needs approval');
139
+ return { success: false, needsApproval: true };
140
+ }
141
+ // Step 4: Execute purchase (handled by basePayment.purchase)
142
+ setOnrampStatus('purchasing');
143
+ const txHash = await basePayment.purchase();
144
+ if (txHash) {
145
+ setOnrampStatus('idle');
146
+ return { success: true, txHash };
147
+ }
148
+ else {
149
+ return { success: false, error: 'Purchase failed - no transaction hash' };
150
+ }
151
+ }
152
+ catch (error) {
153
+ console.error('[SeamlessPayment] Error:', error);
154
+ setOnrampStatus('idle');
155
+ const errorMessage = error instanceof Error ? error.message : 'Unknown error';
156
+ return { success: false, error: errorMessage };
157
+ }
158
+ }, [account, basePayment, checkBalance, checkAllowance, fundWallet]);
159
+ return {
160
+ ...basePayment,
161
+ seamlessPurchase,
162
+ onrampStatus,
163
+ checkBalance,
164
+ checkAllowance,
165
+ };
166
+ }
167
+ //# sourceMappingURL=useSeamlessPayment.js.map