@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
57 lines (56 loc) • 3.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Step = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_i18next_1 = require("react-i18next");
const Card_1 = require("../../components/Card");
const StepActions_1 = require("../../components/StepActions");
const Token_1 = require("../../components/Token");
const hooks_1 = require("../../hooks");
const providers_1 = require("../../providers");
const utils_1 = require("../../utils");
const DestinationWalletAddress_1 = require("./DestinationWalletAddress");
const GasStepProcess_1 = require("./GasStepProcess");
const StepProcess_1 = require("./StepProcess");
const StepTimer_1 = require("./StepTimer");
const Step = ({ step, fromToken, toToken, toAddress }) => {
const { t } = (0, react_i18next_1.useTranslation)();
const { getChainById } = (0, hooks_1.useChains)();
const { subvariant } = (0, providers_1.useWidgetConfig)();
const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
const getCardTitle = () => {
switch (step.type) {
case 'lifi':
const hasCrossStep = step.includedSteps.some((step) => step.type === 'cross');
const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap');
if (hasCrossStep && hasSwapStep) {
return subvariant === 'nft'
? t('main.stepBridgeAndBuy')
: t('main.stepSwapAndBridge');
}
if (hasCrossStep) {
return subvariant === 'nft'
? t('main.stepBridgeAndBuy')
: t('main.stepBridge');
}
return subvariant === 'nft'
? t('main.stepSwapAndBuy')
: t('main.stepSwap');
default:
return subvariant === 'nft'
? t('main.stepSwapAndBuy')
: t('main.stepSwap');
}
};
const formattedToAddress = (0, utils_1.shortenAddress)(toAddress);
const toAddressLink = toAddress
? `${getChainById(step.action.toChainId)?.metamask
.blockExplorerUrls[0]}address/${toAddress}`
: undefined;
return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { variant: stepHasError ? 'error' : 'default', children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
display: 'flex',
flex: 1,
}, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: getCardTitle() }), (0, jsx_runtime_1.jsx)(Card_1.CardTitle, { sx: { fontWeight: 500 }, children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: step }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { py: 1, children: [fromToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, py: 1 }) : null, (0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, px: 2, py: 1, dense: true }), step.execution?.process.map((process, index) => ((0, jsx_runtime_1.jsx)(StepProcess_1.StepProcess, { step: step, process: process }, index))), (0, jsx_runtime_1.jsx)(GasStepProcess_1.GasStepProcess, { step: step }), formattedToAddress && toAddressLink ? ((0, jsx_runtime_1.jsx)(DestinationWalletAddress_1.DestinationWalletAddress, { step: step, toAddress: formattedToAddress, toAddressLink: toAddressLink })) : null, toToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, py: 1 }) : null] })] }));
};
exports.Step = Step;