Skip to content

Commit

Permalink
fixing blockscout api upgrades and improving uniswap fetch
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pfed-prog
Pfed-prog committed Dec 15, 2024
1 parent 361c5f4 commit 2e24b59
Show file tree
Hide file tree
Showing 10 changed files with 129 additions and 115 deletions.
101 changes: 57 additions & 44 deletions with-tailwindcss-app/components/BalanceCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { AddressInfo } from "@evmexplorer/blockscout";
import type { AddressInfoBlockscout } from "@evmexplorer/blockscout";
import type { Contract } from "ethers";
import { getQuoteUniswap } from "@evmexplorer/uniswap";
import { ContractData, getQuoteUniswapViemUSD } from "@evmexplorer/uniswap";
import {
parseHash,
deserializeWeiToEther,
Expand All @@ -16,14 +16,13 @@ import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
import { useToPng } from "@hugocxl/react-to-image";
import Image from "next/image";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useEffect, useState, useMemo } from "react";

import { UniswapQuote } from "./UniswapQuote";
import { clientToProvider } from "@/services/ethers";
import { getPublicClient } from "@/services/client";

interface ContractProps {
addressInfo: AddressInfo;
addressInfo: AddressInfoBlockscout;
chainId: number;
}

Expand All @@ -38,6 +37,15 @@ export const BalanceCard = (props: ContractProps) => {
const chainId = props.chainId;

const imageSrc = addressInfo.token?.icon_url ?? null;
const exchangeRate = addressInfo.exchange_rate;

const contractData: ContractData = useMemo(() => {
return {
address: addressInfo.hash,
decimals: addressInfo.token?.decimals as string,
chainId: chainId,
};
}, [addressInfo, chainId]);

const [reportCard, setReportCard] = useState<string | null>();
const [copyPng, setCopyPng] = useState<boolean>(false);
Expand Down Expand Up @@ -120,29 +128,38 @@ ${addressInfo.token.volume_24h ? `\n$${parseNumberFixed(addressInfo.token?.volum
const [address, setAddress] = useState<string>();
const [fee, setFee] = useState<string>();
const [price, setPrice] = useState<number>();
const [poolContract, setPoolContract] = useState<Contract>();
const [poolContract, setPoolContract] = useState<Contract | string>();

const networkNameUniswap = getNetworkNameUniswap(chainId);

useEffect(() => {
async function fetchData() {
const networkName = getNetworkName(chainId);
const client = getPublicClient(networkName);
const provider = clientToProvider(client);
const data = await getQuoteUniswap(addressInfo, chainId, provider);

const data = await getQuoteUniswapViemUSD(
contractData,
client,
exchangeRate
);

setAddress(data.address);
setFee(data.fee);
setPrice(data.price);
setPoolContract(data.poolContract);
}
if (getNetworkNameUniswap(chainId) && addressInfo.token) {
if (
getNetworkNameUniswap(chainId) &&
addressInfo.token &&
addressInfo.token.type === "ERC-20"
) {
fetchData();
const intervalId = setInterval(fetchData, 60000);
return () => {
clearInterval(intervalId);
};
}
}, [addressInfo, chainId, poolContract]);
}, [addressInfo, chainId, poolContract, contractData, exchangeRate]);

return (
<div className="flex items-center justify-center">
Expand All @@ -165,12 +182,6 @@ ${addressInfo.token.volume_24h ? `\n$${parseNumberFixed(addressInfo.token?.volum
</div>
)}

{addressInfo?.implementation_name && (
<div className="text-2xl sm:text-3xl font-semibold pr-5 pl-5 mt-3 text-emerald-900">
{camelToFlat(addressInfo.implementation_name)}
</div>
)}

{addressInfo?.token && (
<div className="mt-2 text-xl sm:text-2xl font-semibold text-cyan-950 break-words">
{addressInfo.token?.name}{" "}
Expand Down Expand Up @@ -287,20 +298,6 @@ ${addressInfo.token.volume_24h ? `\n$${parseNumberFixed(addressInfo.token?.volum
</h1>
)}

{addressInfo?.implementation_name && (
<div>
{!addressInfo?.name ? (
<h1 className="text-2xl sm:text-3xl font-semibold pr-5 pl-5 mt-3 text-emerald-900">
{camelToFlat(addressInfo.implementation_name)}
</h1>
) : (
<div className="text-2xl sm:text-3xl font-semibold pr-5 pl-5 mt-3 text-emerald-900">
{camelToFlat(addressInfo.implementation_name)}
</div>
)}
</div>
)}

{addressInfo?.token && (
<div className="mt-2 text-xl sm:text-2xl font-semibold text-cyan-950 break-words">
{addressInfo.token?.name}{" "}
Expand Down Expand Up @@ -390,23 +387,24 @@ ${addressInfo.token.volume_24h ? `\n$${parseNumberFixed(addressInfo.token?.volum
</div>
)}

{Number(addressInfo?.coin_balance) > 1 && (
<div className="has-tooltip mt-1 text-cyan-950">
<span className="tooltip text-xs">
{deserializeWeiToEther(addressInfo?.coin_balance)} ETH
</span>
$
{parseWithER(
addressInfo?.coin_balance,
addressInfo?.exchange_rate
)}{" "}
in {getNativeCurrency(chainId)}
</div>
)}
{!addressInfo.is_contract &&
Number(addressInfo?.coin_balance) > 1 && (
<div className="has-tooltip mt-1 text-cyan-950">
<span className="tooltip text-xs">
{deserializeWeiToEther(addressInfo?.coin_balance)} ETH
</span>
$
{parseWithER(
addressInfo?.coin_balance,
addressInfo?.exchange_rate
)}{" "}
in {getNativeCurrency(chainId)}
</div>
)}

{addressInfo.is_contract && (
<div>
<div className="flex items-center justify-center pr-5 pl-5 mt-1">
<div className="flex justify-center items-center pr-5 pl-5 mt-1">
<div className="has-tooltip text-xs sm:text-base font-semibold sm:ml-3 md:ml-5 text-cyan-800 tracking-wide">
<div className="tooltip -ml-10">{addressInfo.hash}</div>
{addressInfo?.ens_domain_name ?? parseHash(addressInfo.hash)}
Expand All @@ -428,6 +426,21 @@ ${addressInfo.token.volume_24h ? `\n$${parseNumberFixed(addressInfo.token?.volum
)}
</div>

{addressInfo.is_contract &&
Number(addressInfo?.coin_balance) > 1 && (
<div className="has-tooltip mt-1 text-cyan-950">
<span className="tooltip text-xs">
{deserializeWeiToEther(addressInfo?.coin_balance)} ETH
</span>
$
{parseWithER(
addressInfo?.coin_balance,
addressInfo?.exchange_rate
)}{" "}
in {getNativeCurrency(chainId)}
</div>
)}

{reportCard && (
<div>
<button
Expand Down
16 changes: 8 additions & 8 deletions with-tailwindcss-app/components/TransactionCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { AddressInfo } from "@evmexplorer/blockscout";
import type { AddressInfoBlockscout } from "@evmexplorer/blockscout";
import type { TransactionBlockscout } from "@evmexplorer/blockscout";
import {
parseHash,
Expand All @@ -20,7 +20,7 @@ import { parseTxTypes } from "@/styles/parseTypes";

interface ContractProps {
address: string;
addressInfo: AddressInfo;
addressInfo: AddressInfoBlockscout;
chainId: number;
}

Expand Down Expand Up @@ -154,13 +154,13 @@ export const TransactionCard = (props: ContractProps) => {
{parseHash(tx.hash)}
</Link>

{tx.block && (
{tx.block_number && (
<p className="mt-2 font-base">
<Link
href={`/blocks/${network}/${tx.block}`}
href={`/blocks/${network}/${tx.block_number}`}
className="hover:text-teal-400"
>
{parseNumber(tx.block)}
{parseNumber(tx.block_number)}
</Link>
</p>
)}
Expand All @@ -175,7 +175,7 @@ export const TransactionCard = (props: ContractProps) => {
<span
className={
"px-2 sm:px-2.5 py-0.5 rounded font-bold mb-2 text-gray-100 hover:text-white break-all " +
parseTxTypes(tx.tx_types).background
parseTxTypes(tx.transaction_types).background
}
>
{tx.method}
Expand All @@ -184,10 +184,10 @@ export const TransactionCard = (props: ContractProps) => {
<span
className={
"px-2 sm:px-2.5 py-0.5 rounded font-bold mb-2 text-gray-100 hover:text-white break-words " +
parseTxTypes(tx.tx_types).background
parseTxTypes(tx.transaction_types).background
}
>
{parseTxTypes(tx.tx_types).placeholder}
{parseTxTypes(tx.transaction_types).placeholder}
</span>
)}

Expand Down
3 changes: 1 addition & 2 deletions with-tailwindcss-app/components/TransactionName.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ export const TransactionName = (props: ContractProps) => {
href={`/contracts/${network}/${transactionAddressData?.hash ?? "0x0000000000000000000000000000000000000000"}`}
className={`text-sm ${getColor(isSender)} font-medium px-1 sm:px-2.5 py-0.5 rounded`}
>
{parseCamelCase(transactionAddressData.implementation_name) ??
parseCamelCase(transactionAddressData.name) ??
{parseCamelCase(transactionAddressData.name) ??
parseHash(transactionAddressData?.hash)}
</Link>
)}
Expand Down
9 changes: 8 additions & 1 deletion with-tailwindcss-app/components/UniswapQuote.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import type { UniswapTokenProps } from "@evmexplorer/uniswap";
import { parseTokenPrice } from "@evmexplorer/utility";
import Link from "next/link";

interface UniswapTokenProps {
symbol: string;
price: number;
fee: string;
networkNameUniswap: string;
address: string;
}

export function UniswapQuote(props: UniswapTokenProps) {
const fee = props.fee;
const price = props.price;
Expand Down
5 changes: 3 additions & 2 deletions with-tailwindcss-app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"prettier:write": "prettier --write \"**/*.{ts,tsx}\""
},
"dependencies": {
"@evmexplorer/blockscout": "0.0.11",
"@evmexplorer/uniswap": "^0.0.3",
"@evmexplorer/blockscout": "0.0.12",
"@evmexplorer/uniswap": "^0.0.6",
"@evmexplorer/utility": "0.0.4",
"@headlessui/react": "^2.2.0",
"@heroicons/react": "^2.2.0",
Expand All @@ -33,6 +33,7 @@
"@types/react-dom": "18.3.1",
"@types/shortid": "^2.2.0",
"autoprefixer": "^10.4.20",
"dotenv": "^16.4.7",
"eslint": "^9",
"eslint-config-next": "15.0.4",
"postcss": "^8.4.49",
Expand Down
11 changes: 8 additions & 3 deletions with-tailwindcss-app/pages/blocks/[network]/[block].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,8 @@ export const BlocksPage: NextPage = () => {
<span
className={
"px-2 sm:px-2.5 py-0.5 rounded font-bold mb-2 text-gray-100 hover:text-white break-all " +
parseTxTypes(transaction.tx_types).background
parseTxTypes(transaction.transaction_types)
.background
}
>
{transaction.method}
Expand All @@ -180,10 +181,14 @@ export const BlocksPage: NextPage = () => {
<span
className={
"px-2 sm:px-2.5 py-0.5 rounded font-bold mb-2 text-gray-100 hover:text-white break-words " +
parseTxTypes(transaction.tx_types).background
parseTxTypes(transaction.transaction_types)
.background
}
>
{parseTxTypes(transaction.tx_types).placeholder}
{
parseTxTypes(transaction.transaction_types)
.placeholder
}
</span>
)}
</div>
Expand Down
11 changes: 8 additions & 3 deletions with-tailwindcss-app/pages/blocks/[network]/latest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,8 @@ export const BlocksPage: NextPage = () => {
<span
className={
"px-2 sm:px-2.5 py-0.5 rounded font-bold mb-2 text-gray-100 hover:text-white break-all " +
parseTxTypes(transaction.tx_types).background
parseTxTypes(transaction.transaction_types)
.background
}
>
{transaction.method}
Expand All @@ -192,10 +193,14 @@ export const BlocksPage: NextPage = () => {
<span
className={
"px-2 sm:px-2.5 py-0.5 rounded font-bold mb-2 text-gray-100 hover:text-white break-words " +
parseTxTypes(transaction.tx_types).background
parseTxTypes(transaction.transaction_types)
.background
}
>
{parseTxTypes(transaction.tx_types).placeholder}
{
parseTxTypes(transaction.transaction_types)
.placeholder
}
</span>
)}
</div>
Expand Down
Loading

0 comments on commit 2e24b59

Please sign in to comment.