Explorer: Split out `SolBalance` component from utils (#28072)

Explorer: Split out SolBalance component from utils

explorer/src/components/SupplyCard.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useSupply, useFetchSupply, Status } from "providers/supply";
 import { LoadingCard } from "./common/LoadingCard";
 import { ErrorCard } from "./common/ErrorCard";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { TableCardBody } from "./common/TableCardBody";
 
 export function SupplyCard() {

explorer/src/components/TopAccountsCard.tsx

@@ -5,7 +5,7 @@ import { AccountBalancePair } from "@solana/web3.js";
 import { useRichList, useFetchRichList, Status } from "providers/richList";
 import { LoadingCard } from "./common/LoadingCard";
 import { ErrorCard } from "./common/ErrorCard";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { useQuery } from "utils/url";
 import { useSupply } from "providers/supply";
 import { Address } from "./common/Address";

explorer/src/components/account/StakeAccountSection.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { TableCardBody } from "components/common/TableCardBody";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { displayTimestampUtc } from "utils/date";
 import { Account, useFetchAccountInfo } from "providers/accounts";
 import { Address } from "components/common/Address";

explorer/src/components/account/StakeHistoryCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { Epoch } from "components/common/Epoch";
 import {
   SysvarAccount,

explorer/src/components/account/UnknownAccountCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Account } from "providers/accounts";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { TableCardBody } from "components/common/TableCardBody";
 import { Address } from "components/common/Address";
 import { addressLabel } from "utils/tx";

explorer/src/components/account/UpgradeableLoaderAccountSection.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { TableCardBody } from "components/common/TableCardBody";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { Account, useFetchAccountInfo } from "providers/accounts";
 import { Address } from "components/common/Address";
 import {

explorer/src/components/account/address-lookup-table/AddressLookupTableAccountSection.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { TableCardBody } from "components/common/TableCardBody";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { Account, useFetchAccountInfo } from "providers/accounts";
 import { Address } from "components/common/Address";
 import { AddressLookupTableAccount } from "@solana/web3.js";

explorer/src/components/block/BlockHistoryCard.tsx

@@ -15,7 +15,7 @@ import { pickClusterParams, useQuery } from "utils/url";
 import { useCluster } from "providers/cluster";
 import { displayAddress } from "utils/tx";
 import { parseProgramLogs } from "utils/program-logs";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 
 const PAGE_SIZE = 25;
 

explorer/src/components/block/BlockRewardsCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { PublicKey, VersionedBlockResponse } from "@solana/web3.js";
 import { Address } from "components/common/Address";
 

explorer/src/components/common/Account.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Address } from "./Address";
 import { Account } from "providers/accounts";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 
 type AccountHeaderProps = {
   title: string;

explorer/src/components/common/BalanceDelta.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { BigNumber } from "bignumber.js";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 
 export function BalanceDelta({
   delta,

explorer/src/components/common/SolBalance.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { lamportsToSolString } from "utils";
+
+export function SolBalance({
+  lamports,
+  maximumFractionDigits = 9,
+}: {
+  lamports: number | bigint;
+  maximumFractionDigits?: number;
+}) {
+  return (
+    <span>
+      ◎
+      <span className="font-monospace">
+        {lamportsToSolString(lamports, maximumFractionDigits)}
+      </span>
+    </span>
+  );
+}

explorer/src/components/instruction/ComputeBudgetDetailsCard.tsx

@@ -5,9 +5,10 @@ import {
   TransactionInstruction,
 } from "@solana/web3.js";
 import { InstructionCard } from "./InstructionCard";
-import { microLamportsToLamportsString, SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { Address } from "components/common/Address";
 import { reportError } from "utils/sentry";
+import { microLamportsToLamportsString } from "utils";
 import { useCluster } from "providers/cluster";
 
 export function ComputeBudgetDetailsCard({

explorer/src/components/instruction/stake/SplitDetailsCard.tsx

@@ -4,7 +4,7 @@ import {
   StakeProgram,
   ParsedInstruction,
 } from "@solana/web3.js";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
 import { SplitInfo } from "./types";

explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx

@@ -4,7 +4,7 @@ import {
   StakeProgram,
   ParsedInstruction,
 } from "@solana/web3.js";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
 import { WithdrawInfo } from "./types";

explorer/src/components/instruction/system/CreateDetailsCard.tsx

@@ -4,7 +4,7 @@ import {
   SignatureResult,
   ParsedInstruction,
 } from "@solana/web3.js";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
 import { CreateAccountInfo } from "./types";

explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx

@@ -4,7 +4,7 @@ import {
   SignatureResult,
   ParsedInstruction,
 } from "@solana/web3.js";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { InstructionCard } from "../InstructionCard";
 import { Copyable } from "components/common/Copyable";
 import { Address } from "components/common/Address";

explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx

@@ -4,7 +4,7 @@ import {
   SignatureResult,
   ParsedInstruction,
 } from "@solana/web3.js";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
 import { WithdrawNonceInfo } from "./types";

explorer/src/components/instruction/system/TransferDetailsCard.tsx

@@ -4,7 +4,7 @@ import {
   SignatureResult,
   ParsedInstruction,
 } from "@solana/web3.js";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
 import { TransferInfo } from "./types";

explorer/src/components/instruction/system/TransferWithSeedDetailsCard.tsx

@@ -4,7 +4,7 @@ import {
   SignatureResult,
   ParsedInstruction,
 } from "@solana/web3.js";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { InstructionCard } from "../InstructionCard";
 import { Copyable } from "components/common/Copyable";
 import { Address } from "components/common/Address";

explorer/src/pages/TransactionDetailsPage.tsx

@@ -13,7 +13,7 @@ import {
   SystemProgram,
   SystemInstruction,
 } from "@solana/web3.js";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { ErrorCard } from "components/common/ErrorCard";
 import { LoadingCard } from "components/common/LoadingCard";
 import { TableCardBody } from "components/common/TableCardBody";

explorer/src/pages/inspector/InspectorPage.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { PACKET_DATA_SIZE, VersionedMessage } from "@solana/web3.js";
 
 import { TableCardBody } from "components/common/TableCardBody";
-import { SolBalance } from "utils";
+import { SolBalance } from "components/common/SolBalance";
 import { useQuery } from "utils/url";
 import { useHistory, useLocation } from "react-router";
 import {

explorer/src/utils/index.ts

@@ -86,23 +86,6 @@ export function numberWithSeparator(s: string) {
   return s.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
 
-export function SolBalance({
-  lamports,
-  maximumFractionDigits = 9,
-}: {
-  lamports: number | bigint;
-  maximumFractionDigits?: number;
-}) {
-  return (
-    <span>
-      ◎
-      <span className="font-monospace">
-        {lamportsToSolString(lamports, maximumFractionDigits)}
-      </span>
-    </span>
-  );
-}
-
 const HUMANIZER = new HumanizeDuration(new HumanizeDurationLanguage());
 HUMANIZER.setOptions({
   language: "short",