@metadaoproject/wallet-adapter-react-ui
Version:
32 lines • 2.14 kB
JavaScript
import React, { useState } from 'react';
import { WalletIllustration } from './Walletillustration';
const steps = [
{
title: 'What is a Wallet?',
content: 'Wallets let you store, receive, send, and interact with digital assets like NFTs and tokens within web apps.',
},
{
title: 'Security & Ease of Use.',
content: 'With blockchain apps, your wallet is used as a secure and easy way to login and interact with web applications.',
},
{
title: 'Decentralized & Permissionless.',
content: 'An essential utility for permissionless blockchain usage. Wallets let you explore and participate in the new web.',
},
];
export const WalletInfoContent = () => {
const [currentStep, setCurrentStep] = useState(0);
const goToStep = (step) => {
setCurrentStep(step);
};
return (React.createElement("div", { className: "wallet-adapter-modal-info-content" },
React.createElement("h1", { className: "wallet-adapter-modal-info-title" }, "About Wallets"),
React.createElement(WalletIllustration, { className: "wallet-info-illustration", circleColors: ['#123456', '#789ABC', '#DEF012', '#345678'], currentStep: currentStep }),
React.createElement("div", { className: "wallet-info-slider" }, steps.map((step, index) => (React.createElement("div", { key: index, className: `wallet-info-step ${index === currentStep ? 'active' : ''}` },
React.createElement("h2", { className: "wallet-info-step-title" }, step.title),
React.createElement("p", { className: "wallet-info-step-content" }, step.content))))),
React.createElement("div", { className: "wallet-info-navigation-container" },
React.createElement("div", { className: "wallet-info-separator" }),
React.createElement("div", { className: "wallet-info-navigation" }, steps.map((_, index) => (React.createElement("button", { key: index, className: `step-indicator ${index === currentStep ? 'active' : ''}`, onClick: () => goToStep(index), "aria-label": `Go to step ${index + 1}` })))))));
};
//# sourceMappingURL=WalletInfoModal.js.map