feat: add leverage to simple ui market row (#1916)

Author: jaredvu

src/pages/markets/simple-ui/markets-view/MarketRow.tsx

@@ -8,6 +8,9 @@ import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { AssetIcon } from '@/components/AssetIcon';
 import { Output, OutputType } from '@/components/Output';
+import { Tag } from '@/components/Tag';
+
+import { calculateMarketMaxLeverage } from '@/lib/marketsHelpers';
 
 export const MarketRow = ({ className, market }: { className?: string; market: MarketData }) => {
   const stringGetter = useStringGetter();
@@ -27,9 +30,23 @@ export const MarketRow = ({ className, market }: { className?: string; market: M
       <div tw="row min-w-0 flex-grow-0 gap-0.5">
         <AssetIcon logoUrl={market.logo} tw="size-[2.25rem] min-w-[2.25rem]" />
         <div tw="flexColumn gap-0.25">
-          <span tw="overflow-hidden text-ellipsis whitespace-nowrap leading-[1rem]">
-            {market.displayableAsset}
-          </span>
+          <div tw="row gap-0.25 leading-[1rem]">
+            <span tw="overflow-hidden text-ellipsis whitespace-nowrap">
+              {market.displayableAsset}
+            </span>
+
+            <Tag tw="bg-color-layer-4">
+              <Output
+                tw="text-color-text-1"
+                type={OutputType.Multiple}
+                value={calculateMarketMaxLeverage({
+                  effectiveInitialMarginFraction: market.effectiveInitialMarginFraction,
+                  initialMarginFraction: market.initialMarginFraction,
+                })}
+                fractionDigits={0}
+              />
+            </Tag>
+          </div>
           <Output
             tw="text-color-text-1 font-small-book"
             type={OutputType.CompactFiat}