LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix(trading): tiny scroll for rewards (#5586)

Browse Source
This commit is contained in:
m.ray 2024-01-10 17:49:58 +02:00 committed by GitHub
parent c003e5fa30
commit d05cd6a2ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/trading/client-pages/rewards/rewards.tsx
View File

@ -4,6 +4,7 @@ import { useT } from '../../lib/use-t';
import { RewardsContainer } from '../../components/rewards-container'; import { RewardsContainer } from '../../components/rewards-container';
import { usePageTitleStore } from '../../stores'; import { usePageTitleStore } from '../../stores';
import { ErrorBoundary } from '../../components/error-boundary'; import { ErrorBoundary } from '../../components/error-boundary';
import { TinyScroll } from '@vegaprotocol/ui-toolkit';
export const Rewards = () => { export const Rewards = () => {
const t = useT(); const t = useT();
@ -16,10 +17,10 @@ export const Rewards = () => {
}, [updateTitle, title]); }, [updateTitle, title]);
return ( return (
<ErrorBoundary feature="rewards"> <ErrorBoundary feature="rewards">
<div className="container mx-auto p-4"> <TinyScroll className="p-4 max-h-full overflow-auto">
<h1 className="px-4 pb-4 text-2xl">{title}</h1> <h1 className="px-4 pb-4 text-2xl">{title}</h1>
<RewardsContainer /> <RewardsContainer />
</div> </TinyScroll>
</ErrorBoundary> </ErrorBoundary>
); );
}; };

77
apps/trading/components/rewards-container/active-rewards.tsx
View File

@ -14,6 +14,7 @@ import {
VegaIconNames, VegaIconNames,
type VegaIconSize, type VegaIconSize,
TradingInput, TradingInput,
TinyScroll,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { IconNames } from '@blueprintjs/icons'; import { IconNames } from '@blueprintjs/icons';
import { import {
@ -149,47 +150,45 @@ export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
return ( return (
<Card title={t('Active rewards')} className="lg:col-span-full"> <Card title={t('Active rewards')} className="lg:col-span-full">
<div className=""> {transfers.length > 1 && (
{transfers.length > 1 && ( <TradingInput
<TradingInput onChange={(e) =>
onChange={(e) => setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
setFilter((curr) => ({ ...curr, searchTerm: e.target.value })) }
value={filter.searchTerm}
type="text"
placeholder={t(
'Search by reward dispatch metric, entity scope or asset name'
)}
data-testid="search-term"
className="mb-4 w-20 mr-2"
prependElement={<VegaIcon name={VegaIconNames.SEARCH} />}
/>
)}
<TinyScroll className="grid gap-x-8 gap-y-10 h-fit grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] md:grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] lg:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] xl:grid-cols-[repeat(auto-fill,_minmax(335px,_1fr))] max-h-[40rem] overflow-auto pr-2">
{transfers
.filter((n) => applyFilter(n, filter))
.map((node, i) => {
const { transfer } = node;
if (
transfer.kind.__typename !== 'RecurringTransfer' ||
!transfer.kind.dispatchStrategy?.dispatchMetric
) {
return null;
} }
value={filter.searchTerm}
type="text"
placeholder={t(
'Search by reward dispatch metric, entity scope or asset name'
)}
data-testid="search-term"
className="mb-4 w-20"
prependElement={<VegaIcon name={VegaIconNames.SEARCH} />}
/>
)}
<div className="grid gap-x-8 gap-y-10 h-fit grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] md:grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] lg:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] xl:grid-cols-[repeat(auto-fill,_minmax(343px,_1fr))] max-h-[40rem] overflow-auto">
{transfers
.filter((n) => applyFilter(n, filter))
.map((node, i) => {
const { transfer } = node;
if (
transfer.kind.__typename !== 'RecurringTransfer' ||
!transfer.kind.dispatchStrategy?.dispatchMetric
) {
return null;
}
return ( return (
node && ( node && (
<ActiveRewardCard <ActiveRewardCard
key={i} key={i}
transferNode={node} transferNode={node}
kind={transfer.kind} kind={transfer.kind}
currentEpoch={currentEpoch} currentEpoch={currentEpoch}
/> />
) )
); );
})} })}
</div> </TinyScroll>
</div>
</Card> </Card>
); );
}; };