diff --git a/src/features/Web3/components/Conversion/Conversion.tsx b/src/features/Web3/components/Conversion/Conversion.tsx index 4d233070..b4306cf4 100644 --- a/src/features/Web3/components/Conversion/Conversion.tsx +++ b/src/features/Web3/components/Conversion/Conversion.tsx @@ -4,7 +4,7 @@ import { useStore } from '@nanostores/react' import { $selectedToken } from '@features/Web3/stores/selectedToken' import { $amount } from '@features/Web3/stores' -export function Conversion(): ReactElement { +export function Conversion(): ReactElement | null { const selectedToken = useStore($selectedToken) const amount = useStore($amount) @@ -26,7 +26,7 @@ export function Conversion(): ReactElement { setEuro(euro) }, [selectedToken?.price, amount]) - return ( + return selectedToken?.price?.usd ? (
{`= $ ${dollar}`} {`= € ${euro}`}
- ) + ) : null } diff --git a/src/features/Web3/components/TokenSelect/Token.css b/src/features/Web3/components/TokenSelect/Token.css index 6aa1369b..7208b77f 100644 --- a/src/features/Web3/components/TokenSelect/Token.css +++ b/src/features/Web3/components/TokenSelect/Token.css @@ -42,6 +42,7 @@ .TokenName, .TokenBalance { margin: 0; + text-align: left; } .TokenName { diff --git a/src/features/Web3/components/TokenSelect/Token.tsx b/src/features/Web3/components/TokenSelect/Token.tsx index 356e3c24..03f56a79 100644 --- a/src/features/Web3/components/TokenSelect/Token.tsx +++ b/src/features/Web3/components/TokenSelect/Token.tsx @@ -26,7 +26,11 @@ export const Token = forwardRef( : 0 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 ? ( (

{token?.name}

{balance}

-
{valueInUsdFormatted}
+ {valueInUsd ? ( +
{valueInUsdFormatted}
+ ) : null} diff --git a/src/features/Web3/components/TokenSelect/TokenSelect.css b/src/features/Web3/components/TokenSelect/TokenSelect.css index b1bb31fa..3c1363f9 100644 --- a/src/features/Web3/components/TokenSelect/TokenSelect.css +++ b/src/features/Web3/components/TokenSelect/TokenSelect.css @@ -30,6 +30,8 @@ background-color: var(--body-background-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); + z-index: 100; + position: relative; } .SelectViewport { diff --git a/src/features/Web3/components/TokenSelect/TokenSelect.tsx b/src/features/Web3/components/TokenSelect/TokenSelect.tsx index 986d7aef..f10bc6ae 100644 --- a/src/features/Web3/components/TokenSelect/TokenSelect.tsx +++ b/src/features/Web3/components/TokenSelect/TokenSelect.tsx @@ -41,6 +41,7 @@ export function TokenSelect() { value={selectedToken?.address} onValueChange={(value: `0x${string}`) => handleValueChange(value)} disabled={isLoading} + name="selectedToken" > - {/* @ts-expect-error-next-line: style actually is passed through and is needed in our case */} - - - - - - - - - In Your Wallet - - {items} - - - - - - - + + + + + + + In Your Wallet + {items} + + + + + + ) : isLoading ? (