token select fixes

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 ? (
     <div
       className={styles.conversion}
       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>{`= € ${euro}`}</span>
     </div>
-  )
+  ) : null
 }

src/features/Web3/components/TokenSelect/Token.css

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

src/features/Web3/components/TokenSelect/Token.tsx

@@ -26,7 +26,11 @@ export const Token = forwardRef<HTMLDivElement, SelectItemProps>(
         : 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 ? (
       <Select.Item
         className={`${className ? className : ''} Token`}
         {...props}
@@ -47,7 +51,9 @@ export const Token = forwardRef<HTMLDivElement, SelectItemProps>(
           <h3 className="TokenName">{token?.name}</h3>
           <p className="TokenBalance">{balance}</p>
         </div>
+        {valueInUsd ? (
           <div className="TokenValue">{valueInUsdFormatted}</div>
+        ) : null}
 
         <Select.ItemIndicator className="SelectItemIndicator">
           <Check />

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 {

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"
     >
       <Select.Trigger
         className="SelectTrigger"
@@ -53,17 +54,13 @@ export function TokenSelect() {
         </Select.Icon>
       </Select.Trigger>
 
-      {/* @ts-expect-error-next-line: style actually is passed through and is needed in our case */}
-      <Select.Portal style={{ zIndex: 10 }}>
       <Select.Content className="SelectContent">
         <Select.ScrollUpButton className="SelectScrollButton">
           <ChevronsUp />
         </Select.ScrollUpButton>
         <Select.Viewport className="SelectViewport">
           <Select.Group>
-              <Select.Label className="SelectLabel">
+            <Select.Label className="SelectLabel">In Your Wallet</Select.Label>
-                In Your Wallet
-              </Select.Label>
             {items}
           </Select.Group>
         </Select.Viewport>
@@ -71,7 +68,6 @@ export function TokenSelect() {
           <ChevronsDown />
         </Select.ScrollDownButton>
       </Select.Content>
-      </Select.Portal>
     </Select.Root>
   ) : isLoading ? (
     <div className="Token">