@b3dotfun/sdk 0.0.58 → 0.0.59-alpha.0
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/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/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/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/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/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/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/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/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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useQuery } from "@tanstack/react-query";
|
|
2
2
|
import { formatDisplayNumber } from "../../../shared/utils/number.js";
|
|
3
|
-
import {
|
|
3
|
+
import { useCurrencyStore, getCurrencySymbol, getCurrencyMetadata } from "../stores/currencyStore.js";
|
|
4
4
|
const COINBASE_API_URL = "https://api.coinbase.com/v2/exchange-rates";
|
|
5
5
|
const REFETCH_INTERVAL_MS = 30000;
|
|
6
6
|
/**
|
|
@@ -37,8 +37,10 @@ async function fetchAllExchangeRates(baseCurrency) {
|
|
|
37
37
|
export function useCurrencyConversion() {
|
|
38
38
|
const selectedCurrency = useCurrencyStore(state => state.selectedCurrency);
|
|
39
39
|
const baseCurrency = useCurrencyStore(state => state.baseCurrency);
|
|
40
|
-
|
|
41
|
-
const
|
|
40
|
+
const getCustomExchangeRate = useCurrencyStore(state => state.getExchangeRate);
|
|
41
|
+
const customCurrencies = useCurrencyStore(state => state.customCurrencies);
|
|
42
|
+
// Fetch all exchange rates for the base currency from Coinbase API
|
|
43
|
+
const { data: apiExchangeRates } = useQuery({
|
|
42
44
|
queryKey: ["exchangeRates", baseCurrency],
|
|
43
45
|
queryFn: () => fetchAllExchangeRates(baseCurrency),
|
|
44
46
|
refetchInterval: REFETCH_INTERVAL_MS,
|
|
@@ -46,155 +48,208 @@ export function useCurrencyConversion() {
|
|
|
46
48
|
retry: 3,
|
|
47
49
|
retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, REFETCH_INTERVAL_MS),
|
|
48
50
|
});
|
|
49
|
-
// Extract specific rates from the full rates object
|
|
50
|
-
const exchangeRate = exchangeRates?.[selectedCurrency];
|
|
51
|
-
const usdRate = exchangeRates?.["USD"];
|
|
52
51
|
/**
|
|
53
|
-
*
|
|
52
|
+
* Get exchange rate between two currencies, checking custom rates first, then API rates.
|
|
53
|
+
* Supports chaining through base currency for custom currencies.
|
|
54
54
|
*
|
|
55
|
-
*
|
|
56
|
-
* -
|
|
57
|
-
* -
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
55
|
+
* Examples:
|
|
56
|
+
* - WIN → USD: Checks WIN→USD custom rate, then chains WIN→B3→USD
|
|
57
|
+
* - BTC → EUR: Checks BTC→EUR custom rate, then chains BTC→B3→EUR
|
|
58
|
+
*/
|
|
59
|
+
const getExchangeRate = (from, to) => {
|
|
60
|
+
// If same currency, rate is 1
|
|
61
|
+
if (from === to)
|
|
62
|
+
return 1;
|
|
63
|
+
// 1. Check direct custom exchange rate first
|
|
64
|
+
const directCustomRate = getCustomExchangeRate(from, to);
|
|
65
|
+
if (directCustomRate !== undefined) {
|
|
66
|
+
return directCustomRate;
|
|
67
|
+
}
|
|
68
|
+
// 2. Check direct API rate (from base currency)
|
|
69
|
+
if (from === baseCurrency && apiExchangeRates) {
|
|
70
|
+
return apiExchangeRates[to];
|
|
71
|
+
}
|
|
72
|
+
// 3. Try to chain through base currency using custom rates
|
|
73
|
+
// e.g., WIN → B3 → USD (where WIN→B3 is custom, B3→USD is API)
|
|
74
|
+
const customFromToBase = getCustomExchangeRate(from, baseCurrency);
|
|
75
|
+
if (customFromToBase !== undefined) {
|
|
76
|
+
// We have a custom rate from 'from' to base
|
|
77
|
+
// Now get rate from base to 'to'
|
|
78
|
+
const baseToTo = apiExchangeRates?.[to] ?? getCustomExchangeRate(baseCurrency, to);
|
|
79
|
+
if (baseToTo !== undefined) {
|
|
80
|
+
return customFromToBase * baseToTo;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
// 4. Try reverse: chain from base currency through custom rate
|
|
84
|
+
// e.g., USD → B3 → WIN (where B3→WIN is custom)
|
|
85
|
+
const customBaseToTo = getCustomExchangeRate(baseCurrency, to);
|
|
86
|
+
if (customBaseToTo !== undefined && apiExchangeRates) {
|
|
87
|
+
// We have a custom rate from base to 'to'
|
|
88
|
+
// Now get rate from 'from' to base
|
|
89
|
+
const fromToBase = apiExchangeRates[from];
|
|
90
|
+
if (fromToBase !== undefined && fromToBase !== 0) {
|
|
91
|
+
return fromToBase * customBaseToTo;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
// 5. Fall back to pure API conversion through base
|
|
95
|
+
// e.g., EUR to GBP = (EUR to B3) * (B3 to GBP)
|
|
96
|
+
if (apiExchangeRates) {
|
|
97
|
+
const fromToBase = apiExchangeRates[from];
|
|
98
|
+
const baseToTo = apiExchangeRates[to];
|
|
99
|
+
if (fromToBase && baseToTo && fromToBase !== 0) {
|
|
100
|
+
return baseToTo / fromToBase;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
return undefined;
|
|
104
|
+
};
|
|
105
|
+
// Extract specific rates
|
|
106
|
+
const exchangeRate = getExchangeRate(baseCurrency, selectedCurrency);
|
|
107
|
+
/**
|
|
108
|
+
* Formats a numeric value as a currency string with automatic conversion.
|
|
109
|
+
*
|
|
110
|
+
* New behavior:
|
|
111
|
+
* - Takes the SOURCE currency (what the value is in) as a required parameter
|
|
112
|
+
* - Automatically converts from source → display currency (selected in picker)
|
|
113
|
+
* - Supports multi-hop conversions (e.g., WIN → B3 → USD)
|
|
114
|
+
* - Applies currency-specific formatting rules to the TARGET currency
|
|
62
115
|
*
|
|
63
|
-
* @param value - The numeric value to format
|
|
116
|
+
* @param value - The numeric value to format
|
|
117
|
+
* @param sourceCurrency - The currency the value is currently in (e.g., "WIN", "B3", "USD")
|
|
64
118
|
* @param options - Optional formatting overrides
|
|
65
|
-
* @param options.decimals - Override number of decimal places
|
|
66
|
-
* @param options.currency - Override currency (bypasses conversion)
|
|
119
|
+
* @param options.decimals - Override number of decimal places for display
|
|
67
120
|
* @returns Formatted currency string with appropriate symbol and decimal places
|
|
68
121
|
*
|
|
69
122
|
* @example
|
|
70
123
|
* ```tsx
|
|
71
|
-
*
|
|
72
|
-
* formatCurrencyValue(
|
|
73
|
-
*
|
|
74
|
-
*
|
|
124
|
+
* // Value is 3031 WIN, user has USD selected
|
|
125
|
+
* formatCurrencyValue(3031, "WIN") // Returns "$30.31" (converts WIN→B3→USD)
|
|
126
|
+
*
|
|
127
|
+
* // Value is 100 B3, user has B3 selected (no conversion)
|
|
128
|
+
* formatCurrencyValue(100, "B3") // Returns "100 B3"
|
|
129
|
+
*
|
|
130
|
+
* // Value is 50 USD, user has EUR selected
|
|
131
|
+
* formatCurrencyValue(50, "USD") // Returns "€45.50" (converts USD→EUR)
|
|
75
132
|
* ```
|
|
76
133
|
*/
|
|
77
|
-
const formatCurrencyValue = (value, options) => {
|
|
78
|
-
const overrideCurrency = options?.currency;
|
|
134
|
+
const formatCurrencyValue = (value, sourceCurrency, options) => {
|
|
79
135
|
const overrideDecimals = options?.decimals;
|
|
80
|
-
//
|
|
81
|
-
if (
|
|
82
|
-
const
|
|
136
|
+
// If source and display currency are the same, no conversion needed
|
|
137
|
+
if (sourceCurrency === selectedCurrency) {
|
|
138
|
+
const customMetadata = getCurrencyMetadata(sourceCurrency);
|
|
139
|
+
const decimalsToUse = overrideDecimals !== undefined ? overrideDecimals : customMetadata?.decimals;
|
|
83
140
|
const formatted = formatDisplayNumber(value, {
|
|
84
141
|
fractionDigits: decimalsToUse,
|
|
85
|
-
|
|
142
|
+
significantDigits: decimalsToUse === undefined ? 6 : undefined,
|
|
143
|
+
showSubscripts: customMetadata?.showSubscripts ?? false,
|
|
86
144
|
});
|
|
87
|
-
|
|
145
|
+
const symbol = getCurrencySymbol(sourceCurrency);
|
|
146
|
+
const usePrefix = customMetadata?.prefixSymbol ?? ["USD", "EUR", "GBP", "CAD", "AUD"].includes(sourceCurrency);
|
|
147
|
+
return usePrefix ? `${symbol}${formatted}` : `${formatted} ${symbol}`;
|
|
88
148
|
}
|
|
89
|
-
//
|
|
90
|
-
|
|
149
|
+
// Get exchange rate from source to display currency
|
|
150
|
+
const conversionRate = getExchangeRate(sourceCurrency, selectedCurrency);
|
|
151
|
+
// If no conversion rate available, display in source currency
|
|
152
|
+
if (conversionRate === undefined) {
|
|
153
|
+
const customMetadata = getCurrencyMetadata(sourceCurrency);
|
|
91
154
|
const formatted = formatDisplayNumber(value, {
|
|
155
|
+
significantDigits: 6,
|
|
156
|
+
showSubscripts: customMetadata?.showSubscripts ?? false,
|
|
157
|
+
});
|
|
158
|
+
const symbol = getCurrencySymbol(sourceCurrency);
|
|
159
|
+
return `${formatted} ${symbol}`;
|
|
160
|
+
}
|
|
161
|
+
// Convert value
|
|
162
|
+
const convertedValue = value * conversionRate;
|
|
163
|
+
// Get symbol and metadata for display currency
|
|
164
|
+
const symbol = getCurrencySymbol(selectedCurrency);
|
|
165
|
+
const customMetadata = getCurrencyMetadata(selectedCurrency);
|
|
166
|
+
const usePrefix = customMetadata?.prefixSymbol ?? ["USD", "EUR", "GBP", "CAD", "AUD"].includes(selectedCurrency);
|
|
167
|
+
let formatted;
|
|
168
|
+
// Apply formatting based on display currency
|
|
169
|
+
if (overrideDecimals !== undefined) {
|
|
170
|
+
formatted = formatDisplayNumber(convertedValue, {
|
|
92
171
|
fractionDigits: overrideDecimals,
|
|
93
172
|
showSubscripts: false,
|
|
94
173
|
});
|
|
95
|
-
return `${formatted} ${baseCurrency}`;
|
|
96
174
|
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
significantDigits:
|
|
101
|
-
showSubscripts:
|
|
175
|
+
else if (customMetadata) {
|
|
176
|
+
formatted = formatDisplayNumber(convertedValue, {
|
|
177
|
+
fractionDigits: customMetadata.decimals,
|
|
178
|
+
significantDigits: customMetadata.decimals === undefined ? 6 : undefined,
|
|
179
|
+
showSubscripts: customMetadata.showSubscripts ?? false,
|
|
102
180
|
});
|
|
103
|
-
return `${formatted} ${baseCurrency}`;
|
|
104
181
|
}
|
|
105
|
-
|
|
106
|
-
const convertedValue = value * exchangeRate;
|
|
107
|
-
const symbol = CURRENCY_SYMBOLS[selectedCurrency];
|
|
108
|
-
// Currencies that display symbol before the number (e.g., $100.00)
|
|
109
|
-
const prefixCurrencies = ["USD", "EUR", "GBP", "CAD", "AUD"];
|
|
110
|
-
let formatted;
|
|
111
|
-
if (selectedCurrency === "JPY" || selectedCurrency === "KRW") {
|
|
112
|
-
// Japanese Yen and Korean Won don't use decimal places
|
|
182
|
+
else if (selectedCurrency === "JPY" || selectedCurrency === "KRW") {
|
|
113
183
|
formatted = formatDisplayNumber(convertedValue, {
|
|
114
184
|
fractionDigits: 0,
|
|
115
185
|
showSubscripts: false,
|
|
116
186
|
});
|
|
117
187
|
}
|
|
118
188
|
else if (selectedCurrency === "ETH" || selectedCurrency === "SOL") {
|
|
119
|
-
// Crypto currencies use more precision and subscript notation
|
|
120
|
-
// for very small amounts (e.g., 0.0₃45 ETH)
|
|
121
189
|
formatted = formatDisplayNumber(convertedValue, {
|
|
122
190
|
significantDigits: 6,
|
|
123
191
|
showSubscripts: true,
|
|
124
192
|
});
|
|
125
193
|
}
|
|
126
194
|
else {
|
|
127
|
-
// Standard fiat currencies (USD, EUR, GBP, CAD, AUD)
|
|
128
|
-
// Use 2 decimal places minimum for amounts under 1000
|
|
129
195
|
formatted = formatDisplayNumber(convertedValue, {
|
|
130
196
|
significantDigits: 6,
|
|
131
197
|
fractionDigits: convertedValue < 1000 ? 2 : undefined,
|
|
132
198
|
showSubscripts: true,
|
|
133
199
|
});
|
|
134
200
|
}
|
|
135
|
-
|
|
136
|
-
if (prefixCurrencies.includes(selectedCurrency)) {
|
|
137
|
-
return `${symbol}${formatted}`;
|
|
138
|
-
}
|
|
139
|
-
else {
|
|
140
|
-
// Suffix currencies: JPY, KRW, ETH, SOL, B3
|
|
141
|
-
return `${formatted} ${symbol}`;
|
|
142
|
-
}
|
|
201
|
+
return usePrefix ? `${symbol}${formatted}` : `${formatted} ${symbol}`;
|
|
143
202
|
};
|
|
144
203
|
/**
|
|
145
204
|
* Formats a tooltip value showing the alternate currency representation.
|
|
146
205
|
*
|
|
147
|
-
*
|
|
148
|
-
* -
|
|
149
|
-
* - When displaying
|
|
150
|
-
* -
|
|
206
|
+
* New behavior:
|
|
207
|
+
* - Takes the SOURCE currency (what the value is in)
|
|
208
|
+
* - When displaying in non-USD: Shows USD equivalent in tooltip
|
|
209
|
+
* - When displaying in USD: Shows source currency in tooltip
|
|
151
210
|
*
|
|
152
211
|
* @param value - The numeric value to format
|
|
153
|
-
* @param
|
|
212
|
+
* @param sourceCurrency - The currency the value is currently in
|
|
154
213
|
* @returns Formatted tooltip string
|
|
155
214
|
*
|
|
156
215
|
* @example
|
|
157
216
|
* ```tsx
|
|
158
|
-
*
|
|
159
|
-
* formatTooltipValue(
|
|
217
|
+
* // Value is 3031 WIN, displaying as EUR
|
|
218
|
+
* formatTooltipValue(3031, "WIN") // Returns "$30.31 USD"
|
|
219
|
+
*
|
|
220
|
+
* // Value is 100 B3, displaying as USD
|
|
221
|
+
* formatTooltipValue(100, "B3") // Returns "100 B3"
|
|
160
222
|
* ```
|
|
161
223
|
*/
|
|
162
|
-
const formatTooltipValue = (value,
|
|
163
|
-
const displayCurrency = customCurrency || selectedCurrency;
|
|
224
|
+
const formatTooltipValue = (value, sourceCurrency) => {
|
|
164
225
|
const absoluteValue = Math.abs(value);
|
|
165
|
-
//
|
|
166
|
-
if (
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
showSubscripts: true,
|
|
174
|
-
});
|
|
175
|
-
return `$${formatted} USD`;
|
|
176
|
-
}
|
|
177
|
-
else {
|
|
178
|
-
// Show as-is for other custom currencies
|
|
179
|
-
return `${formatDisplayNumber(absoluteValue, { significantDigits: 6 })} ${customCurrency}`;
|
|
180
|
-
}
|
|
226
|
+
// If displaying in USD, show source currency in tooltip
|
|
227
|
+
if (selectedCurrency === "USD") {
|
|
228
|
+
const formatted = formatDisplayNumber(absoluteValue, {
|
|
229
|
+
significantDigits: 6,
|
|
230
|
+
showSubscripts: getCurrencyMetadata(sourceCurrency)?.showSubscripts ?? false,
|
|
231
|
+
});
|
|
232
|
+
const symbol = getCurrencySymbol(sourceCurrency);
|
|
233
|
+
return `${formatted} ${symbol}`;
|
|
181
234
|
}
|
|
182
|
-
//
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
235
|
+
// Otherwise, show USD equivalent in tooltip
|
|
236
|
+
const usdRate = getExchangeRate(sourceCurrency, "USD");
|
|
237
|
+
if (usdRate === undefined) {
|
|
238
|
+
// Fallback to source currency if no USD rate
|
|
239
|
+
const formatted = formatDisplayNumber(absoluteValue, {
|
|
186
240
|
significantDigits: 6,
|
|
187
|
-
|
|
188
|
-
showSubscripts: true,
|
|
241
|
+
showSubscripts: getCurrencyMetadata(sourceCurrency)?.showSubscripts ?? false,
|
|
189
242
|
});
|
|
190
|
-
|
|
243
|
+
const symbol = getCurrencySymbol(sourceCurrency);
|
|
244
|
+
return `${formatted} ${symbol}`;
|
|
191
245
|
}
|
|
192
|
-
|
|
193
|
-
const formatted = formatDisplayNumber(
|
|
194
|
-
significantDigits:
|
|
246
|
+
const usdValue = absoluteValue * usdRate;
|
|
247
|
+
const formatted = formatDisplayNumber(usdValue, {
|
|
248
|
+
significantDigits: 6,
|
|
249
|
+
fractionDigits: usdValue < 1000 ? 2 : undefined,
|
|
195
250
|
showSubscripts: true,
|
|
196
251
|
});
|
|
197
|
-
return
|
|
252
|
+
return `$${formatted} USD`;
|
|
198
253
|
};
|
|
199
254
|
return {
|
|
200
255
|
/** Currently selected display currency */
|
|
@@ -208,8 +263,12 @@ export function useCurrencyConversion() {
|
|
|
208
263
|
/** Format a tooltip value showing alternate currency representation */
|
|
209
264
|
formatTooltipValue,
|
|
210
265
|
/** Symbol for the currently selected currency (e.g., "$", "€", "ETH") */
|
|
211
|
-
selectedCurrencySymbol:
|
|
266
|
+
selectedCurrencySymbol: getCurrencySymbol(selectedCurrency),
|
|
212
267
|
/** Symbol for the base currency */
|
|
213
|
-
baseCurrencySymbol:
|
|
268
|
+
baseCurrencySymbol: getCurrencySymbol(baseCurrency),
|
|
269
|
+
/** Get exchange rate between any two currencies */
|
|
270
|
+
getExchangeRate,
|
|
271
|
+
/** All registered custom currencies */
|
|
272
|
+
customCurrencies,
|
|
214
273
|
};
|
|
215
274
|
}
|
|
@@ -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 {};
|
|
@@ -35,20 +35,158 @@ export const CURRENCY_NAMES = {
|
|
|
35
35
|
/**
|
|
36
36
|
* Zustand store for managing currency selection and conversion.
|
|
37
37
|
* Persists user's selected currency preference in localStorage.
|
|
38
|
+
* Supports dynamic currency registration and custom exchange rates.
|
|
38
39
|
*
|
|
39
40
|
* @example
|
|
40
41
|
* ```tsx
|
|
41
|
-
* const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
|
|
42
|
-
*
|
|
43
|
-
*
|
|
42
|
+
* const { selectedCurrency, setSelectedCurrency, addCurrency, setExchangeRate } = useCurrencyStore();
|
|
43
|
+
*
|
|
44
|
+
* // Add a new currency
|
|
45
|
+
* addCurrency({
|
|
46
|
+
* code: "BTC",
|
|
47
|
+
* symbol: "₿",
|
|
48
|
+
* name: "Bitcoin",
|
|
49
|
+
* showSubscripts: true,
|
|
50
|
+
* });
|
|
51
|
+
*
|
|
52
|
+
* // Set exchange rate: 1 BTC = 50000 USD
|
|
53
|
+
* setExchangeRate("BTC", "USD", 50000);
|
|
54
|
+
*
|
|
55
|
+
* // Change display currency
|
|
56
|
+
* setSelectedCurrency('BTC');
|
|
44
57
|
* ```
|
|
45
58
|
*/
|
|
46
|
-
export const useCurrencyStore = create()(persist(set => ({
|
|
59
|
+
export const useCurrencyStore = create()(persist((set, get) => ({
|
|
47
60
|
selectedCurrency: "B3",
|
|
48
61
|
baseCurrency: "B3",
|
|
62
|
+
customCurrencies: {},
|
|
63
|
+
customExchangeRates: {},
|
|
49
64
|
setSelectedCurrency: currency => set({ selectedCurrency: currency }),
|
|
50
65
|
setBaseCurrency: currency => set({ baseCurrency: currency }),
|
|
66
|
+
addCurrency: metadata => {
|
|
67
|
+
set(state => ({
|
|
68
|
+
customCurrencies: {
|
|
69
|
+
...state.customCurrencies,
|
|
70
|
+
[metadata.code]: metadata,
|
|
71
|
+
},
|
|
72
|
+
}));
|
|
73
|
+
},
|
|
74
|
+
removeCurrency: code => {
|
|
75
|
+
set(state => {
|
|
76
|
+
// Remove the currency
|
|
77
|
+
const { [code]: _removed, ...remaining } = state.customCurrencies;
|
|
78
|
+
// Remove all exchange rates involving this currency
|
|
79
|
+
const filteredRates = {};
|
|
80
|
+
for (const [key, rate] of Object.entries(state.customExchangeRates)) {
|
|
81
|
+
// Key format is "FROM-TO", skip if either matches the removed code
|
|
82
|
+
const [from, to] = key.split("-");
|
|
83
|
+
if (from !== code && to !== code) {
|
|
84
|
+
filteredRates[key] = rate;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
return {
|
|
88
|
+
customCurrencies: remaining,
|
|
89
|
+
customExchangeRates: filteredRates,
|
|
90
|
+
};
|
|
91
|
+
});
|
|
92
|
+
},
|
|
93
|
+
setExchangeRate: (from, to, rate) => {
|
|
94
|
+
set(state => {
|
|
95
|
+
const key = `${from}-${to}`;
|
|
96
|
+
const inverseKey = `${to}-${from}`;
|
|
97
|
+
// Only set inverse rate if rate is not 0 (to avoid Infinity)
|
|
98
|
+
const newRates = {
|
|
99
|
+
...state.customExchangeRates,
|
|
100
|
+
[key]: rate,
|
|
101
|
+
};
|
|
102
|
+
if (rate !== 0) {
|
|
103
|
+
newRates[inverseKey] = 1 / rate;
|
|
104
|
+
}
|
|
105
|
+
return {
|
|
106
|
+
customExchangeRates: newRates,
|
|
107
|
+
};
|
|
108
|
+
});
|
|
109
|
+
},
|
|
110
|
+
getExchangeRate: (from, to) => {
|
|
111
|
+
const key = `${from}-${to}`;
|
|
112
|
+
return get().customExchangeRates[key];
|
|
113
|
+
},
|
|
114
|
+
getAllCurrencies: () => {
|
|
115
|
+
const builtIn = Object.keys(CURRENCY_SYMBOLS);
|
|
116
|
+
const custom = Object.keys(get().customCurrencies);
|
|
117
|
+
return [...builtIn, ...custom];
|
|
118
|
+
},
|
|
51
119
|
}), {
|
|
52
120
|
name: "currency-storage",
|
|
53
|
-
version:
|
|
121
|
+
version: 3,
|
|
54
122
|
}));
|
|
123
|
+
/**
|
|
124
|
+
* Get the symbol for any currency (built-in or custom).
|
|
125
|
+
*/
|
|
126
|
+
export function getCurrencySymbol(currency) {
|
|
127
|
+
// Check built-in currencies first
|
|
128
|
+
if (currency in CURRENCY_SYMBOLS) {
|
|
129
|
+
return CURRENCY_SYMBOLS[currency];
|
|
130
|
+
}
|
|
131
|
+
// Check custom currencies
|
|
132
|
+
const customCurrencies = useCurrencyStore.getState().customCurrencies;
|
|
133
|
+
const customCurrency = customCurrencies[currency];
|
|
134
|
+
if (customCurrency) {
|
|
135
|
+
return customCurrency.symbol;
|
|
136
|
+
}
|
|
137
|
+
// Fallback to currency code
|
|
138
|
+
return currency;
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* Get the name for any currency (built-in or custom).
|
|
142
|
+
*/
|
|
143
|
+
export function getCurrencyName(currency) {
|
|
144
|
+
// Check built-in currencies first
|
|
145
|
+
if (currency in CURRENCY_NAMES) {
|
|
146
|
+
return CURRENCY_NAMES[currency];
|
|
147
|
+
}
|
|
148
|
+
// Check custom currencies
|
|
149
|
+
const customCurrencies = useCurrencyStore.getState().customCurrencies;
|
|
150
|
+
const customCurrency = customCurrencies[currency];
|
|
151
|
+
if (customCurrency) {
|
|
152
|
+
return customCurrency.name;
|
|
153
|
+
}
|
|
154
|
+
// Fallback to currency code
|
|
155
|
+
return currency;
|
|
156
|
+
}
|
|
157
|
+
/**
|
|
158
|
+
* Get metadata for a custom currency.
|
|
159
|
+
*/
|
|
160
|
+
export function getCurrencyMetadata(currency) {
|
|
161
|
+
const customCurrencies = useCurrencyStore.getState().customCurrencies;
|
|
162
|
+
return customCurrencies[currency];
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* Get the number of decimal places for a currency (for converting from smallest unit).
|
|
166
|
+
* Used when parsing amounts from wei/smallest unit format.
|
|
167
|
+
*
|
|
168
|
+
* @param currency - Currency code
|
|
169
|
+
* @returns Number of decimal places (e.g., 18 for ETH/wei, 2 for USD cents, 0 for JPY)
|
|
170
|
+
*/
|
|
171
|
+
export function getCurrencyDecimalPlaces(currency) {
|
|
172
|
+
// Check custom currencies first
|
|
173
|
+
const customCurrencies = useCurrencyStore.getState().customCurrencies;
|
|
174
|
+
const customMetadata = customCurrencies[currency];
|
|
175
|
+
if (customMetadata?.decimals !== undefined) {
|
|
176
|
+
return customMetadata.decimals;
|
|
177
|
+
}
|
|
178
|
+
// Built-in currencies with 18 decimals (wei-like)
|
|
179
|
+
if (currency === "WIN" || currency === "ETH" || currency === "SOL" || currency === "B3") {
|
|
180
|
+
return 18;
|
|
181
|
+
}
|
|
182
|
+
// Fiat currencies with cent-like decimals
|
|
183
|
+
if (currency === "USD" || currency === "EUR" || currency === "GBP" || currency === "CAD" || currency === "AUD") {
|
|
184
|
+
return 2;
|
|
185
|
+
}
|
|
186
|
+
// Currencies without fractional units
|
|
187
|
+
if (currency === "JPY" || currency === "KRW") {
|
|
188
|
+
return 0;
|
|
189
|
+
}
|
|
190
|
+
// Default to 18 decimals (wei-like)
|
|
191
|
+
return 18;
|
|
192
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Wallet } from "thirdweb/wallets";
|
|
2
|
+
interface GlobalWalletState {
|
|
3
|
+
globalAccountWallet?: Wallet;
|
|
4
|
+
setGlobalAccountWallet: (account?: Wallet) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare const useGlobalWalletState: import("zustand").UseBoundStore<import("zustand").StoreApi<GlobalWalletState>>;
|
|
7
|
+
export {};
|