@0xsequence/connect
Version:
Connect package for Sequence Web SDK
83 lines • 7.18 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Card, GradientAvatar, Skeleton, Text, TokenImage } from '@0xsequence/design-system';
import { useAPIClient, useGetSingleTokenBalance, useGetTokenMetadata } from '@0xsequence/hooks';
import { ContractType } from '@0xsequence/indexer';
import { useEffect, useState } from 'react';
import { formatUnits, zeroAddress } from 'viem';
import { useConfig } from 'wagmi';
import { capitalize, compareAddress, truncateAtMiddle } from '../../utils/helpers.js';
import { getNativeTokenInfoByChainId } from '../../utils/tokens.js';
import { decodeTransactions, DecodingType } from '../../utils/txnDecoding.js';
import { CollectibleTileImage } from '../CollectibleTileImage/index.js';
export const TxnDetailsSkeleton = () => {
return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex justify-center items-center gap-2", children: [_jsx(Skeleton, { className: "rounded-full", style: { width: 30, height: 30 } }), _jsxs("div", { className: "flex flex-col gap-2 items-start", children: [_jsx(Skeleton, { style: { width: 100, height: 14 } }), _jsx(Skeleton, { style: { width: 75, height: 14 } })] })] }), _jsxs("div", { className: "flex flex-col gap-2 items-end", children: [_jsx(Skeleton, { style: { width: 100, height: 14 } }), _jsx(Skeleton, { style: { width: 50, height: 12 } })] })] }));
};
export const TxnDetails = ({ address, txs, chainId }) => {
const apiClient = useAPIClient();
// const { fiatCurrency } = useSettings()
const [decodingType, setDecodingType] = useState(undefined);
const [transferProps, setTransferProps] = useState([]);
const [awardItemProps, setAwardItemProps] = useState([]);
const getTxnProps = async () => {
// @ts-ignore
const decodedTxnDatas = await decodeTransactions(apiClient, address, txs);
const type = decodedTxnDatas[0]?.type;
setDecodingType(type);
if (type === DecodingType.TRANSFER) {
setTransferProps(decodedTxnDatas);
}
if (type === DecodingType.AWARD_ITEM) {
setAwardItemProps(decodedTxnDatas);
}
};
useEffect(() => {
getTxnProps();
}, []);
if (!decodingType) {
return _jsx(TxnDetailsSkeleton, {});
}
if (decodingType === DecodingType.UNKNOWN) {
return _jsx(_Fragment, {});
}
if (transferProps[0]) {
return _jsx(TransferItemInfo, { address: address, transferProps: transferProps[0], chainId: chainId });
}
if (awardItemProps[0]) {
return _jsx(AwardItemInfo, { awardItemProps: awardItemProps[0] });
}
};
const TransferItemInfo = ({ address, transferProps, chainId }) => {
const { chains } = useConfig();
const contractAddress = transferProps.contractAddress;
const toAddress = transferProps.to;
const isNativeCoin = contractAddress ? compareAddress(contractAddress, zeroAddress) : true;
const is1155 = transferProps.contractType === ContractType.ERC1155;
const isNFT = transferProps.contractType === ContractType.ERC1155 || transferProps.contractType === ContractType.ERC721;
const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains);
const { data: tokenBalance } = useGetSingleTokenBalance({
chainId,
contractAddress,
accountAddress: address
});
const { data: tokenMetadata } = useGetTokenMetadata({
chainID: String(chainId),
contractAddress,
tokenIDs: transferProps.tokenIds ?? []
});
const decimals = isNativeCoin ? nativeTokenInfo.decimals : tokenBalance?.contractInfo?.decimals || 18;
const imageUrl = isNativeCoin
? nativeTokenInfo.logoURI
: isNFT
? tokenMetadata?.[0]?.image
: tokenBalance?.contractInfo?.logoURI;
const name = isNativeCoin ? nativeTokenInfo.name : isNFT ? tokenMetadata?.[0]?.name : tokenBalance?.contractInfo?.name || '';
const symbol = isNativeCoin ? nativeTokenInfo.symbol : isNFT ? '' : tokenBalance?.contractInfo?.symbol || '';
const amountSending = transferProps.amounts[0] ?? transferProps.value;
const showSquareImage = isNFT;
return (_jsxs(Card, { children: [_jsx("div", { className: "mb-2", children: _jsx(Text, { variant: "medium", color: "primary", children: capitalize(transferProps.type ?? '') }) }), _jsx("div", { className: "flex items-end justify-between mb-2", children: _jsxs("div", { className: "flex justify-between items-center gap-2", children: [showSquareImage ? (_jsx("div", { style: { width: '40px' }, children: _jsx(CollectibleTileImage, { imageUrl: imageUrl }) })) : (_jsx(TokenImage, { src: imageUrl, symbol: symbol, size: "md" })), _jsxs("div", { className: "flex flex-col items-start", children: [_jsx("div", { className: "flex flex-row items-center gap-1", children: _jsx(Text, { variant: "medium", color: "primary", children: name }) }), _jsx(Text, { color: "muted", variant: "normal", children: `${formatUnits(BigInt(amountSending), is1155 ? tokenMetadata?.[0]?.decimals || 0 : isNFT ? 0 : decimals)} ${symbol} ` })] })] }) }), toAddress !== undefined && (_jsxs("div", { children: [_jsx(Text, { variant: "normal", color: "muted", children: "To" }), _jsx("div", { className: "flex mt-2 rounded-xl bg-background-secondary w-full flex-row justify-between items-center p-4", style: { height: '52px' }, children: _jsxs("div", { className: "flex flex-row justify-center items-center gap-2", children: [_jsx(GradientAvatar, { size: "sm", address: toAddress }), _jsx(Text, { color: "primary", children: `0x${truncateAtMiddle(toAddress.substring(2), 12)}` })] }) })] }))] }));
};
// This is used only for demo purposes
const AwardItemInfo = ({ awardItemProps }) => {
return (_jsxs(Card, { children: [_jsx("div", { className: "mb-2", children: _jsx(Text, { variant: "medium", color: "primary", children: "Mint" }) }), _jsx("div", { className: "flex items-end justify-between mb-2", children: _jsxs("div", { className: "flex justify-between items-center gap-2", children: [_jsx("div", { style: { width: '40px' }, children: _jsx(CollectibleTileImage, { imageUrl: "https://dev-metadata.sequence.app/projects/277/collections/62/tokens/0/image.jpeg" }) }), _jsxs("div", { className: "flex flex-col items-start", children: [_jsx("div", { className: "flex flex-row items-center gap-1", children: _jsx(Text, { variant: "medium", color: "primary", children: "Waas Demo NFT" }) }), _jsx(Text, { color: "muted", variant: "normal", children: awardItemProps.amount })] })] }) }), awardItemProps.to !== undefined && (_jsxs("div", { children: [_jsx(Text, { variant: "normal", color: "muted", children: "To" }), _jsx("div", { className: "flex mt-2 rounded-xl bg-background-secondary w-full flex-row justify-between items-center p-4", style: { height: '52px' }, children: _jsxs("div", { className: "flex flex-row justify-center items-center gap-2", children: [_jsx(GradientAvatar, { size: "sm", address: awardItemProps.to }), _jsx(Text, { color: "primary", children: `0x${truncateAtMiddle(awardItemProps.to.substring(2), 12)}` })] }) })] }))] }));
};
//# sourceMappingURL=TxnDetails.js.map