@arbius/aa-wallet
Version:
A secure and flexible Account Abstraction wallet implementation for Arbitrum One chain applications.
42 lines (41 loc) • 1.67 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConnectButton = void 0;
const react_1 = __importDefault(require("react"));
const useAAWallet_1 = require("../hooks/useAAWallet");
const ConnectButton = ({ className = '', connectText = 'Connect', disconnectText = 'Disconnect', loadingText = 'Connecting...', }) => {
const { isConnected, connect, disconnect, address } = (0, useAAWallet_1.useAAWallet)();
const [isLoading, setIsLoading] = react_1.default.useState(false);
const handleConnect = async () => {
setIsLoading(true);
try {
await connect();
}
catch (error) {
console.error('Failed to connect:', error);
}
finally {
setIsLoading(false);
}
};
const handleDisconnect = () => {
disconnect();
};
const buttonClass = `
${isConnected ? 'px-3 py-0.5 text-sm' : 'px-8 py-2 text-lg'}
rounded-full font-medium transition-colors
bg-[#0A0047] hover:bg-[#07003a] text-white
${isLoading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}
${className}
`;
const displayAddress = address
? `${address.slice(0, 6)}...${address.slice(-4)}`
: '';
return (<button className={buttonClass} onClick={isConnected ? handleDisconnect : handleConnect} disabled={isLoading}>
{isLoading ? loadingText : isConnected ? `${disconnectText} (${displayAddress})` : connectText}
</button>);
};
exports.ConnectButton = ConnectButton;