import { memo, useMemo, useState, useEffect, ChangeEvent } from 'react'
import Image from 'next/image'
import { Token } from '../../types/jupiter'
import mangoStore from '@store/mangoStore'
import Input from '../forms/Input'
import { IconButton } from '../shared/Button'
import {
QuestionMarkCircleIcon,
MagnifyingGlassIcon,
XMarkIcon,
} from '@heroicons/react/20/solid'
import { useTranslation } from 'next-i18next'
import { floorToDecimal } from '../../utils/numbers'
import Decimal from 'decimal.js'
import { getTokenInMax } from './useTokenMax'
const generateSearchTerm = (item: Token, searchValue: string) => {
const normalizedSearchValue = searchValue.toLowerCase()
const values = `${item.symbol} ${item.name}`.toLowerCase()
const isMatchingWithSymbol =
item.symbol.toLowerCase().indexOf(normalizedSearchValue) >= 0
const matchingSymbolPercent = isMatchingWithSymbol
? normalizedSearchValue.length / item.symbol.length
: 0
return {
token: item,
matchingIdx: values.indexOf(normalizedSearchValue),
matchingSymbolPercent,
}
}
const startSearch = (items: Token[], searchValue: string) => {
return items
.map((item) => generateSearchTerm(item, searchValue))
.filter((item) => item.matchingIdx >= 0)
.sort((i1, i2) => i1.matchingIdx - i2.matchingIdx)
.sort((i1, i2) => i2.matchingSymbolPercent - i1.matchingSymbolPercent)
.map((item) => item.token)
}
const TokenItem = ({
token,
onSubmit,
useMargin,
type,
}: {
token: Token
onSubmit: (x: string) => void
useMargin: boolean
type: string
}) => {
const { address, symbol, logoURI, name } = token
const isDisabled =
(type === 'input' && useMargin && token.amountWithBorrow!.eq(0)) ||
(type === 'input' && !useMargin && token.amount!.eq(0))
return (
)
}
const popularTokenSymbols = ['USDC', 'SOL', 'USDT', 'MNGO', 'BTC']
const SwapFormTokenList = ({
onClose,
onTokenSelect,
type,
useMargin,
}: {
onClose: () => void
onTokenSelect: (x: string) => void
type: string
useMargin: boolean
}) => {
const { t } = useTranslation(['common', 'swap'])
const [search, setSearch] = useState('')
const tokens = mangoStore.getState().jupiterTokens
const walletTokens = mangoStore((s) => s.wallet.tokens)
// const jupiterTokens = mangoStore((s) => s.jupiterTokens)
const inputBank = mangoStore((s) => s.swap.inputBank)
const outputBank = mangoStore((s) => s.swap.outputBank)
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const group = mangoStore((s) => s.group)
// const popularTokens = useMemo(() => {
// return tokens.filter((token) => {
// return !token?.name || !token?.symbol
// ? false
// : popularTokenSymbols.includes(token.symbol)
// })
// }, [tokens])
useEffect(() => {
function onEscape(e: any) {
if (e.keyCode === 27) {
onClose()
}
}
window.addEventListener('keydown', onEscape)
return () => window.removeEventListener('keydown', onEscape)
}, [onClose])
const tokenInfos = useMemo(() => {
if (
tokens?.length &&
group &&
mangoAccount &&
outputBank &&
type === 'input'
) {
const filteredSortedTokens = tokens
.map((token) => {
const max = getTokenInMax(
mangoAccount,
token.address,
group,
useMargin
)
return { ...token, ...max }
})
.filter((token) => (token.symbol === outputBank?.name ? false : true))
.sort((a, b) =>
useMargin
? Number(b.amountWithBorrow) - Number(a.amountWithBorrow)
: Number(b.amount) - Number(a.amount)
)
return filteredSortedTokens
} else if (tokens?.length) {
const filteredTokens = tokens
.map((token) => ({
...token,
amount: new Decimal(0),
amountWithBorrow: new Decimal(0),
}))
.filter((token) => (token.symbol === inputBank?.name ? false : true))
return filteredTokens
} else {
return []
}
}, [tokens, walletTokens, inputBank, outputBank, mangoAccount, group])
// const handleUpdateSearch = (e: ChangeEvent) => {
// setSearch(e.target.value)
// }
// const sortedTokens = search ? startSearch(tokenInfos, search) : tokenInfos
const sortedTokens = tokenInfos
return (
<>
{type === 'input'
? `${t('swap')} ${t('swap:from')}`
: `${t('swap')} ${t('swap:to')}`}
{/* No need for search/popular tokens until we have more tokens */}
{/*
}
autoFocus
value={search}
onChange={handleUpdateSearch}
/>
{popularTokens.length ? (
{popularTokens.map((token) => {
let logoURI
if (jupiterTokens.length) {
logoURI = jupiterTokens.find(
(t) => t.address === token.address
)!.logoURI
}
const disabled =
(type === 'input' && token.symbol === outputBank?.name) ||
(type === 'output' && token.symbol === inputBank?.name)
return (
)
})}
) : null} */}
{/* */}
{t('token')}
{type === 'input' ? (
{t('max')}
) : null}
{sortedTokens.map((token) => (
))}
>
)
}
export default memo(SwapFormTokenList)