Function TokenInput

TokenInput component allows users to input token amounts and select tokens from a list. It displays the token input field, token balance, and a dropdown list of available tokens.

Remarks

Individual CSS classes are available for deep styling of individual components within TokenSelect:

Also theme CSS vars are available for cosmetic changes:

Main wrapper:

• --theme-token-input-background
• --base-token-input-border-radius
• --base-token-input-padding
• --base-token-input-gap

Title

• --theme-token-input-title-color

Textfield:

• --theme-token-input-textfield-background-color
• --theme-token-input-textfield-background-color-active
• --theme-token-input-textfield-border-color
• --theme-token-input-textfield-border-color-active
• --theme-token-input-textfield-color
• --theme-token-input-textfield-color-active
• --theme-token-input-textfield-placeholder-color
• --base-token-input-texfield-height
• --base-token-input-texfield-font-size

Dropdown button:

• --theme-token-input-dropdown-button-background-color
• --theme-token-input-dropdown-button-background-color-hover
• --theme-token-input-dropdown-button-border-color
• --theme-token-input-dropdown-button-border-color-hover
• --theme-token-input-dropdown-button-border-color-active
• --theme-token-input-dropdown-button-color
• --theme-token-input-dropdown-button-color-hover
• --base-token-input-dropdown-button-padding
• --base-token-input-texfield-padding

Max Button:

• --theme-token-input-max-button-background-color
• --theme-token-input-max-button-background-color-hover
• --theme-token-input-max-button-border-color
• --theme-token-input-max-button-border-color-hover
• --theme-token-input-max-button-border-color-active
• --theme-token-input-max-button-color
• --theme-token-input-max-button-color-hover

Estimated USD Value

• --theme-token-input-estimated-usd-color

Balance *--theme-token-input-balance-color