@0xsplits/splits-kit
Version:
UI Components for working with 0xSplits contracts
137 lines • 10.6 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo } from 'react';
import { useSplitEarnings, useSplitMetadata, useSplitMetadataViaProvider, } from '@0xsplits/splits-sdk-react';
import { CHAIN_INFO, isSupportedChainId, } from '../../constants/chains';
import SplitRecipients from '../DisplaySplit/SplitRecipients';
import SkeletonLoader from '../DisplaySplit/SkeletonLoader';
import SplitBalances from '../DisplaySplit/SplitBalances';
import SplitHeader from '../DisplaySplit/SplitHeader';
import ChainLogo from '../util/ChainLogo';
import ComponentLayout from '../util/ComponentLayout';
import { readFromLocalStorage, saveToLocalStorage, } from '../../utils/localStorage';
var DisplaySplit = function (_a) {
var address = _a.address, chainId = _a.chainId, erc20TokenList = _a.erc20TokenList, _b = _a.displayBalances, displayBalances = _b === void 0 ? true : _b, _c = _a.displayChain, displayChain = _c === void 0 ? true : _c, _d = _a.linkToApp, linkToApp = _d === void 0 ? true : _d, _e = _a.shouldWithdrawOnDistribute, shouldWithdrawOnDistribute = _e === void 0 ? false : _e, _f = _a.width, width = _f === void 0 ? 'md' : _f, _g = _a.theme, theme = _g === void 0 ? 'system' : _g, onSuccess = _a.onSuccess, onError = _a.onError;
var _h = useSplitMetadata(chainId, address), split = _h.data, metadataError = _h.error, isLoadingMetadata = _h.isLoading;
var includeActiveBalances = true;
var _j = useSplitEarnings(chainId, address, {
includeActiveBalances: includeActiveBalances,
erc20TokenList: erc20TokenList,
}), splitEarnings = _j.data, isLoadingEarnings = _j.isLoading, earningsError = _j.error, refetchEarnings = _j.refetch;
var onSuccessWrapper = useCallback(function (token) {
refetchEarnings();
if (onSuccess)
onSuccess(token);
}, [refetchEarnings, onSuccess]);
useEffect(function () {
if (earningsError) {
// eslint-disable-next-line no-console
console.error(earningsError);
onError && onError(earningsError);
}
if (metadataError) {
// eslint-disable-next-line no-console
console.error(metadataError);
onError && onError(metadataError);
}
}, [earningsError, metadataError, onError]);
return (_jsx(ComponentLayout, { chainId: chainId, width: width, theme: theme, title: isSupportedChainId(chainId) ? (_jsx(SplitHeader, { chainId: chainId, address: address, linkToApp: linkToApp })) : undefined, corner: displayChain &&
isSupportedChainId(chainId) && (_jsx(ChainLogo, { chainInfo: CHAIN_INFO[chainId] })), error: metadataError &&
((metadataError.name === 'AccountNotFoundError' && {
title: 'Split not found',
body: "This account is not a Splits contract on the ".concat(isSupportedChainId(chainId) ? CHAIN_INFO[chainId].label : chainId, " network."),
}) ||
(metadataError.name === 'InvalidArgumentError' && {
title: 'Invalid Address',
body: "Address ".concat(address, " is not a valid Ethereum address."),
})), body: _jsx("div", { className: "flex flex-col text-xs", children: isLoadingMetadata || isLoadingEarnings ? (_jsx(SkeletonLoader, {})) : (_jsxs("div", { className: "space-y-4", children: [_jsx(SplitRecipients, { split: split, linkToApp: linkToApp }), split && displayBalances && !isLoadingEarnings && (_jsx(SplitBalances, { chainId: chainId, split: split, formattedSplitEarnings: splitEarnings, shouldWithdrawOnDistribute: shouldWithdrawOnDistribute, onSuccess: onSuccessWrapper, onError: onError }))] })) }) }));
};
export var DisplaySplitViaProvider = function (_a) {
var _b, _c, _d;
var address = _a.address, chainId = _a.chainId, erc20TokenList = _a.erc20TokenList, _e = _a.displayBalances, displayBalances = _e === void 0 ? true : _e, _f = _a.displayChain, displayChain = _f === void 0 ? true : _f, _g = _a.linkToApp, linkToApp = _g === void 0 ? true : _g, _h = _a.shouldWithdrawOnDistribute, shouldWithdrawOnDistribute = _h === void 0 ? false : _h, _j = _a.width, width = _j === void 0 ? 'md' : _j, _k = _a.theme, theme = _k === void 0 ? 'system' : _k, onSuccess = _a.onSuccess, onError = _a.onError, useCache = _a.useCache;
var localStorageKey = "splits-kit.display.".concat(chainId, ".").concat(address);
var localStorageData = readFromLocalStorage(localStorageKey);
var fetchMetadataOptions = useMemo(function () {
var _a, _b, _c, _d, _e, _f;
if (!useCache)
return;
return {
cacheData: __assign({ blockRange: (localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blockRange)
? BigInt(localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blockRange)
: undefined }, (((_a = localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blocks) === null || _a === void 0 ? void 0 : _a.createBlock)
? {
blocks: {
createBlock: ((_b = localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blocks) === null || _b === void 0 ? void 0 : _b.createBlock)
? BigInt((_c = localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blocks) === null || _c === void 0 ? void 0 : _c.createBlock)
: undefined,
updateBlock: ((_d = localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blocks) === null || _d === void 0 ? void 0 : _d.updateBlock)
? BigInt((_e = localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blocks) === null || _e === void 0 ? void 0 : _e.updateBlock)
: undefined,
latestScannedBlock: BigInt((_f = localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blocks) === null || _f === void 0 ? void 0 : _f.latestScannedBlock),
},
}
: {})),
};
}, [
useCache,
localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blockRange,
(_b = localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blocks) === null || _b === void 0 ? void 0 : _b.createBlock,
(_c = localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blocks) === null || _c === void 0 ? void 0 : _c.updateBlock,
(_d = localStorageData === null || localStorageData === void 0 ? void 0 : localStorageData.blocks) === null || _d === void 0 ? void 0 : _d.latestScannedBlock,
]);
var _l = useSplitMetadataViaProvider(chainId, address, fetchMetadataOptions), split = _l.data, currentBlockRange = _l.currentBlockRange, cacheData = _l.cacheData, metadataError = _l.error, isLoadingMetadata = _l.isLoading;
var includeActiveBalances = true;
var _m = useSplitEarnings(chainId, address, {
includeActiveBalances: includeActiveBalances,
erc20TokenList: erc20TokenList,
requireDataClient: false,
}), splitEarnings = _m.data, isLoadingEarnings = _m.isLoading, earningsError = _m.error, refetchEarnings = _m.refetch;
var onSuccessWrapper = useCallback(function (token) {
refetchEarnings();
if (onSuccess)
onSuccess(token);
}, [refetchEarnings, onSuccess]);
useEffect(function () {
if (earningsError) {
// eslint-disable-next-line no-console
console.error(earningsError);
onError && onError(earningsError);
}
if (metadataError) {
// eslint-disable-next-line no-console
console.error(metadataError);
onError && onError(metadataError);
}
}, [earningsError, metadataError, onError]);
useEffect(function () {
if (useCache && cacheData) {
saveToLocalStorage(localStorageKey, cacheData);
}
}, [useCache, cacheData]);
return (_jsx(ComponentLayout, { chainId: chainId, width: width, theme: theme, title: isSupportedChainId(chainId) ? (_jsx(SplitHeader, { chainId: chainId, address: address, linkToApp: linkToApp })) : undefined, corner: displayChain &&
isSupportedChainId(chainId) && (_jsx(ChainLogo, { chainInfo: CHAIN_INFO[chainId] })), error: metadataError &&
((metadataError.name === 'AccountNotFoundError' && {
title: 'Split not found',
body: "This account is not a Splits contract on the ".concat(isSupportedChainId(chainId) ? CHAIN_INFO[chainId].label : chainId, " network."),
}) ||
(metadataError.name === 'InvalidArgumentError' && {
title: 'Invalid Address',
body: "Address ".concat(address, " is not a valid Ethereum address."),
}) ||
(metadataError.name === 'V1MainnetNotSupportedError' && {
title: 'V1 Mainnet not supported',
body: 'This is a v1 split, which is not supported on Mainnet. Please use app.splits.org instead',
})), body: _jsx("div", { className: "flex flex-col text-xs", children: isLoadingMetadata ? (currentBlockRange ? (_jsxs("div", { children: ["Scanning blocks ", Number(currentBlockRange.to), " -", ' ', Number(currentBlockRange.from)] })) : (_jsx("div", { children: "Loading split..." }))) : isLoadingEarnings ? (_jsx("div", { children: "Loading balances..." })) : (_jsxs("div", { className: "space-y-4", children: [_jsx(SplitRecipients, { split: split, linkToApp: linkToApp }), split && displayBalances && !isLoadingEarnings && (_jsx(SplitBalances, { chainId: chainId, split: split, formattedSplitEarnings: splitEarnings, shouldWithdrawOnDistribute: shouldWithdrawOnDistribute, onSuccess: onSuccessWrapper, onError: onError }))] })) }) }));
};
export default DisplaySplit;
//# sourceMappingURL=index.js.map