Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 John Huang
|
cd5c4a473a | ||
 Bill
|
9815437a80 | ||
 aleka
|
890a4b2c0e | ||
|
Bill
|
8d3cc76d14 |
+2
-2
@@ -6,5 +6,5 @@ VITE_PK_ENCRYPTION_KEY=
|
||||
|
||||
VITE_WALLETCONNECT2_PROJECT_ID=
|
||||
|
||||
VITE_V3_TOKEN_ADDRESS=
|
||||
VITE_TOKEN_MIGRATION_URI=
|
||||
VITE_V3_TOKEN_ADDRESS=0x6d5bb505a4f85c10b122ccc36e30f57e2b86a291
|
||||
VITE_TOKEN_MIGRATION_URI=https://bridge.dydx.trade/
|
||||
+151
-16
@@ -71,7 +71,19 @@
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
"privacy": "https://dydx.exchange/privacy",
|
||||
"mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
|
||||
"blogs": "https://www.dydx.foundation/blog"
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"help": "https://help.dydx.exchange/",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"documentation": "https://docs.dydx.exchange/",
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -130,7 +142,19 @@
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
"privacy": "https://dydx.exchange/privacy",
|
||||
"mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
|
||||
"blogs": "https://www.dydx.foundation/blog"
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"help": "https://help.dydx.exchange/",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"documentation": "https://docs.dydx.exchange/",
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -189,7 +213,19 @@
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
"privacy": "https://dydx.exchange/privacy",
|
||||
"mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
|
||||
"blogs": "https://www.dydx.foundation/blog"
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"help": "https://help.dydx.exchange/",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"documentation": "https://docs.dydx.exchange/",
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -248,7 +284,19 @@
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
"privacy": "https://dydx.exchange/privacy",
|
||||
"mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
|
||||
"blogs": "https://www.dydx.foundation/blog"
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"help": "https://help.dydx.exchange/",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"documentation": "https://docs.dydx.exchange/",
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -312,7 +360,16 @@
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"help": "https://help.dydx.exchange"
|
||||
"help": "https://help.dydx.exchange",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -376,7 +433,16 @@
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"help": "https://help.dydx.exchange"
|
||||
"help": "https://help.dydx.exchange",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -443,7 +509,17 @@
|
||||
"documentation": "https://docs.dydx.exchange/",
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
|
||||
"blogs": "https://www.dydx.foundation/blog"
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"help": "https://help.dydx.exchange/",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -507,7 +583,17 @@
|
||||
"documentation": "https://docs.dydx.exchange/",
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
|
||||
"blogs": "https://www.dydx.foundation/blog"
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"help": "https://help.dydx.exchange/",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -571,7 +657,17 @@
|
||||
"documentation": "https://docs.dydx.exchange/",
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
|
||||
"blogs": "https://www.dydx.foundation/blog"
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"help": "https://help.dydx.exchange/",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -635,7 +731,17 @@
|
||||
"documentation": "https://docs.dydx.exchange/",
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
|
||||
"blogs": "https://www.dydx.foundation/blog"
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"help": "https://help.dydx.exchange/",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -699,7 +805,17 @@
|
||||
"documentation": "https://docs.dydx.exchange/",
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
|
||||
"blogs": "https://www.dydx.foundation/blog"
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"help": "https://help.dydx.exchange/",
|
||||
"initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -824,10 +940,20 @@
|
||||
"privacy": "https://dydx.exchange/privacy",
|
||||
"statusPage": "https://status.v4testnet.dydx.exchange/",
|
||||
"mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
|
||||
"documentation": "https://v4-teacher.vercel.app/",
|
||||
"documentation": "https://docs.dydx.exchange/",
|
||||
"community": "https://discord.com/invite/dydx",
|
||||
"feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
|
||||
"blogs": "https://www.dydx.foundation/blog"
|
||||
"blogs": "https://www.dydx.foundation/blog",
|
||||
"foundation": "https://www.dydx.foundation",
|
||||
"help": "https://help.dydx.exchange/",
|
||||
"initialMarginFractionLearnmore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
|
||||
"reduceOnlyLearnmore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
|
||||
"governanceLearnmore": "https://help.dydx.exchange",
|
||||
"stakingLearnmore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnmore": "https://help.dydx.exchange",
|
||||
"walletLearnmore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
@@ -888,11 +1014,20 @@
|
||||
"tos": "[HTTP link to TOS]",
|
||||
"privacy": "[HTTP link to Privacy Policy]",
|
||||
"mintscan": "[HTTP link to Mintscan, with {tx_hash} placeholder]",
|
||||
"documentation": "[HTTP link to documentation, can be null]",
|
||||
"community": "[HTTP link to community, can be null]",
|
||||
"mintscanBase": "[HTTP link to TOS mintsacn base url]",
|
||||
"feedback": "[HTTP link to feedback form, can be null]",
|
||||
"blogs": "[HTTP link to blogs, can be null]",
|
||||
"help": "[HTTP link to help page, can be null]"
|
||||
"foundation": "[HTTP link to foundation, can be null]",
|
||||
"initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, can be null]",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"documentation": "[HTTP link to documentation, can be null]",
|
||||
"community": "[HTTP link to community, can be null]",
|
||||
"help": "[HTTP link to help page, can be null]",
|
||||
"governanceLearnMore": "[HTTP link to governance learn more, can be null]",
|
||||
"stakingLearnMore": "[HTTP link to staking learn more, can be null]",
|
||||
"keplrDashboard": "[HTTP link to keplr dashboard, can be null]",
|
||||
"accountExportLearnMore": "[HTTP link to account export learn more, can be null]",
|
||||
"walletLearnMore": "[HTTP link to wallet learn more, can be null]"
|
||||
},
|
||||
"wallets": {
|
||||
"walletconnect": {
|
||||
|
||||
@@ -225,6 +225,7 @@ Styled.CollapsibleContent = styled(CollapsibleContent)`
|
||||
`;
|
||||
|
||||
Styled.IconButton = styled(IconButton)`
|
||||
--button-icon-size: 1em;
|
||||
${Styled.CollapsibleRoot}[data-state='closed'] & {
|
||||
rotate: -0.5turn;
|
||||
}
|
||||
|
||||
@@ -34,6 +34,7 @@ type PickDialogProps = Pick<
|
||||
| 'slotHeaderInner'
|
||||
| 'slotTrigger'
|
||||
| 'slotFooter'
|
||||
| 'preventClose'
|
||||
>;
|
||||
|
||||
export const ComboboxDialogMenu = <
|
||||
@@ -57,6 +58,7 @@ export const ComboboxDialogMenu = <
|
||||
children,
|
||||
|
||||
placement = DialogPlacement.Default,
|
||||
preventClose,
|
||||
className,
|
||||
}: ElementProps<MenuItemValue, MenuGroupValue> &
|
||||
PickComboxMenuProps<MenuItemValue, MenuGroupValue> &
|
||||
@@ -72,6 +74,7 @@ export const ComboboxDialogMenu = <
|
||||
slotTrigger={slotTrigger}
|
||||
slotFooter={slotFooter}
|
||||
placement={placement}
|
||||
preventClose={preventClose}
|
||||
className={className}
|
||||
>
|
||||
<Styled.ComboboxMenu
|
||||
|
||||
@@ -33,9 +33,11 @@ export const DropdownHeaderMenu = <MenuItemValue extends string>({
|
||||
|
||||
return (
|
||||
<Root>
|
||||
<Styled.Trigger className={className}>
|
||||
<Styled.Trigger className={className} asChild>
|
||||
<div>
|
||||
{children}
|
||||
<Styled.DropdownIconButton iconName={IconName.Caret} isToggle />
|
||||
</div>
|
||||
</Styled.Trigger>
|
||||
<Portal>
|
||||
<Styled.Content
|
||||
|
||||
@@ -24,9 +24,10 @@ import {
|
||||
CommentIcon,
|
||||
CopyIcon,
|
||||
CubeIcon,
|
||||
DepositIcon,
|
||||
DepthChartIcon,
|
||||
DiscordIcon,
|
||||
EtherscanIcon,
|
||||
DepthChartIcon,
|
||||
ExportKeysIcon,
|
||||
FeedbackIcon,
|
||||
FileIcon,
|
||||
@@ -69,6 +70,7 @@ import {
|
||||
WarningIcon,
|
||||
WebsiteIcon,
|
||||
WhitepaperIcon,
|
||||
WithdrawIcon,
|
||||
} from '@/icons';
|
||||
|
||||
export enum IconName {
|
||||
@@ -93,6 +95,7 @@ export enum IconName {
|
||||
Comment = 'Comment',
|
||||
Copy = 'Copy',
|
||||
Cube = 'Cube',
|
||||
Deposit = 'Deposit',
|
||||
DepthChart = 'DepthChart',
|
||||
Discord = 'Discord',
|
||||
Etherscan = 'Etherscan',
|
||||
@@ -139,6 +142,7 @@ export enum IconName {
|
||||
Warning = 'Warning',
|
||||
Website = 'Website',
|
||||
Whitepaper = 'Whitepaper',
|
||||
Withdraw = 'Withdraw',
|
||||
}
|
||||
|
||||
const icons = {
|
||||
@@ -163,6 +167,7 @@ const icons = {
|
||||
[IconName.Comment]: CommentIcon,
|
||||
[IconName.Copy]: CopyIcon,
|
||||
[IconName.Cube]: CubeIcon,
|
||||
[IconName.Deposit]: DepositIcon,
|
||||
[IconName.DepthChart]: DepthChartIcon,
|
||||
[IconName.Discord]: DiscordIcon,
|
||||
[IconName.Etherscan]: EtherscanIcon,
|
||||
@@ -208,6 +213,7 @@ const icons = {
|
||||
[IconName.Warning]: WarningIcon,
|
||||
[IconName.Website]: WebsiteIcon,
|
||||
[IconName.Whitepaper]: WhitepaperIcon,
|
||||
[IconName.Withdraw]: WithdrawIcon,
|
||||
} as Record<IconName, ElementType>;
|
||||
|
||||
type ElementProps = {
|
||||
|
||||
@@ -67,6 +67,7 @@ const Styled: Record<string, AnyStyledComponent> = {};
|
||||
const buttonMixin = css`
|
||||
// Params
|
||||
--button-icon-size: 1.125em;
|
||||
--button-padding: 0;
|
||||
|
||||
// Rules
|
||||
> * {
|
||||
|
||||
@@ -71,7 +71,7 @@ const NavItem = forwardRef(
|
||||
)}
|
||||
</span>
|
||||
{slotAfter}
|
||||
{subitems?.length && <Styled.Icon iconName={IconName.Caret} />}
|
||||
{subitems?.length && <Styled.Icon iconName={IconName.Triangle} />}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -525,7 +525,7 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
|
||||
`;
|
||||
|
||||
Styled.Icon = styled(Icon)`
|
||||
height: 0.75em;
|
||||
font-size: 0.375em;
|
||||
transition: rotate 0.3s var(--ease-out-expo);
|
||||
|
||||
${Styled.List}[data-orientation="menu"] & {
|
||||
|
||||
@@ -31,7 +31,7 @@ export const Panel = ({
|
||||
hasSeparator,
|
||||
className,
|
||||
}: PanelProps & PanelStyleProps) => (
|
||||
<Styled.Panel onClick={onClick}>
|
||||
<Styled.Panel onClick={onClick} className={className}>
|
||||
<Styled.Left>
|
||||
{href ? (
|
||||
<Link to={href}>
|
||||
@@ -53,7 +53,7 @@ export const Panel = ({
|
||||
</Styled.Header>
|
||||
)
|
||||
)}
|
||||
<Styled.Content className={className}>{children}</Styled.Content>
|
||||
<Styled.Content>{children}</Styled.Content>
|
||||
</Styled.Left>
|
||||
{slotRight}
|
||||
</Styled.Panel>
|
||||
@@ -61,11 +61,29 @@ export const Panel = ({
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Panel = styled.section`
|
||||
Styled.Panel = styled.section<{ onClick?: () => void }>`
|
||||
--panel-paddingY: 1rem;
|
||||
--panel-paddingX: 1rem;
|
||||
--panel-content-paddingY: var(--panel-paddingY);
|
||||
--panel-content-paddingX: var(--panel-paddingX);
|
||||
|
||||
${layoutMixins.row}
|
||||
|
||||
background-color: var(--color-layer-3);
|
||||
border-radius: 0.875rem;
|
||||
|
||||
${({ onClick }) =>
|
||||
onClick &&
|
||||
css`
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
button:not(:disabled) {
|
||||
color: var(--button-hover-textColor);
|
||||
filter: var(--button-hover-filter);
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
Styled.Left = styled.div`
|
||||
@@ -75,7 +93,7 @@ Styled.Left = styled.div`
|
||||
|
||||
Styled.Header = styled.header<{ hasSeparator?: boolean }>`
|
||||
${layoutMixins.spacedRow}
|
||||
padding: 1rem 1rem;
|
||||
padding: var(--panel-paddingY) var(--panel-paddingX);
|
||||
|
||||
${({ hasSeparator }) =>
|
||||
hasSeparator &&
|
||||
@@ -94,5 +112,5 @@ Styled.Content = styled.div`
|
||||
${layoutMixins.scrollArea}
|
||||
${layoutMixins.stickyArea0}
|
||||
--stickyArea0-background: transparent;
|
||||
padding: 1rem 1rem;
|
||||
padding: var(--panel-content-paddingY) var(--panel-content-paddingX);
|
||||
`;
|
||||
|
||||
@@ -7,13 +7,15 @@ import { ButtonShape, ButtonSize } from '@/constants/buttons';
|
||||
import { useBreakpoints } from '@/hooks';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { type BaseButtonProps } from '@/components/BaseButton';
|
||||
import { type BaseButtonProps } from '@/components/BaseButton';
|
||||
import { ToggleButton } from '@/components/ToggleButton';
|
||||
|
||||
type ElementProps<MenuItemValue extends string> = {
|
||||
items: MenuItem<MenuItemValue>[];
|
||||
value: MenuItemValue;
|
||||
onValueChange: (value: MenuItemValue) => void;
|
||||
onValueChange: (value: any) => void;
|
||||
onInteraction?: () => void;
|
||||
ensureSelected?: boolean;
|
||||
};
|
||||
|
||||
type StyleProps = {
|
||||
@@ -25,10 +27,14 @@ export const ToggleGroup = forwardRef(
|
||||
{
|
||||
items,
|
||||
value,
|
||||
ensureSelected = true,
|
||||
onValueChange,
|
||||
onInteraction,
|
||||
|
||||
className,
|
||||
size,
|
||||
shape = ButtonShape.Pill,
|
||||
|
||||
...buttonProps
|
||||
}: ElementProps<MenuItemValue> & StyleProps & BaseButtonProps,
|
||||
ref: Ref<HTMLDivElement>
|
||||
@@ -40,12 +46,17 @@ export const ToggleGroup = forwardRef(
|
||||
ref={ref}
|
||||
type="single"
|
||||
value={value}
|
||||
onValueChange={onValueChange}
|
||||
onValueChange={(newValue: MenuItemValue) => {
|
||||
if ((ensureSelected && newValue) || !ensureSelected) {
|
||||
onValueChange(newValue);
|
||||
}
|
||||
onInteraction?.();
|
||||
}}
|
||||
className={className}
|
||||
loop
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Item key={item.value} value={item.value} aria-label={item.label} asChild>
|
||||
<Item key={item.value} value={item.value} asChild>
|
||||
<ToggleButton
|
||||
size={size ? size : isTablet ? ButtonSize.Small : ButtonSize.XSmall}
|
||||
shape={shape}
|
||||
|
||||
@@ -2,11 +2,13 @@ import type { ReactNode } from 'react';
|
||||
import styled, { AnyStyledComponent } from 'styled-components';
|
||||
import { Content, Portal, Provider, Root, Trigger, Arrow } from '@radix-ui/react-tooltip';
|
||||
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { tooltipStrings } from '@/constants/tooltips';
|
||||
|
||||
import { useStringGetter } from '@/hooks';
|
||||
import { useStringGetter, useURLConfigs } from '@/hooks';
|
||||
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
import { Link } from '@/components/Link';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { popoverMixins } from '@/styles/popoverMixins';
|
||||
@@ -38,20 +40,24 @@ export const WithTooltip = ({
|
||||
slotTooltip,
|
||||
}: ElementProps & StyleProps) => {
|
||||
const stringGetter = useStringGetter();
|
||||
const urlConfigs = useURLConfigs();
|
||||
|
||||
const getTooltipStrings = tooltip && tooltipStrings[tooltip];
|
||||
if (!getTooltipStrings && !tooltipString && !slotTooltip) return <>{children}</>;
|
||||
|
||||
let tooltipTitle;
|
||||
let tooltipBody;
|
||||
let tooltipLearnMore;
|
||||
|
||||
if (getTooltipStrings) {
|
||||
const { title, body } = getTooltipStrings({
|
||||
const { title, body, learnMoreLink } = getTooltipStrings({
|
||||
stringGetter,
|
||||
stringParams,
|
||||
urlConfigs,
|
||||
});
|
||||
tooltipTitle = title;
|
||||
tooltipBody = body;
|
||||
tooltipLearnMore = learnMoreLink;
|
||||
} else {
|
||||
tooltipBody = tooltipString;
|
||||
}
|
||||
@@ -72,6 +78,13 @@ export const WithTooltip = ({
|
||||
<dl>
|
||||
{tooltipTitle && <dt>{tooltipTitle}</dt>}
|
||||
{tooltipBody && <dd>{tooltipBody}</dd>}
|
||||
{tooltipLearnMore && (
|
||||
<dd>
|
||||
<Styled.LearnMore href={tooltipLearnMore}>
|
||||
{stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
|
||||
</Styled.LearnMore>
|
||||
</dd>
|
||||
)}
|
||||
<Styled.Arrow />
|
||||
</dl>
|
||||
)}
|
||||
@@ -142,3 +155,7 @@ Styled.Arrow = styled(Arrow)`
|
||||
Styled.Icon = styled(Icon)`
|
||||
color: var(--color-text-0);
|
||||
`;
|
||||
|
||||
Styled.LearnMore = styled(Link)`
|
||||
--link-color: var(--color-accent);
|
||||
`;
|
||||
|
||||
@@ -8,6 +8,8 @@ import {
|
||||
WARNINGS_STRING_KEYS,
|
||||
} from '@dydxprotocol/v4-localization';
|
||||
|
||||
import { type LinksConfigs } from '@/hooks/useURLConfigs';
|
||||
|
||||
export { TOOLTIP_STRING_KEYS } from '@dydxprotocol/v4-localization';
|
||||
|
||||
export enum SupportedLocales {
|
||||
@@ -79,9 +81,11 @@ export type TooltipStrings = {
|
||||
[key: string]: ({
|
||||
stringGetter,
|
||||
stringParams,
|
||||
urlConfigs,
|
||||
}: {
|
||||
stringGetter: StringGetterFunction;
|
||||
stringParams?: any;
|
||||
urlConfigs?: LinksConfigs;
|
||||
}) => {
|
||||
title: string;
|
||||
body: string;
|
||||
|
||||
@@ -37,7 +37,3 @@ export const HISTORY_ROUTE = `${AppRoute.Portfolio}/${PortfolioRoute.History}/:s
|
||||
export const DEFAULT_TRADE_ROUTE = `${AppRoute.Trade}/${DEFAULT_MARKETID}`;
|
||||
export const SETTINGS_ROUTE = `${AppRoute.Settings}/*`;
|
||||
export const DEFAULT_DOCUMENT_TITLE = 'dYdX';
|
||||
|
||||
export enum ExternalLink {
|
||||
Foundation = 'https://dydx.foundation',
|
||||
}
|
||||
|
||||
@@ -57,10 +57,10 @@ export const tradeTooltips: TooltipStrings = {
|
||||
title: stringGetter({ key: TOOLTIP_STRING_KEYS.INDEX_PRICE_TITLE }),
|
||||
body: stringGetter({ key: TOOLTIP_STRING_KEYS.INDEX_PRICE_BODY }),
|
||||
}),
|
||||
'initial-margin-fraction': ({ stringGetter }) => ({
|
||||
'initial-margin-fraction': ({ stringGetter, urlConfigs }) => ({
|
||||
title: stringGetter({ key: TOOLTIP_STRING_KEYS.INITIAL_MARGIN_FRACTION_TITLE }),
|
||||
body: stringGetter({ key: TOOLTIP_STRING_KEYS.INITIAL_MARGIN_FRACTION_BODY }),
|
||||
learnMoreLink: 'https://help.dydx.exchange/articles/5232637-maximum-position-sizes',
|
||||
learnMoreLink: urlConfigs?.initialMarginFractionLearnMore,
|
||||
}),
|
||||
'initial-stop': ({ stringGetter }) => ({
|
||||
title: stringGetter({ key: TOOLTIP_STRING_KEYS.INITIAL_STOP_TITLE }),
|
||||
@@ -146,10 +146,10 @@ export const tradeTooltips: TooltipStrings = {
|
||||
title: stringGetter({ key: TOOLTIP_STRING_KEYS.REALIZED_PNL_TITLE }),
|
||||
body: stringGetter({ key: TOOLTIP_STRING_KEYS.REALIZED_PNL_BODY }),
|
||||
}),
|
||||
'reduce-only': ({ stringGetter }) => ({
|
||||
'reduce-only': ({ stringGetter, urlConfigs }) => ({
|
||||
title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TITLE }),
|
||||
body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_BODY }),
|
||||
learnMoreLink: 'https://help.dydx.exchange/articles/6345793-reduce-only-orders',
|
||||
learnMoreLink: urlConfigs?.reduceOnlyLearnMore,
|
||||
}),
|
||||
spread: () => ({
|
||||
title: 'Spread',
|
||||
|
||||
@@ -22,6 +22,7 @@ import { useShouldShowFooter } from './useShouldShowFooter';
|
||||
import { useSelectedNetwork } from './useSelectedNetwork';
|
||||
import { useStringGetter } from './useStringGetter';
|
||||
import { useSubaccount } from './useSubaccount';
|
||||
import { useURLConfigs } from './useURLConfigs';
|
||||
|
||||
export {
|
||||
useApiState,
|
||||
@@ -48,4 +49,5 @@ export {
|
||||
useSelectedNetwork,
|
||||
useStringGetter,
|
||||
useSubaccount,
|
||||
useURLConfigs,
|
||||
};
|
||||
|
||||
@@ -6,8 +6,10 @@ import { MarketFilters, MARKET_FILTER_LABELS, type MarketData } from '@/constant
|
||||
import { getAssets } from '@/state/assetsSelectors';
|
||||
import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
|
||||
|
||||
import { isTruthy } from '@/lib/isTruthy';
|
||||
|
||||
const filterFunctions = {
|
||||
[MarketFilters.ALL]: (market: MarketData) => true,
|
||||
[MarketFilters.ALL]: () => true,
|
||||
[MarketFilters.LAYER_1]: (market: MarketData) => {
|
||||
return market.asset.tags?.toArray().includes('Layer 1');
|
||||
},
|
||||
@@ -28,13 +30,15 @@ export const useMarketsData = (
|
||||
const allAssets = useSelector(getAssets, shallowEqual) || {};
|
||||
|
||||
const markets = useMemo(() => {
|
||||
return Object.values(allPerpetualMarkets).map((marketData) => ({
|
||||
asset: allAssets[marketData.assetId],
|
||||
tickSizeDecimals: marketData.configs?.tickSizeDecimals,
|
||||
...marketData,
|
||||
...marketData.perpetual,
|
||||
...marketData.configs,
|
||||
})) as MarketData[];
|
||||
return Object.values(allPerpetualMarkets)
|
||||
.filter(isTruthy)
|
||||
.map((marketData) => ({
|
||||
asset: allAssets[marketData.assetId],
|
||||
tickSizeDecimals: marketData.configs?.tickSizeDecimals,
|
||||
...marketData,
|
||||
...marketData.perpetual,
|
||||
...marketData.configs,
|
||||
})) as MarketData[];
|
||||
}, [allPerpetualMarkets, allAssets]);
|
||||
|
||||
const filteredMarkets = useMemo(() => {
|
||||
|
||||
@@ -313,11 +313,6 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
|
||||
placeOrderParams = abacusStateManager.placeOrder(callback);
|
||||
}
|
||||
|
||||
track(AnalyticsEvent.TradePlaceOrder, {
|
||||
...placeOrderParams,
|
||||
isClosePosition,
|
||||
} as HumanReadablePlaceOrderPayload & { isClosePosition: boolean });
|
||||
|
||||
return placeOrderParams;
|
||||
},
|
||||
[subaccountClient]
|
||||
@@ -346,7 +341,6 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
|
||||
}) => {
|
||||
const callback = (success: boolean, parsingError?: Nullable<ParsingError>) => {
|
||||
if (success) {
|
||||
track(AnalyticsEvent.TradeCancelOrder);
|
||||
onSuccess?.();
|
||||
} else {
|
||||
onError?.({ errorStringKey: parsingError?.stringKey });
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
|
||||
|
||||
import { useSelectedNetwork } from '@/hooks';
|
||||
|
||||
const FALLBACK_URL = 'https://help.dydx.exchange/';
|
||||
|
||||
export interface LinksConfigs {
|
||||
tos: string,
|
||||
privacy: string,
|
||||
mintscan: string,
|
||||
mintscanBase: string,
|
||||
feedback?: string,
|
||||
help?: string,
|
||||
blogs?: string,
|
||||
foundation?: string,
|
||||
initialMarginFractionLearnMore?: string,
|
||||
reduceOnlyLearnMore?: string,
|
||||
documentation?: string,
|
||||
community?: string,
|
||||
governanceLearnMore?: string,
|
||||
stakingLearnMore?: string,
|
||||
keplrDashboard?: string,
|
||||
accountExportLearnMore?: string,
|
||||
walletLearnMore?: string
|
||||
}
|
||||
|
||||
export const useURLConfigs = (): LinksConfigs => {
|
||||
const { selectedNetwork } = useSelectedNetwork();
|
||||
const linksConfigs = ENVIRONMENT_CONFIG_MAP[selectedNetwork].links as LinksConfigs;
|
||||
|
||||
return {
|
||||
tos: linksConfigs.tos,
|
||||
privacy: linksConfigs.privacy,
|
||||
mintscan: linksConfigs.mintscan,
|
||||
mintscanBase: linksConfigs.mintscanBase,
|
||||
feedback: linksConfigs.feedback || FALLBACK_URL,
|
||||
help: linksConfigs.help || FALLBACK_URL,
|
||||
blogs: linksConfigs.blogs || FALLBACK_URL,
|
||||
foundation: linksConfigs.foundation || FALLBACK_URL,
|
||||
initialMarginFractionLearnMore: linksConfigs.initialMarginFractionLearnMore || FALLBACK_URL,
|
||||
reduceOnlyLearnMore: linksConfigs.reduceOnlyLearnMore || FALLBACK_URL,
|
||||
documentation: linksConfigs.documentation || FALLBACK_URL,
|
||||
community: linksConfigs.community || FALLBACK_URL,
|
||||
governanceLearnMore: linksConfigs.governanceLearnMore || FALLBACK_URL,
|
||||
stakingLearnMore: linksConfigs.stakingLearnMore || FALLBACK_URL,
|
||||
keplrDashboard: linksConfigs.keplrDashboard || FALLBACK_URL,
|
||||
accountExportLearnMore: linksConfigs.accountExportLearnMore || FALLBACK_URL,
|
||||
walletLearnMore: linksConfigs.walletLearnMore || FALLBACK_URL,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<g clip-path="url(#clip0_18204_36775)">
|
||||
<path d="M13.2426 6.25736C14.0817 7.09647 14.6531 8.16557 14.8846 9.32946C15.1162 10.4933 14.9973 11.6997 14.5432 12.7961C14.0891 13.8925 13.32 14.8295 12.3334 15.4888C11.3467 16.1481 10.1866 16.5 8.99993 16.5C7.81324 16.5 6.6532 16.1481 5.66651 15.4888C4.67981 14.8295 3.91078 13.8925 3.45665 12.7961C3.00253 11.6997 2.88371 10.4933 3.11522 9.32946C3.34673 8.16557 3.91817 7.09647 4.75729 6.25736" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round"/>
|
||||
<path d="M11.25 9L9 11.25M9 11.25L6.75 9M9 11.25V1.6875" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_18204_36775">
|
||||
<rect width="18" height="18" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 886 B |
@@ -19,6 +19,7 @@ export { default as CoinsIcon } from './coins.svg';
|
||||
export { default as CommentIcon } from './comment.svg';
|
||||
export { default as CopyIcon } from './copy.svg';
|
||||
export { default as CubeIcon } from './cube.svg';
|
||||
export { default as DepositIcon } from './deposit.svg';
|
||||
export { default as DepthChartIcon } from './depth-chart.svg';
|
||||
export { default as DiscordIcon } from './discord.svg';
|
||||
export { default as ExportKeysIcon } from './export-keys.svg';
|
||||
@@ -59,6 +60,7 @@ export { default as TransferIcon } from './transfer.svg';
|
||||
export { default as TriangleIcon } from './triangle.svg';
|
||||
export { default as TryAgainIcon } from './try-again.svg';
|
||||
export { default as WarningIcon } from './warning.svg';
|
||||
export { default as WithdrawIcon } from './withdraw.svg';
|
||||
|
||||
// Wallets
|
||||
export { default as BitkeepIcon } from './wallets/bitkeep.svg';
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M13.2426 6.2573C14.0817 7.09641 14.6531 8.16551 14.8846 9.3294C15.1162 10.4933 14.9973 11.6997 14.5432 12.796C14.0891 13.8924 13.32 14.8295 12.3334 15.4888C11.3467 16.148 10.1866 16.4999 8.99993 16.4999C7.81324 16.4999 6.6532 16.148 5.66651 15.4888C4.67981 14.8295 3.91078 13.8924 3.45665 12.796C3.00253 11.6997 2.88371 10.4933 3.11522 9.3294C3.34673 8.16551 3.91817 7.09641 4.75729 6.2573" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round"/>
|
||||
<path d="M11.25 2.9375L9 0.6875M9 0.6875L6.75 2.9375M9 0.6875V10.25" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 723 B |
@@ -8,7 +8,7 @@ import { STRING_KEYS } from '@/constants/localization';
|
||||
import { AppRoute } from '@/constants/routes';
|
||||
import { LogoShortIcon, BellStrokeIcon } from '@/icons';
|
||||
|
||||
import { useTokenConfigs, useStringGetter } from '@/hooks';
|
||||
import { useTokenConfigs, useStringGetter, useURLConfigs } from '@/hooks';
|
||||
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
@@ -28,6 +28,7 @@ import breakpoints from '@/styles/breakpoints';
|
||||
|
||||
export const HeaderDesktop = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { documentation, community, mintscanBase } = useURLConfigs();
|
||||
const dispatch = useDispatch();
|
||||
const { chainTokenLabel } = useTokenConfigs();
|
||||
|
||||
@@ -63,19 +64,19 @@ export const HeaderDesktop = () => {
|
||||
value: 'DOCUMENTATION',
|
||||
slotBefore: <Icon iconName={IconName.Terminal} />,
|
||||
label: stringGetter({ key: STRING_KEYS.DOCUMENTATION }),
|
||||
href: 'https://docs.dydx.exchange/',
|
||||
href: documentation,
|
||||
},
|
||||
{
|
||||
value: 'MINTSCAN',
|
||||
slotBefore: <Icon iconName={IconName.Mintscan} />,
|
||||
label: stringGetter({ key: STRING_KEYS.MINTSCAN }),
|
||||
href: 'https://testnet.mintscan.io/dydx-testnet',
|
||||
href: mintscanBase,
|
||||
},
|
||||
{
|
||||
value: 'COMMUNITY',
|
||||
slotBefore: <Icon iconName={IconName.Discord} />,
|
||||
label: stringGetter({ key: STRING_KEYS.COMMUNITY }),
|
||||
href: 'https://discord.gg/dydx',
|
||||
href: community,
|
||||
},
|
||||
{
|
||||
value: 'TERMS_OF_USE',
|
||||
|
||||
+10
-6
@@ -180,7 +180,7 @@ Styled.MobileProfileLayout = styled.div`
|
||||
${layoutMixins.contentContainerPage}
|
||||
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
padding: 1.25rem;
|
||||
`;
|
||||
|
||||
Styled.Header = styled.header`
|
||||
@@ -278,13 +278,17 @@ Styled.RewardsPanel = styled(Panel)`
|
||||
`;
|
||||
|
||||
Styled.TablePanel = styled(Panel)`
|
||||
max-width: calc(100vw - 2rem);
|
||||
max-height: 10rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0;
|
||||
border-radius: 0.875rem;
|
||||
--panel-content-paddingY: 0;
|
||||
--panel-content-paddingX: 0;
|
||||
|
||||
> div > div {
|
||||
margin-top: 0.5rem;
|
||||
--scrollArea-height: 10rem;
|
||||
border-radius: 0.875rem;
|
||||
}
|
||||
|
||||
table {
|
||||
max-height: 10rem;
|
||||
--tableCell-padding: 0.25rem 1rem;
|
||||
--tableRow-backgroundColor: var(--color-layer-3);
|
||||
background-color: var(--color-layer-3);
|
||||
|
||||
+131
-106
@@ -1,12 +1,12 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { Nullable } from '@dydxprotocol/v4-abacus';
|
||||
import styled, { AnyStyledComponent } from 'styled-components';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
|
||||
import { FeeTier } from '@/constants/abacus';
|
||||
import { FEE_DECIMALS, QUANTUM_MULTIPLIER } from '@/constants/numbers';
|
||||
import { FEE_DECIMALS } from '@/constants/numbers';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { useAccounts, useBreakpoints, useStringGetter } from '@/hooks';
|
||||
import { useBreakpoints, useStringGetter } from '@/hooks';
|
||||
import { breakpoints } from '@/styles';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { tableMixins } from '@/styles/tableMixins';
|
||||
@@ -29,9 +29,8 @@ const EQUALITY_SYMBOL_MAP = {
|
||||
};
|
||||
|
||||
export const Fees = () => {
|
||||
const { dydxAddress } = useAccounts();
|
||||
const stringGetter = useStringGetter();
|
||||
const { isNotTablet } = useBreakpoints();
|
||||
const { isTablet, isNotTablet } = useBreakpoints();
|
||||
const userFeeTier = useSelector(getUserFeeTier, shallowEqual);
|
||||
const userStats = useSelector(getUserStats, shallowEqual);
|
||||
const feeTiers = useSelector(getFeeTiers, shallowEqual);
|
||||
@@ -56,28 +55,28 @@ export const Fees = () => {
|
||||
<Styled.AdditionalConditions>
|
||||
{!isAdditional && !totalShare && !makerShare && <Output type={OutputType.Text} />}
|
||||
{!!totalShare && (
|
||||
<Styled.TextRow>
|
||||
{isAdditional && <span>{stringGetter({ key: STRING_KEYS.AND })}</span>}
|
||||
<span>{stringGetter({ key: STRING_KEYS.EXCHANGE_MARKET_SHARE })}</span>
|
||||
<Styled.Highlighted>{'>'}</Styled.Highlighted>
|
||||
<Styled.AdditionalConditionsText>
|
||||
{isAdditional && stringGetter({ key: STRING_KEYS.AND })}{' '}
|
||||
{stringGetter({ key: STRING_KEYS.EXCHANGE_MARKET_SHARE })}{' '}
|
||||
<Styled.Highlighted>{'>'}</Styled.Highlighted>{' '}
|
||||
<Styled.HighlightOutput
|
||||
type={OutputType.Percent}
|
||||
value={totalShare}
|
||||
fractionDigits={0}
|
||||
/>
|
||||
</Styled.TextRow>
|
||||
</Styled.AdditionalConditionsText>
|
||||
)}
|
||||
{!!makerShare && (
|
||||
<Styled.TextRow>
|
||||
{isAdditional && <span>{stringGetter({ key: STRING_KEYS.AND })}</span>}
|
||||
<span>{stringGetter({ key: STRING_KEYS.MAKER_MARKET_SHARE })}</span>
|
||||
<Styled.Highlighted>{'>'}</Styled.Highlighted>
|
||||
<Styled.AdditionalConditionsText>
|
||||
{isAdditional && stringGetter({ key: STRING_KEYS.AND })}{' '}
|
||||
{stringGetter({ key: STRING_KEYS.MAKER_MARKET_SHARE })}{' '}
|
||||
<Styled.Highlighted>{'>'}</Styled.Highlighted>{' '}
|
||||
<Styled.HighlightOutput
|
||||
type={OutputType.Percent}
|
||||
value={makerShare}
|
||||
fractionDigits={0}
|
||||
/>
|
||||
</Styled.TextRow>
|
||||
</Styled.AdditionalConditionsText>
|
||||
)}
|
||||
</Styled.AdditionalConditions>
|
||||
),
|
||||
@@ -103,91 +102,90 @@ export const Fees = () => {
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div>
|
||||
<Styled.FeeTable
|
||||
label="Fee Tiers"
|
||||
data={feeTiers || []}
|
||||
getRowKey={(row: FeeTier) => row.tier}
|
||||
getRowAttributes={(row: FeeTier) => ({
|
||||
'data-yours': row.tier === userFeeTier,
|
||||
})}
|
||||
columns={(
|
||||
[
|
||||
{
|
||||
columnKey: 'tier',
|
||||
getCellValue: (row) => row.tier,
|
||||
label: stringGetter({ key: STRING_KEYS.TIER }),
|
||||
allowsSorting: false,
|
||||
renderCell: ({ tier }) => (
|
||||
<Styled.Tier>
|
||||
<Styled.Output type={OutputType.Text} value={tier} />
|
||||
{tier === userFeeTier && (
|
||||
<Styled.YouTag size={TagSize.Medium}>
|
||||
{stringGetter({ key: STRING_KEYS.YOU })}
|
||||
</Styled.YouTag>
|
||||
)}
|
||||
</Styled.Tier>
|
||||
),
|
||||
},
|
||||
{
|
||||
columnKey: 'volume',
|
||||
getCellValue: (row) => row.volume,
|
||||
label: stringGetter({ key: STRING_KEYS.VOLUME_30D }),
|
||||
allowsSorting: false,
|
||||
renderCell: ({ symbol, volume, makerShare, totalShare }) => (
|
||||
<>
|
||||
<span>{`${
|
||||
symbol in EQUALITY_SYMBOL_MAP
|
||||
? EQUALITY_SYMBOL_MAP[symbol as keyof typeof EQUALITY_SYMBOL_MAP]
|
||||
: symbol
|
||||
} `}</span>
|
||||
<Styled.HighlightOutput type={OutputType.CompactFiat} value={volume} />
|
||||
{!isNotTablet &&
|
||||
AdditionalConditions({ totalShare, makerShare, isAdditional: true })}
|
||||
</>
|
||||
),
|
||||
},
|
||||
isNotTablet && {
|
||||
columnKey: 'condition',
|
||||
getCellValue: (row) => row.volume,
|
||||
label: stringGetter({ key: STRING_KEYS.ADDITIONAL_CONDITION }),
|
||||
allowsSorting: false,
|
||||
renderCell: ({ totalShare, makerShare }) =>
|
||||
AdditionalConditions({ totalShare, makerShare }),
|
||||
},
|
||||
{
|
||||
columnKey: 'maker',
|
||||
getCellValue: (row) => row.maker,
|
||||
label: stringGetter({ key: STRING_KEYS.MAKER }),
|
||||
allowsSorting: false,
|
||||
renderCell: ({ maker }) => (
|
||||
<Styled.HighlightOutput
|
||||
type={OutputType.SmallPercent}
|
||||
value={maker}
|
||||
fractionDigits={FEE_DECIMALS}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
columnKey: 'taker',
|
||||
getCellValue: (row) => row.taker,
|
||||
label: stringGetter({ key: STRING_KEYS.TAKER }),
|
||||
allowsSorting: false,
|
||||
renderCell: ({ taker }) => (
|
||||
<Styled.HighlightOutput
|
||||
type={OutputType.SmallPercent}
|
||||
value={taker}
|
||||
fractionDigits={FEE_DECIMALS}
|
||||
/>
|
||||
),
|
||||
},
|
||||
] as ColumnDef<FeeTier>[]
|
||||
).filter(isTruthy)}
|
||||
selectionBehavior="replace"
|
||||
withOuterBorder={isNotTablet}
|
||||
withInnerBorders
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Styled.FeeTable
|
||||
label="Fee Tiers"
|
||||
data={feeTiers || []}
|
||||
getRowKey={(row: FeeTier) => row.tier}
|
||||
getRowAttributes={(row: FeeTier) => ({
|
||||
'data-yours': row.tier === userFeeTier,
|
||||
})}
|
||||
columns={(
|
||||
[
|
||||
{
|
||||
columnKey: 'tier',
|
||||
getCellValue: (row) => row.tier,
|
||||
label: stringGetter({ key: STRING_KEYS.TIER }),
|
||||
allowsSorting: false,
|
||||
renderCell: ({ tier }) => (
|
||||
<Styled.Tier>
|
||||
<Styled.Output type={OutputType.Text} value={tier} />
|
||||
{tier === userFeeTier && (
|
||||
<Styled.YouTag size={TagSize.Medium}>
|
||||
{stringGetter({ key: STRING_KEYS.YOU })}
|
||||
</Styled.YouTag>
|
||||
)}
|
||||
</Styled.Tier>
|
||||
),
|
||||
},
|
||||
{
|
||||
columnKey: 'volume',
|
||||
getCellValue: (row) => row.volume,
|
||||
label: stringGetter({ key: STRING_KEYS.VOLUME_30D }),
|
||||
allowsSorting: false,
|
||||
renderCell: ({ symbol, volume, makerShare, totalShare }) => (
|
||||
<>
|
||||
<span>{`${
|
||||
symbol in EQUALITY_SYMBOL_MAP
|
||||
? EQUALITY_SYMBOL_MAP[symbol as keyof typeof EQUALITY_SYMBOL_MAP]
|
||||
: symbol
|
||||
} `}</span>
|
||||
<Styled.HighlightOutput type={OutputType.CompactFiat} value={volume} />
|
||||
{isTablet &&
|
||||
AdditionalConditions({ totalShare, makerShare, isAdditional: true })}
|
||||
</>
|
||||
),
|
||||
},
|
||||
isNotTablet && {
|
||||
columnKey: 'condition',
|
||||
getCellValue: (row) => row.volume,
|
||||
label: stringGetter({ key: STRING_KEYS.ADDITIONAL_CONDITION }),
|
||||
allowsSorting: false,
|
||||
renderCell: ({ totalShare, makerShare }) =>
|
||||
AdditionalConditions({ totalShare, makerShare }),
|
||||
},
|
||||
{
|
||||
columnKey: 'maker',
|
||||
getCellValue: (row) => row.maker,
|
||||
label: stringGetter({ key: STRING_KEYS.MAKER }),
|
||||
allowsSorting: false,
|
||||
renderCell: ({ maker }) => (
|
||||
<Styled.HighlightOutput
|
||||
type={OutputType.SmallPercent}
|
||||
value={maker}
|
||||
fractionDigits={FEE_DECIMALS}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
columnKey: 'taker',
|
||||
getCellValue: (row) => row.taker,
|
||||
label: stringGetter({ key: STRING_KEYS.TAKER }),
|
||||
allowsSorting: false,
|
||||
renderCell: ({ taker }) => (
|
||||
<Styled.HighlightOutput
|
||||
type={OutputType.SmallPercent}
|
||||
value={taker}
|
||||
fractionDigits={FEE_DECIMALS}
|
||||
/>
|
||||
),
|
||||
},
|
||||
] as ColumnDef<FeeTier>[]
|
||||
).filter(isTruthy)}
|
||||
selectionBehavior="replace"
|
||||
withOuterBorder={isNotTablet}
|
||||
withInnerBorders
|
||||
/>
|
||||
</Styled.ContentWrapper>
|
||||
</AttachedExpandingSection>
|
||||
);
|
||||
@@ -198,21 +196,43 @@ const Styled: Record<string, AnyStyledComponent> = {};
|
||||
Styled.ContentWrapper = styled.div`
|
||||
${layoutMixins.flexColumn}
|
||||
gap: 1.5rem;
|
||||
max-width: 100vw;
|
||||
`;
|
||||
|
||||
Styled.AdditionalConditions = styled.div`
|
||||
${tableMixins.cellContentColumn}
|
||||
justify-content: end;
|
||||
|
||||
color: var(--color-text-0);
|
||||
font: var(--font-small-book);
|
||||
|
||||
> :nth-child(2) {
|
||||
font: var(--font-base-book);
|
||||
font: var(--font-small-book);
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.AdditionalConditionsText = styled.span`
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
|
||||
@media ${breakpoints.mobile} {
|
||||
display: inline;
|
||||
max-width: 8rem;
|
||||
min-width: 0;
|
||||
|
||||
output {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.FeesDetails = styled(Details)`
|
||||
gap: 1rem;
|
||||
|
||||
@media ${breakpoints.notTablet} {
|
||||
margin: 0 1.25rem;
|
||||
}
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
--details-grid-numColumns: 1;
|
||||
@@ -237,11 +257,7 @@ Styled.FeesDetails = styled(Details)`
|
||||
}
|
||||
|
||||
output {
|
||||
font: var(--font-medium-book);
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
font: var(--font-base-book);
|
||||
}
|
||||
font: var(--font-base-book);
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -271,6 +287,11 @@ Styled.FeeTable = styled(Table)`
|
||||
|
||||
font: var(--font-base-book);
|
||||
|
||||
@media ${breakpoints.mobile} {
|
||||
--tableCell-padding: 1rem 1.25rem;
|
||||
font: var(--font-small-book);
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
&[data-yours='true'] {
|
||||
background-color: var(--color-layer-3);
|
||||
@@ -283,6 +304,10 @@ Styled.FeeTable = styled(Table)`
|
||||
|
||||
@media ${breakpoints.notTablet} {
|
||||
--tableHeader-backgroundColor: var(--color-layer-1);
|
||||
|
||||
thead tr {
|
||||
--border-width: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -32,11 +32,11 @@ export const DYDXBalancePanel = () => {
|
||||
const { chainTokenLabel } = useTokenConfigs();
|
||||
|
||||
return (
|
||||
<Panel
|
||||
<Styled.Panel
|
||||
slotHeader={
|
||||
<Styled.Header>
|
||||
<Styled.Title>
|
||||
{/* <AssetIcon symbol="DYDX" /> */}
|
||||
<AssetIcon symbol={chainTokenLabel} />
|
||||
{chainTokenLabel}
|
||||
</Styled.Title>
|
||||
<Styled.ReceiveAndTransferButtons>
|
||||
@@ -117,14 +117,19 @@ export const DYDXBalancePanel = () => {
|
||||
]}
|
||||
/>
|
||||
</Styled.Content>
|
||||
</Panel>
|
||||
</Styled.Panel>
|
||||
);
|
||||
};
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Panel = styled(Panel)`
|
||||
--panel-paddingX: 1.5rem;
|
||||
`;
|
||||
|
||||
Styled.Header = styled.div`
|
||||
${layoutMixins.spacedRow}
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem 0;
|
||||
`;
|
||||
|
||||
@@ -177,7 +182,7 @@ Styled.WalletAndStakedBalance = styled(Details)`
|
||||
--details-item-backgroundColor: var(--color-layer-6);
|
||||
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
gap: 1rem;
|
||||
|
||||
> div {
|
||||
gap: 1rem;
|
||||
|
||||
@@ -71,7 +71,7 @@ export const MigratePanel = () => {
|
||||
</Styled.Description>
|
||||
</Styled.MigratePanel>
|
||||
) : (
|
||||
<Styled.MobileMigratePanel
|
||||
<Styled.MigratePanel
|
||||
slotHeader={
|
||||
<Styled.MobileMigrateHeader>
|
||||
<h3>
|
||||
@@ -88,49 +88,52 @@ export const MigratePanel = () => {
|
||||
</Styled.MobileMigrateHeader>
|
||||
}
|
||||
>
|
||||
<Styled.WithReceipt
|
||||
slotReceipt={
|
||||
<Styled.Details
|
||||
items={[
|
||||
{
|
||||
key: 'available-to-migrate',
|
||||
label: (
|
||||
<Styled.InlineRow>
|
||||
{stringGetter({ key: STRING_KEYS.AVAILABLE_TO_MIGRATE })}
|
||||
<Tag>DYDX</Tag>
|
||||
</Styled.InlineRow>
|
||||
),
|
||||
value: <Output type={OutputType.Asset} value={tokenBalance} />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{import.meta.env.VITE_TOKEN_MIGRATION_URI && (
|
||||
<Button
|
||||
action={tokenBalance ? ButtonAction.Primary : ButtonAction.Base}
|
||||
size={ButtonSize.Medium}
|
||||
slotRight={<Icon iconName={IconName.LinkOut} />}
|
||||
href={import.meta.env.VITE_TOKEN_MIGRATION_URI}
|
||||
>
|
||||
{stringGetter({ key: STRING_KEYS.MIGRATE_NOW })}
|
||||
</Button>
|
||||
)}
|
||||
</Styled.WithReceipt>
|
||||
<Styled.InlineRow>
|
||||
{stringGetter({ key: STRING_KEYS.WANT_TO_LEARN })}
|
||||
<Link href={TOKEN_MIGRATION_LEARN_MORE_LINK} withIcon>
|
||||
{stringGetter({ key: STRING_KEYS.CLICK_HERE })}
|
||||
</Link>
|
||||
</Styled.InlineRow>
|
||||
</Styled.MobileMigratePanel>
|
||||
<Styled.Column>
|
||||
<Styled.WithReceipt
|
||||
slotReceipt={
|
||||
<Styled.Details
|
||||
items={[
|
||||
{
|
||||
key: 'available-to-migrate',
|
||||
label: (
|
||||
<Styled.InlineRow>
|
||||
{stringGetter({ key: STRING_KEYS.AVAILABLE_TO_MIGRATE })}
|
||||
<Tag>DYDX</Tag>
|
||||
</Styled.InlineRow>
|
||||
),
|
||||
value: <Output type={OutputType.Asset} value={tokenBalance} />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{import.meta.env.VITE_TOKEN_MIGRATION_URI && (
|
||||
<Button
|
||||
action={tokenBalance ? ButtonAction.Primary : ButtonAction.Base}
|
||||
size={ButtonSize.Medium}
|
||||
slotRight={<Icon iconName={IconName.LinkOut} />}
|
||||
href={import.meta.env.VITE_TOKEN_MIGRATION_URI}
|
||||
>
|
||||
{stringGetter({ key: STRING_KEYS.MIGRATE_NOW })}
|
||||
</Button>
|
||||
)}
|
||||
</Styled.WithReceipt>
|
||||
<Styled.InlineRow>
|
||||
{stringGetter({ key: STRING_KEYS.WANT_TO_LEARN })}
|
||||
<Link href={TOKEN_MIGRATION_LEARN_MORE_LINK} withIcon>
|
||||
{stringGetter({ key: STRING_KEYS.CLICK_HERE })}
|
||||
</Link>
|
||||
</Styled.InlineRow>
|
||||
</Styled.Column>
|
||||
</Styled.MigratePanel>
|
||||
);
|
||||
};
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.MigratePanel = styled(Panel)`
|
||||
padding: 1rem 1.5rem;
|
||||
--panel-paddingX: 1.5rem;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
Styled.Title = styled.h3`
|
||||
@@ -163,10 +166,9 @@ Styled.Description = styled.div`
|
||||
--link-color: var(--color-text-1);
|
||||
`;
|
||||
|
||||
Styled.MobileMigratePanel = styled(Panel)`
|
||||
Styled.Column = styled.div`
|
||||
${layoutMixins.flexColumn}
|
||||
gap: 1rem;
|
||||
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import { STRING_KEYS } from '@/constants/localization';
|
||||
import { ButtonAction, ButtonSize } from '@/constants/buttons';
|
||||
import { DialogTypes } from '@/constants/dialogs';
|
||||
|
||||
import { useBreakpoints, useStringGetter } from '@/hooks';
|
||||
import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
|
||||
|
||||
import { breakpoints } from '@/styles';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
@@ -20,15 +20,10 @@ import { openDialog } from '@/state/dialogs';
|
||||
import { DYDXBalancePanel } from './DYDXBalancePanel';
|
||||
import { MigratePanel } from './MigratePanel';
|
||||
|
||||
// TODO: consolidate help link urls to env variables
|
||||
const GOVERNANCE_HELP_URL = 'https://help.dydx.exchange/';
|
||||
const STAKING_HELP_URL =
|
||||
'https://docs.dydx.community/dydx-chain-documentation/staking/how-to-stake';
|
||||
|
||||
export const RewardsPage = () => {
|
||||
const dispatch = useDispatch();
|
||||
const stringGetter = useStringGetter();
|
||||
|
||||
const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
|
||||
const { isTablet, isNotTablet } = useBreakpoints();
|
||||
|
||||
const panelArrow = (
|
||||
@@ -45,11 +40,7 @@ export const RewardsPage = () => {
|
||||
<Styled.Page>
|
||||
{import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
|
||||
<Styled.PanelRow>
|
||||
{isTablet && (
|
||||
<Styled.BalancePanelContainer>
|
||||
<DYDXBalancePanel />
|
||||
</Styled.BalancePanelContainer>
|
||||
)}
|
||||
{isTablet && <DYDXBalancePanel />}
|
||||
|
||||
<Styled.Panel
|
||||
slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
|
||||
@@ -58,7 +49,7 @@ export const RewardsPage = () => {
|
||||
>
|
||||
<Styled.Description>
|
||||
{stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
|
||||
<Link href={GOVERNANCE_HELP_URL} onClick={(e) => e.stopPropagation()}>
|
||||
<Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
|
||||
{stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
|
||||
</Link>
|
||||
</Styled.Description>
|
||||
@@ -71,17 +62,13 @@ export const RewardsPage = () => {
|
||||
>
|
||||
<Styled.Description>
|
||||
{stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
|
||||
<Link href={STAKING_HELP_URL} onClick={(e) => e.stopPropagation()}>
|
||||
<Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
|
||||
{stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
|
||||
</Link>
|
||||
</Styled.Description>
|
||||
</Styled.Panel>
|
||||
|
||||
{isNotTablet && (
|
||||
<Styled.BalancePanelContainer>
|
||||
<DYDXBalancePanel />
|
||||
</Styled.BalancePanelContainer>
|
||||
)}
|
||||
{isNotTablet && <DYDXBalancePanel />}
|
||||
</Styled.PanelRow>
|
||||
</Styled.Page>
|
||||
);
|
||||
@@ -92,10 +79,26 @@ const Styled: Record<string, AnyStyledComponent> = {};
|
||||
Styled.Page = styled.div`
|
||||
${layoutMixins.contentContainerPage}
|
||||
gap: 1.5rem;
|
||||
padding: 2rem;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
--content-max-width: 70rem;
|
||||
max-width: min(calc(100vw - 4rem), var(--content-max-width));
|
||||
}
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
padding: 1.25rem;
|
||||
|
||||
> * {
|
||||
max-width: calc(100vw - 2.5rem);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Panel = styled(Panel)`
|
||||
padding: 1rem 1.5rem;
|
||||
--panel-paddingX: 1.5rem;
|
||||
`;
|
||||
|
||||
Styled.Title = styled.h3`
|
||||
@@ -110,27 +113,14 @@ Styled.Description = styled.div`
|
||||
`;
|
||||
|
||||
Styled.PanelRow = styled.div`
|
||||
${layoutMixins.spacedRow}
|
||||
${layoutMixins.gridEqualColumns}
|
||||
gap: 1.5rem;
|
||||
max-width: min(100vw, var(--content-max-width));
|
||||
align-items: flex-start;
|
||||
|
||||
> section {
|
||||
cursor: pointer;
|
||||
}
|
||||
align-items: flex-start;
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: 1fr;
|
||||
max-width: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.BalancePanelContainer = styled.div`
|
||||
width: 21.25rem;
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
width: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -140,5 +130,5 @@ Styled.IconButton = styled(IconButton)`
|
||||
`;
|
||||
|
||||
Styled.Arrow = styled.div`
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 1rem;
|
||||
`;
|
||||
|
||||
@@ -227,8 +227,8 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
|
||||
},
|
||||
]}
|
||||
value={view}
|
||||
onValueChange={(newView: string) => {
|
||||
setView((newView || view) as PanelView);
|
||||
onValueChange={setView}
|
||||
onInteraction={() => {
|
||||
setIsOpen?.(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -29,7 +29,7 @@ export const MarketFilter = ({
|
||||
<>
|
||||
{!isSearch && (
|
||||
<ToggleGroup
|
||||
items={Object.entries(filters).map(([key, value]) => ({
|
||||
items={Object.values(filters).map((value) => ({
|
||||
label: stringGetter({ key: MARKET_FILTER_LABELS[value] }),
|
||||
value,
|
||||
}))}
|
||||
|
||||
@@ -198,8 +198,6 @@ Styled.Details = styled(Details)`
|
||||
@media ${breakpoints.tablet} {
|
||||
${layoutMixins.withOuterAndInnerBorders}
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
|
||||
font: var(--font-small-book);
|
||||
|
||||
> * {
|
||||
|
||||
@@ -246,9 +246,7 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => {
|
||||
}[rate] || '',
|
||||
}))}
|
||||
value={fundingRateView}
|
||||
onValueChange={(newRate: FundingRateResolution) => {
|
||||
if (newRate) setFundingRateView(newRate);
|
||||
}}
|
||||
onValueChange={setFundingRateView}
|
||||
size={ButtonSize.XSmall}
|
||||
/>
|
||||
</Styled.FundingRateToggle>
|
||||
|
||||
@@ -2,7 +2,7 @@ import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { useBreakpoints, useStringGetter } from '@/hooks';
|
||||
import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
|
||||
|
||||
import { Button } from '@/components/Button';
|
||||
import { Dialog, DialogPlacement } from '@/components/Dialog';
|
||||
@@ -15,12 +15,10 @@ type ElementProps = {
|
||||
setIsOpen: (open: boolean) => void;
|
||||
};
|
||||
|
||||
// TODO: replace placeholder URL with real URLs when avaialble
|
||||
const KEPLR_DASHBOARD_URL = 'https://testnet.keplr.app/';
|
||||
const HELP_URL = 'https://help.dydx.exchange/en/articles/2921366-how-do-i-create-an-account-or-sign-up';
|
||||
|
||||
export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { keplrDashboard, accountExportLearnMore } = useURLConfigs();
|
||||
|
||||
const { isTablet } = useBreakpoints();
|
||||
|
||||
return (
|
||||
@@ -31,7 +29,7 @@ export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
|
||||
placement={isTablet ? DialogPlacement.FullScreen : DialogPlacement.Default}
|
||||
>
|
||||
<Styled.Content>
|
||||
<Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={KEPLR_DASHBOARD_URL}>
|
||||
<Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={keplrDashboard}>
|
||||
<span>
|
||||
{stringGetter({
|
||||
key: STRING_KEYS.NAVIGATE_TO_KEPLR,
|
||||
@@ -48,7 +46,7 @@ export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
|
||||
/>
|
||||
</Styled.Button>
|
||||
|
||||
<Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={HELP_URL}>
|
||||
<Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={accountExportLearnMore}>
|
||||
<span>
|
||||
{stringGetter({
|
||||
key: STRING_KEYS.LEARN_TO_EXPORT,
|
||||
|
||||
@@ -2,10 +2,10 @@ import { useMemo } from 'react';
|
||||
import styled, { AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { useStringGetter } from '@/hooks';
|
||||
import { ChatIcon, FeedbackIcon, FileIcon, TerminalIcon } from '@/icons';
|
||||
import { useStringGetter, useURLConfigs } from '@/hooks';
|
||||
|
||||
import { ComboboxDialogMenu } from '@/components/ComboboxDialogMenu';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
|
||||
import { isTruthy } from '@/lib/isTruthy';
|
||||
|
||||
@@ -13,39 +13,24 @@ type ElementProps = {
|
||||
setIsOpen: (open: boolean) => void;
|
||||
};
|
||||
|
||||
const HELP_LINKS = {
|
||||
apiDocumentation: 'https://v4-teacher.vercel.app/',
|
||||
helpCenter: null,
|
||||
feedback: null,
|
||||
};
|
||||
|
||||
export const HelpDialog = ({ setIsOpen }: ElementProps) => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { help: helpCenter, community } = useURLConfigs();
|
||||
|
||||
const HELP_ITEMS = useMemo(
|
||||
() => [
|
||||
{
|
||||
group: 'help-items',
|
||||
items: [
|
||||
HELP_LINKS.helpCenter && {
|
||||
helpCenter && {
|
||||
value: 'help-center',
|
||||
label: stringGetter({ key: STRING_KEYS.HELP_CENTER }),
|
||||
description: stringGetter({ key: STRING_KEYS.HELP_CENTER_DESCRIPTION }),
|
||||
onSelect: () => {
|
||||
HELP_LINKS.helpCenter && globalThis.open(HELP_LINKS.helpCenter, '_blank');
|
||||
helpCenter && globalThis.open(helpCenter, '_blank');
|
||||
setIsOpen(false);
|
||||
},
|
||||
slotBefore: <FileIcon />,
|
||||
},
|
||||
HELP_LINKS.apiDocumentation && {
|
||||
value: 'api-documentation',
|
||||
label: stringGetter({ key: STRING_KEYS.API_DOCUMENTATION }),
|
||||
description: stringGetter({ key: STRING_KEYS.API_DOCUMENTATION_DESCRIPTION }),
|
||||
onSelect: () => {
|
||||
HELP_LINKS.apiDocumentation && globalThis.open(HELP_LINKS.apiDocumentation, '_blank');
|
||||
setIsOpen(false);
|
||||
},
|
||||
slotBefore: <TerminalIcon />,
|
||||
slotBefore: <Icon iconName={IconName.File} />,
|
||||
},
|
||||
globalThis?.Intercom && {
|
||||
value: 'live-chat',
|
||||
@@ -55,22 +40,22 @@ export const HelpDialog = ({ setIsOpen }: ElementProps) => {
|
||||
globalThis.Intercom('show');
|
||||
setIsOpen(false);
|
||||
},
|
||||
slotBefore: <ChatIcon />,
|
||||
slotBefore: <Icon iconName={IconName.Chat} />,
|
||||
},
|
||||
HELP_LINKS.feedback && {
|
||||
value: 'feedback',
|
||||
label: stringGetter({ key: STRING_KEYS.PROVIDE_FEEDBACK }),
|
||||
description: stringGetter({ key: STRING_KEYS.PROVIDE_FEEDBACK_DESCRIPTION }),
|
||||
community && {
|
||||
value: 'community',
|
||||
label: stringGetter({ key: STRING_KEYS.COMMUNITY }),
|
||||
description: stringGetter({ key: STRING_KEYS.COMMUNITY_DESCRIPTION }),
|
||||
onSelect: () => {
|
||||
HELP_LINKS.feedback && globalThis.open(HELP_LINKS.feedback, '_blank');
|
||||
community && globalThis.open(community, '_blank');
|
||||
setIsOpen(false);
|
||||
},
|
||||
slotBefore: <FeedbackIcon />,
|
||||
slotBefore: <Icon iconName={IconName.Discord} />,
|
||||
},
|
||||
].filter(isTruthy),
|
||||
},
|
||||
],
|
||||
[stringGetter]
|
||||
[stringGetter, helpCenter, community]
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@@ -13,16 +13,15 @@ import { Button } from '@/components/Button';
|
||||
import { Icon } from '@/components/Icon';
|
||||
import { Link } from '@/components/Link';
|
||||
|
||||
import { useAccounts, useStringGetter } from '@/hooks';
|
||||
import { useAccounts, useStringGetter, useURLConfigs } from '@/hooks';
|
||||
import { useDisplayedWallets } from '@/hooks/useDisplayedWallets';
|
||||
|
||||
import { breakpoints } from '@/styles';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
const aboutWalletsLink = `https://www.dydx.academy/video/defi-wallet`;
|
||||
|
||||
export const ChooseWallet = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { walletLearnMore } = useURLConfigs();
|
||||
|
||||
const displayedWallets = useDisplayedWallets();
|
||||
|
||||
@@ -63,7 +62,7 @@ export const ChooseWallet = () => {
|
||||
</Styled.Wallets>
|
||||
|
||||
<Styled.Footer>
|
||||
<Link href={aboutWalletsLink} withIcon>
|
||||
<Link href={walletLearnMore} withIcon>
|
||||
{stringGetter({ key: STRING_KEYS.ABOUT_WALLETS })}
|
||||
</Link>
|
||||
</Styled.Footer>
|
||||
|
||||
@@ -73,9 +73,7 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: ElementProps) =>
|
||||
<Styled.ToggleGroup
|
||||
items={allTradeTypeItems}
|
||||
value={selectedTradeType}
|
||||
onValueChange={(tradeType: TradeTypes) =>
|
||||
onTradeTypeChange(tradeType || selectedTradeType)
|
||||
}
|
||||
onValueChange={onTradeTypeChange}
|
||||
/>
|
||||
),
|
||||
},
|
||||
|
||||
@@ -209,7 +209,7 @@ export const ClosePositionForm = ({
|
||||
value: value.toString(),
|
||||
}))}
|
||||
value={percent?.toString() ?? ''}
|
||||
onValueChange={(value: any) => onSelectPercentage((value || percent?.toString()) ?? '')}
|
||||
onValueChange={onSelectPercentage}
|
||||
shape={ButtonShape.Rectangle}
|
||||
/>
|
||||
|
||||
|
||||
@@ -153,9 +153,7 @@ export const MarketLeverageInput = ({
|
||||
value: MustBigNumber(leverageAmount).toFixed(LEVERAGE_DECIMALS),
|
||||
}))}
|
||||
value={MustBigNumber(formattedLeverageValue).abs().toFixed(LEVERAGE_DECIMALS)} // sign agnostic
|
||||
onValueChange={(option?: number) =>
|
||||
updateLeverage(option === undefined ? formattedLeverageValue : option)
|
||||
}
|
||||
onValueChange={updateLeverage}
|
||||
shape={ButtonShape.Rectangle}
|
||||
/>
|
||||
</>
|
||||
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
useTokenConfigs,
|
||||
useStringGetter,
|
||||
useAccountBalance,
|
||||
useURLConfigs,
|
||||
} from '@/hooks';
|
||||
|
||||
import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';
|
||||
@@ -36,10 +37,9 @@ import { truncateAddress } from '@/lib/wallet';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { headerMixins } from '@/styles/headerMixins';
|
||||
|
||||
const explorerBaseUri = 'https://testnet.mintscan.io/dydx-testnet';
|
||||
|
||||
export const AccountMenu = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { mintscanBase } = useURLConfigs();
|
||||
const { isTablet } = useBreakpoints();
|
||||
const dispatch = useDispatch();
|
||||
const onboardingState = useSelector(getOnboardingState);
|
||||
@@ -92,7 +92,7 @@ export const AccountMenu = () => {
|
||||
/>
|
||||
<IconButton
|
||||
action={ButtonAction.Base}
|
||||
href={`${explorerBaseUri}/account/${dydxAddress}`}
|
||||
href={`${mintscanBase}/account/${dydxAddress}`}
|
||||
iconName={IconName.LinkOut}
|
||||
shape={ButtonShape.Square}
|
||||
type={ButtonType.Link}
|
||||
@@ -139,7 +139,7 @@ export const AccountMenu = () => {
|
||||
fractionDigits={2}
|
||||
/>
|
||||
</div>
|
||||
<AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} />
|
||||
<AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} withOnboarding />
|
||||
</div>
|
||||
</Styled.Balances>
|
||||
</Styled.AccountInfo>
|
||||
@@ -167,7 +167,7 @@ export const AccountMenu = () => {
|
||||
// value: 'ViewInExplorer',
|
||||
// icon: <Icon iconName={IconName.Etherscan} />,
|
||||
// label: stringGetter({ key: STRING_KEYS.OPEN_IN_ETHERSCAN }),
|
||||
// onSelect: () => globalThis.open(`${explorerBaseUri}/address/${address}`),
|
||||
// onSelect: () => globalThis.open(`${mintscanBase}/address/${address}`),
|
||||
// separator: true,
|
||||
// },
|
||||
...(onboardingState === OnboardingState.AccountConnected && hdKey
|
||||
@@ -212,28 +212,45 @@ export const AccountMenu = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const AssetActions = memo(({ asset, dispatch }: { asset: DydxChainAsset; dispatch: Dispatch }) => (
|
||||
<Styled.InlineRow>
|
||||
{[
|
||||
// TODO(@rosepuppy): Add withdraw action for USDC
|
||||
{
|
||||
dialogType: DialogTypes.Receive,
|
||||
iconName: IconName.Qr,
|
||||
},
|
||||
{ dialogType: DialogTypes.Transfer, iconName: IconName.Send },
|
||||
].map(({ iconName, dialogType }) => (
|
||||
<IconButton
|
||||
key={dialogType}
|
||||
action={ButtonAction.Base}
|
||||
shape={ButtonShape.Square}
|
||||
iconName={iconName}
|
||||
onClick={() =>
|
||||
dispatch(openDialog({ type: dialogType, dialogProps: { selectedAsset: asset } }))
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Styled.InlineRow>
|
||||
));
|
||||
const AssetActions = memo(
|
||||
({
|
||||
asset,
|
||||
dispatch,
|
||||
withOnboarding,
|
||||
}: {
|
||||
asset: DydxChainAsset;
|
||||
dispatch: Dispatch;
|
||||
withOnboarding?: boolean;
|
||||
}) => (
|
||||
<Styled.InlineRow>
|
||||
{[
|
||||
withOnboarding && {
|
||||
dialogType: DialogTypes.Withdraw,
|
||||
iconName: IconName.Withdraw,
|
||||
},
|
||||
withOnboarding && {
|
||||
dialogType: DialogTypes.Deposit,
|
||||
iconName: IconName.Deposit,
|
||||
},
|
||||
{
|
||||
dialogType: DialogTypes.Transfer,
|
||||
dialogProps: { selectedAsset: asset },
|
||||
iconName: IconName.Send,
|
||||
},
|
||||
]
|
||||
.filter(isTruthy)
|
||||
.map(({ iconName, dialogType, dialogProps }) => (
|
||||
<Styled.IconButton
|
||||
key={dialogType}
|
||||
action={ButtonAction.Base}
|
||||
shape={ButtonShape.Square}
|
||||
iconName={iconName}
|
||||
onClick={() => dispatch(openDialog({ type: dialogType, dialogProps }))}
|
||||
/>
|
||||
))}
|
||||
</Styled.InlineRow>
|
||||
)
|
||||
);
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
@@ -351,3 +368,7 @@ Styled.ConnectToChain = styled(Styled.Column)`
|
||||
font: var(--font-small-book);
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.IconButton = styled(IconButton)`
|
||||
--button-padding: 0 0.25rem;
|
||||
`;
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { groupBy } from 'lodash';
|
||||
|
||||
import { type Notification, NotificationStatus } from '@/constants/notifications';
|
||||
|
||||
import { useBreakpoints } from '@/hooks';
|
||||
import { useNotifications } from '@/hooks/useNotifications';
|
||||
import { CloseIcon } from '@/icons';
|
||||
|
||||
import { Button } from '@/components/Button';
|
||||
import { ButtonAction, ButtonSize } from '@/constants/buttons';
|
||||
@@ -13,10 +16,6 @@ import { DialogPlacement } from '@/components/Dialog';
|
||||
import { Output, OutputType } from '@/components/Output';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
import { Toolbar } from '@/components/Toolbar';
|
||||
import { CloseIcon } from '@/icons';
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
type ElementProps = {
|
||||
slotTrigger?: React.ReactNode;
|
||||
@@ -27,6 +26,7 @@ export const NotificationsMenu = ({
|
||||
slotTrigger,
|
||||
placement = DialogPlacement.Sidebar,
|
||||
}: ElementProps) => {
|
||||
const { isTablet } = useBreakpoints();
|
||||
const {
|
||||
notifications,
|
||||
getDisplayData,
|
||||
@@ -173,6 +173,7 @@ export const NotificationsMenu = ({
|
||||
</$FooterToolbar>
|
||||
}
|
||||
placement={placement}
|
||||
preventClose={isTablet}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user