Fix search dropdown width render and add SPL tokens to search

src/components/AppSearch.tsx

@@ -2,9 +2,20 @@ import React, {useRef, useState} from 'react';
 import { Select, Typography } from 'antd';
 import apps from './app-list.json';
 import { SearchOutlined } from '@ant-design/icons';
+import {TOKEN_MINTS} from "@project-serum/serum";
 
 const { Option } = Select;
 
+const appsAndTokens = apps.concat(TOKEN_MINTS.map(mint => {
+  return {
+    "name": `${mint.name} SPL`,
+    "url": `https://explorer.solana.com/address/${mint.address.toBase58()}`,
+    "description": `${mint.name} SPL token`,
+    "icon": "",
+    "tags": ["token", "blockchain", "solana", "spl", "solana", mint.address.toBase58()]
+  }
+}))
+
 interface App {
   name: string;
   url: string;
@@ -16,6 +27,7 @@ export default function AppSearch(props) {
   const [searchMatches, setSearchMatches] = useState<App[]>([]);
   const [searchValue, setSearchValue] = useState<string | undefined>(undefined);
 
+
   const matchApp = (searchString: string, app: App) => {
     const lowerSearchStr = searchString.toLowerCase();
     return (
@@ -30,7 +42,7 @@ export default function AppSearch(props) {
 
   const handleSearch = (value) => {
     setSearchValue(value === '' ? undefined : value);
-    const filteredApps = apps.filter((app) => matchApp(value, app));
+    const filteredApps = appsAndTokens.filter((app) => matchApp(value, app));
     setSearchMatches(filteredApps);
   };
 
@@ -75,8 +87,9 @@ export default function AppSearch(props) {
         transition: props.focussed ? "width 0.1s ease 0.1s" : ""
       }}
       dropdownStyle={{
-        width: "300px"
+        width: props.width || "300px"
       }}
+      dropdownMatchSelectWidth={false}
       suffixIcon={<SearchOutlined onClick={() => ref.current && ref.current.focus()}/>}
       filterOption={false}
     >

src/components/app-list.json

@@ -413,13 +413,6 @@
     "icon": "",
     "tags": ["amm", "documentation"]
   },
-  {
-    "name": "Serum (SRM) SPL",
-    "url": "https://explorer.solana.com/address/SRMuApVNdxXokk5GT7XD5cUUgXMBCoAz2LHeuAoKWRt",
-    "description": "",
-    "icon": "",
-    "tags": ["srm", "token", "solana"]
-  },
   {
     "name": "Serum (SRM) ERC20",
     "url": "https://etherscan.io/token/0x476c5e26a75bd202a9683ffd34359c0cc15be0ff",
@@ -427,13 +420,6 @@
     "icon": "",
     "tags": ["srm", "token", "solana", "eth"]
   },
-  {
-    "name": "MegaSerum (MSRM) SPL",
-    "url": "https://explorer.solana.com/address/MSRMcoVyrFxnSgo5uXwone5SKcGhT1KEJMFEkMEWf9L",
-    "description": "",
-    "icon": "",
-    "tags": ["srm", "token", "solana"]
-  },
   {
     "name": "MegaSerum (MSRM) ERC20",
     "url": "https://etherscan.io/token/0x1320c8c64b9f2eAa851F70702e6C9FC1EE4E8Ce4",