m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 09:56:51 +01:00
Code

token select fixes

Browse Source
This commit is contained in:
Matthias Kretschmann 2024-03-12 21:20:40 +00:00
parent f58ffefddc
commit 339ec44098
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/features/Web3/components/Conversion/Conversion.tsx
View File

@ -4,7 +4,7 @@ import { useStore } from '@nanostores/react'
import { $selectedToken } from '@features/Web3/stores/selectedToken' import { $selectedToken } from '@features/Web3/stores/selectedToken'
import { $amount } from '@features/Web3/stores' import { $amount } from '@features/Web3/stores'
export function Conversion(): ReactElement { export function Conversion(): ReactElement | null {
const selectedToken = useStore($selectedToken) const selectedToken = useStore($selectedToken)
const amount = useStore($amount) const amount = useStore($amount)
@ -26,7 +26,7 @@ export function Conversion(): ReactElement {
setEuro(euro) setEuro(euro)
}, [selectedToken?.price, amount]) }, [selectedToken?.price, amount])
return ( return selectedToken?.price?.usd ? (
<div <div
className={styles.conversion} className={styles.conversion}
title="Value in USD & EUR at current spot price for selected token on Coingecko." title="Value in USD & EUR at current spot price for selected token on Coingecko."
@ -34,5 +34,5 @@ export function Conversion(): ReactElement {
<span>{`= $ ${dollar}`}</span> <span>{`= $ ${dollar}`}</span>
<span>{`= € ${euro}`}</span> <span>{`= € ${euro}`}</span>
</div> </div>
) ) : null
} }

1
src/features/Web3/components/TokenSelect/Token.css
View File

@ -42,6 +42,7 @@
.TokenName, .TokenName,
.TokenBalance { .TokenBalance {
margin: 0; margin: 0;
text-align: left;
} }
.TokenName { .TokenName {

10
src/features/Web3/components/TokenSelect/Token.tsx
View File

@ -26,7 +26,11 @@ export const Token = forwardRef<HTMLDivElement, SelectItemProps>(
: 0 : 0
const valueInUsdFormatted = formatCurrency(valueInUsd, 'USD', locale) const valueInUsdFormatted = formatCurrency(valueInUsd, 'USD', locale)
return balance && parseInt(balance) !== 0 && valueInUsd >= 1 ? ( // const hasBalanceAndValue =
// balance && parseInt(balance) !== 0 && valueInUsd >= 1
const hasBalance = balance && parseInt(balance) !== 0
return hasBalance ? (
<Select.Item <Select.Item
className={`${className ? className : ''} Token`} className={`${className ? className : ''} Token`}
{...props} {...props}
@ -47,7 +51,9 @@ export const Token = forwardRef<HTMLDivElement, SelectItemProps>(
<h3 className="TokenName">{token?.name}</h3> <h3 className="TokenName">{token?.name}</h3>
<p className="TokenBalance">{balance}</p> <p className="TokenBalance">{balance}</p>
</div> </div>
<div className="TokenValue">{valueInUsdFormatted}</div> {valueInUsd ? (
<div className="TokenValue">{valueInUsdFormatted}</div>
) : null}
<Select.ItemIndicator className="SelectItemIndicator"> <Select.ItemIndicator className="SelectItemIndicator">
<Check /> <Check />

2
src/features/Web3/components/TokenSelect/TokenSelect.css
View File

@ -30,6 +30,8 @@
background-color: var(--body-background-color); background-color: var(--body-background-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
z-index: 100;
position: relative;
} }
.SelectViewport { .SelectViewport {

34
src/features/Web3/components/TokenSelect/TokenSelect.tsx
View File

@ -41,6 +41,7 @@ export function TokenSelect() {
value={selectedToken?.address} value={selectedToken?.address}
onValueChange={(value: `0x${string}`) => handleValueChange(value)} onValueChange={(value: `0x${string}`) => handleValueChange(value)}
disabled={isLoading} disabled={isLoading}
name="selectedToken"
> >
<Select.Trigger <Select.Trigger
className="SelectTrigger" className="SelectTrigger"
@ -53,25 +54,20 @@ export function TokenSelect() {
</Select.Icon> </Select.Icon>
</Select.Trigger> </Select.Trigger>
{/* @ts-expect-error-next-line: style actually is passed through and is needed in our case */} <Select.Content className="SelectContent">
<Select.Portal style={{ zIndex: 10 }}> <Select.ScrollUpButton className="SelectScrollButton">
<Select.Content className="SelectContent"> <ChevronsUp />
<Select.ScrollUpButton className="SelectScrollButton"> </Select.ScrollUpButton>
<ChevronsUp /> <Select.Viewport className="SelectViewport">
</Select.ScrollUpButton> <Select.Group>
<Select.Viewport className="SelectViewport"> <Select.Label className="SelectLabel">In Your Wallet</Select.Label>
<Select.Group> {items}
<Select.Label className="SelectLabel"> </Select.Group>
In Your Wallet </Select.Viewport>
</Select.Label> <Select.ScrollDownButton className="SelectScrollButton">
{items} <ChevronsDown />
</Select.Group> </Select.ScrollDownButton>
</Select.Viewport> </Select.Content>
<Select.ScrollDownButton className="SelectScrollButton">
<ChevronsDown />
</Select.ScrollDownButton>
</Select.Content>
</Select.Portal>
</Select.Root> </Select.Root>
) : isLoading ? ( ) : isLoading ? (
<div className="Token"> <div className="Token">