add new optimized market icons (#15)

* add new optimized market icons

src/components/AssetIcon.tsx

@@ -9,9 +9,13 @@ const assetIcons = {
   AAVE: '/currencies/aave.png',
   ADA: '/currencies/ada.png',
   ALGO: '/currencies/algo.png',
+  APE: '/currencies/ape.png',
+  APT: '/currencies/apt.png',
+  ARB: '/currencies/arb.png',
   ATOM: '/currencies/atom.png',
   AVAX: '/currencies/avax.png',
   BCH: '/currencies/bch.png',
+  BLUR: '/currencies/blur.png',
   BTC: '/currencies/btc.png',
   CELO: '/currencies/celo.png',
   COMP: '/currencies/comp.png',
@@ -26,14 +30,20 @@ const assetIcons = {
   ETH: '/currencies/eth.png',
   FIL: '/currencies/fil.png',
   ICP: '/currencies/icp.png',
+  LDO: '/currencies/ldo.png',
   LINK: '/currencies/link.png',
   LTC: '/currencies/ltc.png',
   MATIC: '/currencies/matic.png',
   MKR: '/currencies/mkr.png',
   NEAR: '/currencies/near.png',
+  OP: '/currencies/op.png',
+  PEPE: '/currencies/pepe.png',
   RUNE: '/currencies/rune.png',
+  SEI: '/currencies/sei.png',
+  SHIB: '/currencies/shib.png',
   SNX: '/currencies/snx.png',
   SOL: '/currencies/sol.png',
+  SUI: '/currencies/sui.png',
   SUSHI: '/currencies/sushi.png',
   TRX: '/currencies/trx.png',
   UMA: '/currencies/uma.png',
@@ -42,21 +52,27 @@ const assetIcons = {
   USDT: '/currencies/usdt.png',
   WBTC: '/currencies/wbtc.png',
   WETH: '/currencies/weth.png',
+  WLD: '/currencies/wld.png',
   XLM: '/currencies/xlm.png',
   XMR: '/currencies/xmr.png',
+  XRP: '/currencies/xrp.png',
   XTZ: '/currencies/xtz.png',
   YFI: '/currencies/yfi.png',
   ZEC: '/currencies/zec.png',
   ZRX: '/currencies/zrx.png',
 } as const;
 
+const isAssetSymbol = (symbol: Nullable<string>): symbol is AssetSymbol =>
+  symbol != null && assetIcons.hasOwnProperty(symbol);
+
 export const AssetIcon = ({
   symbol,
   className,
 }: {
-  symbol?: Nullable<AssetSymbol>;
+  symbol?: Nullable<string>;
   className?: string;
-}) => (symbol ? <Styled.Img src={assetIcons[symbol]} className={className} /> : null);
+}) =>
+  isAssetSymbol(symbol) ? <Styled.Img src={assetIcons[symbol]} className={className} /> : null;
 
 const Styled: Record<string, AnyStyledComponent> = {};
 

src/hooks/useSubaccount.tsx

@@ -181,6 +181,7 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
           recipient,
           DYDX_DENOM,
           Long.fromNumber(amount * QUANTUM_MULTIPLIER),
+          false,
           Method.BroadcastTxCommit
         ),
 

src/pages/trade/HorizontalPanel.tsx

@@ -6,7 +6,7 @@ import { STRING_KEYS } from '@/constants/localization';
 
 import { useBreakpoints, useStringGetter } from '@/hooks';
 
-import { AssetIcon, type AssetSymbol } from '@/components/AssetIcon';
+import { AssetIcon } from '@/components/AssetIcon';
 import { CollapsibleTabs } from '@/components/CollapsibleTabs';
 import { LoadingSpinner } from '@/components/Loading/LoadingSpinner';
 import { MobileTabs } from '@/components/Tabs';
@@ -217,7 +217,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
               value: PanelView.CurrentMarket,
               ...(currentMarketAssetId
                 ? {
-                    slotBefore: <Styled.AssetIcon symbol={currentMarketAssetId as AssetSymbol} />,
+                    slotBefore: <Styled.AssetIcon symbol={currentMarketAssetId} />,
                     label: currentMarketAssetId,
                   }
                 : { label: stringGetter({ key: STRING_KEYS.MARKET }) }),

src/views/dialogs/ClosePositionDialog.tsx

@@ -8,7 +8,7 @@ import { MobilePlaceOrderSteps } from '@/constants/trade';
 import { useBreakpoints, useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import { AssetIcon, AssetSymbol } from '@/components/AssetIcon';
+import { AssetIcon } from '@/components/AssetIcon';
 import { ClosePositionForm } from '@/views/forms/ClosePositionForm';
 import { Dialog, DialogPlacement } from '@/components/Dialog';
 import { GreenCheckCircle } from '@/components/GreenCheckCircle';
@@ -46,7 +46,7 @@ export const ClosePositionDialog = ({ setIsOpen }: ElementProps) => {
   } = {
     [MobilePlaceOrderSteps.EditOrder]: {
       title: <CloseOrderHeader />,
-      slotIcon: symbol ? <AssetIcon symbol={symbol as unknown as AssetSymbol} /> : undefined,
+      slotIcon: <AssetIcon symbol={symbol} />,
     },
     [MobilePlaceOrderSteps.PreviewOrder]: {
       title: (

src/views/dialogs/TradeDialog.tsx

@@ -9,7 +9,7 @@ import { TradeTypes, TRADE_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constan
 import { useBreakpoints, useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import { AssetIcon, AssetSymbol } from '@/components/AssetIcon';
+import { AssetIcon } from '@/components/AssetIcon';
 import { Dialog, DialogPlacement } from '@/components/Dialog';
 import { GreenCheckCircle } from '@/components/GreenCheckCircle';
 import { TradeForm } from '@/views/forms/TradeForm';
@@ -65,7 +65,7 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: ElementProps) =>
               items={[TradeTypes.LIMIT, TradeTypes.MARKET].map((tradeType: TradeTypes) => ({
                 value: tradeType,
                 label: stringGetter({ key: TRADE_TYPE_STRINGS[tradeType].tradeTypeKey }),
-                slotBefore: <AssetIcon symbol={symbol as unknown as AssetSymbol} />,
+                slotBefore: <AssetIcon symbol={symbol} />,
               }))}
               value={selectedTradeType}
               onValueChange={(tradeType: TradeTypes) =>

src/views/forms/TradeForm/PositionPreview.tsx

@@ -6,7 +6,7 @@ import { STRING_KEYS } from '@/constants/localization';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { useStringGetter } from '@/hooks';
 
-import { AssetIcon, type AssetSymbol } from '@/components/AssetIcon';
+import { AssetIcon } from '@/components/AssetIcon';
 
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
 import { getCurrentMarketData } from '@/state/perpetualsSelectors';
@@ -29,7 +29,7 @@ export const PositionPreview = ({ showNarrowVariation }: ElementProps) => {
   return (
     <Styled.PositionPreviewContainer>
       <Styled.YourPosition>
-        {!showNarrowVariation && <AssetIcon symbol={symbol as unknown as AssetSymbol} />}
+        {!showNarrowVariation && <AssetIcon symbol={symbol} />}
         <span>
           {stringGetter({
             key: STRING_KEYS.YOUR_MARKET_POSITION,

src/views/tables/FillsTable.tsx

@@ -14,7 +14,7 @@ import { useBreakpoints, useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { tradeViewMixins } from '@/styles/tradeViewMixins';
 
-import { AssetIcon, type AssetSymbol } from '@/components/AssetIcon';
+import { AssetIcon } from '@/components/AssetIcon';
 import { Icon, IconName } from '@/components/Icon';
 import { MarketTableCell } from '@/components/Table/MarketTableCell';
 import { OrderSideTag } from '@/components/OrderSideTag';
@@ -90,7 +90,7 @@ const getFillsTableColumnDef = ({
           key: STRING_KEYS.AMOUNT,
         })}`,
         renderCell: ({ resources, size, stepSizeDecimals, asset: { symbol } }) => (
-          <TableCell stacked slotLeft={<Styled.AssetIcon symbol={symbol as AssetSymbol} />}>
+          <TableCell stacked slotLeft={<Styled.AssetIcon symbol={symbol} />}>
             <span>
               {resources.typeStringKey ? stringGetter({ key: resources.typeStringKey }) : null}
             </span>

src/views/tables/OrdersTable.tsx

@@ -16,7 +16,7 @@ import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { tradeViewMixins } from '@/styles/tradeViewMixins';
 
-import { AssetIcon, AssetSymbol } from '@/components/AssetIcon';
+import { AssetIcon } from '@/components/AssetIcon';
 import { Icon, IconName } from '@/components/Icon';
 import { OrderSideTag } from '@/components/OrderSideTag';
 import { Output, OutputType } from '@/components/Output';
@@ -254,7 +254,7 @@ const getOrdersTableColumnDef = ({
                     value={createdAtMilliseconds}
                   />
                   <Styled.AssetIconWithStatus>
-                    <Styled.AssetIcon symbol={assetSymbol as AssetSymbol} />
+                    <Styled.AssetIcon symbol={assetSymbol} />
                     <Styled.StatusDot color={statusIconColor} />
                   </Styled.AssetIconWithStatus>
                 </>

src/views/tables/PositionsTable.tsx

@@ -23,7 +23,7 @@ import { getExistingOpenPositions } from '@/state/accountSelectors';
 import { getAssets } from '@/state/assetsSelectors';
 import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
 
-import { AssetIcon, AssetSymbol } from '@/components/AssetIcon';
+import { AssetIcon } from '@/components/AssetIcon';
 import { Icon, IconName } from '@/components/Icon';
 import { MarketTableCell } from '@/components/Table/MarketTableCell';
 import { Output, OutputType, ShowSign } from '@/components/Output';
@@ -72,7 +72,7 @@ const getPositionsTableColumnDef = ({
         getCellValue: (row) => row.id,
         label: stringGetter({ key: STRING_KEYS.DETAILS }),
         renderCell: ({ id, asset, leverage, resources, size }) => (
-          <TableCell stacked slotLeft={<Styled.AssetIcon symbol={asset?.symbol as AssetSymbol} />}>
+          <TableCell stacked slotLeft={<Styled.AssetIcon symbol={asset?.symbol} />}>
             <Styled.HighlightOutput
               type={OutputType.Asset}
               value={size?.current}