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>
); );
}; };

9
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,7 +150,6 @@ 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) =>
@ -161,11 +161,11 @@ export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
'Search by reward dispatch metric, entity scope or asset name' 'Search by reward dispatch metric, entity scope or asset name'
)} )}
data-testid="search-term" data-testid="search-term"
className="mb-4 w-20" className="mb-4 w-20 mr-2"
prependElement={<VegaIcon name={VegaIconNames.SEARCH} />} 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"> <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 {transfers
.filter((n) => applyFilter(n, filter)) .filter((n) => applyFilter(n, filter))
.map((node, i) => { .map((node, i) => {
@ -188,8 +188,7 @@ export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
) )
); );
})} })}
</div> </TinyScroll>
</div>
</Card> </Card>
); );
}; };