1
1
import styled from "@emotion/styled" ;
2
+ import { ChevronRightIcon } from "@radix-ui/react-icons" ;
2
3
import { useState } from "react" ;
3
4
import type { Chain } from "../../../../../../chains/types.js" ;
4
5
import type { ThirdwebClient } from "../../../../../../client/client.js" ;
@@ -22,7 +23,7 @@ import { Container } from "../../../components/basic.js";
22
23
import { Button } from "../../../components/buttons.js" ;
23
24
import { Text } from "../../../components/text.js" ;
24
25
import { Blobbie } from "../../Blobbie.js" ;
25
- import { formatTokenBalance } from "../formatTokenBalance .js" ;
26
+ import { FiatValue } from "./swap/FiatValue .js" ;
26
27
import type { TokenBalance } from "./swap/PaymentSelectionScreen.js" ;
27
28
28
29
export function WalletRowWithBalances ( props : {
@@ -100,23 +101,29 @@ function TokenBalanceRow(props: {
100
101
onClick = { ( ) => onClick ( tokenBalance . token , wallet ) }
101
102
variant = "secondary"
102
103
>
103
- < TokenIcon
104
- token = { tokenBalance . token }
105
- chain = { tokenBalance . chain }
106
- size = "md"
107
- client = { client }
108
- />
109
- < Container flex = "column" gap = "3xs" >
110
- < Text size = "xs" color = "primaryText" >
111
- { tokenBalance . token . symbol }
112
- </ Text >
113
- { chainInfo && < Text size = "xs" > { chainInfo . name } </ Text > }
104
+ < Container flex = "row" center = "y" gap = "md" >
105
+ < TokenIcon
106
+ token = { tokenBalance . token }
107
+ chain = { tokenBalance . chain }
108
+ size = "md"
109
+ client = { client }
110
+ />
111
+ < Container flex = "column" gap = "3xs" >
112
+ < Text size = "xs" color = "primaryText" >
113
+ { tokenBalance . token . symbol }
114
+ </ Text >
115
+ { chainInfo && < Text size = "xs" > { chainInfo . name } </ Text > }
116
+ </ Container >
114
117
</ Container >
115
- < div style = { { flex : 1 } } />
116
- < Container flex = "row" center = "y" gap = "3xs" >
117
- < Text size = "xs" color = "secondaryText" >
118
- { formatTokenBalance ( tokenBalance . balance , true ) }
119
- </ Text >
118
+ < Container flex = "row" center = "y" gap = "3xs" color = "secondaryText" >
119
+ < FiatValue
120
+ tokenAmount = { tokenBalance . balance . displayValue }
121
+ token = { tokenBalance . token }
122
+ chain = { tokenBalance . chain }
123
+ client = { client }
124
+ size = "xs"
125
+ />
126
+ < ChevronRightIcon width = { iconSize . md } height = { iconSize . md } />
120
127
</ Container >
121
128
</ StyledButton >
122
129
) ;
@@ -149,7 +156,7 @@ export function WalletRow(props: {
149
156
width = { props . iconSize ? iconSize [ props . iconSize ] : iconSize . md }
150
157
height = { props . iconSize ? iconSize [ props . iconSize ] : iconSize . md }
151
158
style = { {
152
- borderRadius : "100%" ,
159
+ borderRadius : radius . sm ,
153
160
overflow : "hidden" ,
154
161
border : `1px solid ${ theme . colors . borderColor } ` ,
155
162
} }
@@ -166,7 +173,7 @@ export function WalletRow(props: {
166
173
style = { {
167
174
width : iconSize . md ,
168
175
height : iconSize . md ,
169
- borderRadius : "100%" ,
176
+ borderRadius : radius . sm ,
170
177
overflow : "hidden" ,
171
178
border : `1px solid ${ theme . colors . borderColor } ` ,
172
179
} }
@@ -186,7 +193,7 @@ const StyledButton = /* @__PURE__ */ styled(Button)((_) => {
186
193
const theme = useCustomTheme ( ) ;
187
194
return {
188
195
background : theme . colors . tertiaryBg ,
189
- justifyContent : "flex-start " ,
196
+ justifyContent : "space-between " ,
190
197
flexDirection : "row" ,
191
198
padding : spacing . sm ,
192
199
gap : spacing . sm ,
0 commit comments