reorganize rewards vs. profile, update panel and accordion styling (#221)

* reorganize rewards vs. profile, update panel and accordion styling * feedback
2024-01-09 16:57:02 -05:00
parent 4bcb1f64ac
commit b2234cb969
10 changed files with 134 additions and 70 deletions
@@ -0,0 +1,26 @@
+import type { Story } from '@ladle/react';
+
+import { Accordion as AccordionComponent, AccordionProps } from '@/components/Accordion';
+
+import { StoryWrapper } from '.ladle/components';
+
+export const Accordion: Story<AccordionProps> = (args) => {
+  return (
+    <StoryWrapper>
+      <AccordionComponent {...args} />
+    </StoryWrapper>
+  );
+};
+
+Accordion.args = {
+  items: [
+    {
+      header: 'Question 1?',
+      content: 'Answer 1.',
+    },
+    {
+      header: 'Question 2?',
+      content: 'Answer 2.',
+    },
+  ],
+};
@@ -3,6 +3,8 @@ 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 { breakpoints } from '@/styles';
+
 import { PlusIcon } from '@/icons';

 export type AccordionItem = {
@@ -10,7 +12,7 @@ export type AccordionItem = {
  content: React.ReactNode;
 };

-type AccordionProps = {
+export type AccordionProps = {
  items: AccordionItem[];
  className?: string;
 };
@@ -36,6 +38,13 @@ export const Accordion = ({ items, className }: AccordionProps) => (
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Root = styled(Root)`
+  --accordion-paddingY: 1rem;
+  --accordion-paddingX: 1rem;
+
+  @media ${breakpoints.notTablet} {
+    --accordion-paddingX: 1.5rem;
+  }
+
  > *:not(:last-child) {
    border-bottom: var(--border-width) solid var(--border-color);
  }
@@ -67,7 +76,8 @@ Styled.Icon = styled.div`
 Styled.Trigger = styled(Trigger)`
  ${layoutMixins.spacedRow}
  width: 100%;
-  padding: 1rem 0.75rem;
+  padding: var(--accordion-paddingY) var(--accordion-paddingX);
+  gap: 0.5rem;

  color: var(--color-text-1);
  text-align: start;
@@ -91,7 +101,7 @@ Styled.Trigger = styled(Trigger)`

 Styled.Content = styled(Content)`
  overflow: hidden;
-  margin: 0 0.75rem 1rem;
+  margin: 0 var(--accordion-paddingX) var(--accordion-paddingY);

  color: var(--color-text-0);

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { Icon, IconName } from '@/components/Icon';

 import { layoutMixins } from '@/styles/layoutMixins';
+import { breakpoints } from '@/styles';

 type PanelProps = {
  slotHeaderContent?: string;
@@ -67,6 +68,12 @@ Styled.Panel = styled.section<{ onClick?: () => void }>`
  --panel-content-paddingY: var(--panel-paddingY);
  --panel-content-paddingX: var(--panel-paddingX);

+  @media ${breakpoints.notTablet} {
+    --panel-paddingX: 1.5rem;
+    --panel-paddingY: 1.25rem;
+    --panel-content-paddingY: 1rem;
+  }
+
  ${layoutMixins.row}

  background-color: var(--color-layer-3);
@@ -1,3 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14 6L7.83335 10.5L2 6" stroke="currentColor" stroke-width="2.25" stroke-linecap="round"/>
-</svg>
+<svg fill="none" height="10" viewBox="0 0 15 10" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.321829 1.09389c.200562-.192959.469529-.298401.747791-.29315.27827.00525.54307.120763.73621.32115l5.194 5.5132 5.19397-5.5132c.0944-.10408.2088-.188152.3363-.247234.1275-.059081.2655-.091968.406-.096713.1404-.004746.2804.018748.4116.069088s.2509.126504.3522.223979c.1012.09747.1818.21427.2371.34347.0552.12921.084.26819.0845.40871.0006.14052-.0271.27972-.0813.40936s-.1339.24707-.2344.34534l-5.94997 6.3c-.09795.10163-.21538.18245-.34527.23766-.1299.05521-.26959.08367-.41073.08367s-.28083-.02846-.41073-.08367c-.12989-.05521-.24732-.13603-.34527-.23766l-5.950001-6.3c-.192962-.20056-.29840394-.46953-.29315364-.74779.00525031-.27827.12076264-.54307.32115364-.73621z" fill="currentColor" fill-rule="evenodd"/></svg>
@@ -30,6 +30,9 @@ import abacusStateManager from '@/lib/abacus';
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';

+import { DYDXBalancePanel } from './rewards/DYDXBalancePanel';
+import { MigratePanel } from './rewards/MigratePanel';
+
 const ENS_CHAIN_ID = 1; // Ethereum

 const Profile = () => {
@@ -175,8 +178,27 @@ const Profile = () => {
          onClick={() => dispatch(openDialog({ type: DialogTypes.Help }))}
        />
      </Styled.EqualGrid>
+      
+      <MigratePanel />
+      <DYDXBalancePanel />

      <Styled.EqualGrid>
+        <Styled.RewardsPanel
+          slotHeaderContent="Trading Rewards"
+          href={`/${chainTokenLabel}`}
+          hasSeparator
+        >
+          <Styled.Details
+            items={[
+              {
+                key: 'week-rewards',
+                label: stringGetter({ key: STRING_KEYS.THIS_WEEK }),
+                value: '-',
+              },
+            ]}
+            layout="grid"
+          />
+        </Styled.RewardsPanel>
        <Panel
          slotHeaderContent={stringGetter({ key: STRING_KEYS.FEES })}
          href={`${AppRoute.Portfolio}/${PortfolioRoute.Fees}`}
@@ -191,19 +213,6 @@ const Profile = () => {
            layout="grid"
          />
        </Panel>
-        <Styled.RewardsPanel
-          slotHeaderContent={stringGetter({ key: STRING_KEYS.REWARDS })}
-          href={`/${chainTokenLabel}`}
-          hasSeparator
-        >
-          <Styled.Details
-            items={[
-              { key: 'maker', label: stringGetter({ key: STRING_KEYS.YOU_WILL_EARN }), value: '-' },
-              { key: 'taker', label: stringGetter({ key: STRING_KEYS.EPOCH_ENDS_IN }), value: '-' },
-            ]}
-            layout="grid"
-          />
-        </Styled.RewardsPanel>
      </Styled.EqualGrid>

      <Styled.TablePanel
@@ -327,6 +336,13 @@ Styled.Details = styled(Details)`
 `;

 Styled.RewardsPanel = styled(Panel)`
+  align-self: flex-start;
+  
+  &,
+  > * {
+    height: 100%;
+  }
+
  dl {
    --details-grid-numColumns: 1;
  }
@@ -2,7 +2,6 @@ import type { ElementType } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';

-import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { useAccountBalance, useAccounts, useTokenConfigs, useStringGetter } from '@/hooks';

@@ -33,7 +32,7 @@ export const DYDXBalancePanel = () => {
  const { chainTokenLabel } = useTokenConfigs();

  return (
-    <Styled.Panel
+    <Panel
      slotHeader={
        <Styled.Header>
          <Styled.Title>
@@ -109,21 +108,12 @@ export const DYDXBalancePanel = () => {
          ]}
        />
      </Styled.Content>
-    </Styled.Panel>
+    </Panel>
  );
 };

 const Styled: Record<string, AnyStyledComponent> = {};

-Styled.Panel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
-`;
-
 Styled.Header = styled.div`
  ${layoutMixins.spacedRow}
  gap: 1rem;
@@ -70,10 +70,12 @@ const EstimatedRewards = () => {

  const { data, isLoading } = useQuery({
    enabled: !!dydxAddress,
-    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}`,
+    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}_${SEASON_NUMBER}`,
    queryFn: async () => {
      if (!dydxAddress) return undefined;
-      const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}?n=${SEASON_NUMBER}`);
+      const resp = await fetch(
+        `https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}?n=${SEASON_NUMBER}`
+      );
      return (await resp.json())?.incentivePoints;
    },
    onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
@@ -151,15 +153,8 @@ const LaunchIncentivesContent = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Panel = styled(Panel)`
-  --panel-paddingY: 1rem;
-  --panel-paddingX: 1.5rem;
-
  background-color: var(--color-layer-4);
  width: 100%;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-  }
 `;

 Styled.ForV4 = styled.span`
@@ -223,7 +218,7 @@ Styled.Column = styled.div`
 Styled.EstimatedRewardsCard = styled.div`
  ${layoutMixins.spacedRow}
  padding: 1rem 1.25rem;
-  min-width: 21.25rem;
+  min-width: 19rem;
  height: calc(100% - calc(1.5rem * 2));
  margin: 1.5rem;

@@ -7,8 +7,6 @@ import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';

 import { useAccountBalance, useBreakpoints, useStringGetter } from '@/hooks';

-import { breakpoints } from '@/styles';
-
 import { layoutMixins } from '@/styles/layoutMixins';

 import { Details } from '@/components/Details';
@@ -28,7 +26,7 @@ import { MustBigNumber } from '@/lib/numbers';
 const TOKEN_MIGRATION_LEARN_MORE_LINK =
  'https://www.dydx.foundation/blog/update-on-exploring-the-future-of-dydx';

-export const MigratePanel = () => {
+export const MigratePanel = ({ className }: { className?: string }) => {
  const { isNotTablet } = useBreakpoints();
  const stringGetter = useStringGetter();

@@ -45,6 +43,7 @@ export const MigratePanel = () => {

  return isNotTablet ? (
    <Styled.MigratePanel
+      className={className}
      slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.MIGRATE })}</Styled.Title>}
      slotRight={
        <Styled.MigrateAction>
@@ -74,6 +73,7 @@ export const MigratePanel = () => {
    </Styled.MigratePanel>
  ) : (
    <Styled.MigratePanel
+      className={className}
      slotHeader={
        <Styled.MobileMigrateHeader>
          <h3>
@@ -134,17 +134,11 @@ export const MigratePanel = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.MigratePanel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
  width: 100%;

  background-image: url('/dots-background.svg');
  background-position: right;
  background-repeat: no-repeat;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
 `;

 Styled.Title = styled.h3`
@@ -157,7 +151,7 @@ Styled.Title = styled.h3`
 Styled.MigrateAction = styled.div`
  ${layoutMixins.flexEqualColumns}
  align-items: center;
-  margin-right: 1rem;
+  margin: 1rem;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
@@ -197,7 +191,7 @@ Styled.MobileMigrateHeader = styled.div`
  font: var(--font-small-book);
  color: var(--color-text-0);

-  padding: 1rem 1.5rem 0;
+  padding: 1rem 1rem 0;

  h3 {
    ${layoutMixins.inlineRow}
@@ -1,5 +1,6 @@
 import styled, { AnyStyledComponent } from 'styled-components';

+import { breakpoints } from '@/styles';
 import { STRING_KEYS } from '@/constants/localization';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { useStringGetter } from '@/hooks';
@@ -51,6 +52,7 @@ export const RewardsHelpPanel = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.HelpCard = styled(Panel)`
+  --panel-content-paddingX: 0;
  --panel-content-paddingY: 0;
  width: 100%;
  height: max-content;
@@ -64,11 +66,15 @@ Styled.Header = styled.div`
  ${layoutMixins.spacedRow}
  gap: 1ch;

-  padding: 1.25rem 1.5rem;
+  padding: 1rem 1rem;
  border-bottom: var(--border-width) solid var(--border-color);

  font: var(--font-small-book);

+  @media ${breakpoints.notTablet} {
+    padding: 1.5rem 1.25rem;
+  }
+
  h3 {
    font: var(--font-medium-book);
    color: var(--color-text-2);
@@ -1,15 +1,18 @@
 import styled, { AnyStyledComponent } from 'styled-components';
 import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';

 import { STRING_KEYS } from '@/constants/localization';
 import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
+import { AppRoute } from '@/constants/routes';

 import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';

 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';

+import { BackButton } from '@/components/BackButton';
 import { Panel } from '@/components/Panel';
 import { IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
@@ -20,12 +23,14 @@ import { openDialog } from '@/state/dialogs';
 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
 import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
+import { RewardsHelpPanel } from './RewardsHelpPanel';

 const RewardsPage = () => {
  const dispatch = useDispatch();
  const stringGetter = useStringGetter();
  const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
  const { isTablet, isNotTablet } = useBreakpoints();
+  const navigate = useNavigate();

  const panelArrow = (
    <Styled.Arrow>
@@ -39,13 +44,16 @@ const RewardsPage = () => {

  return (
    <Styled.Page>
-      {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
+      {isTablet && (
+        <Styled.MobileHeader>
+          <BackButton onClick={() => navigate(AppRoute.Profile)} />
+          {stringGetter({ key: STRING_KEYS.TRADING_REWARDS })}
+        </Styled.MobileHeader>
+      )}
+      {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <MigratePanel />}

      {isTablet ? (
-        <>
-          <LaunchIncentivesPanel />
-          <DYDXBalancePanel />
-        </>
+        <LaunchIncentivesPanel />
      ) : (
        <Styled.PanelRowIncentivesAndBalance>
          <LaunchIncentivesPanel />
@@ -55,7 +63,9 @@ const RewardsPage = () => {

      <Styled.PanelRow>
        <Styled.Panel
-          slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
+          slotHeaderContent={
+            <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
+          }
          slotRight={panelArrow}
          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
        >
@@ -68,7 +78,9 @@ const RewardsPage = () => {
        </Styled.Panel>

        <Styled.Panel
-          slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
+          slotHeaderContent={
+            <Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>
+          }
          slotRight={panelArrow}
          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
        >
@@ -80,6 +92,8 @@ const RewardsPage = () => {
          </Styled.Description>
        </Styled.Panel>
      </Styled.PanelRow>
+
+      <RewardsHelpPanel />
    </Styled.Page>
  );
 };
@@ -95,33 +109,41 @@ Styled.Page = styled.div`
  align-items: center;

  > * {
-    --content-max-width: 70rem;
+    --content-max-width: 80rem;
    max-width: min(calc(100vw - 4rem), var(--content-max-width));
  }

  @media ${breakpoints.tablet} {
-    padding: 1.25rem;
+    --stickyArea-topHeight: var(--page-header-height-mobile);
+    padding: 0 1rem 1rem;

    > * {
-      max-width: calc(100vw - 2.5rem);
+      max-width: calc(100vw - 2rem);
      width: 100%;
    }
  }
 `;

-Styled.Panel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
+Styled.MobileHeader = styled.header`
+  ${layoutMixins.contentSectionDetachedScrollable}
+  ${layoutMixins.stickyHeader}
+  z-index: 2;
+  padding: 1.25rem 0;
+  margin-bottom: -1.5rem;

-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
+  font: var(--font-large-medium);
+  color: var(--color-text-2);
+  background-color: var(--color-layer-2);
+`;
+
+Styled.Panel = styled(Panel)`
+  height: fit-content;
 `;

 Styled.Title = styled.h3`
  font: var(--font-medium-book);
  color: var(--color-text-2);
-  padding: 1rem 1.5rem 0;
+  margin-bottom: -1rem;
 `;

 Styled.Description = styled.div`