diff --git a/package.json b/package.json index 74311f6bd..5abf57603 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "@datadog/browser-logs": "^5.23.3", "@dydxprotocol/v4-abacus": "1.9.10", "@dydxprotocol/v4-client-js": "^1.1.27", - "@dydxprotocol/v4-localization": "^1.1.191", + "@dydxprotocol/v4-localization": "^1.1.192", "@emotion/is-prop-valid": "^1.3.0", "@ethersproject/providers": "^5.7.2", "@hugocxl/react-to-image": "^0.0.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e9c2607b2..a71e0ab58 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,8 +39,8 @@ dependencies: specifier: ^1.1.27 version: 1.1.27 '@dydxprotocol/v4-localization': - specifier: ^1.1.191 - version: 1.1.191 + specifier: ^1.1.192 + version: 1.1.192 '@emotion/is-prop-valid': specifier: ^1.3.0 version: 1.3.0 @@ -3191,8 +3191,8 @@ packages: - utf-8-validate dev: false - /@dydxprotocol/v4-localization@1.1.191: - resolution: {integrity: sha512-UOP9rH9drdIX1Q3nQ303jX+DzGqaasVBSMl8/xFLQmnFQN4Eb8zdUeQpdlvz4HbT761piGO8EGsnExm4Byww0Q==} + /@dydxprotocol/v4-localization@1.1.192: + resolution: {integrity: sha512-lowjiZCoYS+3i5D38N7PLjJeDLaL4nEPUKSuo1xmYiMx087oZ4QikAr4YCnx2uAfPUyvi7dqzvYeG3HPO9y2Sg==} dev: false /@dydxprotocol/v4-proto@5.0.0-dev.0: diff --git a/public/grid-background.svg b/public/grid-background-dark.svg similarity index 100% rename from public/grid-background.svg rename to public/grid-background-dark.svg diff --git a/public/grid-background-light.svg b/public/grid-background-light.svg new file mode 100644 index 000000000..42b2ce6bf --- /dev/null +++ b/public/grid-background-light.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/pages/portfolio/Overview.tsx b/src/pages/portfolio/Overview.tsx index f709ce0bb..c6b22f847 100644 --- a/src/pages/portfolio/Overview.tsx +++ b/src/pages/portfolio/Overview.tsx @@ -5,12 +5,13 @@ import styled from 'styled-components'; import { STRING_KEYS } from '@/constants/localization'; import { AppRoute, PortfolioRoute } from '@/constants/routes'; -import { StatSigFlags } from '@/constants/statsig'; +import { StatsigDynamicConfigs, StatSigFlags } from '@/constants/statsig'; +import { useAccounts } from '@/hooks/useAccounts'; import { useBreakpoints } from '@/hooks/useBreakpoints'; import { useParameterizedSelector } from '@/hooks/useParameterizedSelector'; import { useShouldShowTriggers } from '@/hooks/useShouldShowTriggers'; -import { useStatsigGateValue } from '@/hooks/useStatsig'; +import { useAllStatsigDynamicConfigValues, useStatsigGateValue } from '@/hooks/useStatsig'; import { useStringGetter } from '@/hooks/useStringGetter'; import { AttachedExpandingSection, DetachedSection } from '@/components/ContentSection'; @@ -18,6 +19,7 @@ import { ContentSectionHeader } from '@/components/ContentSectionHeader'; import { Icon, IconName } from '@/components/Icon'; import { Link } from '@/components/Link'; import { AffiliatesBanner } from '@/views/AffiliatesBanner'; +import { TelegramInviteBanner } from '@/views/TelegramInviteBanner'; import { PositionsTable, PositionsTableColumnKey } from '@/views/tables/PositionsTable'; import { calculateShouldRenderActionsInPositionsTable } from '@/state/accountCalculators'; @@ -30,8 +32,16 @@ import { AccountDetailsAndHistory } from './AccountDetailsAndHistory'; export const Overview = () => { const stringGetter = useStringGetter(); - const { isTablet } = useBreakpoints(); const navigate = useNavigate(); + + const { isTablet } = useBreakpoints(); + const { dydxAddress } = useAccounts(); + + const dynamicConfigs = useAllStatsigDynamicConfigValues(); + const feedbackRequestWalletAddresses = + dynamicConfigs?.[StatsigDynamicConfigs.dcHighestVolumeUsers]; + const shouldShowTelegramInvite = + dydxAddress && feedbackRequestWalletAddresses?.includes(dydxAddress); const affiliatesEnabled = useStatsigGateValue(StatSigFlags.ffEnableAffiliates); const handleViewUnopenedIsolatedOrders = useCallback(() => { @@ -53,6 +63,12 @@ export const Overview = () => { return (
+ {shouldShowTelegramInvite && ( + + + + )} + diff --git a/src/state/configsSelectors.ts b/src/state/configsSelectors.ts index 340305810..54b090f00 100644 --- a/src/state/configsSelectors.ts +++ b/src/state/configsSelectors.ts @@ -16,12 +16,26 @@ export const getAppTheme = (state: RootState): AppTheme => { } }; -const DARK_CHART_BACKGROUND_URL = '/chart-dots-background-dark.svg'; -const LIGHT_CHART_BACKGROUND_URL = '/chart-dots-background-light.svg'; +const ChartDotBackgrounds = { + [AppTheme.Dark]: '/chart-dots-background-dark.svg', + [AppTheme.Classic]: '/chart-dots-background-dark.svg', + [AppTheme.Light]: '/chart-dots-background-light.svg', +}; + +const GridBackgrounds = { + [AppTheme.Dark]: '/grid-background-dark.svg', + [AppTheme.Classic]: '/grid-background-dark.svg', + [AppTheme.Light]: '/grid-background-light.svg', +}; export const getChartDotBackground = (state: RootState): string => { const appTheme = getAppTheme(state); - return appTheme === AppTheme.Light ? LIGHT_CHART_BACKGROUND_URL : DARK_CHART_BACKGROUND_URL; + return ChartDotBackgrounds[appTheme]; +}; + +export const getGridBackground = (state: RootState): string => { + const appTheme = getAppTheme(state); + return GridBackgrounds[appTheme]; }; export const getAppColorMode = (state: RootState) => state.configs.appColorMode; diff --git a/src/views/AffiliatesBanner.tsx b/src/views/AffiliatesBanner.tsx index b85f2ff77..a6f42b66e 100644 --- a/src/views/AffiliatesBanner.tsx +++ b/src/views/AffiliatesBanner.tsx @@ -1,3 +1,4 @@ +import { css } from 'styled-components'; import { styled } from 'twin.macro'; import { AFFILIATES_EARN_PER_MONTH, AFFILIATES_FEE_DISCOUNT } from '@/constants/affiliates'; @@ -8,20 +9,28 @@ import { STRING_KEYS } from '@/constants/localization'; import { useStringGetter } from '@/hooks/useStringGetter'; import { useURLConfigs } from '@/hooks/useURLConfigs'; +import { layoutMixins } from '@/styles/layoutMixins'; + import { Button } from '@/components/Button'; import { Icon, IconName } from '@/components/Icon'; import { Link } from '@/components/Link'; -import { useAppDispatch } from '@/state/appTypes'; +import { useAppDispatch, useAppSelector } from '@/state/appTypes'; +import { getGridBackground } from '@/state/configsSelectors'; import { openDialog } from '@/state/dialogs'; export const AffiliatesBanner = () => { + const dispatch = useAppDispatch(); const stringGetter = useStringGetter(); const { affiliateProgram } = useURLConfigs(); - const dispatch = useAppDispatch(); + const background = useAppSelector(getGridBackground); + return ( - <$Background tw="row m-1 justify-between gap-0.5 rounded-0.5 bg-color-layer-1 pl-1 pr-2"> + <$Background + backgroundImagePath={background} + tw="row mb-1 mt-1 justify-between gap-0.5 bg-color-layer-1 pl-1 pr-2" + >
affiliates hedgie
@@ -71,8 +80,14 @@ export const AffiliatesBanner = () => { ); }; -const $Background = styled.div` - background-image: url('/grid-background.svg'); +const $Background = styled.div<{ backgroundImagePath: string }>` + --color-border: transparent; + ${layoutMixins.withOuterBorderClipped} + + ${({ backgroundImagePath }) => css` + background: url(${backgroundImagePath}); + `} + background-repeat: no-repeat; background-position-x: 100%; background-size: contain; diff --git a/src/views/TelegramInviteBanner.tsx b/src/views/TelegramInviteBanner.tsx new file mode 100644 index 000000000..f54357bd3 --- /dev/null +++ b/src/views/TelegramInviteBanner.tsx @@ -0,0 +1,35 @@ +import styled from 'styled-components'; + +import { STRING_KEYS } from '@/constants/localization'; + +import { useStringGetter } from '@/hooks/useStringGetter'; +import { useURLConfigs } from '@/hooks/useURLConfigs'; + +import { layoutMixins } from '@/styles/layoutMixins'; + +import { Link } from '@/components/Link'; + +export const TelegramInviteBanner = () => { + const stringGetter = useStringGetter(); + const { getInTouch } = useURLConfigs(); + + return getInTouch ? ( + <$Banner tw="mb-1 bg-color-layer-5 p-1"> + {stringGetter({ + key: STRING_KEYS.TELEGRAM_INVITE_BANNER, + params: { + HERE_LINK: ( + + {stringGetter({ key: STRING_KEYS.HERE })} + + ), + }, + })} + + ) : null; +}; + +const $Banner = styled.div` + --color-border: transparent; + ${layoutMixins.withOuterBorderClipped} +`;