- {signature}
+ {signatureLabel}
) : (
- signature
+ signatureLabel
)}
diff --git a/explorer/src/components/instruction/token/types.ts b/explorer/src/components/instruction/token/types.ts
index 9b0851fd2a..3dde2fd3d3 100644
--- a/explorer/src/components/instruction/token/types.ts
+++ b/explorer/src/components/instruction/token/types.ts
@@ -42,7 +42,8 @@ const InitializeMultisig = type({
m: number(),
});
-const Transfer = type({
+export type Transfer = Infer
;
+export const Transfer = type({
source: PublicKeyFromString,
destination: PublicKeyFromString,
amount: union([string(), number()]),
@@ -126,7 +127,8 @@ const ThawAccount = type({
signers: optional(array(PublicKeyFromString)),
});
-const TransferChecked = type({
+export type TransferChecked = Infer;
+export const TransferChecked = type({
source: PublicKeyFromString,
mint: PublicKeyFromString,
destination: PublicKeyFromString,
diff --git a/explorer/src/components/transaction/TokenBalancesCard.tsx b/explorer/src/components/transaction/TokenBalancesCard.tsx
index 461d6c5cbb..ff1080b1b9 100644
--- a/explorer/src/components/transaction/TokenBalancesCard.tsx
+++ b/explorer/src/components/transaction/TokenBalancesCard.tsx
@@ -12,7 +12,7 @@ import { SignatureProps } from "pages/TransactionDetailsPage";
import { useTransactionDetails } from "providers/transactions";
import { useTokenRegistry } from "providers/mints/token-registry";
-type TokenBalanceRow = {
+export type TokenBalanceRow = {
account: PublicKey;
mint: string;
balance: TokenAmount;
@@ -92,7 +92,7 @@ export function TokenBalancesCard({ signature }: SignatureProps) {
);
}
-function generateTokenBalanceRows(
+export function generateTokenBalanceRows(
preTokenBalances: TokenBalance[],
postTokenBalances: TokenBalance[],
accounts: ParsedMessageAccount[]
diff --git a/explorer/src/pages/AccountDetailsPage.tsx b/explorer/src/pages/AccountDetailsPage.tsx
index 13cc2d6033..2c881d3ad8 100644
--- a/explorer/src/pages/AccountDetailsPage.tsx
+++ b/explorer/src/pages/AccountDetailsPage.tsx
@@ -16,7 +16,6 @@ import { NavLink, Redirect, useLocation } from "react-router-dom";
import { clusterPath } from "utils/url";
import { UnknownAccountCard } from "components/account/UnknownAccountCard";
import { OwnedTokensCard } from "components/account/OwnedTokensCard";
-import { TransactionHistoryCard } from "components/account/TransactionHistoryCard";
import { TokenHistoryCard } from "components/account/TokenHistoryCard";
import { TokenLargestAccountsCard } from "components/account/TokenLargestAccountsCard";
import { VoteAccountSection } from "components/account/VoteAccountSection";
@@ -31,34 +30,58 @@ import { useFlaggedAccounts } from "providers/accounts/flagged-accounts";
import { UpgradeableLoaderAccountSection } from "components/account/UpgradeableLoaderAccountSection";
import { useTokenRegistry } from "providers/mints/token-registry";
import { Identicon } from "components/common/Identicon";
+import { TransactionHistoryCard } from "components/account/history/TransactionHistoryCard";
+import { TokenTransfersCard } from "components/account/history/TokenTransfersCard";
+import { TokenInstructionsCard } from "components/account/history/TokenInstructionsCard";
const IDENTICON_WIDTH = 64;
-const TABS_LOOKUP: { [id: string]: Tab } = {
- "spl-token:mint": {
- slug: "largest",
- title: "Distribution",
- path: "/largest",
- },
- vote: {
- slug: "vote-history",
- title: "Vote History",
- path: "/vote-history",
- },
- "sysvar:recentBlockhashes": {
- slug: "blockhashes",
- title: "Blockhashes",
- path: "/blockhashes",
- },
- "sysvar:slotHashes": {
- slug: "slot-hashes",
- title: "Slot Hashes",
- path: "/slot-hashes",
- },
- "sysvar:stakeHistory": {
- slug: "stake-history",
- title: "Stake History",
- path: "/stake-history",
- },
+
+const TABS_LOOKUP: { [id: string]: Tab[] } = {
+ "spl-token:mint": [
+ {
+ slug: "transfers",
+ title: "Transfers",
+ path: "/transfers",
+ },
+ {
+ slug: "instructions",
+ title: "Instructions",
+ path: "/instructions",
+ },
+ {
+ slug: "largest",
+ title: "Distribution",
+ path: "/largest",
+ },
+ ],
+ vote: [
+ {
+ slug: "vote-history",
+ title: "Vote History",
+ path: "/vote-history",
+ },
+ ],
+ "sysvar:recentBlockhashes": [
+ {
+ slug: "blockhashes",
+ title: "Blockhashes",
+ path: "/blockhashes",
+ },
+ ],
+ "sysvar:slotHashes": [
+ {
+ slug: "slot-hashes",
+ title: "Slot Hashes",
+ path: "/slot-hashes",
+ },
+ ],
+ "sysvar:stakeHistory": [
+ {
+ slug: "stake-history",
+ title: "Stake History",
+ path: "/stake-history",
+ },
+ ],
};
const TOKEN_TABS_HIDDEN = [
@@ -248,14 +271,16 @@ type Tab = {
path: string;
};
-type MoreTabs =
+export type MoreTabs =
| "history"
| "tokens"
| "largest"
| "vote-history"
| "slot-hashes"
| "stake-history"
- | "blockhashes";
+ | "blockhashes"
+ | "transfers"
+ | "instructions";
function MoreSection({
account,
@@ -297,6 +322,8 @@ function MoreSection({
)}
{tab === "history" && }
+ {tab === "transfers" && }
+ {tab === "instructions" && }
{tab === "largest" && }
{tab === "vote-history" && data?.program === "vote" && (
@@ -335,11 +362,11 @@ function getTabs(data?: ProgramData): Tab[] {
}
if (data && data.program in TABS_LOOKUP) {
- tabs.push(TABS_LOOKUP[data.program]);
+ tabs.push(...TABS_LOOKUP[data.program]);
}
if (data && programTypeKey in TABS_LOOKUP) {
- tabs.push(TABS_LOOKUP[programTypeKey]);
+ tabs.push(...TABS_LOOKUP[programTypeKey]);
}
if (
diff --git a/explorer/src/providers/accounts/history.tsx b/explorer/src/providers/accounts/history.tsx
index 5f5580a177..b68b34db38 100644
--- a/explorer/src/providers/accounts/history.tsx
+++ b/explorer/src/providers/accounts/history.tsx
@@ -4,19 +4,26 @@ import {
ConfirmedSignatureInfo,
TransactionSignature,
Connection,
+ ParsedConfirmedTransaction,
} from "@solana/web3.js";
import { useCluster, Cluster } from "../cluster";
import * as Cache from "providers/cache";
import { ActionType, FetchStatus } from "providers/cache";
import { reportError } from "utils/sentry";
+const MAX_TRANSACTION_BATCH_SIZE = 10;
+
+type TransactionMap = Map;
+
type AccountHistory = {
fetched: ConfirmedSignatureInfo[];
+ transactionMap?: TransactionMap;
foundOldest: boolean;
};
type HistoryUpdate = {
history?: AccountHistory;
+ transactionMap?: TransactionMap;
before?: TransactionSignature;
};
@@ -52,12 +59,19 @@ function reconcile(
update: HistoryUpdate | undefined
) {
if (update?.history === undefined) return history;
+
+ let transactionMap = history?.transactionMap || new Map();
+ if (update.transactionMap) {
+ transactionMap = new Map([...transactionMap, ...update.transactionMap]);
+ }
+
return {
fetched: combineFetched(
update.history.fetched,
history?.fetched,
update?.before
),
+ transactionMap,
foundOldest: update?.history?.foundOldest || history?.foundOldest || false,
};
}
@@ -83,12 +97,42 @@ export function HistoryProvider({ children }: HistoryProviderProps) {
);
}
+async function fetchParsedTransactions(
+ url: string,
+ transactionSignatures: string[]
+) {
+ const transactionMap = new Map();
+ const connection = new Connection(url);
+
+ while (transactionSignatures.length > 0) {
+ const signatures = transactionSignatures.splice(
+ 0,
+ MAX_TRANSACTION_BATCH_SIZE
+ );
+ const fetched = await connection.getParsedConfirmedTransactions(signatures);
+ fetched.forEach(
+ (parsed: ParsedConfirmedTransaction | null, index: number) => {
+ if (parsed !== null) {
+ transactionMap.set(signatures[index], parsed);
+ }
+ }
+ );
+ }
+
+ return transactionMap;
+}
+
async function fetchAccountHistory(
dispatch: Dispatch,
pubkey: PublicKey,
cluster: Cluster,
url: string,
- options: { before?: TransactionSignature; limit: number }
+ options: {
+ before?: TransactionSignature;
+ limit: number;
+ additionalSignatures?: string[];
+ },
+ fetchTransactions?: boolean
) {
dispatch({
type: ActionType.Update,
@@ -116,6 +160,22 @@ async function fetchAccountHistory(
}
status = FetchStatus.FetchFailed;
}
+
+ let transactionMap;
+ if (fetchTransactions && history?.fetched) {
+ try {
+ const signatures = history.fetched
+ .map((signature) => signature.signature)
+ .concat(options.additionalSignatures || []);
+ transactionMap = await fetchParsedTransactions(url, signatures);
+ } catch (error) {
+ if (cluster !== Cluster.Custom) {
+ reportError(error, { url });
+ }
+ status = FetchStatus.FetchFailed;
+ }
+ }
+
dispatch({
type: ActionType.Update,
url,
@@ -123,6 +183,7 @@ async function fetchAccountHistory(
status,
data: {
history,
+ transactionMap,
before: options?.before,
},
});
@@ -152,6 +213,18 @@ export function useAccountHistory(
return context.entries[address];
}
+function getUnfetchedSignatures(before: Cache.CacheEntry) {
+ if (!before.data?.transactionMap) {
+ return [];
+ }
+
+ const existingMap = before.data.transactionMap;
+ const allSignatures = before.data.fetched.map(
+ (signatureInfo) => signatureInfo.signature
+ );
+ return allSignatures.filter((signature) => !existingMap.has(signature));
+}
+
export function useFetchAccountHistory() {
const { cluster, url } = useCluster();
const state = React.useContext(StateContext);
@@ -163,18 +236,39 @@ export function useFetchAccountHistory() {
}
return React.useCallback(
- (pubkey: PublicKey, refresh?: boolean) => {
+ (pubkey: PublicKey, fetchTransactions?: boolean, refresh?: boolean) => {
const before = state.entries[pubkey.toBase58()];
if (!refresh && before?.data?.fetched && before.data.fetched.length > 0) {
if (before.data.foundOldest) return;
+
+ let additionalSignatures: string[] = [];
+ if (fetchTransactions) {
+ additionalSignatures = getUnfetchedSignatures(before);
+ }
+
const oldest =
before.data.fetched[before.data.fetched.length - 1].signature;
- fetchAccountHistory(dispatch, pubkey, cluster, url, {
- before: oldest,
- limit: 25,
- });
+ fetchAccountHistory(
+ dispatch,
+ pubkey,
+ cluster,
+ url,
+ {
+ before: oldest,
+ limit: 25,
+ additionalSignatures,
+ },
+ fetchTransactions
+ );
} else {
- fetchAccountHistory(dispatch, pubkey, cluster, url, { limit: 25 });
+ fetchAccountHistory(
+ dispatch,
+ pubkey,
+ cluster,
+ url,
+ { limit: 25 },
+ fetchTransactions
+ );
}
},
[state, dispatch, cluster, url]
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index 77ca47f6cc..8989decbd5 100644
--- a/explorer/src/scss/_solana.scss
+++ b/explorer/src/scss/_solana.scss
@@ -3,7 +3,8 @@
// Use this to write your custom SCSS
//
-code, pre {
+code,
+pre {
padding: 0.33rem;
border-radius: $border-radius;
background-color: $gray-200;
@@ -21,7 +22,8 @@ ul.log-messages {
max-height: 20rem;
overflow: auto;
font-size: 0.8125rem;
- font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+ "Courier New", monospace;
}
.popover-container {
@@ -175,7 +177,7 @@ h4.slot-pill {
}
.search-indicator {
- color: hsl(0,0%,60%);
+ color: hsl(0, 0%, 60%);
display: flex;
padding: 8px 10px;
padding-left: 14px;
@@ -184,7 +186,7 @@ h4.slot-pill {
cursor: pointer;
&:hover {
- color: hsl(0,0%,40%);
+ color: hsl(0, 0%, 40%);
}
}
@@ -214,7 +216,8 @@ h4.slot-pill {
}
}
-.address-truncate, .signature-truncate {
+.address-truncate,
+.signature-truncate {
@include media-breakpoint-down(md) {
max-width: 180px;
display: inline-block;
@@ -239,7 +242,7 @@ p.tree span.c-pointer {
}
ul.tree ul {
- margin-left: 1.0em;
+ margin-left: 1em;
}
ul.tree li {
@@ -288,8 +291,8 @@ div.inner-cards {
#chartjs-tooltip {
opacity: 1;
position: absolute;
- -webkit-transition: all .1s ease;
- transition: all .1s ease;
+ -webkit-transition: all 0.1s ease;
+ transition: all 0.1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, -105%);
transform: translate(-50%, -105%);
@@ -327,7 +330,7 @@ div.inner-cards {
border-left: 10px solid transparent;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
- content:'';
+ content: "";
}
}
@@ -341,7 +344,8 @@ div.inner-cards {
border: 1px solid red;
}
-pre.data-wrap, pre.json-wrap {
+pre.data-wrap,
+pre.json-wrap {
max-width: 23rem;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
@@ -356,7 +360,7 @@ pre.json-wrap {
.staking-card {
h1 {
- margin-bottom: .75rem;
+ margin-bottom: 0.75rem;
small {
font-size: 1rem;
}
@@ -366,12 +370,12 @@ pre.json-wrap {
}
em {
font-style: normal;
- color: $primary
+ color: $primary;
}
}
p.updated-time {
- font-size: .66rem;
+ font-size: 0.66rem;
text-align: right;
}
diff --git a/explorer/src/utils/date.ts b/explorer/src/utils/date.ts
index 555192a69e..bc0cb79b0b 100644
--- a/explorer/src/utils/date.ts
+++ b/explorer/src/utils/date.ts
@@ -5,7 +5,7 @@ export function displayTimestamp(
const expireDate = new Date(unixTimestamp);
const dateString = new Intl.DateTimeFormat("en-US", {
year: "numeric",
- month: "long",
+ month: "short",
day: "numeric",
}).format(expireDate);
const timeString = new Intl.DateTimeFormat("en-US", {
diff --git a/explorer/src/utils/instruction.ts b/explorer/src/utils/instruction.ts
new file mode 100644
index 0000000000..6ea01cd6af
--- /dev/null
+++ b/explorer/src/utils/instruction.ts
@@ -0,0 +1,175 @@
+import { create } from "superstruct";
+import {
+ IX_TITLES,
+ TokenInstructionType,
+} from "components/instruction/token/types";
+import { ParsedInfo } from "validators";
+import { reportError } from "utils/sentry";
+import {
+ ConfirmedSignatureInfo,
+ ParsedConfirmedTransaction,
+ ParsedInstruction,
+ PartiallyDecodedInstruction,
+} from "@solana/web3.js";
+import { intoTransactionInstruction } from "utils/tx";
+import {
+ isTokenSwapInstruction,
+ parseTokenSwapInstructionTitle,
+} from "components/instruction/token-swap/types";
+import {
+ isTokenLendingInstruction,
+ parseTokenLendingInstructionTitle,
+} from "components/instruction/token-lending/types";
+import {
+ isSerumInstruction,
+ parseSerumInstructionTitle,
+} from "components/instruction/serum/types";
+import { TOKEN_PROGRAM_ID } from "providers/accounts/tokens";
+
+export type InstructionType = {
+ name: string;
+ innerInstructions: (ParsedInstruction | PartiallyDecodedInstruction)[];
+};
+
+export interface InstructionItem {
+ instruction: ParsedInstruction | PartiallyDecodedInstruction;
+ inner: (ParsedInstruction | PartiallyDecodedInstruction)[];
+}
+
+export class InstructionContainer {
+ readonly instructions: InstructionItem[];
+
+ static create(parsedTransaction: ParsedConfirmedTransaction) {
+ return new InstructionContainer(parsedTransaction);
+ }
+
+ constructor(parsedTransaction: ParsedConfirmedTransaction) {
+ this.instructions = parsedTransaction.transaction.message.instructions.map(
+ (instruction) => {
+ if ("parsed" in instruction) {
+ instruction.parsed = create(instruction.parsed, ParsedInfo);
+ }
+
+ return {
+ instruction,
+ inner: [],
+ };
+ }
+ );
+
+ if (parsedTransaction.meta?.innerInstructions) {
+ for (let inner of parsedTransaction.meta.innerInstructions) {
+ this.instructions[inner.index].inner.push(...inner.instructions);
+ }
+ }
+ }
+}
+
+export function getTokenProgramInstructionName(
+ ix: ParsedInstruction,
+ signatureInfo: ConfirmedSignatureInfo
+): string {
+ try {
+ const parsed = create(ix.parsed, ParsedInfo);
+ const { type: rawType } = parsed;
+ const type = create(rawType, TokenInstructionType);
+ return IX_TITLES[type];
+ } catch (err) {
+ reportError(err, { signature: signatureInfo.signature });
+ return "Unknown";
+ }
+}
+
+export function getTokenInstructionName(
+ transaction: ParsedConfirmedTransaction,
+ ix: ParsedInstruction | PartiallyDecodedInstruction,
+ signatureInfo: ConfirmedSignatureInfo
+) {
+ let name = "Unknown";
+
+ let transactionInstruction;
+ if (transaction?.transaction) {
+ transactionInstruction = intoTransactionInstruction(
+ transaction.transaction,
+ ix
+ );
+ }
+
+ if ("parsed" in ix) {
+ if (ix.program === "spl-token") {
+ name = getTokenProgramInstructionName(ix, signatureInfo);
+ } else {
+ return undefined;
+ }
+ } else if (
+ transactionInstruction &&
+ isSerumInstruction(transactionInstruction)
+ ) {
+ try {
+ name = parseSerumInstructionTitle(transactionInstruction);
+ } catch (error) {
+ reportError(error, { signature: signatureInfo.signature });
+ return undefined;
+ }
+ } else if (
+ transactionInstruction &&
+ isTokenSwapInstruction(transactionInstruction)
+ ) {
+ try {
+ name = parseTokenSwapInstructionTitle(transactionInstruction);
+ } catch (error) {
+ reportError(error, { signature: signatureInfo.signature });
+ return undefined;
+ }
+ } else if (
+ transactionInstruction &&
+ isTokenLendingInstruction(transactionInstruction)
+ ) {
+ try {
+ name = parseTokenLendingInstructionTitle(transactionInstruction);
+ } catch (error) {
+ reportError(error, { signature: signatureInfo.signature });
+ return undefined;
+ }
+ } else {
+ if (
+ ix.accounts.findIndex((account) => account.equals(TOKEN_PROGRAM_ID)) >= 0
+ ) {
+ name = "Unknown (Inner)";
+ } else {
+ return undefined;
+ }
+ }
+
+ return name;
+}
+
+export function getTokenInstructionType(
+ transaction: ParsedConfirmedTransaction,
+ ix: ParsedInstruction | PartiallyDecodedInstruction,
+ signatureInfo: ConfirmedSignatureInfo,
+ index: number
+): InstructionType | undefined {
+ const innerInstructions: (
+ | ParsedInstruction
+ | PartiallyDecodedInstruction
+ )[] = [];
+
+ if (transaction.meta?.innerInstructions) {
+ transaction.meta.innerInstructions.forEach((ix) => {
+ if (ix.index === index) {
+ ix.instructions.forEach((inner) => {
+ innerInstructions.push(inner);
+ });
+ }
+ });
+ }
+
+ let name =
+ getTokenInstructionName(transaction, ix, signatureInfo) || "Unknown";
+
+ return {
+ name,
+ innerInstructions,
+ };
+}