add faucet url

* add collapsible table

* update to add a TR inside table instead

.ladle/components.tsx

@@ -5,35 +5,29 @@ import styled from 'styled-components';
 
 import { store } from '@/state/_store';
 
-import { GlobalStyle } from '@/styles/globalStyle';
-
 import { SelectMenu, SelectItem } from '@/components/SelectMenu';
 
-import { AppThemeProvider } from '@/hooks/useAppTheme';
-
-import { AppTheme, setAppTheme } from '@/state/configs';
 import { setLocaleLoaded } from '@/state/localization';
 
 import '@/index.css';
 import './ladle.css';
 
 export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [theme, setTheme] = useState(AppTheme.Classic);
+  const [theme, setTheme] = useState('Default theme');
 
   useEffect(() => {
-    store.dispatch(setAppTheme(theme));
     switch (theme) {
-      case AppTheme.Dark: {
+      case 'Dark theme': {
         document?.documentElement?.classList.remove('theme-light');
         document?.documentElement?.classList.add('theme-dark');
         break;
       }
-      case AppTheme.Light: {
+      case 'Light theme': {
         document?.documentElement?.classList.remove('theme-dark');
         document?.documentElement?.classList.add('theme-light');
         break;
       }
-      case AppTheme.Classic: {
+      default: {
         document?.documentElement?.classList.remove('theme-dark', 'theme-light');
         break;
       }
@@ -54,15 +48,15 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
         >
           {[
             {
-              value: AppTheme.Classic,
+              value: 'Default theme',
               label: 'Default theme',
             },
             {
-              value: AppTheme.Dark,
+              value: 'Dark theme',
               label: 'Dark theme',
             },
             {
-              value: AppTheme.Light,
+              value: 'Light theme',
               label: 'Light theme',
             },
           ].map(({ value, label }) => (
@@ -75,11 +69,8 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
         </SelectMenu>
       </StoryHeader>
       <hr />
-      <AppThemeProvider>
-        <GlobalStyle />
-        <StoryContent>{children}</StoryContent>
-      </AppThemeProvider>
-      </Provider>
+      <StoryContent>{children}</StoryContent>
+    </Provider>
   );
 };
 

public/configs/env.json

@@ -215,10 +215,11 @@
                }
             ],
             "validators": [
-               "http://validator.v4dev4.dydx.exchange"
+               "https://validator.v4dev4.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
+            "faucet": "https://faucet.v4dev4.dydx.exchange"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -473,7 +474,7 @@
          "apps": {
             "ios": {
                "minimalVersion": "1.0",
-               "build":40000,
+               "build": 40000,
                "url": "https://apps.apple.com/app/dydx/id1564787350"
             }
          }
@@ -1156,4 +1157,4 @@
          }
       }
    }
-}
+}

src/App.tsx

@@ -16,7 +16,6 @@ import {
 } from '@/hooks';
 import { DydxProvider } from '@/hooks/useDydxClient';
 import { AccountsProvider } from '@/hooks/useAccounts';
-import { AppThemeProvider } from '@/hooks/useAppTheme';
 import { DialogAreaProvider, useDialogArea } from '@/hooks/useDialogArea';
 import { LocaleProvider } from '@/hooks/useLocaleSeparators';
 import { NotificationsProvider } from '@/hooks/useNotifications';
@@ -36,7 +35,6 @@ import { GlobalCommandDialog } from '@/views/dialogs/GlobalCommandDialog';
 import { config } from '@/lib/wagmi';
 
 import { breakpoints } from '@/styles';
-import { GlobalStyle } from '@/styles/globalStyle';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { LoadingSpace } from './components/Loading/LoadingSpinner';
 
@@ -68,52 +66,49 @@ const Content = () => {
   const { chainTokenLabel } = useTokenConfigs();
 
   return (
-    <>
-      <GlobalStyle />
-      <Styled.Content isShowingHeader={isShowingHeader} isShowingFooter={isShowingFooter}>
-        {isNotTablet && <HeaderDesktop />}
+    <Styled.Content isShowingHeader={isShowingHeader} isShowingFooter={isShowingFooter}>
+      {isNotTablet && <HeaderDesktop />}
 
-        <Styled.Main>
-          <Suspense fallback={<LoadingSpace id="main" />}>
-            <Routes>
-              <Route path={AppRoute.Trade}>
-                <Route path=":market" element={<TradePage />} />
-                <Route path={AppRoute.Trade} element={<TradePage />} />
-              </Route>
+      <Styled.Main>
+        <Suspense fallback={<LoadingSpace id="main" />}>
+          <Routes>
+            <Route path={AppRoute.Trade}>
+              <Route path=":market" element={<TradePage />} />
+              <Route path={AppRoute.Trade} element={<TradePage />} />
+            </Route>
 
-              <Route path={AppRoute.Markets} element={<MarketsPage />} />
-              <Route path={`/${chainTokenLabel}`} element={<RewardsPage />} />
-              {isTablet && (
-                <>
-                  <Route path={AppRoute.Alerts} element={<AlertsPage />} />
-                  <Route path={AppRoute.Profile} element={<ProfilePage />} />
-                  <Route path={`${AppRoute.Settings}/*`} element={<SettingsPage />} />
-                </>
-              )}
+            <Route path={AppRoute.Markets} element={<MarketsPage />} />
+            <Route path={`/${chainTokenLabel}`} element={<RewardsPage />} />
+            {isTablet && (
+              <>
+                <Route path={AppRoute.Alerts} element={<AlertsPage />} />
+                <Route path={AppRoute.Profile} element={<ProfilePage />} />
+                <Route path={`${AppRoute.Settings}/*`} element={<SettingsPage />} />
+              </>
+            )}
 
-              <Route element={<GuardedMobileRoute />}>
-                <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
-              </Route>
+            <Route element={<GuardedMobileRoute />}>
+              <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
+            </Route>
 
-              <Route path={AppRoute.Terms} element={<TermsOfUsePage />} />
-              <Route path={AppRoute.Privacy} element={<PrivacyPolicyPage />} />
+            <Route path={AppRoute.Terms} element={<TermsOfUsePage />} />
+            <Route path={AppRoute.Privacy} element={<PrivacyPolicyPage />} />
 
-              <Route path="*" element={<Navigate to={DEFAULT_TRADE_ROUTE} replace />} />
-            </Routes>
-          </Suspense>
-        </Styled.Main>
+            <Route path="*" element={<Navigate to={DEFAULT_TRADE_ROUTE} replace />} />
+          </Routes>
+        </Suspense>
+      </Styled.Main>
 
-        {isTablet ? <FooterMobile /> : <FooterDesktop />}
+      {isTablet ? <FooterMobile /> : <FooterDesktop />}
 
-        <Styled.NotificationsToastArea />
+      <Styled.NotificationsToastArea />
 
-        <Styled.DialogArea ref={setDialogArea}>
-          <DialogManager />
-        </Styled.DialogArea>
+      <Styled.DialogArea ref={setDialogArea}>
+        <DialogManager />
+      </Styled.DialogArea>
 
-        <GlobalCommandDialog />
-      </Styled.Content>
-    </>
+      <GlobalCommandDialog />
+    </Styled.Content>
   );
 };
 
@@ -136,7 +131,6 @@ const providers = [
   wrapProvider(LocalNotificationsProvider),
   wrapProvider(NotificationsProvider),
   wrapProvider(DialogAreaProvider),
-  wrapProvider(AppThemeProvider),
 ];
 
 const App = () => {

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/MarginUsageRing.tsx

@@ -1,11 +1,11 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { RiskLevels } from '@/constants/abacus';
+import { UsageColorFromRiskLevel } from '@/styles/colors';
 
 import { Ring } from '@/components/Ring';
 
 import { abacusHelper } from '@/lib/abacus';
-import { UsageColorFromRiskLevel } from '@/lib/styles';
 
 type ElementProps = {
   value: number;

src/components/Switch.tsx

@@ -47,7 +47,7 @@ Styled.Root = styled(Root)`
   --switch-thumb-backgroundColor: var(--color-layer-6);
 
   --switch-active-backgroundColor: var(--color-accent);
-  --switch-active-thumb-backgroundColor: ${({ theme }) => theme.switchThumbActiveBackground};
+  --switch-active-thumb-backgroundColor: var(--color-white);
 
   position: relative;
   width: var(--switch-width);

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/components/UsageBars.tsx

@@ -2,9 +2,9 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { type RiskLevels } from '@/constants/abacus';
 
-import { abacusHelper } from '@/lib/abacus';
-import { UsageColorFromRiskLevel } from '@/lib/styles';
+import { UsageColorFromRiskLevel } from '@/styles/colors';
 
+import { abacusHelper } from '@/lib/abacus';
 type ElementProps = {
   value: number;
 };

src/components/WithTooltip.tsx

@@ -110,7 +110,12 @@ Styled.Abbr = styled.abbr`
 
 Styled.Content = styled(Content)`
   --tooltip-backgroundColor: var(--color-layer-4);
-  --tooltip-backgroundColor: ${({ theme }) => theme.tooltipBackground};
+  --tooltip-backgroundColor: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness) + 4%),
+    0.66
+  );
 
   ${popoverMixins.popover}
   --popover-backgroundColor: var(--tooltip-backgroundColor);

src/components/visx/TooltipContent.tsx

@@ -27,7 +27,12 @@ Styled.TooltipContent = styled.aside<{ accentColor?: string }>`
 
   ${popoverMixins.popover}
   --popover-radius: 0.5rem;
-  --popover-background-color: ${({ theme }) => theme.popoverBackground};
+  --popover-background-color: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness)),
+    0.9
+  );
   --popover-backdrop-filter: saturate(120%) blur(12px);
 
   display: grid;

src/constants/styles/base.ts

@@ -1,70 +0,0 @@
-export enum ColorToken {
-  Black = '#000000',
-  White = '#FFFFFF',
-
-  LightGray0 = '#FAFAFA',
-  LightGray1 = '#F7F8FA',
-  LightGray2 = '#FAFAFD',
-  LightGray3 = '#F5F5F5',
-  LightGray4 = '#EDF0F2',
-  LightGray5 = '#EDEDED',
-  LightGray6 = '#E9ECEE',
-  LightGray7 = '#E6E6E6',
-  LightGray8 = '#DBDBDB',
-  LightGray9 = '#D5DADF',
-  LightGray10 = '#D1D9E0',
-
-  MediumGray0 = '#CACACE',
-  MediumGray1 = '#C2CBD3',
-
-  DarkGray0 = '#888891',
-  DarkGray1 = '#737373',
-  DarkGray2 = '#56565C',
-  DarkGray3 = '#4B4B4B',
-  DarkGray4 = '#494950',
-  DarkGray5 = '#3B3B3F',
-  DarkGray6 = '#303033',
-  DarkGray7 = '#313135',
-  DarkGray8 = '#292929',
-  DarkGray9 = '#23232F',
-  DarkGray10 = '#212124',
-  DarkGray11 = '#18181B',
-  DarkGray12 = '#181818',
-  DarkGray13 = '#0C0C0D',
-
-  GrayBlue0 = '#464659',
-  GrayBlue1 = '#38384D',
-  GrayBlue2 = '#303045',
-  GrayBlue3 = '#29293D',
-  GrayBlue4 = '#212131',
-  GrayBlue5 = '#181825',
-  GrayBlue6 = '#101018',
-  GrayBlue7 = '#08080C',
-
-  GrayPurple0 = '#DFDADF',
-  GrayPurple1 = '#C8C7D8',
-  GrayPurple2 = '#807E98',
-
-  Purple0 = '#7774FF',
-  Purple1 = '#6966FF',
-
-  Green0 = '#1AFFB9',
-  Green1 = '#3ED9A4',
-  Green2 = '#2CCC98',
-  Green3 = '#3EB68A',
-
-  Yellow0 = '#FFCC48',
-  Yellow1 = '#FFB647',
-
-  Red0 = '#FF5C5C',
-  Red1 = '#E76565',
-  Red2 = '#E45555',
-}
-
-/** Maps opacity to corresponding hex value */
-export enum OpacityToken {
-  Opacity16 = '29',
-  Opacity20 = '33',
-  Opacity66 = 'A8',
-  Opacity90 = 'E6',
-}

src/constants/styles/colors.ts

@@ -1,77 +0,0 @@
-export type ThemeColors = LayerColors &
-  BorderColors &
-  TextColors &
-  GradientColors &
-  AccentColors &
-  StatusColors &
-  DirectionalColors &
-  RiskColors &
-  IconColors &
-  ComponentColors;
-
-type LayerColors = {
-  layer0: string;
-  layer1: string;
-  layer2: string;
-  layer3: string;
-  layer4: string;
-  layer5: string;
-  layer6: string;
-  layer7: string;
-};
-
-type BorderColors = {
-  borderDefault: string;
-  borderDestructive: string;
-  borderButton: string;
-};
-
-type TextColors = {
-  textPrimary: string;
-  textSecondary: string;
-  textTertiary: string;
-};
-
-type GradientColors = {
-  gradientBase0: string;
-  gradientBase1: string;
-};
-
-type AccentColors = {
-  accent: string;
-  accentFaded: string;
-  favorite: string;
-};
-
-type StatusColors = {
-  success: string;
-  warning: string;
-  error: string;
-};
-
-type DirectionalColors = {
-  positive: string;
-  negative: string;
-  positiveFaded: string;
-  negativeFaded: string;
-};
-
-type RiskColors = {
-  riskLow: string;
-  riskMedium: string;
-  riskHigh: string;
-};
-
-type IconColors = {
-  logoFill: string;
-  profileYellow: string;
-  profileRed: string;
-};
-
-type ComponentColors = {
-  inputBackground: string;
-  popoverBackground: string;
-  switchThumbActiveBackground: string;
-  toggleBackground: string;
-  tooltipBackground: string;
-};

src/hooks/tradingView/useTradingViewTheme.ts

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import type { IChartingLibraryWidget, ThemeName } from 'public/tradingview/charting_library';
 
 import { AppTheme } from '@/state/configs';
+
 import { getAppTheme } from '@/state/configsSelectors';
 
 import { getWidgetOverrides } from '@/lib/tradingView/utils';
@@ -28,7 +29,7 @@ export const useTradingViewTheme = ({
   tvWidget: (IChartingLibraryWidget & { _id?: string; _ready?: boolean }) | null;
   isWidgetReady?: boolean;
 }) => {
-  const appTheme: AppTheme = useSelector(getAppTheme);
+  const appTheme = useSelector(getAppTheme);
 
   useEffect(() => {
     if (tvWidget && isWidgetReady) {

src/hooks/useAppTheme.tsx

@@ -1,16 +0,0 @@
-import { useSelector } from 'react-redux';
-import { ThemeProvider } from 'styled-components';
-
-import { AppTheme } from '@/state/configs';
-import { getAppTheme } from '@/state/configsSelectors';
-
-import { Themes } from '@/styles/themes';
-
-export const AppThemeProvider = ({ ...props }) => {
-    return <ThemeProvider theme={useAppThemeContext()} {...props} />
-};
-
-export const useAppThemeContext = () => {
-    const theme: AppTheme = useSelector(getAppTheme);
-    return Themes[theme];
-}

src/hooks/useWalletConnection.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
+import { EvmDerivedAddresses } from '@/constants/account';
 import { LocalStorageKey } from '@/constants/localStorage';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
@@ -104,11 +105,17 @@ export const useWalletConnection = () => {
     [walletConnectConfig, walletType, walletConnectionType]
   );
 
-  const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector })
+  const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector });
   const { suggestAndConnect: connectGraz } = useConnectGraz();
+  const [evmDerivedAddresses] = useLocalStorage({
+    key: LocalStorageKey.EvmDerivedAddresses,
+    defaultValue: {} as EvmDerivedAddresses,
+  });
 
   const connectWallet = useCallback(
-    async ({ walletType }: { walletType: WalletType }) => {
+    async ({ walletType, forceConnect }: { walletType?: WalletType; forceConnect?: boolean }) => {
+      if (!walletType) return { walletType, walletConnectionType };
+
       const walletConnection = getWalletConnection({ walletType });
 
       try {
@@ -132,7 +139,11 @@ export const useWalletConnection = () => {
             });
           }
         } else {
-          if (!isConnectedWagmi) {
+          const isAccountConnected = Boolean(
+            evmAddress && evmDerivedAddresses[evmAddress]?.encryptedSignature
+          );
+          // if account connected (via remember me), do not show wagmi popup until forceConnect
+          if (!isConnectedWagmi && (forceConnect || !isAccountConnected)) {
             await connectWagmi({
               connector: resolveWagmiConnector({
                 walletType,
@@ -228,6 +239,12 @@ export const useWalletConnection = () => {
     evmAddressWagmi,
     signerWagmi,
     publicClientWagmi,
+    isConnectedWagmi,
+    connectWallet: () =>
+      connectWallet({
+        walletType: selectedWalletType,
+        forceConnect: true,
+      }),
 
     // Wallet connection (Cosmos)
     dydxAddress,

src/icons/logo-short.tsx

@@ -1,52 +1,45 @@
-import { useAppThemeContext } from '@/hooks/useAppTheme';
-
-const LogoShortIcon: React.FC<{ id?: string }> = ({ id }: { id?: string }) => {
-  const theme = useAppThemeContext();
-  const fill = theme.logoFill;
-
-  return (
-    <svg
-      width="135"
-      height="145"
-      viewBox="0 0 135 145"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M100.986 0L0 144.988H31.0048L132.514 0H100.986Z" fill={fill} />
-      <path
-        d="M34.2346 0L63.9475 42.7232L48.4451 66.0268L2.58386 0H34.2346Z"
-        fill={`url(#${id ? `${id}_logo_gradient_0` : 'paint0_linear'})`}
-      />
-      <path
-        d="M103.995 145L71.0526 97.7455L86.555 75.0893L135 145H103.995Z"
-        fill={`url(#${id ? `${id}_logo_gradient_1` : 'paint1_linear'})`}
-      />
-      <defs>
-        <linearGradient
-          id={id ? `${id}_logo_gradient_0` : 'paint0_linear'}
-          x1="27.1293"
-          y1="9.0625"
-          x2="69.773"
-          y2="60.4324"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor={fill} />
-          <stop offset="1" stopColor={fill} stopOpacity="0.55" />
-        </linearGradient>
-        <linearGradient
-          id={id ? `${id}_logo_gradient_1` : 'paint1_linear'}
-          x1="111.1"
-          y1="133.996"
-          x2="58.6959"
-          y2="63.4999"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#6966FF" />
-          <stop offset="1" stopColor="#6966FF" stopOpacity="0.36" />
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-};
+const LogoShortIcon: React.FC<{ id?: string }> = ({ id }: { id?: string }) => (
+  <svg
+    width="135"
+    height="145"
+    viewBox="0 0 135 145"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M100.986 0L0 144.988H31.0048L132.514 0H100.986Z" fill="white" />
+    <path
+      d="M34.2346 0L63.9475 42.7232L48.4451 66.0268L2.58386 0H34.2346Z"
+      fill={`url(#${id ? `${id}_logo_gradient_0` : 'paint0_linear'})`}
+    />
+    <path
+      d="M103.995 145L71.0526 97.7455L86.555 75.0893L135 145H103.995Z"
+      fill={`url(#${id ? `${id}_logo_gradient_1` : 'paint1_linear'})`}
+    />
+    <defs>
+      <linearGradient
+        id={id ? `${id}_logo_gradient_0` : 'paint0_linear'}
+        x1="27.1293"
+        y1="9.0625"
+        x2="69.773"
+        y2="60.4324"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset="1" stopColor="white" stopOpacity="0.55" />
+      </linearGradient>
+      <linearGradient
+        id={id ? `${id}_logo_gradient_1` : 'paint1_linear'}
+        x1="111.1"
+        y1="133.996"
+        x2="58.6959"
+        y2="63.4999"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#6966FF" />
+        <stop offset="1" stopColor="#6966FF" stopOpacity="0.36" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
 
 export default LogoShortIcon;

src/index.css

@@ -1,5 +1,6 @@
 @import 'styles/fonts.css';
 @import 'styles/text.css';
+@import 'styles/colors.css';
 @import 'styles/animations.css';
 
 :root {

src/lib/abacus/index.ts

@@ -171,6 +171,15 @@ class AbacusStateManager {
     this.setTransferValue({ value: null, field: TransferInputField.usdcSize });
   };
 
+  resetInputState = () => {
+    this.clearTransferInputValues();
+    this.setTransferValue({
+      field: TransferInputField.type,
+      value: null,
+    });
+    this.clearTradeInputValues();
+  };
+
   // ------ Set Data ------ //
   setStore = (store: RootStore) => {
     this.store = store;
@@ -262,11 +271,7 @@ class AbacusStateManager {
   ) => this.stateManager.cancelOrder(orderId, callback);
 
   cctpWithdraw = (
-    callback: (
-      success: boolean,
-      parsingError: Nullable<ParsingError>,
-      data: string,
-    ) => void
+    callback: (success: boolean, parsingError: Nullable<ParsingError>, data: string) => void
   ): void => this.stateManager.commitCCTPWithdraw(callback);
 
   // ------ Utils ------ //

src/lib/styles.ts

@@ -1,20 +0,0 @@
-import { css } from 'styled-components';
-
-import { type RiskLevels } from '@/constants/abacus';
-
-export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) =>
-  ({
-    low: css`
-      color: var(--color-risk-low);
-    `,
-    medium: css`
-      color: var(--color-risk-medium);
-    `,
-    high: css`
-      color: var(--color-risk-high);
-    `,
-  }[riskLevel.name]);
-
-export const generateFadedColorVariant = (colorHex: string, opacityHex: string) => {
-  return `${colorHex}${opacityHex}`;
-};

src/lib/tradingView/utils.ts

@@ -1,9 +1,11 @@
+import Color from 'color';
+import isEmpty from 'lodash/isEmpty';
+
 import { Candle, TradingViewBar, TradingViewSymbol } from '@/constants/candles';
+import { Colors } from '@/styles/colors';
 
 import { AppTheme } from '@/state/configs';
 
-import { Themes } from '@/styles/themes';
-
 export const mapCandle = ({
   startedAt,
   open,
@@ -47,42 +49,42 @@ export const getHistorySlice = ({
   return bars.filter(({ time }) => time >= fromMs);
 };
 
-export const getWidgetOverrides = (appTheme: AppTheme) => {
-  const theme = Themes[appTheme];
+export const getWidgetOverrides = (theme: AppTheme) => {
+  const colors = Colors[theme];
 
   return {
     overrides: {
-      'paneProperties.background': theme.layer2,
-      'paneProperties.horzGridProperties.color': theme.layer3,
-      'paneProperties.vertGridProperties.color': theme.layer3,
+      'paneProperties.background': Color(colors.layer2).hex(),
+      'paneProperties.horzGridProperties.color': Color(colors.layer3).hex(),
+      'paneProperties.vertGridProperties.color': Color(colors.layer3).hex(),
       'paneProperties.crossHairProperties.style': 1,
       'paneProperties.legendProperties.showBarChange': false,
       'paneProperties.backgroundType': 'solid',
 
       'mainSeriesProperties.style': 1,
-      'mainSeriesProperties.candleStyle.upColor': theme.positive,
-      'mainSeriesProperties.candleStyle.borderUpColor': theme.positive,
-      'mainSeriesProperties.candleStyle.wickUpColor': theme.positive,
-      'mainSeriesProperties.candleStyle.downColor': theme.negative,
-      'mainSeriesProperties.candleStyle.borderDownColor': theme.negative,
-      'mainSeriesProperties.candleStyle.wickDownColor': theme.negative,
+      'mainSeriesProperties.candleStyle.upColor': Color(colors.positive).hex(),
+      'mainSeriesProperties.candleStyle.borderUpColor': Color(colors.positive).hex(),
+      'mainSeriesProperties.candleStyle.wickUpColor': Color(colors.positive).hex(),
+      'mainSeriesProperties.candleStyle.downColor': Color(colors.negative).hex(),
+      'mainSeriesProperties.candleStyle.borderDownColor': Color(colors.negative).hex(),
+      'mainSeriesProperties.candleStyle.wickDownColor': Color(colors.negative).hex(),
       'mainSeriesProperties.statusViewStyle.symbolTextSource': 'ticker',
 
-      'scalesProperties.textColor': theme.textPrimary,
-      'scalesProperties.backgroundColor': theme.layer2,
-      'scalesProperties.lineColor': theme.layer3,
+      'scalesProperties.textColor': Color(colors.text1).hex(),
+      'scalesProperties.backgroundColor': Color(colors.layer2).hex(),
+      'scalesProperties.lineColor': Color(colors.layer3).hex(),
     },
     studies_overrides: {
-      'volume.volume.color.0': theme.negative,
-      'volume.volume.color.1': theme.positive,
+      'volume.volume.color.0': Color(colors.negative).hex(),
+      'volume.volume.color.1': Color(colors.positive).hex(),
       'volume.volume ma.visible': false,
-      'relative strength index.plot.color': theme.accent,
+      'relative strength index.plot.color': Color(colors.accent).hex(),
       'relative strength index.plot.linewidth': 1.5,
       'relative strength index.hlines background.color': '#134A9F',
     },
     loading_screen: {
-      backgroundColor: theme.layer2,
-      foregroundColor: theme.layer2,
+      backgroundColor: Color(colors.layer2).hex(),
+      foregroundColor: Color(colors.layer2).hex(),
     },
   };
 };

src/pages/Profile.tsx

@@ -259,8 +259,8 @@ Styled.ProfileIcon = styled.div`
   border-radius: 50%;
   background: linear-gradient(
     135deg,
-    ${({ theme }) => theme.profileYellow} 0%,
-    ${({ theme }) => theme.profileRed} 100%
+    var(--theme-classic-color-yellow) 0%,
+    var(--theme-classic-color-red) 100%
   );
 `;
 

src/styles/colors.css

@@ -0,0 +1,180 @@
+:root {
+  /* Parameters */
+
+  /*
+    --layer-base-hue
+    --layer-base-saturation
+    --layer-base-lightness
+
+    --color-text-0
+    --color-text-1
+    --color-text-2
+
+    --color-accent
+    --color-positive
+    --color-negative
+    --color-success
+    --color-warning
+    --color-error
+    --color-favorite
+  */
+
+  /* Computed: Layers */
+
+  --color-layer-0: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness) - 12%)
+  );
+
+  --color-layer-1: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness) - 8%)
+  );
+
+  --color-layer-2: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness) - 4%)
+  );
+
+  --color-layer-3: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    var(--layer-base-lightness)
+  );
+
+  --color-layer-4: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness) + 4%)
+  );
+
+  --color-layer-5: hsl(
+    var(--layer-base-hue),
+    calc(var(--layer-base-saturation) - 2%),
+    calc(var(--layer-base-lightness) + 7%)
+  );
+
+  --color-layer-6: hsl(
+    var(--layer-base-hue),
+    calc(var(--layer-base-saturation) - 4%),
+    calc(var(--layer-base-lightness) + 10%)
+  );
+
+  --color-layer-7: hsla(var(--layer-base-hue), 0%, 100%, 0.07);
+
+  --color-gradient-base-0: hsl(
+    var(--layer-base-hue),
+    calc(var(--layer-base-saturation) - 5%),
+    var(--layer-base-lightness)
+  );
+
+  --color-gradient-base-1: hsl(
+    var(--layer-base-hue),
+    calc(var(--layer-base-saturation) - 1%),
+    calc(var(--layer-base-lightness) + 7%)
+  );
+
+  /* Computed: Borders */
+
+  --color-border: var(--color-layer-5);
+  --color-border-white: hsla(0, 0%, 100%, 0.2);
+  --color-border-red: hsla(360, 73%, 61%, 0.2);
+}
+
+/* Theme: Classic (default) */
+:root {
+  /* Constants */
+
+  --theme-classic-hue-purple: 240;
+  --theme-classic-color-green: hsl(159, 67%, 39%);
+  --theme-classic-color-yellow: hsl(36, 100%, 64%);
+  --theme-classic-color-red: hsl(360, 73%, 61%);
+
+  /* Parameters */
+
+  --layer-base-hue: var(--theme-classic-hue-purple);
+  --layer-base-saturation: 20%;
+  --layer-base-lightness: 16%;
+
+  --color-text-0: hsl(245, 11%, 55%);
+  --color-text-1: hsl(244, 18%, 81%);
+  --color-text-2: hsl(240, 43%, 99%);
+
+  --color-accent: hsl(var(--theme-classic-hue-purple), 100%, 70%);
+  --color-positive: var(--theme-classic-color-green);
+  --color-negative: var(--theme-classic-color-red);
+  --color-success: var(--theme-classic-color-green);
+  --color-warning: var(--theme-classic-color-yellow);
+  --color-error: var(--theme-classic-color-red);
+  --color-favorite: var(--theme-classic-color-yellow);
+
+  --color-white: #fff;
+  --color-black: #000;
+
+  --color-gradient-positive: hsla(158, 49%, 48%, 0.16);
+  --color-gradient-negative: hsla(0, 100%, 66%, 0.16);
+  --color-accent-faded: hsla(var(--theme-classic-hue-purple), 100%, 70%, 0.16);
+
+  --color-risk-low: var(--theme-classic-color-green);
+  --color-risk-medium: var(--theme-classic-color-yellow);
+  --color-risk-high: var(--theme-classic-color-red);
+}
+
+/* Theme: Light */
+:root.theme-light {
+  /* Constants */
+
+  --theme-light-hue-purple: 234;
+  --theme-light-color-green: hsl(159, 67%, 39%);
+  --theme-light-color-yellow: hsl(36, 100%, 64%);
+  --theme-light-color-red: hsl(360, 73%, 61%);
+
+  /* Parameters */
+
+  --layer-base-hue: var(--theme-light-hue-purple);
+  --layer-base-saturation: 0%;
+  --layer-base-lightness: 86%;
+
+  --color-text-0: hsl(0, 0%, 55%);
+  --color-text-1: hsl(0, 0%, 40%);
+  --color-text-2: hsl(0, 0%, 5%);
+
+  --color-accent: hsl(var(--theme-light-hue-purple), 100%, 70%);
+  --color-positive: var(--theme-light-color-green);
+  --color-negative: var(--theme-light-color-red);
+  --color-success: var(--theme-light-color-green);
+  --color-warning: var(--theme-light-color-yellow);
+  --color-error: var(--theme-light-color-red);
+  --color-favorite: var(--theme-light-color-yellow);
+}
+
+/* Theme: Dark */
+:root.theme-dark {
+  /* Constants */
+
+  --theme-dark-hue-purple: 240;
+  --theme-dark-color-green: hsl(159, 67%, 39%);
+  --theme-dark-color-yellow: hsl(36, 100%, 64%);
+  --theme-dark-color-red: hsl(360, 73%, 61%);
+
+  /* Parameters */
+
+  --layer-base-hue: 0;
+  --layer-base-saturation: 0%;
+  --layer-base-lightness: 16%;
+
+  --color-text-0: hsl(0, 0%, 47%);
+  --color-text-1: hsl(0, 0%, 67%);
+  --color-text-2: hsl(0, 0%, 100%);
+
+  --color-accent: hsl(var(--theme-dark-hue-purple), 100%, 70%);
+  --color-positive: var(--theme-dark-color-green);
+  --color-negative: var(--theme-dark-color-red);
+  --color-success: var(--theme-dark-color-green);
+  --color-warning: var(--theme-dark-color-yellow);
+  --color-error: var(--theme-dark-color-red);
+  --color-favorite: var(--theme-dark-color-yellow);
+}

src/styles/colors.ts

@@ -0,0 +1,125 @@
+import { css } from 'styled-components';
+
+import { type RiskLevels } from '@/constants/abacus';
+
+import { AppTheme } from '@/state/configs';
+
+const BaseElements = {
+  [AppTheme.Classic]: {
+    hue: 240,
+    saturation: 20,
+    lightness: 16,
+  },
+  [AppTheme.Dark]: {
+    hue: 0,
+    saturation: 0,
+    lightness: 16,
+  },
+  [AppTheme.Light]: {
+    hue: 234,
+    saturation: 0,
+    lightness: 86,
+  },
+};
+
+const LayerColors = ({ theme }: { theme: AppTheme }) => {
+  const { hue, saturation, lightness } = BaseElements[theme];
+
+  return {
+    layer0: `hsl(${hue}, ${saturation}%, ${lightness - 12}%)`,
+    layer1: `hsl(${hue}, ${saturation}%, ${lightness - 8}%)`,
+    layer2: `hsl(${hue}, ${saturation}%, ${lightness - 4}%)`,
+    layer3: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+    layer4: `hsl(${hue}, ${saturation}%, ${lightness + 4}%)`,
+    layer5: `hsl(${hue}, ${saturation - 2}%, ${lightness + 7}%)`,
+    layer6: `hsl(${hue}, ${saturation - 4}%, ${lightness + 10}%)`,
+  };
+};
+
+const AccentColor = ({ theme }: { theme: AppTheme }) => {
+  const purpleHue = {
+    Classic: 240,
+    Dark: 240,
+    Light: 234,
+  }[theme];
+
+  return {
+    accent: `hsl(${purpleHue}, 100%, 70%)`,
+  };
+};
+
+export const Colors = {
+  [AppTheme.Classic]: {
+    ...LayerColors({ theme: AppTheme.Classic }),
+    text0: 'hsl(245, 11%, 55%)',
+    text1: 'hsl(244, 18%, 81%)',
+    text2: 'hsl(240, 43%, 99%)',
+
+    ...AccentColor({ theme: AppTheme.Classic }),
+    green: 'hsl(159, 67%, 39%)',
+    yellow: 'hsl(36, 100%, 64%)',
+    red: 'hsl(360, 73%, 61%)',
+
+    positive: 'hsl(159, 67%, 39%)',
+    negative: 'hsl(360, 73%, 61%)',
+
+    success: 'hsl(159, 67%, 39%)',
+    warning: 'hsl(36, 100%, 64%)',
+    error: 'hsl(360, 73%, 61%)',
+
+    favorite: 'hsl(36, 100%, 64%)',
+  },
+  [AppTheme.Dark]: {
+    ...LayerColors({ theme: AppTheme.Dark }),
+    text0: 'hsl(0, 0%, 47%)',
+    text1: 'hsl(0, 0%, 67%)',
+    text2: 'hsl(0, 0%, 100%)',
+
+    ...AccentColor({ theme: AppTheme.Dark }),
+    green: 'hsl(159, 67%, 39%)',
+    yellow: 'hsl(36, 100%, 64%)',
+    red: 'hsl(360, 73%, 61%)',
+
+    positive: 'hsl(159, 67%, 39%)',
+    negative: 'hsl(360, 73%, 61%)',
+
+    success: 'hsl(159, 67%, 39%)',
+    warning: 'hsl(36, 100%, 64%)',
+    error: 'hsl(360, 73%, 61%)',
+
+    favorite: 'hsl(36, 100%, 64%)',
+  },
+  [AppTheme.Light]: {
+    ...LayerColors({ theme: AppTheme.Light }),
+    text0: 'hsl(0, 0%, 55%)',
+    text1: 'hsl(0, 0%, 40%)',
+    text2: 'hsl(0, 0%, 5%)',
+
+    ...AccentColor({ theme: AppTheme.Light }),
+    green: 'hsl(159, 67%, 39%)',
+    yellow: 'hsl(36, 100%, 64%)',
+    red: 'hsl(360, 73%, 61%)',
+
+    positive: 'hsl(159, 67%, 39%)',
+    negative: 'hsl(360, 73%, 61%)',
+
+    success: 'hsl(159, 67%, 39%)',
+    warning: 'hsl(36, 100%, 64%)',
+    error: 'hsl(360, 73%, 61%)',
+
+    favorite: 'hsl(36, 100%, 64%)',
+  },
+};
+
+export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) =>
+  ({
+    low: css`
+      color: var(--color-risk-low);
+    `,
+    medium: css`
+      color: var(--color-risk-medium);
+    `,
+    high: css`
+      color: var(--color-risk-high);
+    `,
+  }[riskLevel.name]);

src/styles/formMixins.ts

@@ -21,7 +21,7 @@ export const formMixins: Record<
     --input-radius: 0.5em;
     --input-height: var(--form-input-height);
     --input-width: 100%;
-    --input-backgroundColor: ${({ theme }) => theme.inputBackground};
+    --input-backgroundColor: var(--color-layer-4);
     --input-borderColor: var(--color-layer-6);
 
     ${layoutMixins.row}

src/styles/globalStyle.ts

@@ -1,42 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const GlobalStyle = createGlobalStyle`
-  :root {
-    --color-layer-0: ${({ theme }) => theme.layer0};
-    --color-layer-1: ${({ theme }) => theme.layer1};
-    --color-layer-2: ${({ theme }) => theme.layer2};
-    --color-layer-3: ${({ theme }) => theme.layer3};
-    --color-layer-4: ${({ theme }) => theme.layer4};
-    --color-layer-5: ${({ theme }) => theme.layer5};
-    --color-layer-6: ${({ theme }) => theme.layer6};
-    --color-layer-7: ${({ theme }) => theme.layer7};
-
-    --color-border: ${({ theme }) => theme.borderDefault};
-    --color-border-white: ${({ theme }) => theme.borderButton};
-    --color-border-red: ${({ theme }) => theme.borderDestructive};
-
-    --color-text-0: ${({ theme }) => theme.textTertiary};
-    --color-text-1: ${({ theme }) => theme.textSecondary};
-    --color-text-2: ${({ theme }) => theme.textPrimary};
-
-    --color-gradient-base-0: ${({ theme }) => theme.gradientBase0};
-    --color-gradient-base-1: ${({ theme }) => theme.gradientBase1};
-
-    --color-accent: ${({ theme }) => theme.accent};
-    --color-accent-faded: ${({ theme }) => theme.accentFaded};
-    --color-favorite: ${({ theme }) => theme.favorite};
-
-    --color-success: ${({ theme }) => theme.success};
-    --color-warning: ${({ theme }) => theme.warning};
-    --color-error: ${({ theme }) => theme.error};
-
-    --color-positive: ${({ theme }) => theme.positive};
-    --color-negative: ${({ theme }) => theme.negative};
-    --color-gradient-positive: ${({ theme }) => theme.positiveFaded};
-    --color-gradient-negative: ${({ theme }) => theme.negativeFaded};
-
-    --color-risk-low: ${({ theme }) => theme.riskLow};
-    --color-risk-medium: ${({ theme }) => theme.riskMedium};
-    --color-risk-high: ${({ theme }) => theme.riskHigh};
-  }
-`;

src/styles/themes.ts

@@ -1,157 +0,0 @@
-import { AppTheme } from '@/state/configs';
-import { ThemeColors } from '@/constants/styles/colors';
-import { ColorToken, OpacityToken } from '@/constants/styles/base';
-import { generateFadedColorVariant } from '@/lib/styles';
-
-const ClassicTheme: ThemeColors = {
-  layer0: ColorToken.GrayBlue7,
-  layer1: ColorToken.GrayBlue6,
-  layer2: ColorToken.GrayBlue5,
-  layer3: ColorToken.GrayBlue4,
-  layer4: ColorToken.GrayBlue3,
-  layer5: ColorToken.GrayBlue2,
-  layer6: ColorToken.GrayBlue1,
-  layer7: ColorToken.GrayBlue0,
-
-  borderDefault: ColorToken.GrayBlue2,
-  borderDestructive: generateFadedColorVariant(ColorToken.Red2, OpacityToken.Opacity20),
-  borderButton: generateFadedColorVariant(ColorToken.White, OpacityToken.Opacity20),
-
-  textPrimary: ColorToken.LightGray2,
-  textSecondary: ColorToken.GrayPurple1,
-  textTertiary: ColorToken.GrayPurple2,
-
-  gradientBase0: ColorToken.DarkGray9,
-  gradientBase1: ColorToken.GrayBlue2,
-
-  accent: ColorToken.Purple1,
-  accentFaded: generateFadedColorVariant(ColorToken.Purple1, OpacityToken.Opacity16),
-  favorite: ColorToken.Yellow0,
-
-  success: ColorToken.Green1,
-  warning: ColorToken.Yellow0,
-  error: ColorToken.Red2,
-
-  positive: ColorToken.Green1,
-  negative: ColorToken.Red2,
-  positiveFaded: generateFadedColorVariant(ColorToken.Green1, OpacityToken.Opacity16),
-  negativeFaded: generateFadedColorVariant(ColorToken.Red2, OpacityToken.Opacity16),
-
-  riskLow: ColorToken.Green1,
-  riskMedium: ColorToken.Yellow0,
-  riskHigh: ColorToken.Red2,
-
-  logoFill: ColorToken.White,
-  profileYellow: ColorToken.Yellow1,
-  profileRed: ColorToken.Red2,
-
-  inputBackground: ColorToken.GrayBlue3,
-  popoverBackground: generateFadedColorVariant(ColorToken.GrayBlue4, OpacityToken.Opacity90),
-  switchThumbActiveBackground: ColorToken.White,
-  toggleBackground: ColorToken.GrayBlue3,
-  tooltipBackground: generateFadedColorVariant(ColorToken.GrayBlue3, OpacityToken.Opacity66),
-};
-
-const DarkTheme: ThemeColors = {
-  layer0: ColorToken.Black,
-  layer1: ColorToken.DarkGray11,
-  layer2: ColorToken.DarkGray13,
-  layer3: ColorToken.DarkGray10,
-  layer4: ColorToken.DarkGray6,
-  layer5: ColorToken.DarkGray5,
-  layer6: ColorToken.DarkGray4,
-  layer7: ColorToken.DarkGray2,
-
-  borderDefault: ColorToken.DarkGray4,
-  borderDestructive: generateFadedColorVariant(ColorToken.Red0, OpacityToken.Opacity20),
-  borderButton: generateFadedColorVariant(ColorToken.White, OpacityToken.Opacity20),
-
-  textPrimary: ColorToken.LightGray0,
-  textSecondary: ColorToken.MediumGray0,
-  textTertiary: ColorToken.DarkGray0,
-
-  gradientBase0: ColorToken.DarkGray8,
-  gradientBase1: ColorToken.DarkGray5,
-
-  accent: ColorToken.Purple0,
-  accentFaded: generateFadedColorVariant(ColorToken.Purple0, OpacityToken.Opacity16),
-  favorite: ColorToken.Yellow0,
-
-  success: ColorToken.Green0,
-  warning: ColorToken.Yellow0,
-  error: ColorToken.Red0,
-
-  positive: ColorToken.Green0,
-  negative: ColorToken.Red0,
-  positiveFaded: generateFadedColorVariant(ColorToken.Green0, OpacityToken.Opacity16),
-  negativeFaded: generateFadedColorVariant(ColorToken.Red0, OpacityToken.Opacity16),
-
-  riskLow: ColorToken.Green0,
-  riskMedium: ColorToken.Yellow0,
-  riskHigh: ColorToken.Red0,
-
-  logoFill: ColorToken.White,
-  profileYellow: ColorToken.Yellow1,
-  profileRed: ColorToken.Red2,
-
-  inputBackground: ColorToken.DarkGray6,
-  popoverBackground: generateFadedColorVariant(ColorToken.DarkGray8, OpacityToken.Opacity90),
-  switchThumbActiveBackground: ColorToken.White,
-  toggleBackground: ColorToken.DarkGray6,
-  tooltipBackground: generateFadedColorVariant(ColorToken.DarkGray6, OpacityToken.Opacity66),
-};
-
-const LightTheme: ThemeColors = {
-  layer0: ColorToken.White,
-  layer1: ColorToken.LightGray6,
-  layer2: ColorToken.White,
-  layer3: ColorToken.LightGray1,
-  layer4: ColorToken.White,
-  layer5: ColorToken.LightGray4,
-  layer6: ColorToken.LightGray9,
-  layer7: ColorToken.MediumGray1,
-
-  borderDefault: ColorToken.LightGray10,
-  borderDestructive: generateFadedColorVariant(ColorToken.Red1, OpacityToken.Opacity20),
-  borderButton: generateFadedColorVariant(ColorToken.Black, OpacityToken.Opacity20),
-
-  textPrimary: ColorToken.DarkGray12,
-  textSecondary: ColorToken.DarkGray3,
-  textTertiary: ColorToken.DarkGray1,
-
-  gradientBase0: ColorToken.LightGray8,
-  gradientBase1: ColorToken.LightGray5,
-
-  accent: ColorToken.Purple0,
-  accentFaded: generateFadedColorVariant(ColorToken.Purple0, OpacityToken.Opacity16),
-  favorite: ColorToken.Yellow0,
-
-  success: ColorToken.Green2,
-  warning: ColorToken.Yellow0,
-  error: ColorToken.Red1,
-
-  positive: ColorToken.Green2,
-  negative: ColorToken.Red1,
-  positiveFaded: generateFadedColorVariant(ColorToken.Green2, OpacityToken.Opacity16),
-  negativeFaded: generateFadedColorVariant(ColorToken.Red1, OpacityToken.Opacity16),
-
-  riskLow: ColorToken.Green2,
-  riskMedium: ColorToken.Yellow0,
-  riskHigh: ColorToken.Red1,
-
-  logoFill: ColorToken.Black,
-  profileYellow: ColorToken.Yellow1,
-  profileRed: ColorToken.Red2,
-
-  inputBackground: ColorToken.White,
-  popoverBackground: generateFadedColorVariant(ColorToken.LightGray8, OpacityToken.Opacity90),
-  switchThumbActiveBackground: ColorToken.White,
-  toggleBackground: ColorToken.LightGray4,
-  tooltipBackground: generateFadedColorVariant(ColorToken.LightGray7, OpacityToken.Opacity66),
-};
-
-export const Themes = {
-  [AppTheme.Classic]: ClassicTheme,
-  [AppTheme.Dark]: DarkTheme,
-  [AppTheme.Light]: LightTheme,
-};

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -72,6 +72,7 @@ export const GenerateKeys = ({
       if (message) {
         log('GenerateKeys/switchNetwork', error, { walletErrorType });
         setError(message);
+        throw error;
       }
     }
   };

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -17,6 +17,7 @@ import type { EvmAddress } from '@/constants/wallets';
 import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
 import { useAccountBalance, CHAIN_DEFAULT_TOKEN_ADDRESS } from '@/hooks/useAccountBalance';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
+import { useWalletConnection } from '@/hooks/useWalletConnection';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { formMixins } from '@/styles/formMixins';
@@ -120,11 +121,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     });
 
     return () => {
-      abacusStateManager.clearTransferInputValues();
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.type,
-        value: null,
-      });
+      abacusStateManager.resetInputState();
     };
   }, []);
 
@@ -368,6 +365,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     return <LoadingSpace id="DepositForm" />;
   }
 
+  const [requireUserActionInWallet, setRequireUserActionInWallet] = useState(false);
+
   return (
     <Styled.Form onSubmit={onSubmit}>
       <ChainSelectMenu selectedChain={chainIdStr || undefined} onSelectChain={onSelectChain} />
@@ -386,7 +385,11 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         />
       </Styled.WithDetailsReceipt>
       {errorMessage && <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>}
-
+      {requireUserActionInWallet && (
+        <AlertMessage type={AlertType.Warning}>
+          {stringGetter({ key: STRING_KEYS.CHECK_WALLET_FOR_REQUEST })}
+        </AlertMessage>
+      )}
       <Styled.Footer>
         <DepositButtonAndReceipt
           isDisabled={isDisabled}
@@ -395,6 +398,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
           setSlippage={onSetSlippage}
           slippage={slippage}
           sourceToken={sourceToken || undefined}
+          setRequireUserActionInWallet={setRequireUserActionInWallet}
+          setError={setError}
         />
       </Styled.Footer>
     </Styled.Form>

src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx

@@ -1,8 +1,7 @@
-import { type Dispatch, type ReactNode, type SetStateAction, useState, useMemo } from 'react';
+import { type Dispatch, type SetStateAction, useState, type ReactNode, useEffect } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 import type { RouteData } from '@0xsquid/sdk';
-import { formatUnits } from 'viem';
 
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
 
@@ -12,6 +11,7 @@ import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
 
 import { useStringGetter, useTokenConfigs } from '@/hooks';
 import { useMatchingEvmNetwork } from '@/hooks/useMatchingEvmNetwork';
+import { useWalletConnection } from '@/hooks/useWalletConnection';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -39,7 +39,8 @@ type ElementProps = {
   isLoading?: boolean;
 
   chainId?: string | number;
-  setError?: Dispatch<SetStateAction<Error | undefined>>;
+  setError?: Dispatch<SetStateAction<Error | null>>;
+  setRequireUserActionInWallet: (val: boolean) => void;
   slippage: number;
   slotError?: ReactNode;
   setSlippage: (slippage: number) => void;
@@ -57,6 +58,7 @@ export const DepositButtonAndReceipt = ({
   isDisabled,
   isLoading,
   slotError,
+  setRequireUserActionInWallet,
 }: ElementProps) => {
   const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
   const [isEditingSlippage, setIsEditingSlipapge] = useState(false);
@@ -64,6 +66,24 @@ export const DepositButtonAndReceipt = ({
 
   const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
 
+  const { connectWallet, isConnectedWagmi } = useWalletConnection();
+
+  const connectWagmi = async () => {
+    try {
+      setRequireUserActionInWallet(false);
+      await connectWallet();
+      setRequireUserActionInWallet(false);
+    } catch (e) {
+      setRequireUserActionInWallet(true);
+    }
+  };
+
+  useEffect(() => {
+    if (!isConnectedWagmi && canAccountTrade) {
+      connectWagmi();
+    }
+  }, [isConnectedWagmi, canAccountTrade]);
+
   const {
     matchNetwork: switchNetwork,
     isSwitchingNetwork,
@@ -80,7 +100,7 @@ export const DepositButtonAndReceipt = ({
     useSelector(getSubaccountBuyingPower, shallowEqual) || {};
 
   const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
-  const { usdcDecimals, usdcLabel } = useTokenConfigs();
+  const { usdcLabel } = useTokenConfigs();
 
   const feeSubitems: DetailsItem[] = [];
 
@@ -116,7 +136,9 @@ export const DepositButtonAndReceipt = ({
           {stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
         </span>
       ),
-      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />,
+      value: (
+        <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />
+      ),
       subitems: [
         {
           key: 'minimum-deposit-amount',
@@ -126,7 +148,11 @@ export const DepositButtonAndReceipt = ({
             </span>
           ),
           value: (
-            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmountMin} />
+            <Output
+              type={OutputType.Fiat}
+              fractionDigits={TOKEN_DECIMALS}
+              value={summary?.toAmountMin}
+            />
           ),
           tooltip: 'minimum-deposit-amount',
         },
@@ -253,6 +279,8 @@ export const DepositButtonAndReceipt = ({
     >
       {!canAccountTrade ? (
         <OnboardingTriggerButton size={ButtonSize.Base} />
+      ) : !isConnectedWagmi ? (
+        <Button action={ButtonAction.Primary} onClick={connectWallet} state={{ isLoading: true }} />
       ) : !isMatchingNetwork ? (
         <Button
           action={ButtonAction.Primary}

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -101,11 +101,7 @@ export const WithdrawForm = () => {
     });
 
     return () => {
-      abacusStateManager.clearTransferInputValues();
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.type,
-        value: null,
-      });
+      abacusStateManager.resetInputState();
     };
   }, []);
 

src/views/forms/TradeForm/TradeSideToggle.tsx

@@ -44,7 +44,6 @@ export const TradeSideToggle = memo(() => {
 const ToggleContainer = styled(ToggleGroup)<{ value: OrderSide }>`
   --toggle-radius: 0.5em;
   --toggle-color: var(--color-negative);
-  --toggle-background: ${({ theme }) => theme.toggleBackground};
 
   ${({ value }) =>
     value === OrderSide.BUY &&
@@ -53,7 +52,7 @@ const ToggleContainer = styled(ToggleGroup)<{ value: OrderSide }>`
     `}
 
   border-radius: var(--toggle-radius);
-  background-color: var(--toggle-background);
+  background-color: var(--color-layer-4);
   position: relative;
 
   > button {

src/views/forms/TransferForm.tsx

@@ -118,11 +118,7 @@ export const TransferForm = ({
     onChangeAsset(selectedAsset);
 
     return () => {
-      abacusStateManager.clearTransferInputValues();
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.type,
-        value: null,
-      });
+      abacusStateManager.resetInputState();
     };
   }, []);
 

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;