blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

swap token select styling

This commit is contained in:
saml33 2022-07-16 21:22:59 +10:00
parent f6d2469e60
commit f3c99a1b09
5 changed files with 230 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/TokenSelect.tsx
View File

@ -1,33 +1,26 @@
import { ChevronDownIcon } from '@heroicons/react/solid'
import Image from 'next/image'
import { useState } from 'react'
import mangoStore from '../store/state'
import SelectTokenModal from './swap/SelectTokenModal'
type TokenSelectProps = {
token: string
onChange: (x: string) => void
showTokenList: (x: any) => void
type: 'input' | 'output'
}
const TokenSelect = ({ token, onChange }: TokenSelectProps) => {
const [showTokenSelectModal, setShowTokenSelectModal] = useState(false)
const TokenSelect = ({ token, showTokenList, type }: TokenSelectProps) => {
const group = mangoStore((s) => s.group)
const handleTokenSelect = (sym: string) => {
setShowTokenSelectModal(false)
onChange(sym)
}
if (!group) return null
return (
<>
<div
onClick={() => setShowTokenSelectModal(true)}
className="flex h-full items-center py-2 text-th-fgd-2 hover:cursor-pointer hover:text-th-fgd-1"
onClick={() => showTokenList(type)}
className="default-transition flex h-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
role="button"
>
<div className="mr-3 flex min-w-[24px] items-center">
<div className="mr-2.5 flex min-w-[24px] items-center">
<Image
alt=""
width="24"
@ -40,13 +33,6 @@ const TokenSelect = ({ token, onChange }: TokenSelectProps) => {
<ChevronDownIcon className="h-6 w-6" />
</div>
</div>
{showTokenSelectModal ? (
<SelectTokenModal
isOpen={showTokenSelectModal}
onClose={() => setShowTokenSelectModal(false)}
onTokenSelect={handleTokenSelect}
/>
) : null}
</>
)
}

2
components/forms/Input.tsx
View File

@ -44,7 +44,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
? 'cursor-not-allowed bg-th-bkg-3 text-th-fgd-3 hover:border-th-fgd-4'
: ''
}
${prefix ? 'pl-7' : ''}
${prefix ? 'pl-8' : ''}
${suffix ? 'pr-11' : ''}`}
disabled={disabled}
ref={ref}

177
components/swap/SelectToken.tsx Normal file
View File

@ -0,0 +1,177 @@
import { memo, useMemo, useState, useEffect, ChangeEvent } from 'react'
import { SearchIcon } from '@heroicons/react/outline'
import Image from 'next/image'
import { Token } from '../../types/jupiter'
import mangoStore from '../../store/state'
import Input from '../forms/Input'
import { IconButton } from '../shared/Button'
import { XIcon } from '@heroicons/react/solid'
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,
}: {
token: Token
onSubmit: (x: string) => void
}) => {
const { address, symbol, logoURI, name } = token
return (
<div>
<button
key={address}
className="flex w-full cursor-pointer items-center justify-between rounded-md p-2 font-normal focus:bg-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-4"
onClick={() => onSubmit(symbol)}
>
<div className="flex items-center">
<picture>
<source srcSet={logoURI} type="image/webp" />
<img src={logoURI} width="24" height="24" alt={symbol} />
</picture>
<div className="ml-2.5">
<div className="text-left text-th-fgd-2">{symbol || 'unknown'}</div>
<div className="text-left text-th-fgd-4">{name || 'unknown'}</div>
</div>
</div>
</button>
</div>
)
}
const popularTokenSymbols = ['USDC', 'SOL', 'USDT', 'MNGO', 'BTC', 'ETH']
const SelectToken = ({
onClose,
onTokenSelect,
type,
}: {
onClose: () => void
onTokenSelect: (x: string) => void
type: string
}) => {
const [search, setSearch] = useState('')
const tokens = mangoStore.getState().jupiterTokens
const walletTokens = mangoStore((s) => s.wallet.tokens)
const popularTokens = useMemo(() => {
return walletTokens?.length
? tokens.filter((token) => {
const walletMints = walletTokens.map((tok) => tok.mint.toString())
return !token?.name || !token?.symbol
? false
: popularTokenSymbols.includes(token.symbol) &&
walletMints.includes(token.address)
})
: tokens.filter((token) => {
return !token?.name || !token?.symbol
? false
: popularTokenSymbols.includes(token.symbol)
})
}, [walletTokens, 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) {
const filteredTokens = tokens.filter((token) => {
return !token?.name || !token?.symbol ? false : true
})
if (walletTokens?.length) {
const walletMints = walletTokens.map((tok) => tok.mint.toString())
return filteredTokens.sort(
(a, b) =>
walletMints.indexOf(b.address) - walletMints.indexOf(a.address)
)
} else {
return filteredTokens
}
} else {
return []
}
}, [tokens, walletTokens])
const handleUpdateSearch = (e: ChangeEvent<HTMLInputElement>) => {
setSearch(e.target.value)
}
const sortedTokens = search ? startSearch(tokenInfos, search) : tokenInfos
return (
<>
<p className="mb-3">{type === 'input' ? 'Short' : 'Long'}</p>
<IconButton className="absolute top-2 right-2" onClick={() => onClose()}>
<XIcon className="h-5 w-5" />
</IconButton>
<div className="flex items-center text-th-fgd-4">
<Input
type="text"
placeholder="Search by token or paste address"
prefix={<SearchIcon className="h-5 w-5" />}
autoFocus
value={search}
onChange={handleUpdateSearch}
/>
</div>
{popularTokens.length && onTokenSelect ? (
<div className="mt-4 flex flex-wrap">
{popularTokens.map((token) => (
<button
className="mx-1 mb-2 flex items-center rounded-md border border-th-bkg-4 py-1 px-3 hover:border-th-fgd-3 focus:border-th-fgd-2"
onClick={() => onTokenSelect(token.symbol)}
key={token.address}
>
<Image
alt=""
width="16"
height="16"
src={`/icons/${token.symbol.toLowerCase()}.svg`}
/>
<span className="ml-1.5 text-th-fgd-1">{token.symbol}</span>
</button>
))}
</div>
) : null}
<div className="my-2 border-t border-th-bkg-4"></div>
<div className="overflow-auto">
{sortedTokens.map((token) => (
<TokenItem token={token} onSubmit={onTokenSelect} />
))}
</div>
</>
)
}
export default memo(SelectToken)

50
components/swap/Swap.tsx
View File

@ -1,4 +1,4 @@
import { useState, ChangeEvent, useCallback } from 'react'
import { useState, ChangeEvent, useCallback, Fragment } from 'react'
import { TransactionInstruction } from '@solana/web3.js'
import { ArrowDownIcon } from '@heroicons/react/solid'
@ -12,6 +12,8 @@ import { numberFormat } from '../../utils/numbers'
import LeverageSlider from './LeverageSlider'
import Input from '../forms/Input'
import { useTranslation } from 'next-i18next'
import SelectToken from './SelectToken'
import { Transition } from '@headlessui/react'
const Swap = () => {
const { t } = useTranslation('common')
@ -20,6 +22,7 @@ const Swap = () => {
const [inputToken, setInputToken] = useState('SOL')
const [outputToken, setOutputToken] = useState('USDC')
const [submitting, setSubmitting] = useState(false)
const [showTokenSelect, setShowTokenSelect] = useState('')
const [slippage, setSlippage] = useState(0.1)
const debouncedAmountIn = useDebounce(amountIn, 400)
const set = mangoStore.getState().set
@ -38,6 +41,7 @@ const Swap = () => {
s.inputTokenInfo = inputTokenInfo
})
setInputToken(symbol)
setShowTokenSelect('')
}
const handleTokenOutSelect = (symbol: string) => {
@ -46,6 +50,7 @@ const Swap = () => {
s.outputTokenInfo = outputTokenInfo
})
setOutputToken(symbol)
setShowTokenSelect('')
}
const handleSwitchTokens = () => {
@ -100,18 +105,43 @@ const Swap = () => {
}
return (
<ContentBox showBackground>
<ContentBox showBackground className="relative">
<Transition
appear={true}
className="thin-scroll absolute bottom-0 left-0 z-20 h-full overflow-auto bg-th-bkg-2 p-6 pb-0"
show={!!showTokenSelect}
enter="transition-all ease-in duration-500"
enterFrom="max-h-0"
enterTo="max-h-full"
leave="transition-all ease-out duration-500"
leaveFrom="max-h-full"
leaveTo="max-h-0"
>
<SelectToken
onClose={() => setShowTokenSelect('')}
onTokenSelect={
showTokenSelect === 'input'
? handleTokenInSelect
: handleTokenOutSelect
}
type={showTokenSelect}
/>
</Transition>
<p className="mb-2 text-th-fgd-3">{t('short')}</p>
<div className="mb-3 grid grid-cols-2">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-3 bg-th-bkg-1 px-4">
<TokenSelect token={inputToken} onChange={handleTokenInSelect} />
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-3 bg-th-bkg-1">
<TokenSelect
token={inputToken}
showTokenList={setShowTokenSelect}
type="input"
/>
</div>
<div className="col-span-1">
<Input
type="text"
name="amountIn"
id="amountIn"
className="w-full rounded-lg rounded-l-none border border-th-bkg-3 bg-th-bkg-1 py-3 px-4 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
className="w-full rounded-lg rounded-l-none border border-th-bkg-3 bg-th-bkg-1 p-3 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
placeholder="0.00"
value={amountIn}
onChange={handleAmountInChange}
@ -128,10 +158,14 @@ const Swap = () => {
</div>
<p className="mb-2 text-th-fgd-3">{t('long')}</p>
<div className="mb-3 grid grid-cols-2">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-3 bg-th-bkg-1 px-4">
<TokenSelect token={outputToken} onChange={handleTokenOutSelect} />
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-3 bg-th-bkg-1">
<TokenSelect
token={outputToken}
showTokenList={setShowTokenSelect}
type="output"
/>
</div>
<div className="w-full rounded-lg rounded-l-none border border-th-bkg-3 bg-th-bkg-3 py-3 px-4 text-right text-xl font-bold tracking-wider text-th-fgd-3">
<div className="w-full rounded-lg rounded-l-none border border-th-bkg-3 bg-th-bkg-3 p-3 text-right text-xl font-bold tracking-wider text-th-fgd-3">
{amountOut ? numberFormat.format(amountOut) : 0}
</div>
</div>

4
styles/globals.css
View File

@ -151,6 +151,10 @@ svg {
@apply transition-all duration-500 ease-out;
}
.default-transition {
@apply transition-all duration-500 ease-out;
}
/* Type */
h1,