misc fixes
This commit is contained in:
saml33
parent
ba4c9d542a
commit
f68da5a17b
File diff suppressed because it is too large
Load Diff
|
|
@ -152,7 +152,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
return (
|
||||
<div>
|
||||
{chartData.length ? (
|
||||
<div className="p-4">
|
||||
<div className="py-6">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
{inputTokenSymbol && outputTokenInfo ? (
|
||||
|
|
@ -181,14 +181,17 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
chartData[chartData.length - 1]['price']
|
||||
)}
|
||||
<span
|
||||
className={`ml-2 text-sm ${
|
||||
className={`ml-2 text-xs ${
|
||||
chartChange >= 0 ? 'text-th-green' : 'text-th-red'
|
||||
}`}
|
||||
>
|
||||
{chartChange.toFixed(2)}%
|
||||
</span>
|
||||
<span className="font-normal ml-2 text-xs text-th-fgd-4">
|
||||
(Last 24h)
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs font-normal text-th-fgd-4">
|
||||
<div className="text-xs font-normal text-th-fgd-3">
|
||||
{dayjs(chartData[chartData.length - 1]['time']).format(
|
||||
'DD MMM YY, h:mma'
|
||||
)}
|
||||
|
|
@ -270,18 +273,18 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-th-bkg-3 mx-4 p-4 rounded-md text-center text-th-fgd-3">
|
||||
<div className="bg-th-bkg-3 p-4 rounded-md text-center text-th-fgd-3">
|
||||
Chart not available
|
||||
</div>
|
||||
)}
|
||||
|
||||
{inputTokenInfo ? (
|
||||
<div className="px-4 w-full">
|
||||
<div className="w-full">
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`bg-th-bkg-2 border border-th-bkg-4 default-transition flex items-center justify-between mt-4 p-3 rounded-md w-full hover:bg-th-bkg-3 ${
|
||||
className={`border border-th-bkg-4 default-transition flex items-center justify-between mt-4 p-3 rounded-md w-full hover:bg-th-bkg-2 ${
|
||||
open
|
||||
? 'border-b-transparent rounded-b-none'
|
||||
: 'transform rotate-360'
|
||||
|
|
@ -306,7 +309,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
{inputTokenInfo.market_data?.current_price?.usd ? (
|
||||
<div className="font-normal text-th-fgd-1">
|
||||
$
|
||||
|
|
@ -480,18 +483,18 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
</Disclosure>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-th-bkg-3 mx-4 p-4 rounded-md text-center text-th-fgd-3">
|
||||
<div className="bg-th-bkg-3 p-4 rounded-md text-center text-th-fgd-3">
|
||||
Input token information is not available right now.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{outputTokenInfo ? (
|
||||
<div className="px-4 w-full">
|
||||
<div className="w-full">
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`bg-th-bkg-2 border border-th-bkg-4 default-transition flex items-center justify-between mt-4 p-3 rounded-md w-full hover:bg-th-bkg-3 ${
|
||||
className={`border border-th-bkg-4 default-transition flex items-center justify-between mt-3 p-3 rounded-md w-full hover:bg-th-bkg-2 ${
|
||||
open
|
||||
? 'border-b-transparent rounded-b-none'
|
||||
: 'transform rotate-360'
|
||||
|
|
@ -516,7 +519,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
{outputTokenInfo.market_data?.current_price?.usd ? (
|
||||
<div className="font-normal text-th-fgd-1">
|
||||
$
|
||||
|
|
@ -690,7 +693,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
</Disclosure>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-th-bkg-3 mx-4 p-4 rounded-md text-center text-th-fgd-3">
|
||||
<div className="bg-th-bkg-3 p-4 rounded-md text-center text-th-fgd-3">
|
||||
Output token information is not available right now.
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -42,30 +42,28 @@ class ItemRenderer extends PureComponent<ItemRendererProps> {
|
|||
const tokenInfo = this.props.data.items[this.props.index]
|
||||
|
||||
return (
|
||||
<div style={this.props.style}>
|
||||
<div
|
||||
key={tokenInfo?.address}
|
||||
className="flex justify-between items-center py-4 hover:bg-th-bkg-4 cursor-pointer px-6"
|
||||
onClick={() => this.props.data.onSubmit(tokenInfo)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={tokenInfo?.logoURI}
|
||||
width="24"
|
||||
height="24"
|
||||
alt={tokenInfo?.symbol}
|
||||
/>
|
||||
<div className="ml-4">
|
||||
<div className="text-th-fgd-2">
|
||||
{tokenInfo?.symbol || 'unknown'}
|
||||
</div>
|
||||
<div className="text-th-fgd-4">
|
||||
{tokenInfo?.name || 'unknown'}
|
||||
</div>
|
||||
<button
|
||||
key={tokenInfo?.address}
|
||||
className="flex font-normal justify-between items-center py-4 hover:bg-th-bkg-4 cursor-pointer px-6 rounded-none w-full focus:outline-none focus:bg-th-bkg-3"
|
||||
onClick={() => this.props.data.onSubmit(tokenInfo)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={tokenInfo?.logoURI}
|
||||
width="24"
|
||||
height="24"
|
||||
alt={tokenInfo?.symbol}
|
||||
/>
|
||||
<div className="ml-4">
|
||||
<div className="text-left text-th-fgd-2">
|
||||
{tokenInfo?.symbol || 'unknown'}
|
||||
</div>
|
||||
<div className="text-left text-th-fgd-4">
|
||||
{tokenInfo?.name || 'unknown'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,6 +60,30 @@ export default function Swap() {
|
|||
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
|
||||
<TopBar />
|
||||
<PageBodyContainer>
|
||||
<div className="grid grid-cols-12">
|
||||
<div className="col-span-12 lg:col-span-10 lg:col-start-2 pt-8 pb-3 sm:pb-4 md:pt-10">
|
||||
<div className="flex flex-col items-start md:flex-row md:items-end md:justify-between mb-1">
|
||||
<h1
|
||||
className={`mb-1.5 md:mb-0 text-th-fgd-1 text-2xl font-semibold`}
|
||||
>
|
||||
Swap
|
||||
</h1>
|
||||
<div className="flex flex-col md:items-end">
|
||||
<p className="mb-0 text-xs">
|
||||
Swap between 100s of tokens at the best rates.
|
||||
</p>
|
||||
<a
|
||||
className="mb-0 text-th-fgd-2 text-xs"
|
||||
href="https://jup.ag/swap/USDC-MNGO"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Powered by Jupiter
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{wallet ? (
|
||||
<JupiterForm />
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Reference in New Issue