@b3dotfun/sdk 0.0.58 → 0.0.59-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/anyspend/abis/upsideStaking.d.ts +1 -1030
- package/dist/cjs/anyspend/abis/upsideStaking.js +2 -570
- package/dist/cjs/anyspend/react/components/AnySpendStakeUpside.d.ts +1 -2
- package/dist/cjs/anyspend/react/components/AnySpendStakeUpside.js +8 -18
- package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js +4 -0
- package/dist/cjs/anyspend/utils/accountStore.d.ts +7 -0
- package/dist/cjs/anyspend/utils/accountStore.js +8 -0
- package/dist/cjs/anyspend/utils/index.d.ts +1 -0
- package/dist/cjs/anyspend/utils/index.js +1 -0
- package/dist/cjs/global-account/react/components/B3DynamicModal.js +17 -0
- package/dist/cjs/global-account/react/hooks/useWagmiConfig.d.ts +441 -1
- package/dist/cjs/global-account/react/hooks/useWagmiConfig.js +2 -0
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +0 -2
- package/dist/cjs/shared/react/components/CurrencySelector.js +8 -3
- package/dist/cjs/shared/react/components/FormattedCurrency.d.ts +3 -3
- package/dist/cjs/shared/react/components/FormattedCurrency.js +31 -26
- package/dist/cjs/shared/react/hooks/useCurrencyConversion.d.ts +8 -5
- package/dist/cjs/shared/react/hooks/useCurrencyConversion.js +153 -94
- package/dist/cjs/shared/react/stores/currencyStore.d.ts +83 -8
- package/dist/cjs/shared/react/stores/currencyStore.js +147 -5
- package/dist/esm/anyspend/abis/upsideStaking.d.ts +1 -1030
- package/dist/esm/anyspend/abis/upsideStaking.js +1 -569
- package/dist/esm/anyspend/react/components/AnySpendStakeUpside.d.ts +1 -2
- package/dist/esm/anyspend/react/components/AnySpendStakeUpside.js +9 -19
- package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +5 -1
- package/dist/esm/anyspend/utils/accountStore.d.ts +7 -0
- package/dist/esm/anyspend/utils/accountStore.js +5 -0
- package/dist/esm/anyspend/utils/index.d.ts +1 -0
- package/dist/esm/anyspend/utils/index.js +1 -0
- package/dist/esm/global-account/react/components/B3DynamicModal.js +17 -0
- package/dist/esm/global-account/react/hooks/useWagmiConfig.d.ts +441 -1
- package/dist/esm/global-account/react/hooks/useWagmiConfig.js +2 -0
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +0 -2
- package/dist/esm/shared/react/components/CurrencySelector.js +10 -5
- package/dist/esm/shared/react/components/FormattedCurrency.d.ts +3 -3
- package/dist/esm/shared/react/components/FormattedCurrency.js +31 -26
- package/dist/esm/shared/react/hooks/useCurrencyConversion.d.ts +8 -5
- package/dist/esm/shared/react/hooks/useCurrencyConversion.js +154 -95
- package/dist/esm/shared/react/stores/currencyStore.d.ts +83 -8
- package/dist/esm/shared/react/stores/currencyStore.js +143 -5
- package/dist/types/anyspend/abis/upsideStaking.d.ts +1 -1030
- package/dist/types/anyspend/react/components/AnySpendStakeUpside.d.ts +1 -2
- package/dist/types/anyspend/utils/accountStore.d.ts +7 -0
- package/dist/types/anyspend/utils/index.d.ts +1 -0
- package/dist/types/global-account/react/hooks/useWagmiConfig.d.ts +441 -1
- package/dist/types/global-account/react/stores/useModalStore.d.ts +0 -2
- package/dist/types/shared/react/components/FormattedCurrency.d.ts +3 -3
- package/dist/types/shared/react/hooks/useCurrencyConversion.d.ts +8 -5
- package/dist/types/shared/react/stores/currencyStore.d.ts +83 -8
- package/package.json +4 -3
- package/src/anyspend/abis/upsideStaking.ts +1 -570
- package/src/anyspend/react/components/AnySpendStakeUpside.tsx +8 -19
- package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +6 -2
- package/src/anyspend/utils/accountStore.ts +12 -0
- package/src/anyspend/utils/index.ts +1 -0
- package/src/global-account/react/components/B3DynamicModal.tsx +20 -0
- package/src/global-account/react/hooks/useWagmiConfig.tsx +2 -0
- package/src/global-account/react/stores/useModalStore.ts +0 -2
- package/src/shared/react/components/CurrencySelector.tsx +36 -5
- package/src/shared/react/components/FormattedCurrency.tsx +36 -30
- package/src/shared/react/hooks/__tests__/useCurrencyConversion.test.ts +14 -14
- package/src/shared/react/hooks/useCurrencyConversion.ts +163 -96
- package/src/shared/react/stores/currencyStore.ts +216 -10
|
@@ -8,21 +8,30 @@ const utils_1 = require("../../../shared/utils");
|
|
|
8
8
|
const tooltip_1 = require("../../../global-account/react/components/ui/tooltip");
|
|
9
9
|
const useCurrencyConversion_1 = require("../hooks/useCurrencyConversion");
|
|
10
10
|
const currencyModalStore_1 = require("../stores/currencyModalStore");
|
|
11
|
-
|
|
11
|
+
const currencyStore_1 = require("../stores/currencyStore");
|
|
12
|
+
function FormattedCurrency({ amount, sourceCurrency, showChange = false, showColor = false, className, subB3Icon = true, clickable = true, decimals, }) {
|
|
12
13
|
const { formatCurrencyValue, formatTooltipValue, selectedCurrency, baseCurrency } = (0, useCurrencyConversion_1.useCurrencyConversion)();
|
|
13
14
|
const { openModal } = (0, currencyModalStore_1.useCurrencyModalStore)();
|
|
14
|
-
//
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
//
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
15
|
+
// Convert from smallest unit to human-readable using currency's decimal places
|
|
16
|
+
const decimalPlaces = (0, currencyStore_1.getCurrencyDecimalPlaces)(sourceCurrency);
|
|
17
|
+
const divisor = Math.pow(10, decimalPlaces);
|
|
18
|
+
// Parse amount - handle both string and numeric inputs, including negatives
|
|
19
|
+
let parsedAmount;
|
|
20
|
+
if (typeof amount === "string") {
|
|
21
|
+
// Handle BigInt strings and negative values
|
|
22
|
+
const numericAmount = amount.startsWith("-") ? -Math.abs(parseFloat(amount.replace("-", ""))) : parseFloat(amount);
|
|
23
|
+
parsedAmount = numericAmount / divisor;
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
parsedAmount = amount / divisor;
|
|
27
|
+
}
|
|
28
|
+
const isPositive = parsedAmount >= 0;
|
|
29
|
+
// Always format with absolute value, we'll add the sign separately
|
|
30
|
+
const absoluteAmount = Math.abs(parsedAmount);
|
|
31
|
+
// Format value with automatic conversion from source to display currency
|
|
32
|
+
const formattedValue = formatCurrencyValue(absoluteAmount, sourceCurrency, { decimals });
|
|
24
33
|
// Generate tooltip using the centralized hook function
|
|
25
|
-
const baseTooltipValue = formatTooltipValue(
|
|
34
|
+
const baseTooltipValue = formatTooltipValue(parsedAmount, sourceCurrency);
|
|
26
35
|
// Add change indicator if needed
|
|
27
36
|
const tooltipValue = showChange ? `${isPositive ? "+" : "-"}${baseTooltipValue}` : baseTooltipValue;
|
|
28
37
|
// Determine color class
|
|
@@ -35,26 +44,22 @@ function FormattedCurrency({ amount, showChange = false, showColor = false, clas
|
|
|
35
44
|
colorClass = "text-red-400";
|
|
36
45
|
}
|
|
37
46
|
}
|
|
38
|
-
//
|
|
47
|
+
// Build display value with appropriate sign
|
|
39
48
|
let displayValue = formattedValue;
|
|
40
49
|
if (showChange) {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
50
|
+
// Add +/- prefix for change indicators
|
|
51
|
+
displayValue = `${isPositive ? "+" : "-"}${formattedValue}`;
|
|
52
|
+
}
|
|
53
|
+
else if (!isPositive) {
|
|
54
|
+
// Add minus sign for negative values
|
|
55
|
+
displayValue = `-${formattedValue}`;
|
|
47
56
|
}
|
|
48
57
|
const handleClick = () => {
|
|
49
58
|
if (clickable) {
|
|
50
59
|
openModal();
|
|
51
60
|
}
|
|
52
61
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
? displayValue.split(" ")[0]
|
|
57
|
-
: displayValue, subB3Icon &&
|
|
58
|
-
(currency === baseCurrency || (!currency && activeCurrency === baseCurrency)) &&
|
|
59
|
-
baseCurrency === "B3" && ((0, jsx_runtime_1.jsx)("img", { src: currency_1.B3_COIN_IMAGE_URL, className: "inline-block h-4 w-4 align-middle", alt: "B3 coin" }))] }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: tooltipValue })] }));
|
|
62
|
+
// Check if we should show B3 icon (when displaying in B3 and baseCurrency is B3)
|
|
63
|
+
const shouldShowB3Icon = subB3Icon && selectedCurrency === "B3" && baseCurrency === "B3";
|
|
64
|
+
return ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("span", { onClick: handleClick, className: (0, utils_1.cn)("inline-flex items-center gap-1 whitespace-nowrap", colorClass, className, clickable && "cursor-pointer transition-opacity hover:opacity-80"), children: [shouldShowB3Icon ? displayValue.split(" ")[0] : displayValue, shouldShowB3Icon && ((0, jsx_runtime_1.jsx)("img", { src: currency_1.B3_COIN_IMAGE_URL, className: "inline-block h-4 w-4 align-middle", alt: "B3 coin" }))] }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: tooltipValue })] }));
|
|
60
65
|
}
|
|
@@ -16,20 +16,23 @@
|
|
|
16
16
|
*/
|
|
17
17
|
export declare function useCurrencyConversion(): {
|
|
18
18
|
/** Currently selected display currency */
|
|
19
|
-
selectedCurrency:
|
|
19
|
+
selectedCurrency: string;
|
|
20
20
|
/** Base currency used for conversion (typically B3) */
|
|
21
|
-
baseCurrency:
|
|
21
|
+
baseCurrency: string;
|
|
22
22
|
/** Current exchange rate from base to selected currency (undefined while loading) */
|
|
23
23
|
exchangeRate: number | undefined;
|
|
24
24
|
/** Format a value with currency conversion and proper symbol/decimal handling */
|
|
25
|
-
formatCurrencyValue: (value: number, options?: {
|
|
25
|
+
formatCurrencyValue: (value: number, sourceCurrency: string, options?: {
|
|
26
26
|
decimals?: number;
|
|
27
|
-
currency?: string;
|
|
28
27
|
}) => string;
|
|
29
28
|
/** Format a tooltip value showing alternate currency representation */
|
|
30
|
-
formatTooltipValue: (value: number,
|
|
29
|
+
formatTooltipValue: (value: number, sourceCurrency: string) => string;
|
|
31
30
|
/** Symbol for the currently selected currency (e.g., "$", "€", "ETH") */
|
|
32
31
|
selectedCurrencySymbol: string;
|
|
33
32
|
/** Symbol for the base currency */
|
|
34
33
|
baseCurrencySymbol: string;
|
|
34
|
+
/** Get exchange rate between any two currencies */
|
|
35
|
+
getExchangeRate: (from: string, to: string) => number | undefined;
|
|
36
|
+
/** All registered custom currencies */
|
|
37
|
+
customCurrencies: Record<string, import("../stores/currencyStore").CurrencyMetadata>;
|
|
35
38
|
};
|
|
@@ -40,8 +40,10 @@ async function fetchAllExchangeRates(baseCurrency) {
|
|
|
40
40
|
function useCurrencyConversion() {
|
|
41
41
|
const selectedCurrency = (0, currencyStore_1.useCurrencyStore)(state => state.selectedCurrency);
|
|
42
42
|
const baseCurrency = (0, currencyStore_1.useCurrencyStore)(state => state.baseCurrency);
|
|
43
|
-
|
|
44
|
-
const
|
|
43
|
+
const getCustomExchangeRate = (0, currencyStore_1.useCurrencyStore)(state => state.getExchangeRate);
|
|
44
|
+
const customCurrencies = (0, currencyStore_1.useCurrencyStore)(state => state.customCurrencies);
|
|
45
|
+
// Fetch all exchange rates for the base currency from Coinbase API
|
|
46
|
+
const { data: apiExchangeRates } = (0, react_query_1.useQuery)({
|
|
45
47
|
queryKey: ["exchangeRates", baseCurrency],
|
|
46
48
|
queryFn: () => fetchAllExchangeRates(baseCurrency),
|
|
47
49
|
refetchInterval: REFETCH_INTERVAL_MS,
|
|
@@ -49,155 +51,208 @@ function useCurrencyConversion() {
|
|
|
49
51
|
retry: 3,
|
|
50
52
|
retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, REFETCH_INTERVAL_MS),
|
|
51
53
|
});
|
|
52
|
-
// Extract specific rates from the full rates object
|
|
53
|
-
const exchangeRate = exchangeRates?.[selectedCurrency];
|
|
54
|
-
const usdRate = exchangeRates?.["USD"];
|
|
55
54
|
/**
|
|
56
|
-
*
|
|
55
|
+
* Get exchange rate between two currencies, checking custom rates first, then API rates.
|
|
56
|
+
* Supports chaining through base currency for custom currencies.
|
|
57
57
|
*
|
|
58
|
-
*
|
|
59
|
-
* -
|
|
60
|
-
* -
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
* Examples:
|
|
59
|
+
* - WIN → USD: Checks WIN→USD custom rate, then chains WIN→B3→USD
|
|
60
|
+
* - BTC → EUR: Checks BTC→EUR custom rate, then chains BTC→B3→EUR
|
|
61
|
+
*/
|
|
62
|
+
const getExchangeRate = (from, to) => {
|
|
63
|
+
// If same currency, rate is 1
|
|
64
|
+
if (from === to)
|
|
65
|
+
return 1;
|
|
66
|
+
// 1. Check direct custom exchange rate first
|
|
67
|
+
const directCustomRate = getCustomExchangeRate(from, to);
|
|
68
|
+
if (directCustomRate !== undefined) {
|
|
69
|
+
return directCustomRate;
|
|
70
|
+
}
|
|
71
|
+
// 2. Check direct API rate (from base currency)
|
|
72
|
+
if (from === baseCurrency && apiExchangeRates) {
|
|
73
|
+
return apiExchangeRates[to];
|
|
74
|
+
}
|
|
75
|
+
// 3. Try to chain through base currency using custom rates
|
|
76
|
+
// e.g., WIN → B3 → USD (where WIN→B3 is custom, B3→USD is API)
|
|
77
|
+
const customFromToBase = getCustomExchangeRate(from, baseCurrency);
|
|
78
|
+
if (customFromToBase !== undefined) {
|
|
79
|
+
// We have a custom rate from 'from' to base
|
|
80
|
+
// Now get rate from base to 'to'
|
|
81
|
+
const baseToTo = apiExchangeRates?.[to] ?? getCustomExchangeRate(baseCurrency, to);
|
|
82
|
+
if (baseToTo !== undefined) {
|
|
83
|
+
return customFromToBase * baseToTo;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
// 4. Try reverse: chain from base currency through custom rate
|
|
87
|
+
// e.g., USD → B3 → WIN (where B3→WIN is custom)
|
|
88
|
+
const customBaseToTo = getCustomExchangeRate(baseCurrency, to);
|
|
89
|
+
if (customBaseToTo !== undefined && apiExchangeRates) {
|
|
90
|
+
// We have a custom rate from base to 'to'
|
|
91
|
+
// Now get rate from 'from' to base
|
|
92
|
+
const fromToBase = apiExchangeRates[from];
|
|
93
|
+
if (fromToBase !== undefined && fromToBase !== 0) {
|
|
94
|
+
return fromToBase * customBaseToTo;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
// 5. Fall back to pure API conversion through base
|
|
98
|
+
// e.g., EUR to GBP = (EUR to B3) * (B3 to GBP)
|
|
99
|
+
if (apiExchangeRates) {
|
|
100
|
+
const fromToBase = apiExchangeRates[from];
|
|
101
|
+
const baseToTo = apiExchangeRates[to];
|
|
102
|
+
if (fromToBase && baseToTo && fromToBase !== 0) {
|
|
103
|
+
return baseToTo / fromToBase;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
return undefined;
|
|
107
|
+
};
|
|
108
|
+
// Extract specific rates
|
|
109
|
+
const exchangeRate = getExchangeRate(baseCurrency, selectedCurrency);
|
|
110
|
+
/**
|
|
111
|
+
* Formats a numeric value as a currency string with automatic conversion.
|
|
112
|
+
*
|
|
113
|
+
* New behavior:
|
|
114
|
+
* - Takes the SOURCE currency (what the value is in) as a required parameter
|
|
115
|
+
* - Automatically converts from source → display currency (selected in picker)
|
|
116
|
+
* - Supports multi-hop conversions (e.g., WIN → B3 → USD)
|
|
117
|
+
* - Applies currency-specific formatting rules to the TARGET currency
|
|
65
118
|
*
|
|
66
|
-
* @param value - The numeric value to format
|
|
119
|
+
* @param value - The numeric value to format
|
|
120
|
+
* @param sourceCurrency - The currency the value is currently in (e.g., "WIN", "B3", "USD")
|
|
67
121
|
* @param options - Optional formatting overrides
|
|
68
|
-
* @param options.decimals - Override number of decimal places
|
|
69
|
-
* @param options.currency - Override currency (bypasses conversion)
|
|
122
|
+
* @param options.decimals - Override number of decimal places for display
|
|
70
123
|
* @returns Formatted currency string with appropriate symbol and decimal places
|
|
71
124
|
*
|
|
72
125
|
* @example
|
|
73
126
|
* ```tsx
|
|
74
|
-
*
|
|
75
|
-
* formatCurrencyValue(
|
|
76
|
-
*
|
|
77
|
-
*
|
|
127
|
+
* // Value is 3031 WIN, user has USD selected
|
|
128
|
+
* formatCurrencyValue(3031, "WIN") // Returns "$30.31" (converts WIN→B3→USD)
|
|
129
|
+
*
|
|
130
|
+
* // Value is 100 B3, user has B3 selected (no conversion)
|
|
131
|
+
* formatCurrencyValue(100, "B3") // Returns "100 B3"
|
|
132
|
+
*
|
|
133
|
+
* // Value is 50 USD, user has EUR selected
|
|
134
|
+
* formatCurrencyValue(50, "USD") // Returns "€45.50" (converts USD→EUR)
|
|
78
135
|
* ```
|
|
79
136
|
*/
|
|
80
|
-
const formatCurrencyValue = (value, options) => {
|
|
81
|
-
const overrideCurrency = options?.currency;
|
|
137
|
+
const formatCurrencyValue = (value, sourceCurrency, options) => {
|
|
82
138
|
const overrideDecimals = options?.decimals;
|
|
83
|
-
//
|
|
84
|
-
if (
|
|
85
|
-
const
|
|
139
|
+
// If source and display currency are the same, no conversion needed
|
|
140
|
+
if (sourceCurrency === selectedCurrency) {
|
|
141
|
+
const customMetadata = (0, currencyStore_1.getCurrencyMetadata)(sourceCurrency);
|
|
142
|
+
const decimalsToUse = overrideDecimals !== undefined ? overrideDecimals : customMetadata?.decimals;
|
|
86
143
|
const formatted = (0, number_1.formatDisplayNumber)(value, {
|
|
87
144
|
fractionDigits: decimalsToUse,
|
|
88
|
-
|
|
145
|
+
significantDigits: decimalsToUse === undefined ? 6 : undefined,
|
|
146
|
+
showSubscripts: customMetadata?.showSubscripts ?? false,
|
|
89
147
|
});
|
|
90
|
-
|
|
148
|
+
const symbol = (0, currencyStore_1.getCurrencySymbol)(sourceCurrency);
|
|
149
|
+
const usePrefix = customMetadata?.prefixSymbol ?? ["USD", "EUR", "GBP", "CAD", "AUD"].includes(sourceCurrency);
|
|
150
|
+
return usePrefix ? `${symbol}${formatted}` : `${formatted} ${symbol}`;
|
|
91
151
|
}
|
|
92
|
-
//
|
|
93
|
-
|
|
152
|
+
// Get exchange rate from source to display currency
|
|
153
|
+
const conversionRate = getExchangeRate(sourceCurrency, selectedCurrency);
|
|
154
|
+
// If no conversion rate available, display in source currency
|
|
155
|
+
if (conversionRate === undefined) {
|
|
156
|
+
const customMetadata = (0, currencyStore_1.getCurrencyMetadata)(sourceCurrency);
|
|
94
157
|
const formatted = (0, number_1.formatDisplayNumber)(value, {
|
|
158
|
+
significantDigits: 6,
|
|
159
|
+
showSubscripts: customMetadata?.showSubscripts ?? false,
|
|
160
|
+
});
|
|
161
|
+
const symbol = (0, currencyStore_1.getCurrencySymbol)(sourceCurrency);
|
|
162
|
+
return `${formatted} ${symbol}`;
|
|
163
|
+
}
|
|
164
|
+
// Convert value
|
|
165
|
+
const convertedValue = value * conversionRate;
|
|
166
|
+
// Get symbol and metadata for display currency
|
|
167
|
+
const symbol = (0, currencyStore_1.getCurrencySymbol)(selectedCurrency);
|
|
168
|
+
const customMetadata = (0, currencyStore_1.getCurrencyMetadata)(selectedCurrency);
|
|
169
|
+
const usePrefix = customMetadata?.prefixSymbol ?? ["USD", "EUR", "GBP", "CAD", "AUD"].includes(selectedCurrency);
|
|
170
|
+
let formatted;
|
|
171
|
+
// Apply formatting based on display currency
|
|
172
|
+
if (overrideDecimals !== undefined) {
|
|
173
|
+
formatted = (0, number_1.formatDisplayNumber)(convertedValue, {
|
|
95
174
|
fractionDigits: overrideDecimals,
|
|
96
175
|
showSubscripts: false,
|
|
97
176
|
});
|
|
98
|
-
return `${formatted} ${baseCurrency}`;
|
|
99
177
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
significantDigits:
|
|
104
|
-
showSubscripts:
|
|
178
|
+
else if (customMetadata) {
|
|
179
|
+
formatted = (0, number_1.formatDisplayNumber)(convertedValue, {
|
|
180
|
+
fractionDigits: customMetadata.decimals,
|
|
181
|
+
significantDigits: customMetadata.decimals === undefined ? 6 : undefined,
|
|
182
|
+
showSubscripts: customMetadata.showSubscripts ?? false,
|
|
105
183
|
});
|
|
106
|
-
return `${formatted} ${baseCurrency}`;
|
|
107
184
|
}
|
|
108
|
-
|
|
109
|
-
const convertedValue = value * exchangeRate;
|
|
110
|
-
const symbol = currencyStore_1.CURRENCY_SYMBOLS[selectedCurrency];
|
|
111
|
-
// Currencies that display symbol before the number (e.g., $100.00)
|
|
112
|
-
const prefixCurrencies = ["USD", "EUR", "GBP", "CAD", "AUD"];
|
|
113
|
-
let formatted;
|
|
114
|
-
if (selectedCurrency === "JPY" || selectedCurrency === "KRW") {
|
|
115
|
-
// Japanese Yen and Korean Won don't use decimal places
|
|
185
|
+
else if (selectedCurrency === "JPY" || selectedCurrency === "KRW") {
|
|
116
186
|
formatted = (0, number_1.formatDisplayNumber)(convertedValue, {
|
|
117
187
|
fractionDigits: 0,
|
|
118
188
|
showSubscripts: false,
|
|
119
189
|
});
|
|
120
190
|
}
|
|
121
191
|
else if (selectedCurrency === "ETH" || selectedCurrency === "SOL") {
|
|
122
|
-
// Crypto currencies use more precision and subscript notation
|
|
123
|
-
// for very small amounts (e.g., 0.0₃45 ETH)
|
|
124
192
|
formatted = (0, number_1.formatDisplayNumber)(convertedValue, {
|
|
125
193
|
significantDigits: 6,
|
|
126
194
|
showSubscripts: true,
|
|
127
195
|
});
|
|
128
196
|
}
|
|
129
197
|
else {
|
|
130
|
-
// Standard fiat currencies (USD, EUR, GBP, CAD, AUD)
|
|
131
|
-
// Use 2 decimal places minimum for amounts under 1000
|
|
132
198
|
formatted = (0, number_1.formatDisplayNumber)(convertedValue, {
|
|
133
199
|
significantDigits: 6,
|
|
134
200
|
fractionDigits: convertedValue < 1000 ? 2 : undefined,
|
|
135
201
|
showSubscripts: true,
|
|
136
202
|
});
|
|
137
203
|
}
|
|
138
|
-
|
|
139
|
-
if (prefixCurrencies.includes(selectedCurrency)) {
|
|
140
|
-
return `${symbol}${formatted}`;
|
|
141
|
-
}
|
|
142
|
-
else {
|
|
143
|
-
// Suffix currencies: JPY, KRW, ETH, SOL, B3
|
|
144
|
-
return `${formatted} ${symbol}`;
|
|
145
|
-
}
|
|
204
|
+
return usePrefix ? `${symbol}${formatted}` : `${formatted} ${symbol}`;
|
|
146
205
|
};
|
|
147
206
|
/**
|
|
148
207
|
* Formats a tooltip value showing the alternate currency representation.
|
|
149
208
|
*
|
|
150
|
-
*
|
|
151
|
-
* -
|
|
152
|
-
* - When displaying
|
|
153
|
-
* -
|
|
209
|
+
* New behavior:
|
|
210
|
+
* - Takes the SOURCE currency (what the value is in)
|
|
211
|
+
* - When displaying in non-USD: Shows USD equivalent in tooltip
|
|
212
|
+
* - When displaying in USD: Shows source currency in tooltip
|
|
154
213
|
*
|
|
155
214
|
* @param value - The numeric value to format
|
|
156
|
-
* @param
|
|
215
|
+
* @param sourceCurrency - The currency the value is currently in
|
|
157
216
|
* @returns Formatted tooltip string
|
|
158
217
|
*
|
|
159
218
|
* @example
|
|
160
219
|
* ```tsx
|
|
161
|
-
*
|
|
162
|
-
* formatTooltipValue(
|
|
220
|
+
* // Value is 3031 WIN, displaying as EUR
|
|
221
|
+
* formatTooltipValue(3031, "WIN") // Returns "$30.31 USD"
|
|
222
|
+
*
|
|
223
|
+
* // Value is 100 B3, displaying as USD
|
|
224
|
+
* formatTooltipValue(100, "B3") // Returns "100 B3"
|
|
163
225
|
* ```
|
|
164
226
|
*/
|
|
165
|
-
const formatTooltipValue = (value,
|
|
166
|
-
const displayCurrency = customCurrency || selectedCurrency;
|
|
227
|
+
const formatTooltipValue = (value, sourceCurrency) => {
|
|
167
228
|
const absoluteValue = Math.abs(value);
|
|
168
|
-
//
|
|
169
|
-
if (
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
showSubscripts: true,
|
|
177
|
-
});
|
|
178
|
-
return `$${formatted} USD`;
|
|
179
|
-
}
|
|
180
|
-
else {
|
|
181
|
-
// Show as-is for other custom currencies
|
|
182
|
-
return `${(0, number_1.formatDisplayNumber)(absoluteValue, { significantDigits: 6 })} ${customCurrency}`;
|
|
183
|
-
}
|
|
229
|
+
// If displaying in USD, show source currency in tooltip
|
|
230
|
+
if (selectedCurrency === "USD") {
|
|
231
|
+
const formatted = (0, number_1.formatDisplayNumber)(absoluteValue, {
|
|
232
|
+
significantDigits: 6,
|
|
233
|
+
showSubscripts: (0, currencyStore_1.getCurrencyMetadata)(sourceCurrency)?.showSubscripts ?? false,
|
|
234
|
+
});
|
|
235
|
+
const symbol = (0, currencyStore_1.getCurrencySymbol)(sourceCurrency);
|
|
236
|
+
return `${formatted} ${symbol}`;
|
|
184
237
|
}
|
|
185
|
-
//
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
238
|
+
// Otherwise, show USD equivalent in tooltip
|
|
239
|
+
const usdRate = getExchangeRate(sourceCurrency, "USD");
|
|
240
|
+
if (usdRate === undefined) {
|
|
241
|
+
// Fallback to source currency if no USD rate
|
|
242
|
+
const formatted = (0, number_1.formatDisplayNumber)(absoluteValue, {
|
|
189
243
|
significantDigits: 6,
|
|
190
|
-
|
|
191
|
-
showSubscripts: true,
|
|
244
|
+
showSubscripts: (0, currencyStore_1.getCurrencyMetadata)(sourceCurrency)?.showSubscripts ?? false,
|
|
192
245
|
});
|
|
193
|
-
|
|
246
|
+
const symbol = (0, currencyStore_1.getCurrencySymbol)(sourceCurrency);
|
|
247
|
+
return `${formatted} ${symbol}`;
|
|
194
248
|
}
|
|
195
|
-
|
|
196
|
-
const formatted = (0, number_1.formatDisplayNumber)(
|
|
197
|
-
significantDigits:
|
|
249
|
+
const usdValue = absoluteValue * usdRate;
|
|
250
|
+
const formatted = (0, number_1.formatDisplayNumber)(usdValue, {
|
|
251
|
+
significantDigits: 6,
|
|
252
|
+
fractionDigits: usdValue < 1000 ? 2 : undefined,
|
|
198
253
|
showSubscripts: true,
|
|
199
254
|
});
|
|
200
|
-
return
|
|
255
|
+
return `$${formatted} USD`;
|
|
201
256
|
};
|
|
202
257
|
return {
|
|
203
258
|
/** Currently selected display currency */
|
|
@@ -211,8 +266,12 @@ function useCurrencyConversion() {
|
|
|
211
266
|
/** Format a tooltip value showing alternate currency representation */
|
|
212
267
|
formatTooltipValue,
|
|
213
268
|
/** Symbol for the currently selected currency (e.g., "$", "€", "ETH") */
|
|
214
|
-
selectedCurrencySymbol: currencyStore_1.
|
|
269
|
+
selectedCurrencySymbol: (0, currencyStore_1.getCurrencySymbol)(selectedCurrency),
|
|
215
270
|
/** Symbol for the base currency */
|
|
216
|
-
baseCurrencySymbol: currencyStore_1.
|
|
271
|
+
baseCurrencySymbol: (0, currencyStore_1.getCurrencySymbol)(baseCurrency),
|
|
272
|
+
/** Get exchange rate between any two currencies */
|
|
273
|
+
getExchangeRate,
|
|
274
|
+
/** All registered custom currencies */
|
|
275
|
+
customCurrencies,
|
|
217
276
|
};
|
|
218
277
|
}
|
|
@@ -1,8 +1,36 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* Built-in supported currencies for display and conversion.
|
|
3
3
|
* Includes fiat currencies (USD, EUR, GBP, JPY, CAD, AUD, KRW) and crypto (ETH, SOL, B3).
|
|
4
4
|
*/
|
|
5
5
|
export type SupportedCurrency = "ETH" | "USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD" | "B3" | "SOL" | "KRW";
|
|
6
|
+
/**
|
|
7
|
+
* Metadata for a custom currency including display formatting rules.
|
|
8
|
+
*/
|
|
9
|
+
export interface CurrencyMetadata {
|
|
10
|
+
/** The currency code/symbol (e.g., "BTC", "DOGE") */
|
|
11
|
+
code: string;
|
|
12
|
+
/** Display symbol for the currency (e.g., "₿", "Ð") */
|
|
13
|
+
symbol: string;
|
|
14
|
+
/** Human-readable name (e.g., "Bitcoin", "Dogecoin") */
|
|
15
|
+
name: string;
|
|
16
|
+
/** Whether to show symbol before the value (true for $100, false for 100 ETH) */
|
|
17
|
+
prefixSymbol?: boolean;
|
|
18
|
+
/** Number of decimal places to show (undefined uses smart formatting) */
|
|
19
|
+
decimals?: number;
|
|
20
|
+
/** Whether to use subscript notation for small values */
|
|
21
|
+
showSubscripts?: boolean;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Exchange rate between two currencies.
|
|
25
|
+
*/
|
|
26
|
+
export interface ExchangeRate {
|
|
27
|
+
/** Currency code being converted from */
|
|
28
|
+
from: string;
|
|
29
|
+
/** Currency code being converted to */
|
|
30
|
+
to: string;
|
|
31
|
+
/** Exchange rate multiplier (amount_in_to = amount_in_from * rate) */
|
|
32
|
+
rate: number;
|
|
33
|
+
}
|
|
6
34
|
/**
|
|
7
35
|
* Currency symbols used for display formatting.
|
|
8
36
|
* Prefix currencies (USD, EUR, GBP, CAD, AUD) show symbol before the amount.
|
|
@@ -17,24 +45,51 @@ export declare const CURRENCY_NAMES: Record<SupportedCurrency, string>;
|
|
|
17
45
|
* Currency store state interface.
|
|
18
46
|
* @property selectedCurrency - The currency currently selected for display
|
|
19
47
|
* @property baseCurrency - The base currency for conversion (typically B3)
|
|
48
|
+
* @property customCurrencies - Map of custom currency codes to their metadata
|
|
49
|
+
* @property customExchangeRates - Map of "FROM-TO" pairs to exchange rates
|
|
20
50
|
* @property setSelectedCurrency - Update the selected display currency
|
|
21
51
|
* @property setBaseCurrency - Update the base currency for conversions
|
|
52
|
+
* @property addCurrency - Register a new custom currency with metadata
|
|
53
|
+
* @property removeCurrency - Remove a custom currency
|
|
54
|
+
* @property setExchangeRate - Set a custom exchange rate between two currencies
|
|
55
|
+
* @property getExchangeRate - Get exchange rate between two currencies
|
|
56
|
+
* @property getAllCurrencies - Get all available currencies (built-in + custom)
|
|
22
57
|
*/
|
|
23
58
|
interface CurrencyState {
|
|
24
|
-
selectedCurrency:
|
|
25
|
-
baseCurrency:
|
|
26
|
-
|
|
27
|
-
|
|
59
|
+
selectedCurrency: string;
|
|
60
|
+
baseCurrency: string;
|
|
61
|
+
customCurrencies: Record<string, CurrencyMetadata>;
|
|
62
|
+
customExchangeRates: Record<string, number>;
|
|
63
|
+
setSelectedCurrency: (currency: string) => void;
|
|
64
|
+
setBaseCurrency: (currency: string) => void;
|
|
65
|
+
addCurrency: (metadata: CurrencyMetadata) => void;
|
|
66
|
+
removeCurrency: (code: string) => void;
|
|
67
|
+
setExchangeRate: (from: string, to: string, rate: number) => void;
|
|
68
|
+
getExchangeRate: (from: string, to: string) => number | undefined;
|
|
69
|
+
getAllCurrencies: () => string[];
|
|
28
70
|
}
|
|
29
71
|
/**
|
|
30
72
|
* Zustand store for managing currency selection and conversion.
|
|
31
73
|
* Persists user's selected currency preference in localStorage.
|
|
74
|
+
* Supports dynamic currency registration and custom exchange rates.
|
|
32
75
|
*
|
|
33
76
|
* @example
|
|
34
77
|
* ```tsx
|
|
35
|
-
* const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
|
|
36
|
-
*
|
|
37
|
-
*
|
|
78
|
+
* const { selectedCurrency, setSelectedCurrency, addCurrency, setExchangeRate } = useCurrencyStore();
|
|
79
|
+
*
|
|
80
|
+
* // Add a new currency
|
|
81
|
+
* addCurrency({
|
|
82
|
+
* code: "BTC",
|
|
83
|
+
* symbol: "₿",
|
|
84
|
+
* name: "Bitcoin",
|
|
85
|
+
* showSubscripts: true,
|
|
86
|
+
* });
|
|
87
|
+
*
|
|
88
|
+
* // Set exchange rate: 1 BTC = 50000 USD
|
|
89
|
+
* setExchangeRate("BTC", "USD", 50000);
|
|
90
|
+
*
|
|
91
|
+
* // Change display currency
|
|
92
|
+
* setSelectedCurrency('BTC');
|
|
38
93
|
* ```
|
|
39
94
|
*/
|
|
40
95
|
export declare const useCurrencyStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<CurrencyState>, "persist"> & {
|
|
@@ -48,4 +103,24 @@ export declare const useCurrencyStore: import("zustand").UseBoundStore<Omit<impo
|
|
|
48
103
|
getOptions: () => Partial<import("zustand/middleware").PersistOptions<CurrencyState, CurrencyState>>;
|
|
49
104
|
};
|
|
50
105
|
}>;
|
|
106
|
+
/**
|
|
107
|
+
* Get the symbol for any currency (built-in or custom).
|
|
108
|
+
*/
|
|
109
|
+
export declare function getCurrencySymbol(currency: string): string;
|
|
110
|
+
/**
|
|
111
|
+
* Get the name for any currency (built-in or custom).
|
|
112
|
+
*/
|
|
113
|
+
export declare function getCurrencyName(currency: string): string;
|
|
114
|
+
/**
|
|
115
|
+
* Get metadata for a custom currency.
|
|
116
|
+
*/
|
|
117
|
+
export declare function getCurrencyMetadata(currency: string): CurrencyMetadata | undefined;
|
|
118
|
+
/**
|
|
119
|
+
* Get the number of decimal places for a currency (for converting from smallest unit).
|
|
120
|
+
* Used when parsing amounts from wei/smallest unit format.
|
|
121
|
+
*
|
|
122
|
+
* @param currency - Currency code
|
|
123
|
+
* @returns Number of decimal places (e.g., 18 for ETH/wei, 2 for USD cents, 0 for JPY)
|
|
124
|
+
*/
|
|
125
|
+
export declare function getCurrencyDecimalPlaces(currency: string): number;
|
|
51
126
|
export {};
|