Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Bill He
|
4e7527b797 |
@@ -44,7 +44,6 @@
|
||||
"@dydxprotocol/v4-localization": "^1.1.5",
|
||||
"@ethersproject/providers": "^5.7.2",
|
||||
"@js-joda/core": "^5.5.3",
|
||||
"@radix-ui/react-accordion": "^1.1.2",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@radix-ui/react-collapsible": "^1.0.3",
|
||||
"@radix-ui/react-dialog": "^1.0.4",
|
||||
|
||||
Generated
+7
-35
@@ -41,9 +41,6 @@ dependencies:
|
||||
'@js-joda/core':
|
||||
specifier: ^5.5.3
|
||||
version: 5.5.3
|
||||
'@radix-ui/react-accordion':
|
||||
specifier: ^1.1.2
|
||||
version: 1.1.2(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-checkbox':
|
||||
specifier: ^1.0.4
|
||||
version: 1.0.4(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
|
||||
@@ -2323,35 +2320,6 @@ packages:
|
||||
'@babel/runtime': 7.22.10
|
||||
dev: false
|
||||
|
||||
/@radix-ui/react-accordion@1.1.2(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.10
|
||||
'@radix-ui/primitive': 1.0.1
|
||||
'@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.14)(react@18.2.0)
|
||||
'@radix-ui/react-context': 1.0.1(@types/react@18.2.14)(react@18.2.0)
|
||||
'@radix-ui/react-direction': 1.0.1(@types/react@18.2.14)(react@18.2.0)
|
||||
'@radix-ui/react-id': 1.0.1(@types/react@18.2.14)(react@18.2.0)
|
||||
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.14)(react@18.2.0)
|
||||
'@types/react': 18.2.14
|
||||
'@types/react-dom': 18.2.6
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
|
||||
peerDependencies:
|
||||
@@ -11780,6 +11748,10 @@ packages:
|
||||
engines: {node: '>=10.5.0'}
|
||||
dev: true
|
||||
|
||||
/node-fetch-native@1.4.1:
|
||||
resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==}
|
||||
dev: false
|
||||
|
||||
/node-fetch-native@1.6.1:
|
||||
resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
|
||||
dev: false
|
||||
@@ -11927,7 +11899,7 @@ packages:
|
||||
resolution: {integrity: sha512-s1ZCMmQWXy4b5K/TW9i/DtiN8Ku+xCiHcjQ6/J/nDdssirrQNOoB165Zu8EqLMA2lln1JUth9a0aW9Ap2ctrUg==}
|
||||
dependencies:
|
||||
destr: 2.0.2
|
||||
node-fetch-native: 1.6.1
|
||||
node-fetch-native: 1.4.1
|
||||
ufo: 1.3.2
|
||||
dev: false
|
||||
|
||||
@@ -13815,7 +13787,7 @@ packages:
|
||||
consola: 3.2.3
|
||||
defu: 6.1.3
|
||||
mime: 3.0.0
|
||||
node-fetch-native: 1.6.1
|
||||
node-fetch-native: 1.4.1
|
||||
pathe: 1.1.1
|
||||
dev: false
|
||||
|
||||
@@ -13938,7 +13910,7 @@ packages:
|
||||
listhen: 1.5.5
|
||||
lru-cache: 10.1.0
|
||||
mri: 1.2.0
|
||||
node-fetch-native: 1.6.1
|
||||
node-fetch-native: 1.4.1
|
||||
ofetch: 1.3.3
|
||||
ufo: 1.3.2
|
||||
transitivePeerDependencies:
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
import styled, { keyframes, type AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { Root, Item, Header, Trigger, Content } from '@radix-ui/react-accordion';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { PlusIcon } from '@/icons';
|
||||
|
||||
export type AccordionItem = {
|
||||
header: React.ReactNode;
|
||||
content: React.ReactNode;
|
||||
};
|
||||
|
||||
type AccordionProps = {
|
||||
items: AccordionItem[];
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const Accordion = ({ items, className }: AccordionProps) => (
|
||||
<Styled.Root className={className} type="single" collapsible>
|
||||
{items.map(({ header, content }, idx) => (
|
||||
<Styled.Item key={idx} value={idx.toString()}>
|
||||
<Header>
|
||||
<Styled.Trigger>
|
||||
{header}
|
||||
<Styled.Icon>
|
||||
<PlusIcon />
|
||||
</Styled.Icon>
|
||||
</Styled.Trigger>
|
||||
</Header>
|
||||
<Styled.Content>{content}</Styled.Content>
|
||||
</Styled.Item>
|
||||
))}
|
||||
</Styled.Root>
|
||||
);
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Root = styled(Root)`
|
||||
> *:not(:last-child) {
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Item = styled(Item)``;
|
||||
|
||||
Styled.Icon = styled.div`
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
|
||||
--color-border: var(--color-layer-6);
|
||||
color: var(--color-text-1);
|
||||
background-color: var(--color-layer-5);
|
||||
border: solid var(--border-width) var(--color-border);
|
||||
border-radius: 50%;
|
||||
font: var(--font-small-book);
|
||||
|
||||
svg {
|
||||
height: 1.125em;
|
||||
width: 1.125em;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Trigger = styled(Trigger)`
|
||||
${layoutMixins.spacedRow}
|
||||
width: 100%;
|
||||
padding: 1rem 0.75rem;
|
||||
|
||||
color: var(--color-text-1);
|
||||
text-align: start;
|
||||
|
||||
&:hover {
|
||||
${Styled.Icon} {
|
||||
color: var(--color-text-2);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--color-text-0);
|
||||
transition: transform 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
&[data-state='open'] svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Content = styled(Content)`
|
||||
overflow: hidden;
|
||||
margin: 0 0.75rem 1rem;
|
||||
|
||||
color: var(--color-text-0);
|
||||
|
||||
&[data-state='open'] {
|
||||
animation: ${keyframes`
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
`} 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
&[data-state='closed'] {
|
||||
animation: ${keyframes`
|
||||
from {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
`} 0.1s var(--ease-in-expo);
|
||||
}
|
||||
`;
|
||||
@@ -55,7 +55,6 @@ import {
|
||||
OverviewIcon,
|
||||
PencilIcon,
|
||||
PlayIcon,
|
||||
PlusIcon,
|
||||
PositionsIcon,
|
||||
PriceChartIcon,
|
||||
PrivacyIcon,
|
||||
@@ -131,7 +130,6 @@ export enum IconName {
|
||||
Overview = 'Overview',
|
||||
Pencil = 'Pencil',
|
||||
Play = 'Play',
|
||||
Plus = 'Plus',
|
||||
Positions = 'Positions',
|
||||
PriceChart = 'PriceChart',
|
||||
Privacy = 'Privacy',
|
||||
@@ -206,7 +204,6 @@ const icons = {
|
||||
[IconName.Overview]: OverviewIcon,
|
||||
[IconName.Pencil]: PencilIcon,
|
||||
[IconName.Play]: PlayIcon,
|
||||
[IconName.Plus]: PlusIcon,
|
||||
[IconName.Positions]: PositionsIcon,
|
||||
[IconName.PriceChart]: PriceChartIcon,
|
||||
[IconName.Privacy]: PrivacyIcon,
|
||||
|
||||
@@ -44,7 +44,6 @@ export { default as OrderbookIcon } from './orderbook.svg';
|
||||
export { default as OverviewIcon } from './overview.svg';
|
||||
export { default as PencilIcon } from './pencil.svg';
|
||||
export { default as PlayIcon } from './play.svg';
|
||||
export { default as PlusIcon } from './plus.svg';
|
||||
export { default as PortfolioIcon } from './portfolio.svg';
|
||||
export { default as PositionsIcon } from './positions.svg';
|
||||
export { default as PriceChartIcon } from './price-chart.svg';
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6.75.75c0-.198912-.07902-.389678-.21967-.53033-.14065-.1406525-.33142-.21967-.53033-.21967s-.38968.0790175-.53033.21967c-.14065.140652-.21967.331418-.21967.53033v4.5h-4.5c-.198912 0-.389678.07902-.53033.21967-.1406525.14065-.21967.33142-.21967.53033s.0790175.38968.21967.53033c.140652.14065.331418.21967.53033.21967h4.5v4.5c0 .1989.07902.3897.21967.5303.14065.1407.33142.2197.53033.2197s.38968-.079.53033-.2197c.14065-.1406.21967-.3314.21967-.5303v-4.5h4.5c.1989 0 .3897-.07902.5303-.21967.1407-.14065.2197-.33142.2197-.53033s-.079-.38968-.2197-.53033c-.1406-.14065-.3314-.21967-.5303-.21967h-4.5z" fill="currentColor"/></svg>
|
||||
|
Before Width: | Height: | Size: 731 B |
@@ -1,80 +0,0 @@
|
||||
import styled, { AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { useStringGetter } from '@/hooks';
|
||||
|
||||
import { Accordion } from '@/components/Accordion';
|
||||
import { Link } from '@/components/Link';
|
||||
import { Panel } from '@/components/Panel';
|
||||
|
||||
const REWARDS_LEARN_MORE_LINK = ''; // to be configured
|
||||
|
||||
export const RewardsHelpPanel = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
|
||||
return (
|
||||
<Styled.HelpCard
|
||||
slotHeader={
|
||||
<Styled.Header>
|
||||
<h3>{stringGetter({ key: STRING_KEYS.HELP })}</h3>
|
||||
{REWARDS_LEARN_MORE_LINK && (
|
||||
<Link withIcon href={REWARDS_LEARN_MORE_LINK}>
|
||||
{stringGetter({ key: STRING_KEYS.LEARN_MORE })}
|
||||
</Link>
|
||||
)}
|
||||
</Styled.Header>
|
||||
}
|
||||
>
|
||||
<Accordion
|
||||
items={[
|
||||
{
|
||||
header: 'Who is eligible for trading rewards?',
|
||||
content: 'All traders are eligible for trading rewards.',
|
||||
},
|
||||
{
|
||||
header: 'How do trading rewards work?',
|
||||
content:
|
||||
'Immediately after each fill, trading rewards are sent directly to the trader’s dYdX Chain address, based on the amount of fees paid by the trader.',
|
||||
},
|
||||
{
|
||||
header: 'How do I claim my rewards?',
|
||||
content:
|
||||
'Each block, trading rewards are automatically sent directly to the trader’s dYdX Chain address.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Styled.HelpCard>
|
||||
);
|
||||
};
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.HelpCard = styled(Panel)`
|
||||
--panel-content-paddingY: 0;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
|
||||
text-align: start;
|
||||
`;
|
||||
|
||||
Styled.Header = styled.div`
|
||||
${layoutMixins.spacedRow}
|
||||
gap: 1ch;
|
||||
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
|
||||
font: var(--font-small-book);
|
||||
|
||||
h3 {
|
||||
font: var(--font-medium-book);
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Link = styled(Link)`
|
||||
display: inline-flex;
|
||||
`;
|
||||
Reference in New Issue
Block a user