9941c9bfaa
* fix: deposits tests, also convert to basic cypress * add new home tests which test redirect to trading page and markets page * chore: replace portfolio page feature with raw cypress * chore: replace market page feature with raw cypress tests * chore: replace home page tests with global.ts for wallet connections * chore: add raw cypress withdrawals tests with mocks * fix: complete withdrawals prompt and add assertion for it * chore: remove unnecessary cypress envs now that we are mocking assets * chore: ignore lint errors temporarily * chore: add mock for deposit page query, add wait for mocked queries to resolve * fix: order of waiting for withdraw page query * fix: validate vega wallet connection * chore: remove rest of page objects and convert trading page feature to regular cypress * fix: assertion on transaction dialog after withdrawal * chore: split withdraw and withdrawals pages into separate files * chore: split trading tests into own files, connect wallet once for deal ticket * feat: convert home page tests to raw cypress
73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import * as Tabs from '@radix-ui/react-tabs';
|
|
import classNames from 'classnames';
|
|
import type { ReactElement, ReactNode } from 'react';
|
|
import { Children, isValidElement, useState } from 'react';
|
|
|
|
interface GridTabsProps {
|
|
children: ReactElement<GridTabProps>[];
|
|
}
|
|
|
|
export const GridTabs = ({ children }: GridTabsProps) => {
|
|
const [activeTab, setActiveTab] = useState<string>(() => {
|
|
return children[0].props.id;
|
|
});
|
|
|
|
return (
|
|
<Tabs.Root
|
|
value={activeTab}
|
|
className="h-full grid grid-rows-[min-content_1fr]"
|
|
onValueChange={(value) => setActiveTab(value)}
|
|
>
|
|
<Tabs.List
|
|
className="flex flex-nowrap gap-4 overflow-x-auto"
|
|
role="tablist"
|
|
>
|
|
{Children.map(children, (child) => {
|
|
if (!isValidElement(child)) return null;
|
|
const isActive = child.props.id === activeTab;
|
|
const triggerClass = classNames('py-4', 'px-12', 'capitalize', {
|
|
'text-black dark:text-vega-yellow': isActive,
|
|
'bg-white dark:bg-black': isActive,
|
|
'text-black dark:text-white': !isActive,
|
|
'bg-black-10 dark:bg-white-25': !isActive,
|
|
});
|
|
return (
|
|
<Tabs.Trigger
|
|
data-testid={child.props.name}
|
|
value={child.props.id}
|
|
className={triggerClass}
|
|
>
|
|
{child.props.name}
|
|
</Tabs.Trigger>
|
|
);
|
|
})}
|
|
<div className="bg-black-10 dark:bg-white-25 grow"></div>
|
|
</Tabs.List>
|
|
<div className="h-full overflow-auto">
|
|
{Children.map(children, (child) => {
|
|
if (!isValidElement(child)) return null;
|
|
return (
|
|
<Tabs.Content
|
|
value={child.props.id}
|
|
className="h-full"
|
|
data-testid={`tab-${child.props.id}`}
|
|
>
|
|
{child.props.children}
|
|
</Tabs.Content>
|
|
);
|
|
})}
|
|
</div>
|
|
</Tabs.Root>
|
|
);
|
|
};
|
|
|
|
interface GridTabProps {
|
|
children: ReactNode;
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
export const GridTab = ({ id, children }: GridTabProps) => {
|
|
return <div>{children}</div>;
|
|
};
|