docs: add missing JSDocs / complete JSDocs

src/sharedComponents/TokenSelect/List/Row.tsx

@@ -66,22 +66,22 @@ const Wrapper = styled.div.attrs(({ className = 'tokenSelectListRow', tabIndex =
 
     ${Name} {
       color: var(
-        --theme-token-select-row-token-name-color-default,
-        var(--theme-token-select-row-token-name-color-hover)
+        --theme-token-select-row-token-name-color-hover,
+        var(--theme-token-select-row-token-name-color-default)
       );
     }
 
     ${Balance} {
       color: var(
-        --theme-token-select-row-token-balance-color-default,
-        var(--theme-token-select-row-token-balance-color-hover)
+        --theme-token-select-row-token-balance-color-hover,
+        var(--theme-token-select-row-token-balance-color-default)
       );
     }
 
     ${Value} {
       color: var(
-        --theme-token-select-row-token-value-color-default,
-        var(--theme-token-select-row-token-value-color-hover)
+        --theme-token-select-row-token-value-color-hover,
+        var(--theme-token-select-row-token-value-color-default)
       );
     }
   }
@@ -119,6 +119,16 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
   token: Token
 }
 
+/**
+ * @name Row
+ * @description A row in the token select list.
+ *
+ * @param {Token} token - The token to display.
+ * @param {number} iconSize - The size of the token icon.
+ * @param {(token: Token) => void} onClick - Callback function to be called when the row is clicked.
+ * @param {boolean} [showBalance=false] - Optional flag to show the token balance. Default is false.
+ * @param {boolean} [showValue=false] - Optional flag to show the token value. Default is false.
+ */
 const Row: FC<Props> = ({ iconSize, onClick, showBalance, showValue, token, ...restProps }) => {
   const { name } = token
 

src/sharedComponents/TokenSelect/List/index.tsx

@@ -25,6 +25,18 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   tokenList: Tokens
 }
 
+/**
+ * @name List
+ * @description List component for TokenSelect. Displays a list of tokens.
+ *
+ * @param {number} containerHeight - The height of the virtualized list container.
+ * @param {number} iconSize - The size of the token icon for each item in the list.
+ * @param {number} itemHeight - The height of each item in the list.
+ * @param {function} onTokenSelect - Callback function to be called when a token is selected.
+ * @param {boolean} [showBalance] - Optional flag to show the token balance in the list.
+ * @param {boolean} [showValue] - Optional flag to show the token value in the list.
+ * @param {Tokens} tokenList - The list of tokens to display.
+ */
 const List = withSuspense(
   ({
     className,

src/sharedComponents/TokenSelect/Search/Input.tsx

@@ -84,6 +84,10 @@ const SearchInput = styled(Textfield).attrs({ type: 'search' })`
   }
 `
 
+/**
+ * @name Input
+ * @description A search input with a search icon
+ */
 const Input: FC<InputHTMLAttributes<HTMLInputElement>> = ({ className, ...inputProps }) => {
   return (
     <Wrapper className={`${className ? className : ''}`.trim()}>

src/sharedComponents/TokenSelect/Search/NetworkButton.tsx

@@ -19,6 +19,10 @@ const ChevronDown = () => (
   </svg>
 )
 
+/**
+ * @name NetworkButton
+ * @description A button to select a network from a dropdown
+ */
 const NetworkButton = styled.button.attrs(
   ({ children, className = 'tokenSelectNetworkButton' }) => ({
     children: (

src/sharedComponents/TokenSelect/Search/index.tsx

@@ -27,12 +27,22 @@ const Item = styled(BaseItem)`
 interface Props extends HTMLAttributes<HTMLDivElement> {
   currentNetworkId: number
   networks?: Networks
-  placeholder: string
+  placeholder?: string
   searchTerm: string
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>
 }
 
-const TokenSelect: React.FC<Props> = ({
+/**
+ * @name Search
+ * @description Search component for TokenSelect. Includes a search input and a networks dropdown.
+ *
+ * @param {number} currentNetworkId - The current network id.
+ * @param {Networks} networks - Optional list of networks to display in the dropdown.
+ * @param {string} [placeholder] - Optional placeholder text for the search input.
+ * @param {string} searchTerm - The current search term.
+ * @param {function} setSearchTerm - Callback function to set the search term.
+ */
+const Search: React.FC<Props> = ({
   currentNetworkId,
   networks,
   placeholder,
@@ -68,4 +78,4 @@ const TokenSelect: React.FC<Props> = ({
   )
 }
 
-export default TokenSelect
+export default Search

src/sharedComponents/TokenSelect/TopTokens/Item.tsx

@@ -82,6 +82,12 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   token: Token
 }
 
+/**
+ * @name Item
+ * @description A single token item in the top tokens list
+ *
+ * @param {Token} token - The token to display
+ */
 const Item: React.FC<Props> = ({ token, ...restProps }: Props) => {
   const { symbol } = token
 

src/sharedComponents/TokenSelect/TopTokens/index.tsx

@@ -19,6 +19,13 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   tokens: Tokens
 }
 
+/**
+ * @name TopTokens
+ * @description TopTokens component for TokenSelect. Displays a list of top / preferred tokens.
+ *
+ * @param {function} onTokenSelect - Callback function to be called when a token is selected.
+ * @param {Tokens} tokens - The list of tokens to display.
+ */
 const TopTokens: React.FC<Props> = ({ onTokenSelect, tokens, ...restProps }: Props) => {
   const topTokenSymbols = ['matic', 'usdc', 'usdt', 'dai', 'weth', 'wbtc', 'arb', 'aave']
 

src/sharedComponents/TokenSelect/index.tsx

@@ -43,7 +43,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 }
 
 /**
- * TokenSelect component, used to search and select a token from a list.
+ * @name TokenSelect
+ * @description TokenSelect component, used to search and select a token from a list.
  *
  * @param {number} [currentNetworkId=mainnet.id] - The current network id. Default is mainnet's id.
  * @param {function} onTokenSelect - Callback function to be called when a token is selected.
@@ -65,12 +66,31 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
  * * --theme-token-select-border-color (defaults to --theme-card-border-color)
  * * --theme-token-select-box-shadow (defaults to --theme-card-box-shadow)
  *
+ * Search field:
+ * * --theme-token-select-search-field-color
+ * * --theme-token-select-search-field-color-active
+ * * --theme-token-select-search-field-background-color
+ * * --theme-token-select-search-field-background-color-active
+ * * --theme-token-select-search-field-placeholder-color
+ * * --theme-token-select-search-field-box-shadow
+ * * --theme-token-select-search-field-box-shadow-active
+ * * --theme-token-select-search-field-border-color
+ * * --theme-token-select-search-field-border-color-active
+ *
  * Network select button:
  * * --theme-token-select-network-button-color
  * * --theme-token-select-network-button-color-hover
  * * --theme-token-select-network-button-background-color
  * * --theme-token-select-network-button-background-color-hover
  *
+ * Top tokens:
+ * * --theme-token-select-top-token-item-color
+ * * --theme-token-select-top-token-item-color-hover
+ * * --theme-token-select-top-token-item-background-color
+ * * --theme-token-select-top-token-item-background-color-hover
+ * * --theme-token-select-top-token-item-border-color
+ * * --theme-token-select-top-token-item-border-color-hover
+ *
  * List:
  * * --theme-token-select-list-border-top-color
  *
@@ -83,25 +103,6 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
  * * --theme-token-select-row-token-balance-color-hover
  * * --theme-token-select-row-token-value-color
  * * --theme-token-select-row-token-value-color-hover
- *
- * Top tokens:
- * * --theme-token-select-top-token-item-color
- * * --theme-token-select-top-token-item-color-hover
- * * --theme-token-select-top-token-item-background-color
- * * --theme-token-select-top-token-item-background-color-hover
- * * --theme-token-select-top-token-item-border-color
- * * --theme-token-select-top-token-item-border-color-hover
- *
- * Search field:
- * * --theme-token-select-search-field-color
- * * --theme-token-select-search-field-color-active
- * * --theme-token-select-search-field-background-color
- * * --theme-token-select-search-field-background-color-active
- * * --theme-token-select-search-field-placeholder-color
- * * --theme-token-select-search-field-box-shadow
- * * --theme-token-select-search-field-box-shadow-active
- * * --theme-token-select-search-field-border-color
- * * --theme-token-select-search-field-border-color-active
  */
 const TokenSelect: React.FC<Props> = ({
   containerHeight = 320,