Fix search dropdown width render and add SPL tokens to search
This commit is contained in:
parent
9fffd662b4
commit
8e2df76ba7
|
@ -2,9 +2,20 @@ import React, {useRef, useState} from 'react';
|
||||||
import { Select, Typography } from 'antd';
|
import { Select, Typography } from 'antd';
|
||||||
import apps from './app-list.json';
|
import apps from './app-list.json';
|
||||||
import { SearchOutlined } from '@ant-design/icons';
|
import { SearchOutlined } from '@ant-design/icons';
|
||||||
|
import {TOKEN_MINTS} from "@project-serum/serum";
|
||||||
|
|
||||||
const { Option } = Select;
|
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 {
|
interface App {
|
||||||
name: string;
|
name: string;
|
||||||
url: string;
|
url: string;
|
||||||
|
@ -16,6 +27,7 @@ export default function AppSearch(props) {
|
||||||
const [searchMatches, setSearchMatches] = useState<App[]>([]);
|
const [searchMatches, setSearchMatches] = useState<App[]>([]);
|
||||||
const [searchValue, setSearchValue] = useState<string | undefined>(undefined);
|
const [searchValue, setSearchValue] = useState<string | undefined>(undefined);
|
||||||
|
|
||||||
|
|
||||||
const matchApp = (searchString: string, app: App) => {
|
const matchApp = (searchString: string, app: App) => {
|
||||||
const lowerSearchStr = searchString.toLowerCase();
|
const lowerSearchStr = searchString.toLowerCase();
|
||||||
return (
|
return (
|
||||||
|
@ -30,7 +42,7 @@ export default function AppSearch(props) {
|
||||||
|
|
||||||
const handleSearch = (value) => {
|
const handleSearch = (value) => {
|
||||||
setSearchValue(value === '' ? undefined : value);
|
setSearchValue(value === '' ? undefined : value);
|
||||||
const filteredApps = apps.filter((app) => matchApp(value, app));
|
const filteredApps = appsAndTokens.filter((app) => matchApp(value, app));
|
||||||
setSearchMatches(filteredApps);
|
setSearchMatches(filteredApps);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -75,8 +87,9 @@ export default function AppSearch(props) {
|
||||||
transition: props.focussed ? "width 0.1s ease 0.1s" : ""
|
transition: props.focussed ? "width 0.1s ease 0.1s" : ""
|
||||||
}}
|
}}
|
||||||
dropdownStyle={{
|
dropdownStyle={{
|
||||||
width: "300px"
|
width: props.width || "300px"
|
||||||
}}
|
}}
|
||||||
|
dropdownMatchSelectWidth={false}
|
||||||
suffixIcon={<SearchOutlined onClick={() => ref.current && ref.current.focus()}/>}
|
suffixIcon={<SearchOutlined onClick={() => ref.current && ref.current.focus()}/>}
|
||||||
filterOption={false}
|
filterOption={false}
|
||||||
>
|
>
|
||||||
|
|
|
@ -413,13 +413,6 @@
|
||||||
"icon": "",
|
"icon": "",
|
||||||
"tags": ["amm", "documentation"]
|
"tags": ["amm", "documentation"]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "Serum (SRM) SPL",
|
|
||||||
"url": "https://explorer.solana.com/address/SRMuApVNdxXokk5GT7XD5cUUgXMBCoAz2LHeuAoKWRt",
|
|
||||||
"description": "",
|
|
||||||
"icon": "",
|
|
||||||
"tags": ["srm", "token", "solana"]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "Serum (SRM) ERC20",
|
"name": "Serum (SRM) ERC20",
|
||||||
"url": "https://etherscan.io/token/0x476c5e26a75bd202a9683ffd34359c0cc15be0ff",
|
"url": "https://etherscan.io/token/0x476c5e26a75bd202a9683ffd34359c0cc15be0ff",
|
||||||
|
@ -427,13 +420,6 @@
|
||||||
"icon": "",
|
"icon": "",
|
||||||
"tags": ["srm", "token", "solana", "eth"]
|
"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",
|
"name": "MegaSerum (MSRM) ERC20",
|
||||||
"url": "https://etherscan.io/token/0x1320c8c64b9f2eAa851F70702e6C9FC1EE4E8Ce4",
|
"url": "https://etherscan.io/token/0x1320c8c64b9f2eAa851F70702e6C9FC1EE4E8Ce4",
|
||||||
|
|
Loading…
Reference in New Issue