move governance staking panels to mobile profile

* add collapsible table

* update to add a TR inside table instead

src/components/ContentSection.tsx

@@ -11,6 +11,5 @@ export const DetachedScrollableSection = styled.section`
 
 export const AttachedExpandingSection = styled.section`
   ${layoutMixins.contentSectionAttached}
-  ${layoutMixins.expandingColumnWithHeader}
   gap: var(--border-width);
 `;

src/components/DiffArrow.stories.tsx

@@ -14,7 +14,7 @@ export const DiffArrowStory: Story<DiffArrowProps> = (args) => (
 
 DiffArrowStory.argTypes = {
   direction: {
-    options: ['left', 'right', 'up', 'down'],
+    options: ['left', 'right'],
     control: { type: 'select' },
     defaultValue: 'right',
   },

src/components/DiffArrow.tsx

@@ -10,7 +10,7 @@ type ElementProps = {
 
 type StyleProps = {
   className?: string;
-  direction?: 'right' | 'left' | 'up' | 'down';
+  direction?: 'right' | 'left';
 };
 
 export type DiffArrowProps = ElementProps & StyleProps;
@@ -57,11 +57,5 @@ Styled.DiffArrowContainer = styled.span<DiffArrowProps>`
       left: css`
         transform: scaleX(-1);
       `,
-      up: css`
-        transform: rotate(-90deg);
-      `,
-      down: css`
-        transform: rotate(90deg);
-      `
     }[direction || 'right'])}
 `;

src/components/Icon.tsx

@@ -44,7 +44,6 @@ import {
   MenuIcon,
   MigrateIcon,
   MintscanIcon,
-  MoonIcon,
   OrderbookIcon,
   OrderCanceledIcon,
   OrderFilledIcon,
@@ -67,7 +66,6 @@ import {
   ShowIcon,
   TogglesMenuIcon,
   StarIcon,
-  SunIcon,
   TerminalIcon,
   TradeIcon,
   TransferIcon,
@@ -121,7 +119,6 @@ export enum IconName {
   Menu = 'Menu',
   Migrate = 'Migrate',
   Mintscan = 'Mintscan',
-  Moon = 'Moon',
   Onboarding = 'Onboarding',
   Orderbook = 'OrderbookIcon',
   OrderCanceled = 'OrderCanceled',
@@ -144,7 +141,6 @@ export enum IconName {
   Share = 'Share',
   Show = 'Show',
   Star = 'Star',
-  Sun = 'Sun',
   Terminal = 'Terminal',
   TogglesMenu = 'TogglesMenu',
   Trade = 'Trade',
@@ -199,7 +195,6 @@ const icons = {
   [IconName.Menu]: MenuIcon,
   [IconName.Migrate]: MigrateIcon,
   [IconName.Mintscan]: MintscanIcon,
-  [IconName.Moon]: MoonIcon,
   [IconName.Orderbook]: OrderbookIcon,
   [IconName.OrderCanceled]: OrderCanceledIcon,
   [IconName.OrderFilled]: OrderFilledIcon,
@@ -221,7 +216,6 @@ const icons = {
   [IconName.Share]: ShareIcon,
   [IconName.Show]: ShowIcon,
   [IconName.Star]: StarIcon,
-  [IconName.Sun]: SunIcon,
   [IconName.Terminal]: TerminalIcon,
   [IconName.TogglesMenu]: TogglesMenuIcon,
   [IconName.Trade]: TradeIcon,

src/components/Panel.tsx

@@ -7,7 +7,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { breakpoints } from '@/styles';
 
 type PanelProps = {
-  slotHeaderContent?: string;
+  slotHeaderContent?: React.ReactNode;
   slotHeader?: React.ReactNode;
   slotRight?: React.ReactNode;
   children?: React.ReactNode;

src/components/Table.tsx

@@ -33,17 +33,20 @@ import {
 
 import { useAsyncList } from 'react-stately';
 
-import { useBreakpoints } from '@/hooks';
+import { useBreakpoints, useStringGetter } from '@/hooks';
 import { MediaQueryKeys } from '@/hooks/useBreakpoints';
 
-import { Checkbox } from '@/components/Checkbox';
-
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
+import { CaretIcon } from '@/icons';
+
+import { STRING_KEYS } from '@/constants/localization';
+
+import { MustBigNumber } from '@/lib/numbers';
 
 import { Icon, IconName } from './Icon';
 import { Tag } from './Tag';
-import { MustBigNumber } from '@/lib/numbers';
+import { Button } from './Button';
 
 export { TableCell } from './Table/TableCell';
 export { TableColumnHeader } from './Table/TableColumnHeader';
@@ -65,7 +68,7 @@ export type TableItem<TableRowData> = {
   onSelect?: (key: TableRowData) => void;
 };
 
-export type ColumnDef<TableRowData extends object> = {
+type ColumnDef<TableRowData extends object> = {
   columnKey: string;
   label: React.ReactNode;
   tag?: React.ReactNode;
@@ -80,7 +83,7 @@ export type ColumnDef<TableRowData extends object> = {
   width?: ColumnSize;
 };
 
-type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey extends Key> = {
+export type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey extends Key> = {
   label?: string;
   columns: ColumnDef<TableRowData>[];
   data: TableRowData[];
@@ -92,6 +95,7 @@ type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey ext
   selectionBehavior?: 'replace' | 'toggle';
   onRowAction?: (key: TableRowKey, row: TableRowData) => void;
   slotEmpty?: React.ReactNode;
+  initialNumRowsToShow?: number;
   // collection: TableCollection<string>;
   // children: React.ReactNode;
 };
@@ -121,6 +125,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
   selectionMode = 'single',
   selectionBehavior = 'toggle',
   slotEmpty,
+  initialNumRowsToShow = data.length,
   // shouldRowRender,
 
   // collection,
@@ -136,6 +141,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
   style,
 }: ElementProps<TableRowData, TableRowKey> & StyleProps) => {
   const [selectedKeys, setSelectedKeys] = useState(new Set<TableRowKey>());
+  const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow);
 
   const currentBreakpoints = useBreakpoints();
   const shownColumns = columns.filter(
@@ -209,6 +215,12 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
             onRowAction &&
             ((key: TableRowKey) => onRowAction(key, data.find((row) => getRowKey(row) === key)!))
           }
+          numColumns={shownColumns.length}
+          onViewMoreClick={
+            numRowsToShow !== undefined && numRowsToShow < data.length
+              ? () => setNumRowsToShow(data.length)
+              : undefined
+          }
           // shouldRowRender={shouldRowRender}
           hideHeader={hideHeader}
           withGradientCardRows={withGradientCardRows}
@@ -233,7 +245,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
             )}
           </TableHeader>
 
-          <TableBody items={list.items}>
+          <TableBody items={list.items.slice(0, numRowsToShow)}>
             {(item) => (
               <Row key={getRowKey(item)}>
                 {(columnKey) => (
@@ -267,6 +279,8 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
   onRowAction?: (key: TableRowKey) => void;
   // shouldRowRender?: (prevRowData: object, currentRowData: object) => boolean;
   children: CollectionChildren<TableRowData>;
+  numColumns: number;
+  onViewMoreClick?: () => void;
 
   hideHeader?: boolean;
   withGradientCardRows?: boolean;
@@ -276,7 +290,7 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
   withScrollSnapColumns?: boolean;
   withScrollSnapRows?: boolean;
 }) => {
-  const { selectionMode, selectionBehavior } = props;
+  const { selectionMode, selectionBehavior, numColumns, onViewMoreClick } = props;
 
   const state = useTableState<TableRowData>({
     ...props,
@@ -337,6 +351,7 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
       <TableBodyRowGroup
         withGradientCardRows={props.withGradientCardRows}
         withInnerBorders={props.withInnerBorders}
+        withOuterBorder={props.withOuterBorder}
       >
         {/* {Array.from(collection.getChildren!(collection.body.key), (row) => */}
         {[...collection.body.childNodes].map((row) =>
@@ -382,6 +397,9 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
             </TableRow>
           )
         )}
+        {onViewMoreClick ? (
+          <ViewMoreRow colSpan={numColumns} onClick={onViewMoreClick} />
+        ) : undefined}
       </TableBodyRowGroup>
     </Styled.Table>
   );
@@ -415,6 +433,7 @@ const TableBodyRowGroup = ({
   children,
   withGradientCardRows,
   withInnerBorders,
+  withOuterBorder,
 }: { children: React.ReactNode } & StyleProps) => {
   const { rowGroupProps } = useTableRowGroup();
 
@@ -423,6 +442,7 @@ const TableBodyRowGroup = ({
       {...rowGroupProps}
       withGradientCardRows={withGradientCardRows}
       withInnerBorders={withInnerBorders}
+      withOuterBorder={withOuterBorder}
     >
       {children}
     </Styled.Tbody>
@@ -489,6 +509,23 @@ const TableColumnHeader = <TableRowData extends object>({
   );
 };
 
+export const ViewMoreRow = ({ colSpan, onClick }: { colSpan: number; onClick: () => void }) => {
+  const stringGetter = useStringGetter();
+  return (
+    <Styled.Tr key="viewmore">
+      <Styled.Td
+        colSpan={colSpan}
+        onMouseDown={(e: MouseEvent) => e.preventDefault()}
+        onPointerDown={(e: MouseEvent) => e.preventDefault()}
+      >
+        <Styled.ViewMoreButton slotRight={<CaretIcon />} onClick={onClick}>
+          {stringGetter({ key: STRING_KEYS.VIEW_MORE })}
+        </Styled.ViewMoreButton>
+      </Styled.Td>
+    </Styled.Tr>
+  );
+};
+
 export const TableRow = <TableRowData extends object>({
   item,
   children,
@@ -660,7 +697,7 @@ Styled.Empty = styled.div<{ withOuterBorder: boolean }>`
 
   justify-items: center;
   align-content: center;
-  padding: 2rem;
+  padding: 4rem;
   gap: 0.75em;
 
   color: var(--color-text-0);
@@ -868,6 +905,18 @@ Styled.Tbody = styled.tbody<StyleProps>`
       --stickyArea2-paddingLeft: var(--border-width);
       --stickyArea2-paddingRight: var(--border-width);
 
+      tr:first-of-type {
+        box-shadow: 0 calc(var(--border-width)) 0 0 var(--border-color);
+      }
+    `}
+
+  ${({ withOuterBorder }) =>
+    withOuterBorder &&
+    css`
+      tr:last-of-type:not(:only-of-type) {
+        box-shadow: 0 calc(-1 * var(--border-width)) 0 0 var(--border-color);
+      }
+
       tr:first-of-type {
         box-shadow: none;
       }
@@ -922,3 +971,15 @@ Styled.Row = styled.div`
   ${layoutMixins.inlineRow}
   padding: var(--tableCell-padding);
 `;
+
+Styled.ViewMoreButton = styled(Button)`
+  --button-backgroundColor: var(--color-layer-2);
+  --button-textColor: var(--color-text-1);
+
+  width: 100%;
+
+  svg {
+    width: 0.675rem;
+    margin-left: 0.5ch;
+  }
+`;

src/icons/index.ts

@@ -39,7 +39,6 @@ export { default as MarketsIcon } from './markets.svg';
 export { default as MenuIcon } from './menu.svg';
 export { default as MigrateIcon } from './migrate.svg';
 export { default as MintscanIcon } from './logos/mintscan.svg';
-export { default as MoonIcon } from './moon.svg';
 export { default as OrderbookIcon } from './orderbook.svg';
 export { default as OverviewIcon } from './overview.svg';
 export { default as PencilIcon } from './pencil.svg';
@@ -57,7 +56,6 @@ export { default as SendIcon } from './send.svg';
 export { default as ShareIcon } from './share.svg';
 export { default as ShowIcon } from './show.svg';
 export { default as StarIcon } from './star.svg';
-export { default as SunIcon } from './sun.svg';
 export { default as TerminalIcon } from './terminal.svg';
 export { default as TogglesMenuIcon } from './toggles-menu.svg';
 export { default as TradeIcon } from './trade.svg';

src/icons/moon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
-</svg>

src/icons/sun.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
-</svg>

src/pages/Profile.tsx

@@ -5,7 +5,7 @@ import { useEnsName } from 'wagmi';
 import { useNavigate } from 'react-router-dom';
 
 import { ButtonSize } from '@/constants/buttons';
-import { TransferInputField, TransferType } from '@/constants/abacus';
+import { TransferType } from '@/constants/abacus';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -26,12 +26,13 @@ import { useAccounts, useStringGetter, useTokenConfigs } from '@/hooks';
 import { getOnboardingState } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';
 
-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';
+import { GovernancePanel } from './rewards/GovernancePanel';
+import { StakingPanel } from './rewards/StakingPanel';
 
 const ENS_CHAIN_ID = 1; // Ethereum
 
@@ -178,7 +179,7 @@ const Profile = () => {
           onClick={() => dispatch(openDialog({ type: DialogTypes.Help }))}
         />
       </Styled.EqualGrid>
-      
+
       <MigratePanel />
       <DYDXBalancePanel />
 
@@ -230,6 +231,9 @@ const Profile = () => {
           withInnerBorders={false}
         />
       </Styled.TablePanel>
+
+      <GovernancePanel />
+      <StakingPanel />
     </Styled.MobileProfileLayout>
   );
 };
@@ -243,6 +247,7 @@ Styled.MobileProfileLayout = styled.div`
 
   gap: 1rem;
   padding: 1.25rem 0.9rem;
+  max-width: 100vw;
 `;
 
 Styled.Header = styled.header`
@@ -337,7 +342,7 @@ Styled.Details = styled(Details)`
 
 Styled.RewardsPanel = styled(Panel)`
   align-self: flex-start;
-  
+
   &,
   > * {
     height: 100%;

src/pages/rewards/GovernancePanel.tsx

@@ -0,0 +1,75 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+import { useDispatch } from 'react-redux';
+
+import { ButtonAction, ButtonSize } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
+import { DialogTypes } from '@/constants/dialogs';
+
+import { useStringGetter, useURLConfigs } from '@/hooks';
+
+import { Panel } from '@/components/Panel';
+import { IconName } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { Link } from '@/components/Link';
+
+import { openDialog } from '@/state/dialogs';
+
+export const GovernancePanel = () => {
+  const stringGetter = useStringGetter();
+  const dispatch = useDispatch();
+  const { governanceLearnMore } = useURLConfigs();
+
+  return (
+    <Panel
+      slotHeaderContent={
+        <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
+      }
+      slotRight={
+        <Styled.Arrow>
+          <Styled.IconButton
+            action={ButtonAction.Base}
+            iconName={IconName.Arrow}
+            size={ButtonSize.Small}
+          />
+        </Styled.Arrow>
+      }
+      onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
+    >
+      <Styled.Description>
+        {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
+        <Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
+          {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
+        </Link>
+      </Styled.Description>
+    </Panel>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Description = styled.div`
+  color: var(--color-text-0);
+  --link-color: var(--color-text-1);
+
+  a {
+    display: inline;
+    ::before {
+      content: ' ';
+    }
+  }
+`;
+
+Styled.IconButton = styled(IconButton)`
+  color: var(--color-text-0);
+  --color-border: var(--color-layer-6);
+`;
+
+Styled.Arrow = styled.div`
+  padding-right: 1.5rem;
+`;
+
+Styled.Title = styled.h3`
+  font: var(--font-medium-book);
+  color: var(--color-text-2);
+  margin-bottom: -1rem;
+`;

src/pages/rewards/MigratePanel.tsx

@@ -146,14 +146,15 @@ Styled.Title = styled.h3`
   color: var(--color-text-2);
 
   padding: var(--panel-paddingY) var(--panel-paddingX) 0;
+  margin-bottom: -0.5rem;
 `;
 
 Styled.MigrateAction = styled.div`
   ${layoutMixins.flexEqualColumns}
   align-items: center;
-  margin: 1rem;
   gap: 1rem;
   padding: 1rem;
+  margin: 1rem;
   width: 100%;
 
   background-color: var(--color-layer-2);
@@ -233,4 +234,4 @@ Styled.InlineRow = styled.div`
   ${layoutMixins.inlineRow}
   color: var(--color-text-0);
   --link-color: var(--color-text-1);
-`;
+`;

src/pages/rewards/RewardsPage.tsx

@@ -3,45 +3,29 @@ 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 { useBreakpoints, useStringGetter } 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';
-import { Link } from '@/components/Link';
-
-import { openDialog } from '@/state/dialogs';
 
 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
 import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
 import { RewardsHelpPanel } from './RewardsHelpPanel';
+import { GovernancePanel } from './GovernancePanel';
+import { StakingPanel } from './StakingPanel';
 
 const RewardsPage = () => {
   const dispatch = useDispatch();
   const stringGetter = useStringGetter();
-  const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
   const { isTablet, isNotTablet } = useBreakpoints();
   const navigate = useNavigate();
 
-  const panelArrow = (
-    <Styled.Arrow>
-      <Styled.IconButton
-        action={ButtonAction.Base}
-        iconName={IconName.Arrow}
-        size={ButtonSize.Small}
-      />
-    </Styled.Arrow>
-  );
-
   return (
     <Styled.Page>
       {isTablet && (
@@ -61,37 +45,12 @@ const RewardsPage = () => {
         </Styled.PanelRowIncentivesAndBalance>
       )}
 
-      <Styled.PanelRow>
-        <Styled.Panel
-          slotHeaderContent={
-            <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
-          }
-          slotRight={panelArrow}
-          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
-        >
-          <Styled.Description>
-            {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
-            <Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
-              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-            </Link>
-          </Styled.Description>
-        </Styled.Panel>
-
-        <Styled.Panel
-          slotHeaderContent={
-            <Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>
-          }
-          slotRight={panelArrow}
-          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
-        >
-          <Styled.Description>
-            {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
-            <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
-              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-            </Link>
-          </Styled.Description>
-        </Styled.Panel>
-      </Styled.PanelRow>
+      {isNotTablet && (
+        <Styled.PanelRow>
+          <GovernancePanel />
+          <StakingPanel />
+        </Styled.PanelRow>
+      )}
 
       <RewardsHelpPanel />
     </Styled.Page>
@@ -140,24 +99,6 @@ Styled.Panel = styled(Panel)`
   height: fit-content;
 `;
 
-Styled.Title = styled.h3`
-  font: var(--font-medium-book);
-  color: var(--color-text-2);
-  margin-bottom: -1rem;
-`;
-
-Styled.Description = styled.div`
-  color: var(--color-text-0);
-  --link-color: var(--color-text-1);
-
-  a {
-    display: inline;
-    ::before {
-      content: ' ';
-    }
-  }
-`;
-
 Styled.PanelRow = styled.div`
   ${layoutMixins.gridEqualColumns}
   gap: 1.5rem;
@@ -171,12 +112,3 @@ Styled.PanelRow = styled.div`
 Styled.PanelRowIncentivesAndBalance = styled(Styled.PanelRow)`
   grid-template-columns: 2fr 1fr;
 `;
-
-Styled.IconButton = styled(IconButton)`
-  color: var(--color-text-0);
-  --color-border: var(--color-layer-6);
-`;
-
-Styled.Arrow = styled.div`
-  padding: 1rem;
-`;

src/pages/rewards/StakingPanel.tsx

@@ -0,0 +1,73 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+import { useDispatch } from 'react-redux';
+
+import { ButtonAction, ButtonSize } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
+import { DialogTypes } from '@/constants/dialogs';
+
+import { useStringGetter, useURLConfigs } from '@/hooks';
+
+import { Panel } from '@/components/Panel';
+import { IconName } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { Link } from '@/components/Link';
+
+import { openDialog } from '@/state/dialogs';
+
+export const StakingPanel = () => {
+  const stringGetter = useStringGetter();
+  const dispatch = useDispatch();
+  const { stakingLearnMore } = useURLConfigs();
+
+  return (
+    <Panel
+      slotHeaderContent={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
+      slotRight={
+        <Styled.Arrow>
+          <Styled.IconButton
+            action={ButtonAction.Base}
+            iconName={IconName.Arrow}
+            size={ButtonSize.Small}
+          />
+        </Styled.Arrow>
+      }
+      onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
+    >
+      <Styled.Description>
+        {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
+        <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
+          {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
+        </Link>
+      </Styled.Description>
+    </Panel>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Description = styled.div`
+  color: var(--color-text-0);
+  --link-color: var(--color-text-1);
+
+  a {
+    display: inline;
+    ::before {
+      content: ' ';
+    }
+  }
+`;
+
+Styled.IconButton = styled(IconButton)`
+  color: var(--color-text-0);
+  --color-border: var(--color-layer-6);
+`;
+
+Styled.Arrow = styled.div`
+  padding-right: 1.5rem;
+`;
+
+Styled.Title = styled.h3`
+  font: var(--font-medium-book);
+  color: var(--color-text-2);
+  margin-bottom: -1rem;
+`;

src/views/tables/FillsTable.tsx

@@ -36,8 +36,6 @@ import { openDialog } from '@/state/dialogs';
 
 import { MustBigNumber } from '@/lib/numbers';
 import { getHydratedTradingData } from '@/lib/orders';
-import { tableMixins } from '@/styles/tableMixins';
-import { breakpoints } from '@/styles';
 
 const MOBILE_FILLS_PER_PAGE = 50;