@0xsequence/connect
Version:
Connect package for Sequence Web SDK
84 lines • 9.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TxnDetails = exports.TxnDetailsSkeleton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_1 = require("@0xsequence/design-system");
const hooks_1 = require("@0xsequence/hooks");
const indexer_1 = require("@0xsequence/indexer");
const react_1 = require("react");
const viem_1 = require("viem");
const wagmi_1 = require("wagmi");
const helpers_js_1 = require("../../utils/helpers.js");
const tokens_js_1 = require("../../utils/tokens.js");
const txnDecoding_js_1 = require("../../utils/txnDecoding.js");
const index_js_1 = require("../CollectibleTileImage/index.js");
const TxnDetailsSkeleton = () => {
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center items-center gap-2", children: [(0, jsx_runtime_1.jsx)(design_system_1.Skeleton, { className: "rounded-full", style: { width: 30, height: 30 } }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 items-start", children: [(0, jsx_runtime_1.jsx)(design_system_1.Skeleton, { style: { width: 100, height: 14 } }), (0, jsx_runtime_1.jsx)(design_system_1.Skeleton, { style: { width: 75, height: 14 } })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 items-end", children: [(0, jsx_runtime_1.jsx)(design_system_1.Skeleton, { style: { width: 100, height: 14 } }), (0, jsx_runtime_1.jsx)(design_system_1.Skeleton, { style: { width: 50, height: 12 } })] })] }));
};
exports.TxnDetailsSkeleton = TxnDetailsSkeleton;
const TxnDetails = ({ address, txs, chainId }) => {
const apiClient = (0, hooks_1.useAPIClient)();
// const { fiatCurrency } = useSettings()
const [decodingType, setDecodingType] = (0, react_1.useState)(undefined);
const [transferProps, setTransferProps] = (0, react_1.useState)([]);
const [awardItemProps, setAwardItemProps] = (0, react_1.useState)([]);
const getTxnProps = async () => {
// @ts-ignore
const decodedTxnDatas = await (0, txnDecoding_js_1.decodeTransactions)(apiClient, address, txs);
const type = decodedTxnDatas[0]?.type;
setDecodingType(type);
if (type === txnDecoding_js_1.DecodingType.TRANSFER) {
setTransferProps(decodedTxnDatas);
}
if (type === txnDecoding_js_1.DecodingType.AWARD_ITEM) {
setAwardItemProps(decodedTxnDatas);
}
};
(0, react_1.useEffect)(() => {
getTxnProps();
}, []);
let txnContent = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
if (transferProps[0]) {
txnContent = (0, jsx_runtime_1.jsx)(TransferItemInfo, { address: address, transferProps: transferProps[0], chainId: chainId });
}
if (awardItemProps[0]) {
txnContent = (0, jsx_runtime_1.jsx)(AwardItemInfo, { awardItemProps: awardItemProps[0] });
}
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [txnContent, (0, jsx_runtime_1.jsx)(design_system_1.Collapsible, { className: "mt-4", label: "Transaction data", defaultOpen: !decodingType || decodingType === txnDecoding_js_1.DecodingType.UNKNOWN, children: (0, jsx_runtime_1.jsx)(design_system_1.Card, { className: "overflow-x-scroll my-3", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { className: "mb-4", variant: "code", children: JSON.stringify(txs, null, 2) }) }) })] }));
};
exports.TxnDetails = TxnDetails;
const TransferItemInfo = ({ address, transferProps, chainId }) => {
const { chains } = (0, wagmi_1.useConfig)();
const contractAddress = transferProps.contractAddress;
const toAddress = transferProps.to;
const isNativeCoin = contractAddress ? (0, helpers_js_1.compareAddress)(contractAddress, viem_1.zeroAddress) : true;
const is1155 = transferProps.contractType === indexer_1.ContractType.ERC1155;
const isNFT = transferProps.contractType === indexer_1.ContractType.ERC1155 || transferProps.contractType === indexer_1.ContractType.ERC721;
const nativeTokenInfo = (0, tokens_js_1.getNativeTokenInfoByChainId)(chainId, chains);
const { data: tokenBalance } = (0, hooks_1.useGetSingleTokenBalance)({
chainId,
contractAddress,
accountAddress: address
});
const { data: tokenMetadata } = (0, hooks_1.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 ((0, jsx_runtime_1.jsxs)(design_system_1.Card, { children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "medium", color: "primary", children: (0, helpers_js_1.capitalize)(transferProps.type ?? '') }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-end justify-between mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center gap-2", children: [showSquareImage ? ((0, jsx_runtime_1.jsx)("div", { style: { width: '40px' }, children: (0, jsx_runtime_1.jsx)(index_js_1.CollectibleTileImage, { imageUrl: imageUrl }) })) : ((0, jsx_runtime_1.jsx)(design_system_1.TokenImage, { src: imageUrl, symbol: symbol, size: "md" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-row items-center gap-1", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "medium", color: "primary", children: name }) }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "muted", variant: "normal", children: `${(0, viem_1.formatUnits)(BigInt(amountSending), is1155 ? tokenMetadata?.[0]?.decimals || 0 : isNFT ? 0 : decimals)} ${symbol} ` })] })] }) }), toAddress !== undefined && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "normal", color: "muted", children: "To" }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row justify-center items-center gap-2", children: [(0, jsx_runtime_1.jsx)(design_system_1.GradientAvatar, { size: "sm", address: toAddress }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "primary", children: `0x${(0, helpers_js_1.truncateAtMiddle)(toAddress.substring(2), 12)}` })] }) })] }))] }));
};
// This is used only for demo purposes
const AwardItemInfo = ({ awardItemProps }) => {
return ((0, jsx_runtime_1.jsxs)(design_system_1.Card, { children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "medium", color: "primary", children: "Mint" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-end justify-between mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '40px' }, children: (0, jsx_runtime_1.jsx)(index_js_1.CollectibleTileImage, { imageUrl: "https://dev-metadata.sequence.app/projects/277/collections/62/tokens/0/image.jpeg" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-row items-center gap-1", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "medium", color: "primary", children: "Waas Demo NFT" }) }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "muted", variant: "normal", children: awardItemProps.amount })] })] }) }), awardItemProps.to !== undefined && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "normal", color: "muted", children: "To" }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row justify-center items-center gap-2", children: [(0, jsx_runtime_1.jsx)(design_system_1.GradientAvatar, { size: "sm", address: awardItemProps.to }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "primary", children: `0x${(0, helpers_js_1.truncateAtMiddle)(awardItemProps.to.substring(2), 12)}` })] }) })] }))] }));
};
//# sourceMappingURL=TxnDetails.js.map