Skip to content

Commit e5e0beb

Browse files
kien-ngokien-ngo
committed
update
1 parent fbb2ec9 commit e5e0beb

File tree

13 files changed

+594
-95
lines changed

13 files changed

+594
-95
lines changed

‎.changeset/fair-plants-pretend.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
"thirdweb": minor
3+
---
4+
The Connected-details button now shows USD value next to the token balance.
5+
6+
### Breaking change to the AccountBalance
7+
The formatFn props now takes in an object of type `AccountBalanceInfo`. The old `formatFn` was inflexible because it only allowed you to format the balance value.
8+
With this new version, you have access to both the balance and symbol.
9+
```tsx
10+
import { AccountBalance, type AccountBalanceInfo } from "thirdweb/react";
11+
12+
<AccountBalance
13+
// Show the symbol in lowercase, before the balance
14+
formatFn={(props: AccountBalanceInfo) => `${props.symbol.toLowerCase()} ${props.balance}`}
15+
/>
16+
```
17+
18+
AccountBalance now supports showing the token balance in fiat value (only USD supported at the moment)
19+
```tsx
20+
<AccountBalance
21+
showBalanceInFiat="USD"
22+
/>
23+
```
24+
25+
The `formatFn` prop now takes in an object of type `AccountBalanceInfo` and outputs a string
26+
```tsx
27+
import { AccountBalance, type AccountBalanceInfo } from "thirdweb/react";
28+
29+
<AccountBalance
30+
formatFn={(props: AccountBalanceInfo) => `${props.balance}---${props.symbol.toLowerCase()}`}
31+
/>
32+
33+
// Result: 11.12---eth
34+
```
35+
36+
### ConnectButton also supports displaying balance in fiat since it uses AccountBalance internally
37+
```tsx
38+
<ConnectButton
39+
// Show USD value on the button
40+
detailsButton={{
41+
showBalanceInFiat: "USD",
42+
}}
43+
44+
// Show USD value on the modal
45+
detailsModal={{
46+
showBalanceInFiat: "USD",
47+
}}
48+
/>
49+
```
50+
51+
### Export utils functions:
52+
formatNumber: Round up a number to a certain decimal place
53+
```tsx
54+
import { formatNumber } from "thirdweb/utils";
55+
const value = formatNumber(12.1214141, 1); // 12.1
56+
```
57+
58+
shortenLargeNumber: Shorten the string for large value. Mainly used for the AccountBalance's `formatFn`
59+
```tsx
60+
import { shortenLargeNumber } from "thirdweb/utils";
61+
const numStr = shortenLargeNumber(1_000_000_000)
62+
```
63+
64+
### Fix to ConnectButton
65+
The social image of the Details button now display correctly for non-square image.

‎packages/thirdweb/src/exports/react.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,7 @@ export {
221221
export {
222222
AccountBalance,
223223
type AccountBalanceProps,
224+
type AccountBalanceInfo,
224225
} from "../react/web/ui/prebuilt/Account/balance.js";
225226
export {
226227
AccountName,

‎packages/thirdweb/src/exports/utils.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,3 +204,6 @@ export type {
204204
AbiConstructor,
205205
AbiFallback,
206206
} from "abitype";
207+
208+
export { shortenLargeNumber } from "../utils/shortenLargeNumber.js";
209+
export { formatNumber } from "../utils/formatNumber.js";

‎packages/thirdweb/src/pay/convert/cryptoToFiat.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { getContract } from "../../contract/contract.js";
77
import { isAddress } from "../../utils/address.js";
88
import { getClientFetch } from "../../utils/fetch.js";
99
import { getPayConvertCryptoToFiatEndpoint } from "../utils/definitions.js";
10+
import type { SupportedFiatCurrency } from "./type.js";
1011

1112
/**
1213
* Props for the `convertCryptoToFiat` function
@@ -31,7 +32,7 @@ export type ConvertCryptoToFiatParams = {
3132
* The fiat symbol. e.g "USD"
3233
* Only USD is supported at the moment.
3334
*/
34-
to: "USD";
35+
to: SupportedFiatCurrency;
3536
};
3637

3738
/**

‎packages/thirdweb/src/pay/convert/fiatToCrypto.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { getContract } from "../../contract/contract.js";
77
import { isAddress } from "../../utils/address.js";
88
import { getClientFetch } from "../../utils/fetch.js";
99
import { getPayConvertFiatToCryptoEndpoint } from "../utils/definitions.js";
10+
import type { SupportedFiatCurrency } from "./type.js";
1011

1112
/**
1213
* Props for the `convertFiatToCrypto` function
@@ -18,7 +19,7 @@ export type ConvertFiatToCryptoParams = {
1819
* The fiat symbol. e.g: "USD"
1920
* Currently only USD is supported.
2021
*/
21-
from: "USD";
22+
from: SupportedFiatCurrency;
2223
/**
2324
* The total amount of fiat to convert
2425
* e.g: If you want to convert 2 cents to USD, enter `0.02`

‎packages/thirdweb/src/pay/convert/type.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const SUPPORTED_FIAT_CURRENCIES = ["USD"] as const;
2+
/**
3+
* @internal
4+
*/
5+
export type SupportedFiatCurrency = (typeof SUPPORTED_FIAT_CURRENCIES)[number];

‎packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { Chain } from "../../../../chains/types.js";
33
import type { ThirdwebClient } from "../../../../client/client.js";
44
import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
55
import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
6+
import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
67
import type { FiatProvider } from "../../../../pay/utils/commonTypes.js";
78
import type { AssetTabs } from "../../../../react/web/ui/ConnectWallet/screens/ViewAssets.js";
89
import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
@@ -320,6 +321,12 @@ export type ConnectButton_detailsModalOptions = {
320321
* Note: If an empty array is passed, the [View Funds] button will be hidden
321322
*/
322323
assetTabs?: AssetTabs[];
324+
325+
/**
326+
* Show the token balance's value in fiat.
327+
* Note: Not all tokens are resolvable to a fiat value. In that case, nothing will be shown.
328+
*/
329+
showBalanceInFiat?: SupportedFiatCurrency;
323330
};
324331

325332
/**
@@ -377,6 +384,12 @@ export type ConnectButton_detailsButtonOptions = {
377384
* Use custom avatar URL for the connected wallet image in the `ConnectButton` details button, overriding ENS avatar or Blobbie icon.
378385
*/
379386
connectedAccountAvatarUrl?: string;
387+
388+
/**
389+
* Show the token balance's value in fiat.
390+
* Note: Not all tokens are resolvable to a fiat value. In that case, nothing will be shown.
391+
*/
392+
showBalanceInFiat?: SupportedFiatCurrency;
380393
};
381394

382395
/**

‎packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx‎

Lines changed: 114 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ import { trackPayEvent } from "../../../../analytics/track/pay.js";
1414
import type { Chain } from "../../../../chains/types.js";
1515
import type { ThirdwebClient } from "../../../../client/client.js";
1616
import { getContract } from "../../../../contract/contract.js";
17+
import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
1718
import { getLastAuthProvider } from "../../../../react/core/utils/storage.js";
1819
import { shortenAddress } from "../../../../utils/address.js";
1920
import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
20-
import { formatNumber } from "../../../../utils/formatNumber.js";
2121
import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
2222
import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
2323
import type { Ecosystem } from "../../../../wallets/in-app/core/wallet/types.js";
@@ -86,7 +86,12 @@ import { fadeInAnimation } from "../design-system/animations.js";
8686
import { StyledButton } from "../design-system/elements.js";
8787
import { AccountAddress } from "../prebuilt/Account/address.js";
8888
import { AccountAvatar } from "../prebuilt/Account/avatar.js";
89-
import { AccountBalance } from "../prebuilt/Account/balance.js";
89+
import {
90+
AccountBalance,
91+
type AccountBalanceInfo,
92+
formatAccountFiatBalance,
93+
formatAccountTokenBalance,
94+
} from "../prebuilt/Account/balance.js";
9095
import { AccountBlobbie } from "../prebuilt/Account/blobbie.js";
9196
import { AccountName } from "../prebuilt/Account/name.js";
9297
import { AccountProvider } from "../prebuilt/Account/provider.js";
@@ -231,6 +236,11 @@ export const ConnectedWalletDetails: React.FC<{
231236
refetchOnWindowFocus: false,
232237
refetchOnMount: false,
233238
}}
239+
style={{
240+
height: "100%",
241+
width: "100%",
242+
objectFit: "cover",
243+
}}
234244
/>
235245
)
236246
)}
@@ -273,18 +283,59 @@ export const ConnectedWalletDetails: React.FC<{
273283
size="xs"
274284
color="secondaryText"
275285
weight={400}
286+
style={{
287+
display: "flex",
288+
gap: "2px",
289+
alignItems: "center",
290+
}}
276291
>
277-
<AccountBalance
278-
chain={walletChain}
279-
loadingComponent={<Skeleton height={fontSize.xs} width="70px" />}
280-
fallbackComponent={<Skeleton height={fontSize.xs} width="70px" />}
281-
formatFn={formatBalanceOnButton}
282-
tokenAddress={
283-
props.detailsButton?.displayBalanceToken?.[
284-
Number(walletChain?.id)
285-
]
286-
}
287-
/>
292+
{props.detailsButton?.showBalanceInFiat ? (
293+
<>
294+
<AccountBalance
295+
chain={walletChain}
296+
loadingComponent={
297+
<Skeleton height={fontSize.xs} width="50px" />
298+
}
299+
fallbackComponent={
300+
<Skeleton height={fontSize.xs} width="50px" />
301+
}
302+
tokenAddress={
303+
props.detailsButton?.displayBalanceToken?.[
304+
Number(walletChain?.id)
305+
]
306+
}
307+
/>
308+
<AccountBalance
309+
chain={walletChain}
310+
tokenAddress={
311+
props.detailsButton?.displayBalanceToken?.[
312+
Number(walletChain?.id)
313+
]
314+
}
315+
showBalanceInFiat="USD"
316+
formatFn={(props: AccountBalanceInfo) =>
317+
` (${formatAccountFiatBalance({ ...props, decimals: 0 })})`
318+
}
319+
loadingComponent={
320+
<Skeleton height={fontSize.xs} width="20px" />
321+
}
322+
/>
323+
</>
324+
) : (
325+
<AccountBalance
326+
chain={walletChain}
327+
loadingComponent={<Skeleton height={fontSize.xs} width="70px" />}
328+
fallbackComponent={<Skeleton height={fontSize.xs} width="70px" />}
329+
formatFn={(props: AccountBalanceInfo) =>
330+
`${formatAccountTokenBalance({ ...props, decimals: props.balance < 1 ? 5 : 4 })}`
331+
}
332+
tokenAddress={
333+
props.detailsButton?.displayBalanceToken?.[
334+
Number(walletChain?.id)
335+
]
336+
}
337+
/>
338+
)}
288339
</Text>
289340
</Container>
290341
</WalletInfoButton>
@@ -307,6 +358,7 @@ function DetailsModal(props: {
307358
displayBalanceToken?: Record<number, string>;
308359
connectOptions: DetailsModalConnectOptions | undefined;
309360
assetTabs?: AssetTabs[];
361+
showBalanceInFiat?: SupportedFiatCurrency;
310362
}) {
311363
const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
312364
const { disconnect } = useDisconnect();
@@ -377,15 +429,44 @@ function DetailsModal(props: {
377429
<Text color="primaryText" size="md" multiline>
378430
{chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
379431
<Text color="secondaryText" size="xs">
380-
<AccountBalance
381-
fallbackComponent={<Skeleton height="1em" width="100px" />}
382-
loadingComponent={<Skeleton height="1em" width="100px" />}
383-
formatFn={(num: number) => formatNumber(num, 9)}
384-
chain={walletChain}
385-
tokenAddress={
386-
props.displayBalanceToken?.[Number(walletChain?.id)]
387-
}
388-
/>
432+
{props.showBalanceInFiat ? (
433+
<>
434+
<AccountBalance
435+
fallbackComponent={<Skeleton height="1em" width="70px" />}
436+
loadingComponent={<Skeleton height="1em" width="70px" />}
437+
chain={walletChain}
438+
tokenAddress={
439+
props.displayBalanceToken?.[Number(walletChain?.id)]
440+
}
441+
formatFn={(props: AccountBalanceInfo) =>
442+
formatAccountTokenBalance({ ...props, decimals: 7 })
443+
}
444+
/>{" "}
445+
<AccountBalance
446+
loadingComponent={<Skeleton height="1em" width="30px" />}
447+
chain={walletChain}
448+
tokenAddress={
449+
props.displayBalanceToken?.[Number(walletChain?.id)]
450+
}
451+
formatFn={(props: AccountBalanceInfo) =>
452+
` (${formatAccountFiatBalance({ ...props, decimals: 3 })})`
453+
}
454+
showBalanceInFiat="USD"
455+
/>
456+
</>
457+
) : (
458+
<AccountBalance
459+
fallbackComponent={<Skeleton height="1em" width="100px" />}
460+
loadingComponent={<Skeleton height="1em" width="100px" />}
461+
formatFn={(props: AccountBalanceInfo) =>
462+
formatAccountTokenBalance({ ...props, decimals: 7 })
463+
}
464+
chain={walletChain}
465+
tokenAddress={
466+
props.displayBalanceToken?.[Number(walletChain?.id)]
467+
}
468+
/>
469+
)}
389470
</Text>
390471
</Text>
391472
)}
@@ -437,6 +518,11 @@ function DetailsModal(props: {
437518
<AccountAvatar
438519
loadingComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
439520
fallbackComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
521+
style={{
522+
height: "100%",
523+
width: "100%",
524+
objectFit: "cover",
525+
}}
440526
/>
441527
)
442528
)}
@@ -1006,10 +1092,6 @@ function DetailsModal(props: {
10061092
);
10071093
}
10081094

1009-
function formatBalanceOnButton(num: number) {
1010-
return formatNumber(num, num < 1 ? 5 : 4);
1011-
}
1012-
10131095
const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
10141096
const theme = useCustomTheme();
10151097
return {
@@ -1507,6 +1589,12 @@ export type UseWalletDetailsModalOptions = {
15071589
* Note: If an empty array is passed, the [View Funds] button will be hidden
15081590
*/
15091591
assetTabs?: AssetTabs[];
1592+
1593+
/**
1594+
* Show the token balance's value in fiat.
1595+
* Note: Not all tokens are resolvable to a fiat value. In that case, nothing will be shown.
1596+
*/
1597+
showBalanceInFiat?: SupportedFiatCurrency;
15101598
};
15111599

15121600
/**

0 commit comments

Comments
 (0)