@varity-labs/ui-kit 2.0.0-beta.8 → 2.0.0-beta.9

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 (194) hide show
  1. package/dist/components/Dashboard/DashboardHeader.js +4 -4
  2. package/dist/components/Dashboard/DashboardHeader.js.map +1 -1
  3. package/dist/components/Dashboard/DashboardLayout.d.ts +3 -3
  4. package/dist/components/Dashboard/DashboardLayout.d.ts.map +1 -1
  5. package/dist/components/Dashboard/DashboardLayout.js +1 -1
  6. package/dist/components/InAppWallet/EmailLoginButton.d.ts +27 -0
  7. package/dist/components/InAppWallet/EmailLoginButton.d.ts.map +1 -0
  8. package/dist/components/InAppWallet/EmailLoginButton.js +84 -0
  9. package/dist/components/InAppWallet/EmailLoginButton.js.map +1 -0
  10. package/dist/components/InAppWallet/InAppWalletProvider.d.ts +54 -0
  11. package/dist/components/InAppWallet/InAppWalletProvider.d.ts.map +1 -0
  12. package/dist/components/InAppWallet/InAppWalletProvider.js +225 -0
  13. package/dist/components/InAppWallet/InAppWalletProvider.js.map +1 -0
  14. package/dist/components/InAppWallet/OnboardingFlow.d.ts +25 -0
  15. package/dist/components/InAppWallet/OnboardingFlow.d.ts.map +1 -0
  16. package/dist/components/InAppWallet/OnboardingFlow.js +159 -0
  17. package/dist/components/InAppWallet/OnboardingFlow.js.map +1 -0
  18. package/dist/components/InAppWallet/SocialLoginButtons.d.ts +28 -0
  19. package/dist/components/InAppWallet/SocialLoginButtons.d.ts.map +1 -0
  20. package/dist/components/InAppWallet/SocialLoginButtons.js +128 -0
  21. package/dist/components/InAppWallet/SocialLoginButtons.js.map +1 -0
  22. package/dist/components/InAppWallet/index.d.ts +15 -0
  23. package/dist/components/InAppWallet/index.d.ts.map +1 -0
  24. package/dist/components/InAppWallet/index.js +14 -0
  25. package/dist/components/InAppWallet/index.js.map +1 -0
  26. package/dist/components/PaymentWidget/PaymentWidget.d.ts +19 -7
  27. package/dist/components/PaymentWidget/PaymentWidget.d.ts.map +1 -1
  28. package/dist/components/PaymentWidget/PaymentWidget.js +176 -10
  29. package/dist/components/PaymentWidget/PaymentWidget.js.map +1 -1
  30. package/dist/components/PaymentWidget/useSeamlessPayment.d.ts +34 -8
  31. package/dist/components/PaymentWidget/useSeamlessPayment.d.ts.map +1 -1
  32. package/dist/components/PaymentWidget/useSeamlessPayment.js +158 -12
  33. package/dist/components/PaymentWidget/useSeamlessPayment.js.map +1 -1
  34. package/dist/components/PaymentWidget/useVarityPayment.d.ts +6 -5
  35. package/dist/components/PaymentWidget/useVarityPayment.d.ts.map +1 -1
  36. package/dist/components/PaymentWidget/useVarityPayment.js +147 -11
  37. package/dist/components/PaymentWidget/useVarityPayment.js.map +1 -1
  38. package/dist/components/Payments/CheckoutModal.d.ts +19 -0
  39. package/dist/components/Payments/CheckoutModal.d.ts.map +1 -0
  40. package/dist/components/Payments/CheckoutModal.js +194 -0
  41. package/dist/components/Payments/CheckoutModal.js.map +1 -0
  42. package/dist/components/Payments/SubscriptionWidget.d.ts +17 -0
  43. package/dist/components/Payments/SubscriptionWidget.d.ts.map +1 -0
  44. package/dist/components/Payments/SubscriptionWidget.js +89 -0
  45. package/dist/components/Payments/SubscriptionWidget.js.map +1 -0
  46. package/dist/components/Payments/constants.d.ts +59 -0
  47. package/dist/components/Payments/constants.d.ts.map +1 -0
  48. package/dist/components/Payments/constants.js +145 -0
  49. package/dist/components/Payments/constants.js.map +1 -0
  50. package/dist/components/Payments/index.d.ts +10 -0
  51. package/dist/components/Payments/index.d.ts.map +1 -0
  52. package/dist/components/Payments/index.js +12 -0
  53. package/dist/components/Payments/index.js.map +1 -0
  54. package/dist/components/Payments/types.d.ts +119 -0
  55. package/dist/components/Payments/types.d.ts.map +1 -0
  56. package/dist/components/Payments/types.js +27 -0
  57. package/dist/components/Payments/types.js.map +1 -0
  58. package/dist/components/Payments/usePayments.d.ts +33 -0
  59. package/dist/components/Payments/usePayments.d.ts.map +1 -0
  60. package/dist/components/Payments/usePayments.js +249 -0
  61. package/dist/components/Payments/usePayments.js.map +1 -0
  62. package/dist/components/SIWE/AuthStatus.d.ts +15 -0
  63. package/dist/components/SIWE/AuthStatus.d.ts.map +1 -0
  64. package/dist/components/SIWE/AuthStatus.js +47 -0
  65. package/dist/components/SIWE/AuthStatus.js.map +1 -0
  66. package/dist/components/SIWE/ProtectedRoute.d.ts +17 -0
  67. package/dist/components/SIWE/ProtectedRoute.d.ts.map +1 -0
  68. package/dist/components/SIWE/ProtectedRoute.js +52 -0
  69. package/dist/components/SIWE/ProtectedRoute.js.map +1 -0
  70. package/dist/components/SIWE/SIWEButton.d.ts +22 -0
  71. package/dist/components/SIWE/SIWEButton.d.ts.map +1 -0
  72. package/dist/components/SIWE/SIWEButton.js +106 -0
  73. package/dist/components/SIWE/SIWEButton.js.map +1 -0
  74. package/dist/components/SIWE/SIWEModal.d.ts +19 -0
  75. package/dist/components/SIWE/SIWEModal.d.ts.map +1 -0
  76. package/dist/components/SIWE/SIWEModal.js +75 -0
  77. package/dist/components/SIWE/SIWEModal.js.map +1 -0
  78. package/dist/components/SIWE/SIWEProvider.d.ts +38 -0
  79. package/dist/components/SIWE/SIWEProvider.d.ts.map +1 -0
  80. package/dist/components/SIWE/SIWEProvider.js +227 -0
  81. package/dist/components/SIWE/SIWEProvider.js.map +1 -0
  82. package/dist/components/SIWE/index.d.ts +15 -0
  83. package/dist/components/SIWE/index.d.ts.map +1 -0
  84. package/dist/components/SIWE/index.js +10 -0
  85. package/dist/components/SIWE/index.js.map +1 -0
  86. package/dist/hooks/web3/index.d.ts +5 -0
  87. package/dist/hooks/web3/index.d.ts.map +1 -0
  88. package/dist/hooks/web3/index.js +6 -0
  89. package/dist/hooks/web3/index.js.map +1 -0
  90. package/dist/hooks/web3/useAddressValidation.d.ts +37 -0
  91. package/dist/hooks/web3/useAddressValidation.d.ts.map +1 -0
  92. package/dist/hooks/web3/useAddressValidation.js +59 -0
  93. package/dist/hooks/web3/useAddressValidation.js.map +1 -0
  94. package/dist/hooks/web3/useBlockExplorer.d.ts +37 -0
  95. package/dist/hooks/web3/useBlockExplorer.d.ts.map +1 -0
  96. package/dist/hooks/web3/useBlockExplorer.js +59 -0
  97. package/dist/hooks/web3/useBlockExplorer.js.map +1 -0
  98. package/dist/hooks/web3/useUSDCFormat.d.ts +34 -0
  99. package/dist/hooks/web3/useUSDCFormat.d.ts.map +1 -0
  100. package/dist/hooks/web3/useUSDCFormat.js +43 -0
  101. package/dist/hooks/web3/useUSDCFormat.js.map +1 -0
  102. package/dist/hooks/web3/useVarityWallet.d.ts +48 -0
  103. package/dist/hooks/web3/useVarityWallet.d.ts.map +1 -0
  104. package/dist/hooks/web3/useVarityWallet.js +70 -0
  105. package/dist/hooks/web3/useVarityWallet.js.map +1 -0
  106. package/dist/providers/ChainContext.d.ts +65 -0
  107. package/dist/providers/ChainContext.d.ts.map +1 -0
  108. package/dist/providers/ChainContext.js +92 -0
  109. package/dist/providers/ChainContext.js.map +1 -0
  110. package/dist/providers/PrivyStack.d.ts +17 -50
  111. package/dist/providers/PrivyStack.d.ts.map +1 -1
  112. package/dist/providers/PrivyStack.js +15 -43
  113. package/dist/providers/PrivyStack.js.map +1 -1
  114. package/dist/providers/VarityDashboardProvider.d.ts +2 -2
  115. package/dist/providers/VarityDashboardProvider.d.ts.map +1 -1
  116. package/dist/providers/VarityDashboardProvider.js +26 -3
  117. package/dist/providers/VarityDashboardProvider.js.map +1 -1
  118. package/dist/providers/VarityProvider.d.ts +32 -0
  119. package/dist/providers/VarityProvider.d.ts.map +1 -0
  120. package/dist/providers/VarityProvider.js +56 -0
  121. package/dist/providers/VarityProvider.js.map +1 -0
  122. package/dist/providers/WalletContext.d.ts +68 -0
  123. package/dist/providers/WalletContext.d.ts.map +1 -0
  124. package/dist/providers/WalletContext.js +98 -0
  125. package/dist/providers/WalletContext.js.map +1 -0
  126. package/dist/providers/WalletSyncProvider.d.ts +15 -18
  127. package/dist/providers/WalletSyncProvider.d.ts.map +1 -1
  128. package/dist/providers/WalletSyncProvider.js +12 -15
  129. package/dist/providers/WalletSyncProvider.js.map +1 -1
  130. package/dist/providers/index.d.ts +48 -0
  131. package/dist/providers/index.d.ts.map +1 -0
  132. package/dist/providers/index.js +53 -0
  133. package/dist/providers/index.js.map +1 -0
  134. package/dist/wallets/SimpleSmartWallet.d.ts +68 -0
  135. package/dist/wallets/SimpleSmartWallet.d.ts.map +1 -0
  136. package/dist/wallets/SimpleSmartWallet.js +74 -0
  137. package/dist/wallets/SimpleSmartWallet.js.map +1 -0
  138. package/dist/wallets/SmartWalletProvider.d.ts +217 -0
  139. package/dist/wallets/SmartWalletProvider.d.ts.map +1 -0
  140. package/dist/wallets/SmartWalletProvider.js +366 -0
  141. package/dist/wallets/SmartWalletProvider.js.map +1 -0
  142. package/dist/wallets/config.d.ts +222 -0
  143. package/dist/wallets/config.d.ts.map +1 -0
  144. package/dist/wallets/config.js +206 -0
  145. package/dist/wallets/config.js.map +1 -0
  146. package/dist/wallets/index.d.ts +9 -0
  147. package/dist/wallets/index.d.ts.map +1 -0
  148. package/dist/wallets/index.js +9 -0
  149. package/dist/wallets/index.js.map +1 -0
  150. package/dist/web3/AddressDisplay/AddressDisplay.d.ts +33 -0
  151. package/dist/web3/AddressDisplay/AddressDisplay.d.ts.map +1 -0
  152. package/dist/web3/AddressDisplay/AddressDisplay.js +42 -0
  153. package/dist/web3/AddressDisplay/AddressDisplay.js.map +1 -0
  154. package/dist/web3/AddressInput/AddressInput.d.ts +36 -0
  155. package/dist/web3/AddressInput/AddressInput.d.ts.map +1 -0
  156. package/dist/web3/AddressInput/AddressInput.js +54 -0
  157. package/dist/web3/AddressInput/AddressInput.js.map +1 -0
  158. package/dist/web3/AmountInput/AmountInput.d.ts +41 -0
  159. package/dist/web3/AmountInput/AmountInput.d.ts.map +1 -0
  160. package/dist/web3/AmountInput/AmountInput.js +74 -0
  161. package/dist/web3/AmountInput/AmountInput.js.map +1 -0
  162. package/dist/web3/BalanceDisplay/BalanceDisplay.d.ts +30 -0
  163. package/dist/web3/BalanceDisplay/BalanceDisplay.d.ts.map +1 -0
  164. package/dist/web3/BalanceDisplay/BalanceDisplay.js +35 -0
  165. package/dist/web3/BalanceDisplay/BalanceDisplay.js.map +1 -0
  166. package/dist/web3/BlockExplorerLink/BlockExplorerLink.d.ts +41 -0
  167. package/dist/web3/BlockExplorerLink/BlockExplorerLink.d.ts.map +1 -0
  168. package/dist/web3/BlockExplorerLink/BlockExplorerLink.js +46 -0
  169. package/dist/web3/BlockExplorerLink/BlockExplorerLink.js.map +1 -0
  170. package/dist/web3/ConnectWallet/ConnectWallet.d.ts +35 -0
  171. package/dist/web3/ConnectWallet/ConnectWallet.d.ts.map +1 -0
  172. package/dist/web3/ConnectWallet/ConnectWallet.js +58 -0
  173. package/dist/web3/ConnectWallet/ConnectWallet.js.map +1 -0
  174. package/dist/web3/DisconnectButton/DisconnectButton.d.ts +30 -0
  175. package/dist/web3/DisconnectButton/DisconnectButton.d.ts.map +1 -0
  176. package/dist/web3/DisconnectButton/DisconnectButton.js +48 -0
  177. package/dist/web3/DisconnectButton/DisconnectButton.js.map +1 -0
  178. package/dist/web3/WalletBalance/WalletBalance.d.ts +27 -0
  179. package/dist/web3/WalletBalance/WalletBalance.d.ts.map +1 -0
  180. package/dist/web3/WalletBalance/WalletBalance.js +49 -0
  181. package/dist/web3/WalletBalance/WalletBalance.js.map +1 -0
  182. package/dist/web3/WalletDropdown/WalletDropdown.d.ts +29 -0
  183. package/dist/web3/WalletDropdown/WalletDropdown.d.ts.map +1 -0
  184. package/dist/web3/WalletDropdown/WalletDropdown.js +93 -0
  185. package/dist/web3/WalletDropdown/WalletDropdown.js.map +1 -0
  186. package/dist/web3/WalletInfo/WalletInfo.d.ts +31 -0
  187. package/dist/web3/WalletInfo/WalletInfo.d.ts.map +1 -0
  188. package/dist/web3/WalletInfo/WalletInfo.js +41 -0
  189. package/dist/web3/WalletInfo/WalletInfo.js.map +1 -0
  190. package/dist/web3/index.d.ts +11 -0
  191. package/dist/web3/index.d.ts.map +1 -0
  192. package/dist/web3/index.js +14 -0
  193. package/dist/web3/index.js.map +1 -0
  194. package/package.json +4 -3
@@ -0,0 +1,93 @@
1
+ import React, { useState, useRef, useEffect } from 'react';
2
+ import { useActiveAccount, useDisconnect, useActiveWallet } from 'thirdweb/react';
3
+ import { formatAddress } from '../../config/chains';
4
+ import { WalletBalance } from '../WalletBalance/WalletBalance';
5
+ /**
6
+ * Wallet Dropdown Menu Component
7
+ *
8
+ * Displays a dropdown menu with wallet information and actions:
9
+ * - Address
10
+ * - Balance
11
+ * - Copy address
12
+ * - View on explorer
13
+ * - Disconnect
14
+ *
15
+ * @example
16
+ * ```tsx
17
+ * import { WalletDropdown } from '@varity-labs/ui-kit';
18
+ *
19
+ * function Header() {
20
+ * return (
21
+ * <WalletDropdown
22
+ * onDisconnect={() => console.log('Disconnected')}
23
+ * />
24
+ * );
25
+ * }
26
+ * ```
27
+ */
28
+ export function WalletDropdown({ onDisconnect, className = '', }) {
29
+ const account = useActiveAccount();
30
+ const wallet = useActiveWallet();
31
+ const { disconnect } = useDisconnect();
32
+ const [isOpen, setIsOpen] = useState(false);
33
+ const dropdownRef = useRef(null);
34
+ const address = account?.address;
35
+ // Close dropdown when clicking outside
36
+ useEffect(() => {
37
+ const handleClickOutside = (event) => {
38
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
39
+ setIsOpen(false);
40
+ }
41
+ };
42
+ document.addEventListener('mousedown', handleClickOutside);
43
+ return () => document.removeEventListener('mousedown', handleClickOutside);
44
+ }, []);
45
+ if (!account || !address) {
46
+ return null;
47
+ }
48
+ const handleDisconnect = async () => {
49
+ if (wallet) {
50
+ await disconnect(wallet);
51
+ }
52
+ setIsOpen(false);
53
+ if (onDisconnect) {
54
+ onDisconnect();
55
+ }
56
+ };
57
+ const copyAddress = () => {
58
+ navigator.clipboard.writeText(address);
59
+ // Could add toast notification here
60
+ setIsOpen(false);
61
+ };
62
+ const viewOnExplorer = () => {
63
+ window.open(`https://sepolia.arbiscan.io/address/${address}`, '_blank');
64
+ setIsOpen(false);
65
+ };
66
+ return (React.createElement("div", { className: `relative ${className}`, ref: dropdownRef },
67
+ React.createElement("button", { onClick: () => setIsOpen(!isOpen), className: "btn btn-secondary flex items-center gap-2" },
68
+ React.createElement("div", { className: "w-6 h-6 rounded-full bg-gradient-to-br from-varity-primary to-varity-secondary flex items-center justify-center" },
69
+ React.createElement("span", { className: "text-white text-xs font-bold" }, address.slice(2, 4).toUpperCase())),
70
+ React.createElement("span", { className: "truncate-address" }, formatAddress(address)),
71
+ React.createElement("svg", { className: `w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
72
+ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))),
73
+ isOpen && (React.createElement("div", { className: "absolute right-0 mt-2 w-64 bg-white dark:bg-gray-900 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50" },
74
+ React.createElement("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700" },
75
+ React.createElement("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1" }, "Balance"),
76
+ React.createElement(WalletBalance, { showSymbol: true, decimals: 2 }),
77
+ React.createElement("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-2" }, "Address"),
78
+ React.createElement("p", { className: "truncate-address text-sm" }, formatAddress(address, 10, 8))),
79
+ React.createElement("div", { className: "py-1" },
80
+ React.createElement("button", { onClick: copyAddress, className: "w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-2" },
81
+ React.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
82
+ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" })),
83
+ "Copy address"),
84
+ React.createElement("button", { onClick: viewOnExplorer, className: "w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-2" },
85
+ React.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
86
+ 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" })),
87
+ "View on explorer"),
88
+ React.createElement("button", { onClick: handleDisconnect, className: "w-full px-4 py-2 text-left text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-2" },
89
+ React.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
90
+ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" })),
91
+ "Disconnect"))))));
92
+ }
93
+ //# sourceMappingURL=WalletDropdown.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"WalletDropdown.js","sourceRoot":"","sources":["../../../src/web3/WalletDropdown/WalletDropdown.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,31 @@
1
+ export interface WalletInfoProps {
2
+ showAvatar?: boolean;
3
+ showBalance?: boolean;
4
+ format?: 'short' | 'full';
5
+ className?: string;
6
+ }
7
+ /**
8
+ * Wallet Info Display Component
9
+ *
10
+ * Displays connected wallet information including:
11
+ * - Wallet address (formatted)
12
+ * - Avatar/identicon
13
+ * - Balance (optional)
14
+ *
15
+ * @example
16
+ * ```tsx
17
+ * import { WalletInfo } from '@varity-labs/ui-kit';
18
+ *
19
+ * function Dashboard() {
20
+ * return (
21
+ * <WalletInfo
22
+ * showAvatar
23
+ * showBalance
24
+ * format="short"
25
+ * />
26
+ * );
27
+ * }
28
+ * ```
29
+ */
30
+ export declare function WalletInfo({ showAvatar, showBalance, format, className, }: WalletInfoProps): JSX.Element | null;
31
+ //# sourceMappingURL=WalletInfo.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"WalletInfo.d.ts","sourceRoot":"","sources":["../../../src/web3/WalletInfo/WalletInfo.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,EACzB,UAAiB,EACjB,WAAmB,EACnB,MAAgB,EAChB,SAAc,GACf,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6BtC"}
@@ -0,0 +1,41 @@
1
+ import React from 'react';
2
+ import { useActiveAccount } from 'thirdweb/react';
3
+ import { formatAddress } from '../../config/chains';
4
+ /**
5
+ * Wallet Info Display Component
6
+ *
7
+ * Displays connected wallet information including:
8
+ * - Wallet address (formatted)
9
+ * - Avatar/identicon
10
+ * - Balance (optional)
11
+ *
12
+ * @example
13
+ * ```tsx
14
+ * import { WalletInfo } from '@varity-labs/ui-kit';
15
+ *
16
+ * function Dashboard() {
17
+ * return (
18
+ * <WalletInfo
19
+ * showAvatar
20
+ * showBalance
21
+ * format="short"
22
+ * />
23
+ * );
24
+ * }
25
+ * ```
26
+ */
27
+ export function WalletInfo({ showAvatar = true, showBalance = false, format = 'short', className = '', }) {
28
+ const account = useActiveAccount();
29
+ if (!account) {
30
+ return null;
31
+ }
32
+ const address = account.address;
33
+ const displayAddress = format === 'short' ? formatAddress(address) : address;
34
+ return (React.createElement("div", { className: `flex items-center gap-3 ${className}` },
35
+ showAvatar && (React.createElement("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-varity-primary to-varity-secondary flex items-center justify-center" },
36
+ React.createElement("span", { className: "text-white text-xs font-bold" }, address.slice(2, 4).toUpperCase()))),
37
+ React.createElement("div", { className: "flex flex-col" },
38
+ React.createElement("span", { className: "truncate-address font-medium" }, displayAddress),
39
+ showBalance && (React.createElement("span", { className: "text-xs text-gray-500 dark:text-gray-400" }, "Loading balance...")))));
40
+ }
41
+ //# sourceMappingURL=WalletInfo.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"WalletInfo.js","sourceRoot":"","sources":["../../../src/web3/WalletInfo/WalletInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AASpD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,UAAU,GAAG,IAAI,EACjB,WAAW,GAAG,KAAK,EACnB,MAAM,GAAG,OAAO,EAChB,SAAS,GAAG,EAAE,GACE;IAChB,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAChC,MAAM,cAAc,GAAG,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAE7E,OAAO,CACL,6BAAK,SAAS,EAAE,2BAA2B,SAAS,EAAE;QACnD,UAAU,IAAI,CACb,6BAAK,SAAS,EAAC,iHAAiH;YAC9H,8BAAM,SAAS,EAAC,8BAA8B,IAC3C,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAC7B,CACH,CACP;QACD,6BAAK,SAAS,EAAC,eAAe;YAC5B,8BAAM,SAAS,EAAC,8BAA8B,IAAE,cAAc,CAAQ;YACrE,WAAW,IAAI,CACd,8BAAM,SAAS,EAAC,0CAA0C,yBAEnD,CACR,CACG,CACF,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,11 @@
1
+ export { ConnectWallet, type ConnectWalletProps } from './ConnectWallet/ConnectWallet';
2
+ export { WalletInfo, type WalletInfoProps } from './WalletInfo/WalletInfo';
3
+ export { WalletBalance, type WalletBalanceProps } from './WalletBalance/WalletBalance';
4
+ export { WalletDropdown, type WalletDropdownProps } from './WalletDropdown/WalletDropdown';
5
+ export { DisconnectButton, type DisconnectButtonProps } from './DisconnectButton/DisconnectButton';
6
+ export { AddressDisplay, type AddressDisplayProps } from './AddressDisplay/AddressDisplay';
7
+ export { BalanceDisplay, type BalanceDisplayProps } from './BalanceDisplay/BalanceDisplay';
8
+ export { BlockExplorerLink, type BlockExplorerLinkProps } from './BlockExplorerLink/BlockExplorerLink';
9
+ export { AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
10
+ export { AddressInput, type AddressInputProps } from './AddressInput/AddressInput';
11
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/web3/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAGnG,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAGvG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC"}
@@ -0,0 +1,14 @@
1
+ // Wallet Components
2
+ export { ConnectWallet } from './ConnectWallet/ConnectWallet';
3
+ export { WalletInfo } from './WalletInfo/WalletInfo';
4
+ export { WalletBalance } from './WalletBalance/WalletBalance';
5
+ export { WalletDropdown } from './WalletDropdown/WalletDropdown';
6
+ export { DisconnectButton } from './DisconnectButton/DisconnectButton';
7
+ // Display Components
8
+ export { AddressDisplay } from './AddressDisplay/AddressDisplay';
9
+ export { BalanceDisplay } from './BalanceDisplay/BalanceDisplay';
10
+ export { BlockExplorerLink } from './BlockExplorerLink/BlockExplorerLink';
11
+ // Form Components
12
+ export { AmountInput } from './AmountInput/AmountInput';
13
+ export { AddressInput } from './AddressInput/AddressInput';
14
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/web3/index.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,UAAU,EAAwB,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,cAAc,EAA4B,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAA8B,MAAM,qCAAqC,CAAC;AAEnG,qBAAqB;AACrB,OAAO,EAAE,cAAc,EAA4B,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAE,cAAc,EAA4B,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAE,iBAAiB,EAA+B,MAAM,uCAAuC,CAAC;AAEvG,kBAAkB;AAClB,OAAO,EAAE,WAAW,EAAyB,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,YAAY,EAA0B,MAAM,6BAA6B,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@varity-labs/ui-kit",
3
- "version": "2.0.0-beta.8",
3
+ "version": "2.0.0-beta.9",
4
4
  "description": "React component library for building applications with Varity - Auth, payments, dashboard components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -58,8 +58,8 @@
58
58
  "dependencies": {
59
59
  "@privy-io/react-auth": "^1.88.4",
60
60
  "@tanstack/react-query": "^5.59.0",
61
- "@varity-labs/sdk": "*",
62
- "@varity-labs/types": "*",
61
+ "@varity-labs/sdk": "workspace:^",
62
+ "@varity-labs/types": "workspace:^",
63
63
  "lucide-react": "^0.554.0",
64
64
  "react-hot-toast": "^2.6.0"
65
65
  },
@@ -77,6 +77,7 @@
77
77
  "react-dom": "^18.2.0"
78
78
  },
79
79
  "devDependencies": {
80
+ "thirdweb": "^5.112.0",
80
81
  "@storybook/addon-essentials": "^7.6.0",
81
82
  "@storybook/addon-interactions": "^7.6.0",
82
83
  "@storybook/addon-links": "^7.6.0",