@stakefish/ui
Version:
<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>
180 lines (176 loc) • 7.94 kB
JavaScript
import { _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useCallback } from 'react';
import { styled } from '@mui/material/styles';
import Typography from './Typography.js';
import colors from '../theme/colors.js';
import boxShadow from '../theme/boxShadow.js';
import { borderRadius } from '../theme/borders.js';
import { typographyTheme } from '../theme/typography.js';
import '../_commonjsHelpers-1789f0cf.js';
import '@mui/material/Typography';
var formatAmount = function (amount, minimumFractionDigits, maximumFractionDigits) {
if (minimumFractionDigits === void 0) { minimumFractionDigits = 0; }
if (maximumFractionDigits === void 0) { maximumFractionDigits = 5; }
var nf = new Intl.NumberFormat("en", {
minimumFractionDigits: minimumFractionDigits,
maximumFractionDigits: amount > 10000 ? 0 : maximumFractionDigits
});
if (!nf) {
return amount.toFixed(2);
}
return nf.format(amount);
};
var borderSize = "4px";
var dotSize = "4px";
var borderMobileSize = "2px";
var commonStyles = {
borderRadius: borderRadius.sm,
border: "".concat(borderSize, " solid ").concat(colors.gray.white),
boxShadow: boxShadow.md,
backgroundColor: colors.gray.white,
padding: "8px 12px",
".MuiTypography-root": __assign({}, typographyTheme.button4)
};
var commonMobileStyles = {
borderRadius: borderRadius.xs1,
borderWidth: borderMobileSize,
boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.04)",
".MuiTypography-root": {
fontSize: "12px",
lineHeight: "16px"
}
};
var Dot = styled("div")(function (_a) {
var _b;
var theme = _a.theme;
return (_b = {
position: "relative",
width: dotSize,
height: dotSize,
borderRadius: theme.borders.radius.rounded,
backgroundColor: theme.palette.gray[900],
"&:before, &:after": {
content: "''",
position: "absolute",
top: 0,
width: "100%",
height: "100%",
borderRadius: theme.borders.radius.rounded,
backgroundColor: theme.palette.gray[900]
},
"&:before": {
left: "calc(100% + ".concat(dotSize, ")")
},
"&:after": {
right: "calc(100% + ".concat(dotSize, ")")
}
},
_b[theme.breakpoints.down("sm")] = {
width: "2px",
height: "2px",
"&:before": {
left: "calc(100% + 2px)"
},
"&:after": {
right: "calc(100% + 2px)"
}
},
_b);
});
var EllipseBox = styled("div")(function (_a) {
var _b;
var theme = _a.theme;
return (_b = {
position: "absolute",
top: 0,
right: 0,
width: theme.spacing(5.5),
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: theme.borders.radius.xs1,
transition: theme.transitions.create(["background-color"])
},
_b[theme.breakpoints.down("sm")] = {
position: "relative",
right: "auto",
top: "auto",
minHeight: "24px",
borderRadius: theme.borders.radius.xs2
},
_b);
});
var ItemBox = styled("div")(function (_a) {
var _b;
var theme = _a.theme;
return (_b = {
"&:first-of-type": {
marginRight: theme.spacing(1.5)
}
},
_b[theme.breakpoints.down("lg")] = {
"&.WalletCapsule-balance": {
display: "none"
}
},
_b[theme.breakpoints.down("sm")] = {
display: "none"
},
_b);
});
var CapsuleButton = styled("button")(function (_a) {
var _b;
var theme = _a.theme;
return (__assign(__assign({}, commonStyles), (_b = { position: "relative", display: "flex", alignItems: "center", paddingRight: "calc(12px + 44px)", cursor: "pointer", "&:hover, &:focus": {
".ellipse-box": {
backgroundColor: theme.palette.gray[100]
}
} }, _b[theme.breakpoints.down("sm")] = __assign(__assign({}, commonMobileStyles), { width: "28px", padding: 0 }), _b)));
});
var NetworkBox = styled("div")(function (_a) {
var _b;
var theme = _a.theme;
return (__assign(__assign({}, commonStyles), (_b = { display: "flex", alignItems: "center", padding: "7px 16px", marginRight: theme.spacing(1.25), borderWidth: 0, backgroundColor: theme.palette.blue.main }, _b[theme.breakpoints.down("sm")] = __assign(__assign({}, commonMobileStyles), { borderWidth: 0, padding: theme.spacing(0.75, 1), marginRight: theme.spacing(0.5) }), _b)));
});
var CapsuleBox = styled("div")(function (_a) {
var theme = _a.theme;
return ({
display: "flex",
fontFamily: theme.typography.fontFamilyHeadline
});
});
var UnconnectedCapsule = styled("button")(function (_a) {
var _b;
var theme = _a.theme;
return (__assign(__assign({}, commonStyles), (_b = { display: "block", cursor: "pointer", transition: theme.transitions.create(["background-color"]), "&:hover, &:focus": {
backgroundColor: theme.palette.gray[100]
} }, _b[theme.breakpoints.down("sm")] = __assign(__assign({}, commonMobileStyles), { padding: "4px 10px" }), _b)));
});
var defaultNetworkRenderer = function (network) {
switch (network.name) {
case "bnb":
return "BNB";
case "goerli":
return "Görli";
case "homestead":
return "Ethereum";
default: {
var chunks = network.name.split("");
chunks[0] = chunks[0].toUpperCase();
return chunks.join("");
}
}
};
var WalletCapsule = function (_a) {
var _b = _a.renderNetwork, renderNetwork = _b === void 0 ? defaultNetworkRenderer : _b, _c = _a.truncateEsnAddressAfter, truncateEsnAddressAfter = _c === void 0 ? 6 : _c, _d = _a.connectCopy, connectCopy = _d === void 0 ? "Connect Wallet" : _d, _e = _a.unit, unit = _e === void 0 ? "ETH" : _e, _f = _a.connected, connected = _f === void 0 ? false : _f, _g = _a.balance, balance = _g === void 0 ? 0 : _g, _h = _a.address, address = _h === void 0 ? "" : _h, network = _a.network, onClick = _a.onClick;
var truncateEsnAddress = useCallback(function (address) {
return "0x".concat(address.replace("0x", "").substring(0, truncateEsnAddressAfter), "...").concat(address.substring(address.length - truncateEsnAddressAfter));
}, [truncateEsnAddressAfter]);
if (connected) {
return (jsxs(CapsuleBox, { children: [network && (jsx(NetworkBox, { children: jsx(Typography, __assign({ variant: "button4", color: "inversePrimary" }, { children: renderNetwork(network) }), void 0) }, void 0)), jsxs(CapsuleButton, __assign({ onClick: onClick }, { children: [jsx(ItemBox, __assign({ className: "WalletCapsule-balance" }, { children: jsxs(Typography, __assign({ variant: "button4" }, { children: [formatAmount(balance, 9, 9), " ", unit] }), void 0) }), void 0), jsx(ItemBox, { children: jsx(Typography, __assign({ variant: "button4", color: "secondary" }, { children: truncateEsnAddress(address) }), void 0) }, void 0), jsx(EllipseBox, __assign({ className: "ellipse-box" }, { children: jsx(Dot, {}, void 0) }), void 0)] }), void 0)] }, void 0));
}
return (jsx(UnconnectedCapsule, __assign({ onClick: onClick }, { children: jsx(Typography, __assign({ variant: "button4" }, { children: connectCopy }), void 0) }), void 0));
};
export { WalletCapsule as default };