add: blockscout api and TransactionCard

apps/storybook/src/hooks/use-blockscout.ts

@@ -0,0 +1,16 @@
+import { asTransactionMeta, getTransaction } from "@/lib/blockscout/api";
+import { TransactionMeta } from "@/lib/domain/transaction/transaction";
+import { useQuery } from "@tanstack/react-query";
+import { Address, Transaction } from "viem";
+
+export const CACHE_KEY = "blockscout";
+
+export const useGetTransaction = (txnHash: string) => {
+	return useQuery<TransactionMeta>({
+		queryKey: [`${CACHE_KEY}.transaction`, txnHash],
+		queryFn: async () => {
+			const results = await getTransaction(txnHash);
+			return asTransactionMeta(results);
+		},
+	});
+};

apps/storybook/src/lib/amount.ts

@@ -0,0 +1,14 @@
+import { formatUnits } from "viem";
+
+export const formatUnitsWithDecimalsDisplayed = (
+	data: {
+		value: bigint;
+		decimals: number;
+	},
+	decimalsDisplayed = 4,
+) => {
+	return formatUnits(
+		data.value / BigInt(Math.pow(10, data?.decimals - decimalsDisplayed)),
+		decimalsDisplayed,
+	);
+};

apps/storybook/src/lib/blockscout/api.test.ts

@@ -0,0 +1,83 @@
+import { getAddress } from "viem";
+import { describe, expect, test } from "vitest";
+import { asTransactionMeta, getAddressInfo, getTransaction } from "./api";
+import { TXN_VITALIK_DEPOSIT, TXN_VITALIK_TRANSFER } from "./fixture";
+
+describe("blockscout", () => {
+	test.skip("api", async () => {
+		const address = "0x962EFc5A602f655060ed83BB657Afb6cc4b5883F";
+
+		const results = await getAddressInfo(address);
+		console.log(results);
+		const { ens_domain_name } = results;
+		expect(ens_domain_name).toBe("debuggingfuture.eth");
+	});
+
+	test("getTransaction", async () => {
+		const txnHash =
+			"0xc6480de9e7ba4daa2bd115be1aa41c669246b052e6765a4848f8c683c63cacf7";
+
+		const { from, to, tx_types } = await getTransaction(txnHash);
+		expect(from.ens_domain_name).toBe("debuggingfuture.eth");
+		expect(to.ens_domain_name).toBe(null);
+		expect(tx_types).toEqual(["coin_transfer"]);
+	});
+});
+
+// transaction_types
+
+describe("Transaction", () => {
+	test("#asTransactionMeta contract", () => {
+		const transaction = asTransactionMeta(TXN_VITALIK_DEPOSIT);
+
+		expect(transaction.to).toEqual(
+			"0xB4A8d45647445EA9FC3E1058096142390683dBC2",
+		);
+
+		expect(transaction.displayedTxType).toEqual("contract_call");
+
+		expect(transaction.value).toEqual(32010000000000000000000000000n);
+		expect(transaction.tokenTransfers?.[0]?.name).toEqual("Wrapped Ether");
+	});
+	test("#asTransactionMeta transfer", () => {
+		const transaction = asTransactionMeta(TXN_VITALIK_TRANSFER);
+
+		expect(transaction.to).toEqual(
+			"0x52a785cF0238D02e0F4157735f0a17D04AB2bF6c",
+		);
+
+		expect(transaction.displayedTxType).toEqual("coin_transfer");
+
+		expect(transaction.value).toEqual(100000000000000000000000000000n);
+		expect(transaction.tokenTransfers?.[0]).toEqual([]);
+	});
+});
+
+// {
+//     block_number_balance_updated_at: 21184382,
+//     coin_balance: '2084671391552286312',
+//     creation_transaction_hash: null,
+//     creation_tx_hash: null,
+//     creator_address_hash: null,
+//     ens_domain_name: 'debuggingfuture.eth',
+//     exchange_rate: '3170.33',
+//     has_beacon_chain_withdrawals: false,
+//     has_decompiled_code: false,
+//     has_logs: false,
+//     has_token_transfers: true,
+//     has_tokens: true,
+//     has_validated_blocks: false,
+//     hash: '0x962EFc5A602f655060ed83BB657Afb6cc4b5883F',
+//     implementations: [],
+//     is_contract: false,
+//     is_scam: false,
+//     is_verified: false,
+//     metadata: null,
+//     name: null,
+//     private_tags: [],
+//     proxy_type: null,
+//     public_tags: [],
+//     token: null,
+//     watchlist_address_id: null,
+//     watchlist_names: []
+//   }

apps/storybook/src/lib/blockscout/api.ts

@@ -0,0 +1,101 @@
+import { Address, Transaction, parseGwei, parseUnits } from "viem";
+import {
+	TokenTransfer,
+	TransactionMeta,
+} from "../domain/transaction/transaction";
+
+const ROOT = "https://eth.blockscout.com/api/";
+export const invokeApi = async (endpoint: string, body?: any) => {
+	return fetch(endpoint, {
+		method: "GET",
+		headers: {
+			"Content-Type": "application/json",
+		},
+	}).then((res) => {
+		return res.json();
+	});
+};
+
+// TODO better pairing types
+export enum BlockscoutEndpoint {
+	Transaction = "transaction",
+	Address = "address",
+}
+export interface BlockscoutEndpointParams {
+	address?: Address;
+	txnHash?: string;
+}
+
+export const ENDPOINT_STRATEGIES = {
+	[BlockscoutEndpoint.Address]: (params: BlockscoutEndpointParams) => {
+		const { address } = params;
+		return ROOT + "v1/address/" + address;
+	},
+	[BlockscoutEndpoint.Transaction]: (params: BlockscoutEndpointParams) => {
+		const { txnHash } = params;
+		return ROOT + "v2/transactions/" + txnHash;
+	},
+};
+
+// TODO enum type
+export const getEndpoint = (
+	endpoint: BlockscoutEndpoint,
+	params: BlockscoutEndpointParams,
+) => {
+	const strategy = ENDPOINT_STRATEGIES[endpoint];
+	if (!strategy) {
+		throw new Error("");
+	}
+
+	return strategy(params);
+};
+
+export const getAddressInfo = async (address: Address) => {
+	const endpoint = getEndpoint(BlockscoutEndpoint.Address, { address });
+	return invokeApi(endpoint);
+};
+
+export const getTransaction = async (txnHash: string) => {
+	const endpoint = getEndpoint(BlockscoutEndpoint.Transaction, {
+		txnHash,
+	});
+	return invokeApi(endpoint);
+};
+
+export const findDisplayedTxType = (transaction_types: any[]): string => {
+	if (transaction_types.includes("contract_call")) {
+		return "contract_call";
+	}
+	if (transaction_types.includes("coin_transfer")) {
+		return "coin_transfer";
+	}
+	return "native_transfer";
+};
+
+export const asTokenTransfer = (transfer: any): TokenTransfer => {
+	const { token } = transfer;
+	return {
+		...token,
+		// imageUrl: '',
+		name: transfer.token.name,
+		amount: parseUnits(transfer.total.value, transfer.total.decimals),
+	};
+};
+
+/**
+ *
+ * Requires chain specific info  for native currency symbol
+ *
+ */
+export const asTransactionMeta = (res: any): TransactionMeta => {
+	return {
+		hash: res.hash,
+		blockHash: res.blockHash,
+		from: res.from.hash as Address,
+		to: res.to.hash as Address,
+		isSuccess: res.success,
+		displayedTxType: findDisplayedTxType(res.tx_types),
+		value: parseUnits(res.value, res.decimals),
+		tokenTransfers: res.token_transfers.map(asTokenTransfer),
+	};
+};

apps/storybook/src/lib/blockscout/chain.ts

@@ -0,0 +1,18 @@
+// explorer url in chainInfo.ts are pulled from  https://github.com/blockscout/chainscout/blob/main/data/chains.json
+// https://www.blockscout.com/chains-and-projects
+
+import { Chain } from "viem";
+import { BLOCKSCOUT_CHAINS_BY_ID } from "./chainInfo";
+
+// TODO ensure treeshaking
+
+export const getBlockscoutChainEndpoint = (chain: Chain) => {
+	const blockScoutChainExplorer =
+		BLOCKSCOUT_CHAINS_BY_ID[chain.id.toString()]?.explorers?.[0];
+
+	if (!blockScoutChainExplorer) {
+		return;
+	}
+
+	return blockScoutChainExplorer.url;
+};