refactor(OrderbookDepth): hoist icon components to module scope

src/components/dashboard/OrderbookDepth.tsx

@@ -20,68 +20,73 @@ import { useMiners } from '../../api';
 import { FONTS } from '../../theme';
 import { OrderbookDepthSkeleton } from './Skeletons';
 
-const OrderbookDepth: React.FC = () => {
+const BtcIcon: React.FC<{ size?: number }> = ({ size = 16 }) => {
   const theme = useTheme();
-
-  const TAO_COLOR = theme.palette.asset.tao;
-  const BTC_COLOR = theme.palette.asset.btc;
-
-  const BtcIcon = ({ size = 16 }: { size?: number }) => (
+  return (
     <svg viewBox="0 0 32 32" width={size} height={size}>
-      <circle cx="16" cy="16" r="16" fill={BTC_COLOR} />
+      <circle cx="16" cy="16" r="16" fill={theme.palette.asset.btc} />
       <path
         fill={theme.palette.common.white}
         fillRule="evenodd"
         d="M23.189 14.02c.314-2.096-1.283-3.223-3.465-3.975l.708-2.84-1.728-.43-.69 2.765c-.454-.114-.92-.22-1.385-.326l.695-2.783L15.596 6l-.708 2.839c-.376-.086-.746-.17-1.104-.26l.002-.009-2.384-.595-.46 1.846s1.283.294 1.256.312c.7.175.826.638.805 1.006l-.806 3.235c.048.012.11.03.18.057l-.183-.045-1.13 4.532c-.086.212-.303.531-.793.41.018.025-1.256-.313-1.256-.313l-.858 1.978 2.25.561c.418.105.828.215 1.231.318l-.715 2.872 1.727.43.708-2.84c.472.127.93.245 1.378.357l-.706 2.828 1.728.43.715-2.866c2.948.558 5.164.333 6.097-2.333.752-2.146-.037-3.385-1.588-4.192 1.13-.26 1.98-1.003 2.207-2.538zm-3.95 5.538c-.533 2.147-4.148.986-5.32.695l.95-3.805c1.172.293 4.929.872 4.37 3.11zm.535-5.569c-.487 1.953-3.495.96-4.47.717l.86-3.45c.975.243 4.118.696 3.61 2.733z"
       />
     </svg>
   );
+};
 
-  const TaoIcon = ({ size = 16, color }: { size?: number; color?: string }) => (
+const TaoIcon: React.FC<{ size?: number; color?: string }> = ({
+  size = 16,
+  color,
+}) => {
+  const theme = useTheme();
+  const fill = color ?? theme.palette.asset.tao;
+  return (
     <svg viewBox="0 0 21.6 23.1" width={size} height={size}>
       <path
-        fill={color || TAO_COLOR}
+        fill={fill}
         d="M13.1,17.7V8.3c0-2.4-1.9-4.3-4.3-4.3v15.1c0,2.2,1.7,4,3.9,4c0.1,0,0.1,0,0.2,0c1,0.1,2.1-0.2,2.9-0.9C13.3,22,13.1,20.5,13.1,17.7L13.1,17.7z"
       />
       <path
-        fill={color || TAO_COLOR}
+        fill={fill}
         d="M3.9,0C1.8,0,0,1.8,0,4h17.6c2.2,0,3.9-1.8,3.9-4C21.6,0,3.9,0,3.9,0z"
       />
     </svg>
   );
+};
 
-  const AssetIcon = ({
-    asset,
-    size = 16,
-  }: {
-    asset: string;
-    size?: number;
-  }) => {
-    if (asset.toUpperCase() === 'BTC') return <BtcIcon size={size} />;
-    return (
-      <Box
+const AssetIcon: React.FC<{ asset: string; size?: number }> = ({
+  asset,
+  size = 16,
+}) => {
+  const theme = useTheme();
+  if (asset.toUpperCase() === 'BTC') return <BtcIcon size={size} />;
+  return (
+    <Box
+      sx={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        backgroundColor: theme.palette.text.secondary,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Typography
         sx={{
-          width: size,
-          height: size,
-          borderRadius: '50%',
-          backgroundColor: theme.palette.text.secondary,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+          fontSize: size * 0.6,
+          color: theme.palette.background.paper,
+          fontWeight: 'bold',
         }}
       >
-        <Typography
-          sx={{
-            fontSize: size * 0.6,
-            color: theme.palette.background.paper,
-            fontWeight: 'bold',
-          }}
-        >
-          {asset[0]?.toUpperCase()}
-        </Typography>
-      </Box>
-    );
-  };
+        {asset[0]?.toUpperCase()}
+      </Typography>
+    </Box>
+  );
+};
+
+const OrderbookDepth: React.FC = () => {
+  const theme = useTheme();
 
   const headerSx = {
     fontFamily: FONTS.mono,
@@ -370,9 +375,9 @@ const OrderbookDepth: React.FC = () => {
               };
 
               const assetThemeColor = isBtc
-                ? BTC_COLOR
+                ? theme.palette.asset.btc
                 : theme.palette.primary.main;
-              const taoThemeColor = TAO_COLOR;
+              const taoThemeColor = theme.palette.asset.tao;
 
               const leftGradColor = hexToRgba(assetThemeColor, 0.1);
               const rightGradColor =