@stakefish/ui/components/WalletButton.js

<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>

import { _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import MuiBox from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import Button from './Button.js';
import Typography from './Typography.js';
import 'react';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import '../theme/colors.js';
import '../_commonjsHelpers-1789f0cf.js';
import '@mui/material/Typography';
import '../theme/typography.js';

/**
 * Styles
 */
var WalletLogo = styled(MuiBox)(function (_a) {
    var theme = _a.theme;
    return ({
        height: theme.spacing(4),
        width: theme.spacing(4),
        "& svg": {
            height: "100%",
            width: "100%"
        }
    });
});
var WalletButtonRoot = styled(MuiBox)(function (_a) {
    var _b;
    var theme = _a.theme;
    return (_b = {
            "& .Button-root": {
                height: "76px",
                borderRadius: theme.borders.radius.md,
                fontWeight: theme.typography.fontWeightNormal
            },
            "& .Button-root.Mui-disabled": {
                backgroundColor: theme.palette.gray[100]
            },
            "& .MuiButton-label": {
                color: theme.palette.text.primary
            },
            "& .MuiButton-startIcon": {
                marginRight: theme.spacing(2)
            },
            "*": {
                fontFamily: theme.typography.fontFamilyHeadline,
                fontWeight: 500
            }
        },
        _b[theme.breakpoints.down("sm")] = {
            "& .Button-root": {
                borderRadius: theme.borders.radius.sm,
                height: "auto",
                minHeight: "52px",
                padding: "10px 16px"
            },
            "& .MuiButton-startIcon": {
                marginLeft: 0,
                marginRight: theme.spacing(1.8)
            }
        },
        _b);
});
/**
 * Main
 */
var WalletButton = function (_a) {
    var wallet = _a.wallet, _b = _a.disabled, disabled = _b === void 0 ? false : _b, supportingElement = _a.supportingElement, onWalletButtonClick = _a.onWalletButtonClick;
    return (jsx(WalletButtonRoot, { children: jsx(Button, __assign({ fullWidth: true, align: "left", size: "md", color: "secondary", variant: disabled ? "contained" : "outlined", startIcon: jsx(WalletLogo, { children: wallet.logo }, void 0), onClick: function () {
                if (onWalletButtonClick)
                    onWalletButtonClick(wallet);
            }, disabled: disabled }, { children: jsxs(MuiBox, { children: [jsx(MuiBox, __assign({ textAlign: "left" }, { children: jsx(Typography, __assign({ variant: "callout", sx: { fontWeight: 500 } }, { children: wallet.name }), void 0) }), void 0), supportingElement && jsx(MuiBox, { children: supportingElement }, void 0)] }, void 0) }), void 0) }, void 0));
};

export { WalletButton as default };