fix system panel color background

* wip

* make system panel reflect user prefs

* clean up PnlChart

* testing changes removal

* clean up logo styling

* fix export of dark dots background

* remove comment

public/configs/potentialMarketExchangeConfig.csv

@@ -90,10 +90,10 @@ BNB,Binance,BNBUSDT,2315487.589,299938471.1,292.0261567,A,6,2,Binance Coin,USDT-
 BNB,Bybit,BNBUSDT,73840.12419,11584488.51,291.812684,A,6,2,Binance Coin,USDT-USD
 BNB,Gate,BNB_USDT,50000,100000,0,A,6,2,Binance Coin,USDT-USD
 BONK,Bybit,BONKUSDT,91223.30674,10108782.84,1.09E-05,A,6,2,Bonk Token,USDT-USD
-BONK,Mexc,BONK_USDT,880507.727,1996432.036,1.10E-05,A,6,2,Bonk Token,USDT-USD
+BONK,Mexc,BONK_USDT,880507.727,1996432.036,1.1E-05,A,6,2,Bonk Token,USDT-USD
 BONK,Binance,BONKUSDT,496236.8093,63520367.26,1.09E-05,A,6,2,Bonk Token,USDT-USD
 BONK,Okx,BONK-USDT,84194.41757,4939704.699,1.09E-05,A,6,2,Bonk Token,USDT-USD
-BONK,CoinbasePro,BONK-USD,291120.8766,24041618.38,1.10E-05,A,6,2,Bonk Token,
+BONK,CoinbasePro,BONK-USD,291120.8766,24041618.38,1.1E-05,A,6,2,Bonk Token,
 BONK,Kucoin,BONK-USDT,104413.0879,5795566.827,1.09E-05,A,6,2,Bonk Token,USDT-USD
 BTC,Kucoin,BTC-USDT,1385049.373,192647255.8,39920.8141,A,9,1,Bitcoin,USDT-USD
 BTC,Mexc,BTC_USDT,6055794.786,468890338.6,39929.87241,A,9,1,Bitcoin,USDT-USD
@@ -367,12 +367,11 @@ SUI,Binance,SUIUSDT,1262079.981,111516956.8,1.223930951,A,6,2,SuiNetwork,USDT-US
 SUI,CoinbasePro,SUI-USD,164063.7043,14862283.81,1.225266393,A,6,2,SuiNetwork,
 SUI,Bybit,SUIUSDT,212067.1354,19630489.94,1.225408738,A,6,2,SuiNetwork,USDT-USD
 SUI,Okx,SUI-USDT,613217.7334,54191478.11,1.223865903,A,6,2,SuiNetwork,USDT-USD
-SUSHI,Mexc,SUSHI_USDT,698897.3305,162827.6862,1.069891177,A,6,2,Sushi,USDT-USD
+SUSHI,Mexc,SUSHI_USDT,698897.3305,162827.6862,1.069891177,B,5,2,Sushi,USDT-USD
-SUSHI,Binance,SUSHIUSDT,314905.5164,8301205.3,1.070356721,A,6,2,Sushi,USDT-USD
+SUSHI,Binance,SUSHIUSDT,314905.5164,8301205.3,1.070356721,B,5,2,Sushi,USDT-USD
-SUSHI,Okx,SUSHI-USDT,140667.711,3610840.809,1.067487683,A,6,2,Sushi,USDT-USD
+SUSHI,Okx,SUSHI-USDT,140667.711,3610840.809,1.067487683,B,5,2,Sushi,USDT-USD
-SUSHI,Kraken,SUSHIUSD,60333.51362,206177.6733,1.075978241,A,6,2,Sushi,
+SUSHI,Kraken,SUSHIUSD,60333.51362,206177.6733,1.075978241,B,5,2,Sushi,
-SUSHI,CoinbasePro,SUSHI-USD,84615.09476,3085188.166,1.072066002,A,6,2,Sushi,
+SUSHI,CoinbasePro,SUSHI-USD,84615.09476,3085188.166,1.072066002,B,5,2,Sushi,
-SUSHI,Gate,SUSHI_USDT,50000,100000,0,A,6,2,Sushi,USDT-USD
 TIA,Bybit,TIAUSDT,187918.6442,14660427.8,15.52650347,A,7,2,Celestia,USDT-USD
 TIA,Binance,TIAUSDT,841382.0946,102103230.5,15.53648038,A,7,2,Celestia,USDT-USD
 TIA,CoinbasePro,TIA-USD,383069.4815,25165071.27,15.51546599,A,7,2,Celestia,
@@ -701,4 +700,10 @@ ZEC,Binance,ZECUSDT,107748.7569,6231023.464,22.06774527,C,2,2,Zcash,USDT-USD
 ZEN,Binance,ZENUSDT,121239.4862,5983871.133,7.622205603,C,1,2,Horizen,USDT-USD
 ZIL,Binance,ZILUSDT,78122.06511,5951041.305,0.01981457877,C,3,2,Zilliqa,USDT-USD
 ZIL,Mexc,ZIL_USDT,164288.1689,136450.7828,0.01983149916,C,3,2,Zilliqa,USDT-USD
-ZIL,Kucoin,ZIL-USDT,51622.45768,620061.2048,0.0198240821,C,3,2,Zilliqa,USDT-U
+ZIL,Kucoin,ZIL-USDT,51622.45768,620061.2048,0.0198240821,C,3,2,Zilliqa,USDT-USD
+JUP,Kucoin,JUP-USDT,72000,9000000,0.69,A,6,2,Jupiter,USDT-USD
+JUP,Okx,JUP-USDT,64000,29000000,0.69,A,6,2,Jupiter,USDT-USD
+JUP,Binance,JUPUSDT,500000,96000000,0.69,A,6,2,Jupiter,USDT-USD
+JUP,Bybit,JUPUSDT,100000,35000000,0.69,A,6,2,Jupiter,USDT-USD
+JUP,Gate,JUP_USDT,35000,900000,0.68,A,6,2,Jupiter,USDT-USD
+JUP,Mexc,JUP_USDT,20000,6000000,0.69,A,6,2,Jupiter,USDT-USD

public/configs/potentialMarketParameters.csv

@@ -35,6 +35,7 @@ HBAR,0.07127967284,7,2,Hedera Hashgraph,-2,-4,3,4000,-11,1000000,-3,1000000,1000
 ICP,11.47442186,7,2,Internet Computer,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
 INJ,31.78305093,7,2,Injective Protocol,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
 JTO,1.886208515,6,2,Jito,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+JUP,0.69,6,2,Jupiter,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
 KAVA,0.5751546332,6,2,Kava,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
 LDO,2.524539255,8,2,Lido DAO,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
 LINK,13.81655633,8,1,ChainLink,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9

src/components/ComboboxMenu.tsx

@@ -50,11 +50,11 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
       label={title}
       // value={highlightedCommand}
       // onValueChange={setHighlightedCommand}
-      filter={(value: string, search: string) => {
+      filter={(value: string, search: string) =>
         value.replace(/ /g, '').toLowerCase().includes(search.replace(/ /g, '').toLowerCase())
           ? 1
-          : 0;
+          : 0
-      }}
+      }
       className={className}
       $withStickyLayout={withStickyLayout}
     >

src/components/DropdownMenu.stories.tsx

@@ -6,29 +6,34 @@ import { StoryWrapper } from '.ladle/components';
 
 export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>> = (args) => {
   const exampleItems = [
+    {
+      value: '0',
+      label: 'Item 0',
+      onSelect: () => alert('Item 0 action'),
+    },
     {
       value: '1',
-      label: 'Item 1',
+      label: 'Item 1 (accent)',
       onSelect: () => alert('Item 1 action'),
+      highlightColor: 'accent',
     },
     {
       value: '2',
-      label: 'Item 2',
+      label: 'Item 2 (create)',
       onSelect: () => alert('Item 2 action'),
+      highlightColor: 'create',
     },
     {
       value: '3',
-      label: 'Item 3',
+      label: 'Item 3 (destroy)',
       onSelect: () => alert('Item 3 action'),
+      highlightColor: 'destroy',
     },
   ];
 
   return (
     <StoryWrapper>
-      <DropdownMenu
+      <DropdownMenu {...args} items={exampleItems}>
-        {...args}
-        items={exampleItems}
-      >
         <span>Menu</span>
       </DropdownMenu>
     </StoryWrapper>

src/components/DropdownMenu.tsx

@@ -13,7 +13,7 @@ export type DropdownMenuItem<T> = {
   label: React.ReactNode;
   onSelect?: () => void;
   separator?: boolean;
-  highlightColor?: 'accent' | 'positive' | 'negative';
+  highlightColor?: 'accent' | 'create' | 'destroy';
 };
 
 type StyleProps = {
@@ -82,7 +82,7 @@ Styled.Separator = styled(Separator)`
   margin: 0.25rem 1rem;
 `;
 
-Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'positive' | 'negative' }>`
+Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'create' | 'destroy' }>`
   ${popoverMixins.item}
   --item-font-size: var(--dropdownMenu-item-font-size);
   ${({ $highlightColor }) =>
@@ -90,10 +90,10 @@ Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'positive' | 'negative'
       ['accent']: `
         --item-highlighted-textColor: var(--color-accent);
       `,
-      ['positive']: `
+      ['create']: `
         --item-highlighted-textColor: var(--color-success);
       `,
-      ['negative']: `
+      ['destroy']: `
         --item-highlighted-textColor: var(--color-error);
       `,
     }[$highlightColor])}

src/hooks/useSubaccount.tsx

@@ -433,7 +433,8 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
         params,
         utils.getGovAddNewMarketTitle(params.ticker),
         utils.getGovAddNewMarketSummary(params.ticker, newMarketProposal.delayBlocks),
-        newMarketProposal.initialDepositAmount
+        // @ts-ignore - Need to change type in v4-client-js
+        BigInt(newMarketProposal.initialDepositAmount).toString()
       );
 
       return response;

src/views/dialogs/DisplaySettingsDialog.tsx

@@ -19,10 +19,8 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { Themes } from '@/styles/themes';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { NumberSign } from '@/constants/numbers';
 
 import { Dialog } from '@/components/Dialog';
-import { DiffArrow } from '@/components/DiffArrow';
 import { Icon, IconName } from '@/components/Icon';
 import { HorizontalSeparatorFiller } from '@/components/Separator';
 
@@ -41,6 +39,7 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
   const sectionHeader = (heading: string) => {
     return (
       <Styled.Header>
+        {heading}
         {heading}
         <HorizontalSeparatorFiller />
       </Styled.Header>
@@ -68,7 +67,12 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
             label: STRING_KEYS.LIGHT,
           },
         ].map(({ themeSetting, label }) => {
-          const theme = themeSetting === AppThemeSystemSetting.System ? currentTheme : themeSetting;
+          const theme =
+            themeSetting === AppThemeSystemSetting.System
+              ? globalThis.matchMedia('(prefers-color-scheme: dark)').matches
+                ? AppTheme.Dark
+                : AppTheme.Light
+              : themeSetting;
 
           const backgroundColor = Themes[theme][currentColorMode].layer2;
           const gridColor = Themes[theme][currentColorMode].borderDefault;
@@ -119,20 +123,18 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
             }}
           >
             <Styled.ColorPreferenceLabel>
-              <Styled.DiffArrowContainer>
+              <Styled.ArrowIconContainer>
-                <Styled.DiffArrow
+                <Styled.ArrowIcon
+                  iconName={IconName.Arrow}
                   direction="up"
-                  sign={
+                  color={colorMode === AppColorMode.GreenUp ? 'green' : 'red'}
-                    colorMode === AppColorMode.GreenUp ? NumberSign.Positive : NumberSign.Negative
-                  }
                 />
-                <Styled.DiffArrow
+                <Styled.ArrowIcon
+                  iconName={IconName.Arrow}
                   direction="down"
-                  sign={
+                  color={colorMode === AppColorMode.GreenUp ? 'red' : 'green'}
-                    colorMode === AppColorMode.GreenUp ? NumberSign.Negative : NumberSign.Positive
-                  }
                 />
-              </Styled.DiffArrowContainer>
+              </Styled.ArrowIconContainer>
               {stringGetter({ key: label })}
             </Styled.ColorPreferenceLabel>
             <Styled.DotIndicator $selected={currentColorMode === colorMode} />
@@ -261,21 +263,38 @@ Styled.ColorPreferenceLabel = styled.div`
   gap: 1ch;
 `;
 
-Styled.DiffArrowContainer = styled.div`
+Styled.ArrowIconContainer = styled.div`
   ${layoutMixins.column}
   gap: 0.5ch;
-`;
-
-Styled.DiffArrow = styled(DiffArrow)`
-  --diffArrow-color-positive: var(--color-success);
-  --diffArrow-color-negative: var(--color-error);
 
   svg {
-    width: 0.75em;
     height: 0.75em;
+    width: 0.75em;
   }
 `;
 
+Styled.ArrowIcon = styled(Icon)<{ direction: 'up' | 'down'; color: 'green' | 'red' }>`
+  ${({ direction }) =>
+    ({
+      ['up']: css`
+        transform: rotate(-90deg);
+      `,
+      ['down']: css`
+        transform: rotate(90deg);
+      `,
+    }[direction])}
+
+  ${({ color }) =>
+    ({
+      ['green']: css`
+        color: var(--color-success);
+      `,
+      ['red']: css`
+        color: var(--color-error);
+      `,
+    }[color])}
+`;
+
 const indicatorStyle = css`
   --indicator-size: 1.25rem;
   --icon-size: 0.5rem;

src/views/menus/AccountMenu.tsx

@@ -203,7 +203,7 @@ export const AccountMenu = () => {
                 value: 'MnemonicExport',
                 icon: <Icon iconName={IconName.ExportKeys} />,
                 label: <span>{stringGetter({ key: STRING_KEYS.EXPORT_SECRET_PHRASE })}</span>,
-                highlightColor: 'negative',
+                highlightColor: 'destroy',
                 onSelect: () => dispatch(openDialog({ type: DialogTypes.MnemonicExport })),
               },
             ].filter(isTruthy)
@@ -212,7 +212,7 @@ export const AccountMenu = () => {
           value: 'Disconnect',
           icon: <Icon iconName={IconName.BoxClose} />,
           label: stringGetter({ key: STRING_KEYS.DISCONNECT }),
-          highlightColor: 'negative',
+          highlightColor: 'destroy',
           onSelect: () => dispatch(openDialog({ type: DialogTypes.DisconnectWallet })),
         },
       ].filter(isTruthy)}