Merge branch 'refs/heads/main' into e2e-cleanup

.github/shared/build/action.yml

@@ -45,6 +45,7 @@ runs:
     - name: Build dist version
       shell: bash
       env:
+        NODE_OPTIONS: '--max_old_space_size=8192'
         BUILD_DEV_PREVIEW: ${{ inputs.BUILD_DEV_PREVIEW }}
         LACE_EXTENSION_KEY: ${{ inputs.LACE_EXTENSION_KEY }}
         POSTHOG_PRODUCTION_TOKEN_MAINNET: ${{ inputs.POSTHOG_PRODUCTION_TOKEN_MAINNET }}

.github/workflows/packages-staking.yml

@@ -45,4 +45,6 @@ jobs:
       - name: Run tests
         run: yarn workspace @lace/staking test:unit
       - name: Build Staking dist
+        env:
+          NODE_OPTIONS: '--max_old_space_size=8192'
         run: yarn workspace @lace/staking build

apps/browser-extension-wallet/src/hooks/useChainHistoryProvider.ts

@@ -2,6 +2,7 @@ import { getBaseUrlForChain } from '@src/utils/chain';
 import { useMemo } from 'react';
 import { chainHistoryHttpProvider } from '@cardano-sdk/cardano-services-client';
 import { logger } from '@lib/wallet-api-ui';
+import axiosFetchAdapter from '@vespaiach/axios-fetch-adapter';
 
 export type NetworkType = 'Mainnet' | 'Preprod' | 'Preview' | 'Sanchonet';
 
@@ -13,5 +14,8 @@ type UseChainHistoryProviderArgs = {
 export const useChainHistoryProvider = ({ chainName }: UseChainHistoryProviderArgs) => {
   const baseCardanoServicesUrl = getBaseUrlForChain(chainName);
 
-  return useMemo(() => chainHistoryHttpProvider({ baseUrl: baseCardanoServicesUrl, logger }), [baseCardanoServicesUrl]);
+  return useMemo(
+    () => chainHistoryHttpProvider({ adapter: axiosFetchAdapter, baseUrl: baseCardanoServicesUrl, logger }),
+    [baseCardanoServicesUrl]
+  );
 };

packages/staking/.eslintrc.cjs

@@ -37,6 +37,18 @@ module.exports = {
         groups: ['builtin', 'external', 'type', 'internal', 'parent', 'sibling', 'index'],
       },
     ],
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            importNames: ['sx', 'style', 'recipe', 'vars', 'LocalThemeProvider'],
+            message: "Please import from 'features/theme' or directly e.g. '@vanilla-extract/css'.",
+            name: '@lace/ui',
+          },
+        ],
+      },
+    ],
     'promise/avoid-new': 'off',
     'react/jsx-curly-brace-presence': 2,
     'react/jsx-handler-names': 'off',

packages/staking/.prettierignore

@@ -1,3 +1,4 @@
 dist
 build
 node_modules
+storybook-static

packages/staking/package.json

@@ -56,6 +56,8 @@
     "@lace/ui": "^0.1.0",
     "@radix-ui/react-slider": "^1.1.2",
     "@vanilla-extract/css": "^1.11.1",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "@vanilla-extract/sprinkles": "^1.5.1",
     "classnames": "^2.3.2",
     "i18next": "^22.5.1",
     "immer": "^10.0.2",
@@ -93,8 +95,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@tsconfig/create-react-app": "^1.0.3",
     "@vanilla-extract/esbuild-plugin": "^2.2.2",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "@vanilla-extract/vite-plugin": "^3.9.3",
+    "@vanilla-extract/vite-plugin": "^3.9.5",
     "@vitest/coverage-c8": "^0.31.0",
     "antd": "^4.24.10",
     "babel-loader": "^8.3.0",

packages/staking/src/features/BrowsePools/BrowsePools.css.ts

@@ -1,4 +1,4 @@
-import { sx } from '@lace/ui';
+import { sx } from 'features/theme';
 
 export const browsePools = sx({
   alignItems: 'stretch',

packages/staking/src/features/BrowsePools/BrowsePoolsHeader.css.ts

@@ -1,6 +1,5 @@
-import { style } from '@lace/ui';
-import { theme } from 'features/theme';
+import { sx } from 'features/theme';
 
-export const title = style({
-  color: theme.colors.$titleColor,
+export const title = sx({
+  color: '$titleColor',
 });

packages/staking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.css.ts

@@ -1,13 +1,17 @@
-import { style, sx } from '@lace/ui';
-import { theme } from 'features/theme';
+import { style } from '@vanilla-extract/css';
+import { sx } from 'features/theme';
 
-export const textBoxLeft = style({
-  borderBottomRightRadius: 0,
-  borderRightColor: theme.colors.$browsePoolsFilterInputRightBorderColor,
-  borderRightStyle: 'solid',
-  borderRightWidth: 2,
-  borderTopRightRadius: 0,
-});
+export const textBoxLeft = style([
+  sx({
+    borderRightColor: '$browsePoolsFilterInputRightBorderColor',
+  }),
+  {
+    borderBottomRightRadius: 0,
+    borderRightStyle: 'solid',
+    borderRightWidth: 2,
+    borderTopRightRadius: 0,
+  },
+]);
 
 export const textBoxRight = style({
   borderBottomLeftRadius: 0,

packages/staking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.stories.tsx

@@ -1,7 +1,8 @@
-import { Box, Cell, Flex, Grid, LocalThemeProvider, Section, ThemeColorScheme, Variants } from '@lace/ui';
+import { Box, Cell, Flex, Grid, Section, ThemeColorScheme, Variants } from '@lace/ui';
 import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/preview-api';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { LocalThemeProvider } from 'features/theme';
 import { useCallback, useState } from 'react';
 import type { StakePoolSortOptions } from '../types';
 import type { Meta, StoryObj } from '@storybook/react';

packages/staking/src/features/BrowsePools/PortfolioBar.css.ts

@@ -1,4 +1,5 @@
-import { style, sx } from '@lace/ui';
+import { style } from '@vanilla-extract/css';
+import { sx } from 'features/theme';
 import { theme } from '../theme';
 const minimumScreenSize = '668px';
 

packages/staking/src/features/BrowsePools/StakePoolCard/PoolMetric/PoolMetric.css.ts

@@ -1,8 +1,7 @@
-import { style, sx } from '@lace/ui';
-import { theme } from '../../../theme';
+import { sx } from 'features/theme';
 
-export const metric = style({
-  color: theme.colors.$poolCardMetricColor,
+export const metric = sx({
+  color: '$poolCardMetricColor',
 });
 
 export const icon = sx({

packages/staking/src/features/BrowsePools/StakePoolCard/SkatePoolCardProgressBar/StakePoolCardProgressBar.css.ts

@@ -1,21 +1,17 @@
-import { style, sx } from '@lace/ui';
+import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { theme } from '../../../theme';
+import { sx, theme } from 'features/theme';
 
 export const wrapper = sx({
   width: '$fill',
 });
 
-export const bar = style([
-  sx({
-    borderRadius: '$medium',
-    height: '$4',
-    width: '$fill',
-  }),
-  {
-    backgroundColor: theme.colors.$poolCardProgressBarBaseBackgroundColor,
-  },
-]);
+export const bar = sx({
+  backgroundColor: '$poolCardProgressBarBaseBackgroundColor',
+  borderRadius: '$medium',
+  height: '$4',
+  width: '$fill',
+});
 
 export const progress = recipe({
   base: style([
@@ -36,6 +32,6 @@ export const progress = recipe({
   },
 });
 
-export const progressValue = style({
-  color: theme.colors.$poolCardProgressBarValue,
+export const progressValue = sx({
+  color: '$poolCardProgressBarValue',
 });

packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCard.css.ts

@@ -1,5 +1,6 @@
-import { style, sx } from '@lace/ui';
+import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
+import { sx } from 'features/theme';
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 import { theme } from '../../theme';
 import { STAKE_POOL_CARD_HEIGHT } from './constants';
@@ -33,8 +34,8 @@ export const title = style([
   },
 ]);
 
-export const cardSelected = style({
-  borderColor: theme.colors.$poolCardSelectedBorderColor,
+export const cardSelected = sx({
+  borderColor: '$poolCardSelectedBorderColor',
 });
 
 export const skeleton = recipe({

packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCard.stories.tsx

@@ -1,6 +1,7 @@
-import { Box, Cell, Flex, Grid, LocalThemeProvider, Section, Text, ThemeColorScheme, Variants } from '@lace/ui';
-
+import { Box, Cell, Flex, Grid, Section, Text, ThemeColorScheme, Variants } from '@lace/ui';
 import { SortField } from 'features/BrowsePools';
+import { LocalThemeProvider } from 'features/theme';
+
 import type { Meta } from '@storybook/react';
 import { StakePoolCard, StakePoolCardProps } from './StakePoolCard';
 

packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCardSkeleton.stories.tsx

@@ -1,5 +1,6 @@
-import { Cell, Flex, Grid, LocalThemeProvider, Section, ThemeColorScheme, Variants } from '@lace/ui';
+import { Cell, Flex, Grid, Section, ThemeColorScheme, Variants } from '@lace/ui';
 
+import { LocalThemeProvider } from 'features/theme';
 import type { Meta } from '@storybook/react';
 import { StakePoolCardSkeleton } from './';
 

packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.css.ts

@@ -1,5 +1,5 @@
-import { style, sx } from '@lace/ui';
-import { theme } from 'features/theme';
+import { style } from '@vanilla-extract/css';
+import { sx } from 'features/theme';
 
 // TODO use new @lace/ui Grid when available: https://input-output.atlassian.net/browse/LW-9791
 export const grid = style([
@@ -23,7 +23,7 @@ export const grid = style([
 
 // TODO export common Separator component from the @lace/ui
 export const separator = sx({
-  background: '$side_drawer_separator_bgColor',
+  background: '$stakePoolGridSeparatorColor',
   height: '$1',
   marginBottom: '$28',
   marginTop: '$28',
@@ -36,6 +36,6 @@ export const body = style([
   },
 ]);
 
-export const selectedTitle = style({
-  color: theme.colors.$titleColor,
+export const selectedTitle = sx({
+  color: '$titleColor',
 });

packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolListCell.css.ts

@@ -1,6 +1,5 @@
-import { sx } from '@lace/ui';
 import { recipe } from '@vanilla-extract/recipes';
-import { theme } from 'features/theme';
+import { sx, theme } from 'features/theme';
 
 export const dot = recipe({
   base: [
@@ -12,9 +11,9 @@ export const dot = recipe({
   ],
   variants: {
     level: {
-      high: sx({ backgroundColor: '$data_orange' }),
-      medium: sx({ backgroundColor: '$data_green' }),
-      veryHigh: sx({ backgroundColor: '$data_pink' }),
+      high: sx({ backgroundColor: '$stakePoolListCellDotHighColor' }),
+      medium: sx({ backgroundColor: '$stakePoolListCellDotMediumColor' }),
+      veryHigh: sx({ backgroundColor: '$stakePoolListCellDotVeryHighColor' }),
     },
   },
 });

packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.css.ts

@@ -1,12 +1,16 @@
-import { style } from '@lace/ui';
-import { theme } from 'features/theme';
+import { style } from '@vanilla-extract/css';
+import { sx } from 'features/theme';
 
-export const selectedTitle = style({
-  color: theme.colors.$titleColor,
+export const selectedTitle = sx({
+  color: '$titleColor',
 });
 
 export const selectedPools = style([
+  sx({
+    borderBottomColor: '$selectedPoolsSectionBorderColor',
+  }),
   {
-    borderBottom: `1px solid ${theme.colors.$selectedPoolsSectionBorderColor}`,
+    borderBottomStyle: 'solid',
+    borderBottomWidth: 1,
   },
 ]);

packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolSkeletonCellRenderer.css.ts

@@ -1,19 +1,13 @@
-import { style, sx } from '@lace/ui';
+import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { theme } from 'features/theme';
+import { sx } from 'features/theme';
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 
 export const cellPlaceholder = recipe({
-  base: [
-    style([
-      sx({
-        borderRadius: '$medium',
-      }),
-      {
-        background: theme.colors.$stakePoolCellPlaceholder,
-      },
-    ]),
-  ],
+  base: sx({
+    background: '$stakePoolCellPlaceholder',
+    borderRadius: '$medium',
+  }),
   variants: {
     fade: {
       0: style({ opacity: '0.7' }),

packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolsListRowSkeleton.css.ts

@@ -1,21 +1,21 @@
-import { style, sx, vars } from '@lace/ui';
+import { style } from '@vanilla-extract/css';
+import { sx } from 'features/theme';
+
+export const selectableRow = style({});
 
 export const row = style([
-  {
+  sx({
     alignItems: 'center',
     display: 'grid',
-    flex: '1',
-    gap: vars.spacing.$10,
-    gridTemplateColumns: 'repeat(auto-fit, minmax(0px, 1fr))',
-    height: vars.spacing.$44,
-    minHeight: vars.spacing.$44,
-  },
-]);
-
-export const selectable = style([
+    gap: '$10',
+    height: '$44',
+    minHeight: '$44',
+  }),
   {
+    flex: 1,
+    gridTemplateColumns: 'repeat(auto-fit, minmax(0px, 1fr))',
     selectors: {
-      [`&${row}`]: {
+      [`${selectableRow}.&`]: {
         gridTemplateColumns: '28px repeat(auto-fit, minmax(0px, 1fr))',
       },
     },
@@ -28,7 +28,7 @@ export const cell = style([
   }),
   {
     selectors: {
-      [`${selectable} &:first-child`]: {
+      [`${selectableRow} &:first-child`]: {
         justifyContent: 'flex-end',
         padding: 0,
       },

packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolsListRowSkeleton.tsx

@@ -19,7 +19,7 @@ export const StakePoolsListRowSkeleton = <E extends string>({
   <div
     data-testid="stake-pool-list-row-skeleton"
     className={cn(styles.row, {
-      [styles.selectable]: withSelection,
+      [styles.selectableRow]: withSelection,
     })}
   >
     {withSelection && <Box />}

packages/staking/src/features/BrowsePools/StakePoolsSearchEmpty.css.ts

@@ -1,18 +1,17 @@
-import { style, sx, vars } from '@lace/ui';
+import { style } from '@vanilla-extract/css';
+import { sx } from 'features/theme';
 
-export const icon = style([
-  {
-    fontSize: vars.spacing.$112,
-  },
-]);
+export const icon = style({
+  fontSize: 112,
+});
 
 export const text = style([
   sx({
-    color: '$text_secondary',
+    color: '$browsePoolsSearchEmptyTextColor',
     lineHeight: '$32',
   }),
   {
-    marginTop: `-${vars.spacing.$6}`,
+    marginTop: -6,
     textAlign: 'center',
   },
 ]);